Adding Commuter Rail selectors for future use (#896)

.vscode/settings.json

@@ -3,7 +3,7 @@
   "eslint.enable": true,
   "eslint.format.enable": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "typescript.enablePromptUseWorkspaceTsdk": true,

common/components/graphics/styles/spinnerFillColor.ts

@@ -6,4 +6,5 @@ export const spinnerFillColor: StyleMap = {
   'line-green': 'fill-mbta-green',
   'line-blue': 'fill-mbta-blue',
   'line-bus': 'fill-mbta-bus',
+  'line-commuter-rail': 'fill-mbta-commuterRail',
 };

common/components/nav/CommuterRailDropdown.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SidebarTabs } from '../../../modules/navigation/SidebarTabs';
+import { TRIP_PAGES, COMMUTER_RAIL_OVERVIEW } from '../../constants/pages';
+import { CommuterRailRouteSelection } from './CommuterRailRouteSelection';
+
+interface CommuterRailDropdownProps {
+  close?: () => void;
+}
+
+export const CommuterRailDropdown: React.FC<CommuterRailDropdownProps> = ({ close }) => {
+  return (
+    <div className="rounded-b-md">
+      <CommuterRailRouteSelection />
+      <div
+        className={
+          'flex flex-col gap-[2px] rounded-b-md border border-t-0 border-mbta-commuterRail border-opacity-50 bg-neutral-800 px-1 py-[4px]'
+        }
+        role={'navigation'}
+      >
+        <SidebarTabs tabs={COMMUTER_RAIL_OVERVIEW} close={close} />
+        <hr className="h-[1px] w-3/4 self-center border-neutral-500" />
+        <SidebarTabs tabs={TRIP_PAGES} close={close} />
+      </div>
+    </div>
+  );
+};

common/components/nav/CommuterRailRouteSelection.tsx

@@ -0,0 +1,73 @@
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Listbox, Transition } from '@headlessui/react';
+import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
+import { useRouter } from 'next/navigation';
+import React, { Fragment } from 'react';
+import { getCommuterRailRoutes } from '../../constants/stations';
+import { getBusRouteSelectionItemHref, useDelimitatedRoute } from '../../utils/router';
+
+// TODO: This is a duplicate of common/components/nav/BusRouteSelection.tsx
+export const CommuterRailRouteSelection: React.FC = () => {
+  const route = useDelimitatedRoute();
+  const router = useRouter();
+  const crRoutes = getCommuterRailRoutes();
+  const selected = route.query.busRoute;
+
+  return (
+    <div className="bg-mbta-lightBus">
+      <Listbox
+        value={selected}
+        onChange={(key) => router.push(getBusRouteSelectionItemHref(key, route))}
+      >
+        <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="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+              <ChevronUpDownIcon className="h-5 w-5 " aria-hidden="true" />
+            </span>
+          </Listbox.Button>
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+              {crRoutes.map((crRoute, personIdx) => (
+                <Listbox.Option
+                  key={personIdx}
+                  className={({ active }) =>
+                    `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
+                      active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+                    }`
+                  }
+                  value={crRoute}
+                >
+                  {({ selected }) => (
+                    <>
+                      <span
+                        className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}
+                      >
+                        {crRoute}
+                      </span>
+                      {selected ? (
+                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-mbta-bus">
+                          <FontAwesomeIcon
+                            icon={faCheckCircle}
+                            className="h-5 w-5"
+                            aria-hidden="true"
+                          />
+                        </span>
+                      ) : null}
+                    </>
+                  )}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </div>
+      </Listbox>
+    </div>
+  );
+};

common/components/nav/CommuterRailSection.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useDelimitatedRoute } from '../../utils/router';
+import { MenuDropdown } from './MenuDropdown';
+import { CommuterRailDropdown } from './CommuterRailDropdown';
+
+interface CommuterRailSectionProps {
+  close?: () => void;
+}
+
+export const CommuterRailSection: React.FC<CommuterRailSectionProps> = ({ close }) => {
+  const route = useDelimitatedRoute();
+  return (
+    <div className="w-full gap-y-2">
+      <MenuDropdown line="line-commuter-rail" route={route}>
+        <CommuterRailDropdown close={close} />
+      </MenuDropdown>
+    </div>
+  );
+};

common/components/nav/MenuDropdown.tsx

@@ -1,4 +1,4 @@
-import { faTrainSubway, faTrainTram } from '@fortawesome/free-solid-svg-icons';
+import { faBus, faTrain, faTrainSubway, faTrainTram } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import Link from 'next/link';
@@ -24,6 +24,20 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ line, route, childre
   useEffect(() => {
     setTimeout(() => setShow(true), 0);
   }, [selected]);
+
+  const icon = React.useMemo(() => {
+    switch (line) {
+      case 'line-bus':
+        return faBus;
+      case 'line-green':
+        return faTrainTram;
+      case 'line-commuter-rail':
+        return faTrain;
+      default:
+        return faTrainSubway;
+    }
+  }, [line]);
+
   return (
     <div className={classNames('w-full')}>
       <Link
@@ -48,8 +62,7 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ line, route, childre
               'flex h-8 w-8 items-center justify-center rounded-full bg-opacity-75'
             )}
           >
