design system token v0.1

stories/Primitives/Button.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChevronRight, Mail, Loader2, Plus } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+
+const meta = {
+  title: 'Primitives/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'secondary', 'outline', 'ghost', 'link', 'destructive'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg', 'icon', 'icon-sm', 'icon-lg'],
+    },
+    disabled: { control: 'boolean' },
+    asChild: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+    variant: 'default',
+    size: 'default',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary',
+    variant: 'secondary',
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    children: 'Outline',
+    variant: 'outline',
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    children: 'Ghost',
+    variant: 'ghost',
+  },
+}
+
+export const Link: Story = {
+  args: {
+    children: 'Link',
+    variant: 'link',
+  },
+}
+
+export const Destructive: Story = {
+  args: {
+    children: 'Delete',
+    variant: 'destructive',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    children: 'Small',
+    size: 'sm',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    children: 'Large',
+    size: 'lg',
+  },
+}
+
+export const Icon: Story = {
+  args: {
+    size: 'icon',
+    children: <Plus className="size-4" />,
+    'aria-label': 'Add',
+  },
+}
+
+export const IconSmall: Story = {
+  args: {
+    size: 'icon-sm',
+    children: <Plus className="size-4" />,
+    'aria-label': 'Add',
+  },
+}
+
+export const IconLarge: Story = {
+  args: {
+    size: 'icon-lg',
+    children: <Plus className="size-4" />,
+    'aria-label': 'Add',
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <Mail /> Login with Email
+      </>
+    ),
+  },
+}
+
+export const WithTrailingIcon: Story = {
+  args: {
+    children: (
+      <>
+        Next <ChevronRight />
+      </>
+    ),
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    disabled: true,
+    children: (
+      <>
+        <Loader2 className="animate-spin" /> Please wait
+      </>
+    ),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled',
+    disabled: true,
+  },
+}
+
+export const AsChild: Story = {
+  args: {
+    asChild: true,
+    children: <a href="#">Link styled as Button</a>,
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      {(['default', 'secondary', 'outline', 'ghost', 'link', 'destructive'] as const).map(
+        (variant) => (
+          <div key={variant} className="flex items-center gap-2">
+            <span className="w-24 text-sm text-muted-foreground">{variant}</span>
+            <Button variant={variant} size="sm">Small</Button>
+            <Button variant={variant} size="default">Default</Button>
+            <Button variant={variant} size="lg">Large</Button>
+            <Button variant={variant} size="icon"><Plus className="size-4" /></Button>
+            <Button variant={variant} disabled>Disabled</Button>
+          </div>
+        ),
+      )}
+    </div>
+  ),
+}