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