veza/apps/web/src/components/settings/account/ChangeUsernameModal.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { fn } from 'storybook/test';
import { ChangeUsernameModal } from './ChangeUsernameModal';

/**
 * ChangeUsernameModal - Modal de changement de nom d'utilisateur
 *
 * Modal permettant de changer le nom d'utilisateur avec
 * vérification de disponibilité en temps réel.
 */
const meta: Meta<typeof ChangeUsernameModal> = {
    title: 'Components/Features/Settings/Account/ChangeUsernameModal',
    component: ChangeUsernameModal,
    parameters: {
        layout: 'centered',
        docs: {
            description: {
                component: 'Modal de changement de nom d\'utilisateur avec vérification.',
            },
        },
    },
    tags: ['autodocs'],
    args: {
        onClose: fn(),
    },
    decorators: [
        (Story) => (
            <div className="bg-background min-h-screen flex items-center justify-center">
                <Story />
            </div>
        ),
    ],
};

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

/**
 * État par défaut de la modal.
 */
export const Default: Story = {
    name: 'Par défaut',
};

/**
 * État de vérification de disponibilité.
 */
export const Checking: Story = {
    name: 'Vérification',
    parameters: {
        docs: {
            description: {
                story: 'Spinner pendant la vérification de disponibilité.',
            },
        },
    },
};

/**
 * État nom disponible.
 */
export const Available: Story = {
    name: 'Disponible',
    parameters: {
        docs: {
            description: {
                story: 'Indicateur vert quand le nom est disponible.',
            },
        },
    },
};