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

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

const meta = {
    title: 'UI/ImageCropper',
    component: ImageCropper,
    tags: ['autodocs'],
    argTypes: {
        aspectRatio: { control: 'number' },
        circularCrop: { control: 'boolean' },
    },
} satisfies Meta<typeof ImageCropper>;

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 Cropper</Button>
                {open && (
                    <ImageCropper
                        {...args}
                        imageSrc="https://images.unsplash.com/photo-1620121692029-d088224ddc74"
                        onCancel={() => setOpen(false)}
                        onCropComplete={(area) => {
                            console.log('Cropped area:', area);
                            setOpen(false);
                        }}
                    />
                )}
            </>
        );
    },
    args: {
        aspectRatio: 1,
    }
};

export const BannerCrop: Story = {
    render: (args) => {
        const [open, setOpen] = useState(false);

        return (
            <>
                <Button onClick={() => setOpen(true)}>Crop Banner (3:1)</Button>
                {open && (
                    <ImageCropper
                        {...args}
                        imageSrc="https://images.unsplash.com/photo-1620121692029-d088224ddc74"
                        aspectRatio={3}
                        onCancel={() => setOpen(false)}
                        onCropComplete={(area) => {
                            console.log('Cropped area:', area);
                            setOpen(false);
                        }}
                    />
                )}
            </>
        );
    },
};