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/input/components/AutosizeTextInput.tsx

@@ -17,7 +17,7 @@ export enum AutosizeTextInputVariant {
   Button = 'button',
 }
 
-type OwnProps = {
+type AutosizeTextInputProps = {
   onValidate?: (text: string) => void;
   minRows?: number;
   placeholder?: string;
@@ -114,7 +114,7 @@ export const AutosizeTextInput = ({
   onFocus,
   variant = AutosizeTextInputVariant.Icon,
   buttonTitle,
-}: OwnProps) => {
+}: AutosizeTextInputProps) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isHidden, setIsHidden] = useState(
     variant === AutosizeTextInputVariant.Button,

front/src/modules/ui/input/components/BooleanInput.tsx

@@ -17,12 +17,12 @@ const StyledEditableBooleanFieldValue = styled.div`
   margin-left: ${({ theme }) => theme.spacing(1)};
 `;
 
-type OwnProps = {
+type BooleanInputProps = {
   value: boolean;
   onToggle?: (newValue: boolean) => void;
 };
 
-export const BooleanInput = ({ value, onToggle }: OwnProps) => {
+export const BooleanInput = ({ value, onToggle }: BooleanInputProps) => {
   const [internalValue, setInternalValue] = useState(value);
 
   useEffect(() => {

front/src/modules/ui/input/components/Checkbox.tsx

@@ -19,7 +19,7 @@ export enum CheckboxSize {
   Small = 'small',
 }
 
-type OwnProps = {
+type CheckboxProps = {
   checked: boolean;
   indeterminate?: boolean;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -116,7 +116,7 @@ export const Checkbox = ({
   variant = CheckboxVariant.Primary,
   size = CheckboxSize.Small,
   shape = CheckboxShape.Squared,
-}: OwnProps) => {
+}: CheckboxProps) => {
   const [isInternalChecked, setIsInternalChecked] =
     React.useState<boolean>(false);
 

front/src/modules/ui/input/components/DateInput.tsx

@@ -29,7 +29,7 @@ const StyledInputContainer = styled.div`
   width: 100%;
 `;
 
-export type DateInputEditProps = {
+export type DateInputProps = {
   value: Nullable<Date>;
   onEnter: (newDate: Nullable<Date>) => void;
   onEscape: (newDate: Nullable<Date>) => void;
@@ -46,7 +46,7 @@ export const DateInput = ({
   onEnter,
   onEscape,
   onClickOutside,
-}: DateInputEditProps) => {
+}: DateInputProps) => {
   const theme = useTheme();
 
   const [internalValue, setInternalValue] = useState(value);

front/src/modules/ui/input/components/DoubleTextInput.tsx

@@ -24,7 +24,7 @@ const StyledContainer = styled.div`
   }
 `;
 
-type OwnProps = {
+type DoubleTextInputProps = {
   firstValue: string;
   secondValue: string;
   firstValuePlaceholder: string;
@@ -51,7 +51,7 @@ export const DoubleTextInput = ({
   onEscape,
   onShiftTab,
   onTab,
-}: OwnProps) => {
+}: DoubleTextInputProps) => {
   const [firstInternalValue, setFirstInternalValue] = useState(firstValue);
   const [secondInternalValue, setSecondInternalValue] = useState(secondValue);
 

front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { StyledInput } from '@/ui/input/components/TextInput';
 import { ComputeNodeDimensions } from '@/ui/utilities/dimensions/components/ComputeNodeDimensions';
 
-export type DoubleTextInputEditProps = {
+export type EntityTitleDoubleTextInputProps = {
   firstValue: string;
   secondValue: string;
   firstValuePlaceholder: string;
@@ -38,7 +38,7 @@ export const EntityTitleDoubleTextInput = ({
   firstValuePlaceholder,
   secondValuePlaceholder,
   onChange,
-}: DoubleTextInputEditProps) => (
+}: EntityTitleDoubleTextInputProps) => (
   <StyledDoubleTextContainer>
     <ComputeNodeDimensions node={firstValue || firstValuePlaceholder}>
       {(nodeDimensions) => (

front/src/modules/ui/input/components/PhoneInput.tsx

@@ -68,7 +68,7 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
   }
 `;
 
-export type PhoneCellEditProps = {
+export type PhoneInputProps = {
   placeholder?: string;
   autoFocus?: boolean;
   value: string;
@@ -89,7 +89,7 @@ export const PhoneInput = ({
   onShiftTab,
   onClickOutside,
   hotkeyScope,
-}: PhoneCellEditProps) => {
+}: PhoneInputProps) => {
   const [internalValue, setInternalValue] = useState<string | undefined>(value);
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);

front/src/modules/ui/input/components/ProbabilityInput.tsx

@@ -57,12 +57,15 @@ const PROBABILITY_VALUES = [
   { label: '100%', value: 100 },
 ];
 
-type OwnProps = {
+type ProbabilityInputProps = {
   probabilityIndex: number | null;
   onChange: (newValue: number) => void;
 };
 
-export const ProbabilityInput = ({ onChange, probabilityIndex }: OwnProps) => {
+export const ProbabilityInput = ({
+  onChange,
+  probabilityIndex,
+}: ProbabilityInputProps) => {
   const [hoveredProbabilityIndex, setHoveredProbabilityIndex] = useState<
     number | null
   >(null);

front/src/modules/ui/input/components/TextInput.tsx

@@ -11,7 +11,7 @@ export const StyledInput = styled.input`
   ${textInputStyle}
 `;
 
-type OwnProps = {
+type TextInputProps = {
   placeholder?: string;
   autoFocus?: boolean;
   value: string;
@@ -33,7 +33,7 @@ export const TextInput = ({
   onTab,
   onShiftTab,
   onClickOutside,
-}: OwnProps) => {
+}: TextInputProps) => {
   const [internalText, setInternalText] = useState(value);
 
   const wrapperRef = useRef(null);

front/src/modules/ui/input/image/components/ImageInput.tsx

@@ -77,7 +77,7 @@ const StyledHiddenFileInput = styled.input`
   display: none;
 `;
 
-type Props = Omit<React.ComponentProps<'div'>, 'children'> & {
+type ImageInputProps = Omit<React.ComponentProps<'div'>, 'children'> & {
   picture: string | null | undefined;
   onUpload?: (file: File) => void;
   onRemove?: () => void;
@@ -96,7 +96,7 @@ export const ImageInput = ({
   errorMessage,
   disabled = false,
   ...restProps
-}: Props) => {
+}: ImageInputProps) => {
   const theme = useTheme();
   const hiddenFileInput = React.useRef<HTMLInputElement>(null);
   const onUploadButtonClick = () => {

front/src/modules/ui/input/text/components/TextInputSettings.tsx

@@ -19,7 +19,10 @@ import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 
 import { InputHotkeyScope } from '../types/InputHotkeyScope';
 
-type OwnProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+type TextInputComponentProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'onChange'
+> & {
   label?: string;
   onChange?: (text: string) => void;
   fullWidth?: boolean;
@@ -27,7 +30,7 @@ type OwnProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
   error?: string;
 };
 
-const StyledContainer = styled.div<Pick<OwnProps, 'fullWidth'>>`
+const StyledContainer = styled.div<Pick<TextInputComponentProps, 'fullWidth'>>`
   display: flex;
   flex-direction: column;
   width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
@@ -48,7 +51,7 @@ const StyledInputContainer = styled.div`
   width: 100%;
 `;
 
-const StyledInput = styled.input<Pick<OwnProps, 'fullWidth'>>`
+const StyledInput = styled.input<Pick<TextInputComponentProps, 'fullWidth'>>`
   background-color: ${({ theme }) => theme.background.tertiary};
   border: none;
   border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
@@ -111,7 +114,8 @@ const TextInputComponent = (
     type,
     disableHotkeys = false,
     ...props
-  }: OwnProps,
+  }: TextInputComponentProps,
+  // eslint-disable-next-line twenty/component-props-naming
   ref: ForwardedRef<HTMLInputElement>,
 ): JSX.Element => {
   const theme = useTheme();