Experiment: Refactor stepper block into component and add storybook f…

…or it

src/components/design_system/stepper/BenchmarkStepper.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import BenchmarkStepper from "./stepper";
+
+const meta = {
+  component: BenchmarkStepper,
+} satisfies Meta<typeof BenchmarkStepper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const STEPS = ["Instructional Guidelines", "Data Collection Guidelines"];
+
+export const DefaultBenchmarkStepper: Story = {
+  args: {
+    steps: STEPS,
+  },
+};

src/components/design_system/stepper/stepper.tsx

@@ -0,0 +1,32 @@
+import { CheckCircle, TripOriginRounded } from "@mui/icons-material";
+import { Step, StepLabel, Stepper, StepIconProps } from "@mui/material";
+
+export const BenchmarkStepperIcon = (stepIconProps: StepIconProps) => {
+  const { completed = false } = stepIconProps;
+
+  if (completed) {
+    return <CheckCircle />;
+  } else {
+    return <TripOriginRounded />;
+  }
+};
+
+export interface BenchmarkStepperProps {
+  activeStep?: number;
+  steps: string[];
+}
+
+const BenchmarkStepper = ({ activeStep, steps }: BenchmarkStepperProps) => {
+  return (
+    <Stepper activeStep={activeStep} alternativeLabel connector={null}>
+      {steps.map((label) => (
+        <Step key={label}>
+          <StepLabel StepIconComponent={BenchmarkStepperIcon}>
+            {label}
+          </StepLabel>
+        </Step>
+      ))}
+    </Stepper>
+  );
+};
+export default BenchmarkStepper;

src/pages/students/[student_id]/goals/[goal_id]/create.tsx

@@ -1,18 +1,9 @@
 import { trpc } from "@/client/lib/trpc";
 import $button from "@/components/design_system/button/Button.module.css";
+import BenchmarkStepper from "@/components/design_system/stepper/stepper";
 import { GoalHeader } from "@/components/goal-header/goal-header";
 import { ChangeEvent } from "@/types/global";
-import { CheckCircle, TripOriginRounded } from "@mui/icons-material";
-import {
-  Box,
-  Stack,
-  Step,
-  StepIconProps,
-  StepLabel,
-  Stepper,
-  TextField,
-  Typography,
-} from "@mui/material";
+import { Box, Stack, TextField, Typography } from "@mui/material";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
@@ -28,16 +19,6 @@ interface BenchmarkFormEntry {
   [key: string]: string | number | "";
 }
 
-const BenchmarkStepperIcon = (stepIconProps: StepIconProps) => {
-  const { completed = false } = stepIconProps;
-
-  if (completed) {
-    return <CheckCircle />;
-  } else {
-    return <TripOriginRounded />;
-  }
-};
-
 const CreateBenchmarkPage = () => {
   const router = useRouter();
   const { data: goal } = trpc.iep.getGoal.useQuery(
@@ -222,15 +203,7 @@ const CreateBenchmarkPage = () => {
         <Typography variant="h3" textAlign="left" pb={2}>
           Create Benchmark
         </Typography>
-        <Stepper activeStep={viewState} alternativeLabel connector={null}>
-          {steps.map((label) => (
-            <Step key={label}>
-              <StepLabel StepIconComponent={BenchmarkStepperIcon}>
-                {label}
-              </StepLabel>
-            </Step>
-          ))}
-        </Stepper>
+        <BenchmarkStepper steps={steps} activeStep={viewState} />
       </Box>
 
       <fieldset disabled={addSubgoalMutation.isLoading} style={{ border: 0 }}>