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/utilities/animation/components/AnimatedEaseIn.tsx

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion';
 
-type Props = Omit<
+type AnimatedEaseInProps = Omit<
   React.ComponentProps<typeof motion.div>,
   'initial' | 'animated' | 'transition'
 > & {
@@ -11,7 +11,7 @@ export const AnimatedEaseIn = ({
   children,
   duration = 0.3,
   ...restProps
-}: Props) => {
+}: AnimatedEaseInProps) => {
   const initial = { opacity: 0 };
   const animate = { opacity: 1 };
   const transition = { ease: 'linear', duration };

front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx

@@ -11,7 +11,10 @@ const StyledWord = styled(motion.span)`
   white-space: pre;
 `;
 
-type Props = Omit<React.ComponentProps<typeof motion.div>, 'children'> & {
+type AnimatedTextWordProps = Omit<
+  React.ComponentProps<typeof motion.div>,
+  'children'
+> & {
   text: string;
 };
 
@@ -44,7 +47,10 @@ const childAnimation = {
   },
 };
 
-export const AnimatedTextWord = ({ text = '', ...restProps }: Props) => {
+export const AnimatedTextWord = ({
+  text = '',
+  ...restProps
+}: AnimatedTextWordProps) => {
   const words = useMemo(() => {
     const words = text.split(' ');
 

front/src/modules/ui/utilities/debug/components/TimingProfiler.tsx

@@ -3,12 +3,12 @@ import { Interaction } from 'scheduler/tracing';
 
 import { logDebug } from '~/utils/logDebug';
 
-type OwnProps = {
+type TimingProfilerProps = {
   id: string;
   children: React.ReactNode;
 };
 
-export const TimingProfiler = ({ id, children }: OwnProps) => {
+export const TimingProfiler = ({ id, children }: TimingProfilerProps) => {
   const handleRender = (
     id: string,
     phase: 'mount' | 'update',

front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 
-type ComputeNodeDimensionsEffectProps = {
+type ComputeNodeDimensionsProps = {
   children: (
     dimensions: { height: number; width: number } | undefined,
   ) => ReactNode;
@@ -17,7 +17,7 @@ const StyledNodeWrapper = styled.span`
 export const ComputeNodeDimensions = ({
   children,
   node = children(undefined),
-}: ComputeNodeDimensionsEffectProps) => {
+}: ComputeNodeDimensionsProps) => {
   const nodeWrapperRef = useRef<HTMLSpanElement>(null);
   const [nodeDimensions, setNodeDimensions] = useState<
     | {

front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx

@@ -9,7 +9,7 @@ import { rgba } from '@/ui/theme/constants/colors';
 
 import { useDragSelect } from '../hooks/useDragSelect';
 
-type OwnProps = {
+type DragSelectProps = {
   dragSelectable: RefObject<HTMLElement>;
   onDragSelectionChange: (id: string, selected: boolean) => void;
   onDragSelectionStart?: () => void;
@@ -19,7 +19,7 @@ export const DragSelect = ({
   dragSelectable,
   onDragSelectionChange,
   onDragSelectionStart,
-}: OwnProps) => {
+}: DragSelectProps) => {
   const theme = useTheme();
   const { isDragSelectionStartEnabled } = useDragSelect();
   const { DragSelection } = useSelectionContainer({

front/src/modules/ui/utilities/hotkey/components/HotkeyEffect.tsx

@@ -2,7 +2,7 @@ import { Keys } from 'react-hotkeys-hook';
 
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
-type OwnProps = {
+type HotkeyEffectProps = {
   hotkey: {
     key: Keys;
     scope: string;
@@ -10,7 +10,10 @@ type OwnProps = {
   onHotkeyTriggered: () => void;
 };
 
-export const HotkeyEffect = ({ hotkey, onHotkeyTriggered }: OwnProps) => {
+export const HotkeyEffect = ({
+  hotkey,
+  onHotkeyTriggered,
+}: HotkeyEffectProps) => {
   useScopedHotkeys(hotkey.key, () => onHotkeyTriggered(), hotkey.scope, [
     onHotkeyTriggered,
   ]);

front/src/modules/ui/utilities/page-title/PageTitle.tsx

@@ -1,11 +1,13 @@
 import { Helmet } from 'react-helmet-async';
 
-type OwnProps = {
+type PageTitleProps = {
   title: string;
 };
 
-export const PageTitle = ({ title }: OwnProps) => (
-  <Helmet>
-    <title>{title}</title>
-  </Helmet>
-);
+export const PageTitle = (props: PageTitleProps) => {
+  return (
+    <Helmet>
+      <title>{props.title}</title>
+    </Helmet>
+  );
+};