feat: chromatic

Author: jiyuujin

.env.example

@@ -0,0 +1 @@
+CHROMATIC_PROJECT_TOKEN=

.github/workflows/chromatic.yml

@@ -0,0 +1,31 @@
+name: Chromatic CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.19.0]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install packages
+        uses: ./.github/actions/install-packages
+
+      - name: Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: packages/ui
+          exitZeroOnChanges: true
+          onlyChanged: true

bun.lockb

@@ -1,3 +1,6 @@
+import { mergeConfig } from 'vite'
+import turbosnap from 'vite-plugin-turbosnap'
+
 module.exports = {
   stories: ['../components/**/*.stories.mdx', '../components/**/*.stories.@(js|ts)'],
   addons: [
@@ -14,4 +17,12 @@ module.exports = {
       },
     },
   },
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      plugins:
+        configType === 'PRODUCTION'
+          ? [turbosnap({ rootDir: config.root ?? process.cwd() })]
+          : [],
+    })
+  },
 }

packages/ui/.storybook/main.js

@@ -21,7 +21,9 @@
     "@vitejs/plugin-vue": "5.0.3",
     "@vuejs-jp/eslint-config": "workspace:*",
     "@vuejs-jp/typescript-config": "workspace:*",
+    "chromatic": "10.9.4",
     "storybook": "7.6.12",
+    "vite-plugin-turbosnap": "1.0.3",
     "vue": "3.4.15",
     "typescript": "5.3.3"
   },

packages/ui/package.json

@@ -1,10 +1,12 @@
 {
   "$schema": "https://turbo.build/schema.json",
   "globalDependencies": ["**/.env.*local"],
+  "globalDotEnv": [".env"],
   "pipeline": {
     "build": {
       "dependsOn": ["^build"],
-      "outputs": [".nuxt/**", "!.nuxt/cache/**"]
+      "outputs": [".nuxt/**", "!.nuxt/cache/**"],
+      "dotEnv": [".env"]
     },
     "build-storybook": {
       "dependsOn": ["^build-storybook"],
@@ -17,6 +19,7 @@
       "dependsOn": ["^lint-fix"]
     },
     "dev": {
+      "dotEnv": [".env"],
       "cache": false,
       "persistent": true
     }