greyhaven-design-system/stories/Primitives/Button.stories.tsx

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