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/spreadsheet-import/components/Heading.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-export type Props = React.ComponentProps<'div'> & {
+export type HeadingProps = React.ComponentProps<'div'> & {
   title: string;
   description?: string;
 };
@@ -27,7 +27,7 @@ const StyledDescription = styled.span`
   text-align: center;
 `;
 
-export const Heading = ({ title, description, ...props }: Props) => (
+export const Heading = ({ title, description, ...props }: HeadingProps) => (
   // eslint-disable-next-line twenty/no-spread-props
   <StyledContainer {...props}>
     <StyledTitle>{title}</StyledTitle>

front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -27,7 +27,7 @@ const StyledFloatingDropdown = styled.div`
   z-index: ${({ theme }) => theme.lastLayerZIndex};
 `;
 
-interface Props {
+interface MatchColumnSelectProps {
   onChange: (value: ReadonlyDeep<SelectOption> | null) => void;
   value?: ReadonlyDeep<SelectOption>;
   options: readonly ReadonlyDeep<SelectOption>[];
@@ -40,7 +40,7 @@ export const MatchColumnSelect = ({
   value,
   options: initialOptions,
   placeholder,
-}: Props) => {
+}: MatchColumnSelectProps) => {
   const theme = useTheme();
 
   const dropdownContainerRef = useRef<HTMLDivElement>(null);

front/src/modules/spreadsheet-import/components/ModalWrapper.tsx

@@ -26,13 +26,17 @@ const StyledRtlLtr = styled.div`
   flex-direction: column;
 `;
 
-type Props = {
+type ModalWrapperProps = {
   children: React.ReactNode;
   isOpen: boolean;
   onClose: () => void;
 };
 
-export const ModalWrapper = ({ children, isOpen, onClose }: Props) => {
+export const ModalWrapper = ({
+  children,
+  isOpen,
+  onClose,
+}: ModalWrapperProps) => {
   const { rtl } = useSpreadsheetImportInternal();
 
   return (

front/src/modules/spreadsheet-import/components/Table.tsx

@@ -106,12 +106,12 @@ const StyledDataGrid = styled(DataGrid)`
   }
 ` as typeof DataGrid;
 
-type Props<Data> = DataGridProps<Data> & {
+type TableProps<Data> = DataGridProps<Data> & {
   rowHeight?: number;
   hiddenHeader?: boolean;
 };
 
-export const Table = <Data,>(props: Props<Data>) => {
+export const Table = <Data,>(props: TableProps<Data>) => {
   const { rtl } = useSpreadsheetImportInternal();
 
   return (