Migrate to twenty-ui - layout/animated-placeholder (#7794)

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

 --- 

### Description

- Migrate the `animated-placeholder` to `twenty-ui` and update all
imports.\
  \
  Fixes twentyhq/private-issues#87

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/calendar/components/Calendar.tsx

@@ -1,6 +1,14 @@
 import styled from '@emotion/styled';
 import { format, getYear } from 'date-fns';
-import { H3Title } from 'twenty-ui';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+  H3Title,
+} from 'twenty-ui';
 
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE } from '@/activities/calendar/constants/Calendar';
@@ -13,14 +21,6 @@ import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
 import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
-import {
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 import { Section } from '@/ui/layout/section/components/Section';
 import { TimelineCalendarEventsWithTotal } from '~/generated/graphql';
 

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

@@ -1,10 +1,10 @@
 import { Loader } from '@/ui/feedback/loader/components/Loader';
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
 import {
+  AnimatedPlaceholder,
   AnimatedPlaceholderEmptyContainer,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
+} from 'twenty-ui';
 
 export const EmailLoader = ({ loadingText }: { loadingText?: string }) => (
   <AnimatedPlaceholderEmptyContainer>

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

@@ -1,5 +1,14 @@
 import styled from '@emotion/styled';
-import { H1Title, H1TitleFontColor } from 'twenty-ui';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+  H1Title,
+  H1TitleFontColor,
+} from 'twenty-ui';
 
 import { ActivityList } from '@/activities/components/ActivityList';
 import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
@@ -11,14 +20,6 @@ import { getTimelineThreadsFromPersonId } from '@/activities/emails/graphql/quer
 import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
-import {
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 import { Section } from '@/ui/layout/section/components/Section';
 import { TimelineThread, TimelineThreadsWithTotal } from '~/generated/graphql';
 

packages/twenty-front/src/modules/activities/files/components/Attachments.tsx

@@ -1,6 +1,14 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, useRef, useState } from 'react';
-import { IconPlus } from 'twenty-ui';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+  IconPlus,
+} from 'twenty-ui';
 
 import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
 import { AttachmentList } from '@/activities/files/components/AttachmentList';
