docs: use ComponentDecorator (#800)

Related to #702

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

@@ -3,32 +3,41 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { EntityBoard } from '@/pipeline/components/EntityBoard';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
-import { BoardDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { defaultPipelineProgressOrderBy } from '../../pipeline/queries';
+import { RecoilScope } from '../../ui/recoil-scope/components/RecoilScope';
+import { HooksCompanyBoard } from '../components/HooksCompanyBoard';
+import { CompanyBoardContext } from '../states/CompanyBoardContext';
 
 const meta: Meta<typeof EntityBoard> = {
   title: 'Modules/Companies/Board',
   component: EntityBoard,
-  decorators: [BoardDecorator],
+  decorators: [
+    (Story) => (
+      <RecoilScope SpecificContext={CompanyBoardContext}>
+        <HooksCompanyBoard
+          availableFilters={[]}
+          orderBy={defaultPipelineProgressOrderBy}
+        />
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
+      </RecoilScope>
+    ),
+    ComponentDecorator,
+  ],
+  parameters: {
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof EntityBoard>;
 
 export const OneColumnBoard: Story = {
-  render: getRenderWrapperForComponent(
-    <MemoryRouter>
-      <EntityBoard
-        boardOptions={opportunitiesBoardOptions}
-        updateSorts={() => {
-          return;
-        }}
-      />
-      ,
-    </MemoryRouter>,
+  render: (args) => (
+    <EntityBoard {...args} boardOptions={opportunitiesBoardOptions} />
   ),
-  parameters: {
-    msw: graphqlMocks,
-  },
 };

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

@@ -1,31 +1,61 @@
+import { useEffect } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
-import { BoardCardDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { mockedPipelineProgressData } from '~/testing/mock-data/pipeline-progress';
+
+import { defaultPipelineProgressOrderBy } from '../../pipeline/queries';
+import { BoardCardContext } from '../../pipeline/states/BoardCardContext';
+import { BoardColumnContext } from '../../pipeline/states/BoardColumnContext';
+import { pipelineProgressIdScopedState } from '../../pipeline/states/pipelineProgressIdScopedState';
+import { RecoilScope } from '../../ui/recoil-scope/components/RecoilScope';
+import { useRecoilScopedState } from '../../ui/recoil-scope/hooks/useRecoilScopedState';
+import { HooksCompanyBoard } from '../components/HooksCompanyBoard';
+import { CompanyBoardContext } from '../states/CompanyBoardContext';
+
+function HookLoadFakeBoardContextState() {
+  const [, setPipelineProgressId] = useRecoilScopedState(
+    pipelineProgressIdScopedState,
+    BoardCardContext,
+  );
+  const pipelineProgress = mockedPipelineProgressData[1];
+  useEffect(() => {
+    setPipelineProgressId(pipelineProgress?.id || '');
+  }, [pipelineProgress?.id, setPipelineProgressId]);
+  return <></>;
+}
 
 const meta: Meta<typeof CompanyBoardCard> = {
   title: 'Modules/Companies/CompanyBoardCard',
   component: CompanyBoardCard,
-  decorators: [BoardCardDecorator],
+  decorators: [
+    (Story) => (
+      <RecoilScope SpecificContext={CompanyBoardContext}>
+        <HooksCompanyBoard
+          availableFilters={[]}
+          orderBy={defaultPipelineProgressOrderBy}
+        />
+        <RecoilScope SpecificContext={BoardColumnContext}>
+          <RecoilScope SpecificContext={BoardCardContext}>
+            <HookLoadFakeBoardContextState />
+            <MemoryRouter>
+              <Story />
+            </MemoryRouter>
+          </RecoilScope>
+        </RecoilScope>
+      </RecoilScope>
+    ),
+    ComponentDecorator,
+  ],
+  parameters: {
+    msw: graphqlMocks,
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof CompanyBoardCard>;
 
-const FakeSelectableCompanyBoardCard = () => {
-  return (
-    <MemoryRouter>
-      <CompanyBoardCard />
-    </MemoryRouter>
-  );
-};
-
-export const CompanyCompanyBoardCard: Story = {
-  render: getRenderWrapperForComponent(<FakeSelectableCompanyBoardCard />),
-  parameters: {
-    msw: graphqlMocks,
-  },
-};
+export const CompanyCompanyBoardCard: Story = {};

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

@@ -2,13 +2,23 @@ import { BrowserRouter } from 'react-router-dom';
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { CompanyChip } from '../components/CompanyChip';
 
 const meta: Meta<typeof CompanyChip> = {
   title: 'Modules/Companies/CompanyChip',
   component: CompanyChip,
+  decorators: [
+    (Story) => (
+      <TestCellContainer>
+        <BrowserRouter>
+          <Story />
+        </BrowserRouter>
+      </TestCellContainer>
+    ),
+    ComponentDecorator,
+  ],
 };
 
 export default meta;
@@ -31,29 +41,21 @@ const TestCellContainer = styled.div`
 `;
 
 export const SmallName: Story = {
-  render: getRenderWrapperForComponent(
-    <TestCellContainer>
-      <BrowserRouter>
-        <CompanyChip
-          id="airbnb"
-          name="Airbnb"
-          picture="https://api.faviconkit.com/airbnb.com/144"
-        />
-      </BrowserRouter>
-    </TestCellContainer>,
-  ),
+  args: {
+    id: 'airbnb',
+    name: 'Airbnb',
+    picture: 'https://api.faviconkit.com/airbnb.com/144',
+  },
+};
+
+export const Clickable: Story = {
+  args: { ...SmallName.args, clickable: true },
 };
 
 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>,
-  ),
+  args: {
+    id: 'google',
+    name: 'Google with a real big name to overflow the cell',
+    picture: 'https://api.faviconkit.com/google.com/144',
+  },
 };