feat: update eslint to v9

babel.config.json

@@ -11,5 +11,5 @@
     "@babel/preset-typescript",
     "@babel/preset-react"
   ],
-  "plugins": ["@babel/plugin-proposal-optional-chaining"]
+  "plugins": ["@babel/plugin-transform-optional-chaining"]
 }

eslint.config.js

@@ -0,0 +1,22 @@
+import js from '@eslint/js';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['node_modules', 'storybook-static', 'dist', 'coverage'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['src/**/*.{ts,tsx}', 'stories/**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser
+    },
+    plugins: {
+      'react-refresh': reactRefresh
+    },
+    rules: {
+      'react-refresh/only-export-components': ['off', { allowConstantExport: true }]
+    }
+  }
+);

package.json

@@ -54,8 +54,7 @@
     "build": "tsup && tsc",
     "test": "jest ./src ./test --passWithNoTests",
     "test:ci": "jest ./src ./test --passWithNoTests --runInBand --ci",
-    "lint": "npx eslint src stories test --ext js,ts,tsx,jsx",
-    "lint:staged": "npx eslint --ext js,ts,tsx,jsx",
+    "lint": "npx eslint .",
     "prepare": "tsup && tsc && husky install",
     "format-code": "npx prettier . --write",
     "storybook:serve": "storybook dev -p 9001",
