design system token v0.1

stories/Data/Progress.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Progress } from '@/components/ui/progress'
+
+const meta = {
+  title: 'Data/Progress',
+  component: Progress,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-100">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Progress>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    value: 60,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    value: 0,
+  },
+}
+
+export const Quarter: Story = {
+  args: {
+    value: 25,
+  },
+}
+
+export const Half: Story = {
+  args: {
+    value: 50,
+  },
+}
+
+export const ThreeQuarters: Story = {
+  args: {
+    value: 75,
+  },
+}
+
+export const Complete: Story = {
+  args: {
+    value: 100,
+  },
+}
+
+export const AllStages: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-100">
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">0%</span>
+        <Progress value={0} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">25%</span>
+        <Progress value={25} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">50%</span>
+        <Progress value={50} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">75%</span>
+        <Progress value={75} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">100%</span>
+        <Progress value={100} />
+      </div>
+    </div>
+  ),
+}