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. -->
41 lines
2.0 KiB
TypeScript
41 lines
2.0 KiB
TypeScript
/*
|
|
* _____ _
|
|
*|_ _|_ _____ _ __ | |_ _ _
|
|
* | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
|
|
* | | \ V V / __/ | | | |_| |_| | Any edits to this will be overridden
|
|
* |_| \_/\_/ \___|_| |_|\__|\__, |
|
|
* |___/
|
|
*/
|
|
|
|
export type { AnimatedPlaceholderType } from './AnimatedPlaceholder/AnimatedPlaceholder';
|
|
export { AnimatedPlaceholder } from './AnimatedPlaceholder/AnimatedPlaceholder';
|
|
export { BACKGROUND } from './AnimatedPlaceholder/constants/Background';
|
|
export { DARK_BACKGROUND } from './AnimatedPlaceholder/constants/DarkBackground';
|
|
export { DARK_MOVING_IMAGE } from './AnimatedPlaceholder/constants/DarkMovingImage';
|
|
export { MOVING_IMAGE } from './AnimatedPlaceholder/constants/MovingImage';
|
|
export type { BannerColor, BannerVariant } from './Banner/Banner';
|
|
export { Banner } from './Banner/Banner';
|
|
export type { CalloutVariant, CalloutProps } from './Callout/Callout';
|
|
export { Callout } from './Callout/Callout';
|
|
export { CircularProgressBar } from './CircularProgressBar/CircularProgressBar';
|
|
export {
|
|
AnimatedPlaceholderEmptyContainer,
|
|
AnimatedPlaceholderEmptyTextContainer,
|
|
AnimatedPlaceholderEmptyTitle,
|
|
AnimatedPlaceholderEmptySubTitle,
|
|
} from './EmptyPlaceholderStyled/EmptyPlaceholderStyled';
|
|
export {
|
|
AnimatedPlaceholderErrorContainer,
|
|
AnimatedPlaceholderErrorTextContainer,
|
|
AnimatedPlaceholderErrorTitle,
|
|
AnimatedPlaceholderErrorSubTitle,
|
|
} from './ErrorPlaceholderStyled/ErrorPlaceholderStyled';
|
|
export type { InfoAccent, InfoProps } from './Info/Info';
|
|
export { Info } from './Info/Info';
|
|
export { InlineBanner } from './InlineBanner/InlineBanner';
|
|
export { Loader } from './Loader/Loader';
|
|
export type { ProgressBarProps } from './ProgressBar/ProgressBar';
|
|
export { ProgressBar } from './ProgressBar/ProgressBar';
|
|
export type { SidePanelInformationBannerProps } from './SidePanelInformationBanner/SidePanelInformationBanner';
|
|
export { SidePanelInformationBanner } from './SidePanelInformationBanner/SidePanelInformationBanner';
|