@@ -73,11 +72,13 @@
     "extends browserslist-config-design-italia"
   ],
   "lint-staged": {
-    "./{src,stories,test}/**/*.{js,ts,tsx,jsx,mdx}": "yarn lint:staged"
+    "./{src,stories,test}/**/*.{js,ts,tsx,jsx,mdx}": "yarn lint"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.24.7",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
+    "@eslint/js": "^9.10.0",
     "@storybook/addon-a11y": "^8.0.5",
     "@storybook/addon-docs": "^8.0.5",
     "@storybook/addon-essentials": "^8.0.5",
@@ -98,11 +99,11 @@
     "@types/react-transition-group": "^4.4.10",
     "bootstrap-italia": "^2.9.0",
     "browserslist-config-design-italia": "^1.0.0",
-    "eslint": "^8.57.0",
-    "eslint-config-react-app": "^7.0.1",
+    "eslint": "^9.10.0",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
     "husky": "^8.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -118,6 +119,7 @@
     "typeface-lora": "^1.1.13",
     "typeface-roboto-mono": "^1.1.13",
     "typescript": "^5.4.5",
+    "typescript-eslint": "^8.4.0",
     "vite": "^5.2.7"
   },
   "dependencies": {

src/Accordion/AccordionBody.tsx

@@ -1,9 +1,9 @@
+import classNames from 'classnames';
 import React, { ElementType, PropsWithChildren, useCallback, useState } from 'react';
-import type { TransitionProps } from 'react-transition-group/Transition';
 import { Transition } from 'react-transition-group';
-import classNames from 'classnames';
-import { pick, omit } from '../utils';
+import type { TransitionProps } from 'react-transition-group/Transition';
 import { TransitionTimeouts, TransitionsKeys } from '../transitions';
+import { omit, pick } from '../utils';
 
 export type AccordionBodyProps = Partial<TransitionProps> & {
   tag?: ElementType;
@@ -64,7 +64,7 @@ export const AccordionBody = ({
   const onExiting = useCallback(
     (node: HTMLElement) => {
       // getting this variable triggers a reflow
-      // @ts-expect-error
+      // @ts-expect-error variabile non usata
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const _unused = node.offsetHeight;
       setHeight(0);

src/Alert/Alert.tsx

@@ -24,7 +24,7 @@ export interface AlertProps extends HTMLAttributes<HTMLElement> {
    * @default true
    */
   isOpen?: boolean;
-  toggle?: MouseEventHandler<any>;
+  toggle?: MouseEventHandler<unknown>;
   testId?: string;
 }
 

src/Avatar/AvatarGroupContainer.tsx

@@ -1,18 +1,15 @@
-import React, { FC, HTMLAttributes, ElementType } from 'react';
 import classNames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 
 export interface AvatarGroupContainerProps extends HTMLAttributes<HTMLUListElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
   tag?: ElementType;
-  /** Classi aggiuntive da usare per il componente interno AvatarGroupContainer */
-  className?: string;
   /** Classi aggiuntive da usare per il componente più esterno di AvatarGroupContainer */
   wrapperClassName?: string;
   testId?: string;
 }
 
 export const AvatarGroupContainer: FC<AvatarGroupContainerProps> = ({
-  className,
   tag = 'ul',
   wrapperClassName,
   testId,

src/Avatar/AvatarIcon.tsx

@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
 import classNames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes, Ref } from 'react';
 
 export interface AvatarIconProps extends HTMLAttributes<HTMLElement> {
   /**
@@ -36,7 +36,8 @@ export const AvatarIcon: FC<AvatarIconProps> = ({
   const Tag = tag;
   const typeClass = classNames('avatar', {
     [`size-${size}`]: size,
-    [`avatar-${color}`]: color
+    [`avatar-${color}`]: color,
+    className
   });
   if (href) {
     return (

src/Avatar/AvatarPresence.tsx

@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes, ElementType } from 'react';
 import classNames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 
 export interface AvatarPresenceProps extends HTMLAttributes<HTMLElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
@@ -19,8 +19,12 @@ export const AvatarPresence: FC<AvatarPresenceProps> = ({
   ...attributes
 }) => {
   const Tag = tag;
-  const typeClass = classNames('avatar-presence', {
-    presence
-  });
+  const typeClass = classNames(
+    'avatar-presence',
+    {
+      presence
+    },
+    className
+  );
   return <Tag {...attributes} className={typeClass} data-testid={testId} />;
 };

src/Avatar/AvatarStatus.tsx

@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes, ElementType } from 'react';
 import classNames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 
 export interface AvatarStatusProps extends HTMLAttributes<HTMLElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
@@ -13,8 +13,12 @@ export interface AvatarStatusProps extends HTMLAttributes<HTMLElement> {
 
 export const AvatarStatus: FC<AvatarStatusProps> = ({ className, tag = 'div', status, testId, ...attributes }) => {
   const Tag = tag;
-  const typeClass = classNames('avatar-status', {
-    status
-  });
+  const typeClass = classNames(
+    'avatar-status',
+    {
+      status
+    },
+    className
+  );
   return <Tag {...attributes} className={typeClass} data-testid={testId} />;
 };

src/Dimmer/DimmerButtons.tsx

@@ -1,9 +1,7 @@
-import React, { FC, HTMLAttributes } from 'react';
 import classNames from 'classnames';
+import React, { FC, HTMLAttributes } from 'react';
 
 export interface DimmerButtonsProps extends HTMLAttributes<HTMLElement> {
-  /** Le varianti di colore definite in Bootstrap Italia per il componente Dimmer */
-  color?: 'primary' | string;
   /** Classi aggiuntive da usare per il componente Dimmer */
   className?: string;
   /** Da utilizzare in presenza di un singolo bottone: quando abilitato ne centra il contenuto. */
@@ -16,7 +14,6 @@ export interface DimmerButtonsProps extends HTMLAttributes<HTMLElement> {
 }
 
 export const DimmerButtons: FC<DimmerButtonsProps> = ({
-  color,
   className,
   single = false,
   dark = true,

src/Dropdown/Dropdown.tsx

@@ -1,5 +1,5 @@
-import React, { ElementType, FC, HTMLAttributes } from 'react';
 import classNames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 import { Dropdown as BSDRopdown } from 'reactstrap';
 export interface DropdownProps extends HTMLAttributes<HTMLElement> {
   tag?: ElementType;
@@ -14,7 +14,6 @@ export interface DropdownProps extends HTMLAttributes<HTMLElement> {
 export const Dropdown: FC<DropdownProps> = ({
   className,
   testId,
-  tag,
   children,
   inNavbar,
   textCenter,

src/FontLoader/FontLoader.tsx

@@ -17,6 +17,7 @@ const defaultFonts = [
 export function useFontLoader({ fonts }: FontLoaderProps) {
   useEffect(() => {
     if (typeof window !== 'undefined') {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
       const WebFont = require('webfontloader');
       WebFont.load({
         custom: {

src/Input/Input.tsx

@@ -169,6 +169,7 @@ export const Input = ({
     }
   }, [value]);
 
+  // eslint-disable-next-line prefer-const
   let { bsSize, valid, ...rest } = attributes;
 
   const Tag = getTag({ tag, plaintext, staticInput, type });
@@ -282,7 +283,7 @@ export const Input = ({
   }
 
   const clickIncrDecr = (mode: number) => {
-    var step = parseFloat(inputRef.current?.step ? inputRef.current.step : '1');
+    let step = parseFloat(inputRef.current?.step ? inputRef.current.step : '1');
     const min = parseFloat(inputRef.current?.min ? inputRef.current.min : 'Nan');
     const max = parseFloat(inputRef.current?.max ? inputRef.current.max : 'Nan');
     step = isNaN(step) ? 1 : step;
@@ -295,7 +296,7 @@ export const Input = ({
     }
     const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
     nativeInputValueSetter?.call(inputRef.current, `${newValue}`);
-    var ev2 = new Event('input', { bubbles: true });
+    const ev2 = new Event('input', { bubbles: true });
     inputRef.current?.dispatchEvent(ev2);
   };
 

src/List/ListItem.tsx

@@ -39,7 +39,7 @@ export const ListItem: FC<ListItemProps> & {
   children,
   ...attributes
 }) => {
-    let Tag = tag;
+    const Tag = tag;
     const classes = classNames(
       className,
       { active },

src/Modal/Modal.tsx

@@ -1,16 +1,17 @@
+import classnames from 'classnames';
 import React, { FC, HTMLAttributes } from 'react';
 import { FadeProps, Modal as InnerModal } from 'reactstrap';
 import { CSSModule } from 'reactstrap/types/lib/utils';
-import classnames from 'classnames';
 
 export interface ModalProps extends HTMLAttributes<HTMLElement> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
   /** Indica lo stato del modale. Valore di default: undefined. */
   isOpen?: boolean;
   autoFocus?: boolean;
   size?: string;
   /** Funzione da chiamare quando l'utente clicca sul backdrop. Valore di default: undefined. */
-  toggle?: React.KeyboardEventHandler<any> | React.MouseEventHandler<any>;
+  toggle?: React.KeyboardEventHandler<unknown> | React.MouseEventHandler<unknown>;
   keyboard?: boolean;
   backdrop?: boolean | 'static';
   /**

src/Modal/ModalHeader.tsx

@@ -1,18 +1,19 @@
+import classNames from 'classnames';
 import React, { FC, HTMLAttributes } from 'react';
 import { CSSModule } from 'reactstrap/types/lib/utils';
-import classNames from 'classnames';
 import { Icon } from '../Icon/Icon';
 import { mapToCssModules } from '../utils';
 
 export interface ModalHeaderProps extends HTMLAttributes<HTMLElement> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
   cssModule?: CSSModule;
   /** Componente che conterrà il nodo titolo. Valore di default: h5 */
   tag?: React.ElementType;
   /** Componente che contenitore per l'header. Valore di default: div. */
   wrapTag?: React.ElementType;
   /** Funzione da passare al tasto di chiusura nell'intestazione. Quando questa funzione non è presente il tasto di chiusura non viene mostrato. Valore di default: undefined */
-  toggle?: React.MouseEventHandler<any>;
+  toggle?: React.MouseEventHandler<unknown>;
   /** Indica il nome dell'icona da utilizzare nel titolo. */
   icon?: string;
   /** Classi da aggiungere al nodo contenitore. */
@@ -25,7 +26,6 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   icon,
   className,
   children,
-  Util,
   toggle,
   tag: Tag = 'h5',
   wrapTag: WrapTag = 'div',

src/NavScroll/debounce.ts

@@ -4,12 +4,12 @@
  * Code: https://github.com/dej611/react-use-navscroll
  */
 
-export const debounce = (callback: Function, wait: number) => {
+export const debounce = (callback: CallableFunction, wait: number) => {
   let timeoutId: NodeJS.Timeout;
   return (...args: unknown[]) => {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => {
-      callback.apply(null, args);
+      callback(...args);
     }, wait);
   };
 };

src/NavScroll/useNavScroll.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /*
  * This work derives from the React Use Navscroll library
  * Released under the MIT license by Marco Liberati

src/NavScroll/useSizeDetector.ts

@@ -4,7 +4,6 @@
  * Code: https://github.com/dej611/react-use-navscroll
  */
 
-/* eslint-disable no-restricted-globals */
 import { useCallback, useEffect, useState } from 'react';
 import { debounce } from './debounce';
 import { useNavScrollArgs } from './types';

src/Notification/Notification.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, FC, PropsWithChildren, useEffect } from 'react';
-import { ToastProps, useToast, cssTransition } from 'react-toastify';
+import { cssTransition, ToastProps, useToast } from 'react-toastify';
 import { NotificationToastProps } from './NotificationContent';
 import { NotificationCommonProps } from './types';
 
@@ -20,7 +20,6 @@ export const Notification: FC<PropsWithChildren<NotificationProps>> = (props) =>
 
   useEffect(() => {
     if (!isIn) deleteToast();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isIn]);
 
   useEffect(() => {

src/Notification/NotificationContent.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import classNames from 'classnames';
 import React, { CSSProperties, ReactNode } from 'react';
 import { Button } from '../Button/Button';
-import classNames from 'classnames';
 import { Icon } from '../Icon/Icon';
-import { usePosition } from './usePosition';
 import { NotificationCommonProps } from './types';
+import { usePosition } from './usePosition';
 
 export interface NotificationToastProps {
   /** Indica quale icona affiancare al titolo. */