Allow a Story to access its context

storybookjs · Apr 8, 2022 · 4c52bc7 · 4c52bc7
1 parent 15710ea
commit 4c52bc7
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 4 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -1,5 +1,5 @@
 import type { SvelteComponentTyped, SvelteComponent } from 'svelte';
-import type { BaseMeta, BaseAnnotations } from '@storybook/addons';
+import type { BaseMeta, BaseAnnotations, StoryContext } from '@storybook/addons';
 
 
 type DecoratorReturnType = void|SvelteComponent|{
@@ -47,6 +47,7 @@ interface TemplateProps extends BaseAnnotations<any, DecoratorReturnType> {
 interface Slots {
     default: {
         args: any;
+        context: StoryContext;
         [key: string]: any;
     }
 }

diff --git a/src/components/Story.svelte b/src/components/Story.svelte
@@ -17,8 +17,9 @@
   });
 
   $: render = context.render && !context.templateName && context.storyName == name;
+
 </script>
 
 {#if render}
-  <slot args={context.args} {...context.args}/>
+  <slot {...context.args} context={context.storyContext} args={context.args}/>
 {/if}
diff --git a/src/components/Template.svelte b/src/components/Template.svelte
@@ -11,5 +11,5 @@
 </script>
 
 {#if render}
-  <slot args={context.args} {...context.args}/>
+  <slot {...context.args} context={context.storyContext} args={context.args}/>
 {/if}
diff --git a/src/parser/collect-stories.js b/src/parser/collect-stories.js
@@ -79,7 +79,7 @@ export default (StoriesComponent, { stories = {}, allocatedIds }) => {
 
         const unknownTemplate = template != null && templatesId.indexOf(template) < 0;
 
-        const storyFn = (args) => {
+        const storyFn = (args, storyContext) => {
           if (unknownTemplate) {
             throw new Error(`Story ${name} is referencing an unknown template ${template}`);
           }
@@ -91,6 +91,7 @@ export default (StoriesComponent, { stories = {}, allocatedIds }) => {
               storyName: name,
               templateId: template,
               args,
+              storyContext,
               sourceComponent: component || globalComponent,
             },
           };

diff --git a/stories/__snapshots__/context.stories.storyshot b/stories/__snapshots__/context.stories.storyshot
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots StoryContext StoryContext 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+
+  <div>
+    StoryContext.name = 
+    StoryContext
+  </div>
+
+  <div>
+    StoryContext.id = 
+    storycontext--story-context
+  </div>
+
+
+</section>
+`;
diff --git a/stories/context.stories.svelte b/stories/context.stories.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { Meta, Story } from '../src/index';
+  import Button from './Button.svelte';
+</script>
+
+<Meta title="StoryContext" component={Button} />
+
+<Story name="StoryContext" let:context>
+  <div>StoryContext.name = {context.name}</div>
+  <div>StoryContext.id = {context.id}</div>
+</Story>