feat: add missing storybook files and type template arguments properly
This commit is contained in:
Ilia Mashkov
@@ -0,0 +1,91 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import FontApplicator from './FontApplicator.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Entities/FontApplicator',
|
||||
component: FontApplicator,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Loads a font and applies it to children. Shows blur/scale loading state until font is ready, then reveals with a smooth transition.',
|
||||
},
|
||||
story: { inline: false },
|
||||
},
|
||||
layout: 'centered',
|
||||
},
|
||||
argTypes: {
|
||||
weight: { control: 'number' },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { mockUnifiedFont } from '$entities/Font/lib/mocks';
|
||||
import type { ComponentProps } from 'svelte';
|
||||
|
||||
const fontUnknown = mockUnifiedFont({ id: 'nonexistent-font-xk92z', name: 'Nonexistent Font Xk92z' });
|
||||
|
||||
const fontArial = mockUnifiedFont({ id: 'arial', name: 'Arial' });
|
||||
|
||||
const fontArialBold = mockUnifiedFont({ id: 'arial-bold', name: 'Arial' });
|
||||
</script>
|
||||
|
||||
<Story
|
||||
name="Loading State"
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Font that has never been loaded by appliedFontsManager. The component renders in its pending state: blurred, scaled down, and semi-transparent.',
|
||||
},
|
||||
},
|
||||
}}
|
||||
args={{ font: fontUnknown, weight: 400 }}
|
||||
>
|
||||
{#snippet template(args: ComponentProps<typeof FontApplicator>)}
|
||||
<FontApplicator {...args}>
|
||||
<p class="text-xl">The quick brown fox jumps over the lazy dog</p>
|
||||
</FontApplicator>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Loaded State"
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Uses Arial, a system font available in all browsers. Because appliedFontsManager has not loaded it via FontFace, the manager status may remain pending — meaning the blur/scale state may still show. In a real app the manager would load the font and transition to the revealed state.',
|
||||
},
|
||||
},
|
||||
}}
|
||||
args={{ font: fontArial, weight: 400 }}
|
||||
>
|
||||
{#snippet template(args: ComponentProps<typeof FontApplicator>)}
|
||||
<FontApplicator {...args}>
|
||||
<p class="text-xl">The quick brown fox jumps over the lazy dog</p>
|
||||
</FontApplicator>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Custom Weight"
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Demonstrates passing a custom weight (700). The weight is forwarded to appliedFontsManager for font resolution; visually identical to the loaded state story until the manager confirms the font.',
|
||||
},
|
||||
},
|
||||
}}
|
||||
args={{ font: fontArialBold, weight: 700 }}
|
||||
>
|
||||
{#snippet template(args: ComponentProps<typeof FontApplicator>)}
|
||||
<FontApplicator {...args}>
|
||||
<p class="text-xl">The quick brown fox jumps over the lazy dog</p>
|
||||
</FontApplicator>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -0,0 +1,114 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import FontVirtualList from './FontVirtualList.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Entities/FontVirtualList',
|
||||
component: FontVirtualList,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Virtualized font list backed by the `fontStore` singleton. Handles font loading registration (pin/touch) for visible items and triggers infinite scroll pagination via `fontStore.nextPage()`. Because the component reads directly from the `fontStore` singleton, stories render against a live (but empty/loading) store — no font data will appear unless the API is reachable from the Storybook host.',
|
||||
},
|
||||
story: { inline: false },
|
||||
},
|
||||
layout: 'padded',
|
||||
},
|
||||
argTypes: {
|
||||
weight: { control: 'number', description: 'Font weight applied to visible fonts' },
|
||||
itemHeight: { control: 'number', description: 'Height of each list item in pixels' },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import type { ComponentProps } from 'svelte';
|
||||
</script>
|
||||
|
||||
<Story
|
||||
name="Loading Skeleton"
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Skeleton state shown while `fontStore.fonts` is empty and `fontStore.isLoading` is true. In a real session the skeleton fades out once the first page loads.',
|
||||
},
|
||||
},
|
||||
}}
|
||||
args={{ weight: 400, itemHeight: 72 }}
|
||||
>
|
||||
{#snippet template(args: ComponentProps<typeof FontVirtualList>)}
|
||||
<div class="h-[400px] w-full">
|
||||
<FontVirtualList {...args}>
|
||||
{#snippet skeleton()}
|
||||
<div class="flex flex-col gap-2 p-4">
|
||||
{#each Array(6) as _}
|
||||
<div class="h-16 animate-pulse rounded bg-neutral-200"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{/snippet}
|
||||
{#snippet children({ item })}
|
||||
<div class="border-b border-neutral-100 p-3">{item.name}</div>
|
||||
{/snippet}
|
||||
</FontVirtualList>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Empty State"
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'No `skeleton` snippet provided. When `fontStore.fonts` is empty the underlying VirtualList renders its empty state directly.',
|
||||
},
|
||||
},
|
||||
}}
|
||||
args={{ weight: 400, itemHeight: 72 }}
|
||||
>
|
||||
{#snippet template(args: ComponentProps<typeof FontVirtualList>)}
|
||||
<div class="h-[400px] w-full">
|
||||
<FontVirtualList {...args}>
|
||||
{#snippet children({ item })}
|
||||
<div class="border-b border-neutral-100 p-3">{item.name}</div>
|
||||
{/snippet}
|
||||
</FontVirtualList>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="With Item Renderer"
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Demonstrates how to configure a `children` snippet for item rendering. The list will be empty because `fontStore` is not populated in Storybook, but the template shows the expected slot shape: `{ item: UnifiedFont }`.',
|
||||
},
|
||||
},
|
||||
}}
|
||||
args={{ weight: 400, itemHeight: 80 }}
|
||||
>
|
||||
{#snippet template(args: ComponentProps<typeof FontVirtualList>)}
|
||||
<div class="h-[400px] w-full">
|
||||
<FontVirtualList {...args}>
|
||||
{#snippet skeleton()}
|
||||
<div class="flex flex-col gap-2 p-4">
|
||||
{#each Array(6) as _}
|
||||
<div class="h-16 animate-pulse rounded bg-neutral-200"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{/snippet}
|
||||
{#snippet children({ item })}
|
||||
<div class="flex items-center justify-between border-b border-neutral-100 px-4 py-3">
|
||||
<span class="text-sm font-medium">{item.name}</span>
|
||||
<span class="text-xs text-neutral-400">{item.category}</span>
|
||||
</div>
|
||||
{/snippet}
|
||||
</FontVirtualList>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
Reference in New Issue
Block a user