Adding eslint spacing rule and update deps (#897)

* Adding eslint spacing rule and update deps

* Cleaning up imports

* Remove unused Device wrapper

* Removing Today page

* Removing Today reference

.eslintrc.js

@@ -34,7 +34,21 @@ module.exports = {
     'import/no-self-import': 'error',
     'import/no-default-export': 'warn',
     'import/order': 'error',
+    'import/newline-after-import': 'error',
     'import/no-unused-modules': ['warn', { unusedExports: true }],
+    'import/no-useless-path-segments': [
+      'error',
+      {
+        noUselessIndex: true,
+      },
+    ],
+    'import/max-dependencies': [
+      'warn',
+      {
+        max: 20,
+        ignoreTypeImports: false,
+      },
+    ],
     'prettier/prettier': 'error',
     'react/prop-types': 'warn',
     'react/jsx-no-target-blank': 'warn',

common/api/datadashboard.ts

@@ -9,7 +9,7 @@ import type {
   SingleDayAPIOptions,
   BusOrSubway,
 } from '../types/api';
-import { APP_DATA_BASE_PATH } from '../../common/utils/constants';
+import { APP_DATA_BASE_PATH } from '../utils/constants';
 import { getCurrentDate } from '../utils/date';
 import type { AggregateDataResponse, SingleDayDataPoint } from '../types/charts';
 import { ONE_MINUTE } from '../constants/time';

common/api/slowzones.ts

@@ -1,8 +1,4 @@
-import type {
-  DayDelayTotals,
-  SlowZoneResponse,
-  SpeedRestriction,
-} from '../../common/types/dataPoints';
+import type { DayDelayTotals, SlowZoneResponse, SpeedRestriction } from '../types/dataPoints';
 import type { FetchSpeedRestrictionsOptions, FetchSpeedRestrictionsResponse } from '../types/api';
 import { getGtfsRailLineId } from '../utils/lines';
 import { apiFetch } from './utils/fetch';

common/components/charts/AggregateLineChart.tsx

@@ -7,7 +7,7 @@ import React, { useMemo, useRef } from 'react';
 import ChartjsPluginWatermark from 'chartjs-plugin-watermark';
 import type { AggregateDataPoint, AggregateLineProps } from '../../types/charts';
 import { prettyDate } from '../../utils/date';
-import { CHART_COLORS } from '../../../common/constants/colors';
+import { CHART_COLORS } from '../../constants/colors';
 import { DownloadButton } from '../buttons/DownloadButton';
 import { useBreakpoint } from '../../hooks/useBreakpoint';
 import { watermarkLayout } from '../../constants/charts';

common/components/charts/CarouselGraphDiv.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 interface CarouselGraphDivProps {
   children: React.ReactNode;
 }

common/components/charts/ChartDiv.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
+
 interface ChartDivProps {
   children: React.ReactNode;
   isMobile?: boolean;

common/components/charts/SingleDayLineChart.tsx

@@ -5,9 +5,9 @@ import { enUS } from 'date-fns/locale';
 import React, { useMemo, useRef } from 'react';
 import ChartjsPluginWatermark from 'chartjs-plugin-watermark';
 import type { DataPoint } from '../../types/dataPoints';
-import { CHART_COLORS, COLORS } from '../../../common/constants/colors';
+import { CHART_COLORS, COLORS } from '../../constants/colors';
 import { useAlertStore } from '../../../modules/tripexplorer/AlertStore';
-import type { SingleDayLineProps } from '../../../common/types/charts';
+import type { SingleDayLineProps } from '../../types/charts';
 import { getAlertAnnotations } from '../../../modules/service/utils/graphUtils';
 import { prettyDate } from '../../utils/date';
 import { DownloadButton } from '../buttons/DownloadButton';

common/components/charts/TimeSeriesChart/TimeSeriesChart.tsx

@@ -137,8 +137,8 @@ export const TimeSeriesChart = <Data extends Dataset[]>(props: Props<Data>) => {
       'granularity' in providedTimeAxis
         ? providedTimeAxis.granularity
         : 'agg' in providedTimeAxis && providedTimeAxis.agg
-        ? getGranularityForAgg(providedTimeAxis.agg)
-        : null;
+          ? getGranularityForAgg(providedTimeAxis.agg)
+          : null;
     return { ...getDefaultTimeAxis(providedGranularity ?? null), ...providedTimeAxis };
   }, [providedTimeAxis]);
 

common/components/charts/TimeSeriesChart/helpers.ts

@@ -84,8 +84,8 @@ export const getFillProps = (style: AppliedDisplayStyle<DataPoint>) => {
       fillPattern === 'solid'
         ? resolvedFillColor
         : fillPattern === 'slightly-transparent'
-        ? hexWithAlpha(resolvedFillColor, 0.8)
-        : pattern.draw('diagonal', 'transparent', resolvedFillColor, 5);
+          ? hexWithAlpha(resolvedFillColor, 0.8)
+          : pattern.draw('diagonal', 'transparent', resolvedFillColor, 5);
     return {
       fill: true,
       backgroundColor,

common/components/maps/LineMap.tsx

@@ -267,8 +267,8 @@ export const LineMap: React.FC<LineMapProps> = ({
               tooltipSide === 'top'
                 ? `translate(-50%, -100%)`
                 : tooltipSide === 'left'
-                ? `translate(-100%, -50%)`
-                : `translateY(-50%)`,
+                  ? `translate(-100%, -50%)`
+                  : `translateY(-50%)`,
           }}
         >
           {tooltipContents}

common/components/nav/BusRouteSelection.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 import React, { Fragment } from 'react';
 import { getBusRoutes } from '../../constants/stations';
 import { getBusRouteSelectionItemHref, useDelimitatedRoute } from '../../utils/router';
+
 export const BusRouteSelection: React.FC = () => {
   const route = useDelimitatedRoute();
   const router = useRouter();

common/components/nav/NavSectionHeader.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 interface NavSectionHeaderProps {
   title: string;
 }

common/components/widgets/internal/UnitText.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
+
 export interface UnitTextProps {
   text: string;
   isLarge?: boolean;

common/constants/pages.ts

@@ -16,7 +16,6 @@ export type Page = keyof typeof PAGES;
 
 export enum PAGES {
   landing = 'landing',
-  today = 'today',
   overview = 'overview',
   speed = 'speed',
   predictions = 'predictions',
@@ -62,14 +61,6 @@ export const ALL_PAGES: PageMap = {
     icon: faHouse,
     dateStoreSection: 'landing',
   },
-  today: {
-    key: 'today',
-    path: '/',
-    name: 'Today',
-    lines: ['line-red', 'line-blue', 'line-green', 'line-orange'],
-    icon: faHouse,
-    dateStoreSection: 'today',
-  },
   singleTrips: {
     key: 'singleTrips',
     path: '/trips/single',
@@ -159,8 +150,6 @@ export const ALL_PAGES: PageMap = {
 /* Groups of pages for tab sections */
 export const TRIP_PAGES = [ALL_PAGES.singleTrips, ALL_PAGES.multiTrips];
 
-export const TODAY = [ALL_PAGES.today];
-
 export const BUS_OVERVIEW = [ALL_PAGES.ridership];
 
 export const OVERVIEW_PAGE = [ALL_PAGES.overview];

common/layouts/LandingLayout.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 interface LandingLayoutProps {
   children: React.ReactNode;
 }

common/layouts/Layouts.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
-import { DashboardLayout } from '../layouts/DashboardLayout';
-import { LandingLayout } from '../layouts/LandingLayout';
+import { DashboardLayout } from './DashboardLayout';
+import { LandingLayout } from './LandingLayout';
 import type { LayoutNames } from './layoutTypes';
+
 export const Layouts: { [key in LayoutNames]: ({ children }) => ReactNode } = {
   Landing: LandingLayout,
   Dashboard: DashboardLayout,

common/types/basicWidgets.tsx

@@ -4,6 +4,7 @@ import duration from 'dayjs/plugin/duration';
 import { getFormattedTimeValue, getTimeUnit } from '../utils/time';
 import { WidgetText } from '../components/widgets/internal/WidgetText';
 import { UnitText } from '../components/widgets/internal/UnitText';
+
 dayjs.extend(duration);
 
 export interface WidgetValueInterface {

common/utils/slowZoneUtils.ts

@@ -6,13 +6,8 @@ import utc from 'dayjs/plugin/utc';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import { useMemo } from 'react';
-import type { Station } from '../../common/types/stations';
-import type {
-  DayDelayTotals,
-  Direction,
-  SlowZone,
-  SlowZoneResponse,
-} from '../../common/types/dataPoints';
+import type { Station } from '../types/stations';
+import type { DayDelayTotals, Direction, SlowZone, SlowZoneResponse } from '../types/dataPoints';
 import { TODAY_MIDNIGHT } from '../constants/dates';
 import type { LineShort } from '../types/lines';
 import { getParentStationForStopId } from './stations';

common/utils/stations.ts

@@ -1,8 +1,8 @@
-import type { Line, LineShort } from '../../common/types/lines';
-import { isLineMap, type Station } from '../../common/types/stations';
+import type { Line, LineShort } from '../types/lines';
+import { isLineMap, type Station } from '../types/stations';
 import type { Location } from '../types/charts';
 import type { Direction } from '../types/dataPoints';
-import { stations, rtStations, busStations } from './../constants/stations';
+import { stations, rtStations, busStations } from '../constants/stations';
 
 export const optionsForField = (
   type: 'from' | 'to',

common/utils/time.tsx

@@ -4,6 +4,7 @@ import duration from 'dayjs/plugin/duration';
 
 import { WidgetText } from '../components/widgets/internal/WidgetText';
 import { UnitText } from '../components/widgets/internal/UnitText';
+
 dayjs.extend(duration);
 
 export const getTimeUnit = (value: number) => {

copy/landingCopy.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { LandingCharts } from '../modules/landing/types';
+
 const DESCRIPTION_STYLE = 'text-stone-900 text-lg';
 const BASELINE_STYLE = 'text-stone-900 italic text-xs text-center';
 

modules/landing/LandingChartDiv.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 interface LandingChartDivProps {
   children: React.ReactElement[];
 }

modules/landing/LineButton.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import type { Line } from '../../common/types/lines';
 import { lineColorBackground, lineColorBorder } from '../../common/styles/general';
 import { LINE_OBJECTS } from '../../common/constants/lines';
+
 interface LineButtonProps {
   children: React.ReactNode;
   line: Line;

modules/predictions/PredictionsDetails.tsx

@@ -16,6 +16,7 @@ import { Accordion } from '../../common/components/accordion/Accordion';
 import { lineToDefaultRouteId } from './utils/utils';
 import { PredictionsGraphWrapper } from './charts/PredictionsGraphWrapper';
 import { PredictionsBinsGraphWrapper } from './charts/PredictionsBinsGraphWrapper';
+
 dayjs.extend(utc);
 
 enum GreenLineBranchOptions {

modules/ridership/RidershipGraphWrapper.tsx

@@ -9,6 +9,7 @@ import type { BusRoute, Line } from '../../common/types/lines';
 import { NoDataNotice } from '../../common/components/notices/NoDataNotice';
 import { getRidershipWidgetValues } from './utils/utils';
 import { RidershipGraph } from './RidershipGraph';
+
 interface RidershipGraphWrapperProps {
   data: RidershipCount[];
   line?: Line;

modules/service/ServiceDetails.tsx

@@ -15,6 +15,7 @@ import { WidgetTitle } from '../dashboard/WidgetTitle';
 import { ServiceGraphWrapper } from './ServiceGraphWrapper';
 import { PercentageServiceGraphWrapper } from './PercentageServiceGraphWrapper';
 import { ServiceHoursGraph } from './ServiceHoursGraph';
+
 dayjs.extend(utc);
 
 export function ServiceDetails() {

modules/service/ServiceGraphWrapper.tsx

@@ -8,6 +8,7 @@ import { CarouselGraphDiv } from '../../common/components/charts/CarouselGraphDi
 import { NoDataNotice } from '../../common/components/notices/NoDataNotice';
 import { getServiceWidgetValues } from './utils/utils';
 import { ServiceGraph } from './ServiceGraph';
+
 interface ServiceGraphWrapperProps {
   data: DeliveredTripMetrics[];
   predictedData: ScheduledService;

modules/slowzones/SlowZonesDetails.tsx

@@ -23,6 +23,7 @@ import { TotalSlowTimeWrapper } from './TotalSlowTimeWrapper';
 import { SlowZonesMap } from './map';
 import { DirectionObject } from './constants/constants';
 import { SlowZonesWidgetTitle } from './SlowZonesWidgetTitle';
+
 dayjs.extend(utc);
 
 export function SlowZonesDetails() {

modules/slowzones/SlowZonesWidget.tsx

@@ -9,6 +9,7 @@ import { useSlowzoneDelayTotalData } from '../../common/api/hooks/slowzones';
 import { WidgetDiv } from '../../common/components/widgets/WidgetDiv';
 import { OVERVIEW_OPTIONS } from '../../common/constants/dates';
 import { TotalSlowTimeWrapper } from './TotalSlowTimeWrapper';
+
 dayjs.extend(utc);
 
 export const SlowZonesWidget: React.FC = () => {

modules/slowzones/charts/LineSegments.tsx

@@ -29,6 +29,7 @@ import { watermarkLayout } from '../../../common/constants/charts';
 import { stopIdsForStations } from '../../../common/utils/stations';
 import { ALL_PAGES } from '../../../common/constants/pages';
 import type { QueryParams } from '../../../common/types/router';
+
 dayjs.extend(utc);
 dayjs.extend(minMax);
 

modules/slowzones/map/SlowSegmentLabel.tsx

@@ -53,8 +53,8 @@ const SlowZoneLabel: React.FC<SlowZoneLabelProps> = ({
       ? '❮'
       : '▲'
     : isHorizontal
-    ? '❯'
-    : '▼';
+      ? '❯'
+      : '▼';
   const fractionOverBaseline = -1 + (delay + baseline) / baseline;
   const isBold = fractionOverBaseline >= 0.5;