Storybookを導入する

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     "@vue/eslint-config-typescript/recommended",
     "@vue/eslint-config-prettier",
     "plugin:@voicevox/all",
+    "plugin:storybook/recommended",
   ],
   plugins: ["import"],
   parser: "vue-eslint-parser",

.github/workflows/chromatic.yml

@@ -0,0 +1,27 @@
+# Chromaticにmainブランチをpushする
+# お試し運用中なので消滅する可能性あり
+
+# TODO: Enable TurboSnap
+# https://www.chromatic.com/docs/github-actions/#enable-turbosnap
+
+name: "Chromatic"
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    if: github.repository_owner == 'VOICEVOX'
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup environment
+        uses: ./.github/actions/setup-environment
+      - name: Run Chromatic
+        uses: chromaui/action@v11
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true

.github/workflows/test.yml

@@ -58,6 +58,32 @@ jobs:
 
       - run: npm run test:unit
 
+      - name: Setup playwright
+        run: npx playwright install
+      - name: Run Storybook tests
+        run: |
+          # .env
+          cp .env.test .env
+
+          # ランダムなポートを使う
+          PORT=$(node -r net -e "server=net.createServer();server.listen(0,()=>{console.log(server.address().port);server.close()})")
+          npx storybook dev --ci --port $PORT &
+
+          # 起動を待つ
+          elapsed=0
+          until curl --output /dev/null --silent --head --fail http://localhost:$PORT; do
+            echo "Waiting for Storybook to start on port $PORT..."
+            sleep 5
+            ((elapsed+=5))
+            if [ "$elapsed" -ge "60" ]; then
+              echo "Timed out waiting for Storybook to start."
+              exit 1
+            fi
+          done
+
+          # テスト
+          npm run test:storybook -- --url "http://127.0.0.1:$PORT"
+
   # e2e テスト
   e2e-test:
     runs-on: ${{ matrix.os }}
@@ -71,7 +97,7 @@ jobs:
             voicevox_engine_asset_name: linux-cpu
           - os: macos-latest
             voicevox_engine_asset_name: macos-x64
-          # TODO: voicevox_nemo_negineがarm64に対応したら変更する 
+          # TODO: voicevox_nemo_negineがarm64に対応したら変更する
           # - os: macos-latest
           #   voicevox_engine_asset_name: macos-arm64
           - os: windows-latest

.gitignore

@@ -16,6 +16,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+*storybook.log
 
 # Editor directories and files
 .idea

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {
+      docgen: "vue-component-meta",
+    },
+  },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,40 @@
+import { setup, Preview } from "@storybook/vue3";
+import { Quasar, Dialog, Loading, Notify } from "quasar";
+import iconSet from "quasar/icon-set/material-icons";
+import { addActionsWithEmits } from "./utils/argTypesEnhancers";
+import { markdownItPlugin } from "@/plugins/markdownItPlugin";
+
+import "@quasar/extras/material-icons/material-icons.css";
+import "quasar/dist/quasar.sass";
+import "../src/styles/_index.scss";
+
+setup((app) => {
+  app.use(Quasar, {
+    config: {
+      brand: {
+        primary: "#a5d4ad",
+        secondary: "#212121",
+        negative: "var(--color-warning)",
+      },
+    },
+    iconSet,
+    plugins: {
+      Dialog,
+      Loading,
+      Notify,
+    },
+  });
+  app.use(markdownItPlugin);
+});
+
+const preview: Preview = {
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  argTypesEnhancers: [addActionsWithEmits],
+};
+
+export default preview;

.storybook/utils/argTypesEnhancers.ts

@@ -0,0 +1,34 @@
+/**
+ * Vue で emit されるイベントを Storybook の Controls に表示するための argTypesEnhancer
+ * https://zenn.dev/shota_kamezawa/articles/36cd647264656c#storybook-%E3%81%AE%E8%A8%AD%E5%AE%9A
+ */
+
+import { toHandlerKey } from "vue";
+import { type ArgTypesEnhancer, type StrictInputType } from "@storybook/types";
+
+export const addActionsWithEmits: ArgTypesEnhancer = ({ argTypes }) => {
+  const argTypesEntries = Object.entries(argTypes)
+    .filter(([, argType]) => argType.table?.category === "events")
+    .map(([name]) => {
+      /**
+       * 例：`click` という events に対して `onClick` という名称の argType + action を追加することで、
+       * v-on によるイベントのバインディングが可能となる
+       * @see https://ja.vuejs.org/guide/extras/render-function.html#v-on
+       */
+      const newName = toHandlerKey(name);
+      const newArgType: StrictInputType = {
+        name: newName,
+        action: name,
+        table: {
+          disable: true, // Controls には表示しない
+        },
+      };
+
+      return [newName, newArgType] as const;
+    });
+
+  return {
+    ...argTypes,
+    ...Object.fromEntries(argTypesEntries),
+  };
+};

README.md

@@ -71,6 +71,14 @@ npm run electron:serve
 
 音声合成エンジンのリポジトリはこちらです <https://github.com/VOICEVOX/voicevox_engine>
 
+### Storybook の実行
+
+Storybook を使ってコンポーネントを開発することができます。
+
+```bash
+npm run storybook
+```
+
 ### ブラウザ版の実行（開発中）
 
 別途音声合成エンジンを起動し、以下を実行して表示された localhost へアクセスします。
@@ -103,6 +111,16 @@ npm run test-watch:unit # 監視モード
 npm run test:unit -- --update # スナップショットの更新
 ```
 
+### コンポーネントのテスト
+
+Storybook を使ってコンポーネントのテストを行います。
+
+```bash
+npm run storybook # 先に Storybook を起動
+npm run test:storybook
+npm run test-watch:storybook # 監視モード
+```
+
 ### ブラウザ End to End テスト
 
 Electron の機能が不要な、UI や音声合成などの End to End テストを実行します。
@@ -171,20 +189,20 @@ npm run license:generate -- -o voicevox_licenses.json
 npm run license:merge -- -o public/licenses.json -i engine_licenses.json -i voicevox_licenses.json
 ```
 
-## リント（静的解析）
+## コードフォーマット
 
-コードの静的解析を行い、バグを未然に防ぎます。プルリクエストを送る前に実行してください。
+コードのフォーマットを整えます。プルリクエストを送る前に実行してください。
 
 ```bash
-npm run lint
+npm run fmt
 ```
 
-## コードフォーマット
+## リント（静的解析）
 
-コードのフォーマットを整えます。プルリクエストを送る前に実行してください。
+コードの静的解析を行い、バグを未然に防ぎます。プルリクエストを送る前に実行してください。
 
 ```bash
-npm run fmt
+npm run lint
 ```
 
 ## タイポチェック