From 75f4b335f9ed807bb53cbc9f0c8d15a03b8d8dca Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Mon, 27 May 2024 13:26:13 +0200 Subject: [PATCH 1/2] 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 | 5 +++++ package.json | 17 +++++++++++++---- yarn.lock | 23 +++++++++++++++++++++++ 3 files changed, 41 insertions(+), 4 deletions(-) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 0436210b4..d18279f02 100644 --- a/.storybook/preview.ts +++ b/.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; diff --git a/package.json b/package.json index 534d5e1c4..430848dc6 100644 --- a/package.json +++ b/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": "visualize@bafu.admin.ch" }, - "author": "Federal Office for the Environment FOEN ", "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" } diff --git a/yarn.lock b/yarn.lock index d745c4efe..c39913ea9 100644 --- a/yarn.lock +++ b/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" From 7d767e1f4cd5a38045d9e0ac84a2560fa7903f23 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Mon, 27 May 2024 13:27:55 +0200 Subject: [PATCH 2/2] feat: Add workflow --- .github/workflows/chromatic.yml | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 .github/workflows/chromatic.yml diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 000000000..eabecee3d --- /dev/null +++ b/.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 }}