Charles Bochet
7c0136b97b
## What Migrates the frontend stack from **React 18.3 → 19.2**. The website, sdk, companion and emails packages were already on React 19; this brings the remaining holdouts (`twenty-front`, `twenty-ui`, `twenty-ui-deprecated`, `twenty-front-component-renderer`) and `twenty-server`'s email rendering onto 19, and pins a single React version repo-wide. ## Why React 18.x is now the legacy line. Staying current keeps us on the patched/maintained branch and unblocks downstream library majors (react-router 7, mantine 9, etc.) that require React 19 peers. ## Dependency bumps (required by React 19 peers / removed APIs) | Package | From | To | Reason | |---|---|---|---| | react / react-dom | 18.3.1 | 19.2.3 | core | | @hello-pangea/dnd | 16 | 18 | peer `^18 \|\| ^19` | | react-datepicker | 6 | 9 | v<7 used removed `findDOMNode`; drops `@types/react-datepicker` | | react-data-grid | beta.13 | beta.59 | peer `^19.2`; new render API | | graphiql (+ @graphiql/react, plugin-explorer) | 3 / 0.23 / 1 | 5 / 0.37 / 5.1 | peer `^18 \|\| ^19` | | react-helmet-async | 1.3 | **@dr.pogodin/react-helmet** 3.2 | upstream caps peer at `^18`; drop-in React 19 fork | A `resolutions` pin enforces a single React (19.2.3) + `@types/react` (19.2.14) across the monorepo to avoid duplicate copies / type-identity splits. Versions are the aged lockfile patches (clears the `npmMinimalAgeGate`). ## Code changes - **Global `JSX` shim** (`react-jsx-global.d.ts` per package): React 19 moved the `JSX` namespace under `React.JSX`; several deps' published types (notably `@linaria/react`'s `styled.d.ts`, which types every `styled.x` via `keyof JSX.IntrinsicElements`) still reference the global namespace. Without the shim, every styled component degrades to `any` props. - **Ref nullability**: `useRef<T>(null)` now returns `RefObject<T | null>`; widened consumer prop/hook ref types accordingly (incl. the shared `useListenClickOutside`). - **react-datepicker v9**: `onChange`/`onSelect` accept `Date | null`, `calendarStartDay` typing, `ReactDatePickerProps`→`DatePickerProps`, relaxed the dynamic `selectsMultiple` discriminated union. - **react-data-grid beta.59**: `formatter`→`renderCell`, `editor`→`renderEditCell`, `headerRenderer`→`renderHeaderCell`, `components`→`renderers`, `onRowClick`→`onCellClick`, object-shaped `useRowSelection`, Set-based selection. - **dnd style cast**: `@radix-ui/react-popper` augments `CSSProperties` with a `--radix-*` index signature that dnd's closed `DraggingStyle` doesn't satisfy → cast at the spread. ## Status / testing - ✅ `typecheck` green: twenty-front, twenty-ui, twenty-ui-deprecated, twenty-front-component-renderer, twenty-server - ⏳ build / lint / unit tests / storybook+argos / runtime smoke-test in progress Draft until local + CI verification completes. Notable behavior to QA manually: spreadsheet import (data-grid), date pickers, drag-and-drop boards/lists, GraphQL playground, page titles/favicon. <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/21531?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. -->
236 lines
6.1 KiB
JSON
236 lines
6.1 KiB
JSON
{
|
|
"name": "twenty-ui",
|
|
"version": "0.1.0",
|
|
"description": "Twenty's shared React UI component library.",
|
|
"license": "AGPL-3.0",
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "https://github.com/twentyhq/twenty.git",
|
|
"directory": "packages/twenty-ui"
|
|
},
|
|
"homepage": "https://twenty.com",
|
|
"bugs": "https://github.com/twentyhq/twenty/issues",
|
|
"keywords": [
|
|
"twenty",
|
|
"ui",
|
|
"react",
|
|
"components",
|
|
"design-system"
|
|
],
|
|
"publishConfig": {
|
|
"access": "public"
|
|
},
|
|
"main": "dist/index.cjs",
|
|
"module": "dist/index.mjs",
|
|
"style": "./dist/style.css",
|
|
"type": "module",
|
|
"sideEffects": [
|
|
"**/*.css",
|
|
"**/*.scss"
|
|
],
|
|
"devDependencies": {
|
|
"@argos-ci/storybook": "^6.0.6",
|
|
"@prettier/sync": "^0.5.2",
|
|
"@size-limit/preset-small-lib": "^11.1.6",
|
|
"@storybook-community/storybook-addon-cookie": "^5.0.0",
|
|
"@storybook/addon-a11y": "^10.3.3",
|
|
"@storybook/addon-coverage": "^3.0.0",
|
|
"@storybook/addon-links": "^10.3.3",
|
|
"@storybook/addon-vitest": "^10.2.13",
|
|
"@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/jest": "^30.0.0",
|
|
"@types/react": "^19.2.0",
|
|
"@types/react-dom": "^19.2.0",
|
|
"@vitejs/plugin-react-swc": "^4.3.1",
|
|
"@vitest/browser-playwright": "^4.1.0",
|
|
"esbuild": "^0.28.1",
|
|
"jest": "29.7.0",
|
|
"jest-environment-jsdom": "30.0.0-beta.3",
|
|
"prettier": "^3.1.1",
|
|
"sass": "^1.83.0",
|
|
"sass-embedded": "^1.83.0",
|
|
"size-limit": "^11.1.6",
|
|
"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": "^4.5.4",
|
|
"vite-plugin-sass-dts": "^1.3.31",
|
|
"vite-plugin-svgr": "^4.3.0",
|
|
"vite-tsconfig-paths": "^4.2.1",
|
|
"vitest": "^4.1.0"
|
|
},
|
|
"dependencies": {
|
|
"@base-ui/react": "^1.5.0",
|
|
"@monaco-editor/react": "^4.7.0",
|
|
"@radix-ui/colors": "^3.0.0",
|
|
"@sniptt/guards": "^0.2.0",
|
|
"@tabler/icons-react": "^3.31.0",
|
|
"clsx": "^2.1.1",
|
|
"date-fns": "^2.30.0",
|
|
"framer-motion": "^11.18.0",
|
|
"glob": "^11.1.0",
|
|
"jotai": "^2.17.1",
|
|
"react": "^19.2.0",
|
|
"react-dom": "^19.2.0",
|
|
"react-responsive": "^9.0.2",
|
|
"react-router-dom": "^6.4.4",
|
|
"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",
|
|
"styles",
|
|
"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"
|
|
},
|
|
"./styles": {
|
|
"types": "./dist/styles/index.d.ts",
|
|
"import": "./dist/styles.mjs",
|
|
"require": "./dist/styles.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"
|
|
],
|
|
"styles": [
|
|
"dist/styles/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"
|
|
]
|
|
}
|
|
}
|
|
}
|