Chore(front): Create a custom eslint rule for Props naming (#1904)

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

front/src/modules/activities/comment/Comment.tsx

@@ -4,7 +4,7 @@ import { CommentForDrawer } from '../types/CommentForDrawer';
 
 import { CommentHeader } from './CommentHeader';
 
-type OwnProps = {
+type CommentProps = {
   comment: CommentForDrawer;
   actionBar?: React.ReactNode;
 };
@@ -30,7 +30,7 @@ const StyledCommentBody = styled.div`
   text-align: left;
 `;
 
-export const Comment = ({ comment, actionBar }: OwnProps) => (
+export const Comment = ({ comment, actionBar }: CommentProps) => (
   <StyledContainer>
     <CommentHeader comment={comment} actionBar={actionBar} />
     <StyledCommentBody>{comment.body}</StyledCommentBody>

front/src/modules/activities/comment/CommentHeader.tsx

@@ -9,7 +9,7 @@ import {
 
 import { CommentForDrawer } from '../types/CommentForDrawer';
 
-type OwnProps = {
+type CommentHeaderProps = {
   comment: Pick<CommentForDrawer, 'id' | 'author' | 'createdAt'>;
   actionBar?: React.ReactNode;
 };
@@ -62,7 +62,7 @@ const StyledTooltip = styled(Tooltip)`
   padding: 8px;
 `;
 
-export const CommentHeader = ({ comment, actionBar }: OwnProps) => {
+export const CommentHeader = ({ comment, actionBar }: CommentHeaderProps) => {
   const beautifiedCreatedAt = beautifyPastDateRelativeToNow(comment.createdAt);
   const exactCreatedAt = beautifyExactDateTime(comment.createdAt);
   const showDate = beautifiedCreatedAt !== '';

front/src/modules/activities/components/ActivityAssigneePicker.tsx

@@ -18,7 +18,7 @@ import {
 import { ACTIVITY_UPDATE_FRAGMENT } from '../graphql/fragments/activityUpdateFragment';
 import { GET_ACTIVITIES } from '../graphql/queries/getActivities';
 
-export type OwnProps = {
+export type ActivityAssigneePickerProps = {
   activity: Pick<Activity, 'id'> & {
     accountOwner?: Pick<User, 'id' | 'displayName'> | null;
   };
@@ -34,7 +34,7 @@ export const ActivityAssigneePicker = ({
   activity,
   onSubmit,
   onCancel,
-}: OwnProps) => {
+}: ActivityAssigneePickerProps) => {
   const [relationPickerSearchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );

front/src/modules/activities/components/ActivityBodyEditor.tsx

@@ -14,12 +14,15 @@ const StyledBlockNoteStyledContainer = styled.div`
   width: 100%;
 `;
 
-type OwnProps = {
+type ActivityBodyEditorProps = {
   activity: Pick<Activity, 'id' | 'body'>;
   onChange?: (activityBody: string) => void;
 };
 
-export const ActivityBodyEditor = ({ activity, onChange }: OwnProps) => {
+export const ActivityBodyEditor = ({
+  activity,
+  onChange,
+}: ActivityBodyEditorProps) => {
   const [updateActivityMutation] = useUpdateActivityMutation();
 
   const client = useApolloClient();

front/src/modules/activities/components/ActivityComments.tsx

@@ -16,7 +16,7 @@ import { Comment } from '../comment/Comment';
 import { GET_ACTIVITY } from '../graphql/queries/getActivity';
 import { CommentForDrawer } from '../types/CommentForDrawer';
 
-type OwnProps = {
+type ActivityCommentsProps = {
   activity: Pick<Activity, 'id'> & {
     comments: Array<CommentForDrawer>;
   };
@@ -62,7 +62,7 @@ const StyledThreadCommentTitle = styled.div`
 export const ActivityComments = ({
   activity,
   scrollableContainerRef,
-}: OwnProps) => {
+}: ActivityCommentsProps) => {
   const [createCommentMutation] = useCreateCommentMutation();
   const currentUser = useRecoilValue(currentUserState);
 

front/src/modules/activities/components/ActivityEditor.tsx

@@ -60,7 +60,7 @@ const StyledTopContainer = styled.div`
   padding: 24px 24px 24px 48px;
 `;
 
-type OwnProps = {
+type ActivityEditorProps = {
   activity: Pick<
     Activity,
     'id' | 'title' | 'body' | 'type' | 'completedAt' | 'dueAt'
@@ -82,7 +82,7 @@ export const ActivityEditor = ({
   activity,
   showComment = true,
   autoFillTitle = false,
-}: OwnProps) => {
+}: ActivityEditorProps) => {
   const [hasUserManuallySetTitle, setHasUserManuallySetTitle] =
     useState<boolean>(false);
 

front/src/modules/activities/components/ActivityTitle.tsx

@@ -44,7 +44,7 @@ const StyledCheckboxContainer = styled.div`
   justify-content: center;
 `;
 
-type OwnProps = {
+type ActivityTitleProps = {
   title: string;
   type: ActivityType;
   completed: boolean;
@@ -58,7 +58,7 @@ export const ActivityTitle = ({
   type,
   onTitleChange,
   onCompletionChange,
-}: OwnProps) => (
+}: ActivityTitleProps) => (
   <StyledContainer>
     {type === ActivityType.Task && (
       <StyledCheckboxContainer onClick={() => onCompletionChange(!completed)}>

front/src/modules/activities/components/ActivityTypeDropdown.tsx

@@ -9,11 +9,13 @@ import {
 import { IconCheckbox, IconNotes } from '@/ui/icon';
 import { Activity, ActivityType } from '~/generated/graphql';
 
-type OwnProps = {
+type ActivityTypeDropdownProps = {
   activity: Pick<Activity, 'type'>;
 };
 
-export const ActivityTypeDropdown = ({ activity }: OwnProps) => {
+export const ActivityTypeDropdown = ({
+  activity,
+}: ActivityTypeDropdownProps) => {
   const theme = useTheme();
   return (
     <Chip

front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx

@@ -7,13 +7,15 @@ import { InlineCellHotkeyScope } from '@/ui/inline-cell/types/InlineCellHotkeySc
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { Company, User, useUpdateActivityMutation } from '~/generated/graphql';
 
-type OwnProps = {
+type ActivityAssigneeEditableFieldProps = {
   activity: Pick<Company, 'id' | 'accountOwnerId'> & {
     assignee?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
   };
 };
 
-export const ActivityAssigneeEditableField = ({ activity }: OwnProps) => {
+export const ActivityAssigneeEditableField = ({
+  activity,
+}: ActivityAssigneeEditableFieldProps) => {
   return (
     <FieldContext.Provider
       value={{

front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableFieldEditMode.tsx

@@ -10,7 +10,7 @@ const StyledContainer = styled.div`
   top: -8px;
 `;
 
-export type OwnProps = {
+export type ActivityAssigneeEditableFieldEditModeProps = {
   activity: Pick<Activity, 'id'> & {
     assignee?: Pick<User, 'id' | 'displayName'> | null;
   };
@@ -22,7 +22,7 @@ export const ActivityAssigneeEditableFieldEditMode = ({
   activity,
   onSubmit,
   onCancel,
-}: OwnProps) => {
+}: ActivityAssigneeEditableFieldEditModeProps) => {
   const { closeInlineCell: closeEditableField } = useInlineCell();
 
   const handleSubmit = () => {

front/src/modules/activities/editable-fields/components/ActivityEditorDateField.tsx

@@ -7,11 +7,13 @@ import { InlineCellHotkeyScope } from '@/ui/inline-cell/types/InlineCellHotkeySc
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useUpdateActivityMutation } from '~/generated/graphql';
 
-type OwnProps = {
+type ActivityEditorDateFieldProps = {
   activityId: string;
 };
 
-export const ActivityEditorDateField = ({ activityId }: OwnProps) => {
+export const ActivityEditorDateField = ({
+  activityId,
+}: ActivityEditorDateFieldProps) => {
   return (
     <RecoilScope>
       <FieldContext.Provider

front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx

@@ -8,7 +8,7 @@ import { Activity, ActivityTarget, Company, Person } from '~/generated/graphql';
 
 import { ActivityRelationEditableFieldEditMode } from './ActivityRelationEditableFieldEditMode';
 
-type OwnProps = {
+type ActivityRelationEditableFieldProps = {
   activity?: Pick<Activity, 'id'> & {
     activityTargets?: Array<
       Pick<ActivityTarget, 'id' | 'personId' | 'companyId'> & {
@@ -19,7 +19,9 @@ type OwnProps = {
   };
 };
 
-export const ActivityRelationEditableField = ({ activity }: OwnProps) => {
+export const ActivityRelationEditableField = ({
+  activity,
+}: ActivityRelationEditableFieldProps) => {
   return (
     <RecoilScope CustomRecoilScopeContext={FieldRecoilScopeContext}>
       <RecoilScope>

front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx

@@ -10,7 +10,7 @@ import { MultipleEntitySelect } from '@/ui/input/relation-picker/components/Mult
 import { Activity, ActivityTarget } from '~/generated/graphql';
 import { assertNotNull } from '~/utils/assert';
 
-type OwnProps = {
+type ActivityRelationEditableFieldEditModeProps = {
   activity?: Pick<Activity, 'id'> & {
     activityTargets?: Array<
       Pick<ActivityTarget, 'id' | 'personId' | 'companyId'>
@@ -26,7 +26,7 @@ const StyledSelectContainer = styled.div`
 
 export const ActivityRelationEditableFieldEditMode = ({
   activity,
-}: OwnProps) => {
+}: ActivityRelationEditableFieldEditModeProps) => {
   const [searchFilter, setSearchFilter] = useState('');
 
   const initialPeopleIds = useMemo(

front/src/modules/activities/notes/components/NoteList.tsx

@@ -5,7 +5,7 @@ import { NoteForList } from '../../types/NoteForList';
 
 import { NoteCard } from './NoteCard';
 
-type OwnProps = {
+type NoteListProps = {
   title: string;
   notes: NoteForList[];
   button?: ReactElement | false;
@@ -47,7 +47,7 @@ const StyledNoteContainer = styled.div`
   width: 100%;
 `;
 
-export const NoteList = ({ title, notes, button }: OwnProps) => (
+export const NoteList = ({ title, notes, button }: NoteListProps) => (
   <>
     {notes && notes.length > 0 && (
       <StyledContainer>

front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx

@@ -10,11 +10,11 @@ import { IconTrash } from '@/ui/icon';
 import { isRightDrawerOpenState } from '@/ui/right-drawer/states/isRightDrawerOpenState';
 import { useDeleteActivityMutation } from '~/generated/graphql';
 
-type OwnProps = {
+type ActivityActionBarProps = {
   activityId: string;
 };
 
-export const ActivityActionBar = ({ activityId }: OwnProps) => {
+export const ActivityActionBar = ({ activityId }: ActivityActionBarProps) => {
   const [deleteActivityMutation] = useDeleteActivityMutation();
   const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
 

front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx

@@ -18,7 +18,7 @@ const StyledContainer = styled.div`
   position: relative;
 `;
 
-type OwnProps = {
+type RightDrawerActivityProps = {
   activityId: string;
   showComment?: boolean;
   autoFillTitle?: boolean;
@@ -28,7 +28,7 @@ export const RightDrawerActivity = ({
   activityId,
   showComment = true,
   autoFillTitle = false,
-}: OwnProps) => {
+}: RightDrawerActivityProps) => {
   const [, setEntityFields] = useRecoilState(
     entityFieldsFamilyState(activityId),
   );

front/src/modules/activities/table/components/CellCommentChip.tsx

@@ -2,10 +2,12 @@ import styled from '@emotion/styled';
 
 import { CommentChip, CommentChipProps } from './CommentChip';
 
+type CellCommentChipProps = CommentChipProps;
+
 // TODO: tie those fixed values to the other components in the cell
 const StyledCellWrapper = styled.div``;
 
-export const CellCommentChip = (props: CommentChipProps) => {
+export const CellCommentChip = (props: CellCommentChipProps) => {
   if (props.count === 0) return null;
 
   return (

front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -13,7 +13,7 @@ import { ActivityType } from '~/generated/graphql';
 import { AddTaskButton } from './AddTaskButton';
 import { TaskList } from './TaskList';
 
-type OwnProps = {
+type TaskGroupsProps = {
   entity?: ActivityTargetableEntity;
   showAddButton?: boolean;
 };
@@ -52,7 +52,7 @@ const StyledContainer = styled.div`
   flex-direction: column;
 `;
 
-export const TaskGroups = ({ entity, showAddButton }: OwnProps) => {
+export const TaskGroups = ({ entity, showAddButton }: TaskGroupsProps) => {
   const {
     todayOrPreviousTasks,
     upcomingTasks,

front/src/modules/activities/tasks/components/TaskList.tsx

@@ -5,7 +5,7 @@ import { TaskForList } from '@/activities/types/TaskForList';
 
 import { TaskRow } from './TaskRow';
 
-type OwnProps = {
+type TaskListProps = {
   title?: string;
   tasks: TaskForList[];
   button?: ReactElement | false;
@@ -46,7 +46,7 @@ const StyledTaskRows = styled.div`
   width: 100%;
 `;
 
-export const TaskList = ({ title, tasks, button }: OwnProps) => (
+export const TaskList = ({ title, tasks, button }: TaskListProps) => (
   <>
     {tasks && tasks.length > 0 && (
       <StyledContainer>

front/src/modules/activities/timeline/components/TimelineActivity.tsx

@@ -116,7 +116,7 @@ const StyledTimelineItemContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(4)};
 `;
 
-type OwnProps = {
+type TimelineActivityProps = {
   activity: Pick<
     Activity,
     'id' | 'title' | 'body' | 'createdAt' | 'completedAt' | 'type'
@@ -125,7 +125,7 @@ type OwnProps = {
   };
 };
 
-export const TimelineActivity = ({ activity }: OwnProps) => {
+export const TimelineActivity = ({ activity }: TimelineActivityProps) => {
   const beautifiedCreatedAt = beautifyPastDateRelativeToNow(activity.createdAt);
   const exactCreatedAt = beautifyExactDateTime(activity.createdAt);
   const body = JSON.parse(activity.body ?? '{}')[0]?.content[0]?.text;

front/src/modules/activities/timeline/components/TimelineActivityCardFooter.tsx

@@ -4,7 +4,7 @@ import { UserChip } from '@/users/components/UserChip';
 import { Activity, User } from '~/generated/graphql';
 import { beautifyExactDate } from '~/utils/date-utils';
 
-type OwnProps = {
+type TimelineActivityCardFooterProps = {
   activity: Pick<Activity, 'id' | 'dueAt'> & {
     assignee?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
   };
@@ -26,7 +26,9 @@ const StyledVerticalSeparator = styled.div`
   height: 24px;
 `;
 
-export const TimelineActivityCardFooter = ({ activity }: OwnProps) => (
+export const TimelineActivityCardFooter = ({
+  activity,
+}: TimelineActivityCardFooterProps) => (
   <>
     {(activity.assignee || activity.dueAt) && (
       <StyledContainer>

front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx

@@ -30,7 +30,7 @@ const StyledCheckboxContainer = styled.div<{ hasCheckbox?: boolean }>`
   justify-content: center;
 `;
 
-type OwnProps = {
+type TimelineActivityTitleProps = {
   title: string;
   completed?: boolean;
   type: ActivityType;
@@ -42,7 +42,7 @@ export const TimelineActivityTitle = ({
   completed,
   type,
   onCompletionChange,
-}: OwnProps) => (
+}: TimelineActivityTitleProps) => (
   <StyledTitleContainer>
     {type === ActivityType.Task && (
       <StyledCheckboxContainer