chore: remove Chromatic dependencies and configuration (#21221)

## Summary

- Remove `chromatic` and `@chromatic-com/storybook` devDependencies from
twenty-front
- Remove global `chromatic` Nx target from nx.json and twenty-front
project.json override
- Remove commented Chromatic Storybook addon from twenty-front
- Remove `CHROMATIC_PROJECT_TOKEN` from .env.example
- Update README to remove Chromatic sponsor reference (image was already
missing)
- Update stale Chromatic comment in toSpliced.ts

## Context

Visual regression testing has moved from Chromatic SaaS to self-hosted
Argos at `argos.twenty-internal.com`. These are dead references that are
no longer used by any CI workflow.

**Note:** Story `parameters.chromatic: { disableSnapshot: true }`
entries are intentionally kept — the Argos plugin reads them as a
fallback.

## Test plan

- Verify `yarn install` succeeds after dependency removal
- Verify no workflow references `chromatic` or `nx chromatic`
This commit is contained in:
Charles Bochet
2026-06-04 15:15:23 +02:00
committed by GitHub
parent badeaddd37
commit f4da7767f8
8 changed files with 3 additions and 97 deletions
+1 -6
View File
@@ -147,13 +147,9 @@ Want to go deeper? Read the <a href="https://docs.twenty.com/user-guide/introduc
- <a href="https://nestjs.com/"><img src="./packages/twenty-website/public/images/readme/stack-nestjs.svg" width="14" height="14"/> NestJS</a>, with <a href="https://bullmq.io/">BullMQ</a>, <a href="https://www.postgresql.org/"><img src="./packages/twenty-website/public/images/readme/stack-postgresql.svg" width="14" height="14"/> PostgreSQL</a>, <a href="https://redis.io/"><img src="./packages/twenty-website/public/images/readme/stack-redis.svg" width="14" height="14"/> Redis</a>
- <a href="https://reactjs.org/"><img src="./packages/twenty-website/public/images/readme/stack-react.svg" width="14" height="14"/> React</a>, with <a href="https://jotai.org/">Jotai</a>, <a href="https://linaria.dev/">Linaria</a> and <a href="https://lingui.dev/">Lingui</a>
# Thanks
<p align="center">
<a href="https://www.chromatic.com/"><img src="./packages/twenty-website/public/images/readme/chromatic.webp" height="28" alt="Chromatic" /></a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://greptile.com"><img src="./packages/twenty-website/public/images/readme/greptile.webp" height="28" alt="Greptile" /></a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://sentry.io/"><img src="./packages/twenty-website/public/images/readme/sentry.webp" height="28" alt="Sentry" /></a>
@@ -161,8 +157,7 @@ Want to go deeper? Read the <a href="https://docs.twenty.com/user-guide/introduc
<a href="https://crowdin.com/"><img src="./packages/twenty-website/public/images/readme/crowdin.webp" height="28" alt="Crowdin" /></a>
</p>
Thanks to these amazing services that we use and recommend for UI testing (Chromatic), code review (Greptile), catching bugs (Sentry) and translating (Crowdin).
Thanks to these amazing services that we use and recommend for code review (Greptile), catching bugs (Sentry) and translating (Crowdin).
# Join the Community
-19
View File
@@ -220,25 +220,6 @@
}
}
},
"chromatic": {
"executor": "nx:run-commands",
"options": {
"cwd": "{projectRoot}",
"commands": [
{
"command": "nx storybook:build {projectName}",
"forwardAllArgs": false
},
"chromatic --storybook-build-dir=storybook-static {args.ci}"
],
"parallel": false
},
"configurations": {
"ci": {
"ci": "--exit-zero-on-changes"
}
}
},
"@nx/jest:jest": {
"cache": true,
"inputs": [
-1
View File
@@ -4,7 +4,6 @@ VITE_BUILD_SOURCEMAP=false
# ———————— Optional ————————
# REACT_APP_PORT=3001
# CHROMATIC_PROJECT_TOKEN=
# VITE_ENABLE_SSL=false
# VITE_HOST=localhost.com
# SSL_KEY_PATH="./certs/your-cert.key"
-1
View File
@@ -41,7 +41,6 @@ const config: StorybookConfig = {
},
addons: [
// '@chromatic-com/storybook',
'@storybook-community/storybook-addon-cookie',
'@storybook/addon-links',
'@storybook/addon-coverage',
-2
View File
@@ -149,7 +149,6 @@
"devDependencies": {
"@babel/core": "^7.14.5",
"@babel/preset-typescript": "^7.24.6",
"@chromatic-com/storybook": "^4.1.3",
"@graphql-codegen/cli": "^3.3.1",
"@graphql-codegen/typed-document-node": "^5.0.9",
"@graphql-codegen/typescript": "^3.0.4",
@@ -180,7 +179,6 @@
"@vitejs/plugin-react-swc": "4.2.3",
"@vitest/coverage-istanbul": "^4.0.18",
"@wyw-in-js/vite": "^0.7.0",
"chromatic": "^6.18.0",
"dotenv-cli": "^7.4.4",
"jest": "29.7.0",
"jest-environment-jsdom": "30.0.0-beta.3",
-5
View File
@@ -275,11 +275,6 @@
"command": "dotenv npx vite-node scripts/generate-mock-data.ts"
}
},
"chromatic": {
"configurations": {
"ci": {}
}
},
"lingui:extract": {
"executor": "nx:run-commands",
"dependsOn": ["^build"],
@@ -6,7 +6,7 @@ type ToSplicedFn = {
/**
* Returns a new array with some elements removed and/or replaced at a given index.
* This does the same as `Array.prototype.toSpliced`.
* We cannot use the native `Array.prototype.toSpliced` method as of now because Chromatic's runners do not support it.
* Polyfill for environments that don't support Array.prototype.toSpliced.
*
* @param array - The array to remove and/or replace elements from.
* @param start - The index at which to start changing the array.
+1 -62
View File
@@ -4642,21 +4642,6 @@ __metadata:
languageName: node
linkType: hard
"@chromatic-com/storybook@npm:^4.1.3":
version: 4.1.3
resolution: "@chromatic-com/storybook@npm:4.1.3"
dependencies:
"@neoconfetti/react": "npm:^1.0.0"
chromatic: "npm:^13.3.3"
filesize: "npm:^10.0.12"
jsonfile: "npm:^6.1.0"
strip-ansi: "npm:^7.1.0"
peerDependencies:
storybook: ^0.0.0-0 || ^9.0.0 || ^9.1.0-0 || ^9.2.0-0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0
checksum: 10c0/31d1cc7e98489238a22c7560677bf07235b87c48dc1f39faf1fdc7dda2f41221709c10af2a5fcb10e46bea7b80cc81badf08aba7015f0c5b8d0a9e037e92e1bf
languageName: node
linkType: hard
"@clickhouse/client-common@npm:1.18.1":
version: 1.18.1
resolution: "@clickhouse/client-common@npm:1.18.1"
@@ -12490,13 +12475,6 @@ __metadata:
languageName: node
linkType: hard
"@neoconfetti/react@npm:^1.0.0":
version: 1.0.0
resolution: "@neoconfetti/react@npm:1.0.0"
checksum: 10c0/dfa487965b69f88b39562ccd910114cd68b00a90c7eb79cfb1a483c7ac717b720f9f095e5aea13cef8a9b9bea05533d380ddff5e44d3bc3f7dc4d5c66716765c
languageName: node
linkType: hard
"@nestjs/axios@npm:3.1.2":
version: 3.1.2
resolution: "@nestjs/axios@npm:3.1.2"
@@ -29711,36 +29689,6 @@ __metadata:
languageName: node
linkType: hard
"chromatic@npm:^13.3.3":
version: 13.3.5
resolution: "chromatic@npm:13.3.5"
peerDependencies:
"@chromatic-com/cypress": ^0.*.* || ^1.0.0
"@chromatic-com/playwright": ^0.*.* || ^1.0.0
peerDependenciesMeta:
"@chromatic-com/cypress":
optional: true
"@chromatic-com/playwright":
optional: true
bin:
chroma: dist/bin.js
chromatic: dist/bin.js
chromatic-cli: dist/bin.js
checksum: 10c0/58b3d7984db000f8c7b605788569a24c3f3cd41bb6b2d3a94f18acc9ff11ce6c6881f795c8390a94ff721ccfcf8a2d7942e78a54a1f70294a7b3d35ccc382154
languageName: node
linkType: hard
"chromatic@npm:^6.18.0":
version: 6.24.1
resolution: "chromatic@npm:6.24.1"
bin:
chroma: dist/bin.js
chromatic: dist/bin.js
chromatic-cli: dist/bin.js
checksum: 10c0/b65ad05fa38c54693f670a5c4ad1f104d60ff1023282976135c3a537529829bf15fda877a29278b95385fa8c51971dc4b20f418a77b501c5c18367fcaad39e7c
languageName: node
linkType: hard
"chrome-trace-event@npm:^1.0.2, chrome-trace-event@npm:^1.0.3":
version: 1.0.4
resolution: "chrome-trace-event@npm:1.0.4"
@@ -35458,13 +35406,6 @@ __metadata:
languageName: node
linkType: hard
"filesize@npm:^10.0.12":
version: 10.1.6
resolution: "filesize@npm:10.1.6"
checksum: 10c0/9a196d64da4e947b8c0d294be09a3dfa7a634434a1fc5fb3465f1c9acc1237ea0363f245ba6e24477ea612754d942bc964d86e0e500905a72e9e0e17ae1bbdbc
languageName: node
linkType: hard
"fill-range@npm:^7.1.1":
version: 7.1.1
resolution: "fill-range@npm:7.1.1"
@@ -41469,7 +41410,7 @@ __metadata:
languageName: node
linkType: hard
"jsonfile@npm:^6.0.1, jsonfile@npm:^6.1.0":
"jsonfile@npm:^6.0.1":
version: 6.1.0
resolution: "jsonfile@npm:6.1.0"
dependencies:
@@ -55527,7 +55468,6 @@ __metadata:
"@blocknote/xl-docx-exporter": "npm:^0.47.3"
"@blocknote/xl-pdf-exporter": "npm:^0.47.3"
"@calcom/embed-react": "npm:^1.5.3"
"@chromatic-com/storybook": "npm:^4.1.3"
"@cyntler/react-doc-viewer": "npm:^1.17.0"
"@dagrejs/dagre": "npm:^1.1.8"
"@dnd-kit/react": "npm:^0.3.2"
@@ -55603,7 +55543,6 @@ __metadata:
apollo-link-rest: "npm:^0.10.0-rc.2"
apollo-upload-client: "npm:^19.0.0"
buffer: "npm:^6.0.3"
chromatic: "npm:^6.18.0"
country-flag-icons: "npm:^1.5.11"
cron-parser: "npm:5.1.1"
d3-shape: "npm:^3.2.0"