Storybook のインストール

Vite版のStorybook をインストール

$ npx sb@next init --builder storybook-builder-vite
✔ Do you want to run the 'eslintPlugin' fix on your project? … yes
✔ Do you want to run the 'eslintPlugin' fix on your project? … yes

パッチを当てる
cf. storybookjs/storybook#11587 (comment)

1. .storybook/package.json を作成し、
    {
	"type": "commonjs"
    }
2. .storybook/main.js を開き、"preprocess" の値を修正する
    "svelteOptions": {
	"preprocess": import('../svelte.config.js').then((module) => { return module.preprocess; })
    }

$ yarn add --dev @storybook/addon-svelte-csf  # 追加インストールが必要だった
$ yarn storybook # OK.

.eslintrc.cjs

@@ -1,15 +1,18 @@
 module.exports = {
-	root: true,
-	extends: ['eslint:recommended', 'prettier'],
-	plugins: ['svelte3'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	}
-};
+  root: true,
+  extends: ['eslint:recommended', 'prettier', 'plugin:storybook/recommended'],
+  plugins: ['svelte3'],
+  overrides: [{
+    files: ['*.svelte'],
+    processor: 'svelte3/svelte3'
+  }],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true
+  }
+};

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"],
+  "addons": ["@storybook/addon-links", "@storybook/addon-essentials"],
+  "framework": "@storybook/svelte",
+  "core": {
+    "builder": "@storybook/builder-vite"
+  },
+  "svelteOptions": {
+    "preprocess": import('../svelte.config.js').then((module) => { return module.preprocess; })
+  }
+};

.storybook/package.json

@@ -0,0 +1,3 @@
+{
+	"type": "commonjs"
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -9,18 +9,31 @@
     "prepare": "svelte-kit sync",
     "test": "playwright test",
     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.9",
     "@playwright/test": "^1.20.0",
+    "@storybook/addon-actions": "^6.5.0-alpha.60",
+    "@storybook/addon-essentials": "^6.5.0-alpha.60",
+    "@storybook/addon-links": "^6.5.0-alpha.60",
+    "@storybook/addon-svelte-csf": "^2.0.1",
+    "@storybook/builder-vite": "^0.1.26",
+    "@storybook/svelte": "^6.5.0-alpha.60",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
+    "babel-loader": "^8.2.4",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-storybook": "^0.5.8",
     "eslint-plugin-svelte3": "^3.2.1",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
-    "svelte": "^3.44.0"
+    "svelte": "^3.47.0",
+    "svelte-loader": "^3.1.2"
   },
-  "type": "module"
-}
+  "type": "module",
+  "dependencies": {}
+}

src/stories/Button.stories.js

@@ -0,0 +1,51 @@
+import Button from './Button.svelte';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on argTypes: https://storybook.js.org/docs/svelte/api/argtypes
+export default {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    label: { control: 'text' },
+    onClick: { action: 'onClick' },
+    primary: { control: 'boolean' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
+const Template = (args) => ({
+  Component: Button,
+  props: args,
+  on: {
+    click: args.onClick,
+  },
+});
+
+// More on args: https://storybook.js.org/docs/svelte/writing-stories/args
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

src/stories/Button.svelte

@@ -0,0 +1,42 @@
+<script>
+  import './button.css';
+  import { createEventDispatcher } from 'svelte';
+  /**
+   * Is this the principal call to action on the page?
+   */
+  export let primary = false;
+
+  /**
+   * What background color to use
+   */
+  export let backgroundColor;
+  /**
+   * How large should the button be?
+   */
+  export let size = 'medium';
+  /**
+   * Button contents
+   */
+  export let label = '';
+
+  let mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  let style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * Optional click handler
+   */
+  function onClick(event) {
+    dispatch('click', event);
+  }
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+  {style}
+  on:click={onClick}>
+  {label}
+</button>

src/stories/Header.stories.js

@@ -0,0 +1,29 @@
+import Header from './Header.svelte';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  argTypes: {
+    onLogin: { action: 'onLogin' },
+    onLogout: { action: 'onLogout' },
+    onCreateAccount: { action: 'onCreateAccount' },
+  },
+};
+
+const Template = (args) => ({
+  Component: Header,
+  props: args,
+  on: {
+    login: args.onLogin,
+    logout: args.onLogout,
+    createAccount: args.onCreateAccount,
+  },
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};

src/stories/Header.svelte

@@ -0,0 +1,48 @@
+<script>
+  import './header.css';
+  import Button from './Button.svelte';
+
+  import { createEventDispatcher } from 'svelte';
+
+  export let user = null;
+
+  const dispatch = createEventDispatcher();
+
+  function onLogin(event) {
+    dispatch('login', event);
+  }
+  function onLogout(event) {
+    dispatch('logout', event);
+  }
+  function onCreateAccount(event) {
+    dispatch('createAccount', event);
+  }
+</script>
+
+<header>
+  <div class="wrapper">
+    <div>
+      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF" />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9" />
+          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+        </g>
+      </svg>
+      <h1>Acme</h1>
+    </div>
+    <div>
+      {#if user}
+        <Button size="small" on:click={onLogout} label="Log out" />
+      {/if}
+      {#if !user}
+        <Button size="small" on:click={onLogin} label="Log in" />
+        <Button primary size="small" on:click={onCreateAccount} label="Sign up" />
+      {/if}
+    </div>
+  </div>
+</header>