Enable Chromatic

.github/workflows/ci.yml

@@ -23,12 +23,15 @@ jobs:
             command: test --maxWorkers=100%
           - name: storybook
             command: storybook:ci
+          - name: chromatic
+            command: chromatic
 
     name: ${{ matrix.config.name }}
 
     steps:
       - uses: actions/checkout@v2
         with:
+          fetch-depth: 0
           lfs: true
       - name: Configure Node.js
         uses: actions/setup-node@v2.1.5
@@ -52,6 +55,9 @@ jobs:
       - run: yarn install --immutable
       - run: yarn run ${{ matrix.config.command }}
         env:
+          CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.sha }}
+          CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref }}
+          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           REG_SUIT_GITHUB_CLIENT_ID: ${{ secrets.REG_SUIT_GITHUB_CLIENT_ID }}
           REG_SUIT_HEAD_SHA: ${{ github.sha }}
           # `base.sha` works for pull request events, `before` works for pushes to main

app/package.json

@@ -2,6 +2,8 @@
   "name": "@foxglove-studio/app",
   "private": true,
   "scripts": {
+    "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name storybook:build --exit-once-uploaded",
+    "storybook:build": "build-storybook",
     "test": "NODE_OPTIONS='-r ts-node/register' jest",
     "test:watch": "NODE_OPTIONS='-r ts-node/register' jest --watch"
   },
@@ -132,6 +134,7 @@
     "@types/ws": "7.4.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.4.1",
     "argparse": "2.0.1",
+    "chromatic": "github:amacneil/chromatic-cli#detectyarn",
     "dom-to-image-more-scroll-fix": "2.9.0",
     "enzyme": "3.11.0",
     "fetch-mock": "9.11.0",

package.json

@@ -33,7 +33,8 @@
     "storybook": "yarn workspace @foxglove-studio/app run start-storybook",
     "storybook-script": "cd ci && node --loader ts-node/esm --experimental-specifier-resolution=node storybook.ts",
     "storybook:ci": "yarn storybook-script build capture publish",
-    "storybook:local-capture": "yarn storybook-script capture"
+    "storybook:local-capture": "yarn storybook-script capture",
+    "chromatic": "yarn workspace @foxglove-studio/app run chromatic"
   },
   "workspaces": {
     "packages": [