frontend-svelte/src/shared/ui/Button/IconButton.stories.svelte

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

const { Story } = defineMeta({
    title: 'Shared/IconButton',
    component: IconButton,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Icon-only button variant. Convenience wrapper that defaults variant to "icon" and enforces icon-only usage.',
            },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        variant: {
            control: 'select',
            options: ['icon', 'ghost', 'secondary'],
            defaultValue: 'icon',
        },
        size: {
            control: 'select',
            options: ['xs', 'sm', 'md', 'lg', 'xl'],
            defaultValue: 'md',
        },
        active: {
            control: 'boolean',
            defaultValue: false,
        },
        animate: {
            control: 'boolean',
            defaultValue: true,
        },
    },
});
</script>

<script lang="ts">
import MoonIcon from '@lucide/svelte/icons/moon';
import SearchIcon from '@lucide/svelte/icons/search';
import TrashIcon from '@lucide/svelte/icons/trash-2';
</script>

<Story
    name="Default"
    args={{ variant: 'icon', size: 'md', active: false, animate: true }}
>
    {#snippet template(args)}
        <div class="flex items-center gap-4">
            <IconButton {...args}>
                {#snippet icon()}
                    <SearchIcon />
                {/snippet}
            </IconButton>
            <IconButton {...args} size="sm">
                {#snippet icon()}
                    <SearchIcon />
                {/snippet}
            </IconButton>
            <IconButton {...args} size="lg">
                {#snippet icon()}
                    <SearchIcon />
                {/snippet}
            </IconButton>
        </div>
    {/snippet}
</Story>

<Story
    name="Variants"
    args={{ size: 'md', active: false, animate: true }}
>
    {#snippet template(args)}
        <div class="flex items-center gap-4">
            <IconButton {...args} variant="icon">
                {#snippet icon()}
                    <SearchIcon />
                {/snippet}
            </IconButton>
            <IconButton {...args} variant="ghost">
                {#snippet icon()}
                    <MoonIcon />
                {/snippet}
            </IconButton>
            <IconButton {...args} variant="secondary">
                {#snippet icon()}
                    <SearchIcon />
                {/snippet}
            </IconButton>
        </div>
    {/snippet}
</Story>

<Story
    name="Active State"
    args={{ size: 'md', animate: true }}
>
    {#snippet template(args)}
        <div class="flex items-center gap-4">
            <IconButton {...args} active={false} variant="icon">
                {#snippet icon()}
                    <TrashIcon />
                {/snippet}
            </IconButton>
            <IconButton {...args} active={true} variant="icon">
                {#snippet icon()}
                    <TrashIcon />
                {/snippet}
            </IconButton>
        </div>
    {/snippet}
</Story>

<Story
    name="Dark Mode"
    parameters={{
        backgrounds: {
            default: 'dark',
        },
    }}
>
    {#snippet template(args)}
        <div class="p-8 bg-background text-foreground">
            <h3 class="mb-4 text-sm font-medium">Dark Mode</h3>
            <div class="flex items-center gap-4">
                <IconButton {...args} variant="icon">
                    {#snippet icon()}
                        <SearchIcon />
                    {/snippet}
                </IconButton>
                <IconButton {...args} variant="ghost">
                    {#snippet icon()}
                        <MoonIcon />
                    {/snippet}
                </IconButton>
                <IconButton {...args} variant="secondary">
                    {#snippet icon()}
                        <SearchIcon />
                    {/snippet}
                </IconButton>
            </div>
        </div>
    {/snippet}
</Story>