From fe1fce9d342c5b51480d9384f885c1f833b2f9bc Mon Sep 17 00:00:00 2001
From: Michael Rabbitt <284825+mrabbitt@users.noreply.github.com>
Date: Wed, 18 Sep 2024 14:37:47 -0700
Subject: [PATCH] Experiment: Refactor stepper block into component and add
 storybook for it

---
 .../stepper/BenchmarkStepper.stories.tsx      | 19 +++++++++++
 .../design_system/stepper/stepper.tsx         | 32 ++++++++++++++++++
 .../[student_id]/goals/[goal_id]/create.tsx   | 33 ++-----------------
 3 files changed, 54 insertions(+), 30 deletions(-)
 create mode 100644 src/components/design_system/stepper/BenchmarkStepper.stories.tsx
 create mode 100644 src/components/design_system/stepper/stepper.tsx

diff --git a/src/components/design_system/stepper/BenchmarkStepper.stories.tsx b/src/components/design_system/stepper/BenchmarkStepper.stories.tsx
new file mode 100644
index 00000000..06214f82
--- /dev/null
+++ b/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,
+  },
+};
diff --git a/src/components/design_system/stepper/stepper.tsx b/src/components/design_system/stepper/stepper.tsx
new file mode 100644
index 00000000..3a3956b3
--- /dev/null
+++ b/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;
diff --git a/src/pages/students/[student_id]/goals/[goal_id]/create.tsx b/src/pages/students/[student_id]/goals/[goal_id]/create.tsx
index 176100e3..2001e575 100644
--- a/src/pages/students/[student_id]/goals/[goal_id]/create.tsx
+++ b/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 }}>