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>

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 />
 );
 ```

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 }} />;
 };
 ```

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 }],

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>

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 !== '';

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,
   );

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();

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);
 

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);
 

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)}>

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

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={{

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 = () => {

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

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>

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(

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>

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);
 

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),
   );

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 (

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,

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>

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;

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>

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

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

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>

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>
 );

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>

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} />
+);

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;
   }

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}`}

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);
 

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();

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: [],

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();

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,
   );

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}`}

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,
   );

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 ?? '');

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;
 

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>

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);

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 (

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 (

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 (

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);

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);

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]),
   );

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 (

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 (

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]);

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>(

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(

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]);
 

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>();

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) => {

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':

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(

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);

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}>

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 (

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

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}

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();

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);

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} />
 );

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} />}

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();

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();
 

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);

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}

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();

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 (

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 (

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>
 );

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}`}

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>

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>

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()}

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>
 );

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();
   };

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();

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();

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();

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();
 

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();
 

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();

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();
 

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();
 

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();
 

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();

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();

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();

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();
 

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;
 

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 = () => {

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}

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>

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,