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

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

const { Story } = defineMeta({
    title: 'Shared/Section',
    component: Section,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Page layout component that provides a container for page widgets with title, optional header, description, and content snippets.',
            },
            story: { inline: false },
        },
        layout: 'fullscreen',
    },
    argTypes: {
        id: {
            control: 'text',
            description: 'ID of the section',
        },
        title: {
            control: 'text',
            description: 'Section title text',
        },
        index: {
            control: 'number',
            description: 'Index of the section',
        },
        headerTitle: {
            control: 'text',
            description: 'Header title text',
        },
        headerSubtitle: {
            control: 'text',
            description: 'Header subtitle text',
        },
        class: {
            control: 'text',
            description: 'Additional CSS classes',
        },
    },
});
</script>

<Story name="Default">
    {#snippet template()}
        <Section title="Welcome" index={1}>
            {#snippet content()}
                <p class="text-lg text-text-muted">
                    This is the default section layout with a title and content area. The section provides a container
                    for page widgets.
                </p>
            {/snippet}
        </Section>
    {/snippet}
</Story>

<Story name="With Header">
    {#snippet template()}
        <Section title="Typography Settings" headerTitle="Section Header" headerSubtitle="Subtitle text" index={1}>
            {#snippet content()}
                <p class="text-lg text-text-muted">
                    This section includes a header with title and subtitle above the section title.
                </p>
            {/snippet}
        </Section>
    {/snippet}
</Story>

<Story name="With Header Content">
    {#snippet template()}
        <Section title="Search Fonts" index={1}>
            {#snippet headerContent()}
                <button class="px-3 py-1.5 text-sm bg-background-40 rounded-lg text-text-muted">
                    Action
                </button>
            {/snippet}
            {#snippet content()}
                <p class="text-lg text-text-muted">
                    Use the search bar to find fonts by name, or use the filters to browse by category, subset, or
                    provider.
                </p>
            {/snippet}
        </Section>
    {/snippet}
</Story>

<Story name="Multiple Sections" tags={['!autodocs']}>
    {#snippet template()}
        <div class="space-y-0">
            <Section id="section-1" title="Typography" index={1}>
                {#snippet content()}
                    <p class="text-lg text-text-muted">
                        Control the size, weight, and line height of your text. These settings apply across the
                        comparison view.
                    </p>
                {/snippet}
            </Section>

            <Section id="section-2" title="Font Search" index={2}>
                {#snippet content()}
                    <p class="text-lg text-text-muted">
                        Search through our collection of fonts from Google Fonts and Fontshare. Use filters to narrow
                        down your selection.
                    </p>
                {/snippet}
            </Section>

            <Section id="section-3" title="Sample List" index={3}>
                {#snippet content()}
                    <p class="text-lg text-text-muted">
                        Browse through font samples with your custom text. The list is virtualized for optimal
                        performance.
                    </p>
                {/snippet}
            </Section>
        </div>
    {/snippet}
</Story>

<Story name="With Long Content">
    {#snippet template()}
        <Section title="Long Content" index={1}>
            {#snippet content()}
                <div class="space-y-6">
                    <p class="text-lg text-text-muted">
                        This section demonstrates how the component behaves with longer content.
                    </p>
                    <div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
                        <span class="text-text-muted">Content block 1</span>
                    </div>
                    <p class="text-text-muted">
                        The Section component provides a consistent layout container for page-level widgets with
                        configurable titles and content areas.
                    </p>
                    <div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
                        <span class="text-text-muted">Content block 2</span>
                    </div>
                    <p class="text-text-muted">
                        Content is passed via snippets, allowing full flexibility in what gets rendered inside.
                    </p>
                    <div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
                        <span class="text-text-muted">Content block 3</span>
                    </div>
                </div>
            {/snippet}
        </Section>
    {/snippet}
</Story>

<Story name="Minimal">
    {#snippet template()}
        <Section title="Minimal Section">
            {#snippet content()}
                <p class="text-text-muted">
                    A minimal section without index or header. Just the essentials.
                </p>
            {/snippet}
        </Section>
    {/snippet}
</Story>

<Story name="Custom Content">
    {#snippet template()}
        <Section title="Custom Content" index={42}>
            {#snippet content()}
                <div class="grid grid-cols-2 gap-4">
                    <div class="p-4 bg-background-40 rounded-lg">
                        <h3 class="font-semibold mb-2">Card 1</h3>
                        <p class="text-sm text-text-muted">Some content here</p>
                    </div>
                    <div class="p-4 bg-background-40 rounded-lg">
                        <h3 class="font-semibold mb-2">Card 2</h3>
                        <p class="text-sm text-text-muted">More content here</p>
                    </div>
                </div>
            {/snippet}
        </Section>
    {/snippet}
</Story>