frontend-svelte/.storybook/preview.ts

import type { Preview } from '@storybook/svelte-vite';
import Decorator from './Decorator.svelte';
import StoryStage from './StoryStage.svelte';
import '../src/app/styles/app.css';

const preview: Preview = {
    parameters: {
        layout: 'fullscreen',
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i,
            },
        },

        a11y: {
            // 'todo' - show a11y violations in the test UI only
            // 'error' - fail CI on a11y violations
            // 'off' - skip a11y checks entirely
            test: 'todo',
        },

        docs: {
            story: {
                // This sets the default height for the iframe in Autodocs
                iframeHeight: '400px',
            },
        },

        head: `
            <link rel="preconnect" href="https://api.fontshare.com" />
            <link rel="preconnect" href="https://cdn.fontshare.com" crossorigin="anonymous" />
            <link rel="preconnect" href="https://fonts.googleapis.com" />
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
            <link
                rel="stylesheet"
                href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&family=Major+Mono+Display&display=swap"
            />
            <style>
                body {
                    font-family: "Karla", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
                }
            </style>
        `,
    },

    decorators: [
        // Wrap with providers (TooltipProvider, ResponsiveManager)
        story => ({
            Component: Decorator,
            props: {
                children: story(),
            },
        }),
        // Wrap with StoryStage for presentation styling
        story => ({
            Component: StoryStage,
            props: {
                children: story(),
            },
        }),
    ],
};

export default preview;