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>
+  ),
+}

stories/Data/Table.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from '@/components/ui/table'
+
+const meta = {
+  title: 'Data/Table',
+  component: Table,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Table>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const invoices = [
+  { invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
+  { invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
+  { invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
+  { invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },
+  { invoice: 'INV005', status: 'Paid', method: 'PayPal', amount: '$550.00' },
+]
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-150">
+      <Table>
+        <TableCaption>A list of your recent invoices.</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-25">Invoice</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Method</TableHead>
+            <TableHead className="text-right">Amount</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {invoices.map((invoice) => (
+            <TableRow key={invoice.invoice}>
+              <TableCell className="font-medium">{invoice.invoice}</TableCell>
+              <TableCell>{invoice.status}</TableCell>
+              <TableCell>{invoice.method}</TableCell>
+              <TableCell className="text-right">{invoice.amount}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell colSpan={3}>Total</TableCell>
+            <TableCell className="text-right">$1,750.00</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  ),
+}
+
+export const Simple: Story = {
+  render: () => (
+    <div className="w-100">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Role</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Alice</TableCell>
+            <TableCell>Engineer</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Bob</TableCell>
+            <TableCell>Designer</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Charlie</TableCell>
+            <TableCell>Manager</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-100">
+      <Table>
+        <TableCaption>No data available.</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell colSpan={3} className="text-center text-muted-foreground h-24">
+              No results found.
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+  ),
+}