frontend-svelte/src/shared/ui/SearchBar/SearchBar.stories.svelte

<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import SearchBar from './SearchBar.svelte';

const { Story } = defineMeta({
    title: 'Shared/SearchBar',
    component: SearchBar,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Search input with popover dropdown for results/suggestions. Features keyboard navigation (ArrowDown/Up/Enter) and auto-focus prevention on popover open. The input field serves as the popover trigger.',
            },
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
    argTypes: {
        value: {
            control: 'text',
            description: 'Current search value (two-way bindable)',
        },
        placeholder: {
            control: 'text',
            description: 'Placeholder text for the input',
        },
        label: {
            control: 'text',
            description: 'Optional label displayed above the input',
        },
    },
});
</script>

<script lang="ts">
let defaultSearchValue = $state('');
let withLabelValue = $state('');
let noChildrenValue = $state('');
</script>

<Story
    name="Default"
    args={{
        value: defaultSearchValue,
        placeholder: 'Type here...',
    }}
>
    <SearchBar bind:value={defaultSearchValue} placeholder="Type here...">
        Here will be the search result
        <br />
        Popover closes only when the user clicks outside the search bar or presses the Escape key.
    </SearchBar>
</Story>

<Story
    name="With Label"
    args={{
        value: withLabelValue,
        placeholder: 'Search products...',
        label: 'Search',
    }}
>
    <SearchBar bind:value={withLabelValue} placeholder="Search products..." label="Search">
        <div class="p-4">
            <p class="text-sm text-muted-foreground">No results found</p>
        </div>
    </SearchBar>
</Story>

<Story
    name="Minimal Content"
    args={{
        value: noChildrenValue,
        placeholder: 'Quick search...',
    }}
>
    <SearchBar bind:value={noChildrenValue} placeholder="Quick search...">
        <div class="p-4 text-center text-sm text-muted-foreground">
            Start typing to see results
        </div>
    </SearchBar>
</Story>