Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/layout/table/components/Table.tsx

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+const StyledTable = styled.div``;
+
+export { StyledTable as Table };

packages/twenty-front/src/modules/ui/layout/table/components/TableBody.tsx

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const StyledTableBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: ${({ theme }) => theme.spacing(2)} 0;
+`;
+
+export { StyledTableBody as TableBody };

packages/twenty-front/src/modules/ui/layout/table/components/TableCell.tsx

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+
+type TableCellProps = {
+  align?: 'left' | 'center' | 'right';
+  color?: string;
+};
+
+const StyledTableCell = styled.div<TableCellProps>`
+  align-items: center;
+  color: ${({ color, theme }) => color || theme.font.color.secondary};
+  display: flex;
+  height: ${({ theme }) => theme.spacing(8)};
+  justify-content: ${({ align }) =>
+    align === 'right'
+      ? 'flex-end'
+      : align === 'center'
+        ? 'center'
+        : 'flex-start'};
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+  text-align: ${({ align }) => align ?? 'left'};
+`;
+
+export { StyledTableCell as TableCell };

packages/twenty-front/src/modules/ui/layout/table/components/TableHeader.tsx

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+
+const StyledTableHeader = styled.div<{ align?: 'left' | 'center' | 'right' }>`
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  height: ${({ theme }) => theme.spacing(8)};
+  justify-content: ${({ align }) =>
+    align === 'right'
+      ? 'flex-end'
+      : align === 'center'
+        ? 'center'
+        : 'flex-start'};
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+  text-align: ${({ align }) => align ?? 'left'};
+`;
+
+export { StyledTableHeader as TableHeader };

packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+
+const StyledTableRow = styled.div<{
+  isSelected?: boolean;
+  onClick?: () => void;
+}>`
+  background-color: ${({ isSelected, theme }) =>
+    isSelected ? theme.accent.quaternary : 'transparent'};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  transition: background-color
+    ${({ theme }) => theme.animation.duration.normal}s;
+  width: 100%;
+
+  &:hover {
+    background-color: ${({ onClick, theme }) =>
+      onClick ? theme.background.transparent.light : 'transparent'};
+    cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
+  }
+`;
+
+export { StyledTableRow as TableRow };

packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx

@@ -0,0 +1,73 @@
+import { ReactNode, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconChevronDown, IconChevronUp } from '@/ui/display/icon';
+
+import { TableBody } from './TableBody';
+
+type TableSectionProps = {
+  children: ReactNode;
+  isInitiallyExpanded?: boolean;
+  title: string;
+};
+
+const StyledSectionHeader = styled.div<{ isExpanded: boolean }>`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  color: ${({ theme }) => theme.font.color.light};
+  cursor: pointer;
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  height: ${({ theme }) => theme.spacing(6)};
+  justify-content: space-between;
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+  text-align: left;
+  text-transform: uppercase;
+`;
+
+const StyledSection = styled.div<{ isExpanded: boolean }>`
+  max-height: ${({ isExpanded }) => (isExpanded ? '1000px' : 0)};
+  opacity: ${({ isExpanded }) => (isExpanded ? 1 : 0)};
+  overflow: hidden;
+  transition:
+    max-height ${({ theme }) => theme.animation.duration.normal}s,
+    opacity ${({ theme }) => theme.animation.duration.normal}s;
+`;
+
+const StyledSectionContent = styled(TableBody)`
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+`;
+
+export const TableSection = ({
+  children,
+  isInitiallyExpanded = true,
+  title,
+}: TableSectionProps) => {
+  const theme = useTheme();
+  const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded);
+
+  const handleToggleSection = () =>
+    setIsExpanded((previousIsExpanded) => !previousIsExpanded);
+
+  return (
+    <>
+      <StyledSectionHeader
+        isExpanded={isExpanded}
+        onClick={handleToggleSection}
+      >
+        {title}
+        {isExpanded ? (
+          <IconChevronUp size={theme.icon.size.sm} />
+        ) : (
+          <IconChevronDown size={theme.icon.size.sm} />
+        )}
+      </StyledSectionHeader>
+      <StyledSection isExpanded={isExpanded}>
+        <StyledSectionContent>{children}</StyledSectionContent>
+      </StyledSection>
+    </>
+  );
+};

packages/twenty-front/src/modules/ui/layout/table/components/__stories__/Table.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { Table } from '../Table';
+import { TableCell } from '../TableCell';
+import { TableHeader } from '../TableHeader';
+import { TableRow } from '../TableRow';
+import { TableSection } from '../TableSection';
+
+const meta: Meta<typeof Table> = {
+  title: 'UI/Layout/Table/Table',
+  component: Table,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    as: { table: { disable: true } },
+    theme: { table: { disable: true } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableRow>
+        <TableHeader>Header 1</TableHeader>
+        <TableHeader>Header 2</TableHeader>
+        <TableHeader align="right">Numbers</TableHeader>
+      </TableRow>
+      <TableSection title="Section 1">
+        <TableRow>
+          <TableCell>Cell 1</TableCell>
+          <TableCell>Cell 2</TableCell>
+          <TableCell align="right">3</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Cell 4</TableCell>
+          <TableCell>Cell 5</TableCell>
+          <TableCell align="right">6</TableCell>
+        </TableRow>
+      </TableSection>
+      <TableSection title="Section 2">
+        <TableRow>
+          <TableCell>Lorem ipsum dolor sit amet</TableCell>
+          <TableCell>Lorem ipsum</TableCell>
+          <TableCell align="right">42</TableCell>
+        </TableRow>
+      </TableSection>
+    </Table>
+  ),
+};