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
 ```
 
 ## タイポチェック