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-ui/src/layout/card/components/Card.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+const StyledCard = styled.div<{ fullWidth?: boolean; rounded?: boolean }>`
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme, rounded }) =>
+    rounded ? theme.border.radius.md : theme.border.radius.sm};
+  color: ${({ theme }) => theme.font.color.secondary};
+  overflow: hidden;
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+`;
+
+export { StyledCard as Card };

packages/twenty-ui/src/layout/card/components/CardContent.tsx

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+const StyledCardContent = styled(motion.div)<{ divider?: boolean }>`
+  background-color: ${({ theme }) => theme.background.secondary};
+  padding: ${({ theme }) => theme.spacing(4)};
+
+  ${({ divider, theme }) =>
+    divider
+      ? css`
+          border-bottom: 1px solid ${theme.border.color.medium};
+        `
+      : ''}
+`;
+
+export { StyledCardContent as CardContent };

packages/twenty-ui/src/layout/card/components/CardFooter.tsx

@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const StyledCardFooter = styled.div<{ divider?: boolean }>`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-top: ${({ divider = true, theme }) =>
+    divider ? css`1px solid ${theme.border.color.medium}` : 0};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+export { StyledCardFooter as CardFooter };

packages/twenty-ui/src/layout/card/components/CardHeader.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+const StyledCardHeader = styled.div`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+export { StyledCardHeader as CardHeader };

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

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from '@ui/testing';
+
+import { Card } from '../Card';
+import { CardContent } from '../CardContent';
+import { CardFooter } from '../CardFooter';
+import { CardHeader } from '../CardHeader';
+
+const meta: Meta<typeof Card> = {
+  title: 'UI/Layout/Card/Card',
+  component: Card,
+  decorators: [ComponentDecorator],
+  render: (args) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <Card {...args}>
+      <CardHeader>Lorem ipsum</CardHeader>
+      <CardContent>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id massa
+        vel odio ullamcorper molestie eu nec ipsum. Sed semper convallis
+        consectetur.
+      </CardContent>
+      <CardFooter>Lorem ipsum</CardFooter>
+    </Card>
+  ),
+  argTypes: {
+    as: { control: false },
+    theme: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {};

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';