Esas/migrate to react 18 prod 13948

eslint.config.mjs

@@ -0,0 +1,74 @@
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import { fixupPluginRules } from '@eslint/compat';
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import jest from 'eslint-plugin-jest';
+import prettier from 'eslint-plugin-prettier';
+import globals from 'globals';
+import neostandard from 'neostandard';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const neostandardConfig = neostandard({ semi: true, noStyle: true });
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: ['**/build', '**/dist', '**/.docz', '**/.github', '**/node_modules'],
+  },
+  ...neostandardConfig,
+  ...compat.extends('plugin:react/recommended', 'prettier', 'plugin:prettier/recommended'),
+  {
+    plugins: {
+      react,
+      'react-hooks': fixupPluginRules(reactHooks),
+      prettier,
+      jest,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        ...jest.environments.globals.globals,
+      },
+
+      ecmaVersion: 12,
+      sourceType: 'module',
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+
+    settings: {
+      react: {
+        version: '18',
+      },
+    },
+
+    rules: {
+      'no-constant-binary-expression': 'error',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      semi: [2, 'always'],
+
+      'max-len': [
+        'error',
+        {
+          code: 120,
+        },
+      ],
+    },
+  },
+];

package.json

@@ -25,48 +25,53 @@
   },
   "homepage": "https://github.com/Cosmo-Tech/webapp-component-ui#readme",
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.2",
-    "@babel/preset-react": "^7.24.7",
+    "@babel/core": "^7.25.8",
+    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
     "@cosmotech/azure": "^2.0.1",
     "@cosmotech/core": "^1.17.0",
+    "@eslint/compat": "^1.2.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.13.0",
     "@mui/icons-material": "^5.16.5",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.16.5",
     "@mui/styles": "^5.16.5",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-image": "^3.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^12.1.5",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "babel-jest": "^29.7.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.8.3",
     "eslint-plugin-jest-dom": "^5.4.0",
-    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-n": "^17.11.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-promise": "^6.6.0",
-    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-testing-library": "^6.4.0",
+    "globals": "^15.11.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.40",
+    "neostandard": "^0.11.6",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-i18next": "^13.5.0",
-    "rollup": "^4.19.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.1.0",
+    "rollup": "^4.24.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.12.0"
@@ -79,26 +84,27 @@
     "@mui/material": "^5.11.6",
     "@mui/styles": "^5.11.2",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-i18next": "^11.8.13"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.1.0"
   },
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@mui/x-date-pickers": "^5.0.20",
     "@nosferatu500/react-sortable-tree": "^3.0.6",
-    "ag-grid-community": "~32.0.2",
-    "ag-grid-react": "~32.0.2",
+    "ag-grid-community": "~32.2.2",
+    "ag-grid-react": "~32.2.2",
     "clsx": "^2.1.1",
-    "cytoscape": "^3.30.1",
+    "cytoscape": "^3.30.2",
     "cytoscape-bubblesets": "^3.2.2",
     "cytoscape-dagre": "^2.5.0",
     "cytoscape-layers": "^2.4.5",
+    "eslint-plugin-testing-library": "^6.3.0",
     "powerbi-client-react": "^1.4.0",
     "react-cytoscapejs": "^2.0.0",
