Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx

@@ -0,0 +1,65 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { Checkbox } from '@/ui/input/components/Checkbox';
+import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+
+type SettingsAvailableStandardObjectItemTableRowProps = {
+  isSelected?: boolean;
+  objectItem: ObjectMetadataItem;
+  onClick?: () => void;
+};
+
+export const StyledAvailableStandardObjectTableRow = styled(TableRow)`
+  grid-template-columns: 28px 148px 256px 80px;
+`;
+
+const StyledCheckboxTableCell = styled(TableCell)`
+  justify-content: center;
+  padding: 0;
+  padding-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledNameTableCell = styled(TableCell)`
+  color: ${({ theme }) => theme.font.color.primary};
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledDescription = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const SettingsAvailableStandardObjectItemTableRow = ({
+  isSelected,
+  objectItem,
+  onClick,
+}: SettingsAvailableStandardObjectItemTableRowProps) => {
+  const theme = useTheme();
+
+  const { Icon } = useLazyLoadIcon(objectItem.icon ?? '');
+
+  return (
+    <StyledAvailableStandardObjectTableRow
+      key={objectItem.namePlural}
+      isSelected={isSelected}
+      onClick={onClick}
+    >
+      <StyledCheckboxTableCell>
+        <Checkbox checked={!!isSelected} />
+      </StyledCheckboxTableCell>
+      <StyledNameTableCell>
+        {!!Icon && <Icon size={theme.icon.size.md} />}
+        {objectItem.labelPlural}
+      </StyledNameTableCell>
+      <TableCell>
+        <StyledDescription>{objectItem.description}</StyledDescription>
+      </TableCell>
+      <TableCell align="right">{objectItem.fields.length}</TableCell>
+    </StyledAvailableStandardObjectTableRow>
+  );
+};

packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx

@@ -0,0 +1,53 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Section } from '@/ui/layout/section/components/Section';
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableBody } from '@/ui/layout/table/components/TableBody';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+
+import {
+  SettingsAvailableStandardObjectItemTableRow,
+  StyledAvailableStandardObjectTableRow,
+} from './SettingsAvailableStandardObjectItemTableRow';
+
+type SettingsAvailableStandardObjectsSectionProps = {
+  objectItems: ObjectMetadataItem[];
+  onChange: (selectedIds: Record<string, boolean>) => void;
+  selectedIds: Record<string, boolean>;
+};
+
+export const SettingsAvailableStandardObjectsSection = ({
+  objectItems,
+  onChange,
+  selectedIds,
+}: SettingsAvailableStandardObjectsSectionProps) => (
+  <Section>
+    <H2Title
+      title="Available"
+      description="Select one or several standard objects to activate below"
+    />
+    <Table>
+      <StyledAvailableStandardObjectTableRow>
+        <TableHeader></TableHeader>
+        <TableHeader>Name</TableHeader>
+        <TableHeader>Description</TableHeader>
+        <TableHeader align="right">Fields</TableHeader>
+      </StyledAvailableStandardObjectTableRow>
+      <TableBody>
+        {objectItems.map((objectItem) => (
+          <SettingsAvailableStandardObjectItemTableRow
+            key={objectItem.id}
+            isSelected={selectedIds[objectItem.id]}
+            objectItem={objectItem}
+            onClick={() =>
+              onChange({
+                ...selectedIds,
+                [objectItem.id]: !selectedIds[objectItem.id],
+              })
+            }
+          />
+        ))}
+      </TableBody>
+    </Table>
+  </Section>
+);

packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx

