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

import type { Meta, StoryObj } from '@storybook/react';
import { ErrorDisplay } from './ErrorDisplay';

const meta = {
    title: 'UI/ErrorDisplay',
    component: ErrorDisplay,
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: 'select',
            options: ['inline', 'banner', 'modal', 'card'],
        },
        severity: {
            control: 'select',
            options: ['error', 'warning', 'info'],
        },
        size: {
            control: 'select',
            options: ['sm', 'md', 'lg'],
        },
    },
} satisfies Meta<typeof ErrorDisplay>;

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

export const Default: Story = {
    args: {
        error: 'An unexpected error occurred.',
        severity: 'error',
    },
};

export const WarningBanner: Story = {
    args: {
        error: 'Your subscription is expiring soon.',
        severity: 'warning',
        variant: 'banner',
        title: 'Payment Alert',
    },
};

export const WithDetails: Story = {
    args: {
        error: {
            message: 'Failed to fetch user data',
            code: 'USER_NOT_FOUND',
            status: 404,
            details: { userId: '123' }
        },
        showDetails: true,
    },
};

export const WithActions: Story = {
    args: {
        error: 'Network connection lost',
        onRetry: () => console.log('Retrying...'),
        actions: [
            { label: 'Check Status', onClick: () => console.log('Checking status') }
        ],
    },
};