-    "react-lottie-player": "^1.5.6",
-    "react-number-format": "^5.4.0",
+    "react-lottie-player": "^2.1.0",
+    "react-number-format": "^5.4.2",
     "rfdc": "^1.4.1"
   },
   "resolutions": {

rollup.config.mjs

@@ -1,11 +1,13 @@
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
+import image from '@rollup/plugin-image';
+import resolve from '@rollup/plugin-node-resolve';
+import { readFileSync } from 'fs';
 import external from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
-import resolve from '@rollup/plugin-node-resolve';
-import image from '@rollup/plugin-image';
 import { visualizer } from 'rollup-plugin-visualizer';
-import pkg from './package.json' assert { type: 'json' };
+
+const pkg = JSON.parse(readFileSync('./package.json'));
 
 export default {
   onwarn: (warning, warn) => {
@@ -46,7 +48,7 @@ export default {
       babelHelpers: 'bundled',
     }),
     resolve(),
-    commonjs(),
+    commonjs({ strictRequires: 'auto' }),
     image(),
     visualizer(),
   ],

src/buttons/CreateScenarioButton/CreateScenarioButton.js

@@ -5,6 +5,29 @@ import { Button, IconButton } from '@mui/material';
 import { FadingTooltip } from '../../misc';
 import CreateScenarioDialog from './components';
 
+const DEFAULT_LABELS = {
+  button: {
+    title: 'Create',
+    tooltip: 'Create new Scenario',
+  },
+  dialog: {
+    title: 'Create new Scenario',
+    scenarioName: 'Scenario Name',
+    scenarioMaster: 'Master',
+    scenarioParent: 'Scenario Parent',
+    datasetPlaceholder: 'Dataset',
+    dataset: 'Dataset',
+    scenarioTypePlaceholder: 'Scenario run type',
+    scenarioType: 'Run type',
+    cancel: 'Cancel',
+    create: 'Create',
+  },
+  errors: {
+    emptyScenarioName: 'Scenario Name should not be empty',
+    existingScenarioName: 'Scenario Name already exists',
+    forbiddenCharsInScenarioName: 'Forbidden characters in Scenario Name',
+  },
+};
 export const CreateScenarioButton = ({
   currentScenario,
   datasets,
@@ -15,10 +38,11 @@ export const CreateScenarioButton = ({
   createScenario,
   workspaceId,
   solution,
-  disabled,
-  labels,
+  disabled = false,
+  labels: tmpLabels,
   isIconButton,
 }) => {
+  const labels = { ...DEFAULT_LABELS, ...tmpLabels };
   const [open, setOpen] = useState(false);
   const openDialog = () => setOpen(true);
   const closeDialog = () => setOpen(false);
@@ -155,30 +179,3 @@ CreateScenarioButton.propTypes = {
    */
   isIconButton: PropTypes.bool,
 };
-
-CreateScenarioButton.defaultProps = {
-  disabled: false,
-  labels: {
-    button: {
-      title: 'Create',
-      tooltip: 'Create new Scenario',
-    },
-    dialog: {
-      title: 'Create new Scenario',
-      scenarioName: 'Scenario Name',
-      scenarioMaster: 'Master',
-      scenarioParent: 'Scenario Parent',
-      datasetPlaceholder: 'Dataset',
-      dataset: 'Dataset',
-      scenarioTypePlaceholder: 'Scenario run type',
-      scenarioType: 'Run type',
-      cancel: 'Cancel',
-      create: 'Create',
-    },
-    errors: {
-      emptyScenarioName: 'Scenario Name should not be empty',
-      existingScenarioName: 'Scenario Name already exists',
-      forbiddenCharsInScenarioName: 'Forbidden characters in Scenario Name',
-    },
-  },
-};

src/buttons/RolesEditionButton/RolesEditionButton.js

@@ -4,24 +4,32 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import ShareIcon from '@mui/icons-material/Share';
 import { Button, IconButton } from '@mui/material';
-import { FadingTooltip } from '../../misc/FadingTooltip';
+import { FadingTooltip } from '../../misc';
 import { RolesEditionDialog } from './components';
 
+const DEFAULT_LABELS = {
+  button: {
+    title: 'Share',
+    tooltip: 'Modify access',
+  },
+};
+
 export const RolesEditionButton = ({
-  labels,
-  isIconButton,
+  labels: tmpLabels,
+  isIconButton = false,
   agents,
   resourceRolesPermissionsMapping,
-  preventNoneRoleForAgents,
-  isReadOnly,
-  disabled,
+  preventNoneRoleForAgents = false,
+  isReadOnly = false,
+  disabled = false,
   onConfirmChanges,
   specificAccessByAgent,
-  defaultRole,
+  defaultRole = '',
   allRoles,
   allPermissions,
   defaultAccessScope,
 }) => {
+  const labels = { ...DEFAULT_LABELS, ...tmpLabels };
   const [open, setOpen] = useState(false);
   const openDialog = () => setOpen(true);
   const closeDialog = () => setOpen(false);
@@ -173,16 +181,3 @@ RolesEditionButton.propTypes = {
     dialog: PropTypes.object.isRequired,
   }),
 };
-RolesEditionButton.defaultProps = {
-  isIconButton: false,
-  isReadOnly: false,
-  disabled: false,
-  preventNoneRoleForAgents: false,
-  defaultRole: '',
-  labels: {
-    button: {
-      title: 'Share',
-      tooltip: 'Modify access',
-    },
-  },
-};