[REFACTOR] Twenty UI multi barrel (#11301)

# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203

packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx

@@ -1,15 +1,5 @@
 import styled from '@emotion/styled';
 import { format, getYear } from 'date-fns';
-import {
-  AnimatedPlaceholder,
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-  H3Title,
-  Section,
-} from 'twenty-ui';
 
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE } from '@/activities/calendar/constants/Calendar';
@@ -23,6 +13,16 @@ import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { TimelineCalendarEventsWithTotal } from '~/generated/graphql';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+  Section,
+} from 'twenty-ui/layout';
+import { H3Title } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   box-sizing: border-box;

packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx

@@ -4,8 +4,8 @@ import { differenceInSeconds, endOfDay, format } from 'date-fns';
 
 import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
-import { CardContent } from 'twenty-ui';
 import { TimelineCalendarEvent } from '~/generated/graphql';
+import { CardContent } from 'twenty-ui/layout';
 
 type CalendarDayCardContentProps = {
   calendarEvents: TimelineCalendarEvent[];

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx

@@ -1,12 +1,5 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import {
-  Chip,
-  ChipAccent,
-  ChipSize,
-  ChipVariant,
-  IconCalendarEvent,
-} from 'twenty-ui';
 
 import { CalendarEventParticipantsResponseStatus } from '@/activities/calendar/components/CalendarEventParticipantsResponseStatus';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
@@ -20,6 +13,8 @@ import { PropertyBox } from '@/object-record/record-inline-cell/property-box/com
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
 import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
+import { Chip, ChipAccent, ChipSize, ChipVariant } from 'twenty-ui/components';
+import { IconCalendarEvent } from 'twenty-ui/display';
 
 type CalendarEventDetailsProps = {
   calendarEvent: CalendarEvent;

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx

@@ -1,13 +1,13 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRef } from 'react';
-import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui';
 
 import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant';
 import { ParticipantChip } from '@/activities/components/ParticipantChip';
 import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
+import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui/display';
 
 const StyledInlineCellBaseContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx

@@ -11,19 +11,18 @@ import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalend
 import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useOpenCalendarEventInCommandMenu } from '@/command-menu/hooks/useOpenCalendarEventInCommandMenu';
-import {
-  Avatar,
-  AvatarGroup,
-  Card,
-  CardContent,
-  IconArrowRight,
-  IconLock,
-} from 'twenty-ui';
 import {
   CalendarChannelVisibility,
   TimelineCalendarEvent,
 } from '~/generated-metadata/graphql';
 import { isDefined } from 'twenty-shared/utils';
+import {
+  Avatar,
+  AvatarGroup,
+  IconArrowRight,
+  IconLock,
+} from 'twenty-ui/display';
+import { Card, CardContent } from 'twenty-ui/layout';
 
 type CalendarEventRowProps = {
   calendarEvent: TimelineCalendarEvent;

packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import { CalendarDayCardContent } from '@/activities/calendar/components/CalendarDayCardContent';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
-import { Card } from 'twenty-ui';
+import { Card } from 'twenty-ui/layout';
 
 type CalendarMonthCardProps = {
   dayTimes: number[];

packages/twenty-front/src/modules/activities/calendar/components/__stories__/Calendar.stories.tsx

@@ -1,7 +1,6 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { HttpResponse, graphql } from 'msw';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { Calendar } from '@/activities/calendar/components/Calendar';
 import { getTimelineCalendarEventsFromCompanyId } from '@/activities/calendar/graphql/queries/getTimelineCalendarEventsFromCompanyId';
@@ -9,6 +8,7 @@ import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadat
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedTimelineCalendarEvents } from '~/testing/mock-data/timeline-calendar-events';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof Calendar> = {
   title: 'Modules/Activities/Calendar/Calendar',