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

import type { Meta, StoryObj } from '@storybook/react';
import { LoadingState, LoadingStateWrapper } from './LoadingState';
import { Card } from './card';

const meta = {
    title: 'UI/LoadingState',
    component: LoadingState,
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: 'select',
            options: ['spinner', 'inline', 'skeleton', 'minimal'],
        },
        size: {
            control: 'select',
            options: ['sm', 'md', 'lg'],
        },
        isLoading: { control: 'boolean' },
    },
} satisfies Meta<typeof LoadingState>;

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

export const Default: Story = {
    args: {
        isLoading: true,
        text: 'Loading data...',
    },
};

export const Inline: Story = {
    args: {
        isLoading: true,
        variant: 'inline',
        text: 'Saving changes...',
    },
};

export const Skeleton: Story = {
    args: {
        isLoading: true,
        variant: 'skeleton',
    },
};

export const WrapperExample: Story = {
    render: (args) => (
        <Card className="p-6 w-[300px]">
            <LoadingStateWrapper {...args} isLoading={true}>
                <div>
                    <h3>Content Loaded</h3>
                    <p>This text is hidden while loading.</p>
                </div>
            </LoadingStateWrapper>
        </Card>
    ),
};