From 702cef24b3d98d0453b694f72355a31fd4015e12 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Tue, 14 May 2024 17:03:15 -0400
Subject: [PATCH] [16/n][Storybook] Steps argTypes and typed variants

---
 .../src/components/shared/Steps/Steps.tsx     |  2 +-
 .../src/components/shared/Steps/index.ts      |  1 +
 .../src/stories/Components/Steps.stories.tsx  | 69 ++++++++-----------
 3 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/packages/frontend/src/components/shared/Steps/Steps.tsx b/packages/frontend/src/components/shared/Steps/Steps.tsx
index 5250a07..082f601 100644
--- a/packages/frontend/src/components/shared/Steps/Steps.tsx
+++ b/packages/frontend/src/components/shared/Steps/Steps.tsx
@@ -2,7 +2,7 @@ import { Fragment, ComponentPropsWithoutRef } from 'react';
 import { stepsTheme, StepsTheme } from './Steps.theme';
 import { Step, StepProps, StepTheme } from './Step';
 
-interface StepsProps
+export interface StepsProps
   extends ComponentPropsWithoutRef<'ul'>,
     StepsTheme,
     Pick<StepTheme, 'orientation'> {
diff --git a/packages/frontend/src/components/shared/Steps/index.ts b/packages/frontend/src/components/shared/Steps/index.ts
index 27d56a3..8616eb1 100644
--- a/packages/frontend/src/components/shared/Steps/index.ts
+++ b/packages/frontend/src/components/shared/Steps/index.ts
@@ -1,2 +1,3 @@
 export * from './Steps';
 export * from './Steps.theme';
+export * from './Step';
diff --git a/packages/frontend/src/stories/Components/Steps.stories.tsx b/packages/frontend/src/stories/Components/Steps.stories.tsx
index 446b854..d4d999e 100644
--- a/packages/frontend/src/stories/Components/Steps.stories.tsx
+++ b/packages/frontend/src/stories/Components/Steps.stories.tsx
@@ -1,6 +1,22 @@
 import { StoryObj, Meta } from '@storybook/react';
 
-import { Steps } from 'components/shared/Steps';
+import { Steps, StepsTheme, StepProps } from 'components/shared/Steps';
+
+const stepsOrientations: StepsTheme['orientation'][] = [
+  'horizontal',
+  'vertical',
+];
+const stepsOptions: Pick<StepProps, 'label'>[] = [
+  {
+    label: 'Create repository',
+  },
+  {
+    label: 'Deploy',
+  },
+  {
+    label: `What's next?`,
+  },
+];
 
 const meta: Meta<typeof Steps> = {
   title: 'Components/Steps',
@@ -9,7 +25,7 @@ const meta: Meta<typeof Steps> = {
   argTypes: {
     orientation: {
       control: 'radio',
-      options: ['horizontal', 'vertical'],
+      options: stepsOrientations,
     },
     currentIndex: {
       control: 'number',
@@ -25,50 +41,23 @@ export default meta;
 type Story = StoryObj<typeof Steps>;
 
 export const Default: Story = {
-  render: ({ orientation, currentIndex, steps }) => (
-    <Steps
-      currentIndex={currentIndex}
-      steps={steps}
-      orientation={orientation}
-    />
-  ),
   args: {
-    currentIndex: 0,
-    steps: [
-      {
-        label: 'Create repository',
-      },
-      {
-        label: 'Deploy',
-      },
-      {
-        label: `What's next?`,
-      },
-    ],
+    orientation: 'vertical',
+    currentIndex: 1,
+    steps: stepsOptions,
   },
 };
 
 export const Horizontal: Story = {
-  render: ({ orientation, currentIndex, steps }) => (
-    <Steps
-      currentIndex={currentIndex}
-      steps={steps}
-      orientation={orientation}
-    />
-  ),
   args: {
-    currentIndex: 0,
-    steps: [
-      {
-        label: 'Create repository',
-      },
-      {
-        label: 'Deploy',
-      },
-      {
-        label: `What's next?`,
-      },
-    ],
+    ...Default.args,
     orientation: 'horizontal',
   },
 };
+
+export const Past: Story = {
+  args: {
+    ...Default.args,
+    currentIndex: 2,
+  },
+};