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>

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,

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

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

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

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

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

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

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

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

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

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

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 (

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"

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>

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

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"

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

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>

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

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

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

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}

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

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>

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

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 (

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

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

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 (

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 (

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 (

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 (

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

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 (

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

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,

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

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

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;

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;

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,

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

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(

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}

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

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

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 (

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

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

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>

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

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>

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

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

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

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

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

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

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

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}