Refactor ESLint configuration and update dependencies

README.md

@@ -7,6 +7,16 @@ Library for sharing GridSuite apps commons components
 The commons-ui library have a demo app in which you can call your components to test them.
 The `npm start` command install the library's dependencies then launches the demo app.
 
+##### Development Scripts
+
+- **`npm run type-check`** - Runs TypeScript type checking without emitting files. This ensures all developers use the project's local TypeScript version from `node_modules` rather than a potentially different globally-installed version. Run this to verify your code has no type errors before committing.
+
+- **`npm run build`** - Builds the library. Note: This automatically runs `npm run prebuild` first.
+
+- **`npm run prebuild`** - Runs linting and type checking before the build. This script is executed automatically by npm before `npm run build` and ensures that the build is not executed if linting or type checking fails. You don't need to call this manually unless you want to verify code quality without building.
+
+##### Local Testing
+
 If you want to test your library integration with a consumer application my-app you have first
 to build commons-ui via
 

demo/data/TreeViewFinder.jsx

@@ -15,7 +15,7 @@ import {
     Whatshot as WhatshotIcon,
 } from '@mui/icons-material';
 
-// eslint-disable-next-line import/no-mutable-exports
+// eslint-disable-next-line import-x/no-mutable-exports
 let PokemonTree = [
     {
         id: 'D1',
@@ -117,7 +117,7 @@ let PokemonTree = [
     },
 ];
 
-// eslint-disable-next-line import/no-mutable-exports
+// eslint-disable-next-line import-x/no-mutable-exports
 let PokemonList = [
     {
         id: '1',

demo/src/app.jsx

@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-/* eslint-disable func-names, no-nested-ternary, no-return-assign, @typescript-eslint/no-unused-vars, no-promise-executor-return, @typescript-eslint/no-unused-expressions, no-alert, no-undef, @typescript-eslint/no-shadow, react/jsx-no-bind, react/prop-types, import/no-extraneous-dependencies */
+/* eslint-disable func-names, no-nested-ternary, no-return-assign, no-promise-executor-return, no-alert, no-undef, react/jsx-no-bind, react/prop-types */
 
 import {
     Box,
@@ -32,7 +32,7 @@ import { BrowserRouter, useLocation, useMatch, useNavigate } from 'react-router'
 import { IntlProvider, useIntl } from 'react-intl';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import translations from './demo_intl';
-import PowsyblLogo from '../images/powsybl_logo.svg?react'; // eslint-disable-line import/no-unresolved
+import PowsyblLogo from '../images/powsybl_logo.svg?react';
 import AppPackage from '../../package.json';
 import TreeViewFinderConfig from './TreeViewFinderConfig';
 import {
@@ -197,7 +197,6 @@ const CustomTreeViewFinder = styled(TreeViewFinder)(TreeViewFinderCustomStylesEm
 function Crasher() {
     const [crash, setCrash] = useState(false);
     if (crash) {
-        // eslint-disable-next-line no-undef
         window.foonotexists.bar();
     }
     return <Button onClick={() => setCrash(true)}>CRASH ME</Button>;
@@ -298,7 +297,6 @@ function PermanentSnackButton() {
 const validateUser = () => {
     // change to false to simulate user unauthorized access
     return new Promise((resolve) => {
-        // eslint-disable-next-line no-undef
         window.setTimeout(() => resolve(true), 500);
     });
 };
@@ -378,9 +376,11 @@ function AppContent({ language, onLanguageClick }) {
     };
     const displayEquipment = (equipment) => {
         if (equipment != null) {
-            equipment.type === EQUIPMENT_TYPE.SUBSTATION.name
-                ? alert(`Equipment ${equipment.label} found !`)
-                : alert(`Equipment ${equipment.label} (${equipment.voltageLevelLabel}) found !`);
+            if (equipment.type === EQUIPMENT_TYPE.SUBSTATION.name) {
+                alert(`Equipment ${equipment.label} found !`);
+            } else {
+                alert(`Equipment ${equipment.label} (${equipment.voltageLevelLabel}) found !`);
+            }
         }
     };
     const [searchTermDisableReason] = useState('search disabled');

demo/src/index.jsx

@@ -9,7 +9,6 @@ import { createRoot } from 'react-dom/client';
 
 import App from './app';
 
-// eslint-disable-next-line no-undef
 const container = document.querySelector('#demo');
 const root = createRoot(container);
 root.render(<App />);

demo/src/right-resizable-box.jsx

@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import-x/no-extraneous-dependencies */
 
 import { useState } from 'react';
 import { MoreVert as ResizePanelHandleIcon } from '@mui/icons-material';
@@ -64,7 +64,7 @@ function RightResizableBox(props) {
             setResizedTreePercentage(newPercentage);
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     const onResize = (event, { element, size }) => {
         updateResizedTreePercentage(size.width, windowWidth);
     };

eslint.config.js

@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/**
+ * Base ESLint config initially generated by `eslint-config-airbnb-extended` (v2.3.2)
+ * using the React + Prettier + TypeScript template, then manually adapted for Commons-ui.
+ * Source template:
+ * https://eslint-airbnb-extended.nishargshah.dev/cli/guide
+ * https://github.com/NishargShah/eslint-config-airbnb-extended/blob/v2.3.2/packages/create-airbnb-x-config/templates/react/prettier/ts/default/eslint.config.mjs
+ */
+
+import { configs, plugins } from 'eslint-config-airbnb-extended';
+import { rules as prettierConfigRules } from 'eslint-config-prettier';
+import prettierPlugin from 'eslint-plugin-prettier';
+import js from '@eslint/js';
+
+const jsConfig = [
+    // ESLint Recommended Rules
+    {
+        name: 'js/config',
+        ...js.configs.recommended,
+    },
+    // Stylistic Plugin
+    plugins.stylistic,
+    // Import X Plugin
+    plugins.importX,
+    // Airbnb Base Recommended Config
+    ...configs.base.recommended,
+];
+
+const reactConfig = [
+    // React Plugin
+    plugins.react,
+    // React Hooks Plugin
+    plugins.reactHooks,
+    // React JSX A11y Plugin
+    plugins.reactA11y,
+    // Airbnb React Recommended Config
+    ...configs.react.recommended,
+];
+
+const typescriptConfig = [
+    // TypeScript ESLint Plugin
+    plugins.typescriptEslint,
+    // Airbnb Base TypeScript Config
+    ...configs.base.typescript,
+    // Airbnb React TypeScript Config
+    ...configs.react.typescript,
+];
+
+const prettierConfig = [
+    // Prettier Plugin
+    {
+        name: 'prettier/plugin/config',
+        plugins: {
+            prettier: prettierPlugin,
+        },
+    },
+    // Prettier Config (disable conflicting rules)
+    {
+        name: 'prettier/config',
+        rules: {
+            ...prettierConfigRules,
+            'prettier/prettier': 'warn',
+        },
+    },
+];
+
+const projectConfig = [
+    {
+        name: 'project/ignores',
+        ignores: ['dist', 'coverage'],
+    },
+    // Settings
+    {
+        name: 'project/settings',
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+    },
+    // React JSX Runtime (prevents "React must be in scope" errors)
+    {
+        name: 'project/react-jsx-runtime',
+        files: ['**/*.{jsx,tsx}'],
+        rules: {
+            'react/react-in-jsx-scope': 'off',
+            'react/jsx-uses-react': 'off',
+        },
+    },
+    // Custom rules
+    {
+        name: 'project/rules',
+        rules: {
+            // Code style
+            curly: 'error',
+            'no-console': 'off',
+            'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
+
+            // React rules
+            'react/jsx-props-no-spreading': 'off',
+            'react/require-default-props': 'off',
+
+            // Import rules
+            'import-x/prefer-default-export': 'off',
+            'import-x/extensions': 'off',
+            'import-x/no-unresolved': 'off',
+            'import-x/no-useless-path-segments': 'off',
+            'import-x/no-extraneous-dependencies': [
+                'error',
+                {
+                    devDependencies: [
+                        'test/**',
+                        'tests/**',
+                        'spec/**',
+                        '**/__tests__/**',
+                        '**/__mocks__/**',
+                        'test.{js,jsx,ts,tsx}',
+                        'test-*.{js,jsx,ts,tsx}',
+                        '**/*{.,_}{test,spec}.{js,jsx,ts,tsx}',
+                        '**/jest.config.ts',
+                        '**/jest.setup.ts',
+                        '**/prettier.config.js',
+                        '**/vite.config.ts',
+                        '**/eslint.config.js',
+                    ],
+                    optionalDependencies: false,
+                },
+            ],
+
+            // MUI deep imports restriction
+            'no-restricted-imports': [
+                'warn',
+                {
+                    patterns: [
+                        {
+                            group: [
+                                '@mui/*/*',
+                                '!@mui/material/colors',
+                                '!@mui/material/locale',
+                                '!@mui/icons-material/*',
+                            ],
+                            message:
+                                'Deep imports from MUI libraries are forbidden. Import only from the library root.',
+                        },
+                    ],
+                },
+            ],
+
+            // Disable strict type-aware rules that weren't in old config
+            '@typescript-eslint/no-unsafe-enum-comparison': 'off',
+            '@typescript-eslint/consistent-type-definitions': 'off',
+            '@typescript-eslint/no-inferrable-types': 'off',
+            '@typescript-eslint/consistent-indexed-object-style': 'off',
+            '@typescript-eslint/no-empty-object-type': 'off',
+            '@typescript-eslint/no-unnecessary-template-expression': 'off',
+            '@typescript-eslint/no-duplicate-enum-values': 'off',
+            '@typescript-eslint/no-wrapper-object-types': 'off',
+            '@typescript-eslint/array-type': 'off',
+            '@typescript-eslint/no-unnecessary-type-arguments': 'off',
+            'arrow-body-style': 'off',
+            'no-shadow': 'off',
+            'no-unused-expressions': ['error', { allowShortCircuit: true }],
+            'prefer-arrow-callback': 'off',
+            'no-unused-vars': ['off', { argsIgnorePattern: '^_' }],
+            '@typescript-eslint/no-unnecessary-type-assertion': 'off',
+            'prefer-object-has-own': 'off',
+        },
+    },
+];
+
+export default [...jsConfig, ...reactConfig, ...typescriptConfig, ...prettierConfig, ...projectConfig];