102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
import { useState } from 'react';
|
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Button } from './Button';
|
|
import { Dropdown } from './Dropdown';
|
|
import { Form } from './Form';
|
|
import { InputField } from './InputField';
|
|
|
|
const meta = {
|
|
title: 'Components/Form',
|
|
component: Form,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'Surface container with a title bar and a responsive content grid, intended for CMS forms.'
|
|
}
|
|
}
|
|
},
|
|
argTypes: {
|
|
title: {
|
|
description: 'Form title displayed in the header bar.',
|
|
control: 'text',
|
|
table: { type: { summary: 'string' } }
|
|
},
|
|
titleBarRight: {
|
|
description: 'Optional node rendered on the right side of the title bar.',
|
|
control: false,
|
|
table: { type: { summary: 'ReactNode' } }
|
|
},
|
|
children: {
|
|
description: 'Form content rendered inside the responsive grid.',
|
|
control: false,
|
|
table: { type: { summary: 'ReactNode' } }
|
|
},
|
|
className: {
|
|
description: 'Extra CSS classes for the root container.',
|
|
control: 'text',
|
|
table: { type: { summary: 'string' } }
|
|
}
|
|
},
|
|
args: {
|
|
title: 'Post details'
|
|
}
|
|
} satisfies Meta<typeof Form>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Basic: Story = {
|
|
args: {
|
|
children: (
|
|
<>
|
|
<InputField label="Title" type="text" value="A short post title" />
|
|
<Dropdown
|
|
label="Status"
|
|
value="draft"
|
|
choices={[
|
|
{ id: 'draft', label: 'Draft' },
|
|
{ id: 'published', label: 'Published' }
|
|
]}
|
|
/>
|
|
<InputField label="Slug" type="text" value="a-short-post-title" />
|
|
</>
|
|
)
|
|
}
|
|
};
|
|
|
|
export const WithActions: Story = {
|
|
render: (args) => {
|
|
const [title, setTitle] = useState('Storybook powered CMS');
|
|
const [status, setStatus] = useState('draft');
|
|
|
|
return (
|
|
<Form
|
|
{...args}
|
|
titleBarRight={<Button type="solid" size="sm" label="Save" />}
|
|
>
|
|
<div className="col-span-2">
|
|
<InputField
|
|
label="Title"
|
|
type="text"
|
|
value={title}
|
|
onChange={(event) => setTitle(event.target.value)}
|
|
size="full"
|
|
/>
|
|
</div>
|
|
<Dropdown
|
|
label="Status"
|
|
value={status}
|
|
onChange={setStatus}
|
|
choices={[
|
|
{ id: 'draft', label: 'Draft' },
|
|
{ id: 'review', label: 'In review' },
|
|
{ id: 'published', label: 'Published' }
|
|
]}
|
|
/>
|
|
<InputField label="Slug" type="text" value="storybook-powered-cms" />
|
|
</Form>
|
|
);
|
|
}
|
|
};
|