Add Chromatic for visual regression testing (#2169)

* Update storybook

* Install chromatic addon

* Automate with CI

* Remove dark stories

* Additional story clean-up

.github/workflows/chromatic.yml

@@ -0,0 +1,28 @@
+name: 'Chromatic'
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main, 'codefreeze-*']
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Checkout and Setup Node
+        uses: ./.github/actions/checkout-and-setup
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          autoAcceptChanges: 'main'
+          exitZeroOnChanges: true
+          exitOnceUploaded: true
+          onlyChanged: true
+          skip: 'dependabot/**'

.storybook/main.ts

@@ -9,6 +9,7 @@ const config: StorybookConfig = {
     '@storybook/addon-svelte-csf',
     '@storybook/addon-a11y',
     '@storybook/addon-themes',
+    '@chromatic-com/storybook',
   ],
   framework: '@storybook/sveltekit',
 };

chromatic.config.json

@@ -0,0 +1,9 @@
+{
+  "autoAcceptChanges": "main",
+  "buildScriptName": "stories:build",
+  "exitOnceUploaded": true,
+  "exitZeroOnChanges": true,
+  "externals": ["public/**"],
+  "onlyChanged": true,
+  "skip": "dependabot/**"
+}

package.json

@@ -87,7 +87,7 @@
     "@fontsource-variable/inter": "^5.0.8",
     "@fontsource/noto-sans-mono": "^5.0.9",
     "@lezer/highlight": "^1.1.3",
-    "@storybook/addon-actions": "^8.1.9",
+    "@storybook/addon-actions": "^8.1.10",
     "@sveltejs/package": "^2.2.6",
     "@sveltejs/svelte-virtual-list": "^3.0.1",
     "class-variance-authority": "^0.7.0",
@@ -113,19 +113,20 @@
     "@axe-core/playwright": "^4.9.0",
     "@babel/core": "^7.20.12",
     "@babel/preset-typescript": "^7.18.6",
+    "@chromatic-com/storybook": "^1.5.0",
     "@grpc/grpc-js": "^1.8.22",
     "@playwright/test": "^1.44.1",
-    "@storybook/addon-a11y": "^8.1.9",
-    "@storybook/addon-essentials": "^8.1.9",
-    "@storybook/addon-interactions": "^8.1.9",
-    "@storybook/addon-links": "^8.1.9",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
     "@storybook/addon-svelte-csf": "^4.1.3",
-    "@storybook/addon-themes": "^8.1.9",
-    "@storybook/blocks": "^8.1.9",
+    "@storybook/addon-themes": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
     "@storybook/icons": "^1.2.9",
-    "@storybook/svelte": "^8.1.9",
-    "@storybook/sveltekit": "^8.1.9",
-    "@storybook/test": "^8.1.9",
+    "@storybook/svelte": "^8.1.10",
+    "@storybook/sveltekit": "^8.1.10",
+    "@storybook/test": "^8.1.10",
     "@storybook/test-runner": "^0.18.2",
     "@sveltejs/adapter-static": "^3.0.0",
     "@sveltejs/adapter-vercel": "^4.0.0",
@@ -200,7 +201,7 @@
     "remark-rehype": "^10.1.0",
     "remark-toc": "^8.0.1",
     "rimraf": "^4.3.1",
-    "storybook": "^8.1.9",
+    "storybook": "^8.1.10",
     "stylelint": "^15.10.3",
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-standard": "^34.0.0",