design system token v0.1
This commit is contained in:
Juan
170
stories/Primitives/Badge.stories.tsx
Normal file
170
stories/Primitives/Badge.stories.tsx
Normal file
@@ -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>
|
||||
),
|
||||
}
|
||||
171
stories/Primitives/Button.stories.tsx
Normal file
171
stories/Primitives/Button.stories.tsx
Normal file
@@ -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>
|
||||
),
|
||||
}
|
||||
88
stories/Primitives/Input.stories.tsx
Normal file
88
stories/Primitives/Input.stories.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
|
||||
const meta = {
|
||||
title: 'Primitives/Input',
|
||||
component: Input,
|
||||
tags: ['autodocs'],
|
||||
parameters: { layout: 'centered' },
|
||||
argTypes: {
|
||||
type: {
|
||||
control: 'select',
|
||||
options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url', 'file'],
|
||||
},
|
||||
disabled: { control: 'boolean' },
|
||||
placeholder: { control: 'text' },
|
||||
},
|
||||
} satisfies Meta<typeof Input>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
placeholder: 'Enter text...',
|
||||
type: 'text',
|
||||
},
|
||||
}
|
||||
|
||||
export const Email: Story = {
|
||||
args: {
|
||||
type: 'email',
|
||||
placeholder: 'email@example.com',
|
||||
},
|
||||
}
|
||||
|
||||
export const Password: Story = {
|
||||
args: {
|
||||
type: 'password',
|
||||
placeholder: 'Enter password...',
|
||||
},
|
||||
}
|
||||
|
||||
export const File: Story = {
|
||||
args: {
|
||||
type: 'file',
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
placeholder: 'Disabled input',
|
||||
disabled: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithLabel: Story = {
|
||||
render: () => (
|
||||
<div className="grid w-full max-w-sm gap-2">
|
||||
<Label htmlFor="with-label-input">Email</Label>
|
||||
<Input id="with-label-input" type="email" placeholder="email@example.com" />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const ErrorState: Story = {
|
||||
render: () => (
|
||||
<div className="grid w-full max-w-sm gap-2">
|
||||
<Label htmlFor="error-input">Email</Label>
|
||||
<Input
|
||||
id="error-input"
|
||||
type="email"
|
||||
placeholder="email@example.com"
|
||||
aria-invalid="true"
|
||||
defaultValue="invalid-email"
|
||||
/>
|
||||
<p className="text-sm text-destructive">Please enter a valid email address.</p>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithDefaultValue: Story = {
|
||||
args: {
|
||||
type: 'text',
|
||||
defaultValue: 'Hello world',
|
||||
},
|
||||
}
|
||||
103
stories/Primitives/Toggle.stories.tsx
Normal file
103
stories/Primitives/Toggle.stories.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import { Bold, Italic, Underline } from 'lucide-react'
|
||||
|
||||
import { Toggle } from '@/components/ui/toggle'
|
||||
|
||||
const meta = {
|
||||
title: 'Primitives/Toggle',
|
||||
component: Toggle,
|
||||
tags: ['autodocs'],
|
||||
parameters: { layout: 'centered' },
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: 'select',
|
||||
options: ['default', 'outline'],
|
||||
},
|
||||
size: {
|
||||
control: 'select',
|
||||
options: ['default', 'sm', 'lg'],
|
||||
},
|
||||
disabled: { control: 'boolean' },
|
||||
},
|
||||
} satisfies Meta<typeof Toggle>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: <Bold className="size-4" />,
|
||||
'aria-label': 'Toggle bold',
|
||||
},
|
||||
}
|
||||
|
||||
export const Outline: Story = {
|
||||
args: {
|
||||
variant: 'outline',
|
||||
children: <Italic className="size-4" />,
|
||||
'aria-label': 'Toggle italic',
|
||||
},
|
||||
}
|
||||
|
||||
export const Small: Story = {
|
||||
args: {
|
||||
size: 'sm',
|
||||
children: <Bold className="size-4" />,
|
||||
'aria-label': 'Toggle bold',
|
||||
},
|
||||
}
|
||||
|
||||
export const Large: Story = {
|
||||
args: {
|
||||
size: 'lg',
|
||||
children: <Bold className="size-4" />,
|
||||
'aria-label': 'Toggle bold',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithText: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
<Italic className="size-4" />
|
||||
Italic
|
||||
</>
|
||||
),
|
||||
'aria-label': 'Toggle italic',
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
disabled: true,
|
||||
children: <Bold className="size-4" />,
|
||||
'aria-label': 'Toggle bold',
|
||||
},
|
||||
}
|
||||
|
||||
export const Pressed: Story = {
|
||||
args: {
|
||||
defaultPressed: true,
|
||||
children: <Bold className="size-4" />,
|
||||
'aria-label': 'Toggle bold',
|
||||
},
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-20 text-sm text-muted-foreground">default</span>
|
||||
<Toggle size="sm" aria-label="Bold"><Bold className="size-4" /></Toggle>
|
||||
<Toggle size="default" aria-label="Italic"><Italic className="size-4" /></Toggle>
|
||||
<Toggle size="lg" aria-label="Underline"><Underline className="size-4" /></Toggle>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-20 text-sm text-muted-foreground">outline</span>
|
||||
<Toggle variant="outline" size="sm" aria-label="Bold"><Bold className="size-4" /></Toggle>
|
||||
<Toggle variant="outline" size="default" aria-label="Italic"><Italic className="size-4" /></Toggle>
|
||||
<Toggle variant="outline" size="lg" aria-label="Underline"><Underline className="size-4" /></Toggle>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
Reference in New Issue
Block a user