Migrate to twenty-ui - utilities/animation (#7951)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7538](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7538).

 --- 

### Description

- Move animation components to `twenty-ui`    \
  \
  \
  Fixes  #7538

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
-
-import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
+import { AnimatedEaseInOut } from 'twenty-ui';
 
 const StyledThreadMessageBody = styled(motion.div)`
   color: ${({ theme }) => theme.font.color.primary};

packages/twenty-front/src/modules/auth/components/Title.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import styled from '@emotion/styled';
-
-import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
+import React from 'react';
+import { AnimatedEaseIn } from 'twenty-ui';
 
 type TitleProps = React.PropsWithChildren & {
   animate?: boolean;

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx

@@ -20,7 +20,6 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
 import { RecordBoardScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
@@ -28,7 +27,12 @@ import styled from '@emotion/styled';
 import { ReactNode, useContext, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { AvatarChipVariant, IconEye, IconEyeOff } from 'twenty-ui';
+import {
+  AnimatedEaseInOut,
+  AvatarChipVariant,
+  IconEye,
+  IconEyeOff,
+} from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 import { useAddNewCard } from '../../record-board-column/hooks/useAddNewCard';
 

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { AnimatedContainer, IconComponent } from 'twenty-ui';
 
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
-import { AnimatedContainer } from '@/ui/utilities/animation/components/AnimatedContainer';
 
 const StyledInlineCellButtonContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useCallback, useContext } from 'react';
 import {
+  AnimatedEaseInOut,
   IconChevronDown,
   IconComponent,
   IconDotsVertical,
@@ -38,7 +39,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
 const StyledListItem = styled(RecordDetailRecordsListItem)<{

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { AnimatedContainer, IconComponent } from 'twenty-ui';
 
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
-import { AnimatedContainer } from '@/ui/utilities/animation/components/AnimatedContainer';
 
 const StyledButtonContainer = styled.div`
   margin: ${({ theme }) => theme.spacing(1)};

packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
 import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
-import { Chip, ChipVariant } from 'twenty-ui';
+import { AnimatedContainer, Chip, ChipVariant } from 'twenty-ui';
 
 import { ExpandedListDropdown } from '@/ui/layout/expandable-list/components/ExpandedListDropdown';
 import { isFirstOverflowingChildElement } from '@/ui/layout/expandable-list/utils/isFirstOverflowingChildElement';
-import { AnimatedContainer } from '@/ui/utilities/animation/components/AnimatedContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/pages/auth/Invite.tsx

@@ -12,13 +12,13 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { Loader } from '@/ui/feedback/loader/components/Loader';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { useWorkspaceSwitching } from '@/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching';
-import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
+import { useSearchParams } from 'react-router-dom';
+import { AnimatedEaseIn } from 'twenty-ui';
 import {
-  useAddUserToWorkspaceMutation,
   useAddUserToWorkspaceByInviteTokenMutation,
+  useAddUserToWorkspaceMutation,
 } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
-import { useSearchParams } from 'react-router-dom';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/pages/auth/PasswordReset.tsx

@@ -23,7 +23,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
-import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
+import { AnimatedEaseIn } from 'twenty-ui';
 import {
   useUpdatePasswordViaResetTokenMutation,
   useValidatePasswordResetTokenQuery,

packages/twenty-front/src/pages/auth/SignInUp.tsx

@@ -7,7 +7,7 @@ import { SignInUpForm } from '@/auth/sign-in-up/components/SignInUpForm';
 import { SignInUpMode, useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
 import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
+import { AnimatedEaseIn } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 import { SignInUpStep } from '@/auth/states/signInUpStepState';
 import { IconLockCustom } from '@ui/display/icon/components/IconLock';

packages/twenty-front/src/pages/onboarding/InviteTeam.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-hook-form';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { IconCopy } from 'twenty-ui';
+import { ActionLink, AnimatedTranslation, IconCopy } from 'twenty-ui';
 import { z } from 'zod';
 
 import { SubTitle } from '@/auth/components/SubTitle';
@@ -25,8 +25,6 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { LightButton } from '@/ui/input/button/components/LightButton';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
-import { ActionLink } from '@/ui/navigation/link/components/ActionLink';
-import { AnimatedTranslation } from '@/ui/utilities/animation/components/AnimatedTranslation';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { OnboardingStatus } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';

packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx

@@ -1,14 +1,13 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconCheck, RGBA, UndecoratedLink } from 'twenty-ui';
+import { AnimatedEaseIn, IconCheck, RGBA, UndecoratedLink } from 'twenty-ui';
 
 import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { AppPath } from '@/types/AppPath';
 import { MainButton } from '@/ui/input/button/components/MainButton';
-import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
 import { OnboardingStatus } from '~/generated/graphql';
 
 const StyledCheckContainer = styled.div`

packages/twenty-ui/src/utilities/animation/components/AnimatedEaseIn.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
+import { AnimationDuration } from '@ui/theme';
 import { motion } from 'framer-motion';
-import { AnimationDuration } from 'twenty-ui';
 
 type AnimatedEaseInProps = Omit<
   React.ComponentProps<typeof motion.div>,

packages/twenty-ui/src/utilities/animation/components/AnimatedEaseInOut.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
+import { AnimationDuration } from '@ui/theme';
 import { AnimatePresence, motion } from 'framer-motion';
-import { AnimationDuration } from 'twenty-ui';
 
 type AnimatedEaseInOutProps = {
   isOpen: boolean;

packages/twenty-ui/src/utilities/animation/components/AnimatedFadeOut.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
+import { AnimationDuration } from '@ui/theme';
 import { AnimatePresence, motion } from 'framer-motion';
-import { AnimationDuration } from 'twenty-ui';
 
 type AnimatedFadeOutProps = {
   isOpen: boolean;

packages/twenty-ui/src/utilities/animation/index.ts

@@ -0,0 +1,6 @@
+export * from './components/AnimatedContainer';
+export * from './components/AnimatedEaseIn';
+export * from './components/AnimatedEaseInOut';
+export * from './components/AnimatedFadeOut';
+export * from './components/AnimatedTextWord';
+export * from './components/AnimatedTranslation';

packages/twenty-ui/src/utilities/index.ts

@@ -1,3 +1,9 @@
+export * from './animation/components/AnimatedContainer';
+export * from './animation/components/AnimatedEaseIn';
+export * from './animation/components/AnimatedEaseInOut';
+export * from './animation/components/AnimatedFadeOut';
+export * from './animation/components/AnimatedTextWord';
+export * from './animation/components/AnimatedTranslation';
 export * from './color/utils/stringToHslColor';
 export * from './getDisplayValueByUrlType';
 export * from './image/getImageAbsoluteURI';