Merge pull request #1531 from visualize-admin/feat/chromatic

Chromatic

.github/workflows/chromatic.yml

@@ -0,0 +1,19 @@
+name: Chromatic
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  push-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: yarn
+      - run: yarn chromatic
+        env:
+          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.storybook/preview.ts

@@ -20,6 +20,11 @@ const preview: Preview = {
         ? 0
         : a.id.localeCompare(b.id, undefined, { numeric: true }),
   },
+  parameters: {
+    // Disables Chromatic's snapshotting on a global level
+    // We use Argos for snapshots, and only use Chromatic to link to Figma
+    chromatic: { disableSnapshot: true },
+  }
 };
 
 export default preview;

package.json

@@ -3,9 +3,12 @@
   "version": "4.5.1",
   "repository": {
     "type": "git",
-    "url": "https://github.com/visualize-admin/visualization-tool.git"
+    "url": "git+https://github.com/visualize-admin/visualization-tool.git"
+  },
+  "author": {
+    "name": "Federal Office for the Environment FOEN",
+    "email": "[email protected]"
   },
-  "author": "Federal Office for the Environment FOEN <[email protected]>",
   "license": "BSD-3-Clause",
   "private": true,
   "scripts": {
@@ -35,7 +38,8 @@
     "dev:circular-deps": "madge --warning --extensions js,jsx,ts,tsx -b ./app -c ./app/pages/ --ts-config ./app/tsconfig.json | bun scripts/circular-deps-analysis.ts -",
     "github:codegen": "node k6/performance-tests/generate-github-actions.mjs",
     "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build -o app/public/storybook"
+    "storybook:build": "storybook build -o app/public/storybook",
+    "chromatic": "npx chromatic --build-script-name storybook:build -o app/public/storybook"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
@@ -70,6 +74,7 @@
     "argparse": "^2.0.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-plugin-macros": "^3.0.0",
+    "chromatic": "^11.4.0",
     "eslint": "^7.29.0",
     "eslint-config-next": "^12.0.0",
     "eslint-plugin-storybook": "^0.8.0",
@@ -104,5 +109,9 @@
   "resolutions": {
     "@babel/core": "^7.14.6",
     "@babel/parser": "^7.14.6"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/visualize-admin/visualization-tool/issues"
+  },
+  "homepage": "https://github.com/visualize-admin/visualization-tool#readme"
 }

yarn.lock

@@ -11635,6 +11635,11 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
+chromatic@^11.4.0:
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.4.0.tgz#411a51e82599472b2131a08895faf000e0f9a0fa"
+  integrity sha512-/O6OwEUckqKTBGbm9KvYsR/eKCXy4s2eelO38yyfimBIJiL8+TS/pVnBqdtzUqO2hVK4GjrFiea9CnZUG9Akzw==
+
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
@@ -11844,6 +11849,11 @@ clownface@^2.0.2:
     "@rdfjs/environment" "0 - 1"
     "@rdfjs/namespace" "^2.0.0"
 
+clsx@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
@@ -15391,6 +15401,11 @@ gonzales-pe@^4.2.3, gonzales-pe@^4.3.0:
   dependencies:
     minimist "^1.2.5"
 
+goober@^2.0.33:
+  version "2.1.14"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
+  integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -19197,6 +19212,14 @@ normalize-url@^4.1.0:
   resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz"
   integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
 
+notistack@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-3.0.1.tgz#daf59888ab7e2c30a1fa8f71f9cba2978773236e"
+  integrity sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==
+  dependencies:
+    clsx "^1.1.0"
+    goober "^2.0.33"
+
 npm-bundled@^1.1.1:
   version "1.1.2"
   resolved "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz"