11.4Form Component Accessibility Stories

// TextField.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { TextField } from './TextField';

const meta: Meta<typeof TextField> = {
    title: 'Components/TextField',
    component: TextField,
};
export default meta;

export const Default: StoryObj<typeof TextField> = {
    args: {
        label: 'Email address',
        placeholder: 'you@example.com',
        type: 'email',
    },
};

export const WithError: StoryObj<typeof TextField> = {
    args: {
        label: 'Email address',
        value: 'not-an-email',
        error: 'Please enter a valid email address',
    },
};

export const WithHelperText: StoryObj<typeof TextField> = {
    args: {
        label: 'Password',
        type: 'password',
        helperText: 'Must be at least 8 characters with one number',
    },
};

export const Required: StoryObj<typeof TextField> = {
    args: {
        label: 'Full Name',
        required: true,
    },
};

export const Disabled: StoryObj<typeof TextField> = {
    args: {
        label: 'Username',
        value: 'johndoe',
        disabled: true,
    },
};