feat: add missing storybook files and type template arguments properly
This commit is contained in:
Ilia Mashkov
@@ -0,0 +1,65 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import BreadcrumbHeader from './BreadcrumbHeader.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Entities/BreadcrumbHeader',
|
||||
component: BreadcrumbHeader,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Fixed header that slides in when the user scrolls past tracked page sections. Reads `scrollBreadcrumbsStore.scrolledPastItems` — renders nothing when the list is empty. Requires the `responsive` context provided by `Providers`.',
|
||||
},
|
||||
story: { inline: false },
|
||||
},
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
argTypes: {},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import Providers from '$shared/lib/storybook/Providers.svelte';
|
||||
import BreadcrumbHeaderSeeded from './BreadcrumbHeaderSeeded.svelte';
|
||||
</script>
|
||||
|
||||
<Story
|
||||
name="With Breadcrumbs"
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Three sections are registered with the breadcrumb store. The story scrolls the iframe so the IntersectionObserver marks them as scrolled-past, revealing the fixed header.',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{#snippet template()}
|
||||
<Providers>
|
||||
<BreadcrumbHeaderSeeded />
|
||||
</Providers>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Empty"
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'No sections registered — BreadcrumbHeader renders nothing. This is the initial state before the user scrolls past any tracked section.',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{#snippet template()}
|
||||
<Providers>
|
||||
<div style="padding: 2rem; color: #888; font-size: 0.875rem;">
|
||||
BreadcrumbHeader renders nothing when scrolledPastItems is empty.
|
||||
</div>
|
||||
<BreadcrumbHeader />
|
||||
</Providers>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { scrollBreadcrumbsStore } from '../../model';
|
||||
import BreadcrumbHeader from './BreadcrumbHeader.svelte';
|
||||
|
||||
const sections = [
|
||||
{ index: 100, title: 'Introduction' },
|
||||
{ index: 101, title: 'Typography' },
|
||||
{ index: 102, title: 'Spacing' },
|
||||
];
|
||||
|
||||
/** @type {HTMLDivElement} */
|
||||
let container;
|
||||
|
||||
onMount(() => {
|
||||
for (const section of sections) {
|
||||
const el = /** @type {HTMLElement} */ (container.querySelector(`[data-story-index="${section.index}"]`));
|
||||
scrollBreadcrumbsStore.add({ index: section.index, title: section.title, element: el }, 96);
|
||||
}
|
||||
|
||||
/*
|
||||
* Scroll past the sections so IntersectionObserver marks them as
|
||||
* scrolled-past, making scrolledPastItems non-empty and the header visible.
|
||||
*/
|
||||
setTimeout(() => {
|
||||
window.scrollTo({ top: 2000, behavior: 'instant' });
|
||||
}, 100);
|
||||
|
||||
return () => {
|
||||
for (const { index } of sections) {
|
||||
scrollBreadcrumbsStore.remove(index);
|
||||
}
|
||||
window.scrollTo({ top: 0, behavior: 'instant' });
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={container} style="height: 2400px; padding-top: 900px;">
|
||||
{#each sections as section}
|
||||
<div
|
||||
data-story-index={section.index}
|
||||
style="height: 400px; padding: 2rem; background: #f5f5f5; margin-bottom: 1rem;"
|
||||
>
|
||||
{section.title} — scroll up to see the breadcrumb header
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<BreadcrumbHeader />
|
||||
@@ -0,0 +1,109 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import NavigationWrapper from './NavigationWrapper.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Entities/NavigationWrapper',
|
||||
component: NavigationWrapper,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Thin wrapper that registers an HTML section with `scrollBreadcrumbsStore` via a Svelte use-directive action. Has no visual output of its own — renders `{@render content(registerBreadcrumb)}` where `registerBreadcrumb` is the action to attach with `use:`. On destroy the section is automatically removed from the store.',
|
||||
},
|
||||
story: { inline: false },
|
||||
},
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
argTypes: {
|
||||
index: {
|
||||
control: { type: 'number', min: 0 },
|
||||
description: 'Unique index used for ordering in the breadcrumb trail',
|
||||
},
|
||||
title: {
|
||||
control: 'text',
|
||||
description: 'Display title shown in the breadcrumb header',
|
||||
},
|
||||
offset: {
|
||||
control: { type: 'number', min: 0 },
|
||||
description: 'Scroll offset in pixels to account for sticky headers',
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import type { ComponentProps } from 'svelte';
|
||||
</script>
|
||||
|
||||
<Story
|
||||
name="Single Section"
|
||||
args={{ index: 0, title: 'Introduction', offset: 96 }}
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'A single section registered with NavigationWrapper. The `content` snippet receives the `register` action and applies it via `use:register`.',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{#snippet template(args: ComponentProps<typeof NavigationWrapper>)}
|
||||
<NavigationWrapper {...args}>
|
||||
{#snippet content(register)}
|
||||
<section use:register style="padding: 2rem; background: #f5f5f5; min-height: 200px;">
|
||||
<p style="font-size: 0.875rem; color: #555;">
|
||||
Section registered as <strong>{args.title}</strong> at index {args.index}. Scroll past this
|
||||
section to see it appear in the breadcrumb header.
|
||||
</p>
|
||||
</section>
|
||||
{/snippet}
|
||||
</NavigationWrapper>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Multiple Sections"
|
||||
parameters={{
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Three sequential sections each wrapped in NavigationWrapper with distinct indices and titles. Demonstrates how the breadcrumb trail builds as the user scrolls.',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{#snippet template()}
|
||||
<div style="display: flex; flex-direction: column; gap: 0;">
|
||||
<NavigationWrapper index={0} title="Introduction" offset={96}>
|
||||
{#snippet content(register)}
|
||||
<section use:register style="padding: 2rem; background: #f5f5f5; min-height: 300px;">
|
||||
<h2 style="margin: 0 0 0.5rem;">Introduction</h2>
|
||||
<p style="font-size: 0.875rem; color: #555;">
|
||||
Registered as section 0. Scroll down to build the breadcrumb trail.
|
||||
</p>
|
||||
</section>
|
||||
{/snippet}
|
||||
</NavigationWrapper>
|
||||
|
||||
<NavigationWrapper index={1} title="Typography" offset={96}>
|
||||
{#snippet content(register)}
|
||||
<section use:register style="padding: 2rem; background: #ebebeb; min-height: 300px;">
|
||||
<h2 style="margin: 0 0 0.5rem;">Typography</h2>
|
||||
<p style="font-size: 0.875rem; color: #555;">Registered as section 1.</p>
|
||||
</section>
|
||||
{/snippet}
|
||||
</NavigationWrapper>
|
||||
|
||||
<NavigationWrapper index={2} title="Spacing" offset={96}>
|
||||
{#snippet content(register)}
|
||||
<section use:register style="padding: 2rem; background: #e0e0e0; min-height: 300px;">
|
||||
<h2 style="margin: 0 0 0.5rem;">Spacing</h2>
|
||||
<p style="font-size: 0.875rem; color: #555;">Registered as section 2.</p>
|
||||
</section>
|
||||
{/snippet}
|
||||
</NavigationWrapper>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
Reference in New Issue
Block a user