89 lines
1.8 KiB
TypeScript
89 lines
1.8 KiB
TypeScript
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',
|
|
},
|
|
}
|