Storybook を追加

.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,9 @@
     "vuex": "4"
   },
   "devDependencies": {
+    "@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",
@@ -53,6 +58,7 @@
     "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",

src/components/Button.stories.ts

@@ -0,0 +1,23 @@
+import Button from "~/components/Button.vue";
+import { Story } from "@storybook/vue3";
+
+export default {
+  component: Button,
+};
+
+const Template: Story = (args) => ({
+  components: { Button },
+  setup() {
+    return { args };
+  },
+  template: `<Button v-bind="args">${args.slot}</Button>`,
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  slot: "現在の学期",
+  size: "medium",
+  layout: "flexible",
+  color: "base",
+};

src/components/CardCourse.stories.ts

@@ -0,0 +1,31 @@
+import CardCourse from "~/components/CardCourse.vue";
+import { CourseCard } from "~/entities/courseCard";
+import { Story } from "@storybook/vue3";
+
+export default {
+  component: CardCourse,
+};
+
+const Template: Story = (args) => ({
+  components: { CardCourse },
+  setup() {
+    return { args };
+  },
+  template: '<CardCourse v-bind="args"/>',
+});
+
+export const Default = Template.bind({});
+
+const dummyCourse: CourseCard = {
+  id: "FB12721",
+  name: "計算機科学",
+  period: "2.0",
+  location: "6A203",
+  url: "https://kdb.tsukuba.ac.jp/syllabi/2021/FB12721/jpn/",
+  isSelected: false,
+};
+
+Default.args = {
+  isChecked: false,
+  course: dummyCourse,
+};