Migrate to a monorepo structure (#2909)

packages/twenty-front/src/pages/opportunities/Opportunities.tsx

@@ -0,0 +1,59 @@
+import styled from '@emotion/styled';
+
+import { CompanyBoard } from '@/companies/board/components/CompanyBoard';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { PipelineAddButton } from '@/pipeline/components/PipelineAddButton';
+import { usePipelineSteps } from '@/pipeline/hooks/usePipelineSteps';
+import { PipelineStep } from '@/pipeline/types/PipelineStep';
+import { IconTargetArrow } from '@/ui/display/icon';
+import { PageBody } from '@/ui/layout/page/PageBody';
+import { PageContainer } from '@/ui/layout/page/PageContainer';
+import { PageHeader } from '@/ui/layout/page/PageHeader';
+
+const StyledBoardContainer = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+`;
+
+export const Opportunities = () => {
+  const { handlePipelineStepAdd, handlePipelineStepDelete } =
+    usePipelineSteps();
+
+  const { updateOneRecord: updateOnePipelineStep } =
+    useUpdateOneRecord<PipelineStep>({
+      objectNameSingular: 'pipelineStep',
+    });
+
+  const handleEditColumnTitle = ({
+    columnId,
+    title,
+    color,
+  }: {
+    columnId: string;
+    title: string;
+    color: string;
+  }) => {
+    updateOnePipelineStep?.({
+      idToUpdate: columnId,
+      input: { name: title, color },
+    });
+  };
+
+  return (
+    <PageContainer>
+      <PageHeader title="Opportunities" Icon={IconTargetArrow}>
+        <PipelineAddButton />
+      </PageHeader>
+      <PageBody>
+        <StyledBoardContainer>
+          <CompanyBoard
+            onColumnAdd={handlePipelineStepAdd}
+            onColumnDelete={handlePipelineStepDelete}
+            onEditColumnTitle={handleEditColumnTitle}
+          />
+        </StyledBoardContainer>
+      </PageBody>
+    </PageContainer>
+  );
+};

packages/twenty-front/src/pages/opportunities/__stories__/Opportunities.stories.tsx

@@ -0,0 +1,69 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+
+import { AppPath } from '@/types/AppPath';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { Opportunities } from '../Opportunities';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Opportunities/Default',
+  component: Opportunities,
+  decorators: [PageDecorator],
+  args: { routePath: AppPath.OpportunitiesPage },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof Opportunities>;
+
+export const Default: Story = {};
+
+export const AddCompanyFromHeader: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Click on the add company button', async () => {
+      const button = await canvas.findByTestId('add-company-progress-button');
+
+      await userEvent.click(button);
+
+      await canvas.findByRole(
+        'listitem',
+        { name: (_, element) => !!element?.textContent?.includes('Algolia') },
+        { timeout: 1000 },
+      );
+    });
+
+    await step('Change pipeline stage', async () => {
+      const pipelineStepDropdownHeader = await canvas.findByRole(
+        'listitem',
+        { name: (_, element) => !!element?.textContent?.includes('New') },
+        { timeout: 1000 },
+      );
+
+      const pipelineStepDropdownUnfoldButton = within(
+        pipelineStepDropdownHeader,
+      ).getByRole('button');
+
+      await userEvent.click(pipelineStepDropdownUnfoldButton);
+
+      const menuItem1 = await canvas.findByRole(
+        'listitem',
+        { name: (_, element) => !!element?.textContent?.includes('Screening') },
+        { timeout: 1000 },
+      );
+
+      await userEvent.click(menuItem1);
+    });
+
+    // TODO: mock add company mutation and add step for company creation
+  },
+};

packages/twenty-front/src/pages/opportunities/constants/opportunityBoardFilterDefinitions.tsx

@@ -0,0 +1,30 @@
+import { FilterDefinitionByEntity } from '@/object-record/object-filter-dropdown/types/FilterDefinitionByEntity';
+import { Opportunity } from '@/pipeline/types/Opportunity';
+
+export const opportunityBoardFilterDefinitions: FilterDefinitionByEntity<Opportunity>[] =
+  [
+    {
+      fieldMetadataId: 'amount',
+      label: 'Amount',
+      iconName: 'IconCurrencyDollar',
+      type: 'NUMBER',
+    },
+    {
+      fieldMetadataId: 'closeDate',
+      label: 'Close date',
+      iconName: 'IconCalendarEvent',
+      type: 'DATE_TIME',
+    },
+    {
+      fieldMetadataId: 'companyId',
+      label: 'Company',
+      iconName: 'IconBuildingSkyscraper',
+      type: 'RELATION',
+    },
+    {
+      fieldMetadataId: 'pointOfContactId',
+      label: 'Point of contact',
+      iconName: 'IconUser',
+      type: 'RELATION',
+    },
+  ];

packages/twenty-front/src/pages/opportunities/constants/opportunityBoardSortDefinitions.tsx

@@ -0,0 +1,19 @@
+import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
+
+export const opportunityBoardSortDefinitions: SortDefinition[] = [
+  {
+    fieldMetadataId: 'createdAt',
+    label: 'Creation',
+    iconName: 'IconCalendarEvent',
+  },
+  {
+    fieldMetadataId: 'amount',
+    label: 'Amount',
+    iconName: 'IconCurrencyDollar',
+  },
+  {
+    fieldMetadataId: 'closeDate',
+    label: 'Expected close date',
+    iconName: 'IconCalendarEvent',
+  },
+];

packages/twenty-front/src/pages/opportunities/opportunitiesBoardOptions.tsx

@@ -0,0 +1,13 @@
+import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
+import { NewOpportunityButton } from '@/companies/components/NewOpportunityButton';
+import { BoardOptions } from '@/object-record/record-board/types/BoardOptions';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+export const opportunitiesBoardOptions: BoardOptions = {
+  newCardComponent: (
+    <RecoilScope>
+      <NewOpportunityButton />
+    </RecoilScope>
+  ),
+  CardComponent: CompanyBoardCard,
+};