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

import type { Meta, StoryObj } from '@storybook/react';
import { Tooltip } from './tooltip';
import { Button } from './button';
import { Plus } from 'lucide-react';

const meta: Meta = {
    title: 'UI/Tooltip',
    component: Tooltip,
    tags: ['autodocs'],
    argTypes: {
        position: {
            control: 'select',
            options: ['top', 'bottom', 'left', 'right'],
        },
        trigger: {
            control: 'select',
            options: ['hover', 'click', 'focus'],
        },
        delay: { control: 'number' },
        showArrow: { control: 'boolean' },
        disabled: { control: 'boolean' },
    },
    args: {
        content: 'Add to library',
        position: 'top',
        delay: 200,
    }
};

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

export const Default: Story = {
    render: (args) => (
        <div className="p-12 flex justify-center">
            <Tooltip content="Add to library" {...args}>
                <Button variant="outline" size="icon">
                    <Plus className="h-4 w-4" />
                </Button>
            </Tooltip>
        </div>
    ),
};

export const Positions: Story = {
    render: () => (
        <div className="flex gap-8 justify-center items-center min-h-layout-story">
            <Tooltip content="Left" position="left">
                <Button variant="outline">Left</Button>
            </Tooltip>
            <Tooltip content="Top" position="top">
                <Button variant="outline">Top</Button>
            </Tooltip>
            <Tooltip content="Bottom" position="bottom">
                <Button variant="outline">Bottom</Button>
            </Tooltip>
            <Tooltip content="Right" position="right">
                <Button variant="outline">Right</Button>
            </Tooltip>
        </div>
    ),
};

export const ManualTrigger: Story = {
    args: {
        trigger: 'click',
        content: 'Clicked!',
    },
    render: (args) => (
        <div className="p-12 flex justify-center">
            <Tooltip content="Clicked!" {...args}>
                <Button>Click me</Button>
            </Tooltip>
        </div>
    ),
};