1  import type { Meta, StoryObj } from '@storybook/react-vite';
  2  import { Button } from './Button';
  3  
  4  const meta: Meta<typeof Button> = {
  5    title: 'Components/Button',
  6    component: Button,
  7    parameters: {
  8      layout: 'centered',
  9    },
 10    tags: ['autodocs'],
 11    argTypes: {
 12      variant: {
 13        control: 'select',
 14        options: ['primary', 'secondary', 'ghost', 'destructive', 'success', 'link', 'alpha', 'delta'],
 15      },
 16      size: {
 17        control: 'select',
 18        options: ['sm', 'md', 'lg', 'icon'],
 19      },
 20      loading: {
 21        control: 'boolean',
 22      },
 23      disabled: {
 24        control: 'boolean',
 25      },
 26    },
 27  };
 28  
 29  export default meta;
 30  type Story = StoryObj<typeof Button>;
 31  
 32  export const Primary: Story = {
 33    args: {
 34      variant: 'primary',
 35      children: 'Primary Button',
 36    },
 37  };
 38  
 39  export const Alpha: Story = {
 40    args: {
 41      variant: 'alpha',
 42      children: 'Alpha Action',
 43    },
 44  };
 45  
 46  export const Delta: Story = {
 47    args: {
 48      variant: 'delta',
 49      children: 'Delta Action',
 50    },
 51  };
 52  
 53  export const Destructive: Story = {
 54    args: {
 55      variant: 'destructive',
 56      children: 'Delete',
 57    },
 58  };
 59  
 60  export const Secondary: Story = {
 61    args: {
 62      variant: 'secondary',
 63      children: 'Secondary',
 64    },
 65  };
 66  
 67  export const Ghost: Story = {
 68    args: {
 69      variant: 'ghost',
 70      children: 'Ghost',
 71    },
 72  };
 73  
 74  export const Link: Story = {
 75    args: {
 76      variant: 'link',
 77      children: 'Link',
 78    },
 79  };
 80  
 81  export const Success: Story = {
 82    args: {
 83      variant: 'success',
 84      children: 'Success',
 85    },
 86  };
 87  
 88  export const Small: Story = {
 89    args: {
 90      size: 'sm',
 91      children: 'Small',
 92    },
 93  };
 94  
 95  export const Medium: Story = {
 96    args: {
 97      size: 'md',
 98      children: 'Medium',
 99    },
100  };
101  
102  export const Large: Story = {
103    args: {
104      size: 'lg',
105      children: 'Large',
106    },
107  };
108  
109  export const Loading: Story = {
110    args: {
111      loading: true,
112      children: 'Loading',
113    },
114  };
115  
116  export const Disabled: Story = {
117    args: {
118      disabled: true,
119      children: 'Disabled',
120    },
121  };
122  
123  export const AllVariants: Story = {
124    render: () => (
125      <div className="flex flex-wrap gap-4">
126        <Button variant="primary">Primary</Button>
127        <Button variant="alpha">Alpha</Button>
128        <Button variant="delta">Delta</Button>
129        <Button variant="destructive">Destructive</Button>
130        <Button variant="secondary">Secondary</Button>
131        <Button variant="ghost">Ghost</Button>
132        <Button variant="link">Link</Button>
133        <Button variant="success">Success</Button>
134      </div>
135    ),
136  };
137  
138  export const AllSizes: Story = {
139    render: () => (
140      <div className="flex items-center gap-4">
141        <Button size="sm">Small</Button>
142        <Button size="md">Medium</Button>
143        <Button size="lg">Large</Button>
144        <Button size="icon">
145          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
146            <path d="M5 12h14M12 5l7 7-7 7"/>
147          </svg>
148        </Button>
149      </div>
150    ),
151  };