feat: add chromatic (#3764)

.github/workflows/build.yml

@@ -133,6 +133,25 @@ jobs:
           path: ./apps/storybook/storybook-static
           if-no-files-found: error
 
+  publish-storybook:
+    name: Publish Storybook
+    runs-on: ubuntu-latest
+    environment: development
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          # This is required to fetch all commits for chromatic
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+        with:
+          electron-install: false
+      - run: yarn chromatic
+        working-directory: apps/storybook
+        env:
+          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
   build-core:
     name: Build @affine/core
     runs-on: ubuntu-latest

apps/storybook/README.md

@@ -0,0 +1 @@
+# Storybook

apps/storybook/package.json

@@ -3,8 +3,9 @@
   "private": true,
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "NODE_OPTIONS=--max_old_space_size=4096 storybook build",
-    "test": "test-storybook"
+    "build": "storybook build",
+    "test": "test-storybook",
+    "chromatic": "npx chromatic --build-script-name build"
   },
   "dependencies": {
     "@affine/component": "workspace:*",
@@ -37,6 +38,7 @@
     "@blocksuite/icons": "^2.1.31",
     "@blocksuite/lit": "0.0.0-20230814155455-ceb5d5d8-nightly",
     "@blocksuite/store": "0.0.0-20230814155455-ceb5d5d8-nightly",
+    "chromatic": "^6.22.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

yarn.lock

@@ -702,6 +702,7 @@ __metadata:
     "@storybook/test-runner": ^0.13.0
     "@storybook/testing-library": ^0.2.0
     "@vitejs/plugin-react": ^4.0.4
+    chromatic: ^6.22.0
     concurrently: ^8.2.0
     jest-mock: ^29.6.2
     react: 18.2.0
@@ -15389,6 +15390,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chromatic@npm:^6.22.0":
+  version: 6.22.0
+  resolution: "chromatic@npm:6.22.0"
+  bin:
+    chroma: dist/bin.js
+    chromatic: dist/bin.js
+    chromatic-cli: dist/bin.js
+  checksum: 8d28d0e4c8a0093bd3a77545257fb99868763d4abb70e895b66ff0811840c97512926ae3def3e5c5317c9e91b84d14d4b84f6ac7dc1fd88304143834158bca85
+  languageName: node
+  linkType: hard
+
 "chrome-trace-event@npm:^1.0.2":
   version: 1.0.3
   resolution: "chrome-trace-event@npm:1.0.3"