@@ -9,14 +17,6 @@ import { useAttachments } from '@/activities/files/hooks/useAttachments';
 import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { Button } from '@/ui/input/button/components/Button';
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
-import {
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 import { isDefined } from '~/utils/isDefined';
 
 const StyledAttachmentsContainer = styled.div`

packages/twenty-front/src/modules/activities/notes/components/Notes.tsx

@@ -1,5 +1,13 @@
 import styled from '@emotion/styled';
-import { IconPlus } from 'twenty-ui';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+  IconPlus,
+} from 'twenty-ui';
 
 import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
@@ -8,14 +16,6 @@ import { useNotes } from '@/activities/notes/hooks/useNotes';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { Button } from '@/ui/input/button/components/Button';
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
-import {
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 
 const StyledNotesContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -1,6 +1,14 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconPlus } from 'twenty-ui';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+  IconPlus,
+} from 'twenty-ui';
 
 import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
@@ -8,14 +16,6 @@ import { TASKS_TAB_LIST_COMPONENT_ID } from '@/activities/tasks/constants/TasksT
 import { useTasks } from '@/activities/tasks/hooks/useTasks';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { Button } from '@/ui/input/button/components/Button';
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
-import {
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 
 import { Task } from '@/activities/types/Task';

packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx

@@ -6,15 +6,15 @@ import { EventList } from '@/activities/timeline-activities/components/EventList
 import { TimelineCreateButtonGroup } from '@/activities/timeline-activities/components/TimelineCreateButtonGroup';
 import { useTimelineActivities } from '@/activities/timeline-activities/hooks/useTimelineActivities';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import {
+  AnimatedPlaceholder,
   AnimatedPlaceholderEmptyContainer,
   AnimatedPlaceholderEmptySubTitle,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
+} from 'twenty-ui';
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 const StyledMainContainer = styled.div`
   align-items: flex-start;

packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx

@@ -1,18 +1,19 @@
+import { ThemeProvider, useTheme } from '@emotion/react';
+import isEmpty from 'lodash.isempty';
 import { useEffect, useState } from 'react';
 import { FallbackProps } from 'react-error-boundary';
 import { useLocation } from 'react-router-dom';
-import { ThemeProvider, useTheme } from '@emotion/react';
-import isEmpty from 'lodash.isempty';
-import { IconRefresh, THEME_LIGHT } from 'twenty-ui';
-
-import { Button } from '@/ui/input/button/components/Button';
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
 import {
+  AnimatedPlaceholder,
   AnimatedPlaceholderEmptyContainer,
   AnimatedPlaceholderEmptySubTitle,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
+  IconRefresh,
+  THEME_LIGHT,
+} from 'twenty-ui';
+
+import { Button } from '@/ui/input/button/components/Button';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 type GenericErrorFallbackProps = FallbackProps;

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx

@@ -1,18 +1,16 @@
-import AnimatedPlaceholder, {
-  AnimatedPlaceholderType,
-} from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
-import {
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
-
 import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { Button } from '@/ui/input/button/components/Button';
 import { useContext } from 'react';
-import { IconComponent } from 'twenty-ui';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  AnimatedPlaceholderType,
+  IconComponent,
+} from 'twenty-ui';
 
 type RecordTableEmptyStateDisplayProps = {
   animatedPlaceholderType: AnimatedPlaceholderType;

packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty.tsx

@@ -1,16 +1,16 @@
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
+import { Button } from '@/ui/input/button/components/Button';
+import styled from '@emotion/styled';
 import {
+  AnimatedPlaceholder,
   AnimatedPlaceholderEmptyContainer,
   AnimatedPlaceholderEmptySubTitle,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
+  IconPlus,
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
+} from 'twenty-ui';
-import { IconPlus } from 'twenty-ui';
-import { Button } from '@/ui/input/button/components/Button';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
-import { SettingsPath } from '@/types/SettingsPath';
-import styled from '@emotion/styled';
 
 const StyledEmptyFunctionsContainer = styled.div`
   height: 60vh;

packages/twenty-front/src/pages/not-found/NotFound.tsx

@@ -3,15 +3,15 @@ import styled from '@emotion/styled';
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
 import { AppPath } from '@/types/AppPath';
 import { MainButton } from '@/ui/input/button/components/MainButton';
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
-import { AnimatedPlaceholderEmptyTextContainer } from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
+import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
 import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderErrorContainer,
   AnimatedPlaceholderErrorSubTitle,
   AnimatedPlaceholderErrorTitle,
-} from '@/ui/layout/animated-placeholder/components/ErrorPlaceholderStyled';
+} from 'twenty-ui';
-import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
-import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
 
 const StyledBackDrop = styled.div`
   align-items: center;

packages/twenty-ui/src/layout/animated-placeholder/components/AnimatedPlaceholder.tsx

@@ -1,13 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { BACKGROUND } from '@ui/layout/animated-placeholder/constants/Background';
+import { DARK_BACKGROUND } from '@ui/layout/animated-placeholder/constants/DarkBackground';
+import { DARK_MOVING_IMAGE } from '@ui/layout/animated-placeholder/constants/DarkMovingImage';
+import { MOVING_IMAGE } from '@ui/layout/animated-placeholder/constants/MovingImage';
 import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
 import { useEffect } from 'react';
 
-import { BACKGROUND } from '@/ui/layout/animated-placeholder/constants/Background';
-import { DARK_BACKGROUND } from '@/ui/layout/animated-placeholder/constants/DarkBackground';
-import { DARK_MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/DarkMovingImage';
-import { MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/MovingImage';
-
 const StyledContainer = styled.div`
   display: flex;
   align-items: center;
@@ -43,7 +42,7 @@ interface AnimatedPlaceholderProps {
   type: AnimatedPlaceholderType;
 }
 
-const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
+export const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
   const theme = useTheme();
 
   const x = useMotionValue(window.innerWidth / 2);
@@ -106,5 +105,3 @@ const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
     </StyledContainer>
   );
 };
-
-export default AnimatedPlaceholder;

packages/twenty-ui/src/layout/animated-placeholder/index.ts

@@ -0,0 +1,7 @@
+export * from './components/AnimatedPlaceholder';
+export * from './components/EmptyPlaceholderStyled';
+export * from './components/ErrorPlaceholderStyled';
+export * from './constants/Background';
+export * from './constants/DarkBackground';
+export * from './constants/DarkMovingImage';
+export * from './constants/MovingImage';

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

@@ -1 +1,8 @@
+export * from './animated-placeholder/components/AnimatedPlaceholder';
+export * from './animated-placeholder/components/EmptyPlaceholderStyled';
+export * from './animated-placeholder/components/ErrorPlaceholderStyled';
+export * from './animated-placeholder/constants/Background';
+export * from './animated-placeholder/constants/DarkBackground';
+export * from './animated-placeholder/constants/DarkMovingImage';
+export * from './animated-placeholder/constants/MovingImage';
 export * from './expandableContainer/components/ExpandableContainer';