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 (

front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx

@@ -17,6 +17,7 @@ export const defaultSpreadsheetImportProps: Partial<SpreadsheetOptions<any>> = {
 } as const;
 
 export const SpreadsheetImport = <T extends string>(
+  // eslint-disable-next-line twenty/component-props-naming
   props: SpreadsheetOptions<T>,
 ) => {
   return (

front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx

@@ -44,7 +44,7 @@ const StyledColumn = styled.span`
   font-weight: ${({ theme }) => theme.font.weight.regular};
 `;
 
-export type MatchColumnsProps<T extends string> = {
+export type MatchColumnsStepProps<T extends string> = {
   data: RawData[];
   headerValues: RawData;
   onContinue: (data: any[], rawData: RawData[], columns: Columns<T>) => void;
@@ -111,7 +111,7 @@ export const MatchColumnsStep = <T extends string>({
   data,
   headerValues,
   onContinue,
-}: MatchColumnsProps<T>) => {
+}: MatchColumnsStepProps<T>) => {
   const { enqueueDialog } = useDialog();
   const { enqueueSnackBar } = useSnackBar();
   const dataExample = data.slice(0, 2);

front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx

@@ -24,7 +24,7 @@ const StyledSelectLabel = styled.span`
   padding-top: ${({ theme }) => theme.spacing(1)};
 `;
 
-interface Props<T> {
+interface SubMatchingSelectProps<T> {
   option: MatchedOptions<T> | Partial<MatchedOptions<T>>;
   column: MatchedSelectColumn<T> | MatchedSelectOptionsColumn<T>;
   onSubChange: (val: T, index: number, option: string) => void;
@@ -34,7 +34,7 @@ export const SubMatchingSelect = <T extends string>({
   option,
   column,
   onSubChange,
-}: Props<T>) => {
+}: SubMatchingSelectProps<T>) => {
   const { fields } = useSpreadsheetImportInternal<T>();
   const options = getFieldOptions(fields, column.value) as SelectOption[];
   const value = options.find((opt) => opt.value === option.value);

front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx

@@ -18,12 +18,15 @@ const StyledTableContainer = styled.div`
   height: 0px;
 `;
 
-type SelectHeaderProps = {
+type SelectHeaderStepProps = {
   data: RawData[];
   onContinue: (headerValues: RawData, data: RawData[]) => Promise<void>;
 };
 
-export const SelectHeaderStep = ({ data, onContinue }: SelectHeaderProps) => {
+export const SelectHeaderStep = ({
+  data,
+  onContinue,
+}: SelectHeaderStepProps) => {
   const [selectedRows, setSelectedRows] = useState<ReadonlySet<number>>(
     new Set([0]),
   );

front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx

@@ -5,7 +5,9 @@ import { Radio } from '@/ui/input/components/Radio';
 
 const SELECT_COLUMN_KEY = 'select-row';
 
-const SelectFormatter = (props: FormatterProps<unknown>) => {
+type SelectFormatterProps = FormatterProps<unknown>;
+
+const SelectFormatter = (props: SelectFormatterProps) => {
   const [isRowSelected, onRowSelectionChange] = useRowSelection();
 
   return (

front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx

@@ -5,7 +5,7 @@ import { RawData } from '@/spreadsheet-import/types';
 
 import { generateSelectionColumns } from './SelectColumn';
 
-interface Props {
+interface SelectHeaderTableProps {
   data: RawData[];
   selectedRows: ReadonlySet<number>;
   setSelectedRows: (rows: ReadonlySet<number>) => void;
@@ -15,7 +15,7 @@ export const SelectHeaderTable = ({
   data,
   selectedRows,
   setSelectedRows,
-}: Props) => {
+}: SelectHeaderTableProps) => {
   const columns = useMemo(() => generateSelectionColumns(data), [data]);
 
   return (

front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx

@@ -24,7 +24,7 @@ const StyledRadioContainer = styled.div`
   height: 0px;
 `;
 
-type SelectSheetProps = {
+type SelectSheetStepProps = {
   sheetNames: string[];
   onContinue: (sheetName: string) => Promise<void>;
 };
@@ -32,7 +32,7 @@ type SelectSheetProps = {
 export const SelectSheetStep = ({
   sheetNames,
   onContinue,
-}: SelectSheetProps) => {
+}: SelectSheetStepProps) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const [value, setValue] = useState(sheetNames[0]);

front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx

@@ -56,11 +56,11 @@ export type StepState =
       type: StepType.loading;
     };
 
-interface Props {
+interface UploadFlowProps {
   nextStep: () => void;
 }
 
-export const UploadFlow = ({ nextStep }: Props) => {
+export const UploadFlow = ({ nextStep }: UploadFlowProps) => {
   const theme = useTheme();
   const { initialStepState } = useSpreadsheetImportInternal();
   const [state, setState] = useState<StepState>(

front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx

@@ -10,11 +10,11 @@ const StyledContent = styled(Modal.Content)`
   padding: ${({ theme }) => theme.spacing(6)};
 `;
 
-type UploadProps = {
+type UploadStepProps = {
   onContinue: (data: WorkBook, file: File) => Promise<void>;
 };
 
-export const UploadStep = ({ onContinue }: UploadProps) => {
+export const UploadStep = ({ onContinue }: UploadStepProps) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const handleOnContinue = useCallback(

front/src/modules/spreadsheet-import/steps/components/UploadStep/components/ExampleTable.tsx

@@ -6,11 +6,13 @@ import { generateExampleRow } from '@/spreadsheet-import/utils/generateExampleRo
 
 import { generateColumns } from './columns';
 
-interface Props<T extends string> {
+interface ExampleTableProps<T extends string> {
   fields: Fields<T>;
 }
 
-export const ExampleTable = <T extends string>({ fields }: Props<T>) => {
+export const ExampleTable = <T extends string>({
+  fields,
+}: ExampleTableProps<T>) => {
   const data = useMemo(() => generateExampleRow(fields), [fields]);
   const columns = useMemo(() => generateColumns(fields), [fields]);
 

front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx

@@ -58,7 +58,7 @@ const StyledNoRowsContainer = styled.div`
   margin-top: ${({ theme }) => theme.spacing(8)};
 `;
 
-type Props<T extends string> = {
+type ValidationStepProps<T extends string> = {
   initialData: Data<T>[];
   file: File;
   onSubmitStart?: () => void;
@@ -68,7 +68,7 @@ export const ValidationStep = <T extends string>({
   initialData,
   file,
   onSubmitStart,
-}: Props<T>) => {
+}: ValidationStepProps<T>) => {
   const { enqueueDialog } = useDialog();
   const { fields, onClose, onSubmit, rowHook, tableHook } =
     useSpreadsheetImportInternal<T>();

front/src/modules/spreadsheet-import/utils/getMatchedColumns.ts

@@ -3,7 +3,7 @@ import lavenstein from 'js-levenshtein';
 import {
   Column,
   Columns,
-  MatchColumnsProps,
+  MatchColumnsStepProps,
 } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import { Field, Fields } from '@/spreadsheet-import/types';
 
@@ -13,7 +13,7 @@ import { setColumn } from './setColumn';
 export const getMatchedColumns = <T extends string>(
   columns: Columns<T>,
   fields: Fields<T>,
-  data: MatchColumnsProps<T>['data'],
+  data: MatchColumnsStepProps<T>['data'],
   autoMapDistance: number,
 ) =>
   columns.reduce<Column<T>[]>((arr, column) => {

front/src/modules/spreadsheet-import/utils/setColumn.ts

@@ -1,7 +1,7 @@
 import {
   Column,
   ColumnType,
-  MatchColumnsProps,
+  MatchColumnsStepProps,
 } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import { Field } from '@/spreadsheet-import/types';
 
@@ -10,7 +10,7 @@ import { uniqueEntries } from './uniqueEntries';
 export const setColumn = <T extends string>(
   oldColumn: Column<T>,
   field?: Field<T>,
-  data?: MatchColumnsProps<T>['data'],
+  data?: MatchColumnsStepProps<T>['data'],
 ): Column<T> => {
   switch (field?.fieldType.type) {
     case 'select':

front/src/modules/spreadsheet-import/utils/uniqueEntries.ts

@@ -1,12 +1,12 @@
 import uniqBy from 'lodash/uniqBy';
 
 import {
-  MatchColumnsProps,
+  MatchColumnsStepProps,
   MatchedOptions,
 } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 
 export const uniqueEntries = <T extends string>(
-  data: MatchColumnsProps<T>['data'],
+  data: MatchColumnsStepProps<T>['data'],
   index: number,
 ): Partial<MatchedOptions<T>>[] =>
   uniqBy(