feat: Add new component for detour route selection panel (#2614)

Co-authored-by: Kayla Firestack <kfirestack@mbta.com>

assets/src/components/detours/detourRouteSelectionPanel.tsx

@@ -0,0 +1,88 @@
+import React from "react"
+import { Button, FormSelect } from "react-bootstrap"
+import { Panel } from "./diversionPage"
+import {
+  ByRoutePatternId,
+  Route,
+  RoutePattern,
+  RoutePatternId,
+} from "../../schedule"
+import RoutePropertiesCard from "../mapPage/routePropertiesCard"
+
+interface SelectedRouteInfoWithRoute {
+  selectedRoute: Route
+  routePatterns: ByRoutePatternId<RoutePattern>
+  selectedRoutePatternId: RoutePatternId | null
+}
+
+interface SelectedRouteInfoWithoutRoute {
+  selectedRoute: null
+}
+
+type SelectedRouteInfo =
+  | SelectedRouteInfoWithRoute
+  | SelectedRouteInfoWithoutRoute
+
+interface DetourRouteSelectionPanelProps {
+  allRoutes: Route[]
+  selectedRouteInfo: SelectedRouteInfo
+}
+
+const selectedRoutePatternFromInfo = (
+  selectedRouteInfo: SelectedRouteInfoWithRoute
+): RoutePatternId =>
+  selectedRouteInfo.selectedRoutePatternId ||
+  Object.values(selectedRouteInfo.routePatterns).find(
+    (rp) => rp.directionId === 1
+  )?.id ||
+  Object.values(selectedRouteInfo.routePatterns)[0].id
+
+export const DetourRouteSelectionPanel = ({
+  allRoutes,
+  selectedRouteInfo,
+}: DetourRouteSelectionPanelProps) => (
+  <Panel as="article">
+    <Panel.Header className="">
+      <h1 className="c-diversion-panel__h1 my-3">Create Detour</h1>
+    </Panel.Header>
+
+    <Panel.Body className="d-flex flex-column">
+      <Panel.Body.ScrollArea className="d-flex flex-column">
+        <section className="pb-3">
+          <h2 className="c-diversion-panel__h2">Choose route</h2>
+          <FormSelect defaultValue={selectedRouteInfo.selectedRoute?.id}>
+            <option>Select a route</option>
+            {allRoutes.map((route) => (
+              <option key={route.id} value={route.id}>
+                {route.name}
+              </option>
+            ))}
+          </FormSelect>
+        </section>
+
+        <section className="pb-3">
+          <h2 className="c-diversion-panel__h2">Choose direction</h2>
+          {selectedRouteInfo.selectedRoute ? (
+            <RoutePropertiesCard
+              routePatterns={selectedRouteInfo.routePatterns}
+              selectedRoutePatternId={selectedRoutePatternFromInfo(
+                selectedRouteInfo
+              )}
+              selectRoutePattern={() => {}}
+            />
+          ) : (
+            <p className="fst-italic">
+              Select a route in order to choose a direction.
+            </p>
+          )}
+        </section>
+      </Panel.Body.ScrollArea>
+
+      <Panel.Body.Footer className="d-flex">
+        <Button className="m-3 flex-grow-1" onClick={() => {}}>
+          Start drawing detour
+        </Button>
+      </Panel.Body.Footer>
+    </Panel.Body>
+  </Panel>
+)

assets/stories/skate-components/detours/detourRouteSelectionPanel.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import React from "react"
+
+import { DetourRouteSelectionPanel } from "../../../src/components/detours/detourRouteSelectionPanel"
+import { routePatternFactory } from "../../../tests/factories/routePattern"
+import routeFactory from "../../../tests/factories/route"
+import { RoutesProvider } from "../../../src/contexts/routesContext"
+
+const routePattern0 = routePatternFactory.build({
+  directionId: 0,
+  headsign: "Forest Hills",
+  id: "39-3-0",
+  name: "Back Bay Station - Forest Hills Station",
+  routeId: "39",
+})
+const routePattern1 = routePatternFactory.build({
+  directionId: 0,
+  headsign: "Dedham Line via Forest Hills",
+  id: "39-7-0",
+  name: "Huntington Ave & Longwood Ave - Forest Hills Station",
+  routeId: "39",
+})
+const routePattern2 = routePatternFactory.build({
+  directionId: 1,
+  headsign: "Back Bay",
+  id: "39-3-1",
+  name: "Forest Hills Station - Back Bay Station",
+  routeId: "39",
+})
+const routePattern3 = routePatternFactory.build({
+  directionId: 1,
+  headsign: "Avenue Louis Pasteur",
+  id: "39-7-1",
+  name: "Forest Hills Station - Huntington Ave & Longwood Ave",
+  routeId: "39",
+})
+
+const route1 = routeFactory.build({ id: "1", name: "1" })
+const route39 = routeFactory.build({ id: "39", name: "39" })
+const route66 = routeFactory.build({ id: "66", name: "66" })
+
+const allRoutes = [route1, route39, route66]
+
+const meta = {
+  component: DetourRouteSelectionPanel,
+  parameters: {
+    layout: "fullscreen",
+    stretch: true,
+  },
+  args: {
+    allRoutes,
+    selectedRouteInfo: {
+      selectedRoute: route39,
+      routePatterns: {
+        [routePattern0.id]: routePattern0,
+        [routePattern1.id]: routePattern1,
+        [routePattern2.id]: routePattern2,
+        [routePattern3.id]: routePattern3,
+      },
+      selectedRoutePatternId: routePattern1.id,
+    },
+  },
+  argTypes: {
+    allRoutes: { table: { disable: true } },
+    selectedRouteInfo: { table: { disable: true } },
+  },
+  // The bootstrap CSS reset is supposed to set box-sizing: border-box by
+  // default, we should be able to remove this after that is added
+  decorators: [
+    (StoryFn) => (
+      <RoutesProvider routes={allRoutes}>
+        <div className="border-box inherit-box h-100">
+          <StoryFn />
+        </div>
+      </RoutesProvider>
+    ),
+  ],
+} satisfies Meta<typeof DetourRouteSelectionPanel>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const NoRouteSelected: Story = {
+  args: {
+    selectedRouteInfo: { selectedRoute: null },
+  },
+}
+
+export const NoRoutePatternSelected: Story = {
+  args: {
+    selectedRouteInfo: {
+      selectedRoute: route39,
+      routePatterns: {
+        [routePattern0.id]: routePattern0,
+        [routePattern1.id]: routePattern1,
+        [routePattern2.id]: routePattern2,
+        [routePattern3.id]: routePattern3,
+      },
+      selectedRoutePatternId: null,
+    },
+  },
+}