From 64b497cf1cdf746519baf5006f7f8f844874a3a2 Mon Sep 17 00:00:00 2001
From: mdatelle <mike@datelle.net>
Date: Tue, 18 Feb 2025 15:16:59 -0500
Subject: [PATCH 1/3] refactor: adjust tailwind classes for responsive layout

---
 .../src/components/common/stepper/Stepper.vue |  6 +-
 .../components/common/stepper/StepperItem.vue |  4 +-
 .../common/stepper/StepperSeparator.vue       |  2 +-
 .../common/stepper/StepperTrigger.vue         |  7 ++-
 .../components/common/Stepper.stories.ts      | 62 +++++++++++++++++++
 5 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 unraid-ui/stories/components/common/Stepper.stories.ts

diff --git a/unraid-ui/src/components/common/stepper/Stepper.vue b/unraid-ui/src/components/common/stepper/Stepper.vue
index 0826c9fe11..f9112dc372 100644
--- a/unraid-ui/src/components/common/stepper/Stepper.vue
+++ b/unraid-ui/src/components/common/stepper/Stepper.vue
@@ -17,7 +17,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <StepperRoot v-slot="slotProps" :class="cn('flex gap-2', props.class)" v-bind="forwarded">
+  <StepperRoot
+    v-slot="slotProps"
+    :class="cn('flex flex-col gap-2 md:flex-row', props.class)"
+    v-bind="forwarded"
+  >
     <slot v-bind="slotProps" />
   </StepperRoot>
 </template>
diff --git a/unraid-ui/src/components/common/stepper/StepperItem.vue b/unraid-ui/src/components/common/stepper/StepperItem.vue
index 4bd8734559..3aa2eca628 100644
--- a/unraid-ui/src/components/common/stepper/StepperItem.vue
+++ b/unraid-ui/src/components/common/stepper/StepperItem.vue
@@ -19,7 +19,9 @@ const forwarded = useForwardProps(delegatedProps);
   <StepperItem
     v-slot="slotProps"
     v-bind="forwarded"
-    :class="cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)"
+    :class="
+      cn('md:flex md:items-center md:gap-2 group data-[disabled]:pointer-events-none', props.class)
+    "
   >
     <slot v-bind="slotProps" />
   </StepperItem>
diff --git a/unraid-ui/src/components/common/stepper/StepperSeparator.vue b/unraid-ui/src/components/common/stepper/StepperSeparator.vue
index 939136e518..15b5378db8 100644
--- a/unraid-ui/src/components/common/stepper/StepperSeparator.vue
+++ b/unraid-ui/src/components/common/stepper/StepperSeparator.vue
@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'bg-muted',
+        'hidden md:block bg-muted md:w-[100px] md:h-[1px] md:my-0',
         // Disabled
         'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-75',
         // Completed
diff --git a/unraid-ui/src/components/common/stepper/StepperTrigger.vue b/unraid-ui/src/components/common/stepper/StepperTrigger.vue
index 1ece31bec1..90a13aa078 100644
--- a/unraid-ui/src/components/common/stepper/StepperTrigger.vue
+++ b/unraid-ui/src/components/common/stepper/StepperTrigger.vue
@@ -18,7 +18,12 @@ const forwarded = useForwardProps(delegatedProps);
 <template>
   <StepperTrigger
     v-bind="forwarded"
-    :class="cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)"
+    :class="
+      cn(
+        'flex flex-col items-center justify-center text-center gap-2 rounded-md w-full md:w-auto',
+        props.class
+      )
+    "
   >
     <slot />
   </StepperTrigger>
