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