@@ -0,0 +1,70 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconBox, IconDatabase, IconFileCheck } from '@/ui/display/icon';
+
+import { SettingsObjectTypeCard } from './SettingsObjectTypeCard';
+
+export type NewObjectType = 'Standard' | 'Custom' | 'Remote';
+
+type SettingsNewObjectTypeProps = {
+  selectedType?: NewObjectType;
+  onTypeSelect?: (type: NewObjectType) => void;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const SettingsNewObjectType = ({
+  selectedType,
+  onTypeSelect,
+}: SettingsNewObjectTypeProps) => {
+  const theme = useTheme();
+  return (
+    <StyledContainer>
+      <SettingsObjectTypeCard
+        title={'Standard'}
+        color="blue"
+        selected={selectedType === 'Standard'}
+        prefixIcon={
+          <IconFileCheck
+            size={theme.icon.size.lg}
+            stroke={theme.icon.stroke.sm}
+            color={theme.font.color.tertiary}
+          />
+        }
+        onClick={() => onTypeSelect?.('Standard')}
+      />
+      <SettingsObjectTypeCard
+        title="Custom"
+        color="orange"
+        selected={selectedType === 'Custom'}
+        prefixIcon={
+          <IconBox
+            size={theme.icon.size.lg}
+            stroke={theme.icon.stroke.sm}
+            color={theme.font.color.tertiary}
+          />
+        }
+        onClick={() => onTypeSelect?.('Custom')}
+      />
+      <SettingsObjectTypeCard
+        title="Remote"
+        soon
+        disabled
+        color="green"
+        selected={selectedType === 'Remote'}
+        prefixIcon={
+          <IconDatabase
+            size={theme.icon.size.lg}
+            stroke={theme.icon.stroke.sm}
+            color={theme.font.color.tertiary}
+          />
+        }
+      />
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsObjectTypeCard.tsx

@@ -0,0 +1,81 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconCheck } from '@/ui/display/icon';
+import { SoonPill } from '@/ui/display/pill/components/SoonPill';
+import { Tag } from '@/ui/display/tag/components/Tag';
+import { ThemeColor } from '@/ui/theme/constants/colors';
+
+const StyledObjectTypeCard = styled.div<SettingsObjectTypeCardProps>`
+  ${({ theme, disabled, selected }) => `
+    background: ${theme.background.transparent.primary};
+    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+    display: flex;
+    flex-direction: row;
+    font-family: ${theme.font.family};
+    font-weight: 500;
+    border-style: solid;
+    border-width: '1px';
+    padding: ${theme.spacing(3)};
+    border-radius: ${theme.border.radius.sm};
+    gap: ${theme.spacing(2)};
+    border-color: ${
+      selected ? theme.border.color.inverted : theme.border.color.medium
+    };
+    color: ${theme.font.color.primary};
+    align-items: center;
+    width: 140px;
+  `}
+`;
+
+const StyledTag = styled(Tag)`
+  box-sizing: border-box;
+  height: ${({ theme }) => theme.spacing(5)};
+`;
+
+const StyledIconCheck = styled(IconCheck)`
+  margin-left: auto;
+`;
+
+const StyledSoonPill = styled(SoonPill)`
+  margin-left: auto;
+`;
+
+type SettingsObjectTypeCardProps = {
+  prefixIcon?: React.ReactNode;
+  title: string;
+  soon?: boolean;
+  disabled?: boolean;
+  color: ThemeColor;
+  selected: boolean;
+  onClick?: () => void;
+};
+
+export const SettingsObjectTypeCard = ({
+  prefixIcon,
+  title,
+  soon = false,
+  selected,
+  disabled = false,
+  color,
+  onClick,
+}: SettingsObjectTypeCardProps) => {
+  const theme = useTheme();
+  return (
+    <StyledObjectTypeCard
+      title={title}
+      soon={soon}
+      disabled={disabled}
+      color={color}
+      selected={selected}
+      onClick={onClick}
+    >
+      {prefixIcon}
+      <StyledTag color={color} text={title} />
+      {soon && <StyledSoonPill />}
+      {!disabled && selected && <StyledIconCheck size={theme.icon.size.md} />}
+    </StyledObjectTypeCard>
+  );
+};
+
+export {};