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", "liveshare.launcherClient": "visualStudioCode",
"[svelte]": { "[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode" "editor.defaultFormatter": "svelte.svelte-vscode"
} },
"fossil.ignoreMissingFossilWarning": true
} }

3
package.json
View file

@ -5,7 +5,8 @@
"private": true, "private": true,
"scripts": { "scripts": {
"start": "vite dev --open", "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": "vite build",
"build:preview": "PREVIEW=true vite build", "build:preview": "PREVIEW=true vite build",
"mods": "tsx ./bin/mods/index.ts mods", "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-a11y": "^8.6.12",
"@storybook/addon-essentials": "^8.6.12", "@storybook/addon-essentials": "^8.6.12",
"@storybook/addon-interactions": "^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/blocks": "^8.6.12",
"@storybook/components": "^8.6.12", "@storybook/components": "^8.6.12",
"@storybook/manager-api": "^8.6.12", "@storybook/manager-api": "^8.6.12",
@ -140,4 +140,4 @@
"bugs": { "bugs": {
"url": "https://github.com/reuters-graphics/graphics-components/issues" "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} /> <svelte:window bind:innerWidth={width} />
<Story name="Demo"> <Story name="Demo" asChild>
<DemoComponent> <DemoComponent>
<DemoSnippetBlock /> <DemoSnippetBlock />
</DemoComponent> </DemoComponent>
</Story> </Story>
<Story name="With stops and easing" exportName="WithStops"> <Story name="With stops and easing" exportName="WithStops" asChild>
<DemoComponent <DemoComponent
stops={[0.2, 0.5, 0.9]} stops={[0.2, 0.5, 0.9]}
duration={400} duration={400}
@ -43,7 +43,7 @@
</DemoComponent> </DemoComponent>
</Story> </Story>
<Story name="Extended boundaries"> <Story name="Extended boundaries" asChild>
<DemoComponent <DemoComponent
mappedStart={-0.5} mappedStart={-0.5}
mappedEnd={1.5} mappedEnd={1.5}
@ -54,20 +54,20 @@
</DemoComponent> </DemoComponent>
</Story> </Story>
<Story name="Custom children"> <Story name="Custom children" asChild>
<DemoComponent> <DemoComponent>
<CustomChildrenBlock /> <CustomChildrenBlock />
</DemoComponent> </DemoComponent>
</Story> </Story>
<Story name="Scrollable ai2svelte"> <Story name="Scrollable ai2svelte" asChild>
<ScrollableGraphic /> <ScrollableGraphic />
</Story> </Story>
<Story name="Scrollable ai2svelte (advanced)"> <Story name="Scrollable ai2svelte (advanced)" asChild>
<AdvancedScrollableGraphic /> <AdvancedScrollableGraphic />
</Story> </Story>
<Story name="With ScrollerBase"> <Story name="With ScrollerBase" asChild>
<WithScrollerBaseComponent /> <WithScrollerBaseComponent />
</Story> </Story>

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

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

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

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

18
pnpm-lock.yaml
View file

@ -242,8 +242,8 @@ importers:
specifier: ^8.6.12 specifier: ^8.6.12
version: 8.6.14(storybook@8.6.17(prettier@3.5.3)) version: 8.6.14(storybook@8.6.17(prettier@3.5.3))
'@storybook/addon-svelte-csf': '@storybook/addon-svelte-csf':
specifier: 5.0.0-next.28 specifier: 5.0.11
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)) 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': '@storybook/blocks':
specifier: ^8.6.12 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)) 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: peerDependencies:
storybook: ^8.6.14 storybook: ^8.6.14
'@storybook/addon-svelte-csf@5.0.0-next.28': '@storybook/addon-svelte-csf@5.0.11':
resolution: {integrity: sha512-Ojj6m8xEd3rlVP7PkNYv/0st4M0NZdSYWwnCowhsw3ItBasmyB8jmP5Ht2WmwH+EIUYq0mMfsRI7Rb6Yl63QbQ==} resolution: {integrity: sha512-grfiAAl0lsPph33NV/lJkDOC4JfrHYUacX0DuUA7/0vBcihlUaX1w7AMMZ9rMrhbCyeM1imz/2rp3FeOMb7EgQ==}
peerDependencies: peerDependencies:
'@storybook/svelte': ^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 '@sveltejs/vite-plugin-svelte': ^4.0.0 || ^5.0.0 || ^6.0.0
storybook: ^0.0.0-0 || ^8.2.0 || ^9.0.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 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': '@storybook/addon-toolbars@8.6.14':
resolution: {integrity: sha512-W/wEXT8h3VyZTVfWK/84BAcjAxTdtRiAkT2KAN0nbSHxxB5KEM1MjKpKu2upyzzMa3EywITqbfy4dP6lpkVTwQ==} resolution: {integrity: sha512-W/wEXT8h3VyZTVfWK/84BAcjAxTdtRiAkT2KAN0nbSHxxB5KEM1MjKpKu2upyzzMa3EywITqbfy4dP6lpkVTwQ==}
@ -11177,7 +11177,7 @@ snapshots:
storybook: 8.6.17(prettier@3.5.3) storybook: 8.6.17(prettier@3.5.3)
ts-dedent: 2.2.0 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: dependencies:
'@storybook/csf': 0.1.13 '@storybook/csf': 0.1.13
'@storybook/svelte': 8.6.17(storybook@8.6.17(prettier@3.5.3))(svelte@5.36.13) '@storybook/svelte': 8.6.17(storybook@8.6.17(prettier@3.5.3))(svelte@5.36.13)