veza/apps/web/src/components/ui/FormField.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { FormField, Input, Textarea, Select } from './FormField';

const meta = {
    title: 'UI/FormField',
    component: FormField,
    tags: ['autodocs'],
    argTypes: {
        label: { control: 'text' },
        error: { control: 'text' },
        helpText: { control: 'text' },
        required: { control: 'boolean' },
    },
} satisfies Meta<typeof FormField>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
    args: {
        label: 'Username',
        children: <Input placeholder="Enter username" />,
    },
};

export const WithError: Story = {
    args: {
        label: 'Email',
        required: true,
        error: 'Invalid email address',
        children: <Input error placeholder="Enter email" defaultValue="invalid@" />,
    },
};

export const WithHelpText: Story = {
    args: {
        label: 'Bio',
        helpText: 'Tell us a little bit about yourself (max 140 chars)',
        children: <Textarea placeholder="Type your bio here..." />,
    },
};

export const WithSelect: Story = {
    args: {
        label: 'Role',
        required: true,
        children: (
            <Select
                options={[
                    { value: 'user', label: 'User' },
                    { value: 'admin', label: 'Admin' },
                ]}
            />
        ),
    },
};