Add Chromatic to PR checks

Author: colinrotherham

.github/dependabot.yml

@@ -44,6 +44,7 @@ updates:
           - '@types/jest'
           - '@types/jest-*'
           - 'babel-*'
+          - 'chromatic'
           - 'jest'
           - 'jest-*'
 

.github/workflows/ci.yml

@@ -10,9 +10,18 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
+    env:
+      CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
+      CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.ref }}
+      CHROMATIC_SLUG: ${{ github.repository }}
+      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
     steps:
       - name: Checkout
         uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
 
       - name: Enable corepack
         run: corepack enable
@@ -37,3 +46,14 @@ jobs:
 
       - name: Storybook build
         run: yarn build-storybook
+
+      - name: Switch to PR branch SHA
+        if: ${{ github.event.pull_request && env.CHROMATIC_PROJECT_TOKEN }}
+        run: git switch --detach $CHROMATIC_SHA
+
+      - name: Storybook deploy
+        uses: chromaui/action@v11
+        with:
+          autoAcceptChanges: main
+          projectToken: ${{ env.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ env.GITHUB_TOKEN }}

.github/workflows/storybook.yml

@@ -93,6 +93,7 @@
     "babel-jest": "^30.2.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-replace-import-extension": "^1.1.5",
+    "chromatic": "^13.3.0",
     "classnames": "^2.5.1",
     "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",

package.json

@@ -4718,6 +4718,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chromatic@npm:^13.3.0":
+  version: 13.3.0
+  resolution: "chromatic@npm:13.3.0"
+  peerDependencies:
+    "@chromatic-com/cypress": ^0.*.* || ^1.0.0
+    "@chromatic-com/playwright": ^0.*.* || ^1.0.0
+  peerDependenciesMeta:
+    "@chromatic-com/cypress":
+      optional: true
+    "@chromatic-com/playwright":
+      optional: true
+  bin:
+    chroma: dist/bin.js
+    chromatic: dist/bin.js
+    chromatic-cli: dist/bin.js
+  checksum: 10c0/496656850cc6498fa101cb17bb8adc9256df70c404f01be1cc6edcdd66fd97ab573a3fe858c581cf45d7279bcab0e170cb054dc3b2e2ef104ac0af9e6df38223
+  languageName: node
+  linkType: hard
+
 "ci-info@npm:^3.2.0":
   version: 3.9.0
   resolution: "ci-info@npm:3.9.0"
@@ -8509,6 +8528,7 @@ __metadata:
     babel-jest: "npm:^30.2.0"
     babel-plugin-module-resolver: "npm:^5.0.2"
     babel-plugin-replace-import-extension: "npm:^1.1.5"
+    chromatic: "npm:^13.3.0"
     classnames: "npm:^2.5.1"
     eslint: "npm:^9.37.0"
     eslint-config-prettier: "npm:^10.1.8"