Refacto board (#661)

* Refacto pipeline progress board to be entity agnostic

* Abstract hooks as well

* Move files

* Pass specific components as props

* Move board hook to the generic component

* Make dnd and update logic part of the board

* Remove useless call and getch pipelineProgress from hook

* Minot

* improve typing

* Revert "improve typing"

This reverts commit 49bf7929b6231747cc460cbb98f68c3c10424659.

* wip

* Get board from initial component

* Move files again

* Lint

* Fix story

* Lint

* Mock pipeline progress

* Fix storybook

* WIP refactor recoil

* Checkpoint: compilation

* Fix dnd

* Fix unselect card

* Checkpoint: compilation

* Checkpoint: New card OK

* Checkpoint: feature complete

* Fix latency for delete

* Linter

* Fix rebase

* Move files

* lint

* Update Stories tests

* lint

* Fix test

* Refactor hook for company progress indexing

* Remove useless type

* Move boardState

* remove gardcoded Id

* Nit

* Fix

* Rename state

front/src/modules/companies/__stories__/Board.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { companyBoardOptions } from '@/companies/components/companyBoardOptions';
+import { EntityBoard } from '@/pipeline-progress/components/EntityBoard';
+import { BoardDecorator } from '~/testing/decorators';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+const meta: Meta<typeof EntityBoard> = {
+  title: 'UI/Board/Board',
+  component: EntityBoard,
+  decorators: [BoardDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof EntityBoard>;
+
+export const OneColumnBoard: Story = {
+  render: getRenderWrapperForComponent(
+    <EntityBoard boardOptions={companyBoardOptions} />,
+  ),
+  parameters: {
+    msw: graphqlMocks,
+  },
+};

front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
+import { BoardCardDecorator } from '~/testing/decorators';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+const meta: Meta<typeof CompanyBoardCard> = {
+  title: 'UI/Board/CompanyBoardCard',
+  component: CompanyBoardCard,
+  decorators: [BoardCardDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof CompanyBoardCard>;
+
+const FakeSelectableCompanyBoardCard = () => {
+  return <CompanyBoardCard />;
+};
+
+export const CompanyCompanyBoardCard: Story = {
+  render: getRenderWrapperForComponent(<FakeSelectableCompanyBoardCard />),
+  parameters: {
+    msw: graphqlMocks,
+  },
+};

front/src/modules/companies/__stories__/CompanyChip.stories.tsx

@@ -0,0 +1,59 @@
+import { BrowserRouter } from 'react-router-dom';
+import styled from '@emotion/styled';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { CompanyChip } from '../components/CompanyChip';
+
+const meta: Meta<typeof CompanyChip> = {
+  title: 'Modules/Companies/CompanyChip',
+  component: CompanyChip,
+};
+
+export default meta;
+type Story = StoryObj<typeof CompanyChip>;
+
+const TestCellContainer = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.background.primary};
+  display: flex;
+
+  height: fit-content;
+  justify-content: space-between;
+
+  max-width: 250px;
+
+  min-width: 250px;
+
+  overflow: hidden;
+  text-wrap: nowrap;
+`;
+
+export const SmallName: Story = {
+  render: getRenderWrapperForComponent(
+    <TestCellContainer>
+      <BrowserRouter>
+        <CompanyChip
+          id="airbnb"
+          name="Airbnb"
+          picture="https://api.faviconkit.com/airbnb.com/144"
+        />
+      </BrowserRouter>
+    </TestCellContainer>,
+  ),
+};
+
+export const BigName: Story = {
+  render: getRenderWrapperForComponent(
+    <TestCellContainer>
+      <BrowserRouter>
+        <CompanyChip
+          id="google"
+          name="Google with a real big name to overflow the cell"
+          picture="https://api.faviconkit.com/google.com/144"
+        />
+      </BrowserRouter>
+    </TestCellContainer>,
+  ),
+};

front/src/modules/companies/__stories__/mock-data.ts

@@ -0,0 +1,42 @@
+import { Pipeline } from '~/generated/graphql';
+
+export const pipeline = {
+  id: 'pipeline-1',
+  name: 'pipeline-1',
+  pipelineStages: [
+    {
+      id: 'pipeline-stage-1',
+      name: 'New',
+      index: 0,
+      color: '#B76796',
+      pipelineProgresses: [
+        { id: 'fe256b39-3ec3-4fe7-8998-b76aa0bfb600' },
+        { id: '4a886c90-f4f2-4984-8222-882ebbb905d6' },
+      ],
+    },
+    {
+      id: 'pipeline-stage-2',
+      name: 'Screening',
+      index: 1,
+      color: '#CB912F',
+    },
+    {
+      id: 'pipeline-stage-3',
+      name: 'Meeting',
+      index: 2,
+      color: '#9065B0',
+    },
+    {
+      id: 'pipeline-stage-4',
+      name: 'Proposal',
+      index: 3,
+      color: '#337EA9',
+    },
+    {
+      id: 'pipeline-stage-5',
+      name: 'Customer',
+      index: 4,
+      color: '#079039',
+    },
+  ],
+} as Pipeline;