veza/apps/web/src/components/search/Search.stories.tsx

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

const mockResults = [
    { id: '1', type: 'track' as const, title: 'Neon Lights', subtitle: 'Synthwave Boy', image: 'https://placehold.co/40' },
    { id: '2', type: 'user' as const, title: 'DJ Cool', subtitle: 'Pro User', image: 'https://placehold.co/40' },
    { id: '3', type: 'playlist' as const, title: 'Summer Vibes', subtitle: 'Public', image: 'https://placehold.co/40' },
];

const meta = {
    title: 'Components/Features/Search/Search',
    component: Search,
    tags: ['autodocs'],
    parameters: {
        layout: 'centered',
    },
    decorators: [
        (Story) => (
            <div className="max-w-2xl w-full p-4 min-h-layout-story">
                <Story />
            </div>
        ),
    ],
    argTypes: {
        onSearch: { action: 'searched' },
        onResultSelect: { action: 'result selected' },
    },
} satisfies Meta<typeof Search>;

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

export const Default: Story = {
    args: {
        fetchSuggestions: async (query) => {
            await new Promise((r) => setTimeout(r, 500));
            return mockResults.filter((r) => r.title.toLowerCase().includes(query.toLowerCase()));
        },
    },
};

export const NoHistory: Story = {
    args: {
        showHistory: false,
        fetchSuggestions: async () => {
            await new Promise((r) => setTimeout(r, 500));
            return mockResults;
        },
    },
};

/** Suggestions loading (delay 2s). Type to see loading state. */
export const Loading: Story = {
    args: {
        fetchSuggestions: async () => {
            await new Promise((r) => setTimeout(r, 2000));
            return mockResults;
        },
    },
};

/** No results for query. */
export const Empty: Story = {
    args: {
        fetchSuggestions: async () => [],
    },
};

/** Fetch fails — error is logged, empty list shown. */
export const Error: Story = {
    args: {
        fetchSuggestions: async () => {
            throw new Error('Search service unavailable');
        },
    },
};