diff --git a/unraid-ui/stories/components/common/Stepper.stories.ts b/unraid-ui/stories/components/common/Stepper.stories.ts
new file mode 100644
index 0000000000..c7a169ffd3
--- /dev/null
+++ b/unraid-ui/stories/components/common/Stepper.stories.ts
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import {
+  Stepper as StepperComponent,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from '../../../src/components/common/stepper';
+
+const meta = {
+  title: 'Components/Common',
+  component: StepperComponent,
+} satisfies Meta<typeof StepperComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Stepper: Story = {
+  render: () => ({
+    components: {
+      StepperComponent,
+      StepperItem,
+      StepperTitle,
+      StepperDescription,
+      StepperIndicator,
+      StepperSeparator,
+      StepperTrigger,
+    },
+    template: `
+      <StepperComponent>
+        <StepperItem :step="1">
+          <StepperTrigger>
+            <StepperIndicator>1</StepperIndicator>
+              <StepperTitle>Account Setup</StepperTitle>
+            <StepperDescription>Create your account</StepperDescription>
+          </StepperTrigger>
+          <StepperSeparator />
+        </StepperItem>
+
+        <StepperItem :step="2">
+        <StepperTrigger>
+          <StepperIndicator>2</StepperIndicator>
+            <StepperTitle>Server Details</StepperTitle>
+            <StepperDescription>Configure your server</StepperDescription>
+          </StepperTrigger>
+          <StepperSeparator />
+        </StepperItem>
+
+        <StepperItem :step="3">
+          <StepperTrigger>
+            <StepperIndicator>3</StepperIndicator>
+              <StepperTitle>Review</StepperTitle>
+              <StepperDescription>Review and confirm</StepperDescription>
+          </StepperTrigger>
+        </StepperItem>
+      </StepperComponent>
+    `,
+  }),
+};

From 93626ba939094dfbc6dcd2a4ef3b342fa01aa3e5 Mon Sep 17 00:00:00 2001
From: mdatelle <mike@datelle.net>
Date: Tue, 18 Feb 2025 15:58:24 -0500
Subject: [PATCH 2/3] chore: address coderabbit nits

---
 .../components/common/stepper/StepperItem.vue |  8 +++-
 .../common/stepper/StepperSeparator.vue       |  2 +-
 .../components/common/Stepper.stories.ts      | 45 +++++++++----------
 3 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/unraid-ui/src/components/common/stepper/StepperItem.vue b/unraid-ui/src/components/common/stepper/StepperItem.vue
index 3aa2eca628..2124ef80e7 100644
--- a/unraid-ui/src/components/common/stepper/StepperItem.vue
+++ b/unraid-ui/src/components/common/stepper/StepperItem.vue
@@ -20,7 +20,13 @@ const forwarded = useForwardProps(delegatedProps);
     v-slot="slotProps"
     v-bind="forwarded"
     :class="
-      cn('md:flex md:items-center md:gap-2 group data-[disabled]:pointer-events-none', props.class)
+      cn(
+        'flex flex-col items-start gap-1',
+        'md:flex-row md:items-center md:gap-2',
+        'group transition-all duration-200',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
     "
   >
     <slot v-bind="slotProps" />
diff --git a/unraid-ui/src/components/common/stepper/StepperSeparator.vue b/unraid-ui/src/components/common/stepper/StepperSeparator.vue
index 15b5378db8..f5c3736648 100644
--- a/unraid-ui/src/components/common/stepper/StepperSeparator.vue
+++ b/unraid-ui/src/components/common/stepper/StepperSeparator.vue
@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'hidden md:block bg-muted md:w-[100px] md:h-[1px] md:my-0',
+        'hidden md:block bg-muted md:w-24 md:h-px md:my-0',
         // Disabled
         'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-75',
         // Completed
diff --git a/unraid-ui/stories/components/common/Stepper.stories.ts b/unraid-ui/stories/components/common/Stepper.stories.ts
index c7a169ffd3..ae4cfb0558 100644
--- a/unraid-ui/stories/components/common/Stepper.stories.ts
+++ b/unraid-ui/stories/components/common/Stepper.stories.ts
@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
+import { Check, Circle, Dot } from 'lucide-vue-next';
+import { Button } from '../../../src/components/common/button';
 import {
   Stepper as StepperComponent,
   StepperDescription,
@@ -31,32 +33,25 @@ export const Stepper: Story = {
     },
     template: `
       <StepperComponent>
-        <StepperItem :step="1">
-          <StepperTrigger>
-            <StepperIndicator>1</StepperIndicator>
-              <StepperTitle>Account Setup</StepperTitle>
-            <StepperDescription>Create your account</StepperDescription>
-          </StepperTrigger>
-          <StepperSeparator />
-        </StepperItem>
-
-        <StepperItem :step="2">
-        <StepperTrigger>
-          <StepperIndicator>2</StepperIndicator>
-            <StepperTitle>Server Details</StepperTitle>
-            <StepperDescription>Configure your server</StepperDescription>
-          </StepperTrigger>
-          <StepperSeparator />
-        </StepperItem>
-
-        <StepperItem :step="3">
-          <StepperTrigger>
-            <StepperIndicator>3</StepperIndicator>
-              <StepperTitle>Review</StepperTitle>
-              <StepperDescription>Review and confirm</StepperDescription>
-          </StepperTrigger>
-        </StepperItem>
+        <template v-for="(step, index) in steps" :key="index">
+          <StepperItem :step="index + 1">
+            <StepperTrigger>
+              <StepperIndicator>{{ index + 1 }}</StepperIndicator>
+              <StepperTitle>{{ step.title }}</StepperTitle>
+              <StepperDescription>{{ step.description }}</StepperDescription>
+            </StepperTrigger>
+            <StepperSeparator v-if="index < steps.length - 1" />
+          </StepperItem>
+        </template>
       </StepperComponent>
     `,
+    setup() {
+      const steps = [
+        { title: 'Account Setup', description: 'Create your account' },
+        { title: 'Server Details', description: 'Configure your server' },
+        { title: 'Review', description: 'Review and confirm' },
+      ];
+      return { steps };
+    },
   }),
 };

From 451ea0c52d2a1995e1f3bd2035c709b2fcc241ab Mon Sep 17 00:00:00 2001
From: mdatelle <mike@datelle.net>
Date: Tue, 18 Feb 2025 16:06:45 -0500
Subject: [PATCH 3/3] chore: coderabbit nits

---
 .../components/common/Stepper.stories.ts       | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/unraid-ui/stories/components/common/Stepper.stories.ts b/unraid-ui/stories/components/common/Stepper.stories.ts
index ae4cfb0558..28f2a389b6 100644
--- a/unraid-ui/stories/components/common/Stepper.stories.ts
+++ b/unraid-ui/stories/components/common/Stepper.stories.ts
@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
-import { Check, Circle, Dot } from 'lucide-vue-next';
-import { Button } from '../../../src/components/common/button';
 import {
   Stepper as StepperComponent,
   StepperDescription,
@@ -14,6 +12,22 @@ import {
 const meta = {
   title: 'Components/Common',
   component: StepperComponent,
+  parameters: {
+    layout: 'padded',
+    viewport: {
+      defaultViewport: 'responsive',
+      viewports: {
+        responsive: {
+          name: 'Responsive',
+          styles: { width: '100%', height: '100%' },
+        },
+        mobile: {
+          name: 'Mobile',
+          styles: { width: '320px', height: '100%' },
+        },
+      },
+    },
+  },
 } satisfies Meta<typeof StepperComponent>;
 
 export default meta;