add @storybook/addon-svelte-csf storybook addon

Allows for stories to be written in .svelte syntax making it possible to pass slotted content https://storybook.js.org/addons/@storybook/addon-svelte-csf
joekrump · Oct 18, 2023 · 46074ab · 46074ab
1 parent 339ba0a
commit 46074ab
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 24 deletions.
diff --git a/.storybook/main.cjs b/.storybook/main.cjs
@@ -1,6 +1,11 @@
 module.exports = {
   "stories": ["../app/javascript/**/*.stories.mdx", "../app/javascript/**/*.stories.@(js|ts|svelte)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-svelte-csf"
+  ],
   "framework": "@storybook/svelte-vite",
   "core": {
     "builder": "@storybook/builder-vite",

diff --git a/app/javascript/components/ClickButton.stories.js b/app/javascript/components/ClickButton.stories.js
diff --git a/app/javascript/components/ClickButton.svelte b/app/javascript/components/ClickButton.svelte
@@ -22,7 +22,7 @@
 
   <button
     type="button"
-    on:click={sendClick}
+    on:click={() => 'hi'}
     class="mt-3 w-full rounded bg-rose py-2 font-medium text-black transition hover:bg-rails-light hover:text-white active:outline-none active:ring-2 active:ring-rails-light active:ring-offset-1"
   >
     Click me!

diff --git a/app/javascript/components/PageTitle.stories.svelte b/app/javascript/components/PageTitle.stories.svelte
@@ -0,0 +1,30 @@
+<script context="module">
+  import PageTitle from './PageTitle.svelte';
+
+  export const meta = {
+    title: 'Example Page Title',
+    component: PageTitle,
+    argTypes: {
+      children: {
+        control: {
+          type: 'text',
+        },
+      },
+    },
+  };
+</script>
+
+<script>
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+  <!--👇 'on:click' allows to forward event to addon-actions  -->
+  <PageTitle {...args}></PageTitle>
+</Template>
+
+<Story name="With Slotted content">
+  <PageTitle>I am a title</PageTitle>
+</Story>
+
+<Story name="Default" />
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@storybook/addon-interactions": "^7.5.0",
     "@storybook/addon-links": "^7.5.0",
     "@storybook/addon-mdx-gfm": "^7.5.0",
+    "@storybook/addon-svelte-csf": "^4.0.9",
     "@storybook/svelte": "^7.5.0",
     "@storybook/svelte-vite": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",

diff --git a/yarn.lock b/yarn.lock