-            {/* TODO: add bus icon */}
-            <FontAwesomeIcon icon={line === 'line-green' ? faTrainTram : faTrainSubway} size="lg" />
+            <FontAwesomeIcon icon={icon} size="lg" />
           </div>
           {LINE_OBJECTS[line].name}
         </div>

common/components/widgets/MiniWidgetCreator.tsx

@@ -26,7 +26,7 @@ const getWidgets = (widgetObject: MiniWidgetObject[]) => {
   const widgets: React.ReactNode[] = [];
   for (let x = 0; x < widgetObject.length; x += 2) {
     widgets.push(
-      <DataPair last={x + 3 > widgetObject.length}>
+      <DataPair key={x} last={x + 3 > widgetObject.length}>
         {getDeltaOrDataComponent(widgetObject[x])}
         {x + 1 < widgetObject.length ? getDeltaOrDataComponent(widgetObject[x + 1]) : null}
       </DataPair>

common/components/widgets/internal/UnitText.tsx

@@ -1,10 +1,11 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface UnitTextProps {
+interface UnitTextProps {
   text: string;
   isLarge?: boolean;
 }
+
 export const UnitText: React.FC<UnitTextProps> = ({ text, isLarge = false }) => {
   return (
     <span className={classNames('text-design-subtitleGrey', isLarge ? 'text-md' : 'text-sm')}>

common/constants/colors.ts

@@ -7,6 +7,7 @@ export const COLORS = {
     blue: '#003da5',
     green: '#00834d',
     bus: '#FFC72C',
+    commuterRail: '#80276c',
   },
   charts: {
     fillBackgroundColor: '#bfc8d680',

common/constants/lines.ts

@@ -37,4 +37,11 @@ export const LINE_OBJECTS: LineObject = {
     key: 'line-bus',
     color: COLORS.mbta.bus,
   },
+  'line-commuter-rail': {
+    name: 'Commuter Rail',
+    short: 'Commuter Rail',
+    path: 'commuter-rail',
+    key: 'line-commuter-rail',
+    color: COLORS.mbta.commuterRail,
+  },
 };

common/constants/pages.ts

@@ -152,6 +152,8 @@ export const TRIP_PAGES = [ALL_PAGES.singleTrips, ALL_PAGES.multiTrips];
 
 export const BUS_OVERVIEW = [ALL_PAGES.ridership];
 
+export const COMMUTER_RAIL_OVERVIEW = [ALL_PAGES.ridership];
+
 export const OVERVIEW_PAGE = [ALL_PAGES.overview];
 
 export const LINE_PAGES = [

common/constants/stations.ts

@@ -16,7 +16,8 @@ import bus_77 from './bus_constants/77.json';
 import bus_111 from './bus_constants/111.json';
 import bus_114_116_117 from './bus_constants/114-116-117.json';
 
-export const rtStations: { [key in Exclude<LineShort, 'Bus'>]: LineMap } = stations_json;
+export const rtStations: { [key in Exclude<LineShort, 'Bus' | 'Commuter Rail'>]: LineMap } =
+  stations_json;
 
 export const busStations: { [key: string]: LineMap } = {
   ...bus_1,
@@ -35,8 +36,14 @@ export const busStations: { [key: string]: LineMap } = {
   ...bus_114_116_117,
 };
 
+export const commuterRailStations: { [key: string]: LineMap } = {};
+
 export const stations = { ...rtStations, Bus: busStations };
 
 export const getBusRoutes = (): string[] => {
   return Object.keys(busStations);
 };
+
+export const getCommuterRailRoutes = (): string[] => {
+  return Object.keys(commuterRailStations);
+};

common/state/defaults/dateDefaults.ts

@@ -12,7 +12,7 @@ import {
 } from '../../constants/dates';
 import type { WithOptional } from '../../types/general';
 
-export const SUBWAY_DEFAULTS: Partial<DateStoreConfiguration> = {
+const SUBWAY_DEFAULTS: Partial<DateStoreConfiguration> = {
   lineConfig: { startDate: OVERVIEW_OPTIONS.year.startDate, endDate: TODAY_STRING },
   multiTripConfig: {
     startDate: ONE_WEEK_AGO_STRING,
@@ -36,7 +36,7 @@ export const BUS_DEFAULTS: WithOptional<DateStoreConfiguration, 'systemConfig' |
     },
   };
 
-export const SYSTEM_DEFAULTS: Partial<DateStoreConfiguration> = {
+const SYSTEM_DEFAULTS: Partial<DateStoreConfiguration> = {
   systemConfig: { startDate: OVERVIEW_OPTIONS.year.startDate, endDate: TODAY_STRING },
 };
 

common/styles/general.ts

@@ -6,6 +6,7 @@ export const lineColorBackground: DefaultStyleMap = {
   'line-green': `bg-mbta-green`,
   'line-blue': `bg-mbta-blue`,
   'line-bus': `bg-mbta-bus`,
+  'line-commuter-rail': `bg-mbta-commuterRail`,
   DEFAULT: `bg-stone-800`,
 };
 
@@ -15,6 +16,7 @@ export const lineColorLightBorder = {
   'line-green': `border-mbta-lightGreen`,
   'line-blue': `border-mbta-lightBlue`,
   'line-bus': `border-mbta-lightBus`,
+  'line-commuter-rail': `border-mbta-lightCommuterRail`,
   DEFAULT: `border-stone-900`,
 };
 
@@ -24,6 +26,7 @@ export const mbtaTextConfig: DefaultStyleMap = {
   'line-green': `text-mbta-green`,
   'line-blue': `text-mbta-blue`,
   'line-bus': `text-mbta-bus`,
+  'line-commuter-rail': `text-mbta-commuterRail`,
   DEFAULT: `text-black`,
 };
 
@@ -33,6 +36,7 @@ export const lineColorLightBackground: DefaultStyleMap = {
   'line-green': `bg-mbta-lightGreen`,
   'line-blue': `bg-mbta-lightBlue`,
   'line-bus': `bg-mbta-lightBus`,
+  'line-commuter-rail': `bg-mbta-lightCommuterRail`,
   DEFAULT: `bg-stone-900`,
 };
 
@@ -42,6 +46,7 @@ export const lineColorDarkBackground: DefaultStyleMap = {
   'line-green': `bg-mbta-darkGreen`,
   'line-blue': `bg-mbta-darkBlue`,
   'line-bus': `bg-mbta-darkBus`,
+  'line-commuter-rail': `bg-mbta-darkCommuterRail`,
   DEFAULT: `bg-stone-900`,
 };
 
@@ -51,6 +56,7 @@ export const buttonHighlightFocus: DefaultStyleMap = {
   'line-green': `focus:ring-mbta-green`,
   'line-blue': `focus:ring-mbta-blue`,
   'line-bus': `focus:ring-mbta-bus`,
+  'line-commuter-rail': `focus:ring-mbta-commuterRail`,
   DEFAULT: `focus:ring-stone-800`,
 };
 
@@ -60,6 +66,7 @@ export const lineColorTextHover: DefaultStyleMap = {
   'line-green': `hover:text-mbta-green`,
   'line-blue': `hover:text-mbta-blue`,
   'line-bus': `hover:text-mbta-bus`,
+  'line-commuter-rail': `hover:text-mbta-commuterRail`,
   DEFAULT: `hover:text-stone-800`,
 };
 
@@ -69,6 +76,7 @@ export const lineColorDarkBorder: DefaultStyleMap = {
   'line-green': `border-mbta-darkGreen`,
   'line-blue': `border-mbta-darkBlue`,
   'line-bus': `border-mbta-darkBus`,
+  'line-commuter-rail': `border-mbta-darkCommuterRail`,
   DEFAULT: `border-stone-900`,
 };
 
@@ -78,6 +86,7 @@ export const lineColorBorder: DefaultStyleMap = {
   'line-green': `border-mbta-green`,
   'line-blue': `border-mbta-blue`,
   'line-bus': `border-mbta-bus`,
+  'line-commuter-rail': `border-mbta-commuterRail`,
   DEFAULT: `border-stone-800`,
 };
 
@@ -87,6 +96,7 @@ export const lineColorText: DefaultStyleMap = {
   'line-green': `text-mbta-green`,
   'line-blue': `text-mbta-blue`,
   'line-bus': `text-mbta-bus`,
+  'line-commuter-rail': `text-mbta-commuterRail`,
   DEFAULT: `text-stone-800`,
 };
 
@@ -96,5 +106,6 @@ export const lineColorRing: DefaultStyleMap = {
   'line-green': `ring-mbta-green`,
   'line-blue': `ring-mbta-blue`,
   'line-bus': `ring-mbta-bus`,
+  'line-commuter-rail': `ring-mbta-commuterRail`,
   DEFAULT: `ring-stone-800`,
 };

common/types/lines.ts

@@ -1,6 +1,12 @@
-export type Line = 'line-red' | 'line-orange' | 'line-green' | 'line-blue' | 'line-bus';
-export type LineShort = 'Red' | 'Orange' | 'Green' | 'Blue' | 'Bus';
-export type LinePath = 'red' | 'orange' | 'green' | 'blue' | 'bus';
+export type Line =
+  | 'line-red'
+  | 'line-orange'
+  | 'line-green'
+  | 'line-blue'
+  | 'line-bus'
+  | 'line-commuter-rail';
+export type LineShort = 'Red' | 'Orange' | 'Green' | 'Blue' | 'Bus' | 'Commuter Rail';
+export type LinePath = 'red' | 'orange' | 'green' | 'blue' | 'bus' | 'commuter-rail';
 export type BusRoute =
   | '1'
   | '15'

modules/landing/LandingChartDiv.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 interface LandingChartDivProps {
   children: React.ReactElement[];
 }
+
 export const LandingChartDiv: React.FC<LandingChartDivProps> = ({ children }) => {
   return (
     <div className="flex h-fit w-full max-w-lg flex-col gap-y-1  rounded-md border-2 border-slate-600 bg-white px-4 py-2 lg:max-w-md xl:max-w-lg">

modules/speed/constants/speeds.ts

@@ -61,7 +61,7 @@ export const SPEED_RANGE_PARAM_MAP: { [s: string]: ParamsType } = {
 };
 
 // TODO: Upload this to overviewStats db
-export const MINIMUMS = {
+const MINIMUMS = {
   'line-red': { date: 'May 2020', value: 8374.5 },
   'line-blue': { date: 'May 2020', value: 1860.5 },
   'line-orange': { date: 'May 2020', value: 3776.75 },
@@ -75,5 +75,3 @@ export const CORE_TRACK_LENGTHS = {
   'line-blue': 5.38 + 5.37, //<Gov. Center -> Revere> + <reverse>
   DEFAULT: 1,
 };
-
-// Peak_MPH removed in #825