117 lines
2.9 KiB
Svelte
117 lines
2.9 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',
|
|
},
|
|
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 { controlManager } from '$features/SetupFont';
|
|
|
|
// 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,
|
|
text: 'The quick brown fox jumps over the lazy dog',
|
|
index: 0,
|
|
}}
|
|
>
|
|
{#snippet template(args)}
|
|
<Providers>
|
|
<div class="max-w-2xl mx-auto">
|
|
<FontSampler {...args} />
|
|
</div>
|
|
</Providers>
|
|
{/snippet}
|
|
</Story>
|
|
<Story
|
|
name="Long Text"
|
|
args={{
|
|
font: mockGeorgia,
|
|
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)}
|
|
<Providers>
|
|
<div class="max-w-2xl mx-auto">
|
|
<FontSampler {...args} />
|
|
</div>
|
|
</Providers>
|
|
{/snippet}
|
|
</Story>
|