Merge branch 'main' into commuter-rail-in-dd

.eslintrc.js

@@ -21,13 +21,23 @@ module.exports = {
   },
   parser: '@typescript-eslint/parser',
   parserOptions: {
+    warnOnUnsupportedTypeScriptVersion: false,
+    project: true,
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 2021,
+    ecmaVersion: 2022,
     sourceType: 'module',
   },
-  plugins: ['react', 'react-hooks', '@typescript-eslint', 'import', 'unused-imports', 'prettier'],
+  plugins: [
+    'react',
+    'react-hooks',
+    '@typescript-eslint',
+    'import',
+    'unused-imports',
+    'prettier',
+    'unicorn',
+  ],
   rules: {
     'import/named': 'warn',
     'import/no-unresolved': 'warn',
@@ -55,14 +65,17 @@ module.exports = {
     'react/no-unescaped-entities': 'off',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
-    'react/react-in-jsx-scope': 'warn',
+    'react/react-in-jsx-scope': 'error',
     'react/no-unused-prop-types': 'warn',
     'unused-imports/no-unused-imports': 'error',
     'no-console': 'error',
+    'no-empty': 'error',
+    'unicorn/no-empty-file': 'error',
     '@typescript-eslint/no-unused-vars': 'warn',
     '@typescript-eslint/ban-ts-comment': 'warn',
     '@typescript-eslint/no-explicit-any': 'warn',
     '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unnecessary-type-assertion': 'error',
     '@typescript-eslint/consistent-type-imports': [
       'error',
       {
@@ -101,5 +114,5 @@ module.exports = {
       },
     },
   ],
-  ignorePatterns: ['node_modules/**/*', 'build/**/*', 'out/**/*'],
+  ignorePatterns: ['node_modules/**/*', 'build/**/*', 'out/**/*', '*.js'],
 };

common/components/alerts/AlertNotice.tsx

@@ -6,11 +6,11 @@ export const AlertNotice: React.FC = () => {
   return (
     <>
       <div
-        className="pb-safe fixed bottom-24  right-2 z-10 cursor-pointer md:right-4 lg:bottom-4"
+        className="pb-safe fixed bottom-24 right-2 z-10 cursor-pointer md:right-4 lg:bottom-4"
         onClick={() => setAlertsOpen(!alertsOpen)}
         title="Alerts"
       >
-        <p className="text-4xl md:text-5xl " style={{ fontFamily: 'Helvetica Neue' }}>
+        <p className="text-4xl md:text-5xl" style={{ fontFamily: 'Helvetica Neue' }}>
           ⚠️
         </p>
       </div>

common/components/alerts/PastAlertModal.tsx

@@ -43,7 +43,7 @@ export const PastAlertModal: React.FC<PastAlertModalProps> = ({ alertsOpen, setA
                   <div className="flex flex-col items-center text-lg">
                     <p
                       style={{ fontFamily: 'Helvetica Neue' }}
-                      className="text-5xl text-yellow-300 "
+                      className="text-5xl text-yellow-300"
                     >
                       ⚠️
                     </p>
@@ -54,8 +54,8 @@ export const PastAlertModal: React.FC<PastAlertModalProps> = ({ alertsOpen, setA
                       <div
                         key={index}
                         className={classNames(
-                          alert.applied ? 'bg-yellow-200' : 'bg-yellow-100 ',
-                          'flex cursor-pointer flex-col rounded-md border border-yellow-200 bg-yellow-100 p-2 shadow-sm hover:bg-yellow-200 '
+                          alert.applied ? 'bg-yellow-200' : 'bg-yellow-100',
+                          'flex cursor-pointer flex-col rounded-md border border-yellow-200 bg-yellow-100 p-2 shadow-sm hover:bg-yellow-200'
                         )}
                         onClick={() => {
                           alertStore.changeAlertApplied(alertStore.alerts, index);

common/components/buttons/DonateButton.tsx

@@ -13,8 +13,8 @@ export const DonateButton: React.FC = () => {
         onMouseLeave={() => setHovered(false)}
         className="rounded-mdring-white group flex w-full cursor-pointer justify-start gap-x-2 rounded-md bg-tm-red hover:bg-white focus:outline-none focus:ring-1 md:justify-start"
       >
-        <div className="relative  flex flex-row items-center gap-2 pl-1 text-sm text-stone-100">
-          <div className="group flex h-8 w-8 items-center justify-center rounded-full ">
+        <div className="relative flex flex-row items-center gap-2 pl-1 text-sm text-stone-100">
+          <div className="group flex h-8 w-8 items-center justify-center rounded-full">
             <FontAwesomeIcon icon={faHeartSolid} size="lg" className="group-hover:text-tm-red" />
           </div>
           <p className="group-hover:text-tm-red">Make a donation</p>

common/components/charts/AggregateLineChart.tsx

@@ -172,7 +172,7 @@ export const AggregateLineChart: React.FC<AggregateLineProps> = ({
           ]}
         />
       </ChartDiv>
-      <div className="flex flex-row items-end gap-4 ">
+      <div className="flex flex-row items-end gap-4">
         {showLegend && <LegendLongTerm />}
         {startDate && (
           <DownloadButton

common/components/charts/CarouselGraphDiv.tsx

@@ -5,5 +5,5 @@ interface CarouselGraphDivProps {
 }
 
 export const CarouselGraphDiv: React.FC<CarouselGraphDivProps> = ({ children }) => {
-  return <div className="flex flex-col gap-y-1 pt-2 ">{children}</div>;
+  return <div className="flex flex-col gap-y-1 pt-2">{children}</div>;
 };

common/components/charts/Legend.tsx

@@ -14,7 +14,7 @@ export const LegendSingleDay: React.FC<LegendProps> = ({ showUnderRatio = false
         <div className="flex w-full flex-col rounded-md border border-stone-100 text-stone-700 shadow-sm">
           <Disclosure.Button className="">
             <div className="flex flex-row items-center justify-between px-4 py-1">
-              <p className="text-xs italic ">Legend</p>
+              <p className="text-xs italic">Legend</p>
               <FontAwesomeIcon icon={open ? faChevronUp : faChevronDown} className="" />
             </div>
           </Disclosure.Button>

common/components/charts/SingleDayLineChart.tsx

@@ -251,7 +251,7 @@ export const SingleDayLineChart: React.FC<SingleDayLineProps> = ({
       </ChartDiv>
       <div className="flex flex-col">
         {alerts && <AlertsDisclaimer alerts={alerts} />}
-        <div className="flex flex-row items-end gap-4 ">
+        <div className="flex flex-row items-end gap-4">
           {showLegend && benchmarkField ? (
             <LegendSingleDay showUnderRatio={showUnderRatio} />
           ) : (

common/components/controls/MobileControlPanel.tsx

@@ -32,7 +32,7 @@ export const MobileControlPanel: React.FC<MobileControlPanelProps> = ({
           </div>
           <div
             className={classNames(
-              'flex flex-row items-center justify-center ',
+              'flex flex-row items-center justify-center',
               lineColorBackground[line ?? 'DEFAULT']
             )}
           >

common/components/general/AlertsDisclaimer.tsx

@@ -11,7 +11,7 @@ export const AlertsDisclaimer: React.FC<AlertsDisclaimerProps> = ({ alerts }) =>
     <div>
       {alerts?.map((alert, index) => (
         <div key={index} className="flex flex-row items-baseline gap-1 p-1">
-          <p className="text-sm  text-stone-800">
+          <p className="text-sm text-stone-800">
             <span style={{ fontFamily: 'Helvetica Neue' }}>⚠️ </span>
             <span className="font-bold italic">
               {getDateString(alert.valid_from, alert.valid_to)}

common/components/general/ButtonGroup.tsx

@@ -54,7 +54,7 @@ export const ButtonGroup: <T extends string, K extends string>(
                       ? `${lineColorBackground[line ?? 'DEFAULT']} text-white hover:bg-opacity-90`
                       : `hover:${
                           lineColorBackground[line ?? 'DEFAULT']
-                        } bg-white text-stone-900 hover:bg-opacity-70 `
+                        } bg-white text-stone-900 hover:bg-opacity-70`
                   )}
                 >
                   <p className="leading-none">{option[1]}</p>

common/components/inputs/Button.tsx

@@ -23,7 +23,7 @@ export const Button: React.FC<ButtonProps> = ({ children, additionalClasses, ...
     <button
       type="button"
       className={classNames(
-        'flex items-center self-stretch rounded-md border px-3 py-1 text-sm font-medium text-white  text-opacity-90 shadow-sm hover:bg-opacity-70 focus:bg-opacity-0 focus:outline-none',
+        'flex items-center self-stretch rounded-md border px-3 py-1 text-sm font-medium text-white text-opacity-90 shadow-sm hover:bg-opacity-70 focus:bg-opacity-0 focus:outline-none',
         line && buttonHighlightFocus[line],
         line && lineColorDarkBackground[line],
         line && lineColorLightBorder[line],

common/components/inputs/DateSelection/DateSelection.tsx

@@ -87,7 +87,7 @@ export const DateSelection: React.FC<DateSelectionProps> = ({ type = 'combo' })
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Popover.Panel className="fixed bottom-[5.25rem] left-4 origin-bottom-left overflow-visible rounded-md  bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:bottom-auto md:left-auto md:right-auto md:top-auto md:mt-9 md:origin-top-left">
+          <Popover.Panel className="fixed bottom-[5.25rem] left-4 origin-bottom-left overflow-visible rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:bottom-auto md:left-auto md:right-auto md:top-auto md:mt-9 md:origin-top-left">
             {({ close }) => (
               <div className="flex w-screen max-w-[160px] flex-col overflow-hidden rounded-md bg-white leading-6 shadow-lg ring-1 ring-gray-900/5">
                 {type === 'combo' && <RangeSelectionTab range={range} setRange={setRange} />}

common/components/inputs/DateSelection/RangeButton.tsx

@@ -19,7 +19,7 @@ export const RangeButton: React.FC<RangeButtonProps> = ({ children, ...props })
       type="button"
       title="Range"
       className={classNames(
-        'inline-flex  items-center self-stretch border-l bg-white bg-opacity-50 px-3 py-1 text-sm font-medium text-white text-opacity-90 shadow-sm  hover:bg-opacity-100 focus:bg-opacity-100 focus:outline-none ',
+        'inline-flex items-center self-stretch border-l bg-white bg-opacity-50 px-3 py-1 text-sm font-medium text-white text-opacity-90 shadow-sm hover:bg-opacity-100 focus:bg-opacity-100 focus:outline-none',
         line && buttonHighlightFocus[line],
         lineColorDarkBorder[line ?? 'DEFAULT']
       )}

common/components/inputs/StationSelector.tsx

@@ -70,7 +70,7 @@ export const StationSelector: React.FC<StationSelector> = ({
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Listbox.Options className="md:max-w-screen absolute bottom-8 left-0 right-0 top-auto m-auto max-h-[60vh] max-w-xs overflow-auto rounded-md  border border-stone-200 bg-white  shadow-lg  ring-1 ring-black ring-opacity-5 focus:outline-none md:bottom-auto md:left-auto md:right-auto md:top-auto md:mt-1 md:max-h-[66vh] md:-translate-x-1/2 md:border-none">
+            <Listbox.Options className="md:max-w-screen absolute bottom-8 left-0 right-0 top-auto m-auto max-h-[60vh] max-w-xs overflow-auto rounded-md border border-stone-200 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:bottom-auto md:left-auto md:right-auto md:top-auto md:mt-1 md:max-h-[66vh] md:-translate-x-1/2 md:border-none">
               <div className="py-1">
                 {stationOptions?.map((station, stationIndex) => (
                   <Listbox.Option