From f4da7767f8bb3fa934f81d74ab38b7be9b127ab0 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Thu, 4 Jun 2026 15:15:23 +0200 Subject: [PATCH] chore: remove Chromatic dependencies and configuration (#21221) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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` --- README.md | 7 +-- nx.json | 19 ------ packages/twenty-front/.env.example | 1 - packages/twenty-front/.storybook/main.ts | 1 - packages/twenty-front/package.json | 2 - packages/twenty-front/project.json | 5 -- .../twenty-front/src/utils/array/toSpliced.ts | 2 +- yarn.lock | 63 +------------------ 8 files changed, 3 insertions(+), 97 deletions(-) diff --git a/README.md b/README.md index 69a3d893d94..1c7ad58e0c0 100644 --- a/README.md +++ b/README.md @@ -147,13 +147,9 @@ Want to go deeper? Read the NestJS, with BullMQ, PostgreSQL, Redis - React, with Jotai, Linaria and Lingui - - # Thanks

- Chromatic -      Greptile      Sentry @@ -161,8 +157,7 @@ Want to go deeper? Read the Crowdin

- 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 diff --git a/nx.json b/nx.json index 0d4edfdfda5..2f382d35c75 100644 --- a/nx.json +++ b/nx.json @@ -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": [ diff --git a/packages/twenty-front/.env.example b/packages/twenty-front/.env.example index 03038ef1c3f..62dc6af76ff 100644 --- a/packages/twenty-front/.env.example +++ b/packages/twenty-front/.env.example @@ -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" diff --git a/packages/twenty-front/.storybook/main.ts b/packages/twenty-front/.storybook/main.ts index 797f5ef84f6..2a721307df9 100644 --- a/packages/twenty-front/.storybook/main.ts +++ b/packages/twenty-front/.storybook/main.ts @@ -41,7 +41,6 @@ const config: StorybookConfig = { }, addons: [ - // '@chromatic-com/storybook', '@storybook-community/storybook-addon-cookie', '@storybook/addon-links', '@storybook/addon-coverage', diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json index 9820f5e0f34..134062ad5ad 100644 --- a/packages/twenty-front/package.json +++ b/packages/twenty-front/package.json @@ -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", diff --git a/packages/twenty-front/project.json b/packages/twenty-front/project.json index e5044685f8b..712b339c419 100644 --- a/packages/twenty-front/project.json +++ b/packages/twenty-front/project.json @@ -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"], diff --git a/packages/twenty-front/src/utils/array/toSpliced.ts b/packages/twenty-front/src/utils/array/toSpliced.ts index acec4976d2f..40fe1991004 100644 --- a/packages/twenty-front/src/utils/array/toSpliced.ts +++ b/packages/twenty-front/src/utils/array/toSpliced.ts @@ -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. diff --git a/yarn.lock b/yarn.lock index bf4bb63f036..975d6917b7d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"