add chromatic and publish the storybook (#1609)

Chromatic allows us to visually review UI changes:
https://www.chromatic.com/builds?appId=69ccd5e5ca68b9aa5a54b890

---------

Signed-off-by: Peter Jausovec <peter.jausovec@solo.io>

Author: peterj

.github/workflows/ci.yaml

@@ -182,9 +182,16 @@ 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
@@ -203,10 +210,31 @@ jobs:
         working-directory: ./ui
         run: npm run lint
 
-      - name: Run tests
+      - name: Run unit tests (Jest)
         working-directory: ./ui
         run: npm run test
 
+      - name: Install Playwright browser (Chromium)
+        working-directory: ./ui
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Storybook tests (Vitest + Playwright)
+        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.0.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

ui/package-lock.json

@@ -8,11 +8,13 @@
     "start": "next start",
     "lint": "eslint .",
     "test": "jest",
+    "test:vitest": "vitest run",
     "test:watch": "jest --watch",
     "test:e2e:cypress": "cypress run --e2e",
     "test:e2e": "start-server-and-test dev http://localhost:8001 test:e2e:cypress",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
   "dependencies": {
     "@a2a-js/sdk": "^0.3.13",
@@ -82,6 +84,7 @@
     "@vitest/coverage-v8": "^4.1.2",
     "autoprefixer": "^10.4.23",
     "babel-plugin-react-compiler": "^1.0.0",
+    "chromatic": "^16.0.0",
     "cypress": "^15.13.0",
     "eslint": "^9.39.2",
     "eslint-config-next": "16.2.1",