Add Svelte code snippet for decorators contexts

storybookjs · Apr 20, 2024 · 00774b9 · 00774b9
1 parent 479b8e9
commit 00774b9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/docs/snippets/svelte/storybook-preview-with-styled-components-decorator.js.mdx b/docs/snippets/svelte/storybook-preview-with-styled-components-decorator.js.mdx
@@ -0,0 +1,14 @@
+```js
+// .storybook/preview.js
+
+import { setContext } from 'svelte';
+
+export default {
+  decorators: [
+    (Story) => {
+      setContext("theme", "default");
+      return Story();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/svelte/storybook-preview-with-styled-components-decorator.ts.mdx b/docs/snippets/svelte/storybook-preview-with-styled-components-decorator.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// .storybook/preview.ts
+
+import { setContext } from 'svelte';
+
+import type { Preview } from '@storybook/svelte';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => {
+      setContext("theme", "default");
+      return Story();
+    },
+  ],
+};
+
+export default preview;
+```
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
@@ -58,6 +58,8 @@ For example, if you're working with React's Styled Components and your component
     'angular/storybook-preview-with-angular-polyfills.js.mdx',
     'solid/storybook-preview-with-styled-components-decorator.js.mdx',
     'solid/storybook-preview-with-styled-components-decorator.ts.mdx',
+    'svelte/storybook-preview-with-styled-components-decorator.js.mdx',
+    'svelte/storybook-preview-with-styled-components-decorator.ts.mdx',
   ]}
 />