feat: Add chromatic build command

- Disable snapshots (we use Argos)
- Project token configured via GitHub CI
- Builds in the same directory as storybook:build command

.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": {
@@ -34,7 +37,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",
@@ -69,6 +73,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",
@@ -103,5 +108,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"