design system token v0.1

stories/Primitives/Badge.stories.tsx

@@ -0,0 +1,170 @@
+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',
+      ],
+    },
+  },
+} 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>
+  ),
+}