Update dependencies for June 2024

.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'],
 };

.gitignore

@@ -30,6 +30,7 @@ build
 .env.test.local
 .env.production.local
 .eslintcache
+.envrc
 
 **/data
 

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

@@ -4,7 +4,7 @@
 import { faHeart as faHeartSolid } from '@fortawesome/free-solid-svg-icons';
 
 export const DonateButton: React.FC = () => {
   const [hovered, setHovered] = useState<boolean>(false);
   return (
     <>
       <Link
@@ -13,8 +13,8 @@
         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 @@
         <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>
@@ -31,7 +31,7 @@
   );
 };
 
 const LegendSingle: React.FC<LegendProps> = ({ showUnderRatio = false }) => {
   return (
     <>
       <div className="col-span-2 flex flex-row items-baseline gap-2 pb-1 italic lg:pb-0">

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

@@ -30,7 +30,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

@@ -69,7 +69,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

common/components/nav/BusDropdown.tsx

@@ -13,7 +13,7 @@ export const BusDropdown: React.FC<BusDropdownProps> = ({ close }) => {
       <BusRouteSelection />
       <div
         className={
-          'flex flex-col gap-[2px] rounded-b-md border border-t-0 border-mbta-bus  border-opacity-50 bg-neutral-800 px-1 py-[4px]'
+          'flex flex-col gap-[2px] rounded-b-md border border-t-0 border-mbta-bus border-opacity-50 bg-neutral-800 px-1 py-[4px]'
         }
         role={'navigation'}
       >

common/components/nav/BusRouteSelection.tsx

@@ -20,9 +20,9 @@ export const BusRouteSelection: React.FC = () => {
       >
         <div className="relative text-white text-opacity-95">
           <Listbox.Button className="relative w-full cursor-pointer border border-mbta-bus bg-tm-lightGrey py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
-            <span className="block truncate  ">{selected}</span>
+            <span className="block truncate">{selected}</span>
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <ChevronUpDownIcon className="h-5 w-5 " aria-hidden="true" />
+              <ChevronUpDownIcon className="h-5 w-5" aria-hidden="true" />
             </span>
           </Listbox.Button>
           <Transition

common/components/nav/CommuterRailRouteSelection.tsx

@@ -22,11 +22,9 @@ export const CommuterRailRouteSelection: React.FC = () => {
       >
         <div className="relative text-white text-opacity-95">
           <Listbox.Button className="relative w-full cursor-pointer border border-mbta-commuterRail bg-tm-lightGrey py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
-            <span className="block truncate  ">
-              {selected && COMMUTER_RAIL_LINE_NAMES[selected]}
-            </span>
+            <span className="block truncate">{selected && COMMUTER_RAIL_LINE_NAMES[selected]}</span>
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <ChevronUpDownIcon className="h-5 w-5 " aria-hidden="true" />
+              <ChevronUpDownIcon className="h-5 w-5" aria-hidden="true" />
             </span>
           </Listbox.Button>
           <Transition

common/components/nav/MenuDropdown.tsx

@@ -49,7 +49,7 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ line, route, childre
       >
         <div
           className={classNames(
-            'flex w-full flex-row items-center gap-2 rounded-t-md py-1 pl-1 text-sm ',
+            'flex w-full flex-row items-center gap-2 rounded-t-md py-1 pl-1 text-sm',
             `${lineColorBackground[line ?? 'DEFAULT']}`,
             selected
               ? `bg-opacity-100 text-white text-opacity-95`

common/components/widgets/WidgetTitle.tsx

@@ -31,7 +31,7 @@ export const WidgetTitle: React.FC<WidgetTitle> = ({
   });
   return (
     <div className="flex w-full flex-col items-baseline justify-between gap-x-4 gap-y-1 pb-1 text-base md:flex-row md:text-xl">
-      <div className="flex w-full flex-col md:w-auto ">
+      <div className="flex w-full flex-col md:w-auto">
         <div className="flex w-full flex-row items-baseline justify-between">
           <h2 className="whitespace-nowrap leading-tight text-stone-800">{title}</h2>
           {isMobile && <p className="text-xs italic text-stone-700">{date}</p>}

common/components/widgets/internal/SmallData.tsx

@@ -9,8 +9,8 @@ type SmallDataProps = {
 
 export const SmallData: React.FC<SmallDataProps> = ({ analysis, widgetValue }) => {
   return (
-    <div className=" flex flex-row items-end justify-between">
-      <p className={classNames('truncate text-sm leading-tight text-design-subtitleGrey ')}>
+    <div className="flex flex-row items-end justify-between">
+      <p className={classNames('truncate text-sm leading-tight text-design-subtitleGrey')}>
         {analysis}
       </p>
       <div className="flex flex-row items-baseline gap-x-1">{widgetValue.getFormattedValue()}</div>

common/components/widgets/internal/SmallDelta.tsx

@@ -11,7 +11,7 @@ type SmallDeltaProps = {
 
 export const SmallDelta: React.FC<SmallDeltaProps> = ({ analysis, widgetValue }) => {
   return (
-    <div className=" flex flex-row items-end justify-between">
+    <div className="flex flex-row items-end justify-between">
       <p
         className={classNames('truncate text-xs leading-tight text-design-subtitleGrey sm:text-sm')}
       >

common/components/widgets/internal/WidgetForCarousel.tsx

@@ -28,7 +28,7 @@ export const WidgetForCarousel: React.FC<WidgetForCarouselProps> = ({
           <div className="flex flex-row items-baseline gap-x-1">
             {widgetValue.getFormattedValue(true)}
           </div>
-          <div className="flex flex-row items-baseline gap-x-1 ">
+          <div className="flex flex-row items-baseline gap-x-1">
             {layoutKind !== 'no-delta' && (
               <Delta
                 widgetValue={widgetValue}

common/utils/slowZoneUtils.ts

@@ -29,8 +29,8 @@ const getDirection = (to: Station, from: Station) => {
 const formatSlowZones = (data: SlowZoneResponse[]): SlowZone[] =>
   data.map((sz) => {
     // This will never be undefined unless there is a new station that we don't have in our const file
-    const from = getParentStationForStopId(sz.fr_id) as Station;
-    const to = getParentStationForStopId(sz.to_id) as Station;
+    const from = getParentStationForStopId(sz.fr_id);
+    const to = getParentStationForStopId(sz.to_id);
     const direction = getDirection(to, from);
     return {
       order: from.order,

modules/commute/alerts/AlertBoxInner.tsx

@@ -53,7 +53,7 @@ export const AlertBoxInner: React.FC<AlertBoxInnerProps> = ({
         <div className="flex w-full flex-col items-center justify-center text-stone-100">
           <div
             className={classNames(
-              'flex w-full flex-row items-center pr-2 text-lg ',
+              'flex w-full flex-row items-center pr-2 text-lg',
               _noShrink && 'flex-wrap'
             )}
           >
@@ -62,7 +62,7 @@ export const AlertBoxInner: React.FC<AlertBoxInnerProps> = ({
 
           <div
             className={classNames(
-              'flex w-full flex-row items-center  gap-x-1 text-center text-stone-200',
+              'flex w-full flex-row items-center gap-x-1 text-center text-stone-200',
               _noShrink && 'flex-wrap'
             )}
           >

modules/commute/alerts/DelayAlert.tsx

@@ -20,7 +20,7 @@ const getDescription = (alert: FormattedAlert, lineShort: LineShort, busRoute?:
     const { min, max } = getStations(alert.stops, lineOrRoute);
     return (
       <>
-        <p className="mr-1 ">Delays</p>
+        <p className="mr-1">Delays</p>
         <p className="font-bold">{min?.stop_name}</p>
         <FontAwesomeIcon icon={faLeftRight} className={'mx-2 h-4 w-4'} />
         <p className="font-bold">{max?.stop_name}</p>
@@ -35,12 +35,12 @@ const getDescription = (alert: FormattedAlert, lineShort: LineShort, busRoute?:
         return match ? match[1] : '';
       });
     return (
-      <p className="mr-1 ">
+      <p className="mr-1">
         Delays on {lineOrRoute} {!busRoute && 'Line'} ({formattedRoutes?.join(', ')})
       </p>
     );
   }
-  return <p className="mr-1 ">Delays</p>;
+  return <p className="mr-1">Delays</p>;
 };
 
 export const DelayAlert: React.FC<DelayAlertProps> = ({ alert, lineShort, type, busRoute }) => {

modules/commute/alerts/ShuttleAlert.tsx

@@ -23,7 +23,7 @@ export const ShuttleAlert: React.FC<ShuttleAlertProps> = ({ alert, lineShort, ty
       alert={alert}
       noShrink={noShrink}
     >
-      <p className="mr-1 ">Shuttling</p>
+      <p className="mr-1">Shuttling</p>
       <p className="font-bold">{min?.stop_name}</p>
       <FontAwesomeIcon icon={faLeftRight} className={'mx-2 h-4 w-4'} />
       <p className="font-bold">{max?.stop_name}</p>

modules/commute/alerts/StopClosureAlert.tsx

@@ -16,7 +16,7 @@ export const StopClosure: React.FC<StopClosureProps> = ({ alert, type }) => {
       alert={alert}
       type={type}
     >
-      <p className="mr-1 ">Stop Closures</p>
+      <p className="mr-1">Stop Closures</p>
     </AlertBoxInner>
   );
 };

modules/commute/alerts/SuspensionAlert.tsx

@@ -20,14 +20,14 @@ const getDescription = (alert: FormattedAlert, lineShort: LineShort) => {
 
     return (
       <>
-        <p className="mr-1 ">No service</p>
+        <p className="mr-1">No service</p>
         <p className="font-bold">{min?.stop_name}</p>
         <FontAwesomeIcon icon={faLeftRight} className={'mx-2 h-4 w-4'} />
         <p className="font-bold">{max?.stop_name}</p>
       </>
     );
   }
-  return <p className="mr-1 ">Detours on {lineShort} Line</p>;
+  return <p className="mr-1">Detours on {lineShort} Line</p>;
 };
 
 export const SuspensionAlert: React.FC<SuspensionAlertProps> = ({

modules/dashboard/DesktopHeader.tsx

@@ -26,7 +26,7 @@ export const DesktopHeader: React.FC = () => {
   return (
     <div
       className={classNames(
-        'sticky top-0 z-10 mx-3 mb-2 flex flex-row justify-between gap-x-6 rounded-bl-none rounded-br-md  border-gray-200 text-white shadow-md md:mx-0 md:mr-4 md:border-l-0',
+        'sticky top-0 z-10 mx-3 mb-2 flex flex-row justify-between gap-x-6 rounded-bl-none rounded-br-md border-gray-200 text-white shadow-md md:mx-0 md:mr-4 md:border-l-0',
         lineColorBackground[line ?? 'DEFAULT']
       )}
     >