chore: configure chromatic snapshot tests (#896)

Resolves: #444

Summary:

This commit installs and configures a GH action for chromatic. Chromatic
is used for snapshot testing build-over-build.

Details:

* chore: install chromatic

* chore: add chromatic package.json script

Suggested by the docs for convenience so that we can run chromatic like:

```console
yarn run chromatic ...
```

* chore: gitignore storybook builds

* ci: configure chromatic

This action configures chromatic to run in CI on pushes to all branches.
By running this in CI, we get the following:

- snapshot (build-over-build)
- checks in our CI

The snapshots and build-over-build behavior are per branch; this way we
can work on a feature branch without worrying about changes being made
to mainline independently.

* chore: remove manual storybook build from CI

This is now the responsibility of Chromatic

.github/workflows/chromatic.yaml

@@ -0,0 +1,51 @@
+# Note: Chromatic is a separate workflow for coder.yaml as suggested by the
+# chromatic docs. Explicitly, Chromatic works best on 'push' instead of other
+# event types (like pull request), keep in mind that it works build-over-build
+# by storing snapshots.
+#
+# SEE: https://www.chromatic.com/docs/ci
+name: "Chromatic"
+
+# Chromatic works best with push events, not pull_request or other event types.
+on: push
+
+jobs:
+  chromatic-deployment:
+    # REMARK: this is only used to build storybook and deploy it to Chromatic.
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          # Required by Chromatic for build-over-build history, otherwise we
+          # only get 1 commit on shallow checkout.
+          fetch-depth: 0
+
+      - name: Install dependencies
+        run: cd site && yarn
+
+      # This step is not meant for mainline because any detected changes to
+      # storybook snapshots will require manual approval/review in order for
+      # the check to pass. This is desired in PRs, but not in mainline.
+      - name: Publish to Chromatic (non-mainline)
+        if: github.ref != 'refs/heads/main'
+        uses: chromaui/action@v1
+        with:
+          buildScriptName: "storybook:build"
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: "./site"
+
+      # This is a separate step for mainline only that auto accepts and changes
+      # instead of holding CI up. Since we squash/merge, this is defensive to
+      # avoid the same changeset from requiring review once squashed into
+      # main. Chromatic is supposed to be able to detect that we use squash
+      # commits, but it's good to be defensive in case, otherwise CI remains
+      # infinitely "in progress" in mainline unless we re-review each build.
+      - name: Publish to Chromatic (mainline)
+        if: github.ref == 'refs/heads/main'
+        uses: chromaui/action@v1
+        with:
+          autoAcceptChanges: true
+          buildScriptName: "storybook:build"
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: "./site"

.github/workflows/coder.yaml

@@ -387,10 +387,6 @@ jobs:
         run: yarn build
         working-directory: site
 
-      - name: Build Storybook
-        run: yarn storybook:build
-        working-directory: site
-
       - run: yarn test:coverage
         working-directory: site