Ilia Mashkov
fcd61be4fa
FontApplicator and FontSampler no longer read fontLifecycleManager. They take a `status` prop (FontLoadStatus | undefined) supplied by the composing widget; FontList and SampleList resolve status once per visible row and pass it down. FSD+ dependency inversion: the entity/feature UI depends on a value, not the lifecycle store. Removes FontApplicator's value-import of the store (one step toward an inert ./ui barrel) and drops the duplicate getFontStatus read per row in FontList. FontSampler is now status-decoupled and trivially relocatable to entities/Font/ui.
124 lines
3.3 KiB
Svelte
124 lines
3.3 KiB
Svelte
<script module>
|
|
import Providers from '$shared/lib/storybook/Providers.svelte';
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import FontSampler from './FontSampler.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Features/FontSampler',
|
|
component: FontSampler,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Displays a sample text with a given font in a contenteditable element. Visual design matches FontCard: sharp corners, brand hover accent, header stats showing font properties (size, weight, line height, letter spacing). Staggered entrance animation based on index.',
|
|
},
|
|
story: { inline: false },
|
|
},
|
|
},
|
|
argTypes: {
|
|
font: {
|
|
control: 'object',
|
|
description: 'Font information object',
|
|
},
|
|
status: {
|
|
control: 'select',
|
|
options: ['loading', 'loaded', 'error'],
|
|
description: 'Font-load status, supplied by the composing widget and forwarded to FontApplicator',
|
|
},
|
|
text: {
|
|
control: 'text',
|
|
description: 'Editable sample text (two-way bindable)',
|
|
},
|
|
index: {
|
|
control: { type: 'number', min: 0 },
|
|
description: 'Position index — drives the staggered entrance delay',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { UnifiedFont } from '$entities/Font';
|
|
import type { ComponentProps } from 'svelte';
|
|
|
|
// Mock fonts for testing
|
|
const mockArial: UnifiedFont = {
|
|
id: 'arial',
|
|
name: 'Arial',
|
|
provider: 'google',
|
|
category: 'sans-serif',
|
|
subsets: ['latin'],
|
|
variants: ['400', '700'],
|
|
styles: {
|
|
regular: '',
|
|
bold: '',
|
|
},
|
|
metadata: {
|
|
cachedAt: Date.now(),
|
|
version: '1.0',
|
|
popularity: 1,
|
|
},
|
|
features: {
|
|
isVariable: false,
|
|
},
|
|
};
|
|
|
|
const mockGeorgia: UnifiedFont = {
|
|
id: 'georgia',
|
|
name: 'Georgia',
|
|
provider: 'google',
|
|
category: 'serif',
|
|
subsets: ['latin'],
|
|
variants: ['400', '700'],
|
|
styles: {
|
|
regular: '',
|
|
bold: '',
|
|
},
|
|
metadata: {
|
|
cachedAt: Date.now(),
|
|
version: '1.0',
|
|
popularity: 2,
|
|
},
|
|
features: {
|
|
isVariable: false,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<Story
|
|
name="Default"
|
|
args={{
|
|
font: mockArial,
|
|
status: 'loaded',
|
|
text: 'The quick brown fox jumps over the lazy dog',
|
|
index: 0,
|
|
}}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof FontSampler>)}
|
|
<Providers>
|
|
<div class="max-w-2xl mx-auto">
|
|
<FontSampler {...args} />
|
|
</div>
|
|
</Providers>
|
|
{/snippet}
|
|
</Story>
|
|
<Story
|
|
name="Long Text"
|
|
args={{
|
|
font: mockGeorgia,
|
|
status: 'loaded',
|
|
text:
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
|
|
index: 1,
|
|
}}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof FontSampler>)}
|
|
<Providers>
|
|
<div class="max-w-2xl mx-auto">
|
|
<FontSampler {...args} />
|
|
</div>
|
|
</Providers>
|
|
{/snippet}
|
|
</Story>
|