enable running chromatic on forks (#1672)

adding the chromatic token to package.json, so it can run on forks too.

---------

Signed-off-by: Peter Jausovec <peter.jausovec@solo.io>
Co-authored-by: Jet Chiang <pokyuen.jetchiang-ext@solo.io>

Author: peterj

.github/workflows/ci.yaml

@@ -199,16 +199,12 @@ jobs:
 
   ui-tests:
     runs-on: ubuntu-latest
-    env:
-      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
     permissions:
       contents: read
       pull-requests: write
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
@@ -239,19 +235,6 @@ jobs:
         working-directory: ./ui
         run: npm run test:vitest
 
-      - name: Build Storybook
-        working-directory: ./ui
-        run: npm run build-storybook
-
-      - name: Publish to Chromatic
-        # Requires repo secret CHROMATIC_PROJECT_TOKEN. Skipped when unset, or on fork PRs (no token access).
-        if: ${{ env.CHROMATIC_PROJECT_TOKEN != '' && (github.event.pull_request == null || github.event.pull_request.head.repo.full_name == github.repository) }}
-        uses: chromaui/action@v16.1.0
-        with:
-          projectToken: ${{ env.CHROMATIC_PROJECT_TOKEN }}
-          workingDir: ui
-          storybookBuildDir: storybook-static
-
   # This job builds the Docker images for the controller, UI, app, and CLI on arm64.
   build:
     needs: setup

.github/workflows/ui-chromatic.yaml

@@ -0,0 +1,48 @@
+name: UI Storybook & Chromatic
+
+# Storybook static build + Chromatic only when the UI package changes.
+# Kept separate from CI so the main workflow does not need paths-filter or conditional steps.
+
+on:
+  push:
+    branches: [main, release/v0.7.x]
+    paths:
+      - "ui/**"
+  pull_request:
+    branches: [main, release/v0.7.x]
+    paths:
+      - "ui/**"
+  workflow_dispatch:
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "24"
+          cache: "npm"
+          cache-dependency-path: ui/package-lock.json
+
+      - name: Install dependencies
+        working-directory: ./ui
+        env:
+          CYPRESS_INSTALL_BINARY: 0
+        run: npm ci
+
+      - name: Build Storybook
+        working-directory: ./ui
+        run: npm run build-storybook
+
+      - name: Publish to Chromatic
+        working-directory: ./ui
+        run: npm run chromatic

ui/package.json

@@ -14,7 +14,7 @@
     "test:e2e": "start-server-and-test dev http://localhost:8001 test:e2e:cypress",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "chromatic": "chromatic --exit-zero-on-changes"
+    "chromatic": "chromatic --exit-zero-on-changes --storybook-build-dir storybook-static --project-token chpt_3e29f54d624610f"
   },
   "dependencies": {
     "@a2a-js/sdk": "^0.3.13",