From 77a1840611fc7da70216d894a446916061a6bd78 Mon Sep 17 00:00:00 2001
From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Date: Mon, 9 Oct 2023 17:31:13 +0300
Subject: [PATCH] Chore(front): Create a custom eslint rule for Props naming
 (#1904)

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
---
 .../frontend/advanced/best-practices.mdx      |  4 +-
 .../frontend/advanced/style-guide.mdx         | 12 +--
 front/.eslintrc.js                            |  1 +
 .../modules/activities/comment/Comment.tsx    |  4 +-
 .../activities/comment/CommentHeader.tsx      |  4 +-
 .../components/ActivityAssigneePicker.tsx     |  4 +-
 .../components/ActivityBodyEditor.tsx         |  7 +-
 .../components/ActivityComments.tsx           |  4 +-
 .../activities/components/ActivityEditor.tsx  |  4 +-
 .../activities/components/ActivityTitle.tsx   |  4 +-
 .../components/ActivityTypeDropdown.tsx       |  6 +-
 .../ActivityAssigneeEditableField.tsx         |  6 +-
 .../ActivityAssigneeEditableFieldEditMode.tsx |  4 +-
 .../components/ActivityEditorDateField.tsx    |  6 +-
 .../ActivityRelationEditableField.tsx         |  6 +-
 .../ActivityRelationEditableFieldEditMode.tsx |  4 +-
 .../activities/notes/components/NoteList.tsx  |  4 +-
 .../components/ActivityActionBar.tsx          |  4 +-
 .../components/RightDrawerActivity.tsx        |  4 +-
 .../table/components/CellCommentChip.tsx      |  4 +-
 .../tasks/components/TaskGroups.tsx           |  4 +-
 .../activities/tasks/components/TaskList.tsx  |  4 +-
 .../timeline/components/TimelineActivity.tsx  |  4 +-
 .../components/TimelineActivityCardFooter.tsx |  6 +-
 .../components/TimelineActivityTitle.tsx      |  4 +-
 front/src/modules/auth/components/Logo.tsx    |  4 +-
 front/src/modules/auth/components/Modal.tsx   |  4 +-
 .../src/modules/auth/components/SubTitle.tsx  |  4 +-
 front/src/modules/auth/components/Title.tsx   |  4 +-
 .../auth/sign-in-up/components/FooterNote.tsx |  8 +-
 .../command-menu/components/CommandGroup.tsx  |  4 +-
 .../companies/components/CompanyChip.tsx      |  4 +-
 .../companies/components/CompanyPicker.tsx    |  8 +-
 .../components/CompanyProgressPicker.tsx      |  4 +-
 .../companies/components/CompanyTeam.tsx      |  4 +-
 .../components/CompanyNameEditableField.tsx   |  6 +-
 .../people/components/PeoplePicker.tsx        |  4 +-
 .../modules/people/components/PersonChip.tsx  |  4 +-
 .../PeopleFullNameEditableField.tsx           |  6 +-
 .../profile/components/NameFields.tsx         |  4 +-
 .../workspace/components/NameField.tsx        |  7 +-
 .../spreadsheet-import/components/Heading.tsx |  4 +-
 .../components/MatchColumnSelect.tsx          |  4 +-
 .../components/ModalWrapper.tsx               |  8 +-
 .../spreadsheet-import/components/Table.tsx   |  4 +-
 .../provider/components/SpreadsheetImport.tsx |  1 +
 .../MatchColumnsStep/MatchColumnsStep.tsx     |  4 +-
 .../components/SubMatchingSelect.tsx          |  4 +-
 .../SelectHeaderStep/SelectHeaderStep.tsx     |  7 +-
 .../components/SelectColumn.tsx               |  4 +-
 .../components/SelectHeaderTable.tsx          |  4 +-
 .../SelectSheetStep/SelectSheetStep.tsx       |  4 +-
 .../steps/components/UploadFlow.tsx           |  4 +-
 .../components/UploadStep/UploadStep.tsx      |  4 +-
 .../UploadStep/components/ExampleTable.tsx    |  6 +-
 .../ValidationStep/ValidationStep.tsx         |  4 +-
 .../utils/getMatchedColumns.ts                |  4 +-
 .../spreadsheet-import/utils/setColumn.ts     |  4 +-
 .../spreadsheet-import/utils/uniqueEntries.ts |  4 +-
 .../ui/action-bar/components/ActionBar.tsx    |  4 +-
 .../action-bar/components/ActionBarItem.tsx   |  4 +-
 .../modules/ui/board/components/NewButton.tsx |  4 +-
 .../components/AnimatedCheckmark.tsx          |  6 +-
 front/src/modules/ui/chip/components/Chip.tsx |  6 +-
 .../modules/ui/chip/components/EntityChip.tsx |  4 +-
 .../context-menu/components/ContextMenu.tsx   |  4 +-
 .../components/ContextMenuItem.tsx            |  4 +-
 .../components/ColumnHeadWithDropdown.tsx     |  4 +-
 .../ui/data-table/components/DataTable.tsx    |  4 +-
 .../components/TableColumnDropdownMenu.tsx    |  6 +-
 .../components/TableCellContainer.tsx         |  4 +-
 .../components/TableCellEditMode.tsx          |  6 +-
 .../components/TableCellSoftFocusMode.tsx     |  6 +-
 .../ui/field/components/FieldInput.tsx        |  4 +-
 .../components/ChipDisplay.tsx                |  4 +-
 .../components/DateDisplay.tsx                |  4 +-
 .../components/EmailDisplay.tsx               |  4 +-
 .../components/MoneyDisplay.tsx               |  4 +-
 .../components/NumberDisplay.tsx              |  4 +-
 .../components/PhoneDisplay.tsx               |  4 +-
 .../components/TextDisplay.tsx                |  4 +-
 .../content-display/components/URLDisplay.tsx |  4 +-
 .../input/components/BooleanFieldInput.tsx    |  4 +-
 .../input/components/ChipFieldInput.tsx       |  4 +-
 .../input/components/DateFieldInput.tsx       |  4 +-
 .../components/DoubleTextChipFieldInput.tsx   |  4 +-
 .../input/components/DoubleTextFieldInput.tsx |  4 +-
 .../input/components/EmailFieldInput.tsx      |  4 +-
 .../input/components/MoneyFieldInput.tsx      |  4 +-
 .../input/components/NumberFieldInput.tsx     |  4 +-
 .../input/components/PhoneFieldInput.tsx      |  4 +-
 .../components/ProbabilityFieldInput.tsx      |  6 +-
 .../input/components/RelationFieldInput.tsx   |  7 +-
 .../input/components/TextFieldInput.tsx       |  4 +-
 .../input/components/URLFieldInput.tsx        |  4 +-
 .../ui/icon/components/IconAddressBook.tsx    |  4 +-
 .../components/InlineCellContainer.tsx        |  8 +-
 .../components/InlineCellDisplayMode.tsx      |  6 +-
 .../components/InlineCellEditMode.tsx         |  6 +-
 .../ui/input/components/AutosizeTextInput.tsx |  4 +-
 .../ui/input/components/BooleanInput.tsx      |  4 +-
 .../modules/ui/input/components/Checkbox.tsx  |  4 +-
 .../modules/ui/input/components/DateInput.tsx |  4 +-
 .../ui/input/components/DoubleTextInput.tsx   |  4 +-
 .../components/EntityTitleDoubleTextInput.tsx |  4 +-
 .../ui/input/components/PhoneInput.tsx        |  4 +-
 .../ui/input/components/ProbabilityInput.tsx  |  7 +-
 .../modules/ui/input/components/TextInput.tsx |  4 +-
 .../ui/input/image/components/ImageInput.tsx  |  4 +-
 .../text/components/TextInputSettings.tsx     | 12 ++-
 .../ui/layout/components/DefaultLayout.tsx    |  4 +-
 .../ui/layout/components/PageAddButton.tsx    |  4 +-
 .../modules/ui/layout/components/PageBody.tsx |  4 +-
 .../ui/layout/components/PageContainer.tsx    |  4 +-
 .../layout/components/PageFavoriteButton.tsx  |  7 +-
 .../layout/components/PageHotkeysEffect.tsx   |  6 +-
 .../components/RightDrawerContainer.tsx       |  7 +-
 .../components/ShowPageRightContainer.tsx     |  4 +-
 .../components/ShowPageSummaryCard.tsx        |  4 +-
 .../ui/link/components/ContactLink.tsx        |  4 +-
 .../ui/link/components/PrimaryLink.tsx        |  4 +-
 .../modules/ui/link/components/RawLink.tsx    |  9 +-
 .../ui/link/components/RoundedLink.tsx        |  4 +-
 .../modules/ui/link/components/SocialLink.tsx |  9 +-
 .../menu-item/components/MenuItemCommand.tsx  |  4 +-
 .../components/MenuItemMultiSelect.tsx        |  4 +-
 .../components/MenuItemMultiSelectAvatar.tsx  |  4 +-
 .../menu-item/components/MenuItemNavigate.tsx |  4 +-
 .../menu-item/components/MenuItemSelect.tsx   |  4 +-
 .../components/MenuItemSelectAvatar.tsx       |  4 +-
 .../components/MenuItemSelectColor.tsx        |  4 +-
 .../menu-item/components/MenuItemToggle.tsx   |  4 +-
 .../components/MenuItemLeftContent.tsx        |  4 +-
 .../ui/navbar/components/MainNavbar.tsx       |  4 +-
 .../ui/navbar/components/NavBackButton.tsx    |  4 +-
 .../navbar/components/NavCollapseButton.tsx   |  4 +-
 .../navbar/components/NavItemsContainer.tsx   |  4 +-
 .../modules/ui/navbar/components/NavTitle.tsx |  6 +-
 .../navbar/components/NavWorkspaceButton.tsx  |  6 +-
 .../components/NavbarAnimatedContainer.tsx    |  6 +-
 .../ui/navbar/components/SubMenuNavbar.tsx    |  4 +-
 .../components/CircularProgressBar.tsx        |  4 +-
 .../modules/ui/section/components/Section.tsx |  4 +-
 .../ui/snack-bar/components/SnackBar.tsx      |  8 +-
 .../ui/snack-bar/states/snackBarState.ts      |  4 +-
 .../ui/step-bar/components/StepBar.tsx        |  8 +-
 .../ui/theme/components/AppThemeProvider.tsx  |  4 +-
 front/src/modules/ui/tooltip/AppTooltip.tsx   |  4 +-
 front/src/modules/ui/top-bar/TopBar.tsx       |  4 +-
 .../ui/typography/components/H1Title.tsx      |  4 +-
 .../ui/typography/components/H2Title.tsx      |  4 +-
 .../animation/components/AnimatedEaseIn.tsx   |  4 +-
 .../animation/components/AnimatedTextWord.tsx | 10 ++-
 .../debug/components/TimingProfiler.tsx       |  4 +-
 .../components/ComputeNodeDimensions.tsx      |  4 +-
 .../drag-select/components/DragSelect.tsx     |  4 +-
 .../hotkey/components/HotkeyEffect.tsx        |  7 +-
 .../ui/utilities/page-title/PageTitle.tsx     | 14 ++--
 .../components/GenericEntityFilterChip.tsx    |  7 +-
 .../view-bar/components/SortOrFilterChip.tsx  |  4 +-
 .../components/ViewBarDropdownButton.tsx      |  4 +-
 .../components/WorkspaceInviteLink.tsx        |  6 +-
 .../components/WorkspaceMemberCard.tsx        |  4 +-
 .../src/testing/FullHeightStorybookLayout.tsx |  8 +-
 .../eslint-plugin-twenty-ts/dist/index.js     |  1 +
 .../dist/src/rules/component-props-naming.js  | 66 +++++++++++++++
 .../src/tests/component-props-naming.spec.js  | 54 ++++++++++++
 packages/eslint-plugin-twenty/index.ts        |  1 +
 .../src/rules/component-props-naming.ts       | 84 +++++++++++++++++++
 .../src/tests/component-props-naming.spec.ts  | 47 +++++++++++
 170 files changed, 700 insertions(+), 342 deletions(-)
 create mode 100644 packages/eslint-plugin-twenty-ts/dist/src/rules/component-props-naming.js
 create mode 100644 packages/eslint-plugin-twenty-ts/dist/src/tests/component-props-naming.spec.js
 create mode 100644 packages/eslint-plugin-twenty/src/rules/component-props-naming.ts
 create mode 100644 packages/eslint-plugin-twenty/src/tests/component-props-naming.spec.ts

diff --git a/docs/docs/contributor/frontend/advanced/best-practices.mdx b/docs/docs/contributor/frontend/advanced/best-practices.mdx
index b3a03be12..721140457 100644
--- a/docs/docs/contributor/frontend/advanced/best-practices.mdx
+++ b/docs/docs/contributor/frontend/advanced/best-practices.mdx
@@ -206,12 +206,12 @@ EXAMPLE
 Assume, we have the `EmailField` component defined below
 
 ```tsx
-type OwnProps = {
+type EmailFieldProps = {
   value: string;
   disabled?: boolean;
 };
 
-const EmailField = ({ value, disabled = false }: OwnProps) => (
+const EmailField = ({ value, disabled = false }: EmailFieldProps) => (
   <TextInput value={value} disabled={disabled} fullWidth />
 );
 ```
diff --git a/docs/docs/contributor/frontend/advanced/style-guide.mdx b/docs/docs/contributor/frontend/advanced/style-guide.mdx
index 65efd35d0..a4048ce61 100644
--- a/docs/docs/contributor/frontend/advanced/style-guide.mdx
+++ b/docs/docs/contributor/frontend/advanced/style-guide.mdx
@@ -40,7 +40,7 @@ export function MyComponent() {
 
 ### Props
 
-Create the type of the props and call it `OwnProps` if there's no need to export it.
+Create the type of the props and call it `(ComponentName)Props` if there's no need to export it.
 
 Use props destructuring.
 
@@ -49,11 +49,11 @@ Use props destructuring.
 export const MyComponent = (props) => <div>Hello {props.name}</div>;
 
 // ✅ Good, type
-type OwnProps = {
+type MyComponentProps = {
   name: string;
 };
 
-export const MyComponent = ({ name }: OwnProps) => <div>Hello {name}</div>;
+export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
 ```
 
 #### Refrain from using `React.FC` or `React.FunctionComponent` to define prop types.
@@ -76,11 +76,11 @@ const EmailField: React.FC<{
  *    - This method doesn't automatically include the children prop. If
  *      you want to include it, you have to specify it in OwnProps.
  */ 
-type OwnProps = {
+type EmailFieldProps = {
   value: string;
 };
 
-const EmailField = ({ value }: OwnProps) => (
+const EmailField = ({ value }: EmailFieldProps) => (
   <TextInput value={value} disabled fullWidth />
 );
 ```
@@ -101,7 +101,7 @@ const MyComponent = (props: OwnProps) => {
 /* ✅ - Good, Explicitly lists all props
  *    - Enhances readability and maintainability
  */ 
-const MyComponent = ({ prop1, prop2, prop3 }: OwnProps) => {
+const MyComponent = ({ prop1, prop2, prop3 }: MyComponentProps) => {
   return <OtherComponent {...{ prop1, prop2, prop3 }} />;
 };
 ```
diff --git a/front/.eslintrc.js b/front/.eslintrc.js
index d1ea86f85..916a9c765 100644
--- a/front/.eslintrc.js
+++ b/front/.eslintrc.js
@@ -70,6 +70,7 @@ module.exports = {
     'twenty/no-hardcoded-colors': 'error',
     'twenty/no-spread-props': 'error',
     'twenty/matching-state-variable': 'error',
+    'twenty/component-props-naming': 'error',
     'twenty/sort-css-properties-alphabetically': 'error',
     'twenty/styled-components-prefixed-with-styled': 'error',
     'func-style':['error', 'declaration', { 'allowArrowFunctions': true }],
diff --git a/front/src/modules/activities/comment/Comment.tsx b/front/src/modules/activities/comment/Comment.tsx
index d91852caa..c9301f46c 100644
--- a/front/src/modules/activities/comment/Comment.tsx
+++ b/front/src/modules/activities/comment/Comment.tsx
@@ -4,7 +4,7 @@ import { CommentForDrawer } from '../types/CommentForDrawer';
 
 import { CommentHeader } from './CommentHeader';
 
-type OwnProps = {
+type CommentProps = {
   comment: CommentForDrawer;
   actionBar?: React.ReactNode;
 };
@@ -30,7 +30,7 @@ const StyledCommentBody = styled.div`
   text-align: left;
 `;
 
-export const Comment = ({ comment, actionBar }: OwnProps) => (
+export const Comment = ({ comment, actionBar }: CommentProps) => (
   <StyledContainer>
     <CommentHeader comment={comment} actionBar={actionBar} />
     <StyledCommentBody>{comment.body}</StyledCommentBody>
diff --git a/front/src/modules/activities/comment/CommentHeader.tsx b/front/src/modules/activities/comment/CommentHeader.tsx
index 83b30a369..c001ffd3e 100644
--- a/front/src/modules/activities/comment/CommentHeader.tsx
+++ b/front/src/modules/activities/comment/CommentHeader.tsx
@@ -9,7 +9,7 @@ import {
 
 import { CommentForDrawer } from '../types/CommentForDrawer';
 
-type OwnProps = {
+type CommentHeaderProps = {
   comment: Pick<CommentForDrawer, 'id' | 'author' | 'createdAt'>;
   actionBar?: React.ReactNode;
 };
@@ -62,7 +62,7 @@ const StyledTooltip = styled(Tooltip)`
   padding: 8px;
 `;
 
-export const CommentHeader = ({ comment, actionBar }: OwnProps) => {
+export const CommentHeader = ({ comment, actionBar }: CommentHeaderProps) => {
   const beautifiedCreatedAt = beautifyPastDateRelativeToNow(comment.createdAt);
   const exactCreatedAt = beautifyExactDateTime(comment.createdAt);
   const showDate = beautifiedCreatedAt !== '';
diff --git a/front/src/modules/activities/components/ActivityAssigneePicker.tsx b/front/src/modules/activities/components/ActivityAssigneePicker.tsx
index 17378a4a5..1fcdfc64b 100644
--- a/front/src/modules/activities/components/ActivityAssigneePicker.tsx
+++ b/front/src/modules/activities/components/ActivityAssigneePicker.tsx
@@ -18,7 +18,7 @@ import {
 import { ACTIVITY_UPDATE_FRAGMENT } from '../graphql/fragments/activityUpdateFragment';
 import { GET_ACTIVITIES } from '../graphql/queries/getActivities';
 
-export type OwnProps = {
+export type ActivityAssigneePickerProps = {
   activity: Pick<Activity, 'id'> & {
     accountOwner?: Pick<User, 'id' | 'displayName'> | null;
   };
@@ -34,7 +34,7 @@ export const ActivityAssigneePicker = ({
   activity,
   onSubmit,
   onCancel,
-}: OwnProps) => {
+}: ActivityAssigneePickerProps) => {
   const [relationPickerSearchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );
diff --git a/front/src/modules/activities/components/ActivityBodyEditor.tsx b/front/src/modules/activities/components/ActivityBodyEditor.tsx
index 3dfa29beb..cf90d557f 100644
--- a/front/src/modules/activities/components/ActivityBodyEditor.tsx
+++ b/front/src/modules/activities/components/ActivityBodyEditor.tsx
@@ -14,12 +14,15 @@ const StyledBlockNoteStyledContainer = styled.div`
   width: 100%;
 `;
 
-type OwnProps = {
+type ActivityBodyEditorProps = {
   activity: Pick<Activity, 'id' | 'body'>;
   onChange?: (activityBody: string) => void;
 };
 
-export const ActivityBodyEditor = ({ activity, onChange }: OwnProps) => {
+export const ActivityBodyEditor = ({
+  activity,
+  onChange,
+}: ActivityBodyEditorProps) => {
   const [updateActivityMutation] = useUpdateActivityMutation();
 
   const client = useApolloClient();
diff --git a/front/src/modules/activities/components/ActivityComments.tsx b/front/src/modules/activities/components/ActivityComments.tsx
index 496f16ea6..2a1053327 100644
--- a/front/src/modules/activities/components/ActivityComments.tsx
+++ b/front/src/modules/activities/components/ActivityComments.tsx
@@ -16,7 +16,7 @@ import { Comment } from '../comment/Comment';
 import { GET_ACTIVITY } from '../graphql/queries/getActivity';
 import { CommentForDrawer } from '../types/CommentForDrawer';
 
-type OwnProps = {
+type ActivityCommentsProps = {
   activity: Pick<Activity, 'id'> & {
     comments: Array<CommentForDrawer>;
   };
@@ -62,7 +62,7 @@ const StyledThreadCommentTitle = styled.div`
 export const ActivityComments = ({
   activity,
   scrollableContainerRef,
-}: OwnProps) => {
+}: ActivityCommentsProps) => {
   const [createCommentMutation] = useCreateCommentMutation();
   const currentUser = useRecoilValue(currentUserState);
 
diff --git a/front/src/modules/activities/components/ActivityEditor.tsx b/front/src/modules/activities/components/ActivityEditor.tsx
index e2f6bd6b8..ecb7f0e57 100644
--- a/front/src/modules/activities/components/ActivityEditor.tsx
+++ b/front/src/modules/activities/components/ActivityEditor.tsx
@@ -60,7 +60,7 @@ const StyledTopContainer = styled.div`
   padding: 24px 24px 24px 48px;
 `;
 
-type OwnProps = {
+type ActivityEditorProps = {
   activity: Pick<
     Activity,
     'id' | 'title' | 'body' | 'type' | 'completedAt' | 'dueAt'
@@ -82,7 +82,7 @@ export const ActivityEditor = ({
   activity,
   showComment = true,
   autoFillTitle = false,
-}: OwnProps) => {
+}: ActivityEditorProps) => {
   const [hasUserManuallySetTitle, setHasUserManuallySetTitle] =
     useState<boolean>(false);
 
diff --git a/front/src/modules/activities/components/ActivityTitle.tsx b/front/src/modules/activities/components/ActivityTitle.tsx
index ff03d6387..935361e7c 100644
--- a/front/src/modules/activities/components/ActivityTitle.tsx
+++ b/front/src/modules/activities/components/ActivityTitle.tsx
@@ -44,7 +44,7 @@ const StyledCheckboxContainer = styled.div`
   justify-content: center;
 `;
 
-type OwnProps = {
+type ActivityTitleProps = {
   title: string;
   type: ActivityType;
   completed: boolean;
@@ -58,7 +58,7 @@ export const ActivityTitle = ({
   type,
   onTitleChange,
   onCompletionChange,
-}: OwnProps) => (
+}: ActivityTitleProps) => (
   <StyledContainer>
     {type === ActivityType.Task && (
       <StyledCheckboxContainer onClick={() => onCompletionChange(!completed)}>
diff --git a/front/src/modules/activities/components/ActivityTypeDropdown.tsx b/front/src/modules/activities/components/ActivityTypeDropdown.tsx
index 20be16577..f27f2f373 100644
--- a/front/src/modules/activities/components/ActivityTypeDropdown.tsx
+++ b/front/src/modules/activities/components/ActivityTypeDropdown.tsx
@@ -9,11 +9,13 @@ import {
 import { IconCheckbox, IconNotes } from '@/ui/icon';
 import { Activity, ActivityType } from '~/generated/graphql';
 
-type OwnProps = {
+type ActivityTypeDropdownProps = {
   activity: Pick<Activity, 'type'>;
 };
 
-export const ActivityTypeDropdown = ({ activity }: OwnProps) => {
+export const ActivityTypeDropdown = ({
+  activity,
+}: ActivityTypeDropdownProps) => {
   const theme = useTheme();
   return (
     <Chip
diff --git a/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx b/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx
index a9dbbc25d..317b3a227 100644
--- a/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx
+++ b/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx
@@ -7,13 +7,15 @@ import { InlineCellHotkeyScope } from '@/ui/inline-cell/types/InlineCellHotkeySc
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { Company, User, useUpdateActivityMutation } from '~/generated/graphql';
 
-type OwnProps = {
+type ActivityAssigneeEditableFieldProps = {
   activity: Pick<Company, 'id' | 'accountOwnerId'> & {
     assignee?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
   };
 };
 
-export const ActivityAssigneeEditableField = ({ activity }: OwnProps) => {
+export const ActivityAssigneeEditableField = ({
+  activity,
+}: ActivityAssigneeEditableFieldProps) => {
   return (
     <FieldContext.Provider
       value={{
diff --git a/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableFieldEditMode.tsx b/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableFieldEditMode.tsx
index 25d0ee79a..6d6c39fb4 100644
--- a/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableFieldEditMode.tsx
+++ b/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableFieldEditMode.tsx
@@ -10,7 +10,7 @@ const StyledContainer = styled.div`
   top: -8px;
 `;
 
-export type OwnProps = {
+export type ActivityAssigneeEditableFieldEditModeProps = {
   activity: Pick<Activity, 'id'> & {
     assignee?: Pick<User, 'id' | 'displayName'> | null;
   };
@@ -22,7 +22,7 @@ export const ActivityAssigneeEditableFieldEditMode = ({
   activity,
   onSubmit,
   onCancel,
-}: OwnProps) => {
+}: ActivityAssigneeEditableFieldEditModeProps) => {
   const { closeInlineCell: closeEditableField } = useInlineCell();
 
   const handleSubmit = () => {
diff --git a/front/src/modules/activities/editable-fields/components/ActivityEditorDateField.tsx b/front/src/modules/activities/editable-fields/components/ActivityEditorDateField.tsx
index c05eb579a..9b5cd6500 100644
--- a/front/src/modules/activities/editable-fields/components/ActivityEditorDateField.tsx
+++ b/front/src/modules/activities/editable-fields/components/ActivityEditorDateField.tsx
@@ -7,11 +7,13 @@ import { InlineCellHotkeyScope } from '@/ui/inline-cell/types/InlineCellHotkeySc
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useUpdateActivityMutation } from '~/generated/graphql';
 
-type OwnProps = {
+type ActivityEditorDateFieldProps = {
   activityId: string;
 };
 
-export const ActivityEditorDateField = ({ activityId }: OwnProps) => {
+export const ActivityEditorDateField = ({
+  activityId,
+}: ActivityEditorDateFieldProps) => {
   return (
     <RecoilScope>
       <FieldContext.Provider
diff --git a/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx b/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx
index 726cc0cb0..6db6c74a0 100644
--- a/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx
+++ b/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx
@@ -8,7 +8,7 @@ import { Activity, ActivityTarget, Company, Person } from '~/generated/graphql';
 
 import { ActivityRelationEditableFieldEditMode } from './ActivityRelationEditableFieldEditMode';
 
-type OwnProps = {
+type ActivityRelationEditableFieldProps = {
   activity?: Pick<Activity, 'id'> & {
     activityTargets?: Array<
       Pick<ActivityTarget, 'id' | 'personId' | 'companyId'> & {
@@ -19,7 +19,9 @@ type OwnProps = {
   };
 };
 
-export const ActivityRelationEditableField = ({ activity }: OwnProps) => {
+export const ActivityRelationEditableField = ({
+  activity,
+}: ActivityRelationEditableFieldProps) => {
   return (
     <RecoilScope CustomRecoilScopeContext={FieldRecoilScopeContext}>
       <RecoilScope>
diff --git a/front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx b/front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx
index c35b694c7..80c36546f 100644
--- a/front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx
+++ b/front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx
@@ -10,7 +10,7 @@ import { MultipleEntitySelect } from '@/ui/input/relation-picker/components/Mult
 import { Activity, ActivityTarget } from '~/generated/graphql';
 import { assertNotNull } from '~/utils/assert';
 
-type OwnProps = {
+type ActivityRelationEditableFieldEditModeProps = {
   activity?: Pick<Activity, 'id'> & {
     activityTargets?: Array<
       Pick<ActivityTarget, 'id' | 'personId' | 'companyId'>
@@ -26,7 +26,7 @@ const StyledSelectContainer = styled.div`
 
 export const ActivityRelationEditableFieldEditMode = ({
   activity,
-}: OwnProps) => {
+}: ActivityRelationEditableFieldEditModeProps) => {
   const [searchFilter, setSearchFilter] = useState('');
 
   const initialPeopleIds = useMemo(
diff --git a/front/src/modules/activities/notes/components/NoteList.tsx b/front/src/modules/activities/notes/components/NoteList.tsx
index 62a634584..74066d92a 100644
--- a/front/src/modules/activities/notes/components/NoteList.tsx
+++ b/front/src/modules/activities/notes/components/NoteList.tsx
@@ -5,7 +5,7 @@ import { NoteForList } from '../../types/NoteForList';
 
 import { NoteCard } from './NoteCard';
 
-type OwnProps = {
+type NoteListProps = {
   title: string;
   notes: NoteForList[];
   button?: ReactElement | false;
@@ -47,7 +47,7 @@ const StyledNoteContainer = styled.div`
   width: 100%;
 `;
 
-export const NoteList = ({ title, notes, button }: OwnProps) => (
+export const NoteList = ({ title, notes, button }: NoteListProps) => (
   <>
     {notes && notes.length > 0 && (
       <StyledContainer>
diff --git a/front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx b/front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
index 054654e4a..e3d62e222 100644
--- a/front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
+++ b/front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
@@ -10,11 +10,11 @@ import { IconTrash } from '@/ui/icon';
 import { isRightDrawerOpenState } from '@/ui/right-drawer/states/isRightDrawerOpenState';
 import { useDeleteActivityMutation } from '~/generated/graphql';
 
-type OwnProps = {
+type ActivityActionBarProps = {
   activityId: string;
 };
 
-export const ActivityActionBar = ({ activityId }: OwnProps) => {
+export const ActivityActionBar = ({ activityId }: ActivityActionBarProps) => {
   const [deleteActivityMutation] = useDeleteActivityMutation();
   const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
 
diff --git a/front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx b/front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx
index 5982ab5cc..2abeeb7ab 100644
--- a/front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx
+++ b/front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx
@@ -18,7 +18,7 @@ const StyledContainer = styled.div`
   position: relative;
 `;
 
-type OwnProps = {
+type RightDrawerActivityProps = {
   activityId: string;
   showComment?: boolean;
   autoFillTitle?: boolean;
@@ -28,7 +28,7 @@ export const RightDrawerActivity = ({
   activityId,
   showComment = true,
   autoFillTitle = false,
-}: OwnProps) => {
+}: RightDrawerActivityProps) => {
   const [, setEntityFields] = useRecoilState(
     entityFieldsFamilyState(activityId),
   );
diff --git a/front/src/modules/activities/table/components/CellCommentChip.tsx b/front/src/modules/activities/table/components/CellCommentChip.tsx
index 4027975c4..5b89dedc5 100644
--- a/front/src/modules/activities/table/components/CellCommentChip.tsx
+++ b/front/src/modules/activities/table/components/CellCommentChip.tsx
@@ -2,10 +2,12 @@ import styled from '@emotion/styled';
 
 import { CommentChip, CommentChipProps } from './CommentChip';
 
+type CellCommentChipProps = CommentChipProps;
+
 // TODO: tie those fixed values to the other components in the cell
 const StyledCellWrapper = styled.div``;
 
-export const CellCommentChip = (props: CommentChipProps) => {
+export const CellCommentChip = (props: CellCommentChipProps) => {
   if (props.count === 0) return null;
 
   return (
diff --git a/front/src/modules/activities/tasks/components/TaskGroups.tsx b/front/src/modules/activities/tasks/components/TaskGroups.tsx
index 3bf4f2d53..f19cf18f9 100644
--- a/front/src/modules/activities/tasks/components/TaskGroups.tsx
+++ b/front/src/modules/activities/tasks/components/TaskGroups.tsx
@@ -13,7 +13,7 @@ import { ActivityType } from '~/generated/graphql';
 import { AddTaskButton } from './AddTaskButton';
 import { TaskList } from './TaskList';
 
-type OwnProps = {
+type TaskGroupsProps = {
   entity?: ActivityTargetableEntity;
   showAddButton?: boolean;
 };
@@ -52,7 +52,7 @@ const StyledContainer = styled.div`
   flex-direction: column;
 `;
 
-export const TaskGroups = ({ entity, showAddButton }: OwnProps) => {
+export const TaskGroups = ({ entity, showAddButton }: TaskGroupsProps) => {
   const {
     todayOrPreviousTasks,
     upcomingTasks,
diff --git a/front/src/modules/activities/tasks/components/TaskList.tsx b/front/src/modules/activities/tasks/components/TaskList.tsx
index 92343be84..d2139784c 100644
--- a/front/src/modules/activities/tasks/components/TaskList.tsx
+++ b/front/src/modules/activities/tasks/components/TaskList.tsx
@@ -5,7 +5,7 @@ import { TaskForList } from '@/activities/types/TaskForList';
 
 import { TaskRow } from './TaskRow';
 
-type OwnProps = {
+type TaskListProps = {
   title?: string;
   tasks: TaskForList[];
   button?: ReactElement | false;
@@ -46,7 +46,7 @@ const StyledTaskRows = styled.div`
   width: 100%;
 `;
 
-export const TaskList = ({ title, tasks, button }: OwnProps) => (
+export const TaskList = ({ title, tasks, button }: TaskListProps) => (
   <>
     {tasks && tasks.length > 0 && (
       <StyledContainer>
diff --git a/front/src/modules/activities/timeline/components/TimelineActivity.tsx b/front/src/modules/activities/timeline/components/TimelineActivity.tsx
index 55a288de1..bea4ca5d2 100644
--- a/front/src/modules/activities/timeline/components/TimelineActivity.tsx
+++ b/front/src/modules/activities/timeline/components/TimelineActivity.tsx
@@ -116,7 +116,7 @@ const StyledTimelineItemContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(4)};
 `;
 
-type OwnProps = {
+type TimelineActivityProps = {
   activity: Pick<
     Activity,
     'id' | 'title' | 'body' | 'createdAt' | 'completedAt' | 'type'
@@ -125,7 +125,7 @@ type OwnProps = {
   };
 };
 
-export const TimelineActivity = ({ activity }: OwnProps) => {
+export const TimelineActivity = ({ activity }: TimelineActivityProps) => {
   const beautifiedCreatedAt = beautifyPastDateRelativeToNow(activity.createdAt);
   const exactCreatedAt = beautifyExactDateTime(activity.createdAt);
   const body = JSON.parse(activity.body ?? '{}')[0]?.content[0]?.text;
diff --git a/front/src/modules/activities/timeline/components/TimelineActivityCardFooter.tsx b/front/src/modules/activities/timeline/components/TimelineActivityCardFooter.tsx
index a753a3857..600ae5bda 100644
--- a/front/src/modules/activities/timeline/components/TimelineActivityCardFooter.tsx
+++ b/front/src/modules/activities/timeline/components/TimelineActivityCardFooter.tsx
@@ -4,7 +4,7 @@ import { UserChip } from '@/users/components/UserChip';
 import { Activity, User } from '~/generated/graphql';
 import { beautifyExactDate } from '~/utils/date-utils';
 
-type OwnProps = {
+type TimelineActivityCardFooterProps = {
   activity: Pick<Activity, 'id' | 'dueAt'> & {
     assignee?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
   };
@@ -26,7 +26,9 @@ const StyledVerticalSeparator = styled.div`
   height: 24px;
 `;
 
-export const TimelineActivityCardFooter = ({ activity }: OwnProps) => (
+export const TimelineActivityCardFooter = ({
+  activity,
+}: TimelineActivityCardFooterProps) => (
   <>
     {(activity.assignee || activity.dueAt) && (
       <StyledContainer>
diff --git a/front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx b/front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx
index c296cd4c3..ceb96fd23 100644
--- a/front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx
+++ b/front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx
@@ -30,7 +30,7 @@ const StyledCheckboxContainer = styled.div<{ hasCheckbox?: boolean }>`
   justify-content: center;
 `;
 
-type OwnProps = {
+type TimelineActivityTitleProps = {
   title: string;
   completed?: boolean;
   type: ActivityType;
@@ -42,7 +42,7 @@ export const TimelineActivityTitle = ({
   completed,
   type,
   onCompletionChange,
-}: OwnProps) => (
+}: TimelineActivityTitleProps) => (
   <StyledTitleContainer>
     {type === ActivityType.Task && (
       <StyledCheckboxContainer
diff --git a/front/src/modules/auth/components/Logo.tsx b/front/src/modules/auth/components/Logo.tsx
index 003559a9d..e79922864 100644
--- a/front/src/modules/auth/components/Logo.tsx
+++ b/front/src/modules/auth/components/Logo.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
 
-type Props = React.ComponentProps<'div'> & {
+type LogoProps = React.ComponentProps<'div'> & {
   workspaceLogo?: string | null;
 };
 
@@ -47,7 +47,7 @@ const StyledMainLogo = styled.div<StyledMainLogoProps>`
   width: 100%;
 `;
 
-export const Logo = ({ workspaceLogo, ...props }: Props) => {
+export const Logo = ({ workspaceLogo, ...props }: LogoProps) => {
   if (!workspaceLogo) {
     return (
       // eslint-disable-next-line twenty/no-spread-props
diff --git a/front/src/modules/auth/components/Modal.tsx b/front/src/modules/auth/components/Modal.tsx
index 765b04aa7..813ffc0eb 100644
--- a/front/src/modules/auth/components/Modal.tsx
+++ b/front/src/modules/auth/components/Modal.tsx
@@ -8,9 +8,9 @@ const StyledContent = styled(UIModal.Content)`
   width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
 `;
 
-type Props = React.ComponentProps<'div'>;
+type AuthModalProps = React.ComponentProps<'div'>;
 
-export const AuthModal = ({ children, ...restProps }: Props) => (
+export const AuthModal = ({ children, ...restProps }: AuthModalProps) => (
   // eslint-disable-next-line twenty/no-spread-props
   <UIModal isOpen={true} {...restProps}>
     <StyledContent>{children}</StyledContent>
diff --git a/front/src/modules/auth/components/SubTitle.tsx b/front/src/modules/auth/components/SubTitle.tsx
index 07a5838d4..e9f485238 100644
--- a/front/src/modules/auth/components/SubTitle.tsx
+++ b/front/src/modules/auth/components/SubTitle.tsx
@@ -1,7 +1,7 @@
 import { JSX, ReactNode } from 'react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type SubTitleProps = {
   children: ReactNode;
 };
 
@@ -9,6 +9,6 @@ const StyledSubTitle = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
 `;
 
-export const SubTitle = ({ children }: OwnProps): JSX.Element => (
+export const SubTitle = ({ children }: SubTitleProps): JSX.Element => (
   <StyledSubTitle>{children}</StyledSubTitle>
 );
diff --git a/front/src/modules/auth/components/Title.tsx b/front/src/modules/auth/components/Title.tsx
index 4bc01026f..9ef55d43d 100644
--- a/front/src/modules/auth/components/Title.tsx
+++ b/front/src/modules/auth/components/Title.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
 
-type Props = React.PropsWithChildren & {
+type TitleProps = React.PropsWithChildren & {
   animate?: boolean;
 };
 
@@ -15,7 +15,7 @@ const StyledTitle = styled.div`
   margin-top: ${({ theme }) => theme.spacing(4)};
 `;
 
-export const Title = ({ children, animate = false }: Props) => {
+export const Title = ({ children, animate = false }: TitleProps) => {
   if (animate) {
     return (
       <StyledTitle>
diff --git a/front/src/modules/auth/sign-in-up/components/FooterNote.tsx b/front/src/modules/auth/sign-in-up/components/FooterNote.tsx
index cd41568fb..1a61d4685 100644
--- a/front/src/modules/auth/sign-in-up/components/FooterNote.tsx
+++ b/front/src/modules/auth/sign-in-up/components/FooterNote.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-type Props = React.ComponentProps<'div'>;
+type FooterNoteProps = React.ComponentProps<'div'>;
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -11,5 +11,7 @@ const StyledContainer = styled.div`
   text-align: center;
 `;
 
-// eslint-disable-next-line twenty/no-spread-props
-export const FooterNote = (props: Props) => <StyledContainer {...props} />;
+export const FooterNote = (props: FooterNoteProps) => (
+  // eslint-disable-next-line twenty/no-spread-props
+  <StyledContainer {...props} />
+);
diff --git a/front/src/modules/command-menu/components/CommandGroup.tsx b/front/src/modules/command-menu/components/CommandGroup.tsx
index 793c17c36..c01212a12 100644
--- a/front/src/modules/command-menu/components/CommandGroup.tsx
+++ b/front/src/modules/command-menu/components/CommandGroup.tsx
@@ -18,12 +18,12 @@ const StyledGroup = styled(Command.Group)`
   }
 `;
 
-type OwnProps = {
+type CommandGroupProps = {
   heading: string;
   children: React.ReactNode | React.ReactNode[];
 };
 
-export const CommandGroup = ({ heading, children }: OwnProps) => {
+export const CommandGroup = ({ heading, children }: CommandGroupProps) => {
   if (!children || !React.Children.count(children)) {
     return null;
   }
diff --git a/front/src/modules/companies/components/CompanyChip.tsx b/front/src/modules/companies/components/CompanyChip.tsx
index 98248b0e2..39016efc6 100644
--- a/front/src/modules/companies/components/CompanyChip.tsx
+++ b/front/src/modules/companies/components/CompanyChip.tsx
@@ -1,6 +1,6 @@
 import { EntityChip, EntityChipVariant } from '@/ui/chip/components/EntityChip';
 
-type OwnProps = {
+type CompanyChipProps = {
   id: string;
   name: string;
   pictureUrl?: string;
@@ -12,7 +12,7 @@ export const CompanyChip = ({
   name,
   pictureUrl,
   variant = EntityChipVariant.Regular,
-}: OwnProps) => (
+}: CompanyChipProps) => (
   <EntityChip
     entityId={id}
     linkToEntity={`/companies/${id}`}
diff --git a/front/src/modules/companies/components/CompanyPicker.tsx b/front/src/modules/companies/components/CompanyPicker.tsx
index 45e915647..53bf48090 100644
--- a/front/src/modules/companies/components/CompanyPicker.tsx
+++ b/front/src/modules/companies/components/CompanyPicker.tsx
@@ -7,13 +7,17 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 
 import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
 
-export type OwnProps = {
+export type CompanyPickerProps = {
   companyId: string | null;
   onSubmit: (newCompanyId: EntityForSelect | null) => void;
   onCancel?: () => void;
 };
 
-export const CompanyPicker = ({ companyId, onSubmit, onCancel }: OwnProps) => {
+export const CompanyPicker = ({
+  companyId,
+  onSubmit,
+  onCancel,
+}: CompanyPickerProps) => {
   const [relationPickerSearchFilter, setRelationPickerSearchFilter] =
     useRecoilScopedState(relationPickerSearchFilterScopedState);
 
diff --git a/front/src/modules/companies/components/CompanyProgressPicker.tsx b/front/src/modules/companies/components/CompanyProgressPicker.tsx
index ec5367d22..4ec9c9a3b 100644
--- a/front/src/modules/companies/components/CompanyProgressPicker.tsx
+++ b/front/src/modules/companies/components/CompanyProgressPicker.tsx
@@ -16,7 +16,7 @@ import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'
 
 import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
 
-export type OwnProps = {
+export type CompanyProgressPickerProps = {
   companyId: string | null;
   onSubmit: (
     newCompanyId: EntityForSelect | null,
@@ -29,7 +29,7 @@ export const CompanyProgressPicker = ({
   companyId,
   onSubmit,
   onCancel,
-}: OwnProps) => {
+}: CompanyProgressPickerProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
diff --git a/front/src/modules/companies/components/CompanyTeam.tsx b/front/src/modules/companies/components/CompanyTeam.tsx
index b531164a5..9d31c11a0 100644
--- a/front/src/modules/companies/components/CompanyTeam.tsx
+++ b/front/src/modules/companies/components/CompanyTeam.tsx
@@ -5,7 +5,7 @@ import { Company, useGetPeopleQuery } from '~/generated/graphql';
 
 import { AddPersonToCompany } from './AddPersonToCompany';
 
-export type CompanyTeamPropsType = {
+export type CompanyTeamProps = {
   company: Pick<Company, 'id'>;
 };
 
@@ -42,7 +42,7 @@ const StyledTitle = styled.div`
   line-height: ${({ theme }) => theme.text.lineHeight.lg};
 `;
 
-export const CompanyTeam = ({ company }: CompanyTeamPropsType) => {
+export const CompanyTeam = ({ company }: CompanyTeamProps) => {
   const { data } = useGetPeopleQuery({
     variables: {
       orderBy: [],
diff --git a/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx b/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx
index 6e5f25056..b0e0e19d6 100644
--- a/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx
+++ b/front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx
@@ -5,7 +5,7 @@ import { FieldRecoilScopeContext } from '@/ui/inline-cell/states/recoil-scope-co
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
 
-type OwnProps = {
+type CompanyNameEditableFieldProps = {
   company: Pick<Company, 'id' | 'name'>;
 };
 
@@ -33,7 +33,9 @@ const StyledEditableTitleInput = styled.input<{
   width: calc(100% - ${({ theme }) => theme.spacing(2)});
 `;
 
-export const CompanyNameEditableField = ({ company }: OwnProps) => {
+export const CompanyNameEditableField = ({
+  company,
+}: CompanyNameEditableFieldProps) => {
   const [internalValue, setInternalValue] = useState(company.name);
 
   const [updateCompany] = useUpdateOneCompanyMutation();
diff --git a/front/src/modules/people/components/PeoplePicker.tsx b/front/src/modules/people/components/PeoplePicker.tsx
index 9777535fd..e27bc79ef 100644
--- a/front/src/modules/people/components/PeoplePicker.tsx
+++ b/front/src/modules/people/components/PeoplePicker.tsx
@@ -6,7 +6,7 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useSearchPeopleQuery } from '~/generated/graphql';
 
-export type OwnProps = {
+export type PeoplePickerProps = {
   personId: string | null;
   companyId?: string;
   onSubmit: (newPersonId: PersonForSelect | null) => void;
@@ -26,7 +26,7 @@ export const PeoplePicker = ({
   onCancel,
   onCreate,
   excludePersonIds,
-}: OwnProps) => {
+}: PeoplePickerProps) => {
   const [relationPickerSearchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );
diff --git a/front/src/modules/people/components/PersonChip.tsx b/front/src/modules/people/components/PersonChip.tsx
index 7fe37c0b7..00ebfbfec 100644
--- a/front/src/modules/people/components/PersonChip.tsx
+++ b/front/src/modules/people/components/PersonChip.tsx
@@ -1,6 +1,6 @@
 import { EntityChip, EntityChipVariant } from '@/ui/chip/components/EntityChip';
 
-export type PersonChipPropsType = {
+export type PersonChipProps = {
   id: string;
   name: string;
   pictureUrl?: string;
@@ -12,7 +12,7 @@ export const PersonChip = ({
   name,
   pictureUrl,
   variant,
-}: PersonChipPropsType) => (
+}: PersonChipProps) => (
   <EntityChip
     entityId={id}
     linkToEntity={`/person/${id}`}
diff --git a/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx b/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx
index 3bf24401a..4ddcda882 100644
--- a/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx
+++ b/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx
@@ -5,11 +5,13 @@ import { EntityTitleDoubleTextInput } from '@/ui/input/components/EntityTitleDou
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Person, useUpdateOnePersonMutation } from '~/generated/graphql';
 
-type OwnProps = {
+type PeopleFullNameEditableFieldProps = {
   people: Pick<Person, 'id' | 'firstName' | 'lastName'>;
 };
 
-export const PeopleFullNameEditableField = ({ people }: OwnProps) => {
+export const PeopleFullNameEditableField = ({
+  people,
+}: PeopleFullNameEditableFieldProps) => {
   const [internalValueFirstName, setInternalValueFirstName] = useState(
     people.firstName,
   );
diff --git a/front/src/modules/settings/profile/components/NameFields.tsx b/front/src/modules/settings/profile/components/NameFields.tsx
index 28c5ce0ef..319d4a68a 100644
--- a/front/src/modules/settings/profile/components/NameFields.tsx
+++ b/front/src/modules/settings/profile/components/NameFields.tsx
@@ -18,7 +18,7 @@ const StyledComboInputContainer = styled.div`
   }
 `;
 
-type OwnProps = {
+type NameFieldsProps = {
   autoSave?: boolean;
   onFirstNameUpdate?: (firstName: string) => void;
   onLastNameUpdate?: (lastName: string) => void;
@@ -28,7 +28,7 @@ export const NameFields = ({
   autoSave = true,
   onFirstNameUpdate,
   onLastNameUpdate,
-}: OwnProps) => {
+}: NameFieldsProps) => {
   const currentUser = useRecoilValue(currentUserState);
 
   const [firstName, setFirstName] = useState(currentUser?.firstName ?? '');
diff --git a/front/src/modules/settings/workspace/components/NameField.tsx b/front/src/modules/settings/workspace/components/NameField.tsx
index 14cba84a3..58a327af0 100644
--- a/front/src/modules/settings/workspace/components/NameField.tsx
+++ b/front/src/modules/settings/workspace/components/NameField.tsx
@@ -18,12 +18,15 @@ const StyledComboInputContainer = styled.div`
   }
 `;
 
-type OwnProps = {
+type NameFieldProps = {
   autoSave?: boolean;
   onNameUpdate?: (name: string) => void;
 };
 
-export const NameField = ({ autoSave = true, onNameUpdate }: OwnProps) => {
+export const NameField = ({
+  autoSave = true,
+  onNameUpdate,
+}: NameFieldProps) => {
   const [currentUser] = useRecoilState(currentUserState);
   const workspace = currentUser?.workspaceMember?.workspace;
 
diff --git a/front/src/modules/spreadsheet-import/components/Heading.tsx b/front/src/modules/spreadsheet-import/components/Heading.tsx
index d35a7e620..52c2ad828 100644
--- a/front/src/modules/spreadsheet-import/components/Heading.tsx
+++ b/front/src/modules/spreadsheet-import/components/Heading.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-export type Props = React.ComponentProps<'div'> & {
+export type HeadingProps = React.ComponentProps<'div'> & {
   title: string;
   description?: string;
 };
@@ -27,7 +27,7 @@ const StyledDescription = styled.span`
   text-align: center;
 `;
 
-export const Heading = ({ title, description, ...props }: Props) => (
+export const Heading = ({ title, description, ...props }: HeadingProps) => (
   // eslint-disable-next-line twenty/no-spread-props
   <StyledContainer {...props}>
     <StyledTitle>{title}</StyledTitle>
diff --git a/front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx b/front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
index 1b849fdf3..4ef0119d7 100644
--- a/front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
+++ b/front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
@@ -27,7 +27,7 @@ const StyledFloatingDropdown = styled.div`
   z-index: ${({ theme }) => theme.lastLayerZIndex};
 `;
 
-interface Props {
+interface MatchColumnSelectProps {
   onChange: (value: ReadonlyDeep<SelectOption> | null) => void;
   value?: ReadonlyDeep<SelectOption>;
   options: readonly ReadonlyDeep<SelectOption>[];
@@ -40,7 +40,7 @@ export const MatchColumnSelect = ({
   value,
   options: initialOptions,
   placeholder,
-}: Props) => {
+}: MatchColumnSelectProps) => {
   const theme = useTheme();
 
   const dropdownContainerRef = useRef<HTMLDivElement>(null);
diff --git a/front/src/modules/spreadsheet-import/components/ModalWrapper.tsx b/front/src/modules/spreadsheet-import/components/ModalWrapper.tsx
index 5bae1d603..fb7a1ad1b 100644
--- a/front/src/modules/spreadsheet-import/components/ModalWrapper.tsx
+++ b/front/src/modules/spreadsheet-import/components/ModalWrapper.tsx
@@ -26,13 +26,17 @@ const StyledRtlLtr = styled.div`
   flex-direction: column;
 `;
 
-type Props = {
+type ModalWrapperProps = {
   children: React.ReactNode;
   isOpen: boolean;
   onClose: () => void;
 };
 
-export const ModalWrapper = ({ children, isOpen, onClose }: Props) => {
+export const ModalWrapper = ({
+  children,
+  isOpen,
+  onClose,
+}: ModalWrapperProps) => {
   const { rtl } = useSpreadsheetImportInternal();
 
   return (
diff --git a/front/src/modules/spreadsheet-import/components/Table.tsx b/front/src/modules/spreadsheet-import/components/Table.tsx
index 8971191df..743044b2d 100644
--- a/front/src/modules/spreadsheet-import/components/Table.tsx
+++ b/front/src/modules/spreadsheet-import/components/Table.tsx
@@ -106,12 +106,12 @@ const StyledDataGrid = styled(DataGrid)`
   }
 ` as typeof DataGrid;
 
-type Props<Data> = DataGridProps<Data> & {
+type TableProps<Data> = DataGridProps<Data> & {
   rowHeight?: number;
   hiddenHeader?: boolean;
 };
 
-export const Table = <Data,>(props: Props<Data>) => {
+export const Table = <Data,>(props: TableProps<Data>) => {
   const { rtl } = useSpreadsheetImportInternal();
 
   return (
diff --git a/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx b/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx
index beeaa2c72..71f0bc5f6 100644
--- a/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx
+++ b/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx
@@ -17,6 +17,7 @@ export const defaultSpreadsheetImportProps: Partial<SpreadsheetOptions<any>> = {
 } as const;
 
 export const SpreadsheetImport = <T extends string>(
+  // eslint-disable-next-line twenty/component-props-naming
   props: SpreadsheetOptions<T>,
 ) => {
   return (
diff --git a/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx b/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
index d99e4487e..63136e603 100644
--- a/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
@@ -44,7 +44,7 @@ const StyledColumn = styled.span`
   font-weight: ${({ theme }) => theme.font.weight.regular};
 `;
 
-export type MatchColumnsProps<T extends string> = {
+export type MatchColumnsStepProps<T extends string> = {
   data: RawData[];
   headerValues: RawData;
   onContinue: (data: any[], rawData: RawData[], columns: Columns<T>) => void;
@@ -111,7 +111,7 @@ export const MatchColumnsStep = <T extends string>({
   data,
   headerValues,
   onContinue,
-}: MatchColumnsProps<T>) => {
+}: MatchColumnsStepProps<T>) => {
   const { enqueueDialog } = useDialog();
   const { enqueueSnackBar } = useSnackBar();
   const dataExample = data.slice(0, 2);
diff --git a/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx b/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx
index b3c6febec..7a4abd135 100644
--- a/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx
@@ -24,7 +24,7 @@ const StyledSelectLabel = styled.span`
   padding-top: ${({ theme }) => theme.spacing(1)};
 `;
 
-interface Props<T> {
+interface SubMatchingSelectProps<T> {
   option: MatchedOptions<T> | Partial<MatchedOptions<T>>;
   column: MatchedSelectColumn<T> | MatchedSelectOptionsColumn<T>;
   onSubChange: (val: T, index: number, option: string) => void;
@@ -34,7 +34,7 @@ export const SubMatchingSelect = <T extends string>({
   option,
   column,
   onSubChange,
-}: Props<T>) => {
+}: SubMatchingSelectProps<T>) => {
   const { fields } = useSpreadsheetImportInternal<T>();
   const options = getFieldOptions(fields, column.value) as SelectOption[];
   const value = options.find((opt) => opt.value === option.value);
diff --git a/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx b/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
index 92581fa9f..126cfb30b 100644
--- a/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
@@ -18,12 +18,15 @@ const StyledTableContainer = styled.div`
   height: 0px;
 `;
 
-type SelectHeaderProps = {
+type SelectHeaderStepProps = {
   data: RawData[];
   onContinue: (headerValues: RawData, data: RawData[]) => Promise<void>;
 };
 
-export const SelectHeaderStep = ({ data, onContinue }: SelectHeaderProps) => {
+export const SelectHeaderStep = ({
+  data,
+  onContinue,
+}: SelectHeaderStepProps) => {
   const [selectedRows, setSelectedRows] = useState<ReadonlySet<number>>(
     new Set([0]),
   );
diff --git a/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx b/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx
index f792353a6..ea16b5155 100644
--- a/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx
@@ -5,7 +5,9 @@ import { Radio } from '@/ui/input/components/Radio';
 
 const SELECT_COLUMN_KEY = 'select-row';
 
-const SelectFormatter = (props: FormatterProps<unknown>) => {
+type SelectFormatterProps = FormatterProps<unknown>;
+
+const SelectFormatter = (props: SelectFormatterProps) => {
   const [isRowSelected, onRowSelectionChange] = useRowSelection();
 
   return (
diff --git a/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx b/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx
index 82f8713c2..8f2e06d47 100644
--- a/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx
@@ -5,7 +5,7 @@ import { RawData } from '@/spreadsheet-import/types';
 
 import { generateSelectionColumns } from './SelectColumn';
 
-interface Props {
+interface SelectHeaderTableProps {
   data: RawData[];
   selectedRows: ReadonlySet<number>;
   setSelectedRows: (rows: ReadonlySet<number>) => void;
@@ -15,7 +15,7 @@ export const SelectHeaderTable = ({
   data,
   selectedRows,
   setSelectedRows,
-}: Props) => {
+}: SelectHeaderTableProps) => {
   const columns = useMemo(() => generateSelectionColumns(data), [data]);
 
   return (
diff --git a/front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx b/front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
index 644efbcd0..b07a40ca2 100644
--- a/front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
@@ -24,7 +24,7 @@ const StyledRadioContainer = styled.div`
   height: 0px;
 `;
 
-type SelectSheetProps = {
+type SelectSheetStepProps = {
   sheetNames: string[];
   onContinue: (sheetName: string) => Promise<void>;
 };
@@ -32,7 +32,7 @@ type SelectSheetProps = {
 export const SelectSheetStep = ({
   sheetNames,
   onContinue,
-}: SelectSheetProps) => {
+}: SelectSheetStepProps) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const [value, setValue] = useState(sheetNames[0]);
diff --git a/front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx b/front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx
index 6314d5a87..ca75a08df 100644
--- a/front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx
@@ -56,11 +56,11 @@ export type StepState =
       type: StepType.loading;
     };
 
-interface Props {
+interface UploadFlowProps {
   nextStep: () => void;
 }
 
-export const UploadFlow = ({ nextStep }: Props) => {
+export const UploadFlow = ({ nextStep }: UploadFlowProps) => {
   const theme = useTheme();
   const { initialStepState } = useSpreadsheetImportInternal();
   const [state, setState] = useState<StepState>(
diff --git a/front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx b/front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx
index f9a5caf37..619bde635 100644
--- a/front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx
@@ -10,11 +10,11 @@ const StyledContent = styled(Modal.Content)`
   padding: ${({ theme }) => theme.spacing(6)};
 `;
 
-type UploadProps = {
+type UploadStepProps = {
   onContinue: (data: WorkBook, file: File) => Promise<void>;
 };
 
-export const UploadStep = ({ onContinue }: UploadProps) => {
+export const UploadStep = ({ onContinue }: UploadStepProps) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const handleOnContinue = useCallback(
diff --git a/front/src/modules/spreadsheet-import/steps/components/UploadStep/components/ExampleTable.tsx b/front/src/modules/spreadsheet-import/steps/components/UploadStep/components/ExampleTable.tsx
index bc41de146..bbbaab975 100644
--- a/front/src/modules/spreadsheet-import/steps/components/UploadStep/components/ExampleTable.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/UploadStep/components/ExampleTable.tsx
@@ -6,11 +6,13 @@ import { generateExampleRow } from '@/spreadsheet-import/utils/generateExampleRo
 
 import { generateColumns } from './columns';
 
-interface Props<T extends string> {
+interface ExampleTableProps<T extends string> {
   fields: Fields<T>;
 }
 
-export const ExampleTable = <T extends string>({ fields }: Props<T>) => {
+export const ExampleTable = <T extends string>({
+  fields,
+}: ExampleTableProps<T>) => {
   const data = useMemo(() => generateExampleRow(fields), [fields]);
   const columns = useMemo(() => generateColumns(fields), [fields]);
 
diff --git a/front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx b/front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
index 1057c7503..6758f1199 100644
--- a/front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
@@ -58,7 +58,7 @@ const StyledNoRowsContainer = styled.div`
   margin-top: ${({ theme }) => theme.spacing(8)};
 `;
 
-type Props<T extends string> = {
+type ValidationStepProps<T extends string> = {
   initialData: Data<T>[];
   file: File;
   onSubmitStart?: () => void;
@@ -68,7 +68,7 @@ export const ValidationStep = <T extends string>({
   initialData,
   file,
   onSubmitStart,
-}: Props<T>) => {
+}: ValidationStepProps<T>) => {
   const { enqueueDialog } = useDialog();
   const { fields, onClose, onSubmit, rowHook, tableHook } =
     useSpreadsheetImportInternal<T>();
diff --git a/front/src/modules/spreadsheet-import/utils/getMatchedColumns.ts b/front/src/modules/spreadsheet-import/utils/getMatchedColumns.ts
index 67ae8c024..4f95e2d5e 100644
--- a/front/src/modules/spreadsheet-import/utils/getMatchedColumns.ts
+++ b/front/src/modules/spreadsheet-import/utils/getMatchedColumns.ts
@@ -3,7 +3,7 @@ import lavenstein from 'js-levenshtein';
 import {
   Column,
   Columns,
-  MatchColumnsProps,
+  MatchColumnsStepProps,
 } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import { Field, Fields } from '@/spreadsheet-import/types';
 
@@ -13,7 +13,7 @@ import { setColumn } from './setColumn';
 export const getMatchedColumns = <T extends string>(
   columns: Columns<T>,
   fields: Fields<T>,
-  data: MatchColumnsProps<T>['data'],
+  data: MatchColumnsStepProps<T>['data'],
   autoMapDistance: number,
 ) =>
   columns.reduce<Column<T>[]>((arr, column) => {
diff --git a/front/src/modules/spreadsheet-import/utils/setColumn.ts b/front/src/modules/spreadsheet-import/utils/setColumn.ts
index 23596cc9b..0b4283218 100644
--- a/front/src/modules/spreadsheet-import/utils/setColumn.ts
+++ b/front/src/modules/spreadsheet-import/utils/setColumn.ts
@@ -1,7 +1,7 @@
 import {
   Column,
   ColumnType,
-  MatchColumnsProps,
+  MatchColumnsStepProps,
 } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import { Field } from '@/spreadsheet-import/types';
 
@@ -10,7 +10,7 @@ import { uniqueEntries } from './uniqueEntries';
 export const setColumn = <T extends string>(
   oldColumn: Column<T>,
   field?: Field<T>,
-  data?: MatchColumnsProps<T>['data'],
+  data?: MatchColumnsStepProps<T>['data'],
 ): Column<T> => {
   switch (field?.fieldType.type) {
     case 'select':
diff --git a/front/src/modules/spreadsheet-import/utils/uniqueEntries.ts b/front/src/modules/spreadsheet-import/utils/uniqueEntries.ts
index 1ac5ff32e..276921af9 100644
--- a/front/src/modules/spreadsheet-import/utils/uniqueEntries.ts
+++ b/front/src/modules/spreadsheet-import/utils/uniqueEntries.ts
@@ -1,12 +1,12 @@
 import uniqBy from 'lodash/uniqBy';
 
 import {
-  MatchColumnsProps,
+  MatchColumnsStepProps,
   MatchedOptions,
 } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 
 export const uniqueEntries = <T extends string>(
-  data: MatchColumnsProps<T>['data'],
+  data: MatchColumnsStepProps<T>['data'],
   index: number,
 ): Partial<MatchedOptions<T>>[] =>
   uniqBy(
diff --git a/front/src/modules/ui/action-bar/components/ActionBar.tsx b/front/src/modules/ui/action-bar/components/ActionBar.tsx
index 3ab70228f..080003d64 100644
--- a/front/src/modules/ui/action-bar/components/ActionBar.tsx
+++ b/front/src/modules/ui/action-bar/components/ActionBar.tsx
@@ -9,7 +9,7 @@ import { actionBarOpenState } from '../states/actionBarIsOpenState';
 
 import { ActionBarItem } from './ActionBarItem';
 
-type OwnProps = {
+type ActionBarProps = {
   selectedIds: string[];
 };
 
@@ -33,7 +33,7 @@ const StyledContainerActionBar = styled.div`
   z-index: 1;
 `;
 
-export const ActionBar = ({ selectedIds }: OwnProps) => {
+export const ActionBar = ({ selectedIds }: ActionBarProps) => {
   const actionBarOpen = useRecoilValue(actionBarOpenState);
   const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
   const actionBarEntries = useRecoilValue(actionBarEntriesState);
diff --git a/front/src/modules/ui/action-bar/components/ActionBarItem.tsx b/front/src/modules/ui/action-bar/components/ActionBarItem.tsx
index bf012bdcd..311cfdff4 100644
--- a/front/src/modules/ui/action-bar/components/ActionBarItem.tsx
+++ b/front/src/modules/ui/action-bar/components/ActionBarItem.tsx
@@ -5,7 +5,7 @@ import { IconComponent } from '@/ui/icon/types/IconComponent';
 
 import { ActionBarItemAccent } from '../types/ActionBarItemAccent';
 
-type OwnProps = {
+type ActionBarItemProps = {
   Icon: IconComponent;
   label: string;
   accent?: ActionBarItemAccent;
@@ -44,7 +44,7 @@ export const ActionBarItem = ({
   Icon,
   accent = 'standard',
   onClick,
-}: OwnProps) => {
+}: ActionBarItemProps) => {
   const theme = useTheme();
   return (
     <StyledButton accent={accent} onClick={onClick}>
diff --git a/front/src/modules/ui/board/components/NewButton.tsx b/front/src/modules/ui/board/components/NewButton.tsx
index dcb588806..e1d380126 100644
--- a/front/src/modules/ui/board/components/NewButton.tsx
+++ b/front/src/modules/ui/board/components/NewButton.tsx
@@ -20,11 +20,11 @@ const StyledButton = styled.button`
   }
 `;
 
-type OwnProps = {
+type NewButtonProps = {
   onClick: () => void;
 };
 
-export const NewButton = ({ onClick }: OwnProps) => {
+export const NewButton = ({ onClick }: NewButtonProps) => {
   const theme = useTheme();
 
   return (
diff --git a/front/src/modules/ui/checkmark/components/AnimatedCheckmark.tsx b/front/src/modules/ui/checkmark/components/AnimatedCheckmark.tsx
index 8261c9e10..a36c52317 100644
--- a/front/src/modules/ui/checkmark/components/AnimatedCheckmark.tsx
+++ b/front/src/modules/ui/checkmark/components/AnimatedCheckmark.tsx
@@ -1,7 +1,9 @@
 import { useTheme } from '@emotion/react';
 import { motion } from 'framer-motion';
 
-export type CheckmarkProps = React.ComponentProps<typeof motion.path> & {
+export type AnimatedCheckmarkProps = React.ComponentProps<
+  typeof motion.path
+> & {
   isAnimating?: boolean;
   color?: string;
   duration?: number;
@@ -14,7 +16,7 @@ export const AnimatedCheckmark = ({
   duration = 0.5,
   size = 28,
   ...restProps
-}: CheckmarkProps) => {
+}: AnimatedCheckmarkProps) => {
   const theme = useTheme();
   return (
     <svg
diff --git a/front/src/modules/ui/chip/components/Chip.tsx b/front/src/modules/ui/chip/components/Chip.tsx
index c152c9918..92fb211f7 100644
--- a/front/src/modules/ui/chip/components/Chip.tsx
+++ b/front/src/modules/ui/chip/components/Chip.tsx
@@ -20,7 +20,7 @@ export enum ChipVariant {
   Rounded = 'rounded',
 }
 
-type OwnProps = {
+type ChipProps = {
   size?: ChipSize;
   disabled?: boolean;
   clickable?: boolean;
@@ -33,7 +33,7 @@ type OwnProps = {
   className?: string;
 };
 
-const StyledContainer = styled.div<Partial<OwnProps>>`
+const StyledContainer = styled.div<Partial<ChipProps>>`
   align-items: center;
 
   background-color: ${({ theme, variant }) =>
@@ -125,7 +125,7 @@ export const Chip = ({
   accent = ChipAccent.TextPrimary,
   maxWidth,
   className,
-}: OwnProps) => (
+}: ChipProps) => (
   <StyledContainer
     data-testid="chip"
     clickable={clickable}
diff --git a/front/src/modules/ui/chip/components/EntityChip.tsx b/front/src/modules/ui/chip/components/EntityChip.tsx
index 44228df4a..0b4897aa8 100644
--- a/front/src/modules/ui/chip/components/EntityChip.tsx
+++ b/front/src/modules/ui/chip/components/EntityChip.tsx
@@ -8,7 +8,7 @@ import { isNonEmptyString } from '~/utils/isNonEmptyString';
 
 import { Chip, ChipVariant } from './Chip';
 
-type OwnProps = {
+type EntityChipProps = {
   linkToEntity?: string;
   entityId: string;
   name: string;
@@ -31,7 +31,7 @@ export const EntityChip = ({
   avatarType = 'rounded',
   variant = EntityChipVariant.Regular,
   LeftIcon,
-}: OwnProps) => {
+}: EntityChipProps) => {
   const navigate = useNavigate();
 
   const theme = useTheme();
diff --git a/front/src/modules/ui/context-menu/components/ContextMenu.tsx b/front/src/modules/ui/context-menu/components/ContextMenu.tsx
index 2f1ac07bf..e96958a3c 100644
--- a/front/src/modules/ui/context-menu/components/ContextMenu.tsx
+++ b/front/src/modules/ui/context-menu/components/ContextMenu.tsx
@@ -14,7 +14,7 @@ import { PositionType } from '../types/PositionType';
 
 import { ContextMenuItem } from './ContextMenuItem';
 
-type OwnProps = {
+type ContextMenuProps = {
   selectedIds: string[];
 };
 
@@ -41,7 +41,7 @@ const StyledContainerContextMenu = styled.div<StyledContainerProps>`
   z-index: 1;
 `;
 
-export const ContextMenu = ({ selectedIds }: OwnProps) => {
+export const ContextMenu = ({ selectedIds }: ContextMenuProps) => {
   const contextMenuPosition = useRecoilValue(contextMenuPositionState);
   const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
   const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
diff --git a/front/src/modules/ui/context-menu/components/ContextMenuItem.tsx b/front/src/modules/ui/context-menu/components/ContextMenuItem.tsx
index cff5c7d37..159edf8e6 100644
--- a/front/src/modules/ui/context-menu/components/ContextMenuItem.tsx
+++ b/front/src/modules/ui/context-menu/components/ContextMenuItem.tsx
@@ -3,7 +3,7 @@ import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 
 import { ContextMenuItemAccent } from '../types/ContextMenuItemAccent';
 
-type OwnProps = {
+type ContextMenuItemProps = {
   Icon: IconComponent;
   label: string;
   accent?: ContextMenuItemAccent;
@@ -15,6 +15,6 @@ export const ContextMenuItem = ({
   Icon,
   accent = 'default',
   onClick,
-}: OwnProps) => (
+}: ContextMenuItemProps) => (
   <MenuItem LeftIcon={Icon} onClick={onClick} accent={accent} text={label} />
 );
diff --git a/front/src/modules/ui/data-table/components/ColumnHeadWithDropdown.tsx b/front/src/modules/ui/data-table/components/ColumnHeadWithDropdown.tsx
index 7464025ef..e76548e5f 100644
--- a/front/src/modules/ui/data-table/components/ColumnHeadWithDropdown.tsx
+++ b/front/src/modules/ui/data-table/components/ColumnHeadWithDropdown.tsx
@@ -6,7 +6,7 @@ import { ColumnDefinition } from '../types/ColumnDefinition';
 import { ColumnHead } from './ColumnHead';
 import { TableColumnDropdownMenu } from './TableColumnDropdownMenu';
 
-type ColumnHeadProps = {
+type ColumnHeadWithDropdownProps = {
   column: ColumnDefinition<FieldMetadata>;
   isFirstColumn: boolean;
   isLastColumn: boolean;
@@ -18,7 +18,7 @@ export const ColumnHeadWithDropdown = ({
   isFirstColumn,
   isLastColumn,
   primaryColumnKey,
-}: ColumnHeadProps) => {
+}: ColumnHeadWithDropdownProps) => {
   return (
     <DropdownMenu
       clickableComponent={<ColumnHead column={column} />}
diff --git a/front/src/modules/ui/data-table/components/DataTable.tsx b/front/src/modules/ui/data-table/components/DataTable.tsx
index 2ae7ffff5..fc8361a35 100644
--- a/front/src/modules/ui/data-table/components/DataTable.tsx
+++ b/front/src/modules/ui/data-table/components/DataTable.tsx
@@ -82,11 +82,11 @@ const StyledTableContainer = styled.div`
   overflow: auto;
 `;
 
-type OwnProps = {
+type DataTableProps = {
   updateEntityMutation: (params: any) => void;
 };
 
-export const DataTable = ({ updateEntityMutation }: OwnProps) => {
+export const DataTable = ({ updateEntityMutation }: DataTableProps) => {
   const tableBodyRef = useRef<HTMLDivElement>(null);
 
   const setRowSelectedState = useSetRowSelectedState();
diff --git a/front/src/modules/ui/data-table/components/TableColumnDropdownMenu.tsx b/front/src/modules/ui/data-table/components/TableColumnDropdownMenu.tsx
index 8d7f0a5c7..812730dcb 100644
--- a/front/src/modules/ui/data-table/components/TableColumnDropdownMenu.tsx
+++ b/front/src/modules/ui/data-table/components/TableColumnDropdownMenu.tsx
@@ -9,19 +9,19 @@ import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
 import { useTableColumns } from '../hooks/useTableColumns';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-export type DataTableHeaderOptionsProps = {
+export type DataTableColumnDropdownMenuProps = {
   column: ColumnDefinition<FieldMetadata>;
   isFirstColumn: boolean;
   isLastColumn: boolean;
   primaryColumnKey: string;
 };
 
-export const TableColumnDropdownMenu = ({
+export const DataTableColumnDropdownMenu = ({
   column,
   isFirstColumn,
   isLastColumn,
   primaryColumnKey,
-}: DataTableHeaderOptionsProps) => {
+}: DataTableColumnDropdownMenuProps) => {
   const { handleColumnVisibilityChange, handleMoveTableColumn } =
     useTableColumns();
 
diff --git a/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx b/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx
index fa7fb1bf7..b3910b44b 100644
--- a/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx
+++ b/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx
@@ -29,7 +29,7 @@ const StyledCellBaseContainer = styled.div`
   user-select: none;
 `;
 
-export type EditableCellProps = {
+export type TableCellContainerProps = {
   editModeContent: ReactElement;
   nonEditModeContent: ReactElement;
   editModeHorizontalAlign?: 'left' | 'right';
@@ -55,7 +55,7 @@ export const TableCellContainer = ({
   transparent = false,
   maxContentWidth,
   buttonIcon,
-}: EditableCellProps) => {
+}: TableCellContainerProps) => {
   const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
 
   const [isHovered, setIsHovered] = useState(false);
diff --git a/front/src/modules/ui/data-table/table-cell/components/TableCellEditMode.tsx b/front/src/modules/ui/data-table/table-cell/components/TableCellEditMode.tsx
index 4fae82c89..5abaae3cd 100644
--- a/front/src/modules/ui/data-table/table-cell/components/TableCellEditMode.tsx
+++ b/front/src/modules/ui/data-table/table-cell/components/TableCellEditMode.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { overlayBackground } from '@/ui/theme/constants/effects';
 
-const StyledEditableCellEditModeContainer = styled.div<EditableCellEditModeProps>`
+const StyledEditableCellEditModeContainer = styled.div<TableCellEditModeProps>`
   align-items: center;
   border: ${({ transparent, theme }) =>
     transparent ? 'none' : `1px solid ${theme.border.color.light}`};
@@ -25,7 +25,7 @@ const StyledEditableCellEditModeContainer = styled.div<EditableCellEditModeProps
   z-index: 1;
 `;
 
-export type EditableCellEditModeProps = {
+export type TableCellEditModeProps = {
   children: ReactElement;
   transparent?: boolean;
   maxContentWidth?: number;
@@ -40,7 +40,7 @@ export const TableCellEditMode = ({
   children,
   transparent = false,
   maxContentWidth,
-}: EditableCellEditModeProps) => (
+}: TableCellEditModeProps) => (
   <StyledEditableCellEditModeContainer
     maxContentWidth={maxContentWidth}
     transparent={transparent}
diff --git a/front/src/modules/ui/data-table/table-cell/components/TableCellSoftFocusMode.tsx b/front/src/modules/ui/data-table/table-cell/components/TableCellSoftFocusMode.tsx
index 883d9bfa5..af93ab85a 100644
--- a/front/src/modules/ui/data-table/table-cell/components/TableCellSoftFocusMode.tsx
+++ b/front/src/modules/ui/data-table/table-cell/components/TableCellSoftFocusMode.tsx
@@ -9,9 +9,11 @@ import { useTableCell } from '../hooks/useTableCell';
 
 import { TableCellDisplayContainer } from './TableCellDisplayContainer';
 
-type OwnProps = PropsWithChildren<unknown>;
+type TableCellSoftFocusModeProps = PropsWithChildren<unknown>;
 
-export const TableCellSoftFocusMode = ({ children }: OwnProps) => {
+export const TableCellSoftFocusMode = ({
+  children,
+}: TableCellSoftFocusModeProps) => {
   const { openTableCell } = useTableCell();
 
   const isFieldInputOnly = useIsFieldInputOnly();
diff --git a/front/src/modules/ui/field/components/FieldInput.tsx b/front/src/modules/ui/field/components/FieldInput.tsx
index b7f9c5956..c1ce74807 100644
--- a/front/src/modules/ui/field/components/FieldInput.tsx
+++ b/front/src/modules/ui/field/components/FieldInput.tsx
@@ -31,7 +31,7 @@ import { isFieldRelation } from '../types/guards/isFieldRelation';
 import { isFieldText } from '../types/guards/isFieldText';
 import { isFieldURL } from '../types/guards/isFieldURL';
 
-type OwnProps = {
+type FieldInputProps = {
   onSubmit?: FieldInputEvent;
   onCancel?: () => void;
   onClickOutside?: FieldInputEvent;
@@ -49,7 +49,7 @@ export const FieldInput = ({
   onShiftTab,
   onTab,
   onClickOutside,
-}: OwnProps) => {
+}: FieldInputProps) => {
   const { fieldDefinition } = useContext(FieldContext);
 
   return (
diff --git a/front/src/modules/ui/field/meta-types/display/content-display/components/ChipDisplay.tsx b/front/src/modules/ui/field/meta-types/display/content-display/components/ChipDisplay.tsx
index edde4e470..a1b8eb678 100644
--- a/front/src/modules/ui/field/meta-types/display/content-display/components/ChipDisplay.tsx
+++ b/front/src/modules/ui/field/meta-types/display/content-display/components/ChipDisplay.tsx
@@ -4,7 +4,7 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { getLogoUrlFromDomainName } from '~/utils';
 import { logError } from '~/utils/logError';
 
-type OwnProps = {
+type ChipDisplayProps = {
   entityType: Entity;
   displayName: string;
   entityId: string | null;
@@ -16,7 +16,7 @@ export const ChipDisplay = ({
   displayName,
   entityId,
   avatarUrlValue,
-}: OwnProps) => {
+}: ChipDisplayProps) => {
   switch (entityType) {
     case Entity.Company: {
       return (
diff --git a/front/src/modules/ui/field/meta-types/display/content-display/components/DateDisplay.tsx b/front/src/modules/ui/field/meta-types/display/content-display/components/DateDisplay.tsx
index d6aab3c06..054c0213b 100644
--- a/front/src/modules/ui/field/meta-types/display/content-display/components/DateDisplay.tsx
+++ b/front/src/modules/ui/field/meta-types/display/content-display/components/DateDisplay.tsx
@@ -1,9 +1,9 @@
 import { formatToHumanReadableDate } from '~/utils';
 
-type OwnProps = {
+type DateDisplayProps = {
   value: Date | string | null | undefined;
 };
 
-export const DateDisplay = ({ value }: OwnProps) => (
+export const DateDisplay = ({ value }: DateDisplayProps) => (
   <div>{value && formatToHumanReadableDate(value)}</div>
 );
diff --git a/front/src/modules/ui/field/meta-types/display/content-display/components/EmailDisplay.tsx b/front/src/modules/ui/field/meta-types/display/content-display/components/EmailDisplay.tsx
index 9582c3330..34f8a30e7 100644
--- a/front/src/modules/ui/field/meta-types/display/content-display/components/EmailDisplay.tsx
+++ b/front/src/modules/ui/field/meta-types/display/content-display/components/EmailDisplay.tsx
@@ -7,11 +7,11 @@ const validateEmail = (email: string) => {
   return emailPattern.test(email.trim());
 };
 
-type OwnProps = {
+type EmailDisplayProps = {
   value: string | null;
 };
 
-export const EmailDisplay = ({ value }: OwnProps) =>
+export const EmailDisplay = ({ value }: EmailDisplayProps) =>
   value && validateEmail(value) ? (
     <ContactLink
       href={`mailto:${value}`}
diff --git a/front/src/modules/ui/field/meta-types/display/content-display/components/MoneyDisplay.tsx b/front/src/modules/ui/field/meta-types/display/content-display/components/MoneyDisplay.tsx
index c6b051154..d39e10092 100644
--- a/front/src/modules/ui/field/meta-types/display/content-display/components/MoneyDisplay.tsx
+++ b/front/src/modules/ui/field/meta-types/display/content-display/components/MoneyDisplay.tsx
@@ -9,11 +9,11 @@ const StyledTextInputDisplay = styled.div`
   width: 100%;
 `;
 
-type OwnProps = {
+type MoneyDisplayProps = {
   value: number | null;
 };
 
-export const MoneyDisplay = ({ value }: OwnProps) => (
+export const MoneyDisplay = ({ value }: MoneyDisplayProps) => (
   <StyledTextInputDisplay>
     {value ? `$${formatNumber(value)}` : ''}
   </StyledTextInputDisplay>
diff --git a/front/src/modules/ui/field/meta-types/display/content-display/components/NumberDisplay.tsx b/front/src/modules/ui/field/meta-types/display/content-display/components/NumberDisplay.tsx
index 6190f25bd..bca6d61b7 100644
--- a/front/src/modules/ui/field/meta-types/display/content-display/components/NumberDisplay.tsx
+++ b/front/src/modules/ui/field/meta-types/display/content-display/components/NumberDisplay.tsx
@@ -9,11 +9,11 @@ const StyledNumberDisplay = styled.div`
   width: 100%;
 `;
 
-type OwnProps = {
+type NumberDisplayProps = {
   value: string | number | null;
 };
 
-export const NumberDisplay = ({ value }: OwnProps) => (
+export const NumberDisplay = ({ value }: NumberDisplayProps) => (
   <StyledNumberDisplay>
     {value && formatNumber(Number(value))}
   </StyledNumberDisplay>
diff --git a/front/src/modules/ui/field/meta-types/display/content-display/components/PhoneDisplay.tsx b/front/src/modules/ui/field/meta-types/display/content-display/components/PhoneDisplay.tsx
index d7bc966c6..f593ff2c2 100644
--- a/front/src/modules/ui/field/meta-types/display/content-display/components/PhoneDisplay.tsx
+++ b/front/src/modules/ui/field/meta-types/display/content-display/components/PhoneDisplay.tsx
@@ -3,11 +3,11 @@ import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
 
 import { ContactLink } from '@/ui/link/components/ContactLink';
 
-type OwnProps = {
+type PhoneDisplayProps = {
   value: string | null;
 };
 
-export const PhoneDisplay = ({ value }: OwnProps) =>
+export const PhoneDisplay = ({ value }: PhoneDisplayProps) =>
   value && isValidPhoneNumber(value) ? (
     <ContactLink
       href={parsePhoneNumber(value, 'FR')?.getURI()}
diff --git a/front/src/modules/ui/field/meta-types/display/content-display/components/TextDisplay.tsx b/front/src/modules/ui/field/meta-types/display/content-display/components/TextDisplay.tsx
index cccceff95..9229b84aa 100644
--- a/front/src/modules/ui/field/meta-types/display/content-display/components/TextDisplay.tsx
+++ b/front/src/modules/ui/field/meta-types/display/content-display/components/TextDisplay.tsx
@@ -7,10 +7,10 @@ const StyledTextInputDisplay = styled.div`
   width: 100%;
 `;
 
-type OwnProps = {
+type TextDisplayProps = {
   text: string;
 };
 
-export const TextDisplay = ({ text }: OwnProps) => (
+export const TextDisplay = ({ text }: TextDisplayProps) => (
   <StyledTextInputDisplay>{text}</StyledTextInputDisplay>
 );
diff --git a/front/src/modules/ui/field/meta-types/display/content-display/components/URLDisplay.tsx b/front/src/modules/ui/field/meta-types/display/content-display/components/URLDisplay.tsx
index 31b55d5f6..cf9937882 100644
--- a/front/src/modules/ui/field/meta-types/display/content-display/components/URLDisplay.tsx
+++ b/front/src/modules/ui/field/meta-types/display/content-display/components/URLDisplay.tsx
@@ -14,7 +14,7 @@ const StyledRawLink = styled(RoundedLink)`
   }
 `;
 
-type OwnProps = {
+type URLDisplayProps = {
   value: string | null;
 };
 
@@ -33,7 +33,7 @@ const checkUrlType = (url: string) => {
   return LinkType.Url;
 };
 
-export const URLDisplay = ({ value }: OwnProps) => {
+export const URLDisplay = ({ value }: URLDisplayProps) => {
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     event.stopPropagation();
   };
diff --git a/front/src/modules/ui/field/meta-types/input/components/BooleanFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/BooleanFieldInput.tsx
index e9810dd20..9b6a48e51 100644
--- a/front/src/modules/ui/field/meta-types/input/components/BooleanFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/BooleanFieldInput.tsx
@@ -5,11 +5,11 @@ import { useBooleanField } from '../../hooks/useBooleanField';
 
 import { FieldInputEvent } from './DateFieldInput';
 
-type OwnProps = {
+type BooleanFieldInputProps = {
   onSubmit?: FieldInputEvent;
 };
 
-export const BooleanFieldInput = ({ onSubmit }: OwnProps) => {
+export const BooleanFieldInput = ({ onSubmit }: BooleanFieldInputProps) => {
   const { fieldValue } = useBooleanField();
 
   const persistField = usePersistField();
diff --git a/front/src/modules/ui/field/meta-types/input/components/ChipFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/ChipFieldInput.tsx
index 38b633511..d0960f6ad 100644
--- a/front/src/modules/ui/field/meta-types/input/components/ChipFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/ChipFieldInput.tsx
@@ -5,7 +5,7 @@ import { useChipField } from '../../hooks/useChipField';
 
 import { FieldInputEvent } from './DateFieldInput';
 
-type OwnProps = {
+type ChipFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
@@ -19,7 +19,7 @@ export const ChipFieldInput = ({
   onClickOutside,
   onTab,
   onShiftTab,
-}: OwnProps) => {
+}: ChipFieldInputProps) => {
   const { fieldDefinition, contentFieldValue, hotkeyScope } = useChipField();
 
   const persistField = usePersistField();
diff --git a/front/src/modules/ui/field/meta-types/input/components/DateFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/DateFieldInput.tsx
index 10f47f9b1..0a96f2fdf 100644
--- a/front/src/modules/ui/field/meta-types/input/components/DateFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/DateFieldInput.tsx
@@ -6,7 +6,7 @@ import { useDateField } from '../../hooks/useDateField';
 
 export type FieldInputEvent = (persist: () => void) => void;
 
-type OwnProps = {
+type DateFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
@@ -18,7 +18,7 @@ export const DateFieldInput = ({
   onEnter,
   onEscape,
   onClickOutside,
-}: OwnProps) => {
+}: DateFieldInputProps) => {
   const { fieldValue, hotkeyScope } = useDateField();
 
   const persistField = usePersistField();
diff --git a/front/src/modules/ui/field/meta-types/input/components/DoubleTextChipFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/DoubleTextChipFieldInput.tsx
index fdafe6ab6..c739f0f9d 100644
--- a/front/src/modules/ui/field/meta-types/input/components/DoubleTextChipFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/DoubleTextChipFieldInput.tsx
@@ -6,7 +6,7 @@ import { useDoubleTextChipField } from '../../hooks/useDoubleTextChipField';
 
 import { FieldInputEvent } from './DateFieldInput';
 
-type OwnProps = {
+type DoubleTextChipFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
@@ -20,7 +20,7 @@ export const DoubleTextChipFieldInput = ({
   onClickOutside,
   onTab,
   onShiftTab,
-}: OwnProps) => {
+}: DoubleTextChipFieldInputProps) => {
   const { fieldDefinition, firstValue, secondValue, hotkeyScope } =
     useDoubleTextChipField();
 
diff --git a/front/src/modules/ui/field/meta-types/input/components/DoubleTextFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/DoubleTextFieldInput.tsx
index 5538255e5..a3931e32b 100644
--- a/front/src/modules/ui/field/meta-types/input/components/DoubleTextFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/DoubleTextFieldInput.tsx
@@ -6,7 +6,7 @@ import { useDoubleTextField } from '../../hooks/useDoubleTextField';
 
 import { FieldInputEvent } from './DateFieldInput';
 
-type OwnProps = {
+type DoubleTextFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
@@ -20,7 +20,7 @@ export const DoubleTextFieldInput = ({
   onClickOutside,
   onTab,
   onShiftTab,
-}: OwnProps) => {
+}: DoubleTextFieldInputProps) => {
   const { fieldDefinition, firstValue, secondValue, hotkeyScope } =
     useDoubleTextField();
 
diff --git a/front/src/modules/ui/field/meta-types/input/components/EmailFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/EmailFieldInput.tsx
index 9a90b67f0..a1bca9c16 100644
--- a/front/src/modules/ui/field/meta-types/input/components/EmailFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/EmailFieldInput.tsx
@@ -5,7 +5,7 @@ import { useEmailField } from '../../hooks/useEmailField';
 
 import { FieldInputEvent } from './DateFieldInput';
 
-type OwnProps = {
+type EmailFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
@@ -19,7 +19,7 @@ export const EmailFieldInput = ({
   onClickOutside,
   onTab,
   onShiftTab,
-}: OwnProps) => {
+}: EmailFieldInputProps) => {
   const { fieldDefinition, fieldValue, hotkeyScope } = useEmailField();
 
   const persistField = usePersistField();
diff --git a/front/src/modules/ui/field/meta-types/input/components/MoneyFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/MoneyFieldInput.tsx
index 321108d26..aa77fda91 100644
--- a/front/src/modules/ui/field/meta-types/input/components/MoneyFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/MoneyFieldInput.tsx
@@ -4,7 +4,7 @@ import { useMoneyField } from '../../hooks/useMoneyField';
 
 export type FieldInputEvent = (persist: () => void) => void;
 
-type OwnProps = {
+type MoneyFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
@@ -18,7 +18,7 @@ export const MoneyFieldInput = ({
   onClickOutside,
   onTab,
   onShiftTab,
-}: OwnProps) => {
+}: MoneyFieldInputProps) => {
   const { fieldDefinition, fieldValue, hotkeyScope, persistMoneyField } =
     useMoneyField();
 
diff --git a/front/src/modules/ui/field/meta-types/input/components/NumberFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/NumberFieldInput.tsx
index b7f6ec331..840b58c4a 100644
--- a/front/src/modules/ui/field/meta-types/input/components/NumberFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/NumberFieldInput.tsx
@@ -4,7 +4,7 @@ import { useNumberField } from '../../hooks/useNumberField';
 
 export type FieldInputEvent = (persist: () => void) => void;
 
-type OwnProps = {
+type NumberFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
@@ -18,7 +18,7 @@ export const NumberFieldInput = ({
   onClickOutside,
   onTab,
   onShiftTab,
-}: OwnProps) => {
+}: NumberFieldInputProps) => {
   const { fieldDefinition, fieldValue, hotkeyScope, persistNumberField } =
     useNumberField();
 
diff --git a/front/src/modules/ui/field/meta-types/input/components/PhoneFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/PhoneFieldInput.tsx
index 772b19617..ecc157c46 100644
--- a/front/src/modules/ui/field/meta-types/input/components/PhoneFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/PhoneFieldInput.tsx
@@ -4,7 +4,7 @@ import { usePhoneField } from '../../hooks/usePhoneField';
 
 import { FieldInputEvent } from './DateFieldInput';
 
-type OwnProps = {
+type PhoneFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
@@ -18,7 +18,7 @@ export const PhoneFieldInput = ({
   onClickOutside,
   onTab,
   onShiftTab,
-}: OwnProps) => {
+}: PhoneFieldInputProps) => {
   const { fieldDefinition, fieldValue, hotkeyScope, persistPhoneField } =
     usePhoneField();
 
diff --git a/front/src/modules/ui/field/meta-types/input/components/ProbabilityFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/ProbabilityFieldInput.tsx
index 996f87d03..b8601b276 100644
--- a/front/src/modules/ui/field/meta-types/input/components/ProbabilityFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/ProbabilityFieldInput.tsx
@@ -5,11 +5,13 @@ import { useProbabilityField } from '../../hooks/useProbabilityField';
 
 import { FieldInputEvent } from './DateFieldInput';
 
-type OwnProps = {
+type ProbabilityFieldInputProps = {
   onSubmit?: FieldInputEvent;
 };
 
-export const ProbabilityFieldInput = ({ onSubmit }: OwnProps) => {
+export const ProbabilityFieldInput = ({
+  onSubmit,
+}: ProbabilityFieldInputProps) => {
   const { probabilityIndex } = useProbabilityField();
 
   const persistField = usePersistField();
diff --git a/front/src/modules/ui/field/meta-types/input/components/RelationFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/RelationFieldInput.tsx
index 5998b7f8d..4404e1f81 100644
--- a/front/src/modules/ui/field/meta-types/input/components/RelationFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/RelationFieldInput.tsx
@@ -17,12 +17,15 @@ const StyledRelationPickerContainer = styled.div`
   top: -8px;
 `;
 
-type OwnProps = {
+type RelationFieldInputProps = {
   onSubmit?: FieldInputEvent;
   onCancel?: () => void;
 };
 
-export const RelationFieldInput = ({ onSubmit, onCancel }: OwnProps) => {
+export const RelationFieldInput = ({
+  onSubmit,
+  onCancel,
+}: RelationFieldInputProps) => {
   const { fieldDefinition, fieldValue } = useRelationField();
 
   const persistField = usePersistField();
diff --git a/front/src/modules/ui/field/meta-types/input/components/TextFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/TextFieldInput.tsx
index 737266425..3edd43660 100644
--- a/front/src/modules/ui/field/meta-types/input/components/TextFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/TextFieldInput.tsx
@@ -5,7 +5,7 @@ import { useTextField } from '../../hooks/useTextField';
 
 import { FieldInputEvent } from './DateFieldInput';
 
-type OwnProps = {
+type TextFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
@@ -19,7 +19,7 @@ export const TextFieldInput = ({
   onClickOutside,
   onTab,
   onShiftTab,
-}: OwnProps) => {
+}: TextFieldInputProps) => {
   const { fieldDefinition, fieldValue, hotkeyScope } = useTextField();
 
   const persistField = usePersistField();
diff --git a/front/src/modules/ui/field/meta-types/input/components/URLFieldInput.tsx b/front/src/modules/ui/field/meta-types/input/components/URLFieldInput.tsx
index 3ad605aba..172b1eedd 100644
--- a/front/src/modules/ui/field/meta-types/input/components/URLFieldInput.tsx
+++ b/front/src/modules/ui/field/meta-types/input/components/URLFieldInput.tsx
@@ -4,7 +4,7 @@ import { useURLField } from '../../hooks/useURLField';
 
 import { FieldInputEvent } from './DateFieldInput';
 
-type OwnProps = {
+type URLFieldInputProps = {
   onClickOutside?: FieldInputEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
@@ -18,7 +18,7 @@ export const URLFieldInput = ({
   onClickOutside,
   onTab,
   onShiftTab,
-}: OwnProps) => {
+}: URLFieldInputProps) => {
   const { fieldDefinition, fieldValue, hotkeyScope, persistURLField } =
     useURLField();
 
diff --git a/front/src/modules/ui/icon/components/IconAddressBook.tsx b/front/src/modules/ui/icon/components/IconAddressBook.tsx
index f5beb634e..03d486b2d 100644
--- a/front/src/modules/ui/icon/components/IconAddressBook.tsx
+++ b/front/src/modules/ui/icon/components/IconAddressBook.tsx
@@ -2,7 +2,9 @@ import { TablerIconsProps } from '@/ui/icon';
 
 import { ReactComponent as IconAddressBookRaw } from '../assets/address-book.svg';
 
-export const IconAddressBook = (props: TablerIconsProps): JSX.Element => {
+type IconAddressBookProps = TablerIconsProps;
+
+export const IconAddressBook = (props: IconAddressBookProps): JSX.Element => {
   const size = props.size ?? 24;
   const stroke = props.stroke ?? 2;
 
diff --git a/front/src/modules/ui/inline-cell/components/InlineCellContainer.tsx b/front/src/modules/ui/inline-cell/components/InlineCellContainer.tsx
index f579d5176..af0970dc5 100644
--- a/front/src/modules/ui/inline-cell/components/InlineCellContainer.tsx
+++ b/front/src/modules/ui/inline-cell/components/InlineCellContainer.tsx
@@ -39,7 +39,9 @@ const StyledValueContainer = styled.div`
   max-width: calc(100% - ${({ theme }) => theme.spacing(4)});
 `;
 
-const StyledLabel = styled.div<Pick<OwnProps, 'labelFixedWidth'>>`
+const StyledLabel = styled.div<
+  Pick<InlineCellContainerProps, 'labelFixedWidth'>
+>`
   align-items: center;
 
   width: ${({ labelFixedWidth }) =>
@@ -72,7 +74,7 @@ const StyledInlineCellBaseContainer = styled.div`
   width: 100%;
 `;
 
-type OwnProps = {
+type InlineCellContainerProps = {
   IconLabel?: IconComponent;
   label?: string;
   labelFixedWidth?: number;
@@ -98,7 +100,7 @@ export const InlineCellContainer = ({
   editModeContentOnly,
   isDisplayModeFixHeight,
   disableHoverEffect,
-}: OwnProps) => {
+}: InlineCellContainerProps) => {
   const [isHovered, setIsHovered] = useState(false);
 
   const handleContainerMouseEnter = () => {
diff --git a/front/src/modules/ui/inline-cell/components/InlineCellDisplayMode.tsx b/front/src/modules/ui/inline-cell/components/InlineCellDisplayMode.tsx
index c9c469922..941b2654d 100644
--- a/front/src/modules/ui/inline-cell/components/InlineCellDisplayMode.tsx
+++ b/front/src/modules/ui/inline-cell/components/InlineCellDisplayMode.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 const StyledInlineCellNormalModeOuterContainer = styled.div<
   Pick<
-    OwnProps,
+    InlineCellDisplayModeProps,
     | 'isDisplayModeContentEmpty'
     | 'disableHoverEffect'
     | 'isDisplayModeFixHeight'
@@ -50,7 +50,7 @@ const StyledEmptyField = styled.div`
   color: ${({ theme }) => theme.font.color.light};
 `;
 
-type OwnProps = {
+type InlineCellDisplayModeProps = {
   isDisplayModeContentEmpty?: boolean;
   disableHoverEffect?: boolean;
   isDisplayModeFixHeight?: boolean;
@@ -63,7 +63,7 @@ export const InlineCellDisplayMode = ({
   disableHoverEffect,
   isDisplayModeFixHeight,
   isHovered,
-}: React.PropsWithChildren<OwnProps>) => (
+}: React.PropsWithChildren<InlineCellDisplayModeProps>) => (
   <StyledInlineCellNormalModeOuterContainer
     isDisplayModeContentEmpty={isDisplayModeContentEmpty}
     disableHoverEffect={disableHoverEffect}
diff --git a/front/src/modules/ui/inline-cell/components/InlineCellEditMode.tsx b/front/src/modules/ui/inline-cell/components/InlineCellEditMode.tsx
index 4986a7c4e..909000541 100644
--- a/front/src/modules/ui/inline-cell/components/InlineCellEditMode.tsx
+++ b/front/src/modules/ui/inline-cell/components/InlineCellEditMode.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-const StyledInlineCellEditModeContainer = styled.div<OwnProps>`
+const StyledInlineCellEditModeContainer = styled.div<InlineCellEditModeProps>`
   align-items: center;
 
   display: flex;
@@ -26,11 +26,11 @@ const StyledInlineCellInput = styled.div`
   z-index: 10;
 `;
 
-type OwnProps = {
+type InlineCellEditModeProps = {
   children: React.ReactNode;
 };
 
-export const InlineCellEditMode = ({ children }: OwnProps) => (
+export const InlineCellEditMode = ({ children }: InlineCellEditModeProps) => (
   <StyledInlineCellEditModeContainer data-testid="inline-cell-edit-mode-container">
     <StyledInlineCellInput>{children}</StyledInlineCellInput>
   </StyledInlineCellEditModeContainer>
diff --git a/front/src/modules/ui/input/components/AutosizeTextInput.tsx b/front/src/modules/ui/input/components/AutosizeTextInput.tsx
index cf758591a..64638902e 100644
--- a/front/src/modules/ui/input/components/AutosizeTextInput.tsx
+++ b/front/src/modules/ui/input/components/AutosizeTextInput.tsx
@@ -17,7 +17,7 @@ export enum AutosizeTextInputVariant {
   Button = 'button',
 }
 
-type OwnProps = {
+type AutosizeTextInputProps = {
   onValidate?: (text: string) => void;
   minRows?: number;
   placeholder?: string;
@@ -114,7 +114,7 @@ export const AutosizeTextInput = ({
   onFocus,
   variant = AutosizeTextInputVariant.Icon,
   buttonTitle,
-}: OwnProps) => {
+}: AutosizeTextInputProps) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isHidden, setIsHidden] = useState(
     variant === AutosizeTextInputVariant.Button,
diff --git a/front/src/modules/ui/input/components/BooleanInput.tsx b/front/src/modules/ui/input/components/BooleanInput.tsx
index 8d12471bf..0b32b9bdd 100644
--- a/front/src/modules/ui/input/components/BooleanInput.tsx
+++ b/front/src/modules/ui/input/components/BooleanInput.tsx
@@ -17,12 +17,12 @@ const StyledEditableBooleanFieldValue = styled.div`
   margin-left: ${({ theme }) => theme.spacing(1)};
 `;
 
-type OwnProps = {
+type BooleanInputProps = {
   value: boolean;
   onToggle?: (newValue: boolean) => void;
 };
 
-export const BooleanInput = ({ value, onToggle }: OwnProps) => {
+export const BooleanInput = ({ value, onToggle }: BooleanInputProps) => {
   const [internalValue, setInternalValue] = useState(value);
 
   useEffect(() => {
diff --git a/front/src/modules/ui/input/components/Checkbox.tsx b/front/src/modules/ui/input/components/Checkbox.tsx
index 08cd7c9f1..31734bf45 100644
--- a/front/src/modules/ui/input/components/Checkbox.tsx
+++ b/front/src/modules/ui/input/components/Checkbox.tsx
@@ -19,7 +19,7 @@ export enum CheckboxSize {
   Small = 'small',
 }
 
-type OwnProps = {
+type CheckboxProps = {
   checked: boolean;
   indeterminate?: boolean;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -116,7 +116,7 @@ export const Checkbox = ({
   variant = CheckboxVariant.Primary,
   size = CheckboxSize.Small,
   shape = CheckboxShape.Squared,
-}: OwnProps) => {
+}: CheckboxProps) => {
   const [isInternalChecked, setIsInternalChecked] =
     React.useState<boolean>(false);
 
diff --git a/front/src/modules/ui/input/components/DateInput.tsx b/front/src/modules/ui/input/components/DateInput.tsx
index e8d74e9ce..4952b1010 100644
--- a/front/src/modules/ui/input/components/DateInput.tsx
+++ b/front/src/modules/ui/input/components/DateInput.tsx
@@ -29,7 +29,7 @@ const StyledInputContainer = styled.div`
   width: 100%;
 `;
 
-export type DateInputEditProps = {
+export type DateInputProps = {
   value: Nullable<Date>;
   onEnter: (newDate: Nullable<Date>) => void;
   onEscape: (newDate: Nullable<Date>) => void;
@@ -46,7 +46,7 @@ export const DateInput = ({
   onEnter,
   onEscape,
   onClickOutside,
-}: DateInputEditProps) => {
+}: DateInputProps) => {
   const theme = useTheme();
 
   const [internalValue, setInternalValue] = useState(value);
diff --git a/front/src/modules/ui/input/components/DoubleTextInput.tsx b/front/src/modules/ui/input/components/DoubleTextInput.tsx
index 97426d4d7..12f9be6aa 100644
--- a/front/src/modules/ui/input/components/DoubleTextInput.tsx
+++ b/front/src/modules/ui/input/components/DoubleTextInput.tsx
@@ -24,7 +24,7 @@ const StyledContainer = styled.div`
   }
 `;
 
-type OwnProps = {
+type DoubleTextInputProps = {
   firstValue: string;
   secondValue: string;
   firstValuePlaceholder: string;
@@ -51,7 +51,7 @@ export const DoubleTextInput = ({
   onEscape,
   onShiftTab,
   onTab,
-}: OwnProps) => {
+}: DoubleTextInputProps) => {
   const [firstInternalValue, setFirstInternalValue] = useState(firstValue);
   const [secondInternalValue, setSecondInternalValue] = useState(secondValue);
 
diff --git a/front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx b/front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx
index 9720b11de..dcaca0b71 100644
--- a/front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx
+++ b/front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { StyledInput } from '@/ui/input/components/TextInput';
 import { ComputeNodeDimensions } from '@/ui/utilities/dimensions/components/ComputeNodeDimensions';
 
-export type DoubleTextInputEditProps = {
+export type EntityTitleDoubleTextInputProps = {
   firstValue: string;
   secondValue: string;
   firstValuePlaceholder: string;
@@ -38,7 +38,7 @@ export const EntityTitleDoubleTextInput = ({
   firstValuePlaceholder,
   secondValuePlaceholder,
   onChange,
-}: DoubleTextInputEditProps) => (
+}: EntityTitleDoubleTextInputProps) => (
   <StyledDoubleTextContainer>
     <ComputeNodeDimensions node={firstValue || firstValuePlaceholder}>
       {(nodeDimensions) => (
diff --git a/front/src/modules/ui/input/components/PhoneInput.tsx b/front/src/modules/ui/input/components/PhoneInput.tsx
index 0d496c032..e27645ea6 100644
--- a/front/src/modules/ui/input/components/PhoneInput.tsx
+++ b/front/src/modules/ui/input/components/PhoneInput.tsx
@@ -68,7 +68,7 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
   }
 `;
 
-export type PhoneCellEditProps = {
+export type PhoneInputProps = {
   placeholder?: string;
   autoFocus?: boolean;
   value: string;
@@ -89,7 +89,7 @@ export const PhoneInput = ({
   onShiftTab,
   onClickOutside,
   hotkeyScope,
-}: PhoneCellEditProps) => {
+}: PhoneInputProps) => {
   const [internalValue, setInternalValue] = useState<string | undefined>(value);
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
diff --git a/front/src/modules/ui/input/components/ProbabilityInput.tsx b/front/src/modules/ui/input/components/ProbabilityInput.tsx
index f01b12dbc..fbf3c228a 100644
--- a/front/src/modules/ui/input/components/ProbabilityInput.tsx
+++ b/front/src/modules/ui/input/components/ProbabilityInput.tsx
@@ -57,12 +57,15 @@ const PROBABILITY_VALUES = [
   { label: '100%', value: 100 },
 ];
 
-type OwnProps = {
+type ProbabilityInputProps = {
   probabilityIndex: number | null;
   onChange: (newValue: number) => void;
 };
 
-export const ProbabilityInput = ({ onChange, probabilityIndex }: OwnProps) => {
+export const ProbabilityInput = ({
+  onChange,
+  probabilityIndex,
+}: ProbabilityInputProps) => {
   const [hoveredProbabilityIndex, setHoveredProbabilityIndex] = useState<
     number | null
   >(null);
diff --git a/front/src/modules/ui/input/components/TextInput.tsx b/front/src/modules/ui/input/components/TextInput.tsx
index ee3defe33..43e3ce48b 100644
--- a/front/src/modules/ui/input/components/TextInput.tsx
+++ b/front/src/modules/ui/input/components/TextInput.tsx
@@ -11,7 +11,7 @@ export const StyledInput = styled.input`
   ${textInputStyle}
 `;
 
-type OwnProps = {
+type TextInputProps = {
   placeholder?: string;
   autoFocus?: boolean;
   value: string;
@@ -33,7 +33,7 @@ export const TextInput = ({
   onTab,
   onShiftTab,
   onClickOutside,
-}: OwnProps) => {
+}: TextInputProps) => {
   const [internalText, setInternalText] = useState(value);
 
   const wrapperRef = useRef(null);
diff --git a/front/src/modules/ui/input/image/components/ImageInput.tsx b/front/src/modules/ui/input/image/components/ImageInput.tsx
index 1ac35e302..b3a7d6ba4 100644
--- a/front/src/modules/ui/input/image/components/ImageInput.tsx
+++ b/front/src/modules/ui/input/image/components/ImageInput.tsx
@@ -77,7 +77,7 @@ const StyledHiddenFileInput = styled.input`
   display: none;
 `;
 
-type Props = Omit<React.ComponentProps<'div'>, 'children'> & {
+type ImageInputProps = Omit<React.ComponentProps<'div'>, 'children'> & {
   picture: string | null | undefined;
   onUpload?: (file: File) => void;
   onRemove?: () => void;
@@ -96,7 +96,7 @@ export const ImageInput = ({
   errorMessage,
   disabled = false,
   ...restProps
-}: Props) => {
+}: ImageInputProps) => {
   const theme = useTheme();
   const hiddenFileInput = React.useRef<HTMLInputElement>(null);
   const onUploadButtonClick = () => {
diff --git a/front/src/modules/ui/input/text/components/TextInputSettings.tsx b/front/src/modules/ui/input/text/components/TextInputSettings.tsx
index 35d2ad031..a882351c5 100644
--- a/front/src/modules/ui/input/text/components/TextInputSettings.tsx
+++ b/front/src/modules/ui/input/text/components/TextInputSettings.tsx
@@ -19,7 +19,10 @@ import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 
 import { InputHotkeyScope } from '../types/InputHotkeyScope';
 
-type OwnProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+type TextInputComponentProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'onChange'
+> & {
   label?: string;
   onChange?: (text: string) => void;
   fullWidth?: boolean;
@@ -27,7 +30,7 @@ type OwnProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
   error?: string;
 };
 
-const StyledContainer = styled.div<Pick<OwnProps, 'fullWidth'>>`
+const StyledContainer = styled.div<Pick<TextInputComponentProps, 'fullWidth'>>`
   display: flex;
   flex-direction: column;
   width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
@@ -48,7 +51,7 @@ const StyledInputContainer = styled.div`
   width: 100%;
 `;
 
-const StyledInput = styled.input<Pick<OwnProps, 'fullWidth'>>`
+const StyledInput = styled.input<Pick<TextInputComponentProps, 'fullWidth'>>`
   background-color: ${({ theme }) => theme.background.tertiary};
   border: none;
   border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
@@ -111,7 +114,8 @@ const TextInputComponent = (
     type,
     disableHotkeys = false,
     ...props
-  }: OwnProps,
+  }: TextInputComponentProps,
+  // eslint-disable-next-line twenty/component-props-naming
   ref: ForwardedRef<HTMLInputElement>,
 ): JSX.Element => {
   const theme = useTheme();
diff --git a/front/src/modules/ui/layout/components/DefaultLayout.tsx b/front/src/modules/ui/layout/components/DefaultLayout.tsx
index 3486e9a35..37e304b11 100644
--- a/front/src/modules/ui/layout/components/DefaultLayout.tsx
+++ b/front/src/modules/ui/layout/components/DefaultLayout.tsx
@@ -50,11 +50,11 @@ const StyledMainContainer = styled.div`
   }
 `;
 
-type OwnProps = {
+type DefaultLayoutProps = {
   children: React.ReactNode;
 };
 
-export const DefaultLayout = ({ children }: OwnProps) => {
+export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
   const onboardingStatus = useOnboardingStatus();
 
   return (
diff --git a/front/src/modules/ui/layout/components/PageAddButton.tsx b/front/src/modules/ui/layout/components/PageAddButton.tsx
index 1cfaaf07e..bd9e97705 100644
--- a/front/src/modules/ui/layout/components/PageAddButton.tsx
+++ b/front/src/modules/ui/layout/components/PageAddButton.tsx
@@ -1,11 +1,11 @@
 import { IconButton } from '@/ui/button/components/IconButton';
 import { IconPlus } from '@/ui/icon';
 
-type OwnProps = {
+type PageAddButtonProps = {
   onClick: () => void;
 };
 
-export const PageAddButton = ({ onClick }: OwnProps) => (
+export const PageAddButton = ({ onClick }: PageAddButtonProps) => (
   <IconButton
     Icon={IconPlus}
     dataTestId="add-button"
diff --git a/front/src/modules/ui/layout/components/PageBody.tsx b/front/src/modules/ui/layout/components/PageBody.tsx
index 5525cc4c1..65bcbc8c7 100644
--- a/front/src/modules/ui/layout/components/PageBody.tsx
+++ b/front/src/modules/ui/layout/components/PageBody.tsx
@@ -1,11 +1,11 @@
 import { PAGE_BAR_MIN_HEIGHT } from './PageHeader';
 import { RightDrawerContainer } from './RightDrawerContainer';
 
-type OwnProps = {
+type PageBodyProps = {
   children: JSX.Element | JSX.Element[];
 };
 
-export const PageBody = ({ children }: OwnProps) => (
+export const PageBody = ({ children }: PageBodyProps) => (
   <RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
     {children}
   </RightDrawerContainer>
diff --git a/front/src/modules/ui/layout/components/PageContainer.tsx b/front/src/modules/ui/layout/components/PageContainer.tsx
index 08b28b543..6a552e0e7 100644
--- a/front/src/modules/ui/layout/components/PageContainer.tsx
+++ b/front/src/modules/ui/layout/components/PageContainer.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type PageContainerProps = {
   children: JSX.Element | JSX.Element[];
 };
 
@@ -10,6 +10,6 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
-export const PageContainer = ({ children }: OwnProps) => (
+export const PageContainer = ({ children }: PageContainerProps) => (
   <StyledContainer>{children}</StyledContainer>
 );
diff --git a/front/src/modules/ui/layout/components/PageFavoriteButton.tsx b/front/src/modules/ui/layout/components/PageFavoriteButton.tsx
index 40e41481c..0ffe75cf7 100644
--- a/front/src/modules/ui/layout/components/PageFavoriteButton.tsx
+++ b/front/src/modules/ui/layout/components/PageFavoriteButton.tsx
@@ -1,12 +1,15 @@
 import { IconButton } from '@/ui/button/components/IconButton';
 import { IconHeart } from '@/ui/icon';
 
-type OwnProps = {
+type PageFavoriteButtonProps = {
   isFavorite: boolean;
   onClick: () => void;
 };
 
-export const PageFavoriteButton = ({ isFavorite, onClick }: OwnProps) => (
+export const PageFavoriteButton = ({
+  isFavorite,
+  onClick,
+}: PageFavoriteButtonProps) => (
   <IconButton
     Icon={IconHeart}
     size="medium"
diff --git a/front/src/modules/ui/layout/components/PageHotkeysEffect.tsx b/front/src/modules/ui/layout/components/PageHotkeysEffect.tsx
index 772ca6024..6100b7541 100644
--- a/front/src/modules/ui/layout/components/PageHotkeysEffect.tsx
+++ b/front/src/modules/ui/layout/components/PageHotkeysEffect.tsx
@@ -1,11 +1,13 @@
 import { TableHotkeyScope } from '@/ui/data-table/types/TableHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
-type OwnProps = {
+type PageHotkeysEffectProps = {
   onAddButtonClick?: () => void;
 };
 
-export const PageHotkeysEffect = ({ onAddButtonClick }: OwnProps) => {
+export const PageHotkeysEffect = ({
+  onAddButtonClick,
+}: PageHotkeysEffectProps) => {
   useScopedHotkeys('c', () => onAddButtonClick?.(), TableHotkeyScope.Table, [
     onAddButtonClick,
   ]);
diff --git a/front/src/modules/ui/layout/components/RightDrawerContainer.tsx b/front/src/modules/ui/layout/components/RightDrawerContainer.tsx
index 01e40f92a..fa469af70 100644
--- a/front/src/modules/ui/layout/components/RightDrawerContainer.tsx
+++ b/front/src/modules/ui/layout/components/RightDrawerContainer.tsx
@@ -4,7 +4,7 @@ import { RightDrawer } from '@/ui/right-drawer/components/RightDrawer';
 
 import { PagePanel } from './PagePanel';
 
-type OwnProps = {
+type RightDrawerContainerProps = {
   children: JSX.Element | JSX.Element[];
   topMargin?: number;
 };
@@ -33,7 +33,10 @@ const StyledLeftContainer = styled.div<LeftContainerProps>`
   width: 100%;
 `;
 
-export const RightDrawerContainer = ({ children, topMargin }: OwnProps) => (
+export const RightDrawerContainer = ({
+  children,
+  topMargin,
+}: RightDrawerContainerProps) => (
   <StyledMainContainer topMargin={topMargin ?? 0}>
     <StyledLeftContainer>
       <PagePanel>{children}</PagePanel>
diff --git a/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
index 774bea38c..edb0ef894 100644
--- a/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
@@ -35,7 +35,7 @@ const StyledTabListContainer = styled.div`
   height: 40px;
 `;
 
-type OwnProps = {
+type ShowPageRightContainerProps = {
   entity: ActivityTargetableEntity;
   timeline?: boolean;
   tasks?: boolean;
@@ -49,7 +49,7 @@ export const ShowPageRightContainer = ({
   tasks,
   notes,
   emails,
-}: OwnProps) => {
+}: ShowPageRightContainerProps) => {
   const TASK_TABS = [
     {
       id: 'timeline',
diff --git a/front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
index 8ba72d6ba..8b7196286 100644
--- a/front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
+++ b/front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
@@ -11,7 +11,7 @@ import {
 
 import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip';
 
-type OwnProps = {
+type ShowPageSummaryCardProps = {
   id?: string;
   logoOrAvatar?: string;
   title: string;
@@ -81,7 +81,7 @@ export const ShowPageSummaryCard = ({
   avatarType,
   renderTitleEditComponent,
   onUploadPicture,
-}: OwnProps) => {
+}: ShowPageSummaryCardProps) => {
   const beautifiedCreatedAt =
     date !== '' ? beautifyPastDateRelativeToNow(date) : '';
   const exactCreatedAt = date !== '' ? beautifyExactDateTime(date) : '';
diff --git a/front/src/modules/ui/link/components/ContactLink.tsx b/front/src/modules/ui/link/components/ContactLink.tsx
index 580af1e06..e09a0c212 100644
--- a/front/src/modules/ui/link/components/ContactLink.tsx
+++ b/front/src/modules/ui/link/components/ContactLink.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Link as ReactLink } from 'react-router-dom';
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type ContactLinkProps = {
   className?: string;
   href: string;
   children?: React.ReactNode;
@@ -30,7 +30,7 @@ export const ContactLink = ({
   href,
   children,
   onClick,
-}: OwnProps) => (
+}: ContactLinkProps) => (
   <div>
     <StyledClickable className={className}>
       <ReactLink target="_blank" onClick={onClick} to={href}>
diff --git a/front/src/modules/ui/link/components/PrimaryLink.tsx b/front/src/modules/ui/link/components/PrimaryLink.tsx
index e8f9a914c..27cac16e4 100644
--- a/front/src/modules/ui/link/components/PrimaryLink.tsx
+++ b/front/src/modules/ui/link/components/PrimaryLink.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Link as ReactLink } from 'react-router-dom';
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type PrimaryLinkProps = {
   children: React.ReactNode;
   href: string;
   onClick?: () => void;
@@ -18,7 +18,7 @@ const StyledClickable = styled.div`
   }
 `;
 
-export const PrimaryLink = ({ href, children, onClick }: OwnProps) => (
+export const PrimaryLink = ({ href, children, onClick }: PrimaryLinkProps) => (
   <StyledClickable>
     <ReactLink onClick={onClick} to={href}>
       {children}
diff --git a/front/src/modules/ui/link/components/RawLink.tsx b/front/src/modules/ui/link/components/RawLink.tsx
index 60c351440..a02aad799 100644
--- a/front/src/modules/ui/link/components/RawLink.tsx
+++ b/front/src/modules/ui/link/components/RawLink.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Link as ReactLink } from 'react-router-dom';
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type RawLinkProps = {
   className?: string;
   href: string;
   children?: React.ReactNode;
@@ -19,7 +19,12 @@ const StyledClickable = styled.div`
   }
 `;
 
-export const RawLink = ({ className, href, children, onClick }: OwnProps) => (
+export const RawLink = ({
+  className,
+  href,
+  children,
+  onClick,
+}: RawLinkProps) => (
   <div>
     <StyledClickable className={className}>
       <ReactLink target="_blank" onClick={onClick} to={href}>
diff --git a/front/src/modules/ui/link/components/RoundedLink.tsx b/front/src/modules/ui/link/components/RoundedLink.tsx
index e000ba370..f25905f3f 100644
--- a/front/src/modules/ui/link/components/RoundedLink.tsx
+++ b/front/src/modules/ui/link/components/RoundedLink.tsx
@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { Chip } from '@/ui/chip/components/Chip';
 import { ChipSize, ChipVariant } from '@/ui/chip/components/Chip';
 
-type OwnProps = {
+type RoundedLinkProps = {
   href: string;
   children?: React.ReactNode;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
@@ -21,7 +21,7 @@ const StyledClickable = styled.div`
   }
 `;
 
-export const RoundedLink = ({ children, href, onClick }: OwnProps) => (
+export const RoundedLink = ({ children, href, onClick }: RoundedLinkProps) => (
   <div>
     {children !== '' ? (
       <StyledClickable>
diff --git a/front/src/modules/ui/link/components/SocialLink.tsx b/front/src/modules/ui/link/components/SocialLink.tsx
index 49a6ea4a0..8233927af 100644
--- a/front/src/modules/ui/link/components/SocialLink.tsx
+++ b/front/src/modules/ui/link/components/SocialLink.tsx
@@ -9,7 +9,7 @@ export enum LinkType {
   Twitter = 'twitter',
 }
 
-type OwnProps = {
+type SocialLinkProps = {
   href: string;
   children?: React.ReactNode;
   type?: LinkType;
@@ -26,7 +26,12 @@ const StyledRawLink = styled(RoundedLink)`
   }
 `;
 
-export const SocialLink = ({ children, href, onClick, type }: OwnProps) => {
+export const SocialLink = ({
+  children,
+  href,
+  onClick,
+  type,
+}: SocialLinkProps) => {
   let displayValue = children;
 
   if (type === 'linkedin') {
diff --git a/front/src/modules/ui/menu-item/components/MenuItemCommand.tsx b/front/src/modules/ui/menu-item/components/MenuItemCommand.tsx
index 38562125f..c89b86fa5 100644
--- a/front/src/modules/ui/menu-item/components/MenuItemCommand.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItemCommand.tsx
@@ -79,7 +79,7 @@ const StyledMenuItemCommandContainer = styled(Command.Item)`
   }
 `;
 
-export type MenuItemProps = {
+export type MenuItemCommandProps = {
   LeftIcon?: IconComponent;
   text: string;
   command: string;
@@ -93,7 +93,7 @@ export const MenuItemCommand = ({
   command,
   className,
   onClick,
-}: MenuItemProps) => {
+}: MenuItemCommandProps) => {
   const theme = useTheme();
 
   return (
diff --git a/front/src/modules/ui/menu-item/components/MenuItemMultiSelect.tsx b/front/src/modules/ui/menu-item/components/MenuItemMultiSelect.tsx
index 1a8b5a88f..1c205e80e 100644
--- a/front/src/modules/ui/menu-item/components/MenuItemMultiSelect.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItemMultiSelect.tsx
@@ -13,7 +13,7 @@ const StyledLeftContentWithCheckboxContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
 `;
 
-type OwnProps = {
+type MenuItemMultiSelectProps = {
   LeftIcon?: IconComponent;
   selected: boolean;
   text: string;
@@ -27,7 +27,7 @@ export const MenuItemMultiSelect = ({
   selected,
   className,
   onSelectChange,
-}: OwnProps) => {
+}: MenuItemMultiSelectProps) => {
   const handleOnClick = () => {
     onSelectChange?.(!selected);
   };
diff --git a/front/src/modules/ui/menu-item/components/MenuItemMultiSelectAvatar.tsx b/front/src/modules/ui/menu-item/components/MenuItemMultiSelectAvatar.tsx
index 8e3618071..1521d5fb0 100644
--- a/front/src/modules/ui/menu-item/components/MenuItemMultiSelectAvatar.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItemMultiSelectAvatar.tsx
@@ -16,7 +16,7 @@ const StyledLeftContentWithCheckboxContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
 `;
 
-type OwnProps = {
+type MenuItemMultiSelectAvatarProps = {
   avatar?: ReactNode;
   selected: boolean;
   text: string;
@@ -30,7 +30,7 @@ export const MenuItemMultiSelectAvatar = ({
   selected,
   className,
   onSelectChange,
-}: OwnProps) => {
+}: MenuItemMultiSelectAvatarProps) => {
   const handleOnClick = () => {
     onSelectChange?.(!selected);
   };
diff --git a/front/src/modules/ui/menu-item/components/MenuItemNavigate.tsx b/front/src/modules/ui/menu-item/components/MenuItemNavigate.tsx
index 3973d72f4..5c2c271d9 100644
--- a/front/src/modules/ui/menu-item/components/MenuItemNavigate.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItemNavigate.tsx
@@ -9,7 +9,7 @@ import {
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 
-export type MenuItemProps = {
+export type MenuItemNavigateProps = {
   LeftIcon?: IconComponent;
   text: string;
   onClick?: () => void;
@@ -21,7 +21,7 @@ export const MenuItemNavigate = ({
   text,
   className,
   onClick,
-}: MenuItemProps) => {
+}: MenuItemNavigateProps) => {
   const theme = useTheme();
 
   return (
diff --git a/front/src/modules/ui/menu-item/components/MenuItemSelect.tsx b/front/src/modules/ui/menu-item/components/MenuItemSelect.tsx
index 05246992c..895ec5aa8 100644
--- a/front/src/modules/ui/menu-item/components/MenuItemSelect.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItemSelect.tsx
@@ -39,7 +39,7 @@ export const StyledMenuItemSelect = styled(StyledMenuItemBase)<{
   }}
 `;
 
-type OwnProps = {
+type MenuItemSelectProps = {
   LeftIcon: IconComponent | null | undefined;
   selected: boolean;
   text: string;
@@ -57,7 +57,7 @@ export const MenuItemSelect = ({
   onClick,
   disabled,
   hovered,
-}: OwnProps) => {
+}: MenuItemSelectProps) => {
   const theme = useTheme();
 
   return (
diff --git a/front/src/modules/ui/menu-item/components/MenuItemSelectAvatar.tsx b/front/src/modules/ui/menu-item/components/MenuItemSelectAvatar.tsx
index 4d1081562..909dad912 100644
--- a/front/src/modules/ui/menu-item/components/MenuItemSelectAvatar.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItemSelectAvatar.tsx
@@ -11,7 +11,7 @@ import {
 
 import { StyledMenuItemSelect } from './MenuItemSelect';
 
-type OwnProps = {
+type MenuItemSelectAvatarProps = {
   avatar: ReactNode;
   selected: boolean;
   text: string;
@@ -31,7 +31,7 @@ export const MenuItemSelectAvatar = ({
   disabled,
   hovered,
   testId,
-}: OwnProps) => {
+}: MenuItemSelectAvatarProps) => {
   const theme = useTheme();
 
   return (
diff --git a/front/src/modules/ui/menu-item/components/MenuItemSelectColor.tsx b/front/src/modules/ui/menu-item/components/MenuItemSelectColor.tsx
index 677dfe200..0254368f8 100644
--- a/front/src/modules/ui/menu-item/components/MenuItemSelectColor.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItemSelectColor.tsx
@@ -20,7 +20,7 @@ const StyledColorSample = styled.div<{ colorName: ThemeColor }>`
   width: 12px;
 `;
 
-type OwnProps = {
+type MenuItemSelectColorProps = {
   selected: boolean;
   text: string;
   className?: string;
@@ -38,7 +38,7 @@ export const MenuItemSelectColor = ({
   onClick,
   disabled,
   hovered,
-}: OwnProps) => {
+}: MenuItemSelectColorProps) => {
   const theme = useTheme();
 
   return (
diff --git a/front/src/modules/ui/menu-item/components/MenuItemToggle.tsx b/front/src/modules/ui/menu-item/components/MenuItemToggle.tsx
index 9730cb9b0..05c09faac 100644
--- a/front/src/modules/ui/menu-item/components/MenuItemToggle.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItemToggle.tsx
@@ -4,7 +4,7 @@ import { Toggle } from '@/ui/input/components/Toggle';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
 
-type OwnProps = {
+type MenuItemToggleProps = {
   LeftIcon?: IconComponent;
   toggled: boolean;
   text: string;
@@ -18,7 +18,7 @@ export const MenuItemToggle = ({
   toggled,
   className,
   onToggleChange,
-}: OwnProps) => {
+}: MenuItemToggleProps) => {
   const handleOnClick = () => {
     onToggleChange?.(!toggled);
   };
diff --git a/front/src/modules/ui/menu-item/internals/components/MenuItemLeftContent.tsx b/front/src/modules/ui/menu-item/internals/components/MenuItemLeftContent.tsx
index 76efeb072..716df9298 100644
--- a/front/src/modules/ui/menu-item/internals/components/MenuItemLeftContent.tsx
+++ b/front/src/modules/ui/menu-item/internals/components/MenuItemLeftContent.tsx
@@ -9,7 +9,7 @@ import {
   StyledMenuItemLeftContent,
 } from './StyledMenuItemBase';
 
-type OwnProps = {
+type MenuItemLeftContentProps = {
   LeftIcon: IconComponent | null | undefined;
   showGrip?: boolean;
   text: string;
@@ -19,7 +19,7 @@ export const MenuItemLeftContent = ({
   LeftIcon,
   text,
   showGrip = false,
-}: OwnProps) => {
+}: MenuItemLeftContentProps) => {
   const theme = useTheme();
 
   return (
diff --git a/front/src/modules/ui/navbar/components/MainNavbar.tsx b/front/src/modules/ui/navbar/components/MainNavbar.tsx
index 50ad10879..99043bee2 100644
--- a/front/src/modules/ui/navbar/components/MainNavbar.tsx
+++ b/front/src/modules/ui/navbar/components/MainNavbar.tsx
@@ -5,7 +5,7 @@ import NavItemsContainer from './NavItemsContainer';
 import NavWorkspaceButton from './NavWorkspaceButton';
 import SupportChat from './SupportChat';
 
-type OwnProps = {
+type MainNavbarProps = {
   children: React.ReactNode;
 };
 
@@ -18,7 +18,7 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
-const MainNavbar = ({ children }: OwnProps) => {
+const MainNavbar = ({ children }: MainNavbarProps) => {
   const [isHovered, setIsHovered] = useState(false);
 
   const handleHover = () => {
diff --git a/front/src/modules/ui/navbar/components/NavBackButton.tsx b/front/src/modules/ui/navbar/components/NavBackButton.tsx
index 8dacdb1e3..9574ae025 100644
--- a/front/src/modules/ui/navbar/components/NavBackButton.tsx
+++ b/front/src/modules/ui/navbar/components/NavBackButton.tsx
@@ -5,7 +5,7 @@ import { useRecoilState } from 'recoil';
 import { IconChevronLeft } from '@/ui/icon/index';
 import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState';
 
-type OwnProps = {
+type NavBackButtonProps = {
   title: string;
 };
 
@@ -30,7 +30,7 @@ const StyledContainer = styled.div`
   justify-content: space-between;
 `;
 
-const NavBackButton = ({ title }: OwnProps) => {
+const NavBackButton = ({ title }: NavBackButtonProps) => {
   const navigate = useNavigate();
   const [, setIsNavbarSwitchingSize] = useRecoilState(
     isNavbarSwitchingSizeState,
diff --git a/front/src/modules/ui/navbar/components/NavCollapseButton.tsx b/front/src/modules/ui/navbar/components/NavCollapseButton.tsx
index 260686984..49ab85075 100644
--- a/front/src/modules/ui/navbar/components/NavCollapseButton.tsx
+++ b/front/src/modules/ui/navbar/components/NavCollapseButton.tsx
@@ -32,7 +32,7 @@ const StyledCollapseButton = styled(motion.div)`
   width: 24px;
 `;
 
-type CollapseButtonProps = {
+type NavCollapseButtonProps = {
   direction?: 'left' | 'right';
   show?: boolean;
 };
@@ -40,7 +40,7 @@ type CollapseButtonProps = {
 const NavCollapseButton = ({
   direction = 'left',
   show = true,
-}: CollapseButtonProps) => {
+}: NavCollapseButtonProps) => {
   const [isNavbarOpened, setIsNavbarOpened] =
     useRecoilState(isNavbarOpenedState);
 
diff --git a/front/src/modules/ui/navbar/components/NavItemsContainer.tsx b/front/src/modules/ui/navbar/components/NavItemsContainer.tsx
index e9bd6c84b..7df27c250 100644
--- a/front/src/modules/ui/navbar/components/NavItemsContainer.tsx
+++ b/front/src/modules/ui/navbar/components/NavItemsContainer.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type NavItemsContainerProps = {
   children: React.ReactNode;
 };
 
@@ -10,7 +10,7 @@ const StyledNavItemsContainer = styled.div`
   margin-top: 40px;
 `;
 
-const NavItemsContainer = ({ children }: OwnProps) => (
+const NavItemsContainer = ({ children }: NavItemsContainerProps) => (
   <StyledNavItemsContainer>{children}</StyledNavItemsContainer>
 );
 
diff --git a/front/src/modules/ui/navbar/components/NavTitle.tsx b/front/src/modules/ui/navbar/components/NavTitle.tsx
index ee3ab4234..723204efb 100644
--- a/front/src/modules/ui/navbar/components/NavTitle.tsx
+++ b/front/src/modules/ui/navbar/components/NavTitle.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type NavTitleProps = {
   label: string;
 };
 
@@ -15,6 +15,8 @@ const StyledTitle = styled.div`
   text-transform: uppercase;
 `;
 
-const NavTitle = ({ label }: OwnProps) => <StyledTitle>{label}</StyledTitle>;
+const NavTitle = ({ label }: NavTitleProps) => (
+  <StyledTitle>{label}</StyledTitle>
+);
 
 export default NavTitle;
diff --git a/front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx b/front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx
index e10b656ff..b6209c205 100644
--- a/front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx
+++ b/front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx
@@ -45,11 +45,13 @@ const StyledName = styled.div`
   margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
-type OwnProps = {
+type NavWorkspaceButtonProps = {
   showCollapseButton: boolean;
 };
 
-const NavWorkspaceButton = ({ showCollapseButton }: OwnProps) => {
+const NavWorkspaceButton = ({
+  showCollapseButton,
+}: NavWorkspaceButtonProps) => {
   const currentUser = useRecoilValue(currentUserState);
 
   const currentWorkspace = currentUser?.workspaceMember?.workspace;
diff --git a/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx b/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx
index c96c4c468..a2c56ece7 100644
--- a/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx
+++ b/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx
@@ -19,11 +19,13 @@ const StyledNavbarContainer = styled(motion.div)`
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
-type NavbarProps = {
+type NavbarAnimatedContainerProps = {
   children: React.ReactNode;
 };
 
-export const NavbarAnimatedContainer = ({ children }: NavbarProps) => {
+export const NavbarAnimatedContainer = ({
+  children,
+}: NavbarAnimatedContainerProps) => {
   const isNavbarOpened = useRecoilValue(isNavbarOpenedState);
   const [, setIsNavbarSwitchingSize] = useRecoilState(
     isNavbarSwitchingSizeState,
diff --git a/front/src/modules/ui/navbar/components/SubMenuNavbar.tsx b/front/src/modules/ui/navbar/components/SubMenuNavbar.tsx
index 3d349c152..e97d17068 100644
--- a/front/src/modules/ui/navbar/components/SubMenuNavbar.tsx
+++ b/front/src/modules/ui/navbar/components/SubMenuNavbar.tsx
@@ -10,7 +10,7 @@ import { githubLink, leftNavbarWidth } from '../constants';
 import NavBackButton from './NavBackButton';
 import NavItemsContainer from './NavItemsContainer';
 
-type OwnProps = {
+type SubMenuNavbarProps = {
   children: React.ReactNode;
   backButtonTitle: string;
   displayVersion?: boolean;
@@ -54,7 +54,7 @@ const SubMenuNavbar = ({
   children,
   backButtonTitle,
   displayVersion,
-}: OwnProps) => {
+}: SubMenuNavbarProps) => {
   const version = packageJson.version;
 
   const theme = useTheme();
diff --git a/front/src/modules/ui/progress-bar/components/CircularProgressBar.tsx b/front/src/modules/ui/progress-bar/components/CircularProgressBar.tsx
index 5ca443813..f252da2d8 100644
--- a/front/src/modules/ui/progress-bar/components/CircularProgressBar.tsx
+++ b/front/src/modules/ui/progress-bar/components/CircularProgressBar.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { motion, useAnimation } from 'framer-motion';
 
-interface Props {
+interface CircularProgressBarProps {
   size?: number;
   barWidth?: number;
   barColor?: string;
@@ -11,7 +11,7 @@ export const CircularProgressBar = ({
   size = 50,
   barWidth = 5,
   barColor = 'currentColor',
-}: Props) => {
+}: CircularProgressBarProps) => {
   const controls = useAnimation();
 
   const circumference = useMemo(
diff --git a/front/src/modules/ui/section/components/Section.tsx b/front/src/modules/ui/section/components/Section.tsx
index 3d5fcf345..e5cc66ded 100644
--- a/front/src/modules/ui/section/components/Section.tsx
+++ b/front/src/modules/ui/section/components/Section.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type SectionProps = {
   children: ReactNode;
   alignment?: SectionAlignment;
   fullWidth?: boolean;
@@ -36,7 +36,7 @@ export const Section = ({
   alignment = SectionAlignment.Left,
   fullWidth = true,
   fontColor = SectionFontColor.Primary,
-}: OwnProps) => (
+}: SectionProps) => (
   <StyledSection
     alignment={alignment}
     fullWidth={fullWidth}
diff --git a/front/src/modules/ui/snack-bar/components/SnackBar.tsx b/front/src/modules/ui/snack-bar/components/SnackBar.tsx
index 9ad8c8246..14f37b0f4 100644
--- a/front/src/modules/ui/snack-bar/components/SnackBar.tsx
+++ b/front/src/modules/ui/snack-bar/components/SnackBar.tsx
@@ -11,7 +11,7 @@ import { rgba } from '@/ui/theme/constants/colors';
 
 import { usePausableTimeout } from '../hooks/usePausableTimeout';
 
-const StyledMotionContainer = styled.div<Pick<SnackbarProps, 'variant'>>`
+const StyledMotionContainer = styled.div<Pick<SnackBarProps, 'variant'>>`
   align-items: center;
   background-color: ${({ theme, variant }) => {
     switch (variant) {
@@ -59,7 +59,7 @@ const StyledProgressBarContainer = styled.div`
   top: 0;
 `;
 
-const StyledCloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
+const StyledCloseButton = styled.button<Pick<SnackBarProps, 'variant'>>`
   align-items: center;
   background-color: transparent;
   border: none;
@@ -91,7 +91,7 @@ const StyledCloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
 
 export type SnackbarVariant = 'info' | 'error' | 'success';
 
-export interface SnackbarProps extends React.ComponentPropsWithoutRef<'div'> {
+export interface SnackBarProps extends React.ComponentPropsWithoutRef<'div'> {
   role?: 'alert' | 'status';
   icon?: React.ReactNode;
   message?: string;
@@ -112,7 +112,7 @@ export const SnackBar = ({
   children,
   onClose,
   ...rootProps
-}: SnackbarProps) => {
+}: SnackBarProps) => {
   const theme = useTheme();
 
   const progressBarRef = useRef<ProgressBarControls | null>(null);
diff --git a/front/src/modules/ui/snack-bar/states/snackBarState.ts b/front/src/modules/ui/snack-bar/states/snackBarState.ts
index a69f2314d..e8572a86b 100644
--- a/front/src/modules/ui/snack-bar/states/snackBarState.ts
+++ b/front/src/modules/ui/snack-bar/states/snackBarState.ts
@@ -1,8 +1,8 @@
 import { atom, selector } from 'recoil';
 
-import { SnackbarProps } from '../components/SnackBar';
+import { SnackBarProps } from '../components/SnackBar';
 
-export type SnackBarOptions = SnackbarProps & {
+export type SnackBarOptions = SnackBarProps & {
   id: string;
 };
 
diff --git a/front/src/modules/ui/step-bar/components/StepBar.tsx b/front/src/modules/ui/step-bar/components/StepBar.tsx
index 6807982ce..5cc14b610 100644
--- a/front/src/modules/ui/step-bar/components/StepBar.tsx
+++ b/front/src/modules/ui/step-bar/components/StepBar.tsx
@@ -16,12 +16,16 @@ const StyledContainer = styled.div`
   }
 `;
 
-export type StepsProps = React.PropsWithChildren &
+export type StepBarProps = React.PropsWithChildren &
   React.ComponentProps<'div'> & {
     activeStep: number;
   };
 
-export const StepBar = ({ children, activeStep, ...restProps }: StepsProps) => {
+export const StepBar = ({
+  children,
+  activeStep,
+  ...restProps
+}: StepBarProps) => {
   const isMobile = useIsMobile();
 
   return (
diff --git a/front/src/modules/ui/theme/components/AppThemeProvider.tsx b/front/src/modules/ui/theme/components/AppThemeProvider.tsx
index e7732bfcf..7a55ebb08 100644
--- a/front/src/modules/ui/theme/components/AppThemeProvider.tsx
+++ b/front/src/modules/ui/theme/components/AppThemeProvider.tsx
@@ -6,7 +6,7 @@ import { ColorScheme } from '~/generated/graphql';
 import { useColorScheme } from '../hooks/useColorScheme';
 import { useSystemColorScheme } from '../hooks/useSystemColorScheme';
 
-type OwnProps = {
+type AppThemeProviderProps = {
   children: JSX.Element;
 };
 
@@ -15,7 +15,7 @@ const themes = {
   [ColorScheme.Light]: lightTheme,
 };
 
-export const AppThemeProvider = ({ children }: OwnProps) => {
+export const AppThemeProvider = ({ children }: AppThemeProviderProps) => {
   const systemColorScheme = useSystemColorScheme();
 
   const { colorScheme } = useColorScheme();
diff --git a/front/src/modules/ui/tooltip/AppTooltip.tsx b/front/src/modules/ui/tooltip/AppTooltip.tsx
index 0e4fa5b6d..251bef012 100644
--- a/front/src/modules/ui/tooltip/AppTooltip.tsx
+++ b/front/src/modules/ui/tooltip/AppTooltip.tsx
@@ -31,7 +31,7 @@ const StyledAppTooltip = styled(Tooltip)`
   z-index: ${({ theme }) => theme.lastLayerZIndex};
 `;
 
-export type AppToolipProps = {
+export type AppTooltipProps = {
   className?: string;
   anchorSelect?: string;
   content?: string;
@@ -43,7 +43,7 @@ export type AppToolipProps = {
   positionStrategy?: PositionStrategy;
 };
 
-export const AppTooltip = (props: AppToolipProps) => (
+export const AppTooltip = (props: AppTooltipProps) => (
   // eslint-disable-next-line twenty/no-spread-props
   <StyledAppTooltip {...props} />
 );
diff --git a/front/src/modules/ui/top-bar/TopBar.tsx b/front/src/modules/ui/top-bar/TopBar.tsx
index 0e500d82c..2ec13e4c4 100644
--- a/front/src/modules/ui/top-bar/TopBar.tsx
+++ b/front/src/modules/ui/top-bar/TopBar.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type TopBarProps = {
   className?: string;
   leftComponent?: ReactNode;
   rightComponent?: ReactNode;
@@ -46,7 +46,7 @@ export const TopBar = ({
   rightComponent,
   bottomComponent,
   displayBottomBorder = true,
-}: OwnProps) => (
+}: TopBarProps) => (
   <StyledContainer className={className}>
     <StyledTopBar displayBottomBorder={displayBottomBorder}>
       <StyledLeftSection>{leftComponent}</StyledLeftSection>
diff --git a/front/src/modules/ui/typography/components/H1Title.tsx b/front/src/modules/ui/typography/components/H1Title.tsx
index 09a01fa52..063546d42 100644
--- a/front/src/modules/ui/typography/components/H1Title.tsx
+++ b/front/src/modules/ui/typography/components/H1Title.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type H1TitleProps = {
   title: string;
   fontColor?: H1TitleFontColor;
 };
@@ -25,4 +25,4 @@ const StyledTitle = styled.h2<{
 export const H1Title = ({
   title,
   fontColor = H1TitleFontColor.Tertiary,
-}: OwnProps) => <StyledTitle fontColor={fontColor}>{title}</StyledTitle>;
+}: H1TitleProps) => <StyledTitle fontColor={fontColor}>{title}</StyledTitle>;
diff --git a/front/src/modules/ui/typography/components/H2Title.tsx b/front/src/modules/ui/typography/components/H2Title.tsx
index 629c6ce22..2a3cfbf34 100644
--- a/front/src/modules/ui/typography/components/H2Title.tsx
+++ b/front/src/modules/ui/typography/components/H2Title.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-type Props = {
+type H2TitleProps = {
   title: string;
   description?: string;
   addornment?: React.ReactNode;
@@ -33,7 +33,7 @@ const StyledDescription = styled.h3`
   margin-top: ${({ theme }) => theme.spacing(3)};
 `;
 
-export const H2Title = ({ title, description, addornment }: Props) => (
+export const H2Title = ({ title, description, addornment }: H2TitleProps) => (
   <StyledContainer>
     <StyledTitleContainer>
       <StyledTitle>{title}</StyledTitle>
diff --git a/front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx b/front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx
index a2ec18e17..846493ab9 100644
--- a/front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx
+++ b/front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx
@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion';
 
-type Props = Omit<
+type AnimatedEaseInProps = Omit<
   React.ComponentProps<typeof motion.div>,
   'initial' | 'animated' | 'transition'
 > & {
@@ -11,7 +11,7 @@ export const AnimatedEaseIn = ({
   children,
   duration = 0.3,
   ...restProps
-}: Props) => {
+}: AnimatedEaseInProps) => {
   const initial = { opacity: 0 };
   const animate = { opacity: 1 };
   const transition = { ease: 'linear', duration };
diff --git a/front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx b/front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx
index d67957ffd..6a6106a4b 100644
--- a/front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx
+++ b/front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx
@@ -11,7 +11,10 @@ const StyledWord = styled(motion.span)`
   white-space: pre;
 `;
 
-type Props = Omit<React.ComponentProps<typeof motion.div>, 'children'> & {
+type AnimatedTextWordProps = Omit<
+  React.ComponentProps<typeof motion.div>,
+  'children'
+> & {
   text: string;
 };
 
@@ -44,7 +47,10 @@ const childAnimation = {
   },
 };
 
-export const AnimatedTextWord = ({ text = '', ...restProps }: Props) => {
+export const AnimatedTextWord = ({
+  text = '',
+  ...restProps
+}: AnimatedTextWordProps) => {
   const words = useMemo(() => {
     const words = text.split(' ');
 
diff --git a/front/src/modules/ui/utilities/debug/components/TimingProfiler.tsx b/front/src/modules/ui/utilities/debug/components/TimingProfiler.tsx
index 133588f6c..614a2aa4e 100644
--- a/front/src/modules/ui/utilities/debug/components/TimingProfiler.tsx
+++ b/front/src/modules/ui/utilities/debug/components/TimingProfiler.tsx
@@ -3,12 +3,12 @@ import { Interaction } from 'scheduler/tracing';
 
 import { logDebug } from '~/utils/logDebug';
 
-type OwnProps = {
+type TimingProfilerProps = {
   id: string;
   children: React.ReactNode;
 };
 
-export const TimingProfiler = ({ id, children }: OwnProps) => {
+export const TimingProfiler = ({ id, children }: TimingProfilerProps) => {
   const handleRender = (
     id: string,
     phase: 'mount' | 'update',
diff --git a/front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx b/front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx
index 2174fb36c..5a31327f2 100644
--- a/front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx
+++ b/front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx
@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 
-type ComputeNodeDimensionsEffectProps = {
+type ComputeNodeDimensionsProps = {
   children: (
     dimensions: { height: number; width: number } | undefined,
   ) => ReactNode;
@@ -17,7 +17,7 @@ const StyledNodeWrapper = styled.span`
 export const ComputeNodeDimensions = ({
   children,
   node = children(undefined),
-}: ComputeNodeDimensionsEffectProps) => {
+}: ComputeNodeDimensionsProps) => {
   const nodeWrapperRef = useRef<HTMLSpanElement>(null);
   const [nodeDimensions, setNodeDimensions] = useState<
     | {
diff --git a/front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx b/front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
index dba9e33cb..1acf11ba0 100644
--- a/front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
+++ b/front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
@@ -9,7 +9,7 @@ import { rgba } from '@/ui/theme/constants/colors';
 
 import { useDragSelect } from '../hooks/useDragSelect';
 
-type OwnProps = {
+type DragSelectProps = {
   dragSelectable: RefObject<HTMLElement>;
   onDragSelectionChange: (id: string, selected: boolean) => void;
   onDragSelectionStart?: () => void;
@@ -19,7 +19,7 @@ export const DragSelect = ({
   dragSelectable,
   onDragSelectionChange,
   onDragSelectionStart,
-}: OwnProps) => {
+}: DragSelectProps) => {
   const theme = useTheme();
   const { isDragSelectionStartEnabled } = useDragSelect();
   const { DragSelection } = useSelectionContainer({
diff --git a/front/src/modules/ui/utilities/hotkey/components/HotkeyEffect.tsx b/front/src/modules/ui/utilities/hotkey/components/HotkeyEffect.tsx
index bfc314471..1f2e604b5 100644
--- a/front/src/modules/ui/utilities/hotkey/components/HotkeyEffect.tsx
+++ b/front/src/modules/ui/utilities/hotkey/components/HotkeyEffect.tsx
@@ -2,7 +2,7 @@ import { Keys } from 'react-hotkeys-hook';
 
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
-type OwnProps = {
+type HotkeyEffectProps = {
   hotkey: {
     key: Keys;
     scope: string;
@@ -10,7 +10,10 @@ type OwnProps = {
   onHotkeyTriggered: () => void;
 };
 
-export const HotkeyEffect = ({ hotkey, onHotkeyTriggered }: OwnProps) => {
+export const HotkeyEffect = ({
+  hotkey,
+  onHotkeyTriggered,
+}: HotkeyEffectProps) => {
   useScopedHotkeys(hotkey.key, () => onHotkeyTriggered(), hotkey.scope, [
     onHotkeyTriggered,
   ]);
diff --git a/front/src/modules/ui/utilities/page-title/PageTitle.tsx b/front/src/modules/ui/utilities/page-title/PageTitle.tsx
index dcd34060f..362002ce4 100644
--- a/front/src/modules/ui/utilities/page-title/PageTitle.tsx
+++ b/front/src/modules/ui/utilities/page-title/PageTitle.tsx
@@ -1,11 +1,13 @@
 import { Helmet } from 'react-helmet-async';
 
-type OwnProps = {
+type PageTitleProps = {
   title: string;
 };
 
-export const PageTitle = ({ title }: OwnProps) => (
-  <Helmet>
-    <title>{title}</title>
-  </Helmet>
-);
+export const PageTitle = (props: PageTitleProps) => {
+  return (
+    <Helmet>
+      <title>{props.title}</title>
+    </Helmet>
+  );
+};
diff --git a/front/src/modules/ui/view-bar/components/GenericEntityFilterChip.tsx b/front/src/modules/ui/view-bar/components/GenericEntityFilterChip.tsx
index fa483fe2b..baad6511f 100644
--- a/front/src/modules/ui/view-bar/components/GenericEntityFilterChip.tsx
+++ b/front/src/modules/ui/view-bar/components/GenericEntityFilterChip.tsx
@@ -3,12 +3,15 @@ import { IconComponent } from '@/ui/icon/types/IconComponent';
 
 import { Filter } from '../types/Filter';
 
-type OwnProps = {
+type GenericEntityFilterChipProps = {
   filter: Filter;
   Icon?: IconComponent;
 };
 
-export const GenericEntityFilterChip = ({ filter, Icon }: OwnProps) => (
+export const GenericEntityFilterChip = ({
+  filter,
+  Icon,
+}: GenericEntityFilterChipProps) => (
   <EntityChip
     entityId={filter.value}
     name={filter.displayValue}
diff --git a/front/src/modules/ui/view-bar/components/SortOrFilterChip.tsx b/front/src/modules/ui/view-bar/components/SortOrFilterChip.tsx
index 134d5d3c7..63e8774be 100644
--- a/front/src/modules/ui/view-bar/components/SortOrFilterChip.tsx
+++ b/front/src/modules/ui/view-bar/components/SortOrFilterChip.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { IconX } from '@/ui/icon/index';
 import { IconComponent } from '@/ui/icon/types/IconComponent';
 
-type OwnProps = {
+type SortOrFilterChipProps = {
   labelKey?: string;
   labelValue: string;
   Icon?: IconComponent;
@@ -61,7 +61,7 @@ const SortOrFilterChip = ({
   onRemove,
   isSort,
   testId,
-}: OwnProps) => {
+}: SortOrFilterChipProps) => {
   const theme = useTheme();
   return (
     <StyledChip isSort={isSort}>
diff --git a/front/src/modules/ui/view-bar/components/ViewBarDropdownButton.tsx b/front/src/modules/ui/view-bar/components/ViewBarDropdownButton.tsx
index 58d51f660..998b7bb3d 100644
--- a/front/src/modules/ui/view-bar/components/ViewBarDropdownButton.tsx
+++ b/front/src/modules/ui/view-bar/components/ViewBarDropdownButton.tsx
@@ -4,7 +4,7 @@ import { Placement } from '@floating-ui/react';
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
-type DropdownButtonProps = {
+type ViewBarDropdownButtonProps = {
   buttonComponent: JSX.Element | JSX.Element[];
   dropdownComponents: JSX.Element | JSX.Element[];
   dropdownId: string;
@@ -29,7 +29,7 @@ export const ViewBarDropdownButton = ({
   onClickOutside,
   onClose,
   onOpen,
-}: DropdownButtonProps) => {
+}: ViewBarDropdownButtonProps) => {
   return (
     <DropdownMenu
       clickableComponent={buttonComponent}
diff --git a/front/src/modules/workspace/components/WorkspaceInviteLink.tsx b/front/src/modules/workspace/components/WorkspaceInviteLink.tsx
index e0096b508..7baca18fb 100644
--- a/front/src/modules/workspace/components/WorkspaceInviteLink.tsx
+++ b/front/src/modules/workspace/components/WorkspaceInviteLink.tsx
@@ -17,11 +17,13 @@ const StyledLinkContainer = styled.div`
   margin-right: ${({ theme }) => theme.spacing(2)};
 `;
 
-type OwnProps = {
+type WorkspaceInviteLinkProps = {
   inviteLink: string;
 };
 
-export const WorkspaceInviteLink = ({ inviteLink }: OwnProps) => {
+export const WorkspaceInviteLink = ({
+  inviteLink,
+}: WorkspaceInviteLinkProps) => {
   const theme = useTheme();
 
   const { enqueueSnackBar } = useSnackBar();
diff --git a/front/src/modules/workspace/components/WorkspaceMemberCard.tsx b/front/src/modules/workspace/components/WorkspaceMemberCard.tsx
index 672481c23..040713e9b 100644
--- a/front/src/modules/workspace/components/WorkspaceMemberCard.tsx
+++ b/front/src/modules/workspace/components/WorkspaceMemberCard.tsx
@@ -30,7 +30,7 @@ const StyledEmailText = styled.span`
   color: ${({ theme }) => theme.font.color.tertiary};
 `;
 
-type OwnProps = {
+type WorkspaceMemberCardProps = {
   workspaceMember: {
     user: Pick<
       User,
@@ -43,7 +43,7 @@ type OwnProps = {
 export const WorkspaceMemberCard = ({
   workspaceMember,
   accessory,
-}: OwnProps) => (
+}: WorkspaceMemberCardProps) => (
   <StyledContainer>
     <Avatar
       avatarUrl={workspaceMember.user.avatarUrl}
diff --git a/front/src/testing/FullHeightStorybookLayout.tsx b/front/src/testing/FullHeightStorybookLayout.tsx
index dacbf93c3..011272438 100644
--- a/front/src/testing/FullHeightStorybookLayout.tsx
+++ b/front/src/testing/FullHeightStorybookLayout.tsx
@@ -7,10 +7,10 @@ const StyledLayout = styled.div`
   width: calc(100vw - 32px);
 `;
 
-type OwnProps = {
+type FullHeightStorybookLayoutProps = {
   children: JSX.Element;
 };
 
-export const FullHeightStorybookLayout = ({ children }: OwnProps) => (
-  <StyledLayout>{children}</StyledLayout>
-);
+export const FullHeightStorybookLayout = ({
+  children,
+}: FullHeightStorybookLayoutProps) => <StyledLayout>{children}</StyledLayout>;
diff --git a/packages/eslint-plugin-twenty-ts/dist/index.js b/packages/eslint-plugin-twenty-ts/dist/index.js
index ceb667f37..2fd0edf8b 100644
--- a/packages/eslint-plugin-twenty-ts/dist/index.js
+++ b/packages/eslint-plugin-twenty-ts/dist/index.js
@@ -8,5 +8,6 @@ module.exports = {
         "matching-state-variable": require("./src/rules/matching-state-variable"),
         "sort-css-properties-alphabetically": require("./src/rules/sort-css-properties-alphabetically"),
         "styled-components-prefixed-with-styled": require("./src/rules/styled-components-prefixed-with-styled"),
+        "component-props-naming": require("./src/rules/component-props-naming"),
     },
 };
diff --git a/packages/eslint-plugin-twenty-ts/dist/src/rules/component-props-naming.js b/packages/eslint-plugin-twenty-ts/dist/src/rules/component-props-naming.js
new file mode 100644
index 000000000..16b32f813
--- /dev/null
+++ b/packages/eslint-plugin-twenty-ts/dist/src/rules/component-props-naming.js
@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("@typescript-eslint/utils");
+const createRule = utils_1.ESLintUtils.RuleCreator(() => "https://docs.twenty.com/developer/frontend/style-guide#props");
+const checkPropsTypeName = (node, context, functionName) => {
+    const expectedPropTypeName = `${functionName}Props`;
+    if (/^[A-Z]/.test(functionName)) {
+        node.params.forEach((param) => {
+            var _a, _b;
+            if ((param.type === utils_1.AST_NODE_TYPES.ObjectPattern ||
+                param.type === utils_1.AST_NODE_TYPES.Identifier) &&
+                ((_b = (_a = param.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type) ===
+                    utils_1.AST_NODE_TYPES.TSTypeReference &&
+                param.typeAnnotation.typeAnnotation.typeName.type ===
+                    utils_1.AST_NODE_TYPES.Identifier) {
+                const { typeName } = param.typeAnnotation.typeAnnotation;
+                const actualPropTypeName = typeName.name;
+                if (actualPropTypeName !== expectedPropTypeName) {
+                    context.report({
+                        node: param,
+                        messageId: "invalidPropsTypeName",
+                        data: { expectedPropTypeName, actualPropTypeName },
+                        fix: (fixer) => fixer.replaceText(typeName, expectedPropTypeName),
+                    });
+                }
+            }
+        });
+    }
+};
+const componentPropsNamingRule = createRule({
+    create: (context) => {
+        return {
+            ArrowFunctionExpression: (node) => {
+                var _a, _b;
+                if (node.parent.type === utils_1.AST_NODE_TYPES.VariableDeclarator &&
+                    node.parent.id.type === utils_1.AST_NODE_TYPES.Identifier) {
+                    const functionName = (_b = (_a = node.parent) === null || _a === void 0 ? void 0 : _a.id) === null || _b === void 0 ? void 0 : _b.name;
+                    checkPropsTypeName(node, context, functionName);
+                }
+            },
+            FunctionDeclaration: (node) => {
+                var _a;
+                if ((_a = node.id) === null || _a === void 0 ? void 0 : _a.name) {
+                    const functionName = node.id.name;
+                    checkPropsTypeName(node, context, functionName);
+                }
+            },
+        };
+    },
+    name: "component-props-naming",
+    meta: {
+        type: "problem",
+        docs: {
+            description: "Ensure component props follow naming convention",
+            recommended: "recommended",
+        },
+        fixable: "code",
+        schema: [],
+        messages: {
+            invalidPropsTypeName: "Expected prop type to be '{{ expectedPropTypeName }}' but found '{{ actualPropTypeName }}'",
+        },
+    },
+    defaultOptions: [],
+});
+module.exports = componentPropsNamingRule;
+exports.default = componentPropsNamingRule;
diff --git a/packages/eslint-plugin-twenty-ts/dist/src/tests/component-props-naming.spec.js b/packages/eslint-plugin-twenty-ts/dist/src/tests/component-props-naming.spec.js
new file mode 100644
index 000000000..e42778378
--- /dev/null
+++ b/packages/eslint-plugin-twenty-ts/dist/src/tests/component-props-naming.spec.js
@@ -0,0 +1,54 @@
+import { RuleTester } from "@typescript-eslint/rule-tester";
+
+import componentPropsNamingRule from "../rules/component-props.naming";
+
+const ruleTester = new RuleTester({
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+    tsconfigRootDir: __dirname,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run("component-props-naming", componentPropsNamingRule, {
+  valid: [
+    {
+      code: `
+      type MyComponentProps = { id: number; };
+      const MyComponent: React.FC<MyComponentProps> = (props) => <div>{props.id}</div>;
+      `,
+    },
+    {
+      code: `
+      type AnotherComponentProps = { message: string; };
+      export const AnotherComponent: React.FC<AnotherComponentProps> = (props) => <div>{props.message}</div>;
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: `
+      type UnmatchedComponentProps = { id: number; };
+      `,
+      errors: [
+        {
+          messageId: "invalidPropsTypeName",
+        },
+      ],
+    },
+    {
+      code: `
+      type UnmatchedComponentProps = { message: string; };
+      const DifferentComponent: React.FC<UnmatchedComponentProps> = (props) => <div>{props.message}</div>;
+      `,
+      errors: [
+        {
+          messageId: "invalidPropsTypeName",
+        },
+      ],
+    },
+  ],
+});
diff --git a/packages/eslint-plugin-twenty/index.ts b/packages/eslint-plugin-twenty/index.ts
index 9e2f0b9c0..2ea148937 100644
--- a/packages/eslint-plugin-twenty/index.ts
+++ b/packages/eslint-plugin-twenty/index.ts
@@ -6,5 +6,6 @@ module.exports = {
     "matching-state-variable": require("./src/rules/matching-state-variable"),
     "sort-css-properties-alphabetically": require("./src/rules/sort-css-properties-alphabetically"),
     "styled-components-prefixed-with-styled": require("./src/rules/styled-components-prefixed-with-styled"),
+    "component-props-naming": require("./src/rules/component-props-naming"),
   },
 };
diff --git a/packages/eslint-plugin-twenty/src/rules/component-props-naming.ts b/packages/eslint-plugin-twenty/src/rules/component-props-naming.ts
new file mode 100644
index 000000000..de3b67430
--- /dev/null
+++ b/packages/eslint-plugin-twenty/src/rules/component-props-naming.ts
@@ -0,0 +1,84 @@
+import {
+  AST_NODE_TYPES,
+  ESLintUtils,
+  TSESTree,
+} from "@typescript-eslint/utils";
+import { RuleContext } from "@typescript-eslint/utils/ts-eslint";
+
+const createRule = ESLintUtils.RuleCreator(
+  () => "https://docs.twenty.com/developer/frontend/style-guide#props",
+);
+
+const checkPropsTypeName = (
+  node: TSESTree.FunctionDeclaration | TSESTree.ArrowFunctionExpression,
+  context: Readonly<RuleContext<"invalidPropsTypeName", never[]>>,
+  functionName: string,
+) => {
+  const expectedPropTypeName = `${functionName}Props`;
+
+  if (/^[A-Z]/.test(functionName)) {
+    node.params.forEach((param) => {
+      if (
+        (param.type === AST_NODE_TYPES.ObjectPattern ||
+          param.type === AST_NODE_TYPES.Identifier) &&
+        param.typeAnnotation?.typeAnnotation?.type ===
+          AST_NODE_TYPES.TSTypeReference &&
+        param.typeAnnotation.typeAnnotation.typeName.type ===
+          AST_NODE_TYPES.Identifier
+      ) {
+        const { typeName } = param.typeAnnotation.typeAnnotation;
+        const actualPropTypeName = typeName.name;
+        if (actualPropTypeName !== expectedPropTypeName) {
+          context.report({
+            node: param,
+            messageId: "invalidPropsTypeName",
+            data: { expectedPropTypeName, actualPropTypeName },
+            fix: (fixer) => fixer.replaceText(typeName, expectedPropTypeName),
+          });
+        }
+      }
+    });
+  }
+};
+
+const componentPropsNamingRule = createRule({
+  create: (context) => {
+    return {
+      ArrowFunctionExpression: (node) => {
+        if (
+          node.parent.type === AST_NODE_TYPES.VariableDeclarator &&
+          node.parent.id.type === AST_NODE_TYPES.Identifier
+        ) {
+          const functionName = node.parent?.id?.name;
+
+          checkPropsTypeName(node, context, functionName);
+        }
+      },
+      FunctionDeclaration: (node) => {
+        if (node.id?.name) {
+          const functionName = node.id.name;
+
+          checkPropsTypeName(node, context, functionName);
+        }
+      },
+    };
+  },
+  name: "component-props-naming",
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Ensure component props follow naming convention",
+      recommended: "recommended",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      invalidPropsTypeName:
+        "Expected prop type to be '{{ expectedPropTypeName }}' but found '{{ actualPropTypeName }}'",
+    },
+  },
+  defaultOptions: [],
+});
+
+module.exports = componentPropsNamingRule;
+export default componentPropsNamingRule;
diff --git a/packages/eslint-plugin-twenty/src/tests/component-props-naming.spec.ts b/packages/eslint-plugin-twenty/src/tests/component-props-naming.spec.ts
new file mode 100644
index 000000000..881358d56
--- /dev/null
+++ b/packages/eslint-plugin-twenty/src/tests/component-props-naming.spec.ts
@@ -0,0 +1,47 @@
+import { RuleTester } from "@typescript-eslint/rule-tester";
+
+import componentPropsNamingRule from "../rules/component-props-naming";
+
+const ruleTester = new RuleTester({
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+    tsconfigRootDir: __dirname,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run("component-props-naming", componentPropsNamingRule, {
+  valid: [
+    {
+      code: "export const MyComponent= (props: MyComponentProps) => <div>{props.message}</div>;",
+    },
+    {
+      code: "export const MyComponent = ({ message }: MyComponentProps) => <div>{message}</div>;",
+    },
+  ],
+  invalid: [
+    {
+      code: "export const MyComponent = (props: OwnProps) => <div>{props.message}</div>;",
+      errors: [
+        {
+          messageId: "invalidPropsTypeName",
+        },
+      ],
+      output:
+        "export const MyComponent = (props: MyComponentProps) => <div>{props.message}</div>;",
+    },
+    {
+      code: "export const MyComponent = ({ message }: OwnProps) => <div>{message}</div>;",
+      errors: [
+        {
+          messageId: "invalidPropsTypeName",
+        },
+      ],
+      output:
+        "export const MyComponent = ({ message }: MyComponentProps) => <div>{message}</div>;",
+    },
+  ],
+});