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

import type { Meta, StoryObj } from '@storybook/react';
import { Modal } from './modal';
import { Button } from './button';
import { useState } from 'react';

const meta = {
    title: 'UI/Modal',
    component: Modal,
    tags: ['autodocs'],
    argTypes: {
        size: {
            control: 'select',
            options: ['sm', 'md', 'lg', 'xl', 'full'],
        },
        clickOutsideToClose: { control: 'boolean' },
    },
} satisfies Meta<typeof Modal>;

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

export const Default: Story = {
    render: (args) => {
        const [open, setOpen] = useState(false);
        return (
            <>
                <Button onClick={() => setOpen(true)}>Open Modal</Button>
                <Modal {...args} open={open} onClose={() => setOpen(false)} title="Example Modal">
                    <div className="py-4">
                        <p className="text-kodo-content-dim">
                            This is a standard modal dialog. It can contain any content.
                        </p>
                    </div>
                </Modal>
            </>
        );
    },
};

export const WithFooter: Story = {
    render: (args) => {
        const [open, setOpen] = useState(false);
        return (
            <>
                <Button onClick={() => setOpen(true)}>Modal with Footer</Button>
                <Modal
                    {...args}
                    open={open}
                    onClose={() => setOpen(false)}
                    title="Confirmation"
                    footer={
                        <>
                            <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
                            <Button onClick={() => setOpen(false)}>Confirm</Button>
                        </>
                    }
                >
                    <p className="text-white">Are you sure you want to proceed?</p>
                </Modal>
            </>
        );
    },
};