fix: improve react code based on @eslint-react plugin

Add some TODO for some legacy code

Author: ivan-dalmet

.eslintrc.json

@@ -5,6 +5,7 @@
     "next/core-web-vitals",
     "plugin:storybook/recommended"
   ],
+  "plugins": ["@eslint-react/eslint-plugin"],
   "rules": {
     "react/no-unescaped-entities": "off",
     "@typescript-eslint/no-unused-vars": [
@@ -18,6 +19,10 @@
     "sonarjs/prefer-immediate-return": "warn"
   },
   "overrides": [
+    {
+      "files": ["**/*.{ts,tsx}"],
+      "extends": ["plugin:@eslint-react/recommended-legacy"]
+    },
     {
       "files": ["./src/**/*.*"],
       "rules": {

package.json

@@ -106,6 +106,7 @@
     "@babel/eslint-parser": "7.24.7",
     "@babel/parser": "7.24.7",
     "@chakra-ui/cli": "2.4.1",
+    "@eslint-react/eslint-plugin": "1.14.3",
     "@next/eslint-plugin-next": "14.2.4",
     "@playwright/test": "1.45.1",
     "@storybook/addon-actions": "8.1.11",

pnpm-lock.yaml

@@ -179,7 +179,9 @@ export const ConfirmMenuItem = forwardRef<ConfirmMenuItemProps, 'button'>(
             },
           },
           icon: icon
-            ? React.cloneElement(icon, { color: 'transparent' })
+            ? // TODO @eslint-react rule
+              // eslint-disable-next-line @eslint-react/no-clone-element
+              React.cloneElement(icon, { color: 'transparent' })
             : icon,
         }
       : {};

src/components/ConfirmMenuItem/index.tsx

@@ -43,12 +43,16 @@ export const ConfirmModal: React.FC<
     !title && !message ? t('components:confirmModal.heading') : title;
 
   if (!isEnabled) {
+    // TODO @eslint-react rule
+    // eslint-disable-next-line @eslint-react/no-clone-element
     const childrenWithOnClick = React.cloneElement(children, {
       onClick: onConfirm,
     });
     return <>{childrenWithOnClick}</>;
   }
 
+  // TODO @eslint-react rule
+  // eslint-disable-next-line @eslint-react/no-clone-element
   const childrenWithOnOpen = React.cloneElement(children, {
     onClick: confirmModal.onOpen,
   });

src/components/ConfirmModal/index.tsx

@@ -50,6 +50,8 @@ export const ConfirmPopover: React.FC<
   const initialFocusRef = useRef<HTMLButtonElement>(null);
 
   if (!isEnabled) {
+    // TODO @eslint-react rule
+    // eslint-disable-next-line @eslint-react/no-clone-element
     const childrenWithOnClick = React.cloneElement(children, {
       onClick: onConfirm,
     });

src/components/ConfirmPopover/index.tsx

@@ -22,10 +22,10 @@ export type DateAgoProps = Omit<TooltipProps, 'children'> & {
 };
 
 export const DateAgo: FC<React.PropsWithChildren<DateAgoProps>> = forwardRef(
-  function DateAgo({ date = new Date(), format, ...rest }, ref) {
+  function DateAgo({ date, format, ...rest }, ref) {
     const { t } = useTranslation(['components']);
     const [, setForceUpdate] = useState(0);
-    const dayjsDate = dayjs(date);
+    const dayjsDate = dayjs(date ?? new Date());
     const dateFormatted = dayjsDate.format();
 
     useEffect(() => {

src/components/DateAgo/index.tsx

@@ -134,6 +134,8 @@ export const DayPickerContent = forwardRef<
                 selected={value ?? undefined}
                 onSelect={handleDaySelect}
                 components={{
+                  // TODO @eslint-react rule
+                  // eslint-disable-next-line @eslint-react/no-nested-components
                   Caption: (props) => (
                     <Caption
                       {...props}

src/components/DayPicker/_partials/DayPickerContent.tsx

@@ -31,8 +31,12 @@ export const useDayPickerInputManagement = (
   // Pour mettre à jour l'input selon la value
   useEffect(() => {
     if (!!dateValue) {
+      // TODO @eslint-react rule
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setInputValue(dayjs(dateValue).format(dateFormat));
     } else {
+      // TODO @eslint-react rule
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setInputValue('');
     }
   }, [dateFormat, dateValue]);

src/components/DayPicker/hooks/useDayPickerInputManagement.ts

@@ -48,14 +48,14 @@ export const DayPicker: FC<DayPickerProps> = ({
   id,
   value,
   onChange,
-  onClose = () => {},
+  onClose,
   popperPlacement = 'bottom-start',
   dateFormat = DATE_FORMAT,
   placeholder = 'JJ/MM/AAAA',
-  inputProps = {},
+  inputProps,
   isDisabled = false,
   autoFocus = false,
-  onMonthChange = () => {},
+  onMonthChange,
   ...rest
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -69,7 +69,7 @@ export const DayPicker: FC<DayPickerProps> = ({
 
   // Popper management
   const onClosePopper = () => {
-    onClose(value);
+    onClose?.(value);
     setMode('DAY');
   };
 
@@ -112,21 +112,21 @@ export const DayPicker: FC<DayPickerProps> = ({
   const { setMode, setMonth, selectMonth } = hookMonthNavigation;
 
   const handleChangeMonth = (date?: Date | null) => {
-    onMonthChange(date);
+    onMonthChange?.(date);
     setMonth(date);
   };
 
   // Change to day view once we have selected a month on the month picker
   const handleSelectMonth = (date: Date) => {
-    onMonthChange(date);
+    onMonthChange?.(date);
     selectMonth(date);
   };
 
   const valueRef = useRef(value);
   valueRef.current = value;
 
   return (
-    <InputGroup ref={containerRef} size={size} width={inputProps.width}>
+    <InputGroup ref={containerRef} size={size} width={inputProps?.width}>
       <InputLeftElement pointerEvents="none">
         <Icon
           icon={FiCalendar}

src/components/DayPicker/index.tsx

@@ -102,6 +102,7 @@ export const FieldOtp = <
                 <PinInputField
                   ref={index === 0 ? inputRef : undefined}
                   flex={1}
+                  // eslint-disable-next-line @eslint-react/no-array-index-key
                   key={index}
                   {...props.pinInputFieldProps}
                 />

src/components/Form/FieldOtp/index.tsx

@@ -14,7 +14,7 @@ import { Form } from '.';
 export const FormMocked = <T extends Schema>({
   children,
   schema,
-  useFormOptions = {},
+  useFormOptions,
   onSubmit,
 }: {
   children(options: { form: UseFormReturn<z.infer<T>> }): ReactNode;

src/components/Form/form-test-utils.tsx

@@ -32,6 +32,8 @@ const CustomIcon = ({
   name: string;
 }) => {
   const { hasCopied, onCopy } = useClipboard(name);
+  // TODO @eslint-react rule
+  // eslint-disable-next-line @eslint-react/no-clone-element
   const icon = React.cloneElement(children, { onClick: onCopy });
 
   return (

src/components/Icons/docs.stories.tsx

@@ -57,7 +57,7 @@ export const InputNumber = forwardRef<InputNumberProps, 'input'>(
       max,
       clampValueOnBlur = true,
       fixedPrecision = false,
-      onChange = () => undefined,
+      onChange,
       placeholder,
       showButtons = false,
       inputGroupProps,

src/components/InputNumber/index.tsx

@@ -13,18 +13,21 @@ interface MonthPickerProps {
 export const MonthPicker: React.FC<
   React.PropsWithChildren<MonthPickerProps>
 > = ({
-  year = new Date().getFullYear(),
+  year,
   onMonthClick,
   onTodayButtonClick,
   onYearChange,
-  selectedMonths = [],
+  selectedMonths,
 }) => {
   return (
-    <YearProvider year={year} onYearChange={onYearChange}>
+    <YearProvider
+      year={year ?? new Date().getFullYear()}
+      onYearChange={onYearChange}
+    >
       <MonthPickerProvider
         onMonthClick={onMonthClick}
         onTodayButtonClick={onTodayButtonClick}
-        selectedMonths={selectedMonths}
+        selectedMonths={selectedMonths ?? []}
       >
         <Content />
       </MonthPickerProvider>

src/components/MonthPicker/MonthPicker.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 
 type MonthPickerContextType = {
   onMonthClick?(month: Date): void;
@@ -12,14 +12,16 @@ export const useMonthPickerContext = () => useContext(MonthPickerContext);
 export const MonthPickerProvider: React.FC<
   React.PropsWithChildren<MonthPickerContextType>
 > = ({ onMonthClick, onTodayButtonClick, selectedMonths, children }) => {
+  const contextValue = useMemo(
+    () => ({
+      onMonthClick,
+      onTodayButtonClick,
+      selectedMonths,
+    }),
+    [onMonthClick, onTodayButtonClick, selectedMonths]
+  );
   return (
-    <MonthPickerContext.Provider
-      value={{
-        onMonthClick,
-        onTodayButtonClick,
-        selectedMonths,
-      }}
-    >
+    <MonthPickerContext.Provider value={contextValue}>
       {children}
     </MonthPickerContext.Provider>
   );

src/components/MonthPicker/MonthPickerContext.tsx

@@ -4,6 +4,7 @@ import {
   createContext,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 
@@ -29,21 +30,24 @@ export const YearProvider: React.FC<
   const [year, setYear] = useState(yearProp);
 
   useEffect(() => {
+    // TODO @eslint-react rule
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
     setYear(yearProp);
   }, [yearProp]);
 
   useEffect(() => {
     onYearChange?.(year);
   }, [onYearChange, year]);
 
+  const contextValue = useMemo(
+    () => ({
+      year,
+      setYear,
+    }),
+    [year]
+  );
+
   return (
-    <YearContext.Provider
-      value={{
-        year,
-        setYear,
-      }}
-    >
-      {children}
-    </YearContext.Provider>
+    <YearContext.Provider value={contextValue}>{children}</YearContext.Provider>
   );
 };

src/components/MonthPicker/YearContext.tsx

@@ -46,8 +46,12 @@ export const Nav = ({ children, breakpoint = 'lg', ...rest }: NavProps) => {
   });
 
   const [active, setActive] = useState<ReactNode>(<>-</>);
+  const contextValue = useMemo(
+    () => ({ active, setActive, isMenu: !!isMenu }),
+    [active, isMenu]
+  );
   return (
-    <NavContext.Provider value={{ active, setActive, isMenu: !!isMenu }}>
+    <NavContext.Provider value={contextValue}>
       <Menu matchWidth {...rest}>
         {!isMenu && (
           <Stack spacing="1" opacity={!isHydrated ? 0 : undefined}>

src/components/Nav/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext } from 'react';
+import React, { FC, useContext, useMemo } from 'react';
 
 import {
   Box,
@@ -202,18 +202,44 @@ export const Pagination = ({
   isLoadingPage = false,
   ...rest
 }: PaginationProps) => {
-  const pagination = getPaginationInfo({ page, pageSize, totalItems });
+  const {
+    firstItemOnPage,
+    firstPage,
+    isFirstPage,
+    isLastPage,
+    lastItemOnPage,
+    lastPage,
+  } = getPaginationInfo({ page, pageSize, totalItems });
+  const contextValue = useMemo(
+    () => ({
+      setPage,
+      page,
+      pageSize,
+      totalItems,
+      isLoadingPage,
+      firstItemOnPage,
+      firstPage,
+      isFirstPage,
+      isLastPage,
+      lastItemOnPage,
+      lastPage,
+    }),
+    [
+      isLoadingPage,
+      page,
+      pageSize,
+      firstItemOnPage,
+      firstPage,
+      isFirstPage,
+      isLastPage,
+      lastItemOnPage,
+      lastPage,
+      setPage,
+      totalItems,
+    ]
+  );
   return (
-    <PaginationContext.Provider
-      value={{
-        setPage,
-        page,
-        pageSize,
-        totalItems,
-        isLoadingPage,
-        ...pagination,
-      }}
-    >
+    <PaginationContext.Provider value={contextValue}>
       <HStack w="full" {...rest} />
     </PaginationContext.Provider>
   );

src/components/Pagination/index.tsx

@@ -19,19 +19,15 @@ export const ResponsiveIconButton = forwardRef<
   'button'
 >(
   (
-    {
-      hideTextBreakpoints = {
-        base: true,
-        md: false,
-      },
-      children,
-      icon,
-      iconPosition = 'left',
-      ...rest
-    },
+    { hideTextBreakpoints, children, icon, iconPosition = 'left', ...rest },
     ref
   ) => {
-    const responsiveStates = useBreakpointValue(hideTextBreakpoints);
+    const responsiveStates = useBreakpointValue(
+      hideTextBreakpoints ?? {
+        base: true,
+        md: false,
+      }
+    );
 
     const buttonProps =
       iconPosition === 'right' ? { rightIcon: icon } : { leftIcon: icon };

src/components/ResponsiveIconButton/index.tsx

@@ -66,6 +66,8 @@ export const SearchInput = forwardRef<SearchInputProps, 'input'>(
 
     useEffect(() => {
       if (externalValue !== searchRef.current) {
+        // TODO @eslint-react rule
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
         setSearch(externalValue);
       }
     }, [externalValue]);