Charles BochetandGitHub
e6614299c6
## Summary
- Adds `@argos-ci/storybook` vitest plugin to `twenty-ui` for automatic
screenshot capture during vitest storybook tests
- Uploads captured screenshots (PNG, ~5MB) as a CI artifact instead of
passing the full storybook build
- Updates the visual regression dispatch workflow to pass
`mode=argos-screenshots` to ci-privileged, which then uploads
screenshots to Argos via CLI
This replaces the 10-minute Storybook screenshot capture with a ~30s
vitest browser-mode approach. The heavy screenshot work happens on free
public runners, while ci-privileged only handles the Argos API upload
(keeping secrets private).
## Architecture
```
twenty (public, free runners) ci-privileged (private)
───────────────────────────── ────────────────────────
1. Build storybook-static 4. Download screenshots artifact
2. Vitest captures screenshots 5. `argos upload` → Argos API
3. Upload screenshots artifact 6. Poll for results
7. Post PR comment
```
## Test plan
- [x] Verified locally: vitest captures 225 screenshots in ~28s
- [x] Verified `@argos-ci/cli upload` successfully creates Argos build
from captured screenshots
- [x] Argos diffs computed and results visible via API
- [ ] CI runs end-to-end on a PR
208 lines
5.5 KiB
JSON
208 lines
5.5 KiB
JSON
{
|
|
"name": "twenty-ui",
|
|
"private": true,
|
|
"main": "dist/index.cjs",
|
|
"module": "dist/index.mjs",
|
|
"style": "./dist/style.css",
|
|
"type": "module",
|
|
"sideEffects": [
|
|
"**/*.css"
|
|
],
|
|
"devDependencies": {
|
|
"@argos-ci/storybook": "^6.0.6",
|
|
"@babel/core": "^7.14.5",
|
|
"@babel/preset-env": "^7.26.9",
|
|
"@babel/preset-react": "^7.26.3",
|
|
"@babel/preset-typescript": "^7.24.6",
|
|
"@prettier/sync": "^0.5.2",
|
|
"@storybook-community/storybook-addon-cookie": "^5.0.0",
|
|
"@storybook/addon-coverage": "^3.0.0",
|
|
"@storybook/addon-links": "^10.3.3",
|
|
"@storybook/react-vite": "^10.3.3",
|
|
"@swc/core": "^1.15.11",
|
|
"@swc/jest": "^0.2.39",
|
|
"@testing-library/dom": "^10.4.0",
|
|
"@testing-library/jest-dom": "^6.6.3",
|
|
"@testing-library/react": "^16.3.0",
|
|
"@types/babel__preset-env": "^7",
|
|
"@types/jest": "^30.0.0",
|
|
"@types/react": "^18.2.39",
|
|
"@types/react-dom": "^18.2.15",
|
|
"@vitejs/plugin-react-swc": "4.2.3",
|
|
"@wyw-in-js/babel-preset": "^0.6.0",
|
|
"@wyw-in-js/vite": "^0.7.0",
|
|
"babel-plugin-inline-import": "^3.0.0",
|
|
"babel-plugin-inline-react-svg": "^2.0.2",
|
|
"babel-plugin-module-resolver": "^5.0.2",
|
|
"jest": "29.7.0",
|
|
"jest-environment-jsdom": "30.0.0-beta.3",
|
|
"prettier": "^3.1.1",
|
|
"slash": "^5.1.0",
|
|
"storybook-addon-pseudo-states": "^10.3.3",
|
|
"ts-jest": "^29.1.1",
|
|
"tsx": "^4.19.3",
|
|
"vite-plugin-checker": "^0.10.2",
|
|
"vite-plugin-dts": "3.8.1",
|
|
"vite-plugin-svgr": "^4.3.0"
|
|
},
|
|
"dependencies": {
|
|
"@linaria/react": "^6.2.1",
|
|
"@monaco-editor/react": "^4.7.0",
|
|
"@radix-ui/colors": "^3.0.0",
|
|
"@sniptt/guards": "^0.2.0",
|
|
"@tabler/icons-react": "^3.31.0",
|
|
"date-fns": "^2.30.0",
|
|
"framer-motion": "^11.18.0",
|
|
"glob": "^11.1.0",
|
|
"hex-rgb": "^5.0.0",
|
|
"jotai": "^2.17.1",
|
|
"react": "^18.2.0",
|
|
"react-dom": "^18.2.0",
|
|
"react-responsive": "^9.0.2",
|
|
"react-router-dom": "^6.4.4",
|
|
"react-tooltip": "^5.13.1",
|
|
"twenty-shared": "workspace:*",
|
|
"zod": "^4.1.11"
|
|
},
|
|
"peerDependencies": {
|
|
"monaco-editor": ">= 0.25.0 < 1"
|
|
},
|
|
"scripts": {
|
|
"build": "npx vite build"
|
|
},
|
|
"files": [
|
|
"dist",
|
|
"accessibility",
|
|
"assets",
|
|
"components",
|
|
"display",
|
|
"feedback",
|
|
"input",
|
|
"json-visualizer",
|
|
"layout",
|
|
"navigation",
|
|
"testing",
|
|
"theme",
|
|
"theme-constants",
|
|
"utilities"
|
|
],
|
|
"exports": {
|
|
".": {
|
|
"types": "./dist/index.d.ts",
|
|
"import": "./dist/index.mjs",
|
|
"require": "./dist/index.cjs"
|
|
},
|
|
"./style.css": "./dist/style.css",
|
|
"./theme-light.css": "./dist/theme-light.css",
|
|
"./theme-dark.css": "./dist/theme-dark.css",
|
|
"./accessibility": {
|
|
"types": "./dist/accessibility/index.d.ts",
|
|
"import": "./dist/accessibility.mjs",
|
|
"require": "./dist/accessibility.cjs"
|
|
},
|
|
"./assets": {
|
|
"types": "./dist/assets/index.d.ts",
|
|
"import": "./dist/assets.mjs",
|
|
"require": "./dist/assets.cjs"
|
|
},
|
|
"./components": {
|
|
"types": "./dist/components/index.d.ts",
|
|
"import": "./dist/components.mjs",
|
|
"require": "./dist/components.cjs"
|
|
},
|
|
"./display": {
|
|
"types": "./dist/display/index.d.ts",
|
|
"import": "./dist/display.mjs",
|
|
"require": "./dist/display.cjs"
|
|
},
|
|
"./feedback": {
|
|
"types": "./dist/feedback/index.d.ts",
|
|
"import": "./dist/feedback.mjs",
|
|
"require": "./dist/feedback.cjs"
|
|
},
|
|
"./input": {
|
|
"types": "./dist/input/index.d.ts",
|
|
"import": "./dist/input.mjs",
|
|
"require": "./dist/input.cjs"
|
|
},
|
|
"./json-visualizer": {
|
|
"types": "./dist/json-visualizer/index.d.ts",
|
|
"import": "./dist/json-visualizer.mjs",
|
|
"require": "./dist/json-visualizer.cjs"
|
|
},
|
|
"./layout": {
|
|
"types": "./dist/layout/index.d.ts",
|
|
"import": "./dist/layout.mjs",
|
|
"require": "./dist/layout.cjs"
|
|
},
|
|
"./navigation": {
|
|
"types": "./dist/navigation/index.d.ts",
|
|
"import": "./dist/navigation.mjs",
|
|
"require": "./dist/navigation.cjs"
|
|
},
|
|
"./testing": {
|
|
"types": "./dist/testing/index.d.ts",
|
|
"import": "./dist/testing.mjs",
|
|
"require": "./dist/testing.cjs"
|
|
},
|
|
"./theme": {
|
|
"types": "./dist/theme/index.d.ts",
|
|
"import": "./dist/theme.mjs",
|
|
"require": "./dist/theme.cjs"
|
|
},
|
|
"./theme-constants": {
|
|
"types": "./dist/theme-constants/index.d.ts",
|
|
"import": "./dist/theme-constants.mjs",
|
|
"require": "./dist/theme-constants.cjs"
|
|
},
|
|
"./utilities": {
|
|
"types": "./dist/utilities/index.d.ts",
|
|
"import": "./dist/utilities.mjs",
|
|
"require": "./dist/utilities.cjs"
|
|
}
|
|
},
|
|
"typesVersions": {
|
|
"*": {
|
|
"accessibility": [
|
|
"dist/accessibility/index.d.ts"
|
|
],
|
|
"assets": [
|
|
"dist/assets/index.d.ts"
|
|
],
|
|
"components": [
|
|
"dist/components/index.d.ts"
|
|
],
|
|
"display": [
|
|
"dist/display/index.d.ts"
|
|
],
|
|
"feedback": [
|
|
"dist/feedback/index.d.ts"
|
|
],
|
|
"input": [
|
|
"dist/input/index.d.ts"
|
|
],
|
|
"json-visualizer": [
|
|
"dist/json-visualizer/index.d.ts"
|
|
],
|
|
"layout": [
|
|
"dist/layout/index.d.ts"
|
|
],
|
|
"navigation": [
|
|
"dist/navigation/index.d.ts"
|
|
],
|
|
"testing": [
|
|
"dist/testing/index.d.ts"
|
|
],
|
|
"theme": [
|
|
"dist/theme/index.d.ts"
|
|
],
|
|
"theme-constants": [
|
|
"dist/theme-constants/index.d.ts"
|
|
],
|
|
"utilities": [
|
|
"dist/utilities/index.d.ts"
|
|
]
|
|
}
|
|
}
|
|
}
|