Frontend component migration (#774)

* update manifest pie chart legend for mobile first view * implement Card Component * add vite hmr config to work with reverse proxy * adjust top bar navigation portions to be hidden on small screens for mobile freindly * remove import where we were just importing React to be in scope since this is no longer a requirement * add loader function to siteDetails feature * migrate site details feature from bootstrap to tailwind * bump axios from 1.7.2 - 1.7.4 * bump patch version for react-router-dom, lucide react * remove FontAwesome Library * migrate about page to tailwind * migrate 404 page to tailwind
USEPA · Aug 19, 2024 · fb69f28 · fb69f28
1 parent dbb6697
commit fb69f28
Show file tree

Hide file tree

Showing 170 changed files with 865 additions and 834 deletions.
diff --git a/client/app/App.scss b/client/app/App.scss
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 :root {
   --bs-card-cap-padding-y: 0;
   --haztrak-info: #33cccc;
@@ -104,7 +105,8 @@ $info: #009999;
   }
 }
 
-body {
+html, body {
+  height: 100%;
   margin: 0;
   font-family: var(--bs-body-font-family);
   font-size: var(--bs-body-font-size);

diff --git a/client/app/App.tsx b/client/app/App.tsx
@@ -1,5 +1,5 @@
-import { HtSpinner } from 'app/components/legacyUi';
-import React, { ReactElement, Suspense } from 'react';
+import { HtSpinner } from '~/components/legacyUi';
+import { ReactElement, Suspense } from 'react';
 import { Container } from 'react-bootstrap';
 import { RouterProvider } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';

diff --git a/client/app/components/Auth/LoginForm.tsx b/client/app/components/Auth/LoginForm.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { HtForm, HtSpinner } from 'app/components/legacyUi';
-import React from 'react';
+import { HtForm, HtSpinner } from '~/components/legacyUi';
+
 import { FloatingLabel, Form } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';

diff --git a/client/app/components/Charts/ManifestCountBarChart/ManifestCountBarChart.tsx b/client/app/components/Charts/ManifestCountBarChart/ManifestCountBarChart.tsx
@@ -73,17 +73,13 @@ const data = [
   },
 ];
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const monthTickFormatter = (tick: any) => {
   const date = new Date(tick);
 
   return date.getMonth() + 1;
 };
 
-const renderQuarterTick = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  tickProps: any
-): ReactElement<SVGElement> => {
+const renderQuarterTick = (tickProps: any): ReactElement<SVGElement> => {
   const { x, y, payload } = tickProps;
   const { value, offset } = payload;
   const date = new Date(value);

diff --git a/client/app/components/Charts/ManifestStatusPieChart/ManifestStatusPieChart.tsx b/client/app/components/Charts/ManifestStatusPieChart/ManifestStatusPieChart.tsx
@@ -17,7 +17,7 @@ const data: Entry[] = [
   { name: 'Pending', value: 40, searchParam: 'pending' },
   { name: 'Scheduled', value: 39, searchParam: 'scheduled' },
   { name: 'In Transit', value: 33, searchParam: 'intransit' },
-  { name: 'Ready for TSDF Signature', value: 21, searchParam: 'readyforsignature' },
+  { name: 'Ready Signature', value: 21, searchParam: 'readyforsignature' },
 ];
 
 const inactiveAlpha = '1';
@@ -54,7 +54,6 @@ const calculateCoordinates = (
   };
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const renderCustomLabel = (props: any): ReactElement | null => {
   const { cx, cy, midAngle, outerRadius, value, hover, activeIndex, index } = props;
   const { sin, cos } = calculateTrig(midAngle);
@@ -84,7 +83,6 @@ const renderCustomLabel = (props: any): ReactElement | null => {
   return activeIndex !== index ? labelElement : null;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const renderOuterRing = (props: any): ReactElement => {
   const { cx, cy, midAngle, outerRadius, startAngle, endAngle, fill, payload, percent } = props;
   const { sin, cos } = calculateTrig(midAngle);
@@ -147,7 +145,7 @@ const renderOuterRing = (props: any): ReactElement => {
 };
 
 /** Render the currently focused pie slice*/
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 const renderActiveShape = (props: any): ReactElement => {
   const { cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle, fill, onClick } = props;
   const { sin, cos } = calculateTrig(midAngle);
@@ -173,62 +171,38 @@ const renderActiveShape = (props: any): ReactElement => {
   );
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const renderLegend = (props: any): ReactElement => {
   const { payload, handleMouseEnter, handleMouseLeave, handleClick } = props;
 
   return (
-    <div
-      className="recharts-legend-wrapper"
-      style={{ position: 'absolute', width: '626px', height: '36px', left: '5px', bottom: '5px' }}
-    >
-      <ul
-        className="recharts-default-legend"
-        style={{ padding: '0px', margin: '10px', textAlign: 'center' }}
-      >
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any*/}
-        {payload.map((entry: any, index: number) => {
-          const dataEntry = data.find((d) => d.name === entry.value);
-          const activeAlphaColor = entry.color.slice(
-            entry.color.lastIndexOf(' ') + 1,
-            entry.color.length - 1
-          );
-          const activeLegend = activeAlphaColor === activeAlpha;
-          const baseStyle = { color: entry.color, paddingBottom: '2px' };
-          const spanStyle = activeLegend ? { ...baseStyle, borderBottom: `2px solid` } : baseStyle;
+    <div className="tw-relative tw-flex tw-flex-wrap tw-justify-center">
+      {payload.map((entry: any, index: number) => {
+        const dataEntry = data.find((d) => d.name === entry.value);
+        const activeAlphaColor = entry.color.slice(
+          entry.color.lastIndexOf(' ') + 1,
+          entry.color.length - 1
+        );
+        const activeLegend = activeAlphaColor === activeAlpha;
+        const baseStyle = { color: entry.color, paddingBottom: '2px' };
+        const spanStyle = activeLegend ? { ...baseStyle, borderBottom: `2px solid` } : baseStyle;
 
-          return (
-            <button
-              key={`item-${index}`}
-              onMouseEnter={() => handleMouseEnter(null, index)}
-              onMouseLeave={handleMouseLeave}
-              onClick={handleClick(dataEntry)}
-              className={`recharts-legend-item legend-item-${index}`}
-              style={{ display: 'inline-block', marginRight: '10px' }}
-            >
-              <svg
-                className="recharts-surface"
-                width="14"
-                height="14"
-                style={{ display: 'inline-block', verticalAlign: 'middle', marginRight: '4px' }}
-                viewBox="0 0 32 32"
-              >
-                <title></title>
-                <desc></desc>
-                <path
-                  stroke="none"
-                  fill={entry.color}
-                  d="M0,4h32v24h-32z"
-                  className="recharts-legend-icon"
-                />
-              </svg>
-              <span className="recharts-legend-item-text" style={spanStyle}>
-                {entry.value}
-              </span>
-            </button>
-          );
-        })}
-      </ul>
+        return (
+          <button
+            key={`item-${index}`}
+            onMouseEnter={() => handleMouseEnter(null, index)}
+            onMouseLeave={handleMouseLeave}
+            onClick={handleClick(dataEntry)}
+            className="tw-me-4 tw-inline-block"
+          >
+            <svg className="tw-me-4 tw-inline-block tw-h-4  tw-align-middle" viewBox="0 0 32 32">
+              <title></title>
+              <desc></desc>
+              <path stroke="none" fill={entry.color} d="M0,4h32v24h-32z" />
+            </svg>
+            <span style={spanStyle}>{entry.value}</span>
+          </button>
+        );
+      })}
     </div>
   );
 };
@@ -239,7 +213,6 @@ export function ManifestStatusPieChart() {
   const navigate = useNavigate();
 
   const handleMouseEnter = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (_: any, index: number) => {
       setAnimationIsActive(false); // stop animation if impatient user
       setActiveIndex(index);
@@ -252,7 +225,6 @@ export function ManifestStatusPieChart() {
     setActiveIndex(-1);
   }, [setActiveIndex]);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const renderLabel = (props: any) => {
     return renderCustomLabel({ ...props, hover: false, activeIndex: activeIndex });
   };
@@ -268,7 +240,6 @@ export function ManifestStatusPieChart() {
     <ResponsiveContainer minWidth={100} minHeight={300} height={'10%'}>
       <PieChart width={400} height={400}>
         <Legend
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           content={(props: any) =>
             renderLegend({ ...props, handleMouseEnter, handleMouseLeave, handleClick })
           }

diff --git a/client/app/components/Error/Error404.tsx b/client/app/components/Error/Error404.tsx
@@ -1,5 +1,4 @@
 import robotRedX from '/assets/img/robot/robot-bad-sign.jpg';
-import React from 'react';
 
 export function Error404() {
   return (

diff --git a/client/app/components/Help/HaztrakLicense.tsx b/client/app/components/Help/HaztrakLicense.tsx
@@ -1,35 +1,31 @@
-import { HtCard } from 'app/components/legacyUi';
-import React from 'react';
+import { Card, CardContent } from '~/components/ui';
 
 export function HaztrakLicense() {
   return (
-    <HtCard className="shadow-lg mx-5 my-3 bg-white p-2">
-      <HtCard.Body>
-        <div className="d-flex flex-column text-muted">
-          <p className="text-start">MIT License</p>
-          <p className="text-start">Copyright (c) 2022 U.S. Environmental Protection Agency</p>
-          <p className="text-start">
-            Permission is hereby granted, free of charge, to any person obtaining a copy of this
-            software and associated documentation files (the "Software"), to deal in the Software
-            without restriction, including without limitation the rights to use, copy, modify,
-            merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
-            permit persons to whom the Software is furnished to do so, subject to the following
-            conditions:
-          </p>
-          <p className="text-start">
-            The above copyright notice and this permission notice shall be included in all copies or
-            substantial portions of the Software.
-          </p>
-          <p className="text-start">
-            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-            INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-            PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-            LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT
-            OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-            OTHER DEALINGS IN THE SOFTWARE.
-          </p>
-        </div>
-      </HtCard.Body>
-    </HtCard>
+    <Card className="tw-shadow-ls tw-mx-5 tw-my-3 tw-bg-white tw-p-2">
+      <CardContent className="text-muted tw-space-y-2">
+        <p>MIT License</p>
+        <p>Copyright (c) 2022 U.S. Environmental Protection Agency</p>
+        <p>
+          Permission is hereby granted, free of charge, to any person obtaining a copy of this
+          software and associated documentation files (the "Software"), to deal in the Software
+          without restriction, including without limitation the rights to use, copy, modify, merge,
+          publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons
+          to whom the Software is furnished to do so, subject to the following conditions:
+        </p>
+        <p>
+          The above copyright notice and this permission notice shall be included in all copies or
+          substantial portions of the Software.
+        </p>
+        <p>
+          THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+          INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+          PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+          FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+          OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+          DEALINGS IN THE SOFTWARE.
+        </p>
+      </CardContent>
+    </Card>
   );
 }
diff --git a/client/app/components/Help/SectionTitle.tsx b/client/app/components/Help/SectionTitle.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 /** A section title for the textual content such as About and help content*/
 export function SectionTitle({
   title,
@@ -9,8 +7,8 @@ export function SectionTitle({
   variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }) {
   return (
-    <div className="section-title text-center pb-3 ">
-      <h2 className={`${variant ?? 'h2'} text-primary fw-bold text-uppercase position-relative`}>
+    <div className="tw-pb-3 tw-text-center ">
+      <h2 className={`${variant ?? 'h2'} text-primary tw-relative tw-font-bold tw-uppercase`}>
         <div
           className="bg-secondary-subtle"
           style={{

diff --git a/client/app/components/Layout/Nav/NavSection.tsx b/client/app/components/Layout/Nav/NavSection.tsx
@@ -1,6 +1,6 @@
 import { NavItem } from '~/components/Layout/Nav/NavItem';
 import { RoutesSection } from '~/components/Layout/Sidebar/SidebarRoutes';
-import React from 'react';
+
 import { Separator } from '~/components/ui/Separator/Separator';
 
 interface SidebarSectionProps {

diff --git a/client/app/components/Layout/Root.tsx b/client/app/components/Layout/Root.tsx
@@ -1,4 +1,4 @@
-import { HtSpinner } from 'app/components/legacyUi';
+import { HtSpinner } from '~/components/legacyUi';
 import React, { createContext, Dispatch, SetStateAction, Suspense, useState } from 'react';
 import { Container } from 'react-bootstrap';
 import { Outlet } from 'react-router-dom';
@@ -23,7 +23,7 @@ export function Root() {
       <div>
         <TopNav />
         <Sidebar />
-        <Container fluid>
+        <Container fluid className="tw-mt-20">
           <ErrorBoundary>
             <Suspense fallback={<HtSpinner center className="my-auto" />}>
               <Outlet />

diff --git a/client/app/components/Layout/Sidebar/Sidebar.spec.tsx b/client/app/components/Layout/Sidebar/Sidebar.spec.tsx
@@ -1,6 +1,6 @@
 import { Sidebar } from '~/components/Layout/Sidebar/Sidebar';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 
 afterEach(() => {

diff --git a/client/app/components/Layout/Sidebar/Sidebar.tsx b/client/app/components/Layout/Sidebar/Sidebar.tsx
@@ -1,11 +1,11 @@
 import logo from '/assets/img/haztrak-logos/haztrak-logo-zip-file/png/logo-black-crop.png';
-import { NavSection } from '~/components/Layout/Nav/NavSection';
-import { NavItem } from '~/components/Layout/Nav/NavItem';
-import { NavContext, NavContextProps } from '~/components/Layout/Root';
 import React, { ReactElement, useContext } from 'react';
 import { Link } from 'react-router-dom';
-import { routes } from './SidebarRoutes';
+import { NavItem } from '~/components/Layout/Nav/NavItem';
+import { NavSection } from '~/components/Layout/Nav/NavSection';
+import { NavContext, NavContextProps } from '~/components/Layout/Root';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '~/components/ui';
+import { routes } from './SidebarRoutes';
 
 /** Vertical sidebar for navigation that disappears when the viewport is small*/
 export function Sidebar(): ReactElement | null {

diff --git a/client/app/components/Layout/TopNav/TopNav.spec.tsx b/client/app/components/Layout/TopNav/TopNav.spec.tsx
@@ -1,5 +1,5 @@
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
-import React from 'react';
+import { cleanup, renderWithProviders, screen } from '~/mocks';
+
 import { afterEach, describe, expect, test } from 'vitest';
 import { TopNav } from '~/components/Layout/TopNav/TopNav';