Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+
+import { RecordTable } from '@/object-record/record-table/components/RecordTable';
+import { TableOptionsDropdownId } from '@/object-record/record-table/constants/TableOptionsDropdownId';
+import { TableOptionsDropdown } from '@/object-record/record-table/options/components/TableOptionsDropdown';
+import { SignInBackgroundMockContainerEffect } from '@/sign-in-background-mock/components/SignInBackgroundMockContainerEffect';
+import { ViewBar } from '@/views/components/ViewBar';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+`;
+
+export const SignInBackgroundMockContainer = () => {
+  const recordTableId = 'companies';
+  const viewBarId = 'companies-mock';
+
+  return (
+    <StyledContainer>
+      <ViewBar
+        viewBarId={viewBarId}
+        optionsDropdownButton={
+          <TableOptionsDropdown recordTableId={recordTableId} />
+        }
+        optionsDropdownScopeId={TableOptionsDropdownId}
+      />
+      <SignInBackgroundMockContainerEffect
+        recordTableId={recordTableId}
+        viewId={viewBarId}
+      />
+      <RecordTable
+        recordTableId={recordTableId}
+        viewBarId={viewBarId}
+        createRecord={() => {}}
+        updateRecordMutation={() => {}}
+      />
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx

@@ -0,0 +1,113 @@
+import { useEffect } from 'react';
+
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
+import { useRecordTableContextMenuEntries } from '@/object-record/hooks/useRecordTableContextMenuEntries';
+import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
+import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
+import {
+  signInBackgroundMockColumnDefinitions,
+  signInBackgroundMockFilterDefinitions,
+  signInBackgroundMockSortDefinitions,
+} from '@/sign-in-background-mock/constants/signInBackgroundMockDefinitions';
+import { signInBackgroundMockViewFields } from '@/sign-in-background-mock/constants/signInBackgroundMockViewFields';
+import { useViewBar } from '@/views/hooks/useViewBar';
+import { ViewType } from '@/views/types/ViewType';
+import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
+
+type SignInBackgroundMockContainerEffectProps = {
+  recordTableId: string;
+  viewId: string;
+};
+
+export const SignInBackgroundMockContainerEffect = ({
+  recordTableId,
+  viewId,
+}: SignInBackgroundMockContainerEffectProps) => {
+  const {
+    scopeId: objectNamePlural,
+    setAvailableTableColumns,
+    setOnEntityCountChange,
+    setRecordTableData,
+    setTableColumns,
+    setObjectMetadataConfig,
+  } = useRecordTable({
+    recordTableScopeId: recordTableId,
+  });
+
+  const { objectNameSingular } = useObjectNameSingularFromPlural({
+    objectNamePlural,
+  });
+
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular,
+  });
+
+  const {
+    setAvailableSortDefinitions,
+    setAvailableFilterDefinitions,
+    setAvailableFieldDefinitions,
+    setViewType,
+    setViewObjectMetadataId,
+    setEntityCountInCurrentView,
+  } = useViewBar({ viewBarId: viewId });
+
+  useEffect(() => {
+    setViewObjectMetadataId?.(objectMetadataItem.id);
+    setViewType?.(ViewType.Table);
+
+    setAvailableSortDefinitions?.(signInBackgroundMockSortDefinitions);
+    setAvailableFilterDefinitions?.(signInBackgroundMockFilterDefinitions);
+    setAvailableFieldDefinitions?.(signInBackgroundMockColumnDefinitions);
+
+    const availableTableColumns = signInBackgroundMockColumnDefinitions.filter(
+      filterAvailableTableColumns,
+    );
+
+    setAvailableTableColumns(availableTableColumns);
+
+    setTableColumns(
+      mapViewFieldsToColumnDefinitions(
+        signInBackgroundMockViewFields,
+        signInBackgroundMockColumnDefinitions,
+      ),
+    );
+  }, [
+    setViewObjectMetadataId,
+    setViewType,
+    setAvailableSortDefinitions,
+    setAvailableFilterDefinitions,
+    setAvailableFieldDefinitions,
+    objectMetadataItem,
+    setAvailableTableColumns,
+    setRecordTableData,
+    setTableColumns,
+  ]);
+
+  useEffect(() => {
+    setObjectMetadataConfig?.(mockIdentifier);
+  }, [setObjectMetadataConfig]);
+
+  const { setActionBarEntries, setContextMenuEntries } =
+    useRecordTableContextMenuEntries({
+      recordTableScopeId: recordTableId,
+    });
+
+  useEffect(() => {
+    setActionBarEntries?.();
+    setContextMenuEntries?.();
+  }, [setActionBarEntries, setContextMenuEntries]);
+
+  useEffect(() => {
+    setOnEntityCountChange(
+      () => (entityCount: number) => setEntityCountInCurrentView(entityCount),
+    );
+  }, [setEntityCountInCurrentView, setOnEntityCountChange]);
+
+  return <></>;
+};
+
+const mockIdentifier = {
+  basePathToShowPage: '/object/company/',
+  labelIdentifierFieldMetadataId: '20202020-6d30-4111-9f40-b4301906fd3c',
+};

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+
+import { RecordTableActionBar } from '@/object-record/record-table/action-bar/components/RecordTableActionBar';
+import { RecordTableContextMenu } from '@/object-record/record-table/context-menu/components/RecordTableContextMenu';
+import { SignInBackgroundMockContainer } from '@/sign-in-background-mock/components/SignInBackgroundMockContainer';
+import { IconBuildingSkyscraper } from '@/ui/display/icon';
+import { PageAddButton } from '@/ui/layout/page/PageAddButton';
+import { PageBody } from '@/ui/layout/page/PageBody';
+import { PageContainer } from '@/ui/layout/page/PageContainer';
+import { PageHeader } from '@/ui/layout/page/PageHeader';
+import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
+
+const StyledTableContainer = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+`;
+
+export const SignInBackgroundMockPage = () => {
+  return (
+    <PageContainer>
+      <PageHeader title="Objects" Icon={IconBuildingSkyscraper}>
+        <PageHotkeysEffect onAddButtonClick={() => {}} />
+        <PageAddButton onClick={() => {}} />
+      </PageHeader>
+      <PageBody>
+        <StyledTableContainer>
+          <SignInBackgroundMockContainer />
+        </StyledTableContainer>
+        <RecordTableActionBar />
+        <RecordTableContextMenu />
+      </PageBody>
+    </PageContainer>
+  );
+};