Raphaël Bosi
766d90af7e
## What Removes the `framer-motion` dependency from `twenty-ui` and replaces every usage with pure CSS animations, reaching for Base UI primitives where one fits: - **Collapse/expand** (`AnimatedEaseInOut`, `AnimatedExpandableContainer`): rebuilt on Base UI `Collapsible` (CSS-animated `--collapsible-panel-height/width` + transition states). Public props unchanged, so the ~28 call sites are untouched. - **ProgressBar**: rebuilt on Base UI `Progress` (proper `role`/`aria-valuenow`). The snackbar auto-dismiss countdown now uses a CSS keyframe + `animation-play-state` (pause on hover), removing a per-frame React re-render; `useProgressAnimation` is deleted. - The remaining `Animated*` components, the circular spinner, checkmark, and the placeholder pointer parallax move to plain CSS (SCSS modules + the `duration()` helper + theme tokens). - Deletes 3 unused components (`AnimatedTranslation`, `AnimatedTextWord`, `AnimatedFadeOut`). ## Why `twenty-ui` is a publicly published library with a size budget, so dropping framer-motion shrinks what consumers ship. `twenty-front` keeps its own framer-motion; that is out of scope here. ## Notes for reviewers - A few `twenty-ui` components received framer props from `twenty-front` call sites; those were migrated (e.g. `AnimatedLightIconButton` gained a CSS `rotate` prop, and the `EMPTY_PLACEHOLDER_TRANSITION_PROPS` spreads were removed). - Behavior change: Base UI `Collapsible` animates only on open/close transitions, so the old "animate in on first mount while already open" case no longer plays (the `initial` prop is kept for API compatibility). <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22021?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. -->
255 lines
6.5 KiB
JSON
255 lines
6.5 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": "^12.1.0",
|
|
"@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",
|
|
"glob": "^11.1.0",
|
|
"jest": "29.7.0",
|
|
"jest-environment-jsdom": "30.0.0-beta.3",
|
|
"prettier": "^3.1.1",
|
|
"react": "^19.2.0",
|
|
"react-dom": "^19.2.0",
|
|
"sass": "^1.83.0",
|
|
"sass-embedded": "^1.83.0",
|
|
"size-limit": "^12.1.0",
|
|
"slash": "^5.1.0",
|
|
"storybook-addon-pseudo-states": "^10.3.3",
|
|
"ts-jest": "^29.1.1",
|
|
"tsx": "^4.19.3",
|
|
"typescript": "^5.9.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",
|
|
"react-responsive": "^9.0.2",
|
|
"react-router-dom": "^6.4.4",
|
|
"type-fest": "^4.10.1",
|
|
"zod": "^4.1.11"
|
|
},
|
|
"peerDependencies": {
|
|
"monaco-editor": ">= 0.25.0 < 1",
|
|
"react": "^19.0.0",
|
|
"react-dom": "^19.0.0"
|
|
},
|
|
"scripts": {
|
|
"build": "npx vite build"
|
|
},
|
|
"files": [
|
|
"dist",
|
|
"accessibility",
|
|
"assets",
|
|
"data-display",
|
|
"feedback",
|
|
"icon",
|
|
"input",
|
|
"json-visualizer",
|
|
"layout",
|
|
"navigation",
|
|
"styles",
|
|
"surfaces",
|
|
"testing",
|
|
"theme",
|
|
"theme-constants",
|
|
"typography",
|
|
"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"
|
|
},
|
|
"./data-display": {
|
|
"types": "./dist/data-display/index.d.ts",
|
|
"import": "./dist/data-display.mjs",
|
|
"require": "./dist/data-display.cjs"
|
|
},
|
|
"./feedback": {
|
|
"types": "./dist/feedback/index.d.ts",
|
|
"import": "./dist/feedback.mjs",
|
|
"require": "./dist/feedback.cjs"
|
|
},
|
|
"./icon": {
|
|
"types": "./dist/icon/index.d.ts",
|
|
"import": "./dist/icon.mjs",
|
|
"require": "./dist/icon.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"
|
|
},
|
|
"./surfaces": {
|
|
"types": "./dist/surfaces/index.d.ts",
|
|
"import": "./dist/surfaces.mjs",
|
|
"require": "./dist/surfaces.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"
|
|
},
|
|
"./typography": {
|
|
"types": "./dist/typography/index.d.ts",
|
|
"import": "./dist/typography.mjs",
|
|
"require": "./dist/typography.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"
|
|
],
|
|
"data-display": [
|
|
"dist/data-display/index.d.ts"
|
|
],
|
|
"feedback": [
|
|
"dist/feedback/index.d.ts"
|
|
],
|
|
"icon": [
|
|
"dist/icon/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"
|
|
],
|
|
"surfaces": [
|
|
"dist/surfaces/index.d.ts"
|
|
],
|
|
"testing": [
|
|
"dist/testing/index.d.ts"
|
|
],
|
|
"theme": [
|
|
"dist/theme/index.d.ts"
|
|
],
|
|
"theme-constants": [
|
|
"dist/theme-constants/index.d.ts"
|
|
],
|
|
"typography": [
|
|
"dist/typography/index.d.ts"
|
|
],
|
|
"utilities": [
|
|
"dist/utilities/index.d.ts"
|
|
]
|
|
}
|
|
}
|
|
}
|