feat: setup chromatic

.github/workflows/chromatic.yml

@@ -0,0 +1,29 @@
+name: "Chromatic"
+on: push
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - name: Install Dependencies and Build
+        run: |
+          pnpm install
+          pnpm build
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

apps/docs/package.json

@@ -7,8 +7,10 @@
     "dev": "storybook dev -p 6006",
     "build": "storybook build --docs",
     "preview-storybook": "serve storybook-static",
+    "build-storybook": "storybook build -o storybook-static",
     "clean": "rm -rf .turbo && rm -rf node_modules",
-    "lint": "eslint ./stories/*.stories.tsx --max-warnings 0"
+    "lint": "eslint ./stories/*.stories.tsx --max-warnings 0",
+    "chromatic": "pnpm dlx chromatic --exit-zero-on-changes "
   },
   "dependencies": {
     "@signozhq/button": "workspace:*",

package.json

@@ -6,6 +6,8 @@
     "lint": "turbo run lint",
     "clean": "turbo run clean && rm -rf node_modules",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "build-storybook": "turbo run build-storybook -- --output-dir=storybook-static",
+    "chromatic": "pnpm install && pnpm build --filter=docs^... && turbo run chromatic --",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "update-version": "changeset && changeset version",

turbo.json

@@ -6,9 +6,16 @@
       "outputs": ["dist/**", "storybook-static/**"],
       "dependsOn": ["^build"]
     },
+    "build-storybook": {
+      "dependsOn": ["^build-storybook"],
+      "outputs": ["storybook-static/**"]
+    },
     "lint": {
       "dependsOn": ["^lint"]
     },
+    "chromatic": {
+      "dependsOn": ["^chromatic"]
+    },
     "dev": {
       "cache": false,
       "persistent": true