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

import type { Meta, StoryObj } from '@storybook/react'

import { Badge } from '@/components/ui/badge'

const meta = {
  title: 'Primitives/Badge',
  component: Badge,
  tags: ['autodocs'],
  parameters: { layout: 'centered' },
  argTypes: {
    variant: {
      control: 'select',
      options: [
        'default',
        'secondary',
        'muted',
        'destructive',
        'outline',
        'success',
        'warning',
        'info',
        'tag',
        'value',
        'whatsapp',
        'email',
        'telegram',
        'zulip',
        'platform',
      ],
    },
    size: {
      control: 'select',
      options: ['sm', 'default', 'lg'],
    },
  },
} satisfies Meta<typeof Badge>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    children: 'Badge',
    variant: 'default',
  },
}

export const Secondary: Story = {
  args: {
    children: 'Secondary',
    variant: 'secondary',
  },
}

export const Muted: Story = {
  args: {
    children: 'Muted',
    variant: 'muted',
  },
}

export const Destructive: Story = {
  args: {
    children: 'Destructive',
    variant: 'destructive',
  },
}

export const Outline: Story = {
  args: {
    children: 'Outline',
    variant: 'outline',
  },
}

export const Success: Story = {
  args: {
    children: 'Success',
    variant: 'success',
  },
}

export const Warning: Story = {
  args: {
    children: 'Warning',
    variant: 'warning',
  },
}

export const Info: Story = {
  args: {
    children: 'Info',
    variant: 'info',
  },
}

export const Tag: Story = {
  args: {
    children: 'Tag',
    variant: 'tag',
  },
}

export const Value: Story = {
  args: {
    children: '42',
    variant: 'value',
  },
}

export const Whatsapp: Story = {
  args: {
    children: 'WhatsApp',
    variant: 'whatsapp',
  },
}

export const Email: Story = {
  args: {
    children: 'Email',
    variant: 'email',
  },
}

export const Telegram: Story = {
  args: {
    children: 'Telegram',
    variant: 'telegram',
  },
}

export const Zulip: Story = {
  args: {
    children: 'Zulip',
    variant: 'zulip',
  },
}

export const Platform: Story = {
  args: {
    children: 'Platform',
    variant: 'platform',
  },
}

export const AllVariants: Story = {
  render: () => (
    <div className="flex flex-wrap gap-2">
      {(
        [
          'default',
          'secondary',
          'muted',
          'destructive',
          'outline',
          'success',
          'warning',
          'info',
          'tag',
          'value',
          'whatsapp',
          'email',
          'telegram',
          'zulip',
          'platform',
        ] as const
      ).map((variant) => (
        <Badge key={variant} variant={variant}>
          {variant}
        </Badge>
      ))}
    </div>
  ),
}

export const SizeSmall: Story = {
  args: {
    children: 'Small',
    variant: 'secondary',
    size: 'sm',
  },
}

export const SizeDefault: Story = {
  args: {
    children: 'Default',
    variant: 'secondary',
    size: 'default',
  },
}

export const SizeLarge: Story = {
  args: {
    children: 'Large',
    variant: 'default',
    size: 'lg',
  },
}

export const AllSizes: Story = {
  render: () => (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-3">
        <span className="w-20 text-sm text-muted-foreground font-sans">sm</span>
        <Badge variant="secondary" size="sm">dense</Badge>
        <Badge variant="success" size="sm">12 new</Badge>
        <Badge variant="muted" size="sm">draft</Badge>
      </div>
      <div className="flex items-center gap-3">
        <span className="w-20 text-sm text-muted-foreground font-sans">default</span>
        <Badge variant="default" size="default">Active</Badge>
        <Badge variant="success" size="default">Published</Badge>
        <Badge variant="warning" size="default">Pending</Badge>
      </div>
      <div className="flex items-center gap-3">
        <span className="w-20 text-sm text-muted-foreground font-sans">lg</span>
        <Badge variant="default" size="lg">New feature</Badge>
        <Badge variant="info" size="lg">Beta</Badge>
        <Badge variant="success" size="lg">Available</Badge>
      </div>
    </div>
  ),
}