feat: add missing storybook files and type template arguments properly
This commit is contained in:
@@ -35,6 +35,7 @@ const { Story } = defineMeta({
|
||||
|
||||
<script lang="ts">
|
||||
import type { UnifiedFont } from '$entities/Font';
|
||||
import type { ComponentProps } from 'svelte';
|
||||
|
||||
// Mock fonts for testing
|
||||
const mockArial: UnifiedFont = {
|
||||
@@ -88,7 +89,7 @@ const mockGeorgia: UnifiedFont = {
|
||||
index: 0,
|
||||
}}
|
||||
>
|
||||
{#snippet template(args)}
|
||||
{#snippet template(args: ComponentProps<typeof FontSampler>)}
|
||||
<Providers>
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<FontSampler {...args} />
|
||||
@@ -105,7 +106,7 @@ const mockGeorgia: UnifiedFont = {
|
||||
index: 1,
|
||||
}}
|
||||
>
|
||||
{#snippet template(args)}
|
||||
{#snippet template(args: ComponentProps<typeof FontSampler>)}
|
||||
<Providers>
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<FontSampler {...args} />
|
||||
|
||||
26
src/features/GetFonts/ui/Filters/Filters.stories.svelte
Normal file
26
src/features/GetFonts/ui/Filters/Filters.stories.svelte
Normal file
@@ -0,0 +1,26 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import Filters from './Filters.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Features/Filters',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Renders the full list of filter groups managed by filterManager. Each group maps to a collapsible FilterGroup with checkboxes. No props — reads directly from the filterManager singleton.',
|
||||
},
|
||||
story: { inline: false },
|
||||
},
|
||||
layout: 'padded',
|
||||
},
|
||||
argTypes: {},
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<Filters />
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script module>
|
||||
import Providers from '$shared/lib/storybook/Providers.svelte';
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import FilterControls from './FilterControls.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Features/FilterControls',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Sort options and Reset_Filters button rendered below the filter list. Reads sort state from sortStore and dispatches resets via filterManager. Requires responsive context — wrap with Providers.',
|
||||
},
|
||||
story: { inline: false },
|
||||
},
|
||||
layout: 'padded',
|
||||
},
|
||||
argTypes: {},
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<Providers>
|
||||
<FilterControls />
|
||||
</Providers>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Mobile layout">
|
||||
{#snippet template()}
|
||||
<Providers initialWidth={375}>
|
||||
<div style="width: 375px;">
|
||||
<FilterControls />
|
||||
</div>
|
||||
</Providers>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script module>
|
||||
import Providers from '$shared/lib/storybook/Providers.svelte';
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import TypographyMenu from './TypographyMenu.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Features/TypographyMenu',
|
||||
component: TypographyMenu,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Floating typography controls. Mobile/tablet: settings button that opens a popover. Desktop: inline bar with combo controls.',
|
||||
},
|
||||
story: { inline: false },
|
||||
},
|
||||
layout: 'centered',
|
||||
},
|
||||
argTypes: {
|
||||
hidden: { control: 'boolean' },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Desktop">
|
||||
{#snippet template()}
|
||||
<Providers>
|
||||
<div class="relative h-20 flex items-end justify-center p-4">
|
||||
<TypographyMenu />
|
||||
</div>
|
||||
</Providers>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Mobile">
|
||||
{#snippet template()}
|
||||
<Providers initialWidth={375}>
|
||||
<div class="relative h-20 flex items-end justify-end p-4">
|
||||
<TypographyMenu />
|
||||
</div>
|
||||
</Providers>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Hidden">
|
||||
{#snippet template()}
|
||||
<Providers>
|
||||
<div class="relative h-20 flex items-end justify-center p-4">
|
||||
<TypographyMenu hidden={true} />
|
||||
</div>
|
||||
</Providers>
|
||||
{/snippet}
|
||||
</Story>
|
||||
Reference in New Issue
Block a user