feat: add Storybook with component stories
Installs @storybook/nextjs-vite. Stories co-located with components, grouped by layer (Shared/Entities/Widgets). Multi-variant cases use render functions instead of one story per variant/size.
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
||||
import { Input, Textarea } from './Input'
|
||||
|
||||
const meta: Meta<typeof Input> = {
|
||||
title: 'Shared/Input',
|
||||
component: Input,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="p-8 bg-ochre-clay max-w-sm">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof Input>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
}
|
||||
|
||||
export const WithLabel: Story = {
|
||||
args: {
|
||||
label: 'Email address',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'Email',
|
||||
error: 'This field is required',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithPlaceholder: Story = {
|
||||
args: {
|
||||
placeholder: 'Enter your email',
|
||||
type: 'email',
|
||||
},
|
||||
}
|
||||
|
||||
export const TextareaStory: Story = {
|
||||
name: 'Textarea',
|
||||
render: () => (
|
||||
<div className="p-8 bg-ochre-clay max-w-sm">
|
||||
<Textarea label="Message" rows={4} />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const TextareaWithError: Story = {
|
||||
render: () => (
|
||||
<div className="p-8 bg-ochre-clay max-w-sm">
|
||||
<Textarea label="Message" error="Too short" rows={4} />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
Reference in New Issue
Block a user