Migrate to twenty-ui - layout/card (#8003)

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

 --- 

### Description

Migrate:

- Card
- CardContent
- CardFooter
- CardHeader

### Demo

Card in Storybook


![](https://assets-service.gitstart.com/4814/d6759b99-7d5f-4177-acdf-1c57786330a3.png)

###### Fixes twentyhq/private-issues#86

---------

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/CalendarDayCardContent.tsx

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

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

@@ -9,6 +9,8 @@ import {
   IconArrowRight,
   IconLock,
   isDefined,
+  Card,
+  CardContent,
 } from 'twenty-ui';
 
 import { CalendarCurrentEventCursor } from '@/activities/calendar/components/CalendarCurrentEventCursor';
@@ -18,8 +20,6 @@ import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendar
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import {
   CalendarChannelVisibility,
   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 '@/ui/layout/card/components/Card';
+import { Card } from 'twenty-ui';
 
 type CalendarMonthCardProps = {
   dayTimes: number[];

packages/twenty-front/src/modules/activities/components/ActivityList.tsx

@@ -1,5 +1,5 @@
-import { Card } from '@/ui/layout/card/components/Card';
 import styled from '@emotion/styled';
+import { Card } from 'twenty-ui';
 
 const StyledList = styled(Card)`
   & > :not(:last-child) {

packages/twenty-front/src/modules/activities/components/ActivityRow.tsx

@@ -1,5 +1,5 @@
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import styled from '@emotion/styled';
+import { CardContent } from 'twenty-ui';
 import React from 'react';
 
 const StyledRowContent = styled(CardContent)<{

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card } from 'twenty-ui';
 
 type EventCardProps = {
   children: React.ReactNode;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx

@@ -3,10 +3,9 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
-import { Card } from '@/ui/layout/card/components/Card';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
-import { H2Title, Toggle } from 'twenty-ui';
+import { H2Title, Toggle, Card } from 'twenty-ui';
 import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
 
 const StyledDetailsContainer = styled.div`

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx

@@ -1,10 +1,7 @@
 import styled from '@emotion/styled';
-import { Button, IconGoogle } from 'twenty-ui';
+import { Button, Card, CardContent, CardHeader, IconGoogle } from 'twenty-ui';
 
 import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { CardHeader } from '@/ui/layout/card/components/CardHeader';
 
 const StyledHeader = styled(CardHeader)`
   align-items: center;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { H2Title, Toggle } from 'twenty-ui';
+import { H2Title, Toggle, Card } from 'twenty-ui';
 
 import {
   MessageChannel,
@@ -10,7 +10,6 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard';
 import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
-import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
 import { MessageChannelVisibility } from '~/generated-metadata/graphql';
 

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx

@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
 import { Radio } from '@/ui/input/components/Radio';
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card, CardContent } from 'twenty-ui';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 
 type SettingsAccountsRadioSettingsCardProps<Option extends { value: string }> =
   {

packages/twenty-front/src/modules/settings/components/SettingsCard.tsx

@@ -1,9 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconChevronRight, Pill } from 'twenty-ui';
+import { IconChevronRight, Pill, Card, CardContent } from 'twenty-ui';
 
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { ReactNode } from 'react';
 
 type SettingsCardProps = {

packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx

@@ -1,11 +1,9 @@
-import { ComponentType } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent, IconPlus } from 'twenty-ui';
+import { ComponentType } from 'react';
+import { IconComponent, IconPlus, Card, CardFooter } from 'twenty-ui';
 
 import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 
 import { SettingsListItemCardContent } from './SettingsListItemCardContent';
 

packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx

@@ -1,9 +1,7 @@
-import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { ReactNode } from 'react';
-
+import { IconComponent, CardContent } from 'twenty-ui';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 
 const StyledRow = styled(CardContent)`
   align-items: center;

packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card } from 'twenty-ui';
 
 const StyledCard = styled(Card)`
   background-color: ${({ theme }) => theme.background.secondary};

packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { useTheme } from '@emotion/react';
 
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { IconComponent, CardContent } from 'twenty-ui';
-import { IconComponent } from 'twenty-ui';
 import { ReactNode } from 'react';
 
 type SettingsOptionCardContentProps = {

packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { Radio } from '@/ui/input/components/Radio';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { IconComponent, CardContent } from 'twenty-ui';
-import { IconComponent } from 'twenty-ui';
 import { useTheme } from '@emotion/react';
 
 const StyledRadioCardContent = styled(CardContent)`

packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx

@@ -1,8 +1,7 @@
-import { ReactNode } from 'react';
 import styled from '@emotion/styled';
+import { ReactNode } from 'react';
 
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card, CardContent } from 'twenty-ui';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 
 type SettingsSummaryCardProps = {
   title: ReactNode;

packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx

@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
 import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card, CardContent } from 'twenty-ui';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 
 type SettingsDataModelPreviewFormCardProps = {
   className?: string;

packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx

@@ -1,12 +1,11 @@
-import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
-import { IconCheck, IconX } from 'twenty-ui';
+import { Controller, useFormContext } from 'react-hook-form';
+import { IconCheck, IconX, CardContent } from 'twenty-ui';
 import { z } from 'zod';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/fields/forms/boolean/hooks/useBooleanSettingsFormInitialValues';
 import { Select } from '@/ui/input/components/Select';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { isDefined } from '~/utils/isDefined';
 
 export const settingsDataModelFieldBooleanFormSchema = z.object({

packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx

@@ -6,7 +6,7 @@ import { currencyFieldDefaultValueSchema } from '@/object-record/record-field/va
 import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
 import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
 import { Select } from '@/ui/input/components/Select';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { CardContent } from 'twenty-ui';
 import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
 
 export const settingsDataModelFieldCurrencyFormSchema = z.object({

packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx

@@ -5,8 +5,7 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
 import { SettingsDataModelFieldToggle } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle';
 import { useDateSettingsFormInitialValues } from '@/settings/data-model/fields/forms/date/hooks/useDateSettingsFormInitialValues';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { IconClockShare, CardContent } from 'twenty-ui';
-import { IconClockShare } from 'twenty-ui';
 
 export const settingsDataModelFieldDateFormSchema = z.object({
   settings: z

packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx

@@ -4,7 +4,7 @@ import { z } from 'zod';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { numberFieldDefaultValueSchema } from '@/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema';
 import { SettingsDataModelFieldNumberDecimalsInput } from '@/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberDecimalInput';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { CardContent } from 'twenty-ui';
 import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/number';
 
 export const settingsDataModelFieldNumberFormSchema = z.object({

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx

@@ -1,7 +1,14 @@
 import styled from '@emotion/styled';
 import { DropResult } from '@hello-pangea/dnd';
 import { Controller, useFormContext } from 'react-hook-form';
-import { IconPlus, IconTool, LightButton, MAIN_COLORS } from 'twenty-ui';
+import {
+  CardContent,
+  CardFooter,
+  IconPlus,
+  IconTool,
+  LightButton,
+  MAIN_COLORS,
+} from 'twenty-ui';
 import { z } from 'zod';
 
 import {
@@ -14,8 +21,6 @@ import { selectFieldDefaultValueSchema } from '@/object-record/record-field/vali
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
 import { generateNewSelectOption } from '@/settings/data-model/fields/forms/select/utils/generateNewSelectOption';
 import { isSelectOptionDefaultValue } from '@/settings/data-model/utils/isSelectOptionDefaultValue';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx

@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 
 import {
-  SettingsDataModelFieldPreview,
+  // eslint-disable-next-line prettier/prettier
+    SettingsDataModelFieldPreview,
   SettingsDataModelFieldPreviewProps,
 } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview';
 import { SettingsDataModelObjectSummary } from '@/settings/data-model/objects/components/SettingsDataModelObjectSummary';
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card, CardContent } from 'twenty-ui';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 
 export type SettingsDataModelFieldPreviewCardProps =
   SettingsDataModelFieldPreviewProps & {

packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
-import { FloatingButton, IconEye } from 'twenty-ui';
+import { Card, FloatingButton, IconEye } from 'twenty-ui';
-
-import { Card } from '@/ui/layout/card/components/Card';
 
 import { SettingsPath } from '@/types/SettingsPath';
 import DarkCoverImage from '../../assets/cover-dark.png';

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx

@@ -11,8 +11,7 @@ import {
   SettingsDataModelObjectIdentifiersForm,
   SettingsDataModelObjectIdentifiersFormValues,
 } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card, CardContent } from 'twenty-ui';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 
 type SettingsDataModelObjectSettingsFormCardProps = {
   objectMetadataItem: ObjectMetadataItem;

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card, CardContent } from 'twenty-ui';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 
 import PreviewBackgroundImage from '../assets/preview-background.svg';
 import SyncImage from '../assets/sync.svg?react';

packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListEmptyStateCard.tsx

@@ -2,11 +2,8 @@
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { CardHeader } from '@/ui/layout/card/components/CardHeader';
 import styled from '@emotion/styled';
-import { Button, IconKey } from 'twenty-ui';
+import { Button, Card, CardContent, CardHeader, IconKey } from 'twenty-ui';
 
 const StyledHeader = styled(CardHeader)`
   align-items: center;

packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx

@@ -2,10 +2,9 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Card } from '@/ui/layout/card/components/Card';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
-import { IconLink, Toggle } from 'twenty-ui';
+import { IconLink, Toggle, Card } from 'twenty-ui';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
 const StyledToggle = styled(Toggle)`

packages/twenty-ui/src/layout/card/components/__stories__/Card.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
+import { ComponentDecorator } from '@ui/testing';
 
 import { Card } from '../Card';
 import { CardContent } from '../CardContent';

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

@@ -5,4 +5,8 @@ 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 './card/components/Card';
+export * from './card/components/CardContent';
+export * from './card/components/CardFooter';
+export * from './card/components/CardHeader';
 export * from './expandableContainer/components/ExpandableContainer';