Install & Setup Storybook

# @types/react との競合について
storybookjs/storybook#12505 や vuejs/language-tools#592 に言及されている通り
@types/react と競合し型エラーが発生する。
対策として @types/react の削除、tsconfig からの stories.ts の除外が考えられるが今回は前者を選択した
理由は @types/react を使用しないことが明確であり、stories.ts にはしっかり tsconfig を適応していからである。

.devcontainer/devcontainer.json

@@ -10,7 +10,7 @@
   },
   "settings": {},
   "extensions": ["dbaeumer.vscode-eslint", "johnsoncodehk.volar"],
-  "forwardPorts": [3000],
+  "forwardPorts": [3000, 6006],
   "postCreateCommand": "yarn install",
   "remoteUser": "node"
 }

.gitignore

@@ -4,3 +4,4 @@ dist
 dist-ssr
 *.local
 tsconfig.staged.json
+storybook-static

.storybook/main.js

@@ -0,0 +1,20 @@
+const path = require("path")
+const { loadConfigFromFile, mergeConfig } = require("vite");
+
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  framework: "@storybook/vue3",
+  core: {
+    builder: "storybook-builder-vite",
+  },
+  async viteFinal(config, { configType }) {
+    const { config: userConfig } = await loadConfigFromFile(
+      path.resolve(__dirname, "../vite.config.ts")
+    );
+    return mergeConfig(config, {
+      ...userConfig,
+      plugins: [],
+    });
+  },
+};

.storybook/preview.js

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

package.json

@@ -13,7 +13,9 @@
     "lint:fix": "yarn lint --fix",
     "test": "jest",
     "apigen": "rm -rf src/api && npx openapi2aspida",
-    "prepare": "husky install"
+    "prepare": "husky install && rimraf ./node_modules/@types/react",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "yarn typecheck && build-storybook"
   },
   "dependencies": {
     "@aspida/axios": "^1.6.3",
@@ -34,6 +36,11 @@
     "vuex": "4"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.8",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/vue3": "^6.4.19",
     "@types/jest": "26.0.22",
     "@types/node": "^14.14.37",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
@@ -43,6 +50,7 @@
     "@vue/eslint-config-typescript": "7.0.0",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "9.8.6",
+    "babel-loader": "^8.2.3",
     "esbuild-jest": "0.4.0",
     "eslint": "7.23.0",
     "eslint-config-prettier": "8.1.0",
@@ -53,11 +61,13 @@
     "prettier": "2.2.1",
     "rollup": "^2.44.0",
     "sass": "1.32.8",
+    "storybook-builder-vite": "^0.1.21",
     "tailwindcss": "1.9.6",
     "ts-node": "9.1.1",
     "typescript": "^4.6.2",
     "vite": "2.1.4",
     "vue-eslint-parser": "7.6.0",
+    "vue-loader": "^16.8.3",
     "vue-tsc": "^0.33.2"
   }
 }