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/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<FieldMetadata>;
   isFirstColumn: boolean;
   isLastColumn: boolean;
@@ -18,7 +18,7 @@ export const ColumnHeadWithDropdown = ({
   isFirstColumn,
   isLastColumn,
   primaryColumnKey,
-}: ColumnHeadProps) => {
+}: ColumnHeadWithDropdownProps) => {
   return (
     <DropdownMenu
       clickableComponent={<ColumnHead column={column} />}

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<HTMLDivElement>(null);
 
   const setRowSelectedState = useSetRowSelectedState();

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<FieldMetadata>;
   isFirstColumn: boolean;
   isLastColumn: boolean;
   primaryColumnKey: string;
 };
 
-export const TableColumnDropdownMenu = ({
+export const DataTableColumnDropdownMenu = ({
   column,
   isFirstColumn,
   isLastColumn,
   primaryColumnKey,
-}: DataTableHeaderOptionsProps) => {
+}: DataTableColumnDropdownMenuProps) => {
   const { handleColumnVisibilityChange, handleMoveTableColumn } =
     useTableColumns();
 

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

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<EditableCellEditModeProps>`
+const StyledEditableCellEditModeContainer = styled.div<TableCellEditModeProps>`
   align-items: center;
   border: ${({ transparent, theme }) =>
     transparent ? 'none' : `1px solid ${theme.border.color.light}`};
@@ -25,7 +25,7 @@ const StyledEditableCellEditModeContainer = styled.div<EditableCellEditModeProps
   z-index: 1;
 `;
 
-export type EditableCellEditModeProps = {
+export type TableCellEditModeProps = {
   children: ReactElement;
   transparent?: boolean;
   maxContentWidth?: number;
@@ -40,7 +40,7 @@ export const TableCellEditMode = ({
   children,
   transparent = false,
   maxContentWidth,
-}: EditableCellEditModeProps) => (
+}: TableCellEditModeProps) => (
   <StyledEditableCellEditModeContainer
     maxContentWidth={maxContentWidth}
     transparent={transparent}

front/src/modules/ui/data-table/table-cell/components/TableCellSoftFocusMode.tsx

@@ -9,9 +9,11 @@ import { useTableCell } from '../hooks/useTableCell';
 
 import { TableCellDisplayContainer } from './TableCellDisplayContainer';
 
-type OwnProps = PropsWithChildren<unknown>;
+type TableCellSoftFocusModeProps = PropsWithChildren<unknown>;
 
-export const TableCellSoftFocusMode = ({ children }: OwnProps) => {
+export const TableCellSoftFocusMode = ({
+  children,
+}: TableCellSoftFocusModeProps) => {
   const { openTableCell } = useTableCell();
 
   const isFieldInputOnly = useIsFieldInputOnly();