From 07180af8c02048a4672d11ee986eab3d5bd58af8 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Mon, 24 Jul 2023 00:57:56 -0700
Subject: [PATCH] Improve tests (#871)

---
 front/.storybook/preview.ts                   |   2 +-
 .../comment/__stories__/Comment.stories.tsx   |   2 +-
 .../__stories__/CommentHeader.stories.tsx     |   2 +-
 .../components/CommentThreadCreateButton.tsx  |   2 +-
 .../CommentThreadRelationPicker.tsx           |   2 +-
 .../components/CommentThreadTypeDropdown.tsx  |   3 +-
 .../CommentThreadRelationPicker.stories.tsx   |   2 +-
 .../__stories__/CommentChip.stories.tsx       |   2 +-
 .../__stories__/CommandMenu.stories.tsx       |   2 +-
 .../components/CommentThreadTypeDropdown.tsx  |  60 ---------
 .../companies/__stories__/Board.stories.tsx   |   2 +-
 .../__stories__/CompanyBoardCard.stories.tsx  |   2 +-
 .../__stories__/CompanyChip.stories.tsx       |   7 +-
 .../components/CompanyAccountOwnerCell.tsx    |   2 +-
 .../companies/components/CompanyBoardCard.tsx |   6 +-
 .../companies/components/CompanyChip.tsx      |  16 +--
 .../components/CompanyEditableNameCell.tsx    |   2 +-
 .../CompanyAccountOwnerEditableField.tsx      |   2 +-
 .../components/EditablePeopleFullName.tsx     |   1 -
 .../people/components/PeopleCompanyCell.tsx   |   2 +-
 .../modules/people/components/PersonChip.tsx  |  11 +-
 .../__stories__/PeopleChip.stories.tsx        |   3 +-
 .../components/PeopleCompanyEditableField.tsx |   2 +-
 .../__stories__/ActionBar.stories.tsx         |   2 +-
 .../BoardColumnEditTitleMenu.stories.tsx      |   2 +-
 .../__stories__/MainButton.stories.tsx        |   2 +-
 .../__stories__/RoundedIconButton.stories.tsx |   2 +-
 front/src/modules/ui/chip/components/Chip.tsx | 120 ++++++++++++++++++
 .../modules/ui/chip/components/EntityChip.tsx | 117 ++++-------------
 .../components/__stories__/Chip.stories.tsx   |  48 +++++++
 .../__stories__/EntityChip.stories.tsx        |  21 +++
 .../__stories__/ColorSchemeCard.stories.tsx   |   2 +-
 .../__stories__/DropdownMenu.stories.tsx      |   2 +-
 .../__stories__/DateEditableField.stories.tsx |   2 +-
 .../NumberEditableField.stories.tsx           |   2 +-
 .../PhoneEditableField.stories.tsx            |   2 +-
 .../__stories__/TextEditableField.stories.tsx |   2 +-
 .../__stories__/AutosizeTextInput.stories.tsx |   2 +-
 .../__stories__/TextInput.stories.tsx         |   2 +-
 .../__stories__/PrimaryLink.stories.tsx       |   2 +-
 .../__stories__/SoonPill.stories.tsx          |   2 +-
 .../__stories__/RightDrawerTopBar.stories.tsx |   2 +-
 .../__stories__/EditableCellText.stories.tsx  |   6 +-
 .../components/__stories__/Tag.stories.tsx    |   2 +-
 .../components/__stories__/Avatar.stories.tsx |   2 +-
 .../__stories__/People.inputs.stories.tsx     |  10 +-
 .../src/testing/ComponentStorybookLayout.tsx  |   1 +
 front/src/testing/decorators.tsx              |  32 -----
 .../decorators/CellPositionDecorator.tsx      |  13 ++
 .../testing/decorators/ComponentDecorator.tsx |   9 ++
 .../ComponentWithRouterDecorator.tsx          |  12 ++
 .../ExhaustiveComponentDecorator.tsx          | 110 ++++++++++++++++
 .../src/testing/decorators/RootDecorator.tsx  |  13 ++
 53 files changed, 432 insertions(+), 251 deletions(-)
 delete mode 100644 front/src/modules/comments/components/CommentThreadTypeDropdown.tsx
 create mode 100644 front/src/modules/ui/chip/components/Chip.tsx
 create mode 100644 front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx
 create mode 100644 front/src/modules/ui/chip/components/__stories__/EntityChip.stories.tsx
 delete mode 100644 front/src/testing/decorators.tsx
 create mode 100644 front/src/testing/decorators/CellPositionDecorator.tsx
 create mode 100644 front/src/testing/decorators/ComponentDecorator.tsx
 create mode 100644 front/src/testing/decorators/ComponentWithRouterDecorator.tsx
 create mode 100644 front/src/testing/decorators/ExhaustiveComponentDecorator.tsx
 create mode 100644 front/src/testing/decorators/RootDecorator.tsx

diff --git a/front/.storybook/preview.ts b/front/.storybook/preview.ts
index df1f1131f..77ee7cdd0 100644
--- a/front/.storybook/preview.ts
+++ b/front/.storybook/preview.ts
@@ -3,7 +3,7 @@ import { Preview } from '@storybook/react';
 import { ThemeProvider } from '@emotion/react';
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
 import { lightTheme, darkTheme } from '../src/modules/ui/themes/themes';
-import { RootDecorator } from '../src/testing/decorators';
+import { RootDecorator } from '../src/testing/decorators/RootDecorator';
 import 'react-loading-skeleton/dist/skeleton.css';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';
 initialize();
diff --git a/front/src/modules/activities/comment/__stories__/Comment.stories.tsx b/front/src/modules/activities/comment/__stories__/Comment.stories.tsx
index ced54302d..aaf31f461 100644
--- a/front/src/modules/activities/comment/__stories__/Comment.stories.tsx
+++ b/front/src/modules/activities/comment/__stories__/Comment.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { CommentThreadActionBar } from '../../right-drawer/components/CommentThreadActionBar';
 import { Comment } from '../Comment';
diff --git a/front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx b/front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx
index 536a8992d..3e5a53eb3 100644
--- a/front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx
+++ b/front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { DateTime } from 'luxon';
 
 import { CommentThreadActionBar } from '@/activities/right-drawer/components/CommentThreadActionBar';
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { avatarUrl } from '~/testing/mock-data/users';
 
 import { CommentHeader } from '../CommentHeader';
diff --git a/front/src/modules/activities/components/CommentThreadCreateButton.tsx b/front/src/modules/activities/components/CommentThreadCreateButton.tsx
index 537e436f6..75e8d5788 100644
--- a/front/src/modules/activities/components/CommentThreadCreateButton.tsx
+++ b/front/src/modules/activities/components/CommentThreadCreateButton.tsx
@@ -26,7 +26,7 @@ export function CommentThreadCreateButton({
       <Button
         icon={<IconCheckbox size={theme.icon.size.sm} />}
         title="Task"
-        soon={true}
+        onClick={onTaskClick}
       />
       <Button
         icon={<IconTimelineEvent size={theme.icon.size.sm} />}
diff --git a/front/src/modules/activities/components/CommentThreadRelationPicker.tsx b/front/src/modules/activities/components/CommentThreadRelationPicker.tsx
index 70d0dc653..dff9c41c5 100644
--- a/front/src/modules/activities/components/CommentThreadRelationPicker.tsx
+++ b/front/src/modules/activities/components/CommentThreadRelationPicker.tsx
@@ -213,7 +213,7 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
               key={entity.id}
               id={entity.id}
               name={entity.name}
-              picture={entity.avatarUrl}
+              pictureUrl={entity.avatarUrl}
             />
           ) : (
             <PersonChip key={entity.id} name={entity.name} id={entity.id} />
diff --git a/front/src/modules/activities/components/CommentThreadTypeDropdown.tsx b/front/src/modules/activities/components/CommentThreadTypeDropdown.tsx
index 2e0d6f2dc..ff8e8604a 100644
--- a/front/src/modules/activities/components/CommentThreadTypeDropdown.tsx
+++ b/front/src/modules/activities/components/CommentThreadTypeDropdown.tsx
@@ -2,7 +2,7 @@ import {
   DropdownButton,
   DropdownOptionType,
 } from '@/ui/button/components/DropdownButton';
-import { IconNotes } from '@/ui/icon/index';
+import { IconCheck, IconNotes } from '@/ui/icon';
 import {
   ActivityType,
   CommentThread,
@@ -17,6 +17,7 @@ export function CommentThreadTypeDropdown({ commentThread }: OwnProps) {
   const [updateCommentThreadMutation] = useUpdateCommentThreadMutation();
   const options: DropdownOptionType[] = [
     { label: 'Note', key: 'note', icon: <IconNotes /> },
+    { label: 'Task', key: 'task', icon: <IconCheck /> },
   ];
 
   function getSelectedOptionKey() {
diff --git a/front/src/modules/activities/components/__stories__/CommentThreadRelationPicker.stories.tsx b/front/src/modules/activities/components/__stories__/CommentThreadRelationPicker.stories.tsx
index 2965d70a6..e3c57cb15 100644
--- a/front/src/modules/activities/components/__stories__/CommentThreadRelationPicker.stories.tsx
+++ b/front/src/modules/activities/components/__stories__/CommentThreadRelationPicker.stories.tsx
@@ -2,7 +2,7 @@ import { MemoryRouter } from 'react-router-dom';
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedCommentThreads } from '~/testing/mock-data/comment-threads';
 
diff --git a/front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx b/front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx
index 958483209..f0f21781c 100644
--- a/front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx
+++ b/front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { CommentChip } from '../CommentChip';
 
diff --git a/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx b/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
index f8aba7f4c..a91c47ffd 100644
--- a/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
+++ b/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 { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { sleep } from '~/testing/sleep';
 
 import { CommandMenu } from '../CommandMenu';
diff --git a/front/src/modules/comments/components/CommentThreadTypeDropdown.tsx b/front/src/modules/comments/components/CommentThreadTypeDropdown.tsx
deleted file mode 100644
index ff8e8604a..000000000
--- a/front/src/modules/comments/components/CommentThreadTypeDropdown.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-  DropdownButton,
-  DropdownOptionType,
-} from '@/ui/button/components/DropdownButton';
-import { IconCheck, IconNotes } from '@/ui/icon';
-import {
-  ActivityType,
-  CommentThread,
-  useUpdateCommentThreadMutation,
-} from '~/generated/graphql';
-
-type OwnProps = {
-  commentThread: Pick<CommentThread, 'id' | 'type'>;
-};
-
-export function CommentThreadTypeDropdown({ commentThread }: OwnProps) {
-  const [updateCommentThreadMutation] = useUpdateCommentThreadMutation();
-  const options: DropdownOptionType[] = [
-    { label: 'Note', key: 'note', icon: <IconNotes /> },
-    { label: 'Task', key: 'task', icon: <IconCheck /> },
-  ];
-
-  function getSelectedOptionKey() {
-    if (commentThread.type === ActivityType.Note) {
-      return 'note';
-    } else if (commentThread.type === ActivityType.Task) {
-      return 'task';
-    } else {
-      return undefined;
-    }
-  }
-
-  const convertSelectionOptionKeyToActivityType = (key: string) => {
-    switch (key) {
-      case 'note':
-        return ActivityType.Note;
-      case 'task':
-        return ActivityType.Task;
-      default:
-        return undefined;
-    }
-  };
-
-  const handleSelect = (selectedOption: DropdownOptionType) => {
-    updateCommentThreadMutation({
-      variables: {
-        id: commentThread.id,
-        type: convertSelectionOptionKeyToActivityType(selectedOption.key),
-      },
-    });
-  };
-
-  return (
-    <DropdownButton
-      options={options}
-      onSelection={handleSelect}
-      selectedOptionKey={getSelectedOptionKey()}
-    />
-  );
-}
diff --git a/front/src/modules/companies/__stories__/Board.stories.tsx b/front/src/modules/companies/__stories__/Board.stories.tsx
index f7bee3768..eceea0756 100644
--- a/front/src/modules/companies/__stories__/Board.stories.tsx
+++ b/front/src/modules/companies/__stories__/Board.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { EntityBoard } from '@/pipeline/components/EntityBoard';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { defaultPipelineProgressOrderBy } from '../../pipeline/queries';
diff --git a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx
index 3e2afec8a..6325647f3 100644
--- a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx
+++ b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedPipelineProgressData } from '~/testing/mock-data/pipeline-progress';
 
diff --git a/front/src/modules/companies/__stories__/CompanyChip.stories.tsx b/front/src/modules/companies/__stories__/CompanyChip.stories.tsx
index 41104a568..83ed41ab3 100644
--- a/front/src/modules/companies/__stories__/CompanyChip.stories.tsx
+++ b/front/src/modules/companies/__stories__/CompanyChip.stories.tsx
@@ -2,7 +2,7 @@ import { BrowserRouter } from 'react-router-dom';
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { CompanyChip } from '../components/CompanyChip';
 
@@ -37,14 +37,13 @@ const TestCellContainer = styled.div`
   min-width: 250px;
 
   overflow: hidden;
-  text-wrap: nowrap;
 `;
 
 export const SmallName: Story = {
   args: {
     id: 'airbnb',
     name: 'Airbnb',
-    picture: 'https://api.faviconkit.com/airbnb.com/144',
+    pictureUrl: 'https://api.faviconkit.com/airbnb.com/144',
   },
 };
 
@@ -56,6 +55,6 @@ export const BigName: Story = {
   args: {
     id: 'google',
     name: 'Google with a real big name to overflow the cell',
-    picture: 'https://api.faviconkit.com/google.com/144',
+    pictureUrl: 'https://api.faviconkit.com/google.com/144',
   },
 };
diff --git a/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx b/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx
index 76972cd1e..14e20d540 100644
--- a/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx
+++ b/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx
@@ -41,7 +41,7 @@ export function CompanyAccountOwnerCell({ company }: OwnProps) {
           <PersonChip
             id={company.accountOwner.id}
             name={company.accountOwner?.displayName ?? ''}
-            picture={company.accountOwner?.avatarUrl ?? ''}
+            pictureUrl={company.accountOwner?.avatarUrl ?? ''}
           />
         ) : (
           <></>
diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx
index 6feaac220..ec57247cc 100644
--- a/front/src/modules/companies/components/CompanyBoardCard.tsx
+++ b/front/src/modules/companies/components/CompanyBoardCard.tsx
@@ -10,7 +10,6 @@ import { GET_PIPELINE_PROGRESS, GET_PIPELINES } from '@/pipeline/queries';
 import { BoardCardContext } from '@/pipeline/states/BoardCardContext';
 import { pipelineProgressIdScopedState } from '@/pipeline/states/pipelineProgressIdScopedState';
 import { selectedBoardCardsState } from '@/pipeline/states/selectedBoardCardsState';
-import { ChipVariant } from '@/ui/chip/components/EntityChip';
 import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField';
 import { NumberEditableField } from '@/ui/editable-field/variants/components/NumberEditableField';
 import { IconCurrencyDollar, IconProgressCheck } from '@/ui/icon';
@@ -177,9 +176,8 @@ export function CompanyBoardCard() {
           <CompanyChip
             id={company.id}
             name={company.name}
-            clickable
-            picture={getLogoUrlFromDomainName(company.domainName)}
-            variant={ChipVariant.transparent}
+            pictureUrl={getLogoUrlFromDomainName(company.domainName)}
+            clickable={false}
           />
           <StyledCheckboxContainer className="checkbox-container">
             <Checkbox
diff --git a/front/src/modules/companies/components/CompanyChip.tsx b/front/src/modules/companies/components/CompanyChip.tsx
index ff3990b8b..e60833017 100644
--- a/front/src/modules/companies/components/CompanyChip.tsx
+++ b/front/src/modules/companies/components/CompanyChip.tsx
@@ -1,29 +1,25 @@
-import { ChipVariant, EntityChip } from '@/ui/chip/components/EntityChip';
+import { EntityChip } from '@/ui/chip/components/EntityChip';
 
 type OwnProps = {
   id: string;
   name: string;
-  picture?: string;
+  pictureUrl?: string;
   clickable?: boolean;
-  variant?: ChipVariant;
 };
 
 export function CompanyChip({
   id,
   name,
-  picture,
-  clickable,
-  variant = ChipVariant.opaque,
+  pictureUrl,
+  clickable = true,
 }: OwnProps) {
   return (
     <EntityChip
       entityId={id}
-      linkToEntity={`/companies/${id}`}
+      linkToEntity={clickable ? `/companies/${id}` : undefined}
       name={name}
       avatarType="squared"
-      clickable={clickable}
-      picture={picture}
-      variant={variant}
+      pictureUrl={pictureUrl}
     />
   );
 }
diff --git a/front/src/modules/companies/components/CompanyEditableNameCell.tsx b/front/src/modules/companies/components/CompanyEditableNameCell.tsx
index a509e2d79..71a760f88 100644
--- a/front/src/modules/companies/components/CompanyEditableNameCell.tsx
+++ b/front/src/modules/companies/components/CompanyEditableNameCell.tsx
@@ -38,7 +38,7 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
           id={company.id}
           name={company.name}
           clickable
-          picture={getLogoUrlFromDomainName(company.domainName)}
+          pictureUrl={getLogoUrlFromDomainName(company.domainName)}
         />
       }
       onSubmit={() =>
diff --git a/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx b/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx
index 0a71766e4..4720924e8 100644
--- a/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx
+++ b/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx
@@ -31,7 +31,7 @@ export function CompanyAccountOwnerEditableField({ company }: OwnProps) {
               <PersonChip
                 id={company.accountOwner.id}
                 name={company.accountOwner?.displayName ?? ''}
-                picture={company.accountOwner?.avatarUrl ?? ''}
+                pictureUrl={company.accountOwner?.avatarUrl ?? ''}
               />
             ) : (
               <></>
diff --git a/front/src/modules/people/components/EditablePeopleFullName.tsx b/front/src/modules/people/components/EditablePeopleFullName.tsx
index 5326867b1..fd8822e09 100644
--- a/front/src/modules/people/components/EditablePeopleFullName.tsx
+++ b/front/src/modules/people/components/EditablePeopleFullName.tsx
@@ -58,7 +58,6 @@ export function EditablePeopleFullName({
           <PersonChip
             name={`${person?.firstName ?? ''} ${person?.lastName ?? ''}`}
             id={person?.id ?? ''}
-            clickable
           />
         </NoEditModeContainer>
       }
diff --git a/front/src/modules/people/components/PeopleCompanyCell.tsx b/front/src/modules/people/components/PeopleCompanyCell.tsx
index 6ab3c0850..b3a777e8f 100644
--- a/front/src/modules/people/components/PeopleCompanyCell.tsx
+++ b/front/src/modules/people/components/PeopleCompanyCell.tsx
@@ -38,7 +38,7 @@ export function PeopleCompanyCell({ people }: OwnProps) {
         <CompanyChip
           id={people.company?.id ?? ''}
           name={people.company?.name ?? ''}
-          picture={getLogoUrlFromDomainName(people.company?.domainName)}
+          pictureUrl={getLogoUrlFromDomainName(people.company?.domainName)}
         />
       }
     />
diff --git a/front/src/modules/people/components/PersonChip.tsx b/front/src/modules/people/components/PersonChip.tsx
index d6db80437..c91c68c3a 100644
--- a/front/src/modules/people/components/PersonChip.tsx
+++ b/front/src/modules/people/components/PersonChip.tsx
@@ -3,24 +3,23 @@ import { EntityChip } from '@/ui/chip/components/EntityChip';
 export type PersonChipPropsType = {
   id: string;
   name: string;
-  picture?: string;
+  pictureUrl?: string;
   clickable?: boolean;
 };
 
 export function PersonChip({
   id,
   name,
-  picture,
-  clickable,
+  pictureUrl,
+  clickable = true,
 }: PersonChipPropsType) {
   return (
     <EntityChip
       entityId={id}
-      linkToEntity={`/person/${id}`}
+      linkToEntity={clickable ? `/person/${id}` : undefined}
       name={name}
       avatarType="rounded"
-      clickable={clickable}
-      picture={picture}
+      pictureUrl={pictureUrl}
     />
   );
 }
diff --git a/front/src/modules/people/components/__stories__/PeopleChip.stories.tsx b/front/src/modules/people/components/__stories__/PeopleChip.stories.tsx
index f03f590a1..f28bb9dc5 100644
--- a/front/src/modules/people/components/__stories__/PeopleChip.stories.tsx
+++ b/front/src/modules/people/components/__stories__/PeopleChip.stories.tsx
@@ -2,7 +2,7 @@ import { BrowserRouter } from 'react-router-dom';
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { PersonChip } from '../PersonChip';
 
@@ -15,7 +15,6 @@ const TestCellContainer = styled.div`
   max-width: 250px;
   min-width: 250px;
   overflow: hidden;
-  text-wrap: nowrap;
 `;
 
 const meta: Meta<typeof PersonChip> = {
diff --git a/front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx b/front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx
index d0ec686e7..580ba25e5 100644
--- a/front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx
+++ b/front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx
@@ -33,7 +33,7 @@ export function PeopleCompanyEditableField({ people }: OwnProps) {
               <CompanyChip
                 id={people.company.id}
                 name={people.company.name}
-                picture={getLogoUrlFromDomainName(people.company.domainName)}
+                pictureUrl={getLogoUrlFromDomainName(people.company.domainName)}
               />
             ) : (
               <></>
diff --git a/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx b/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx
index b33eaee01..fdb64a245 100644
--- a/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx
+++ b/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { ActionBar } from '../ActionBar';
 
diff --git a/front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx b/front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx
index ca6eab3b9..c26c6ca4f 100644
--- a/front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx
+++ b/front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import {
   BoardColumnEditTitleMenu,
diff --git a/front/src/modules/ui/button/components/__stories__/MainButton.stories.tsx b/front/src/modules/ui/button/components/__stories__/MainButton.stories.tsx
index 77ecd276d..b5470a6bd 100644
--- a/front/src/modules/ui/button/components/__stories__/MainButton.stories.tsx
+++ b/front/src/modules/ui/button/components/__stories__/MainButton.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { IconBrandGoogle } from '@/ui/icon';
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { MainButton } from '../MainButton';
 
diff --git a/front/src/modules/ui/button/components/__stories__/RoundedIconButton.stories.tsx b/front/src/modules/ui/button/components/__stories__/RoundedIconButton.stories.tsx
index 5c35d6ad8..b2cea53cb 100644
--- a/front/src/modules/ui/button/components/__stories__/RoundedIconButton.stories.tsx
+++ b/front/src/modules/ui/button/components/__stories__/RoundedIconButton.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { IconArrowRight } from '@/ui/icon';
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { RoundedIconButton } from '../RoundedIconButton';
 
diff --git a/front/src/modules/ui/chip/components/Chip.tsx b/front/src/modules/ui/chip/components/Chip.tsx
new file mode 100644
index 000000000..91971bc20
--- /dev/null
+++ b/front/src/modules/ui/chip/components/Chip.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+import { OverflowingTextWithTooltip } from '../../tooltip/OverflowingTextWithTooltip';
+
+export enum ChipSize {
+  Large = 'large',
+  Small = 'small',
+}
+
+export enum ChipVariant {
+  Highlighted = 'highlighted',
+  Regular = 'regular',
+  Transparent = 'transparent',
+}
+
+type OwnProps = {
+  size?: ChipSize;
+  disabled?: boolean;
+  clickable?: boolean;
+  label: string;
+  maxWidth?: string;
+  variant?: ChipVariant;
+  leftComponent?: React.ReactNode;
+  rightComponent?: React.ReactNode;
+  className?: string;
+};
+
+const StyledContainer = styled.div<Partial<OwnProps>>`
+  align-items: center;
+
+  background-color: ${({ theme, variant }) =>
+    variant === ChipVariant.Highlighted
+      ? theme.background.transparent.light
+      : 'transparent'};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ theme, disabled }) =>
+    disabled ? theme.font.color.light : theme.font.color.primary};
+  cursor: ${({ clickable, disabled, variant }) =>
+    disabled || variant === ChipVariant.Transparent
+      ? 'auto'
+      : clickable
+      ? 'pointer'
+      : 'auto'};
+  display: inline-flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+
+  height: ${({ size }) => (size === ChipSize.Large ? '16px' : '12px')};
+  max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : '200px')};
+
+  overflow: hidden;
+  padding: ${({ theme }) => theme.spacing(1)};
+  user-select: none;
+
+  :hover {
+    ${({ variant, theme, disabled }) => {
+      if (!disabled) {
+        return (
+          'background-color: ' +
+          (variant === ChipVariant.Highlighted
+            ? theme.background.transparent.medium
+            : variant === ChipVariant.Regular
+            ? theme.background.transparent.light
+            : 'transparent') +
+          ';'
+        );
+      }
+    }}
+  }
+  :active {
+    ${({ variant, theme, disabled }) => {
+      if (!disabled) {
+        return (
+          'background-color: ' +
+          (variant === ChipVariant.Highlighted
+            ? theme.background.transparent.strong
+            : variant === ChipVariant.Regular
+            ? theme.background.transparent.medium
+            : 'transparent') +
+          ';'
+        );
+      }
+    }}
+  }
+`;
+
+const StyledLabel = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export function Chip({
+  size = ChipSize.Small,
+  label,
+  disabled = false,
+  clickable = true,
+  variant = ChipVariant.Regular,
+  leftComponent,
+  rightComponent,
+  maxWidth,
+  className,
+}: OwnProps) {
+  return (
+    <StyledContainer
+      data-testid="chip"
+      clickable={clickable}
+      variant={variant}
+      size={size}
+      disabled={disabled}
+      className={className}
+    >
+      {leftComponent}
+      <StyledLabel>
+        <OverflowingTextWithTooltip text={label} />
+      </StyledLabel>
+      {rightComponent}
+    </StyledContainer>
+  );
+}
diff --git a/front/src/modules/ui/chip/components/EntityChip.tsx b/front/src/modules/ui/chip/components/EntityChip.tsx
index c2865c4f4..b6189da73 100644
--- a/front/src/modules/ui/chip/components/EntityChip.tsx
+++ b/front/src/modules/ui/chip/components/EntityChip.tsx
@@ -1,122 +1,53 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Theme } from '@emotion/react';
-import styled from '@emotion/styled';
 
 import { Avatar, AvatarType } from '@/users/components/Avatar';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
 
-import { OverflowingTextWithTooltip } from '../../tooltip/OverflowingTextWithTooltip';
-
-export enum ChipVariant {
-  opaque = 'opaque',
-  transparent = 'transparent',
-}
-
-const baseStyle = ({ theme }: { theme: Theme }) => `
-  align-items: center;
-  border-radius: ${theme.spacing(1)};
-  color: ${theme.font.color.primary};
-  display: inline-flex;
-  gap: ${theme.spacing(1)};
-  height: 12px;
-  overflow: hidden;
-  padding: ${theme.spacing(1)};
-  text-decoration: none;
- 
-  img {
-    border-radius: ${theme.border.radius.rounded};
-    height: 14px;
-    object-fit: cover;
-    width: 14px;
-  }
-
-  white-space: nowrap;
-`;
-
-const StyledContainerLink = styled.div<{ variant: string }>`
-  ${baseStyle}
-  background-color: ${({ theme, variant }) =>
-    variant === ChipVariant.opaque ? theme.background.tertiary : 'transparent'};
-  :hover {
-    background-color: ${({ variant, theme }) =>
-      variant === ChipVariant.opaque
-        ? theme.background.quaternary
-        : theme.background.transparent.light};
-  }
-`;
-
-const StyledContainerReadOnly = styled.div`
-  ${baseStyle}
-`;
-
-const StyledName = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
+import { Chip, ChipVariant } from './Chip';
 
 type OwnProps = {
-  linkToEntity: string;
+  linkToEntity?: string;
   entityId: string;
   name: string;
-  picture?: string;
-  clickable?: boolean;
+  pictureUrl?: string;
   avatarType?: AvatarType;
-  variant?: ChipVariant;
 };
 
 export function EntityChip({
   linkToEntity,
   entityId,
   name,
-  picture,
-  clickable,
+  pictureUrl,
   avatarType = 'rounded',
-  variant = ChipVariant.opaque,
 }: OwnProps) {
   const navigate = useNavigate();
 
   function handleLinkClick(event: React.MouseEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
-
-    navigate(linkToEntity);
+    if (linkToEntity) {
+      navigate(linkToEntity);
+    }
   }
 
-  return clickable && linkToEntity ? (
-    <StyledContainerLink
-      data-testid="entity-chip"
-      onClick={handleLinkClick}
-      variant={variant}
-    >
-      {isNonEmptyString(name) && (
-        <Avatar
-          avatarUrl={picture}
-          colorId={entityId}
-          placeholder={name}
-          size={14}
-          type={avatarType}
-        />
-      )}
-      <StyledName>
-        <OverflowingTextWithTooltip text={name} />
-      </StyledName>
-    </StyledContainerLink>
+  return isNonEmptyString(name) ? (
+    <div onClick={handleLinkClick}>
+      <Chip
+        label={name}
+        variant={linkToEntity ? ChipVariant.Highlighted : ChipVariant.Regular}
+        leftComponent={
+          <Avatar
+            avatarUrl={pictureUrl}
+            colorId={entityId}
+            placeholder={name}
+            size={14}
+            type={avatarType}
+          />
+        }
+      />
+    </div>
   ) : (
-    <StyledContainerReadOnly data-testid="entity-chip">
-      {isNonEmptyString(name) && (
-        <Avatar
-          avatarUrl={picture}
-          colorId={entityId}
-          placeholder={name}
-          size={14}
-          type={avatarType}
-        />
-      )}
-      <StyledName>
-        <OverflowingTextWithTooltip text={name} />
-      </StyledName>
-    </StyledContainerReadOnly>
+    <></>
   );
 }
diff --git a/front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx b/front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx
new file mode 100644
index 000000000..1ca94a355
--- /dev/null
+++ b/front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { ExhaustiveComponentDecorator } from '~/testing/decorators/ExhaustiveComponentDecorator';
+
+import { Chip, ChipSize, ChipVariant } from '../Chip';
+
+const meta: Meta<typeof Chip> = {
+  title: 'UI/Chip/Chip',
+  component: Chip,
+};
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+  args: {
+    label: 'Chip test',
+    size: ChipSize.Small,
+    variant: ChipVariant.Highlighted,
+    clickable: true,
+    maxWidth: '200px',
+  },
+  decorators: [ComponentDecorator],
+};
+
+export const All: Story = {
+  args: { size: ChipSize.Large, clickable: true, label: 'Hello' },
+  argTypes: {
+    size: { control: false },
+    variant: { control: false },
+    disabled: { control: false },
+    className: { control: false },
+    rightComponent: { control: false },
+    leftComponent: { control: false },
+  },
+  parameters: {
+    pseudo: { hover: ['.hover'], active: ['.active'] },
+    variants: [
+      ChipVariant.Highlighted,
+      ChipVariant.Regular,
+      ChipVariant.Transparent,
+    ],
+    sizes: [ChipSize.Small, ChipSize.Large],
+    states: ['default', 'hover', 'active', 'disabled'],
+  },
+  decorators: [ExhaustiveComponentDecorator],
+};
diff --git a/front/src/modules/ui/chip/components/__stories__/EntityChip.stories.tsx b/front/src/modules/ui/chip/components/__stories__/EntityChip.stories.tsx
new file mode 100644
index 000000000..016e49812
--- /dev/null
+++ b/front/src/modules/ui/chip/components/__stories__/EntityChip.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { EntityChip } from '../EntityChip';
+
+const meta: Meta<typeof EntityChip> = {
+  title: 'UI/Chip/EntityChip',
+  component: EntityChip,
+  decorators: [ComponentWithRouterDecorator],
+  args: {
+    name: 'Entity name',
+    linkToEntity: '/entity-link',
+    avatarType: 'squared',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EntityChip>;
+
+export const Default: Story = {};
diff --git a/front/src/modules/ui/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx b/front/src/modules/ui/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
index 4fc089216..77143fe77 100644
--- a/front/src/modules/ui/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
+++ b/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 { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { ColorSchemeCard } from '../ColorSchemeCard';
 
diff --git a/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx b/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx
index 8e1f32086..f9fa033a1 100644
--- a/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx
+++ b/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { IconPlus } from '@/ui/icon/index';
 import { Avatar } from '@/users/components/Avatar';
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { DropdownMenuSkeletonItem } from '../../../relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { DropdownMenu } from '../DropdownMenu';
diff --git a/front/src/modules/ui/editable-field/variants/components/__stories__/DateEditableField.stories.tsx b/front/src/modules/ui/editable-field/variants/components/__stories__/DateEditableField.stories.tsx
index ba8e2ff94..a78b6d7b7 100644
--- a/front/src/modules/ui/editable-field/variants/components/__stories__/DateEditableField.stories.tsx
+++ b/front/src/modules/ui/editable-field/variants/components/__stories__/DateEditableField.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconCalendar } from '@tabler/icons-react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { DateEditableField } from '../DateEditableField';
 
diff --git a/front/src/modules/ui/editable-field/variants/components/__stories__/NumberEditableField.stories.tsx b/front/src/modules/ui/editable-field/variants/components/__stories__/NumberEditableField.stories.tsx
index b7aa5df8f..ca96e2b07 100644
--- a/front/src/modules/ui/editable-field/variants/components/__stories__/NumberEditableField.stories.tsx
+++ b/front/src/modules/ui/editable-field/variants/components/__stories__/NumberEditableField.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconCurrencyDollar } from '@tabler/icons-react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { NumberEditableField } from '../NumberEditableField';
 
diff --git a/front/src/modules/ui/editable-field/variants/components/__stories__/PhoneEditableField.stories.tsx b/front/src/modules/ui/editable-field/variants/components/__stories__/PhoneEditableField.stories.tsx
index 14e5bd3f3..469ccdd85 100644
--- a/front/src/modules/ui/editable-field/variants/components/__stories__/PhoneEditableField.stories.tsx
+++ b/front/src/modules/ui/editable-field/variants/components/__stories__/PhoneEditableField.stories.tsx
@@ -2,7 +2,7 @@ import { BrowserRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconPhone } from '@tabler/icons-react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { PhoneEditableField } from '../PhoneEditableField';
 
diff --git a/front/src/modules/ui/editable-field/variants/components/__stories__/TextEditableField.stories.tsx b/front/src/modules/ui/editable-field/variants/components/__stories__/TextEditableField.stories.tsx
index b21a50c81..fbffa6855 100644
--- a/front/src/modules/ui/editable-field/variants/components/__stories__/TextEditableField.stories.tsx
+++ b/front/src/modules/ui/editable-field/variants/components/__stories__/TextEditableField.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconUser } from '@tabler/icons-react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { TextEditableField } from '../TextEditableField';
 
diff --git a/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx b/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
index 5e33ebbdc..506cbb0da 100644
--- a/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
+++ b/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { AutosizeTextInput } from '../AutosizeTextInput';
 
diff --git a/front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx b/front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx
index e350cdd2f..7bd22cb06 100644
--- a/front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx
+++ b/front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx
@@ -4,7 +4,7 @@ import { jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { TextInput } from '../TextInput';
 
diff --git a/front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx b/front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx
index 73398c165..8e3446a59 100644
--- a/front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx
+++ b/front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx
@@ -3,7 +3,7 @@ import { expect, jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { PrimaryLink } from '../PrimaryLink';
 
diff --git a/front/src/modules/ui/pill/components/__stories__/SoonPill.stories.tsx b/front/src/modules/ui/pill/components/__stories__/SoonPill.stories.tsx
index 9c03b34be..96a8a53fb 100644
--- a/front/src/modules/ui/pill/components/__stories__/SoonPill.stories.tsx
+++ b/front/src/modules/ui/pill/components/__stories__/SoonPill.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { SoonPill } from '../SoonPill';
 
diff --git a/front/src/modules/ui/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx b/front/src/modules/ui/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx
index 98b3e7f7b..6af4e2e3d 100644
--- a/front/src/modules/ui/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx
+++ b/front/src/modules/ui/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { RightDrawerTopBar } from '../RightDrawerTopBar';
diff --git a/front/src/modules/ui/table/editable-cell/components/__stories__/EditableCellText.stories.tsx b/front/src/modules/ui/table/editable-cell/components/__stories__/EditableCellText.stories.tsx
index ff7f01dab..747aa8742 100644
--- a/front/src/modules/ui/table/editable-cell/components/__stories__/EditableCellText.stories.tsx
+++ b/front/src/modules/ui/table/editable-cell/components/__stories__/EditableCellText.stories.tsx
@@ -2,10 +2,8 @@ import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
-import {
-  CellPositionDecorator,
-  ComponentDecorator,
-} from '~/testing/decorators';
+import { CellPositionDecorator } from '~/testing/decorators/CellPositionDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { EditableCellText } from '../../types/EditableCellText';
 
diff --git a/front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx b/front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx
index 5829830d4..8332583b4 100644
--- a/front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx
+++ b/front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { Tag } from '../Tag';
 
diff --git a/front/src/modules/users/components/__stories__/Avatar.stories.tsx b/front/src/modules/users/components/__stories__/Avatar.stories.tsx
index 7257a0a7a..1c30ba66f 100644
--- a/front/src/modules/users/components/__stories__/Avatar.stories.tsx
+++ b/front/src/modules/users/components/__stories__/Avatar.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { avatarUrl } from '~/testing/mock-data/users';
 
 import { Avatar } from '../Avatar';
diff --git a/front/src/pages/people/__stories__/People.inputs.stories.tsx b/front/src/pages/people/__stories__/People.inputs.stories.tsx
index 26b4a3bbf..657d634a6 100644
--- a/front/src/pages/people/__stories__/People.inputs.stories.tsx
+++ b/front/src/pages/people/__stories__/People.inputs.stories.tsx
@@ -194,7 +194,10 @@ export const EditRelation: Story = {
         mockedPeopleData[1].company.name,
       );
 
-      await userEvent.click(secondRowCompanyCell);
+      await userEvent.click(
+        secondRowCompanyCell.parentNode?.parentNode?.parentNode
+          ?.parentElement as HTMLElement,
+      );
     });
 
     await step('Type "Air" in relation picker', async () => {
@@ -244,7 +247,10 @@ export const SelectRelationWithKeys: Story = {
     );
     await sleep(25);
 
-    await userEvent.click(firstRowCompanyCell);
+    await userEvent.click(
+      firstRowCompanyCell.parentNode?.parentNode?.parentNode
+        ?.parentElement as HTMLElement,
+    );
     firstRowCompanyCell = await canvas.findByText(
       mockedPeopleData[0].company.name,
     );
diff --git a/front/src/testing/ComponentStorybookLayout.tsx b/front/src/testing/ComponentStorybookLayout.tsx
index 4ad309339..cb6c0d443 100644
--- a/front/src/testing/ComponentStorybookLayout.tsx
+++ b/front/src/testing/ComponentStorybookLayout.tsx
@@ -9,6 +9,7 @@ const StyledLayout = styled.div`
   flex-direction: row;
 
   height: fit-content;
+  max-width: calc(100% - 40px);
   min-width: 300px;
   padding: 20px;
   width: fit-content;
diff --git a/front/src/testing/decorators.tsx b/front/src/testing/decorators.tsx
deleted file mode 100644
index 8a95e65ca..000000000
--- a/front/src/testing/decorators.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ApolloProvider } from '@apollo/client';
-import { Decorator } from '@storybook/react';
-import { RecoilRoot } from 'recoil';
-
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
-import { CellContext } from '@/ui/table/states/CellContext';
-import { RowContext } from '@/ui/table/states/RowContext';
-
-import { ComponentStorybookLayout } from './ComponentStorybookLayout';
-import { mockedClient } from './mockedClient';
-
-export const RootDecorator: Decorator = (Story) => (
-  <RecoilRoot>
-    <ApolloProvider client={mockedClient}>
-      <Story />
-    </ApolloProvider>
-  </RecoilRoot>
-);
-
-export const ComponentDecorator: Decorator = (Story) => (
-  <ComponentStorybookLayout>
-    <Story />
-  </ComponentStorybookLayout>
-);
-
-export const CellPositionDecorator: Decorator = (Story) => (
-  <RecoilScope SpecificContext={RowContext}>
-    <RecoilScope SpecificContext={CellContext}>
-      <Story />
-    </RecoilScope>
-  </RecoilScope>
-);
diff --git a/front/src/testing/decorators/CellPositionDecorator.tsx b/front/src/testing/decorators/CellPositionDecorator.tsx
new file mode 100644
index 000000000..04240c616
--- /dev/null
+++ b/front/src/testing/decorators/CellPositionDecorator.tsx
@@ -0,0 +1,13 @@
+import { Decorator } from '@storybook/react';
+
+import { RecoilScope } from '../../modules/ui/recoil-scope/components/RecoilScope';
+import { CellContext } from '../../modules/ui/table/states/CellContext';
+import { RowContext } from '../../modules/ui/table/states/RowContext';
+
+export const CellPositionDecorator: Decorator = (Story) => (
+  <RecoilScope SpecificContext={RowContext}>
+    <RecoilScope SpecificContext={CellContext}>
+      <Story />
+    </RecoilScope>
+  </RecoilScope>
+);
diff --git a/front/src/testing/decorators/ComponentDecorator.tsx b/front/src/testing/decorators/ComponentDecorator.tsx
new file mode 100644
index 000000000..df87f484d
--- /dev/null
+++ b/front/src/testing/decorators/ComponentDecorator.tsx
@@ -0,0 +1,9 @@
+import { Decorator } from '@storybook/react';
+
+import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
+
+export const ComponentDecorator: Decorator = (Story) => (
+  <ComponentStorybookLayout>
+    <Story />
+  </ComponentStorybookLayout>
+);
diff --git a/front/src/testing/decorators/ComponentWithRouterDecorator.tsx b/front/src/testing/decorators/ComponentWithRouterDecorator.tsx
new file mode 100644
index 000000000..eb6d86e26
--- /dev/null
+++ b/front/src/testing/decorators/ComponentWithRouterDecorator.tsx
@@ -0,0 +1,12 @@
+import { MemoryRouter } from 'react-router-dom';
+import { Decorator } from '@storybook/react';
+
+import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
+
+export const ComponentWithRouterDecorator: Decorator = (Story) => (
+  <ComponentStorybookLayout>
+    <MemoryRouter>
+      <Story />
+    </MemoryRouter>
+  </ComponentStorybookLayout>
+);
diff --git a/front/src/testing/decorators/ExhaustiveComponentDecorator.tsx b/front/src/testing/decorators/ExhaustiveComponentDecorator.tsx
new file mode 100644
index 000000000..f1dcca195
--- /dev/null
+++ b/front/src/testing/decorators/ExhaustiveComponentDecorator.tsx
@@ -0,0 +1,110 @@
+import styled from '@emotion/styled';
+import { Decorator, StrictArgs } from '@storybook/react';
+
+function stateProps(state: string) {
+  switch (state) {
+    case 'default':
+      return {};
+    case 'hover':
+      return { className: 'hover' };
+    case 'active':
+      return { className: 'active' };
+    case 'disabled':
+      return { disabled: true };
+    default:
+      return {};
+  }
+}
+
+const StyledSizeTitle = styled.h1`
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledVariantTitle = styled.h1`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledStateTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-align: center;
+  text-transform: uppercase;
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const StyledSizeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledLineContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledComponentContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+function renderSize(
+  size: string,
+  variants: string[],
+  states: string[],
+  args: StrictArgs,
+  Story: React.FC<StrictArgs>,
+) {
+  return (
+    <StyledSizeContainer key={size}>
+      <StyledSizeTitle>{size}</StyledSizeTitle>
+      {variants.map((variant) => (
+        <div key={variant}>
+          <StyledVariantTitle>{variant}</StyledVariantTitle>
+          <StyledLineContainer>
+            {states.map((state) => (
+              <StyledComponentContainer key={`${variant}-container-${state}`}>
+                <StyledStateTitle>{state}</StyledStateTitle>
+                <Story
+                  args={{ ...args, variant: variant, ...stateProps(state) }}
+                />
+              </StyledComponentContainer>
+            ))}
+          </StyledLineContainer>
+        </div>
+      ))}
+    </StyledSizeContainer>
+  );
+}
+
+export const ExhaustiveComponentDecorator: Decorator = (Story, context) => {
+  const parameters = context.parameters;
+  return (
+    <StyledContainer>
+      {parameters.sizes.map((size: string) =>
+        renderSize(
+          size,
+          parameters.variants,
+          parameters.states,
+          context.args,
+          Story,
+        ),
+      )}
+    </StyledContainer>
+  );
+};
diff --git a/front/src/testing/decorators/RootDecorator.tsx b/front/src/testing/decorators/RootDecorator.tsx
new file mode 100644
index 000000000..e2d63c247
--- /dev/null
+++ b/front/src/testing/decorators/RootDecorator.tsx
@@ -0,0 +1,13 @@
+import { ApolloProvider } from '@apollo/client';
+import { Decorator } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+
+import { mockedClient } from '../mockedClient';
+
+export const RootDecorator: Decorator = (Story) => (
+  <RecoilRoot>
+    <ApolloProvider client={mockedClient}>
+      <Story />
+    </ApolloProvider>
+  </RecoilRoot>
+);