web-ui/src/components/Form.stories.tsx

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>
        );
    },
};