docs: use ComponentDecorator (#800)

Related to #702

front/.storybook/main.js

@@ -53,7 +53,6 @@ module.exports = {
     "@storybook/addon-interactions",
     "@storybook/addon-coverage",
     "@storybook/addon-styling",
-    "@storybook/addon-knobs",
     "storybook-addon-pseudo-states",
     "storybook-addon-cookie",
   ],

front/package.json

@@ -108,7 +108,6 @@
     "@storybook/addon-coverage": "^0.0.8",
     "@storybook/addon-essentials": "^7.0.22",
     "@storybook/addon-interactions": "^7.0.22",
-    "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addon-links": "^7.0.22",
     "@storybook/addon-styling": "^1.3.0",
     "@storybook/jest": "^0.1.0",

front/src/modules/activities/comment/__stories__/Comment.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
+import { CommentThreadActionBar } from '../../right-drawer/components/CommentThreadActionBar';
 import { Comment } from '../Comment';
 
 import { mockComment, mockCommentWithLongValues } from './mock-comment';
@@ -9,17 +10,24 @@ import { mockComment, mockCommentWithLongValues } from './mock-comment';
 const meta: Meta<typeof Comment> = {
   title: 'Modules/Activity/Comment/Comment',
   component: Comment,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    actionBar: {
+      type: 'boolean',
+      mapping: {
+        true: <CommentThreadActionBar commentThreadId="test-id" />,
+        false: undefined,
+      },
+    },
+  },
+  args: { comment: mockComment },
 };
 
 export default meta;
 type Story = StoryObj<typeof Comment>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(<Comment comment={mockComment} />),
-};
 
 export const WithLongValues: Story = {
-  render: getRenderWrapperForComponent(
+  args: { comment: mockCommentWithLongValues },
-    <Comment comment={mockCommentWithLongValues} />,
-  ),
 };

front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx

@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { DateTime } from 'luxon';
 
 import { CommentThreadActionBar } from '@/activities/right-drawer/components/CommentThreadActionBar';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
+import { avatarUrl } from '~/testing/mock-data/users';
 
 import { CommentHeader } from '../CommentHeader';
 
@@ -10,60 +12,76 @@ import { mockComment, mockCommentWithLongValues } from './mock-comment';
 const meta: Meta<typeof CommentHeader> = {
   title: 'Modules/Activity/Comment/CommentHeader',
   component: CommentHeader,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    actionBar: {
+      type: 'boolean',
+      mapping: {
+        true: <CommentThreadActionBar commentThreadId="test-id" />,
+        false: undefined,
+      },
+    },
+  },
+  args: { comment: mockComment },
 };
 
 export default meta;
 type Story = StoryObj<typeof CommentHeader>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
+
+export const FewHoursAgo: Story = {
+  args: {
+    comment: {
+      ...mockComment,
+      createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
+    },
+  },
 };
 
 export const FewDaysAgo: Story = {
-  render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
+  args: {
+    comment: {
+      ...mockComment,
+      createdAt: DateTime.now().minus({ days: 2 }).toISO() ?? '',
+    },
+  },
 };
 
 export const FewMonthsAgo: Story = {
-  render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
+  args: {
+    comment: {
+      ...mockComment,
+      createdAt: DateTime.now().minus({ months: 2 }).toISO() ?? '',
+    },
+  },
 };
 
 export const FewYearsAgo: Story = {
-  render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
+  args: {
+    comment: {
+      ...mockComment,
+      createdAt: DateTime.now().minus({ years: 2 }).toISO() ?? '',
+    },
+  },
 };
 
-export const WithoutAvatar: Story = {
+export const WithAvatar: Story = {
-  render: getRenderWrapperForComponent(
+  args: {
-    <CommentHeader
+    comment: {
-      comment={{
+      ...mockComment,
-        ...mockComment,
+      author: {
-        author: {
+        ...mockComment.author,
-          ...mockComment.author,
+        avatarUrl,
-          avatarUrl: '',
+      },
-        },
+    },
-      }}
+  },
-    />,
-  ),
 };
 
 export const WithLongUserName: Story = {
-  render: getRenderWrapperForComponent(
+  args: { comment: mockCommentWithLongValues },
-    <CommentHeader
-      comment={{
-        ...mockCommentWithLongValues,
-        author: {
-          ...mockCommentWithLongValues.author,
-          avatarUrl: '',
-        },
-      }}
-    />,
-  ),
 };
 
 export const WithActionBar: Story = {
-  render: getRenderWrapperForComponent(
+  args: { actionBar: true },
-    <CommentHeader
-      comment={mockComment}
-      actionBar={<CommentThreadActionBar commentThreadId="test-id" />}
-    />,
-  ),
 };

front/src/modules/activities/components/__stories__/CommentThreadRelationPicker.stories.tsx

@@ -2,33 +2,36 @@ import { MemoryRouter } from 'react-router-dom';
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { ComponentDecorator } from '~/testing/decorators';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedCommentThreads } from '~/testing/mock-data/comment-threads';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 
 import { CommentThreadRelationPicker } from '../CommentThreadRelationPicker';
 
-const meta: Meta<typeof CommentThreadRelationPicker> = {
-  title: 'Modules/Comments/CommentThreadRelationPicker',
-  component: CommentThreadRelationPicker,
-  parameters: {
-    msw: graphqlMocks,
-  },
-};
-
 const StyledContainer = styled.div`
   width: 400px;
 `;
 
+const meta: Meta<typeof CommentThreadRelationPicker> = {
+  title: 'Modules/Comments/CommentThreadRelationPicker',
+  component: CommentThreadRelationPicker,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <StyledContainer>
+          <Story />
+        </StyledContainer>
+      </MemoryRouter>
+    ),
+    ComponentDecorator,
+  ],
+  args: { commentThread: mockedCommentThreads[0] },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
 export default meta;
 type Story = StoryObj<typeof CommentThreadRelationPicker>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(
-    <MemoryRouter>
-      <StyledContainer>
-        <CommentThreadRelationPicker commentThread={mockedCommentThreads[0]} />
-      </StyledContainer>
-    </MemoryRouter>,
-  ),
-};

front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx

@@ -1,18 +1,19 @@
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
-import { CellCommentChip } from '../CellCommentChip';
 import { CommentChip } from '../CommentChip';
 
