Enable Chromatic

.github/workflows/ci.yml

@@ -18,17 +18,20 @@ jobs:
           # Specify names so that the GitHub branch protection settings for
           # required checks don't need to change if we ever change the commands used.
           - name: lint
-            command: lint:nofix
+            command: yarn run lint:nofix
           - name: test
-            command: test --maxWorkers=100%
+            command: yarn run test --maxWorkers=100%
           - name: storybook
-            command: storybook:ci
+            command: yarn run storybook:ci
+          - name: chromatic
+            command: yarn workspace @foxglove-studio/app run 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
@@ -50,8 +53,11 @@ jobs:
           service_account_key: ${{ secrets.GCP_SERVICE_ACCOUNT_KEY }}
           export_default_credentials: true
       - run: yarn install --immutable
-      - run: yarn run ${{ matrix.config.command }}
+      - 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",