Merge pull request #379 from USEPA/feature/apply-code-formatting-updates

Feature/apply code formatting updates
USEPA · Jan 29, 2024 · 5c4e1d6 · 5c4e1d6
2 parents 60e158b + 07ce01d
commit 5c4e1d6
Show file tree

Hide file tree

Showing 18 changed files with 482 additions and 196 deletions.
diff --git a/app/client/package-lock.json b/app/client/package-lock.json
diff --git a/app/client/package.json b/app/client/package.json
@@ -26,6 +26,7 @@
     "@typescript-eslint/parser": "6.7.4",
     "@vitejs/plugin-react-swc": "3.4.0",
     "autoprefixer": "10.4.16",
+    "clsx": "2.1.0",
     "eslint": "8.50.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.3",

diff --git a/app/client/src/components/confirmationDialog.tsx b/app/client/src/components/confirmationDialog.tsx
@@ -1,6 +1,7 @@
 import { Fragment, useRef } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
 // ---
 import { useDialogState, useDialogActions } from "@/contexts/dialog";
 
@@ -23,7 +24,7 @@ export function ConfirmationDialog() {
     <Transition.Root show={dialogShown} as={Fragment}>
       <Dialog
         as="div"
-        className="tw-relative tw-z-10"
+        className={clsx("tw-relative tw-z-10")}
         initialFocus={cancelRef}
         open={dialogShown}
         onClose={(_ev) => {
@@ -33,55 +34,83 @@ export function ConfirmationDialog() {
       >
         <Transition.Child
           as={Fragment}
-          enter="tw-duration-300 tw-ease-out"
-          enterFrom="tw-opacity-0"
-          enterTo="tw-opacity-100"
-          leave="tw-duration-200 tw-ease-in"
-          leaveFrom="tw-opacity-100"
-          leaveTo="tw-opacity-0"
+          enter={clsx("tw-duration-300 tw-ease-out")}
+          enterFrom={clsx("tw-opacity-0")}
+          enterTo={clsx("tw-opacity-100")}
+          leave={clsx("tw-duration-200 tw-ease-in")}
+          leaveFrom={clsx("tw-opacity-100")}
+          leaveTo={clsx("tw-opacity-0")}
         >
-          <div className="tw-fixed tw-inset-0 tw-bg-black/70 tw-transition-colors" />
+          <div
+            className={clsx(
+              "tw-fixed tw-inset-0 tw-bg-black/70 tw-transition-colors",
+            )}
+          />
         </Transition.Child>
 
-        <div className="tw-fixed tw-inset-0 tw-z-10 tw-overflow-y-auto">
-          <div className="tw-flex tw-min-h-full tw-items-end tw-justify-center tw-p-4 sm:tw-items-center">
+        <div className={clsx("tw-fixed tw-inset-0 tw-z-10 tw-overflow-y-auto")}>
+          <div
+            className={clsx(
+              "tw-flex tw-min-h-full tw-items-end tw-justify-center tw-p-4",
+              "sm:tw-items-center",
+            )}
+          >
             <Transition.Child
               as={Fragment}
-              enter="tw-duration-300 tw-ease-out"
-              enterFrom="tw-translate-y-4 tw-opacity-0 sm:tw-translate-y-0"
-              enterTo="tw-translate-y-0 tw-opacity-100"
-              leave="tw-duration-200 tw-ease-in"
-              leaveFrom="tw-translate-y-0 tw-opacity-100"
-              leaveTo="tw-translate-y-4 tw-opacity-0 sm:tw-translate-y-0"
+              enter={clsx("tw-duration-300 tw-ease-out")}
+              enterFrom={clsx(
+                "tw-translate-y-4 tw-opacity-0",
+                "sm:tw-translate-y-0",
+              )}
+              enterTo={clsx("tw-translate-y-0 tw-opacity-100")}
+              leave={clsx("tw-duration-200 tw-ease-in")}
+              leaveFrom={clsx("tw-translate-y-0 tw-opacity-100")}
+              leaveTo={clsx(
+                "tw-translate-y-4 tw-opacity-0",
+                "sm:tw-translate-y-0",
+              )}
             >
-              <Dialog.Panel className="tw-relative tw-transform tw-overflow-hidden tw-rounded-lg tw-bg-white tw-p-4 tw-shadow-xl tw-transition-all sm:tw-w-full sm:tw-max-w-md sm:tw-p-6">
+              <Dialog.Panel
+                className={clsx(
+                  "tw-relative tw-transform tw-overflow-hidden tw-rounded-lg tw-bg-white tw-p-4 tw-shadow-xl tw-transition-all",
+                  "sm:tw-w-full sm:tw-max-w-md sm:tw-p-6",
+                )}
+              >
                 {dismissable && dismissText && (
                   <div className="twpf">
-                    <div className="tw-absolute tw-right-0 tw-top-0 tw-pr-4 tw-pt-4">
+                    <div
+                      className={clsx(
+                        "tw-absolute tw-right-0 tw-top-0 tw-pr-4 tw-pt-4",
+                      )}
+                    >
                       <button
                         type="button"
-                        className="tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none hover:tw-text-gray-700 focus:tw-text-gray-700"
+                        className={clsx(
+                          "tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none",
+                          "hover:tw-text-gray-700",
+                          "focus:tw-text-gray-700",
+                        )}
                         onClick={(_ev) => {
                           dismissedAction && dismissedAction();
                           resetDialog();
                         }}
                       >
-                        <span className="tw-sr-only">Close</span>
+                        <span className={clsx("tw-sr-only")}>Close</span>
                         <XMarkIcon
-                          className="tw-h-6 tw-w-6 tw-transition-none"
+                          className={clsx("tw-h-6 tw-w-6 tw-transition-none")}
                           aria-hidden="true"
                         />
                       </button>
                     </div>
                   </div>
                 )}
 
-                <div className="tw-m-4">
-                  <h2 className="tw-text-xl">{heading}</h2>
+                <div className={clsx("tw-m-4")}>
+                  <h2 className={clsx("tw-text-xl")}>{heading}</h2>
 
                   <div className="usa-prose">{description}</div>
 
-                  <div className="tw-mt-4">
+                  <div className={clsx("tw-mt-4")}>
                     <ul className="usa-button-group">
                       <li className="usa-button-group__item">
                         <button

diff --git a/app/client/src/components/errorBoundary.tsx b/app/client/src/components/errorBoundary.tsx
@@ -1,5 +1,4 @@
-import type { ReactNode } from "react";
-import { Component, ErrorInfo } from "react";
+import { type ReactNode, Component, ErrorInfo } from "react";
 // ---
 import { messages } from "@/config";
 import { Message } from "@/components/message";

diff --git a/app/client/src/components/notifications.tsx b/app/client/src/components/notifications.tsx
@@ -5,6 +5,7 @@ import { CheckCircleIcon } from "@heroicons/react/24/outline";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { XCircleIcon } from "@heroicons/react/24/outline";
 import { XMarkIcon } from "@heroicons/react/20/solid";
+import clsx from "clsx";
 // ---
 import {
   useNotificationsState,
@@ -19,59 +20,83 @@ export function Notifications() {
     <div className="twpf">
       <div
         aria-live="assertive"
-        className="tw-pointer-events-none tw-fixed tw-inset-0 tw-z-20 tw-flex tw-items-end tw-p-4 sm:tw-items-start"
+        className={clsx(
+          "tw-pointer-events-none tw-fixed tw-inset-0 tw-z-20 tw-flex tw-items-end tw-p-4",
+          "sm:tw-items-start",
+        )}
       >
-        <div className="tw-flex tw-w-full tw-flex-col tw-items-center tw-space-y-4 sm:tw-items-end">
+        <div
+          className={clsx(
+            "tw-flex tw-w-full tw-flex-col tw-items-center tw-space-y-4",
+            "sm:tw-items-end",
+          )}
+        >
           <Transition
             show={displayed}
             as={Fragment}
-            enter="tw-transform tw-transition tw-duration-300 tw-ease-out"
-            enterFrom="tw-translate-y-2 tw-opacity-0 sm:tw-translate-y-0 sm:tw-translate-x-2"
-            enterTo="tw-translate-y-0 tw-opacity-100 sm:tw-translate-x-0"
-            leave="tw-transition tw-duration-100 tw-ease-in"
-            leaveFrom="tw-opacity-100"
-            leaveTo="tw-opacity-0"
+            enter={clsx(
+              "tw-transform tw-transition tw-duration-300 tw-ease-out",
+            )}
+            enterFrom={clsx(
+              "tw-translate-y-2 tw-opacity-0",
+              "sm:tw-translate-y-0 sm:tw-translate-x-2",
+            )}
+            enterTo={clsx(
+              "tw-translate-y-0 tw-opacity-100",
+              "sm:tw-translate-x-0",
+            )}
+            leave={clsx("tw-transition tw-duration-100 tw-ease-in")}
+            leaveFrom={clsx("tw-opacity-100")}
+            leaveTo={clsx("tw-opacity-0")}
           >
-            <div className="tw-pointer-events-auto tw-w-full tw-max-w-sm tw-overflow-hidden tw-rounded-lg tw-bg-white tw-shadow-xl tw-ring-1 tw-ring-black/10">
-              <div className="tw-p-4">
-                <div className="tw-flex tw-items-start">
-                  <div className="tw-flex-shrink-0">
+            <div
+              className={clsx(
+                "tw-pointer-events-auto tw-w-full tw-max-w-sm tw-overflow-hidden tw-rounded-lg tw-bg-white tw-shadow-xl tw-ring-1 tw-ring-black/10",
+              )}
+            >
+              <div className={clsx("tw-p-4")}>
+                <div className={clsx("tw-flex tw-items-start")}>
+                  <div className={clsx("tw-flex-shrink-0")}>
                     {type === "info" ? (
                       <InformationCircleIcon
-                        className="tw-h-6 tw-w-6 tw-text-blue-400"
+                        className={clsx("tw-h-6 tw-w-6 tw-text-blue-400")}
                         aria-hidden="true"
                       />
                     ) : type === "success" ? (
                       <CheckCircleIcon
-                        className="tw-h-6 tw-w-6 tw-text-green-400"
+                        className={clsx("tw-h-6 tw-w-6 tw-text-green-400")}
                         aria-hidden="true"
                       />
                     ) : type === "warning" ? (
                       <ExclamationTriangleIcon
-                        className="tw-h-6 tw-w-6 tw-text-yellow-400"
+                        className={clsx("tw-h-6 tw-w-6 tw-text-yellow-400")}
                         aria-hidden="true"
                       />
                     ) : type === "error" ? (
                       <XCircleIcon
-                        className="tw-h-6 tw-w-6 tw-text-red-400"
+                        className={clsx("tw-h-6 tw-w-6 tw-text-red-400")}
                         aria-hidden="true"
                       />
                     ) : null}
                   </div>
 
-                  <div className="tw-mx-3 tw-w-0 tw-flex-1 tw-pt-0.5">
+                  <div className={clsx("tw-mx-3 tw-w-0 tw-flex-1 tw-pt-0.5")}>
                     {body}
                   </div>
 
-                  <div className="tw-flex-shrink-0">
+                  <div className={clsx("tw-flex-shrink-0")}>
                     <button
+                      className={clsx(
+                        "tw-inline-flex tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none",
+                        "hover:tw-text-gray-700",
+                        "focus:tw-text-gray-700",
+                      )}
                       type="button"
-                      className="tw-inline-flex tw-rounded-md tw-bg-white tw-text-gray-400 tw-transition-none hover:tw-text-gray-700 focus:tw-text-gray-700"
-                      onClick={() => dismissNotification({ id: 0 })}
+                      onClick={(_ev) => dismissNotification({ id: 0 })}
                     >
-                      <span className="tw-sr-only">Close</span>
+                      <span className={clsx("tw-sr-only")}>Close</span>
                       <XMarkIcon
-                        className="tw-h-5 tw-w-5 tw-transition-none"
+                        className={clsx("tw-h-5 tw-w-5 tw-transition-none")}
                         aria-hidden="true"
                       />
                     </button>

diff --git a/app/client/src/components/providers.tsx b/app/client/src/components/providers.tsx
@@ -1,5 +1,4 @@
-import type { ReactNode } from "react";
-import { Suspense, lazy, useState, useEffect } from "react";
+import { type ReactNode, Suspense, lazy, useState, useEffect } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 // ---
 import { DialogProvider } from "@/contexts/dialog";

diff --git a/app/client/src/components/tooltip.tsx b/app/client/src/components/tooltip.tsx
@@ -1,4 +1,5 @@
 import { Root, Trigger, Portal, Content, Arrow } from "@radix-ui/react-tooltip";
+import clsx from "clsx";
 import icons from "uswds/img/sprite.svg";
 
 export function TextWithTooltip(props: {
@@ -9,17 +10,17 @@ export function TextWithTooltip(props: {
 }) {
   const { text, tooltip, iconName, iconClassNames } = props;
 
-  const svgClassNames = iconClassNames
-    ? `usa-icon text-base ${iconClassNames}`
-    : `usa-icon text-base`;
-
   return (
     <span className="display-inline-flex flex-align-center text-no-wrap">
       <Root delayDuration={0}>
         <Trigger asChild>
-          <button className="tw-m-0 tw-flex tw-rounded-full tw-border-0 tw-bg-transparent tw-p-0">
+          <button
+            className={clsx(
+              "tw-m-0 tw-flex tw-rounded-full tw-border-0 tw-bg-transparent tw-p-0",
+            )}
+          >
             <svg
-              className={svgClassNames}
+              className={clsx("usa-icon text-base", iconClassNames)}
               aria-hidden="true"
               focusable="false"
               role="img"

diff --git a/app/client/src/contexts/dialog.tsx b/app/client/src/contexts/dialog.tsx
@@ -1,7 +1,12 @@
 /* eslint-disable react-refresh/only-export-components */
 
-import type { Dispatch, ReactNode } from "react";
-import { createContext, useContext, useReducer } from "react";
+import {
+  type Dispatch,
+  type ReactNode,
+  createContext,
+  useContext,
+  useReducer,
+} from "react";
 
 type Props = {
   children: ReactNode;

diff --git a/app/client/src/contexts/notifications.tsx b/app/client/src/contexts/notifications.tsx
@@ -1,7 +1,12 @@
 /* eslint-disable react-refresh/only-export-components */
 
-import type { Dispatch, ReactNode } from "react";
-import { createContext, useContext, useReducer } from "react";
+import {
+  type Dispatch,
+  type ReactNode,
+  createContext,
+  useContext,
+  useReducer,
+} from "react";
 
 type Props = {
   children: ReactNode;

diff --git a/app/client/src/contexts/rebateYear.tsx b/app/client/src/contexts/rebateYear.tsx
@@ -1,7 +1,12 @@
 /* eslint-disable react-refresh/only-export-components */
 
-import type { Dispatch, ReactNode } from "react";
-import { createContext, useContext, useReducer } from "react";
+import {
+  type Dispatch,
+  type ReactNode,
+  createContext,
+  useContext,
+  useReducer,
+} from "react";
 
 type Props = {
   children: ReactNode;