wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Lottie.stories.svelte uses #snippet template(args) instead of #snippet children(args). Scroll.stories.svelte (and descendents) use asChild.

Browse source
This commit is contained in:
Ben Aultowski 2026-02-27 15:44:49 -05:00
parent 99cc0f7fea
commit 0b83cb5113
7 changed files with 43 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.vscode/settings.json vendored
View file

@ -21,5 +21,6 @@
"liveshare.launcherClient": "visualStudioCode",
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
}
},
"fossil.ignoreMissingFossilWarning": true
}

3
package.json
View file

@ -5,7 +5,8 @@
"private": true,
"scripts": {
"start": "vite dev --open",
"dev:components": "pnpm --filter @reuters-graphics/graphics-components exec svelte-package --watch",
"dev:components": "pnpm --filter @reuters-graphics/graphics-components exec svelte-package -i ./src --watch",
"storybook": "pnpm --filter @reuters-graphics/graphics-components run start",
"build": "vite build",
"build:preview": "PREVIEW=true vite build",
"mods": "tsx ./bin/mods/index.ts mods",

4
packages/graphics-components/package.json
View file

@ -54,7 +54,7 @@
"@storybook/addon-a11y": "^8.6.12",
"@storybook/addon-essentials": "^8.6.12",
"@storybook/addon-interactions": "^8.6.12",
"@storybook/addon-svelte-csf": "5.0.0-next.28",
"@storybook/addon-svelte-csf": "5.0.11",
"@storybook/blocks": "^8.6.12",
"@storybook/components": "^8.6.12",
"@storybook/manager-api": "^8.6.12",
@ -140,4 +140,4 @@
"bugs": {
"url": "https://github.com/reuters-graphics/graphics-components/issues"
}
}
}

14
packages/graphics-components/src/components/HorizontalScroller/HorizontalScroller.stories.svelte
View file

@ -26,13 +26,13 @@
<svelte:window bind:innerWidth={width} />
<Story name="Demo">
<Story name="Demo" asChild>
<DemoComponent>
<DemoSnippetBlock />
</DemoComponent>
</Story>
<Story name="With stops and easing" exportName="WithStops">
<Story name="With stops and easing" exportName="WithStops" asChild>
<DemoComponent
stops={[0.2, 0.5, 0.9]}
duration={400}
@ -43,7 +43,7 @@
</DemoComponent>
</Story>
<Story name="Extended boundaries">
<Story name="Extended boundaries" asChild>
<DemoComponent
mappedStart={-0.5}
mappedEnd={1.5}
@ -54,20 +54,20 @@
</DemoComponent>
</Story>
<Story name="Custom children">
<Story name="Custom children" asChild>
<DemoComponent>
<CustomChildrenBlock />
</DemoComponent>
</Story>
<Story name="Scrollable ai2svelte">
<Story name="Scrollable ai2svelte" asChild>
<ScrollableGraphic />
</Story>
<Story name="Scrollable ai2svelte (advanced)">
<Story name="Scrollable ai2svelte (advanced)" asChild>
<AdvancedScrollableGraphic />
</Story>
<Story name="With ScrollerBase">
<Story name="With ScrollerBase" asChild>
<WithScrollerBaseComponent />
</Story>

20
packages/graphics-components/src/components/Lottie/Lottie.stories.svelte
View file