-const meta: Meta<typeof CellCommentChip> = {
+const meta: Meta<typeof CommentChip> = {
-  title: 'Modules/Comments/CellCommentChip',
+  title: 'Modules/Comments/CommentChip',
-  component: CellCommentChip,
+  component: CommentChip,
+  decorators: [ComponentDecorator],
+  args: { count: 1 },
 };
 
 export default meta;
-type Story = StoryObj<typeof CellCommentChip>;
+type Story = StoryObj<typeof CommentChip>;
 
 const TestCellContainer = styled.div`
   align-items: center;
@@ -36,34 +37,38 @@ const StyledFakeCellText = styled.div`
   white-space: nowrap;
 `;
 
-export const OneComment: Story = {
+export const OneComment: Story = {};
-  render: getRenderWrapperForComponent(<CommentChip count={1} />),
-};
 
 export const TenComments: Story = {
-  render: getRenderWrapperForComponent(<CommentChip count={10} />),
+  args: { count: 10 },
 };
 
 export const TooManyComments: Story = {
-  render: getRenderWrapperForComponent(<CommentChip count={1000} />),
+  args: { count: 1000 },
 };
 
 export const InCellDefault: Story = {
-  render: getRenderWrapperForComponent(
+  args: { count: 12 },
-    <TestCellContainer>
+  decorators: [
-      <StyledFakeCellText>Fake short text</StyledFakeCellText>
+    (Story) => (
-      <CellCommentChip count={12} />
+      <TestCellContainer>
-    </TestCellContainer>,
+        <StyledFakeCellText>Fake short text</StyledFakeCellText>
-  ),
+        <Story />
+      </TestCellContainer>
+    ),
+  ],
 };
 
 export const InCellOverlappingBlur: Story = {
-  render: getRenderWrapperForComponent(
+  ...InCellDefault,
-    <TestCellContainer>
+  decorators: [
-      <StyledFakeCellText>
+    (Story) => (
-        Fake long text to demonstrate ellipsis
+      <TestCellContainer>
-      </StyledFakeCellText>
+        <StyledFakeCellText>
-      <CellCommentChip count={12} />
+          Fake long text to demonstrate ellipsis
-    </TestCellContainer>,
+        </StyledFakeCellText>
-  ),
+        <Story />
+      </TestCellContainer>
+    ),
+  ],
 };

front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -2,7 +2,7 @@ import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 import { fireEvent, userEvent, within } from '@storybook/testing-library';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 import { sleep } from '~/testing/sleep';
 
 import { CommandMenu } from '../CommandMenu';
@@ -10,25 +10,22 @@ import { CommandMenu } from '../CommandMenu';
 const meta: Meta<typeof CommandMenu> = {
   title: 'Modules/CommandMenu/CommandMenu',
   component: CommandMenu,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+    ComponentDecorator,
+  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof CommandMenu>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(
-    <MemoryRouter>
-      <CommandMenu />
-    </MemoryRouter>,
-  ),
-};
 
 export const CmdK: Story = {
-  render: getRenderWrapperForComponent(
-    <MemoryRouter>
-      <CommandMenu />
-    </MemoryRouter>,
-  ),
   play: async ({ canvasElement }) => {
     fireEvent.keyDown(canvasElement, {
       key: 'k',

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(
+  render: (args) => (
-    <MemoryRouter>
+    <EntityBoard {...args} boardOptions={opportunitiesBoardOptions} />
-      <EntityBoard
-        boardOptions={opportunitiesBoardOptions}
-        updateSorts={() => {
-          return;
-        }}
-      />
-      ,
-    </MemoryRouter>,
   ),
-  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 = () => {
+export const CompanyCompanyBoardCard: Story = {};
-  return (
-    <MemoryRouter>
-      <CompanyBoardCard />
-    </MemoryRouter>
-  );
-};
-
-export const CompanyCompanyBoardCard: Story = {
-  render: getRenderWrapperForComponent(<FakeSelectableCompanyBoardCard />),
-  parameters: {
-    msw: graphqlMocks,
-  },
-};

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(
+  args: {
-    <TestCellContainer>
+    id: 'airbnb',
-      <BrowserRouter>
+    name: 'Airbnb',
-        <CompanyChip
+    picture: 'https://api.faviconkit.com/airbnb.com/144',
-          id="airbnb"
+  },
-          name="Airbnb"
+};
-          picture="https://api.faviconkit.com/airbnb.com/144"
+
-        />
+export const Clickable: Story = {
-      </BrowserRouter>
+  args: { ...SmallName.args, clickable: true },
-    </TestCellContainer>,
-  ),
 };
 
 export const BigName: Story = {
-  render: getRenderWrapperForComponent(
+  args: {
-    <TestCellContainer>
+    id: 'google',
-      <BrowserRouter>
+    name: 'Google with a real big name to overflow the cell',
-        <CompanyChip
+    picture: 'https://api.faviconkit.com/google.com/144',
-          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/people/components/__stories__/PeopleChip.stories.tsx

@@ -2,18 +2,10 @@ 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 { PersonChip } from '../PersonChip';
 
-const meta: Meta<typeof PersonChip> = {
-  title: 'Modules/People/PersonChip',
-  component: PersonChip,
-};
-
-export default meta;
-type Story = StoryObj<typeof PersonChip>;
-
 const TestCellContainer = styled.div`
   align-items: center;
   background: ${({ theme }) => theme.background.primary};
@@ -26,22 +18,28 @@ const TestCellContainer = styled.div`
   text-wrap: nowrap;
 `;
 
+const meta: Meta<typeof PersonChip> = {
+  title: 'Modules/People/PersonChip',
+  component: PersonChip,
+  decorators: [
+    (Story) => (
+      <TestCellContainer>
+        <BrowserRouter>
+          <Story />
+        </BrowserRouter>
+      </TestCellContainer>
+    ),
+    ComponentDecorator,
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof PersonChip>;
+
 export const SmallName: Story = {
-  render: getRenderWrapperForComponent(
+  args: { id: 'tim_fake_id', name: 'Tim C.' },
-    <TestCellContainer>
-      <BrowserRouter>
-        <PersonChip id="tim_fake_id" name="Tim C." />
-      </BrowserRouter>
-    </TestCellContainer>,
-  ),
 };
 
 export const BigName: Story = {
-  render: getRenderWrapperForComponent(
+  args: { id: 'steve_fake_id', name: 'Steve LoremIpsumLoremIpsumLoremIpsum' },
-    <TestCellContainer>
-      <BrowserRouter>
-        <PersonChip id="steve_fake_id" name="Steve J." />
-      </BrowserRouter>
-    </TestCellContainer>,
-  ),
 };

front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx

@@ -1,19 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { ActionBar } from '../ActionBar';
 
 const meta: Meta<typeof ActionBar> = {
   title: 'UI/ActionBar/ActionBar',
   component: ActionBar,
+  decorators: [ComponentDecorator],
+  args: { children: 'Lorem ipsum', selectedIds: [] },
 };
 
 export default meta;
 type Story = StoryObj<typeof ActionBar>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(
-    <ActionBar children={<div />} selectedIds={[]} />,
-  ),
-};

front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx

@@ -45,7 +45,7 @@ const StyledColorSample = styled.div<{ colorName: string }>`
   width: 12px;
 `;
 
-const COLOR_OPTIONS = [
+export const COLOR_OPTIONS = [
   { name: 'Green', id: 'green' },
   { name: 'Turquoise', id: 'turquoise' },
   { name: 'Sky', id: 'sky' },

front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators';
+
+import {
+  BoardColumnEditTitleMenu,
+  COLOR_OPTIONS,
+} from '../BoardColumnEditTitleMenu';
+
+const meta: Meta<typeof BoardColumnEditTitleMenu> = {
+  title: 'UI/Board/BoardColumnMenu',
+  component: BoardColumnEditTitleMenu,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: COLOR_OPTIONS.map(({ id }) => id),
+    },
+  },
+  args: { color: 'green', title: 'Column title' },
+};
+
+export default meta;
+type Story = StoryObj<typeof BoardColumnEditTitleMenu>;
+
+export const AllTags: Story = {};

front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.story.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
-
-import { BoardColumnEditTitleMenu } from '../BoardColumnEditTitleMenu';
-
-const meta: Meta<typeof BoardColumnEditTitleMenu> = {
-  title: 'UI/Board/BoardColumnMenu',
-  component: BoardColumnEditTitleMenu,
-};
-
-export default meta;
-type Story = StoryObj<typeof BoardColumnEditTitleMenu>;
-
-export const AllTags: Story = {
-  render: getRenderWrapperForComponent(
-    <BoardColumnEditTitleMenu
-      color="green"
-      title={'Column title'}
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      onClose={() => {}}
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      onTitleEdit={() => {}}
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      onColumnColorEdit={() => {}}
-    />,
-  ),
-};

front/src/modules/ui/button/components/__stories__/Button.stories.tsx

@@ -1,12 +1,9 @@
-import React from 'react';
 import styled from '@emotion/styled';
-import { text, withKnobs } from '@storybook/addon-knobs';
 import { expect, jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { IconSearch } from '@/ui/icon';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 
 import { Button } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
@@ -15,8 +12,8 @@ type ButtonProps = React.ComponentProps<typeof Button>;
 
 const StyledContainer = styled.div`
   display: flex;
-  flex: 1;
   flex-direction: column;
+  padding: 20px;
   width: 800px;
   > * + * {
     margin-top: ${({ theme }) => theme.spacing(4)};
@@ -55,15 +52,6 @@ const StyledButtonContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
-const meta: Meta<typeof Button> = {
-  title: 'UI/Button/Button',
-  component: Button,
-  decorators: [withKnobs],
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
 const variants: ButtonProps['variant'][] = [
   'primary',
   'secondary',
@@ -73,8 +61,6 @@ const variants: ButtonProps['variant'][] = [
   'danger',
 ];
 
-const clickJestFn = jest.fn();
-
 const states = {
   'with-icon': {
     description: 'With icon',
@@ -127,81 +113,16 @@ const states = {
   },
 };
 
-const ButtonLine: React.FC<ButtonProps> = ({ variant, ...props }) => (
+const meta: Meta<typeof Button> = {
-  <>
+  title: 'UI/Button/Button',
-    {Object.entries(states).map(([state, { description, extraProps }]) => (
+  component: Button,
-      <StyledButtonContainer key={`${variant}-container-${state}`}>
+  decorators: [
-        <StyledDescription>{description}</StyledDescription>
+    (Story) => (
-        <Button {...props} {...extraProps(variant ?? '')} variant={variant} />
+      <StyledContainer>
-      </StyledButtonContainer>
+        <Story />
-    ))}
+      </StyledContainer>
-  </>
+    ),
-);
+  ],
-
-const ButtonGroupLine: React.FC<ButtonProps> = ({ variant, ...props }) => (
-  <>
-    {Object.entries(states).map(([state, { description, extraProps }]) => (
-      <StyledButtonContainer key={`${variant}-group-container-${state}`}>
-        <StyledDescription>{description}</StyledDescription>
-        <ButtonGroup>
-          <Button
-            {...props}
-            {...extraProps(`${variant}-left`)}
-            variant={variant}
-            title="Left"
-          />
-          <Button
-            {...props}
-            {...extraProps(`${variant}-center`)}
-            variant={variant}
-            title="Center"
-          />
-          <Button
-            {...props}
-            {...extraProps(`${variant}-right`)}
-            variant={variant}
-            title="Right"
-          />
-        </ButtonGroup>
-      </StyledButtonContainer>
-    ))}
-  </>
-);
-
-const generateStory = (
-  size: ButtonProps['size'],
-  type: 'button' | 'group',
-  LineComponent: React.ComponentType<ButtonProps>,
-): Story => ({
-  render: getRenderWrapperForComponent(
-    <StyledContainer>
-      {variants.map((variant) => (
-        <div key={variant}>
-          <StyledTitle>{variant}</StyledTitle>
-          <StyledLine>
-            <LineComponent
-              size={size}
-              variant={variant}
-              title={text('Text', 'A button title')}
-            />
-          </StyledLine>
-        </div>
-      ))}
-    </StyledContainer>,
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    let button;
-    if (type === 'group') {
-      button = canvas.getByTestId(`primary-left-button-default`);
-    } else {
-      button = canvas.getByTestId(`primary-button-default`);
-    }
-
-    const numberOfClicks = clickJestFn.mock.calls.length;
-    await userEvent.click(button);
-    expect(clickJestFn).toHaveBeenCalledTimes(numberOfClicks + 1);
-  },
   parameters: {
     pseudo: Object.keys(states).reduce(
       (acc, state) => ({
@@ -210,20 +131,105 @@ const generateStory = (
           (variant) =>
             variant &&
             ['#left', '#center', '#right'].map(
-              (pos) => `${pos}-${variant}-${type}-${state}`,
+              (pos) => `${pos}-${variant}-button-${state}`,
             ),
         ),
       }),
       {},
     ),
   },
-});
+  argTypes: { icon: { control: false }, variant: { control: false } },
+  args: { title: 'A button title' },
+};
 
-export const MediumSize = generateStory('medium', 'button', ButtonLine);
+export default meta;
-export const SmallSize = generateStory('small', 'button', ButtonLine);
+type Story = StoryObj<typeof Button>;
-export const MediumSizeGroup = generateStory(
+
-  'medium',
+const clickJestFn = jest.fn();
-  'group',
+
-  ButtonGroupLine,
+export const MediumSize: Story = {
-);
+  args: { size: 'medium' },
-export const SmallSizeGroup = generateStory('small', 'group', ButtonGroupLine);
+  render: (args) => (
+    <>
+      {variants.map((variant) => (
+        <div key={variant}>
+          <StyledTitle>{variant}</StyledTitle>
+          <StyledLine>
+            {Object.entries(states).map(
+              ([state, { description, extraProps }]) => (
+                <StyledButtonContainer key={`${variant}-container-${state}`}>
+                  <StyledDescription>{description}</StyledDescription>
+                  <Button
+                    {...args}
+                    {...extraProps(variant ?? '')}
+                    variant={variant}
+                  />
+                </StyledButtonContainer>
+              ),
+            )}
+          </StyledLine>
+        </div>
+      ))}
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId('primary-button-default');
+
+    const numberOfClicks = clickJestFn.mock.calls.length;
+    await userEvent.click(button);
+    expect(clickJestFn).toHaveBeenCalledTimes(numberOfClicks + 1);
+  },
+};
+
+export const SmallSize: Story = {
+  ...MediumSize,
+  args: { size: 'small' },
+};
+
+export const MediumSizeGroup: Story = {
+  args: { size: 'medium' },
+  render: (args) => (
+    <>
+      {variants.map((variant) => (
+        <div key={variant}>
+          <StyledTitle>{variant}</StyledTitle>
+          <StyledLine>
+            {Object.entries(states).map(
+              ([state, { description, extraProps }]) => (
+                <StyledButtonContainer
+                  key={`${variant}-group-container-${state}`}
+                >
+                  <StyledDescription>{description}</StyledDescription>
+                  <ButtonGroup>
+                    {['Left', 'Center', 'Right'].map((position) => (
+                      <Button
+                        {...args}
+                        {...extraProps(`${variant}-${position.toLowerCase()}`)}
+                        variant={variant}
+                        title={position}
+                      />
+                    ))}
+                  </ButtonGroup>
+                </StyledButtonContainer>
+              ),
+            )}
+          </StyledLine>
+        </div>
+      ))}
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId('primary-left-button-default');
+
+    const numberOfClicks = clickJestFn.mock.calls.length;
+    await userEvent.click(button);
+    expect(clickJestFn).toHaveBeenCalledTimes(numberOfClicks + 1);
+  },
+};
+
+export const SmallSizeGroup: Story = {
+  ...MediumSizeGroup,
+  args: { size: 'small' },
+};

front/src/modules/ui/button/components/__stories__/IconButton.stories.tsx

@@ -1,12 +1,9 @@
-import React from 'react';
 import styled from '@emotion/styled';
-import { withKnobs } from '@storybook/addon-knobs';
 import { expect, jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { IconUser } from '@/ui/icon';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 
 import { IconButton } from '../IconButton';
 
@@ -16,6 +13,7 @@ const StyledContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
+  padding: 20px;
   width: 800px;
   > * + * {
     margin-top: ${({ theme }) => theme.spacing(4)};
@@ -55,7 +53,14 @@ const StyledIconButtonContainer = styled.div`
 const meta: Meta<typeof IconButton> = {
   title: 'UI/Button/IconButton',
   component: IconButton,
-  decorators: [withKnobs],
+  decorators: [
+    (Story) => (
+      <StyledContainer>
+        <Story />
+      </StyledContainer>
+    ),
+  ],
+  argTypes: { icon: { control: false }, variant: { control: false } },
 };
 
 export default meta;
@@ -101,53 +106,51 @@ const states = {
   },
 };
 
-function IconButtonRow({ variant, size, ...props }: IconButtonProps) {
+export const LargeSize: Story = {
-  const iconSize = size === 'small' ? 14 : 16;
+  args: { size: 'large' },
-  return (
+  render: (args) => (
     <>
-      {Object.entries(states).map(([state, { description, extraProps }]) => (
-        <StyledIconButtonContainer key={`${variant}-container-${state}`}>
-          <StyledDescription>{description}</StyledDescription>
-          <IconButton
-            {...props}
-            {...extraProps(variant ?? '')}
-            variant={variant}
-            size={size}
-            icon={<IconUser size={iconSize} />}
-          />
-        </StyledIconButtonContainer>
-      ))}
-    </>
-  );
-}
-
-const generateStory = (
-  size: IconButtonProps['size'],
-  LineComponent: React.ComponentType<IconButtonProps>,
-): Story => ({
-  render: getRenderWrapperForComponent(
-    <StyledContainer>
       {variants.map((variant) => (
         <div key={variant}>
           <StyledTitle>{variant}</StyledTitle>
           <StyledLine>
-            <LineComponent size={size} variant={variant} />
+            {Object.entries(states).map(
+              ([state, { description, extraProps }]) => (
+                <StyledIconButtonContainer
+                  key={`${variant}-container-${state}`}
+                >
+                  <StyledDescription>{description}</StyledDescription>
+                  <IconButton
+                    {...args}
+                    {...extraProps(variant ?? '')}
+                    variant={variant}
+                    icon={<IconUser size={args.size === 'small' ? 14 : 16} />}
+                  />
+                </StyledIconButtonContainer>
+              ),
+            )}
           </StyledLine>
         </div>
       ))}
-    </StyledContainer>,
+    </>
   ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const button = canvas.getByTestId(`transparent-button-default`);
+    const button = canvas.getByTestId('transparent-button-default');
 
     const numberOfClicks = clickJestFn.mock.calls.length;
     await userEvent.click(button);
     expect(clickJestFn).toHaveBeenCalledTimes(numberOfClicks + 1);
   },
-});
+};
 
-export const LargeSize = generateStory('large', IconButtonRow);
+export const MediumSize: Story = {
-export const MediumSize = generateStory('medium', IconButtonRow);
+  ...LargeSize,
-export const SmallSize = generateStory('small', IconButtonRow);
+  args: { size: 'medium' },
+};
+
+export const SmallSize: Story = {
+  ...LargeSize,
+  args: { size: 'small' },
+};

front/src/modules/ui/button/components/__stories__/MainButton.stories.tsx

@@ -3,24 +3,32 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { IconBrandGoogle } from '@/ui/icon';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { MainButton } from '../MainButton';
 
+const clickJestFn = jest.fn();
+
 const meta: Meta<typeof MainButton> = {
   title: 'UI/Button/MainButton',
   component: MainButton,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    icon: {
+      type: 'boolean',
+      mapping: {
+        true: <IconBrandGoogle size={16} stroke={4} />,
+        false: undefined,
+      },
+    },
+  },
+  args: { title: 'A primary Button', onClick: clickJestFn },
 };
 
 export default meta;
 type Story = StoryObj<typeof MainButton>;
 
-const clickJestFn = jest.fn();
+export const Default: Story = {
-
-export const DefaultPrimary: Story = {
-  render: getRenderWrapperForComponent(
-    <MainButton title="A primary Button" onClick={clickJestFn} />,
-  ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -32,64 +40,30 @@ export const DefaultPrimary: Story = {
   },
 };
 
-export const WithIconPrimary: Story = {
+export const WithIcon: Story = {
-  render: getRenderWrapperForComponent(
+  args: { icon: true },
-    <MainButton
-      icon={<IconBrandGoogle size={16} stroke={4} />}
-      title="A primary Button"
-    />,
-  ),
 };
 
-export const WithIconPrimaryDisabled: Story = {
+export const DisabledWithIcon: Story = {
-  render: getRenderWrapperForComponent(
+  args: { ...WithIcon.args, disabled: true },
-    <MainButton
-      icon={<IconBrandGoogle size={16} stroke={4} />}
-      title="A primary Button"
-      disabled
-    />,
-  ),
 };
 
-export const FullWidthPrimary: Story = {
+export const FullWidth: Story = {
-  render: getRenderWrapperForComponent(
+  args: { fullWidth: true },
-    <MainButton title="A primary Button" fullWidth />,
-  ),
 };
 
-export const DefaultSecondary: Story = {
+export const Secondary: Story = {
-  render: getRenderWrapperForComponent(
+  args: { title: 'A secondary Button', variant: 'secondary' },
-    <MainButton
-      title="A secondary Button"
-      onClick={clickJestFn}
-      variant="secondary"
-    />,
-  ),
 };
 
-export const WithIconSecondary: Story = {
+export const SecondaryWithIcon: Story = {
-  render: getRenderWrapperForComponent(
+  args: { ...Secondary.args, ...WithIcon.args },
-    <MainButton
-      icon={<IconBrandGoogle size={16} stroke={4} />}
-      title="A secondary Button"
-      variant="secondary"
-    />,
-  ),
 };
 
-export const WithIconSecondaryDisabled: Story = {
+export const SecondaryDisabledWithIcon: Story = {
-  render: getRenderWrapperForComponent(
+  args: { ...SecondaryWithIcon.args, disabled: true },
-    <MainButton
-      icon={<IconBrandGoogle size={16} stroke={4} />}
-      title="A secondary Button"
-      variant="secondary"
-      disabled
-    />,
-  ),
 };
 
-export const FullWidthSecondary: Story = {
+export const SecondaryFullWidth: Story = {
-  render: getRenderWrapperForComponent(
+  args: { ...Secondary.args, ...FullWidth.args },
-    <MainButton title="A secondary Button" variant="secondary" fullWidth />,
-  ),
 };

front/src/modules/ui/button/components/__stories__/RoundedIconButton.stories.tsx

@@ -3,27 +3,23 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { IconArrowRight } from '@/ui/icon';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { RoundedIconButton } from '../RoundedIconButton';
 
+const clickJestFn = jest.fn();
+
 const meta: Meta<typeof RoundedIconButton> = {
   title: 'UI/Button/RoundedIconButton',
   component: RoundedIconButton,
+  decorators: [ComponentDecorator],
+  args: { onClick: clickJestFn, icon: <IconArrowRight size={15} /> },
 };
 
 export default meta;
 type Story = StoryObj<typeof RoundedIconButton>;
 
-const clickJestFn = jest.fn();
-
 export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <RoundedIconButton
-      onClick={clickJestFn}
-      icon={<IconArrowRight size={15} />}
-    />,
-  ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 

front/src/modules/ui/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { ColorSchemeCard } from '../ColorSchemeCard';
 
@@ -16,27 +16,34 @@ const Container = styled.div`
 const meta: Meta<typeof ColorSchemeCard> = {
   title: 'UI/ColorScheme/ColorSchemeCard',
   component: ColorSchemeCard,
+  decorators: [
+    (Story) => (
+      <Container>
+        <Story />
+      </Container>
+    ),
+    ComponentDecorator,
+  ],
+  argTypes: {
+    variant: { control: false },
+  },
+  args: { selected: false },
 };
 
 export default meta;
 type Story = StoryObj<typeof ColorSchemeCard>;
 
 export const Default: Story = {
-  render: getRenderWrapperForComponent(
+  render: (args) => (
-    <Container>
+    <>
-      <ColorSchemeCard variant="light" selected={false} />
+      <ColorSchemeCard variant="light" selected={args.selected} />
-      <ColorSchemeCard variant="dark" selected={false} />
+      <ColorSchemeCard variant="dark" selected={args.selected} />
-      <ColorSchemeCard variant="system" selected={false} />
+      <ColorSchemeCard variant="system" selected={args.selected} />
-    </Container>,
+    </>
   ),
 };
 
 export const Selected: Story = {
-  render: getRenderWrapperForComponent(
+  ...Default,
-    <Container>
+  args: { selected: true },
-      <ColorSchemeCard variant="light" selected={true} />
-      <ColorSchemeCard variant="dark" selected={true} />
-      <ColorSchemeCard variant="system" selected={true} />
-    </Container>,
-  ),
 };

front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { IconPlus } from '@/ui/icon/index';
 import { Avatar } from '@/users/components/Avatar';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { DropdownMenu } from '../DropdownMenu';
 import { DropdownMenuCheckableItem } from '../DropdownMenuCheckableItem';
@@ -17,6 +17,11 @@ import { DropdownMenuSeparator } from '../DropdownMenuSeparator';
 const meta: Meta<typeof DropdownMenu> = {
   title: 'UI/Dropdown/DropdownMenu',
   component: DropdownMenu,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    as: { table: { disable: true } },
+    theme: { table: { disable: true } },
+  },
 };
 
 export default meta;
@@ -97,236 +102,169 @@ const mockSelectArray = [
   },
 ];
 
+const FakeSelectableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+
+  return (
+    <>
+      {mockSelectArray.map((item) => (
+        <DropdownMenuSelectableItem
+          key={item.id}
+          selected={selectedItem === item.id}
+          onClick={() => setSelectedItem(item.id)}
+        >
+          {hasAvatar && (
+            <Avatar
+              placeholder="A"
+              avatarUrl={item.avatarUrl}
+              size={16}
+              type="squared"
+            />
+          )}
+          {item.name}
+        </DropdownMenuSelectableItem>
+      ))}
+    </>
+  );
+};
+
+const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+
+  return (
+    <>
+      {mockSelectArray.map((item) => (
+        <DropdownMenuCheckableItem
+          key={item.id}
+          id={item.id}
+          checked={selectedItems.includes(item.id)}
+          onChange={(checked) => {
+            if (checked) {
+              setSelectedItems([...selectedItems, item.id]);
+            } else {
+              setSelectedItems(selectedItems.filter((id) => id !== item.id));
+            }
+          }}
+        >
+          {hasAvatar && (
+            <Avatar
+              placeholder="A"
+              avatarUrl={item.avatarUrl}
+              size={16}
+              type="squared"
+            />
+          )}
+          {item.name}
+        </DropdownMenuCheckableItem>
+      ))}
+    </>
+  );
+};
+
 export const Empty: Story = {
-  render: getRenderWrapperForComponent(
+  render: (args) => (
-    <DropdownMenu>
+    <DropdownMenu {...args}>
       <FakeMenuContent />
-    </DropdownMenu>,
+    </DropdownMenu>
   ),
 };
 
-const DropdownMenuStoryWrapper = ({
+export const WithContentBelow: Story = {
-  children,
+  ...Empty,
-}: React.PropsWithChildren<unknown>) => (
+  decorators: [
-  <FakeBelowContainer>
+    (Story) => (
-    <FakeContentBelow />
+      <FakeBelowContainer>
-    <MenuAbsolutePositionWrapper>
+        <FakeContentBelow />
-      <DropdownMenu>{children}</DropdownMenu>
+        <MenuAbsolutePositionWrapper>
-    </MenuAbsolutePositionWrapper>
+          <Story />
-  </FakeBelowContainer>
+        </MenuAbsolutePositionWrapper>
-);
+      </FakeBelowContainer>
-
+    ),
-export const EmptyWithContentBelow: Story = {
+  ],
-  render: getRenderWrapperForComponent(
-    <DropdownMenuStoryWrapper>
-      <FakeMenuContent />
-    </DropdownMenuStoryWrapper>,
-  ),
 };
 
 export const SimpleMenuItem: Story = {
-  render: getRenderWrapperForComponent(
+  ...WithContentBelow,
-    <DropdownMenuStoryWrapper>
+  render: (args) => (
+    <DropdownMenu {...args}>
       <DropdownMenuItemsContainer hasMaxHeight>
         <FakeMenuItemList />
       </DropdownMenuItemsContainer>
-    </DropdownMenuStoryWrapper>,
+    </DropdownMenu>
   ),
 };
 
 export const Search: Story = {
-  render: getRenderWrapperForComponent(
+  ...WithContentBelow,
-    <FakeBelowContainer>
+  render: (args) => (
-      <FakeContentBelow />
+    <DropdownMenu {...args}>
-      <MenuAbsolutePositionWrapper>
+      <DropdownMenuSearch />
-        <DropdownMenu>
+      <DropdownMenuSeparator />
-          <DropdownMenuSearch />
+      <DropdownMenuItemsContainer hasMaxHeight>
-          <DropdownMenuSeparator />
+        <FakeMenuItemList />
-          <DropdownMenuItemsContainer hasMaxHeight>
+      </DropdownMenuItemsContainer>
-            <FakeMenuItemList />
+    </DropdownMenu>
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
-      </MenuAbsolutePositionWrapper>
-    </FakeBelowContainer>,
   ),
 };
 
-const FakeSelectableMenuItemList = () => {
-  const [selectedItem, setSelectedItem] = useState<string | null>(null);
-
-  return (
-    <>
-      {mockSelectArray.map((item) => (
-        <DropdownMenuSelectableItem
-          key={item.id}
-          selected={selectedItem === item.id}
-          onClick={() => setSelectedItem(item.id)}
-        >
-          {item.name}
-        </DropdownMenuSelectableItem>
-      ))}
-    </>
-  );
-};
-
 export const Button: Story = {
-  render: getRenderWrapperForComponent(
+  ...WithContentBelow,
-    <FakeBelowContainer>
+  render: (args) => (
-      <FakeContentBelow />
+    <DropdownMenu {...args}>
-      <MenuAbsolutePositionWrapper>
+      <DropdownMenuItemsContainer hasMaxHeight>
-        <DropdownMenu>
+        <DropdownMenuItem>
-          <DropdownMenuItemsContainer hasMaxHeight>
+          <IconPlus size={16} />
-            <DropdownMenuItem>
+          <div>Create new</div>
-              <IconPlus size={16} />
+        </DropdownMenuItem>
-              <div>Create new</div>
+      </DropdownMenuItemsContainer>
-            </DropdownMenuItem>
+      <DropdownMenuSeparator />
-          </DropdownMenuItemsContainer>
+      <DropdownMenuItemsContainer hasMaxHeight>
-          <DropdownMenuSeparator />
+        <FakeSelectableMenuItemList />
-          <DropdownMenuItemsContainer hasMaxHeight>
+      </DropdownMenuItemsContainer>
-            <FakeSelectableMenuItemList />
+    </DropdownMenu>
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
-      </MenuAbsolutePositionWrapper>
-    </FakeBelowContainer>,
   ),
 };
 
 export const SelectableMenuItem: Story = {
-  render: getRenderWrapperForComponent(
+  ...WithContentBelow,
-    <FakeBelowContainer>
+  render: (args) => (
-      <FakeContentBelow />
+    <DropdownMenu {...args}>
-      <MenuAbsolutePositionWrapper>
+      <DropdownMenuItemsContainer hasMaxHeight>
-        <DropdownMenu>
+        <FakeSelectableMenuItemList />
-          <DropdownMenuItemsContainer hasMaxHeight>
+      </DropdownMenuItemsContainer>
-            <FakeSelectableMenuItemList />
+    </DropdownMenu>
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
-      </MenuAbsolutePositionWrapper>
-    </FakeBelowContainer>,
   ),
 };
 
-const FakeSelectableMenuItemWithAvatarList = () => {
-  const [selectedItem, setSelectedItem] = useState<string | null>(null);
-
-  return (
-    <>
-      {mockSelectArray.map((item) => (
-        <DropdownMenuSelectableItem
-          key={item.id}
-          selected={selectedItem === item.id}
-          onClick={() => setSelectedItem(item.id)}
-        >
-          <Avatar
-            placeholder="A"
-            avatarUrl={item.avatarUrl}
-            size={16}
-            type="squared"
-          />
-          {item.name}
-        </DropdownMenuSelectableItem>
-      ))}
-    </>
-  );
-};
-
 export const SelectableMenuItemWithAvatar: Story = {
-  render: getRenderWrapperForComponent(
+  ...WithContentBelow,
-    <FakeBelowContainer>
+  render: (args) => (
-      <FakeContentBelow />
+    <DropdownMenu {...args}>
-      <MenuAbsolutePositionWrapper>
+      <DropdownMenuItemsContainer hasMaxHeight>
-        <DropdownMenu>
+        <FakeSelectableMenuItemList hasAvatar />
-          <DropdownMenuItemsContainer hasMaxHeight>
+      </DropdownMenuItemsContainer>
-            <FakeSelectableMenuItemWithAvatarList />
+    </DropdownMenu>
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
-      </MenuAbsolutePositionWrapper>
-    </FakeBelowContainer>,
   ),
 };
 
-const FakeCheckableMenuItemList = () => {
-  const [selectedItems, setSelectedItems] = useState<string[]>([]);
-
-  return (
-    <>
-      {mockSelectArray.map((item) => (
-        <DropdownMenuCheckableItem
-          key={item.id}
-          id={item.id}
-          checked={selectedItems.includes(item.id)}
-          onChange={(checked) => {
-            if (checked) {
-              setSelectedItems([...selectedItems, item.id]);
-            } else {
-              setSelectedItems(selectedItems.filter((id) => id !== item.id));
-            }
-          }}
-        >
-          {item.name}
-        </DropdownMenuCheckableItem>
-      ))}
-    </>
-  );
-};
-
 export const CheckableMenuItem: Story = {
-  render: getRenderWrapperForComponent(
+  ...WithContentBelow,
-    <FakeBelowContainer>
+  render: (args) => (
-      <FakeContentBelow />
+    <DropdownMenu {...args}>
-      <MenuAbsolutePositionWrapper>
+      <DropdownMenuItemsContainer hasMaxHeight>
-        <DropdownMenu>
+        <FakeCheckableMenuItemList />
-          <DropdownMenuItemsContainer hasMaxHeight>
+      </DropdownMenuItemsContainer>
-            <FakeCheckableMenuItemList />
+    </DropdownMenu>
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
-      </MenuAbsolutePositionWrapper>
-    </FakeBelowContainer>,
   ),
 };
 
-const FakeCheckableMenuItemWithAvatarList = () => {
-  const [selectedItems, setSelectedItems] = useState<string[]>([]);
-
-  return (
-    <>
-      {mockSelectArray.map((item) => (
-        <DropdownMenuCheckableItem
-          key={item.id}
-          id={item.id}
-          checked={selectedItems.includes(item.id)}
-          onChange={(checked) => {
-            if (checked) {
-              setSelectedItems([...selectedItems, item.id]);
-            } else {
-              setSelectedItems(selectedItems.filter((id) => id !== item.id));
-            }
-          }}
-        >
-          <Avatar
-            placeholder="A"
-            avatarUrl={item.avatarUrl}
-            size={16}
-            type="squared"
-          />
-          {item.name}
-        </DropdownMenuCheckableItem>
-      ))}
-    </>
-  );
-};
-
 export const CheckableMenuItemWithAvatar: Story = {
-  render: getRenderWrapperForComponent(
+  ...WithContentBelow,
-    <FakeBelowContainer>
+  render: (args) => (
-      <FakeContentBelow />
+    <DropdownMenu {...args}>
-      <MenuAbsolutePositionWrapper>
+      <DropdownMenuItemsContainer hasMaxHeight>
-        <DropdownMenu>
+        <FakeCheckableMenuItemList hasAvatar />
-          <DropdownMenuItemsContainer hasMaxHeight>
+      </DropdownMenuItemsContainer>
-            <FakeCheckableMenuItemWithAvatarList />
+    </DropdownMenu>
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
-      </MenuAbsolutePositionWrapper>
-    </FakeBelowContainer>,
   ),
 };

front/src/modules/ui/editable-field/variants/components/__stories__/DateEditableField.stories.tsx

@@ -1,23 +1,31 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconCalendar } from '@tabler/icons-react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { DateEditableField } from '../DateEditableField';
 
 const meta: Meta<typeof DateEditableField> = {
   title: 'UI/EditableField/DateEditableField',
   component: DateEditableField,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    icon: {
+      type: 'boolean',
+      mapping: {
+        true: <IconCalendar />,
+        false: undefined,
+      },
+    },
+    value: { control: { type: 'date' } },
+  },
+  args: {
+    value: new Date().toISOString(),
+    icon: true,
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof DateEditableField>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(
-    <DateEditableField
-      value={new Date().toISOString()}
-      icon={<IconCalendar />}
-    />,
-  ),
-};

front/src/modules/ui/editable-field/variants/components/__stories__/NumberEditableField.stories.tsx

@@ -1,24 +1,32 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconCurrencyDollar } from '@tabler/icons-react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { NumberEditableField } from '../NumberEditableField';
 
 const meta: Meta<typeof NumberEditableField> = {
   title: 'UI/EditableField/NumberEditableField',
   component: NumberEditableField,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    icon: {
+      type: 'boolean',
+      mapping: {
+        true: <IconCurrencyDollar />,
+        false: undefined,
+      },
+    },
+    value: { control: { type: 'number' } },
+  },
+  args: {
+    value: 10,
+    icon: true,
+    placeholder: 'Number',
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof NumberEditableField>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(
-    <NumberEditableField
-      value={10}
-      icon={<IconCurrencyDollar />}
-      placeholder="Number"
-    />,
-  ),
-};

front/src/modules/ui/editable-field/variants/components/__stories__/PhoneEditableField.stories.tsx

@@ -2,26 +2,38 @@ import { BrowserRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconPhone } from '@tabler/icons-react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { PhoneEditableField } from '../PhoneEditableField';
 
 const meta: Meta<typeof PhoneEditableField> = {
   title: 'UI/EditableField/PhoneEditableField',
   component: PhoneEditableField,
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+    ComponentDecorator,
+  ],
+  argTypes: {
+    icon: {
+      type: 'boolean',
+      mapping: {
+        true: <IconPhone />,
+        false: undefined,
+      },
+    },
+  },
+  args: {
+    value: '+33714446494',
+    icon: true,
+    placeholder: 'Phone',
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof PhoneEditableField>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(
-    <BrowserRouter>
-      <PhoneEditableField
-        value={'+33714446494'}
-        icon={<IconPhone />}
-        placeholder="Phone"
-      />
-    </BrowserRouter>,
-  ),
-};

front/src/modules/ui/editable-field/variants/components/__stories__/TextEditableField.stories.tsx

@@ -1,24 +1,31 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconUser } from '@tabler/icons-react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { TextEditableField } from '../TextEditableField';
 
 const meta: Meta<typeof TextEditableField> = {
   title: 'UI/EditableField/TextEditableField',
   component: TextEditableField,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    icon: {
+      type: 'boolean',
+      mapping: {
+        true: <IconUser />,
+        false: undefined,
+      },
+    },
+  },
+  args: {
+    value: 'John Doe',
+    icon: true,
+    placeholder: 'Name',
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof TextEditableField>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(
-    <TextEditableField
-      value={'John Doe'}
-      icon={<IconUser />}
-      placeholder="Name"
-    />,
-  ),
-};

front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx

@@ -1,17 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { AutosizeTextInput } from '../AutosizeTextInput';
 
 const meta: Meta<typeof AutosizeTextInput> = {
   title: 'UI/Inputs/AutosizeTextInput',
   component: AutosizeTextInput,
+  decorators: [ComponentDecorator],
 };
 
 export default meta;
 type Story = StoryObj<typeof AutosizeTextInput>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(<AutosizeTextInput />),
-};

front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx

@@ -4,37 +4,44 @@ import { jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { TextInput } from '../TextInput';
 
+const changeJestFn = jest.fn();
+
 const meta: Meta<typeof TextInput> = {
   title: 'UI/Inputs/TextInput',
   component: TextInput,
+  decorators: [ComponentDecorator],
+  args: { value: '', onChange: changeJestFn, placeholder: 'Placeholder' },
 };
 
 export default meta;
 type Story = StoryObj<typeof TextInput>;
 
-const changeJestFn = jest.fn();
+function FakeTextInput({
-
+  onChange,
-function FakeTextInput({ onChange }: any) {
+  value: initialValue,
-  const [value, setValue] = useState<string>('A good value ');
+  ...props
+}: React.ComponentProps<typeof TextInput>) {
+  const [value, setValue] = useState(initialValue);
   return (
     <TextInput
+      {...props}
       value={value}
       onChange={(text) => {
         setValue(text);
-        onChange(text);
+        onChange?.(text);
       }}
     />
   );
 }
 
 export const Default: Story = {
-  render: getRenderWrapperForComponent(
+  argTypes: { value: { control: false } },
-    <FakeTextInput onChange={changeJestFn} />,
+  args: { value: 'A good value ' },
-  ),
+  render: (args) => <FakeTextInput {...args} />,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -47,31 +54,22 @@ export const Default: Story = {
   },
 };
 
-export const Placeholder: Story = {
+export const Placeholder: Story = {};
-  render: getRenderWrapperForComponent(
-    <TextInput value="" onChange={changeJestFn} placeholder="Placeholder" />,
-  ),
-};
 
 export const FullWidth: Story = {
-  render: getRenderWrapperForComponent(
+  args: { value: 'A good value', fullWidth: true },
-    <TextInput
+};
-      value="A good value"
+
-      onChange={changeJestFn}
+export const WithLabel: Story = {
-      placeholder="Placeholder"
+  args: { label: 'Lorem ipsum' },
-      fullWidth
+};
-    />,
+
-  ),
+export const WithError: Story = {
+  args: { error: 'Lorem ipsum' },
 };
 
 export const PasswordInput: Story = {
-  render: getRenderWrapperForComponent(
+  args: { type: 'password', placeholder: 'Password' },
-    <TextInput
-      onChange={changeJestFn}
-      type="password"
-      placeholder="Password"
-    />,
-  ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 

front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx

@@ -3,13 +3,21 @@ import { expect, jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { PrimaryLink } from '../PrimaryLink';
 
 const meta: Meta<typeof PrimaryLink> = {
   title: 'UI/Links/PrimaryLink',
   component: PrimaryLink,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+    ComponentDecorator,
+  ],
 };
 
 export default meta;
@@ -18,13 +26,7 @@ type Story = StoryObj<typeof PrimaryLink>;
 const clickJestFn = jest.fn();
 
 export const Default: Story = {
-  render: getRenderWrapperForComponent(
+  args: { href: '/test', onClick: clickJestFn, children: 'A primary link' },
-    <MemoryRouter>
-      <PrimaryLink href="/test" onClick={clickJestFn}>
-        A primary link
-      </PrimaryLink>
-    </MemoryRouter>,
-  ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 

front/src/modules/ui/pill/components/__stories__/SoonPill.stories.tsx

@@ -1,17 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { SoonPill } from '../SoonPill';
 
 const meta: Meta<typeof SoonPill> = {
   title: 'UI/Accessories/SoonPill',
   component: SoonPill,
+  decorators: [ComponentDecorator],
 };
 
 export default meta;
 type Story = StoryObj<typeof SoonPill>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(<SoonPill />),
-};

front/src/modules/ui/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx

@@ -1,33 +1,27 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { ComponentDecorator } from '~/testing/decorators';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 
 import { RightDrawerTopBar } from '../RightDrawerTopBar';
 
 const meta: Meta<typeof RightDrawerTopBar> = {
   title: 'UI/RightDrawer/RightDrawerTopBar',
   component: RightDrawerTopBar,
-  argTypes: {
+  decorators: [
-    title: {
+    (Story) => (
-      control: { type: 'text' },
+      <div style={{ width: '500px' }}>
-      defaultValue: 'My Title',
+        <Story />
-    },
+      </div>
+    ),
+    ComponentDecorator,
+  ],
+  parameters: {
+    msw: graphqlMocks,
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof RightDrawerTopBar>;
 
-export const Default: Story = {
+export const Default: Story = {};
-  render: getRenderWrapperForComponent(
-    <div style={{ width: '500px' }}>
-      <RightDrawerTopBar />
-    </div>,
-  ),
-  parameters: {
-    msw: graphqlMocks,
-    actions: { argTypesRegex: '^on.*' },
-  },
-  args: {},
-};

front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx

@@ -1,12 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
 
 import { Tag } from '../Tag';
 
 const meta: Meta<typeof Tag> = {
   title: 'UI/Accessories/Tag',
   component: Tag,
+  decorators: [ComponentDecorator],
+  argTypes: { color: { control: false } },
+  args: { text: 'Urgent' },
 };
 
 export default meta;
@@ -26,11 +29,11 @@ const TESTED_COLORS = [
 ];
 
 export const AllTags: Story = {
-  render: getRenderWrapperForComponent(
+  render: (args) => (
     <>
       {TESTED_COLORS.map((color) => (
-        <Tag text="Urgent" color={color} />
+        <Tag {...args} color={color} />
       ))}
-    </>,
+    </>
   ),
 };

front/src/modules/users/components/__stories__/Avatar.stories.tsx

@@ -1,40 +1,33 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators';
+import { avatarUrl } from '~/testing/mock-data/users';
 
 import { Avatar } from '../Avatar';
 
 const meta: Meta<typeof Avatar> = {
   title: 'Modules/Users/Avatar',
   component: Avatar,
+  decorators: [ComponentDecorator],
+  args: { avatarUrl, size: 16, placeholder: 'L', type: 'rounded' },
 };
 
 export default meta;
 type Story = StoryObj<typeof Avatar>;
 
-const avatarUrl =
+export const Rounded: Story = {};
-  'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=';
-
-export const Rounded: Story = {
-  render: getRenderWrapperForComponent(
-    <Avatar avatarUrl={avatarUrl} size={16} placeholder="L" type="rounded" />,
-  ),
-};
 
 export const Squared: Story = {
-  render: getRenderWrapperForComponent(
+  args: { type: 'squared' },
-    <Avatar avatarUrl={avatarUrl} size={16} placeholder="L" type="squared" />,
-  ),
 };
 
 export const NoAvatarPictureRounded: Story = {
-  render: getRenderWrapperForComponent(
+  args: { avatarUrl: '' },
-    <Avatar avatarUrl={''} size={16} placeholder="L" type="rounded" />,
-  ),
 };
 
 export const NoAvatarPictureSquared: Story = {
-  render: getRenderWrapperForComponent(
+  args: {
-    <Avatar avatarUrl={''} size={16} placeholder="L" type="squared" />,
+    ...NoAvatarPictureRounded.args,
-  ),
+    ...Squared.args,
+  },
 };

front/src/testing/decorators.tsx

@@ -1,20 +1,11 @@
-import { useEffect } from 'react';
 import { ApolloProvider } from '@apollo/client';
 import { Decorator } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 
-import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
-import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
-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 { CellContext } from '@/ui/table/states/CellContext';
 import { RowContext } from '@/ui/table/states/RowContext';
 
-import { mockedPipelineProgressData } from './mock-data/pipeline-progress';
 import { ComponentStorybookLayout } from './ComponentStorybookLayout';
 import { mockedClient } from './mockedClient';
 
@@ -39,46 +30,3 @@ export const CellPositionDecorator: Decorator = (Story) => (
     </RecoilScope>
   </RecoilScope>
 );
-
-export const BoardDecorator: Decorator = (Story) => (
-  <>
-    <RecoilScope SpecificContext={CompanyBoardContext}>
-      <HooksCompanyBoard
-        availableFilters={[]}
-        orderBy={defaultPipelineProgressOrderBy}
-      />
-      <Story />
-    </RecoilScope>
-  </>
-);
-
-function HookLoadFakeBoardContextState() {
-  const [, setPipelineProgressId] = useRecoilScopedState(
-    pipelineProgressIdScopedState,
-    BoardCardContext,
-  );
-  const pipelineProgress = mockedPipelineProgressData[1];
-  useEffect(() => {
-    setPipelineProgressId(pipelineProgress?.id || '');
-  }, [pipelineProgress?.id, setPipelineProgressId]);
-  return <></>;
-}
-
-export const BoardCardDecorator: Decorator = (Story) => {
-  return (
-    <>
-      <RecoilScope SpecificContext={CompanyBoardContext}>
-        <HooksCompanyBoard
-          availableFilters={[]}
-          orderBy={defaultPipelineProgressOrderBy}
-        />
-        <RecoilScope SpecificContext={BoardColumnContext}>
-          <RecoilScope SpecificContext={BoardCardContext}>
-            <HookLoadFakeBoardContextState />
-            <Story />
-          </RecoilScope>
-        </RecoilScope>
-      </RecoilScope>
-    </>
-  );
-};

front/src/testing/mock-data/users.ts

@@ -2,6 +2,9 @@ import { ColorScheme, GetCurrentUserQuery } from '~/generated/graphql';
 
 type MockedUser = GetCurrentUserQuery['currentUser'];
 
+export const avatarUrl =
+  'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=';
+
 export const mockedUsersData: Array<MockedUser> = [
   {
     id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',

front/src/testing/renderWrappers.tsx

@@ -35,12 +35,6 @@ export function getRenderWrapperForPage(
   };
 }
 
-export function getRenderWrapperForComponent(children: React.ReactElement) {
-  return function render() {
-    return <ComponentStorybookLayout>{children}</ComponentStorybookLayout>;
-  };
-}
-
 export function getRenderWrapperForEntityTableComponent(
   children: React.ReactElement,
 ) {

front/yarn.lock

@@ -1409,7 +1409,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.22.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
   integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
@@ -1713,7 +1713,7 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
-"@emotion/cache@^11.10.5", "@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0":
+"@emotion/cache@^11.10.5", "@emotion/cache@^11.11.0":
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
   integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
@@ -1753,7 +1753,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/react@^11.10.5", "@emotion/react@^11.10.6", "@emotion/react@^11.8.1":
+"@emotion/react@^11.10.5", "@emotion/react@^11.10.6":
   version "11.11.1"
   resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
   integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
@@ -1967,7 +1967,7 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.1.tgz#4d795b649cc3b1cbb760d191c80dcb4353c9a366"
   integrity sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==
 
-"@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.0.1", "@floating-ui/dom@^1.2.1", "@floating-ui/dom@^1.3.0":
+"@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.2.1", "@floating-ui/dom@^1.3.0":
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.4.tgz#cf859dde33995a4e7b6ded16c98cb73b2ebfffd0"
   integrity sha512-21hhDEPOiWkGp0Ys4Wi6Neriah7HweToKra626CIK712B5m9qkdz54OP9gVldUg+URnBTpv/j/bi/skmGdstXQ==
@@ -3729,23 +3729,6 @@
     polished "^4.2.2"
     ts-dedent "^2.2.0"
 
-"@storybook/addon-knobs@^7.0.2":
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-7.0.2.tgz#f28fd180d8a283df6eb67f8f2578f1563b7b7615"
-  integrity sha512-PzKuscxcBPhA2jpDxJ/F+BvBRqHJ8qBki1kS1IOjmJbAfE96WFnweXZ73ImyAJnRtmtReCL6p0ZmFkrNDMDpUw==
-  dependencies:
-    copy-to-clipboard "^3.3.3"
-    core-js "^3.29.0"
-    escape-html "^1.0.3"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.21"
-    prop-types "^15.8.1"
-    qs "^6.11.1"
-    react-colorful "^5.6.1"
-    react-lifecycles-compat "^3.0.4"
-    react-select "^5.7.0"
-
 "@storybook/addon-links@^7.0.22":
   version "7.0.26"
   resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.0.26.tgz#ae04e6afce9e9618d46a44862a0030a9c412d907"
@@ -5392,13 +5375,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.0":
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
-  integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react@*", "@types/react@>=16", "@types/react@^18.0.25":
   version "18.2.14"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.14.tgz#fa7a6fecf1ce35ca94e74874f70c56ce88f7a127"
@@ -8126,13 +8102,6 @@ cookie@^0.4.2:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
-copy-to-clipboard@^3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
-  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
-  dependencies:
-    toggle-selection "^1.0.6"
-
 core-js-compat@^3.25.1, core-js-compat@^3.31.0:
   version "3.31.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.31.1.tgz#5084ad1a46858df50ff89ace152441a63ba7aae0"
@@ -8150,7 +8119,7 @@ core-js@^2.4.0, core-js@^2.5.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-js@^3.19.2, core-js@^3.29.0:
+core-js@^3.19.2:
   version "3.31.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.31.1.tgz#f2b0eea9be9da0def2c5fece71064a7e5d687653"
   integrity sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==
@@ -8871,14 +8840,6 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^5.0.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -8905,11 +8866,6 @@ dom-serializer@^2.0.0:
     domhandler "^5.0.2"
     entities "^4.2.0"
 
-dom-walk@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
-  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
-
 domelementtype@1, domelementtype@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
@@ -9292,7 +9248,7 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
-escape-html@^1.0.3, escape-html@~1.0.3:
+escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
@@ -10469,14 +10425,6 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
-global@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
-  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
-  dependencies:
-    min-document "^2.19.0"
-    process "^0.11.10"
-
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -13785,13 +13733,6 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-min-document@^2.19.0:
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
-  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
-  dependencies:
-    dom-walk "^0.1.0"
-
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -15365,7 +15306,7 @@ prompts@^2.0.1, prompts@^2.4.0, prompts@^2.4.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -15637,7 +15578,7 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
-qs@^6.10.0, qs@^6.11.0, qs@^6.11.1, qs@^6.4.0:
+qs@^6.10.0, qs@^6.11.0, qs@^6.4.0:
   version "6.11.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
   integrity sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==
@@ -15705,7 +15646,7 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
-react-colorful@^5.1.2, react-colorful@^5.6.1:
+react-colorful@^5.1.2:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
@@ -15840,7 +15781,7 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -15979,21 +15920,6 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
-react-select@^5.7.0:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.3.tgz#fa0dc9a23cad6ff3871ad3829f6083a4b54961a2"
-  integrity sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==
-  dependencies:
-    "@babel/runtime" "^7.12.0"
-    "@emotion/cache" "^11.4.0"
-    "@emotion/react" "^11.8.1"
-    "@floating-ui/dom" "^1.0.1"
-    "@types/react-transition-group" "^4.4.0"
-    memoize-one "^6.0.0"
-    prop-types "^15.6.0"
-    react-transition-group "^4.3.0"
-    use-isomorphic-layout-effect "^1.1.2"
-
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
@@ -16029,16 +15955,6 @@ react-tooltip@^5.13.1:
     "@floating-ui/dom" "^1.0.0"
     classnames "^2.3.0"
 
-react-transition-group@^4.3.0:
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
-  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -17804,11 +17720,6 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-toggle-selection@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
-  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
-
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
@@ -18328,7 +18239,7 @@ use-composed-ref@^1.3.0:
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
   integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
 
-use-isomorphic-layout-effect@^1.1.1, use-isomorphic-layout-effect@^1.1.2:
+use-isomorphic-layout-effect@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==