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

import type { Meta, StoryObj } from '@storybook/react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DialogBody } from './dialog';
import { Button } from './button';
import { useState } from 'react';

const meta = {
    title: 'UI/Dialog',
    component: Dialog,
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: 'select',
            options: ['default', 'alert', 'confirm', 'info'],
        },
        size: {
            control: 'select',
            options: ['sm', 'md', 'lg', 'xl'],
        },
        title: { control: 'text' },
        open: { control: 'boolean' },
    },
} satisfies Meta<typeof Dialog>;

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

export const Default: Story = {
    render: (args) => {
        const [open, setOpen] = useState(false);
        return (
            <>
                <Button onClick={() => setOpen(true)}>Open Dialog</Button>
                <Dialog
                    {...args}
                    open={open}
                    onClose={() => setOpen(false)}
                    title="Edit Profile"
                >
                    <div className="py-4">
                        <p className="text-sm text-kodo-content-dim">
                            Make changes to your profile here. Click save when you're done.
                        </p>
                    </div>
                    <DialogFooter>
                        <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
                        <Button onClick={() => setOpen(false)}>Save changes</Button>
                    </DialogFooter>
                </Dialog>
            </>
        );
    },
    args: {
        variant: 'default',
        size: 'md',
    }
};

export const Alert: Story = {
    render: (args) => {
        const [open, setOpen] = useState(false);
        return (
            <>
                <Button variant="destructive" onClick={() => setOpen(true)}>Delete Account</Button>
                <Dialog
                    {...args}
                    open={open}
                    onClose={() => setOpen(false)}
                    variant="alert"
                    title="Are you absolutely sure?"
                    onConfirm={() => setOpen(false)}
                    confirmLabel="Delete Account"
                >
                    <p className="text-sm text-kodo-content-dim">
                        This action cannot be undone. This will permanently delete your account and remove your data from our servers.
                    </p>
                </Dialog>
            </>
        );
    },
};

export const Composition: Story = {
    render: () => {
        const [open, setOpen] = useState(false);
        return (
            <div className="flex flex-col items-center gap-4">
                <Button onClick={() => setOpen(true)}>Open Composed Dialog</Button>
                {open && (
                    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
                        <div className="bg-kodo-ink border border-kodo-steel rounded-lg w-[400px]">
                            <DialogHeader>
                                <DialogTitle>Composed Dialog</DialogTitle>
                                <DialogDescription>Built using sub-components.</DialogDescription>
                            </DialogHeader>
                            <DialogBody>
                                Main content goes here.
                            </DialogBody>
                            <DialogFooter>
                                <Button onClick={() => setOpen(false)}>Close</Button>
                            </DialogFooter>
                        </div>
                    </div>
                )}
            </div>
        )
    }
}