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

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

const meta = {
    title: 'UI/WaveformVisualizer',
    component: WaveformVisualizer,
    tags: ['autodocs'],
    argTypes: {
        progress: { control: { type: 'range', min: 0, max: 100 } },
        height: { control: 'number' },
        color: { control: 'color' },
        playedColor: { control: 'color' },
    },
    decorators: [
        (Story) => (
            <div className="bg-kodo-ink p-6 rounded-lg">
                <Story />
            </div>
        ),
    ],
} satisfies Meta<typeof WaveformVisualizer>;

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

export const Default: Story = {
    render: (args) => {
        const [progress, setProgress] = useState(30);
        return (
            <WaveformVisualizer
                {...args}
                progress={progress}
                onSeek={setProgress}
            />
        );
    },
};

export const CustomColors: Story = {
    args: {
        progress: 60,
        color: '#333',
        playedColor: '#ff0055',
        height: 100,
    },
    render: (args) => {
        const [progress, setProgress] = useState(args.progress);
        return (
            <WaveformVisualizer
                {...args}
                progress={progress}
                onSeek={setProgress}
            />
        );
    },
};

export const CustomData: Story = {
    render: () => {
        const [progress, setProgress] = useState(45);
        // Generate sine wave data
        const data = Array.from({ length: 50 }, (_, i) =>
            (Math.sin(i * 0.5) + 1) / 2
        );

        return (
            <WaveformVisualizer
                progress={progress}
                onSeek={setProgress}
                waveformData={data}
                height={120}
            />
        );
    },
};