Updates packages and eslint options for June 2024 (#78)

* Updates packages and eslint options for June 2024 * Updating shutdowns for August
transitmatters · Jul 27, 2024 · 47e0edb · 47e0edb
1 parent a2f99e2
commit 47e0edb
Show file tree

Hide file tree

Showing 11 changed files with 414 additions and 315 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -3,7 +3,10 @@ module.exports = {
   env: { browser: true, es2020: true },
   extends: [
     'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
     'plugin:react-hooks/recommended',
     'prettier',
   ],
@@ -15,6 +18,7 @@ module.exports = {
     'import/no-self-import': 'error',
     'import/order': 'error',
     'import/newline-after-import': 'error',
+    'import/no-unresolved': 'off',
     'import/no-unused-modules': ['warn', { unusedExports: true }],
     'import/no-useless-path-segments': [
       'error',
@@ -29,6 +33,18 @@ module.exports = {
         ignoreTypeImports: false,
       },
     ],
+    'no-console': 'error',
+    'no-empty': 'error',
+    '@typescript-eslint/no-unused-vars': 'warn',
+    '@typescript-eslint/ban-ts-comment': 'warn',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'react/prop-types': 'off',
+    'react/jsx-no-target-blank': 'warn',
+    'react/no-unescaped-entities': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'react/react-in-jsx-scope': 'off',
+    'react/no-unused-prop-types': 'warn',
     'prettier/prettier': 'error',
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,11 +23,11 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/react-fontawesome": "^0.2.1",
-    "@headlessui/react": "^2.0.3",
-    "@heroicons/react": "^2.1.3",
-    "@tanstack/react-query": "^5.37.1",
-    "@tanstack/react-router": "^1.33.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@headlessui/react": "^2.1.0",
+    "@heroicons/react": "^2.1.4",
+    "@tanstack/react-query": "^5.45.1",
+    "@tanstack/react-router": "^1.39.8",
     "bezier-js": "^6.1.4",
     "chart.js": "^4.4.3",
     "chartjs-adapter-date-fns": "^3.0.0",
@@ -47,26 +47,26 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@tanstack/router-vite-plugin": "^1.32.17",
+    "@tanstack/router-vite-plugin": "^1.39.12",
     "@types/bezier-js": "^4.1.3",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-scroll": "^1.8.10",
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.9.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "postcss": "^8.4.38",
-    "prettier": "3.3.1",
+    "prettier": "~3.3.2",
     "tailwindcss": "^3.4.4",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.13"
+    "typescript": "~5.5.2",
+    "vite": "^5.3.1"
   }
 }
diff --git a/src/components/CalendarSubscribeButton.tsx b/src/components/CalendarSubscribeButton.tsx
@@ -2,8 +2,7 @@ import { faCalendarPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
 import { CheckIcon, DocumentDuplicateIcon } from '@heroicons/react/16/solid';
-import React from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { useCopyToClipboard } from 'usehooks-ts';
 
 interface SubscribeModalProps {

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -8,13 +8,15 @@ const Footer = () => {
         className="text-sm dark:text-white px-2 hover:underline cursor-pointer"
         href="https://transitmatters.org/transitmatters-labs"
         target="_blank"
+        rel="noreferrer"
       >
         About
       </a>
       <a
         className="text-sm dark:text-white px-2 hover:underline cursor-pointer"
         href="https://transitmatters.org/join"
         target="_blank"
+        rel="noreferrer"
       >
         Join
       </a>
@@ -23,6 +25,7 @@ const Footer = () => {
         href="https://transitmatters.org/donate"
         target="_blank"
         title={'Support our work, Donate'}
+        rel="noreferrer"
       >
         <FontAwesomeIcon
           icon={faHeartSolid}
@@ -35,6 +38,7 @@ const Footer = () => {
         className="text-sm dark:text-white px-2 hover:underline cursor-pointer"
         href="https://github.com/transitmatters/shutdown-tracker"
         target="_blank"
+        rel="noreferrer"
       >
         Source Code
       </a>

diff --git a/src/components/LineButtons.tsx b/src/components/LineButtons.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Listbox, Transition } from '@headlessui/react';
+import { Listbox, ListboxOption, ListboxOptions, Transition } from '@headlessui/react';
 import { Link } from '@tanstack/react-router';
 import { Lines, useStore } from '../store';
 import { capitalize, colorToStyle } from '../styles';
@@ -35,10 +35,10 @@ export const LineButtons = () => {
             leaveFrom="transform scale-100 opacity-100"
             leaveTo="transform scale-95 opacity-0"
           >
-            <Listbox.Options>
+            <ListboxOptions>
               {(['all', 'red', 'blue', 'orange', 'green'] as (Lines | 'all')[]).map((color) => (
-                <Link to="/$line" params={{ line: color }}>
-                  <Listbox.Option
+                <Link to="/$line" key={color} params={{ line: color }}>
+                  <ListboxOption
                     key={`button-${color}`}
                     value={color}
                     className={classNames(
@@ -52,10 +52,10 @@ export const LineButtons = () => {
                     )}
                   >
                     {color === 'all' ? 'All lines' : ` ${capitalize(color)} line`}
-                  </Listbox.Option>
+                  </ListboxOption>
                 </Link>
               ))}
-            </Listbox.Options>
+            </ListboxOptions>
           </Transition>
         </Listbox>
       </div>

diff --git a/src/components/LineGraph.tsx b/src/components/LineGraph.tsx
@@ -1,21 +1,21 @@
 import 'chartjs-adapter-date-fns';
 
-import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
+import React, { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
 import { Bar } from 'react-chartjs-2';
 import { useNavigate } from '@tanstack/react-router';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { enUS } from 'date-fns/locale';
 import { type ChartDataset } from 'chart.js';
 import ChartjsPluginWatermark from 'chartjs-plugin-watermark';
-import React from 'react';
 import { Lines, useStore } from '../store';
 import { COLORS } from '../constants/colors';
 import { shutdowns } from '../constants/shutdowns';
 import { watermarkLayout } from '../utils/watermark';
 import { useBreakpoint } from '../hooks/useBreakpoint';
 import { cardStyles } from '../constants/styles';
 import { Shutdown } from '../types';
+import { abbreviateStationName } from '../constants/stations';
 import { CalendarSubscribeButton } from './CalendarSubscribeButton';
 
 dayjs.extend(utc);
@@ -24,6 +24,9 @@ interface LineGraphProps {
   line: Lines | 'all';
 }
 
+const stationPairLabel = (shutdown: Shutdown) =>
+  `${abbreviateStationName(shutdown.start_station?.stop_name)}-${abbreviateStationName(shutdown.end_station?.stop_name)}`;
+
 export const LineGraph: React.FunctionComponent<LineGraphProps> = ({ line: selectedLine }) => {
   const { darkMode, range } = useStore();
   const isMobile = !useBreakpoint('sm');
@@ -58,9 +61,7 @@ export const LineGraph: React.FunctionComponent<LineGraphProps> = ({ line: selec
                     : true
               ),
             ])
-            .map(([, shutdowns]) =>
-              shutdowns.map((sd) => `${sd.start_station?.stop_name}-${sd.end_station?.stop_name}`)
-            )
+            .map(([, shutdowns]) => shutdowns.map((sd) => stationPairLabel(sd)))
             .flat()
         )
       ),
@@ -91,7 +92,7 @@ export const LineGraph: React.FunctionComponent<LineGraphProps> = ({ line: selec
                 return {
                   x: szTimePeriod,
                   y: szTimePeriod,
-                  id: `${sd.start_station?.stop_name}-${sd.end_station?.stop_name}`,
+                  id: stationPairLabel(sd),
                   start_station: sd.start_station?.stop_name,
                   end_station: sd.end_station?.stop_name,
                   line: line,

diff --git a/src/components/Shutdowns/ShutdownDetails.tsx b/src/components/Shutdowns/ShutdownDetails.tsx
@@ -13,20 +13,22 @@ import ChartContainer from './ChartContainer';
 import ShutdownMap from './ShutdownMap';
 import StatusBadge from './StatusBadge';
 
-const ShutdownDetails = ({
-  line,
-  start_date,
-  end_date,
-  start_station,
-  end_station,
-  handleBack,
-}: {
+interface ShutdownDetailsProps {
   line: Lines;
   handleBack: () => void;
   start_date: string;
   end_date: string;
   start_station: string;
   end_station: string;
+}
+
+const ShutdownDetails: React.FunctionComponent<ShutdownDetailsProps> = ({
+  line,
+  start_date,
+  end_date,
+  start_station,
+  end_station,
+  handleBack,
 }) => {
   const [isReversed, setIsReversed] = useState(false);
   const direction = isReversed ? 'Northbound' : 'Southbound';

diff --git a/src/components/Shutdowns/StopTimeline.tsx b/src/components/Shutdowns/StopTimeline.tsx
@@ -27,7 +27,7 @@ const StopTimeline = ({ shutdown, line }: StopTimelineProps) => {
       )}
     >
       {stops.map((station) => (
-        <li>
+        <li key={station.station}>
           <div className="pt-2 md:block md:pt-0 ">
             <div
               className={classNames(

diff --git a/src/constants/shutdowns.json b/src/constants/shutdowns.json
@@ -264,9 +264,9 @@
     {
       "start_station": "JFK/UMass (Braintree)",
       "end_station": "Braintree",
-      "start_date": "2024-09-03",
-      "stop_date": "2024-09-18",
-      "alert": "https://www.mbta.com/alerts"
+      "start_date": "2024-09-06",
+      "stop_date": "2024-09-29",
+      "alert": "https://www.mbta.com/news/2024-07-18/major-red-line-braintree-branch-improvement-work-take-place-september-6-29-mbta"
     },
     {
       "start_station": "Kendall/MIT",
@@ -382,6 +382,13 @@
       "stop_date": "2024-08-04",
       "alert": "https://www.mbta.com/news/2024-07-17/august-service-changes-mbta-continues-repair-work-improve-reliability-across-the"
     },
+    {
+      "start_station": "Back Bay",
+      "end_station": "Forest Hills",
+      "start_date": "2024-08-10",
+      "stop_date": "2024-08-11",
+      "alert": "https://www.mbta.com/news/2024-07-17/august-service-changes-mbta-continues-repair-work-improve-reliability-across-the"
+    },
     {
       "start_station": "Wellington",
       "end_station": "Back Bay",

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -71,9 +71,9 @@ const Home = () => {
                 <path fill="#00843d" d="m24.03 0a24 24 0 1 0 24 24 24 24 0 0 0 -24-24"></path>
                 <text
                   fill="#fff"
-                  font-family="HelveticaNeue-Bold, Helvetica Neue"
-                  font-size="29"
-                  font-weight="700"
+                  fontFamily="HelveticaNeue-Bold, Helvetica Neue"
+                  fontSize="29"
+                  fontWeight="700"
                   transform="translate(13.79185 35.06978)"
                 >
                   B
@@ -91,9 +91,9 @@ const Home = () => {
                 <path fill="#00843d" d="m24 0a24 24 0 1 0 24 24 24 24 0 0 0 -24-24"></path>
                 <text
                   fill="#fff"
-                  font-family="HelveticaNeue-Bold, Helvetica Neue"
-                  font-size="29"
-                  font-weight="700"
+                  fontFamily="HelveticaNeue-Bold, Helvetica Neue"
+                  fontSize="29"
+                  fontWeight="700"
                   transform="translate(13.25492 34.06979)"
                 >
                   C
@@ -111,9 +111,9 @@ const Home = () => {
                 <path fill="#00843d" d="m24.03 0a24 24 0 1 0 24 24 24 24 0 0 0 -24-24"></path>
                 <text
                   fill="#fff"
-                  font-family="HelveticaNeue-Bold, Helvetica Neue"
-                  font-size="29"
-                  font-weight="700"
+                  fontFamily="HelveticaNeue-Bold, Helvetica Neue"
+                  fontSize="29"
+                  fontWeight="700"
                   transform="translate(13.25519 34.56984)"
                 >
                   D
@@ -131,9 +131,9 @@ const Home = () => {
                 <path fill="#00843d" d="m24.03 0a24 24 0 1 0 24 24 24 24 0 0 0 -24-24"></path>
                 <text
                   fill="#fff"
-                  font-family="HelveticaNeue-Bold, Helvetica Neue"
-                  font-size="29"
-                  font-weight="700"
+                  fontFamily="HelveticaNeue-Bold, Helvetica Neue"
+                  fontSize="29"
+                  fontWeight="700"
                   transform="translate(13.604 34.56984)"
                 >
                   E