@ -41,8 +41,9 @@
</script>
<Story name="Demo" args={{ autoplay: true, showDebugInfo: true }}>
{#snippet children(args)}
<Lottie src={DemoLottie} {...args} />
{#snippet template(args)}
{@const { src: _src, ...restArgs } = args}
<Lottie src={DemoLottie} {...restArgs} />
{/snippet}
</Story>
@ -56,8 +57,9 @@
speed: 0.5,
}}
>
{#snippet children(args)}
<Lottie src={DemoLottie} {...args} />
{#snippet template(args)}
{@const { src: _src, ...restArgs } = args}
<Lottie src={DemoLottie} {...restArgs} />
{/snippet}
</Story>
@ -71,20 +73,22 @@
mode: 'bounce',
}}
>
{#snippet children(args)}
<Lottie src={MarkerSample} {...args} />
{#snippet template(args)}
{@const { src: _src, ...restArgs } = args}
<Lottie src={MarkerSample} {...restArgs} />
{/snippet}
</Story>
<Story name="Themes" args={{ autoplay: true, showDebugInfo: true }}>
{#snippet children(args)}
{#snippet template(args)}
{@const { src: _src, ...restArgs } = args}
<Lottie
src={ThemesSample}
bind:progress
themeId={progress < 0.33 ? 'Water'
: progress < 0.66 ? 'air'
: 'earth'}
{...args}
{...restArgs}
/>
{/snippet}
</Story>

16
packages/graphics-components/src/components/ScrollerVideo/ScrollerVideo.stories.svelte
View file

@ -144,17 +144,17 @@
<svelte:window bind:innerWidth={width} />
<Story name="Demo">
<Story name="Demo" asChild>
<ScrollerVideo {...args} src={videoSrc.Goldengate} />
</Story>
<Story name="Object Fit">
<Story name="Object Fit" asChild>
<Block width="normal">
<ScrollerVideo {...args} src={videoSrc.Goldengate} objectFit="contain" />
</Block>
</Story>
<Story name="Responsive videos" exportName="ResponsiveVideos">
<Story name="Responsive videos" exportName="ResponsiveVideos" asChild>
{#if width < 600}
<ScrollerVideo {...args} src={videoSrc.Video_SM} />
{:else if width < 1200}
@ -164,15 +164,16 @@
{/if}
</Story>
<Story name="Embed version" exportName="Embed">
<Story name="Embed version" exportName="Embed" asChild>
<Embedded />
</Story>
<Story name="Autoplay">
<Story name="Autoplay" asChild>
<ScrollerVideo {...args} src={videoSrc.Goldengate} autoplay={true} />
</Story>
<Story
asChild
name="Time-based foregrounds with ArchieML"
exportName="ArchieMLForegrounds"
{args}
@ -181,6 +182,7 @@
</Story>
<Story
asChild
name="Time-based component foregrounds with ArchieML"
exportName="ComponentArchieMLForegrounds"
{args}
@ -188,10 +190,10 @@
<WithAi2svelteForegrounds />
</Story>
<Story name="Using with ScrollerBase" exportName="ScrollerBase" {args}>
<Story name="Using with ScrollerBase" exportName="ScrollerBase" {args} asChild>
<WithScrollerBase />
</Story>
<Story name="Advanced usecases" exportName="Advanced" {args}>
<Story name="Advanced usecases" exportName="Advanced" {args} asChild>
<AdvancedUsecases />
</Story>

18
pnpm-lock.yaml
View file

@ -242,8 +242,8 @@ importers:
specifier: ^8.6.12
version: 8.6.14(storybook@8.6.17(prettier@3.5.3))
'@storybook/addon-svelte-csf':
specifier: 5.0.0-next.28
version: 5.0.0-next.28(@storybook/svelte@8.6.17(storybook@8.6.17(prettier@3.5.3))(svelte@5.36.13))(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.36.13)(vite@6.4.1(@types/node@22.19.13)(jiti@2.6.1)(sass@1.97.3)(tsx@4.19.3)(yaml@2.8.2)))(storybook@8.6.17(prettier@3.5.3))(svelte@5.36.13)(vite@6.4.1(@types/node@22.19.13)(jiti@2.6.1)(sass@1.97.3)(tsx@4.19.3)(yaml@2.8.2))
specifier: 5.0.11
version: 5.0.11(@storybook/svelte@8.6.17(storybook@8.6.17(prettier@3.5.3))(svelte@5.36.13))(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.36.13)(vite@6.4.1(@types/node@22.19.13)(jiti@2.6.1)(sass@1.97.3)(tsx@4.19.3)(yaml@2.8.2)))(storybook@8.6.17(prettier@3.5.3))(svelte@5.36.13)(vite@6.4.1(@types/node@22.19.13)(jiti@2.6.1)(sass@1.97.3)(tsx@4.19.3)(yaml@2.8.2))
'@storybook/blocks':
specifier: ^8.6.12
version: 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.17(prettier@3.5.3))
@ -2398,14 +2398,14 @@ packages:
peerDependencies:
storybook: ^8.6.14
'@storybook/addon-svelte-csf@5.0.0-next.28':
resolution: {integrity: sha512-Ojj6m8xEd3rlVP7PkNYv/0st4M0NZdSYWwnCowhsw3ItBasmyB8jmP5Ht2WmwH+EIUYq0mMfsRI7Rb6Yl63QbQ==}
'@storybook/addon-svelte-csf@5.0.11':
resolution: {integrity: sha512-grfiAAl0lsPph33NV/lJkDOC4JfrHYUacX0DuUA7/0vBcihlUaX1w7AMMZ9rMrhbCyeM1imz/2rp3FeOMb7EgQ==}
peerDependencies:
'@storybook/svelte': ^0.0.0-0 || ^8.2.0 || ^9.0.0-0
'@sveltejs/vite-plugin-svelte': ^4.0.0 || ^5.0.0
storybook: ^0.0.0-0 || ^8.2.0 || ^9.0.0-0
'@storybook/svelte': ^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0
'@sveltejs/vite-plugin-svelte': ^4.0.0 || ^5.0.0 || ^6.0.0
storybook: ^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0
svelte: ^5.0.0
vite: ^5.0.0 || ^6.0.0
vite: ^5.0.0 || ^6.0.0 || ^7.0.0
'@storybook/addon-toolbars@8.6.14':
resolution: {integrity: sha512-W/wEXT8h3VyZTVfWK/84BAcjAxTdtRiAkT2KAN0nbSHxxB5KEM1MjKpKu2upyzzMa3EywITqbfy4dP6lpkVTwQ==}
@ -11177,7 +11177,7 @@ snapshots:
storybook: 8.6.17(prettier@3.5.3)
ts-dedent: 2.2.0
'@storybook/addon-svelte-csf@5.0.0-next.28(@storybook/svelte@8.6.17(storybook@8.6.17(prettier@3.5.3))(svelte@5.36.13))(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.36.13)(vite@6.4.1(@types/node@22.19.13)(jiti@2.6.1)(sass@1.97.3)(tsx@4.19.3)(yaml@2.8.2)))(storybook@8.6.17(prettier@3.5.3))(svelte@5.36.13)(vite@6.4.1(@types/node@22.19.13)(jiti@2.6.1)(sass@1.97.3)(tsx@4.19.3)(yaml@2.8.2))':
'@storybook/addon-svelte-csf@5.0.11(@storybook/svelte@8.6.17(storybook@8.6.17(prettier@3.5.3))(svelte@5.36.13))(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.36.13)(vite@6.4.1(@types/node@22.19.13)(jiti@2.6.1)(sass@1.97.3)(tsx@4.19.3)(yaml@2.8.2)))(storybook@8.6.17(prettier@3.5.3))(svelte@5.36.13)(vite@6.4.1(@types/node@22.19.13)(jiti@2.6.1)(sass@1.97.3)(tsx@4.19.3)(yaml@2.8.2))':
dependencies:
'@storybook/csf': 0.1.13
'@storybook/svelte': 8.6.17(storybook@8.6.17(prettier@3.5.3))(svelte@5.36.13)