Merge pull request #10 from vuejs-jp/feature/chromatic-deploy-test

feat: chromatic

.env.example

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

.github/workflows/chromatic.yml

@@ -0,0 +1,33 @@
+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
+        with:
+          fetch-depth: 0
+
+      - 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

packages/ui/.storybook/main.js

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

packages/ui/chromatic.config.json

@@ -0,0 +1 @@
+{"projectId":"Project:65c74499999b5699c4fe0bfc"}

packages/ui/package.json

@@ -10,18 +10,21 @@
     "lint-fix": "eslint . --ext js,jsx,ts,tsx,vue --ignore-path .eslintignore --fix"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "1.1.7",
     "@nuxt/kit": "3.10.0",
-    "@storybook/addon-a11y": "7.6.12",
-    "@storybook/addon-backgrounds": "7.6.12",
-    "@storybook/addon-essentials": "7.6.12",
-    "@storybook/addon-links": "7.6.12",
-    "@storybook/builder-vite": "7.6.12",
-    "@storybook/vue3": "7.6.12",
-    "@storybook/vue3-vite": "7.6.12",
+    "@storybook/addon-a11y": "8.0.0-beta.2",
+    "@storybook/addon-backgrounds": "8.0.0-beta.2",
+    "@storybook/addon-essentials": "8.0.0-beta.2",
+    "@storybook/addon-links": "8.0.0-beta.2",
+    "@storybook/builder-vite": "8.0.0-beta.2",
+    "@storybook/vue3": "8.0.0-beta.2",
+    "@storybook/vue3-vite": "8.0.0-beta.2",
     "@vitejs/plugin-vue": "5.0.3",
     "@vuejs-jp/eslint-config": "workspace:*",
     "@vuejs-jp/typescript-config": "workspace:*",
-    "storybook": "7.6.12",
+    "chromatic": "10.9.4",
+    "storybook": "8.0.0-beta.2",
+    "vite-plugin-turbosnap": "1.0.3",
     "vue": "3.4.15",
     "typescript": "5.3.3"
   },

turbo.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
     }