Resolve legacy peers (#112)

* remove obsolete `@mui/styles` * Remove legacy-peer-deps (have to temporally resolve typescript version conflict use by react-scripts until the migration to Vite)
gridsuite · Apr 9, 2024 · b5f635b · b5f635b
1 parent c0a1d35
commit b5f635b
Show file tree

Hide file tree

Showing 12 changed files with 460 additions and 751 deletions.
diff --git a/.npmrc b/.npmrc
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,12 +7,11 @@
     "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
-        "@gridsuite/commons-ui": "0.52.1",
+        "@gridsuite/commons-ui": "0.53.0",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",
         "@mui/x-tree-view": "^6.17.0",
         "@mui/material": "^5.15.14",
-        "@mui/styles": "^5.15.14",
         "@mui/x-date-pickers": "^7.1.0",
         "@reduxjs/toolkit": "^2.2.3",
         "@types/node": "^20.12.2",
@@ -38,6 +37,11 @@
         "typeface-roboto": "^1.1.13",
         "typescript": "5.1.6"
     },
+    "overrides": {
+        "react-scripts": {
+            "typescript": "$typescript"
+        }
+    },
     "scripts": {
         "start": "PORT=3001 react-scripts start",
         "build": "react-scripts build",

diff --git a/src/components/app-top-bar.js b/src/components/app-top-bar.js
@@ -4,8 +4,9 @@
  * 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/.
  */
-import React, { useEffect, useMemo, useState } from 'react';
-import { LIGHT_THEME, logout, TopBar } from '@gridsuite/commons-ui';
+
+import { useEffect, useMemo, useState } from 'react';
+import { logout, TopBar } from '@gridsuite/commons-ui';
 import Parameters, { useParameterState } from './parameters';
 import { PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
 import { useDispatch, useSelector } from 'react-redux';
@@ -16,37 +17,34 @@ import {
     getServersInfos,
 } from '../utils/rest-api';
 import PropTypes from 'prop-types';
-import { useNavigate, useMatch } from 'react-router-dom';
+import { useMatch, useNavigate } from 'react-router-dom';
 import { ReactComponent as GridMergeLogoLight } from '../images/GridMerge_logo_light.svg';
 import { ReactComponent as GridMergeLogoDark } from '../images/GridMerge_logo_dark.svg';
-import { Tabs, Tab, Button } from '@mui/material';
+import { Button, Tab, Tabs, useTheme } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import ProcessesConfigurationDialog from './processes-configuration-dialog';
-import { makeStyles } from '@mui/styles';
 import { initProcesses } from '../redux/actions';
 import AppPackage from '../../package.json';
 
 export const PREFIX_URL_PROCESSES = '/processes';
 
-const useStyles = makeStyles(() => ({
+const styles = {
     process: {
         marginLeft: 18,
     },
     btnConfigurationProcesses: {
         marginLeft: 'auto',
     },
-}));
+};
 
 const AppTopBar = ({ user, userManager }) => {
     const navigate = useNavigate();
 
     const dispatch = useDispatch();
 
-    const classes = useStyles();
-
     const [appsAndUrls, setAppsAndUrls] = useState([]);
 
-    const theme = useSelector((state) => state[PARAM_THEME]);
+    const theme = useTheme();
 
     const configs = useSelector((state) => state.configs);
 
@@ -93,7 +91,7 @@ const AppTopBar = ({ user, userManager }) => {
                 appName="Merge"
                 appColor="#4795D1"
                 appLogo={
-                    theme === LIGHT_THEME ? (
+                    theme.palette.mode === 'light' ? (
                         <GridMergeLogoLight />
                     ) : (
                         <GridMergeLogoDark />
@@ -124,7 +122,7 @@ const AppTopBar = ({ user, userManager }) => {
                         navigate(PREFIX_URL_PROCESSES + '/' + newValue)
                     }
                     aria-label="parameters"
-                    className={classes.process}
+                    sx={styles.process}
                 >
                     {configs.map((config) => (
                         <Tab
@@ -137,7 +135,7 @@ const AppTopBar = ({ user, userManager }) => {
                 {user && (
                     <>
                         <Button
-                            className={classes.btnConfigurationProcesses}
+                            sx={styles.btnConfigurationProcesses}
                             onClick={() => setShowConfigurationProcesses(true)}
                         >
                             <FormattedMessage id="configureProcesses" />

diff --git a/src/components/country-state-item.js b/src/components/country-state-item.js
@@ -4,17 +4,16 @@
  * 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/.
  */
-import React from 'react';
+
 import { Box, Divider, Grid, Typography } from '@mui/material';
 import LensIcon from '@mui/icons-material/Lens';
 import PropTypes from 'prop-types';
-import makeStyles from '@mui/styles/makeStyles';
 import { getIgmStatus, MergeType } from '../utils/rest-api';
 import { getDetailsByCountryOrTso } from '../utils/tso-country-details';
 import { tsoColor } from './merge-map';
 import { useIntl } from 'react-intl';
 
-const useStyles = makeStyles((theme) => ({
+const styles = {
     tsosColumn: {
         flexGrow: 1,
         width: 80,
@@ -31,18 +30,17 @@ const useStyles = makeStyles((theme) => ({
         width: 32,
         marginTop: 8,
     },
-    listItem: {
+    listItem: (theme) => ({
         backgroundColor: theme.palette.background.paper,
-    },
+    }),
     divider: {
         marginTop: 4,
         color: '#ECF5FD',
     },
-    smallText: theme.typography.caption,
-}));
+    smallText: (theme) => theme.typography.caption,
+};
 
 const CountryStateItem = (props) => {
-    const classes = useStyles();
     const intl = useIntl();
 
     const detail = getDetailsByCountryOrTso(props.tso.toUpperCase());
@@ -57,42 +55,33 @@ const CountryStateItem = (props) => {
         replacedWith += new Date(status.replacingDate).toLocaleString();
     }
     return (
-        <Box className={classes.listItem}>
+        <Box sx={styles.listItem}>
             <Grid container>
                 <Grid
                     item
                     xs={12}
                     style={{ display: 'flex', width: '100%', padding: 8 }}
                 >
-                    <LensIcon
-                        className={classes.stateIcon}
-                        style={{ color: color }}
-                    />
-                    <Box className={classes.tsosColumn}>
+                    <LensIcon sx={styles.stateIcon} style={{ color: color }} />
+                    <Box sx={styles.tsosColumn}>
                         <Typography variant="body1">{props.tso}</Typography>
                         <Typography variant="caption">
                             {detail.countryName}
                         </Typography>
                     </Box>
                     {replacedWith && (
-                        <Box className={classes.textReplace}>
-                            <Typography
-                                variant="body1"
-                                className={classes.smallText}
-                            >
+                        <Box sx={styles.textReplace}>
+                            <Typography variant="body1" sx={styles.smallText}>
                                 {intl.formatMessage({ id: 'ReplacedWith' })}
                             </Typography>
-                            <Typography
-                                variant="body1"
-                                className={classes.smallText}
-                            >
+                            <Typography variant="body1" sx={styles.smallText}>
                                 {replacedWith}
                             </Typography>
                         </Box>
                     )}
                 </Grid>
                 <Grid item xs={12}>
-                    <Divider className={classes.divider} />
+                    <Divider sx={styles.divider} />
                 </Grid>
             </Grid>
         </Box>

diff --git a/src/components/merge-map.js b/src/components/merge-map.js
@@ -5,33 +5,33 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ComposableMap, Geographies, Geography } from 'react-simple-maps';
-
-import makeStyles from '@mui/styles/makeStyles';
+import { styled } from '@mui/material';
+import {
+    ComposableMap,
+    Geographies,
+    Geography as RawGeography,
+} from 'react-simple-maps';
 import bbox from 'geojson-bbox';
 import {
-    IgmStatus,
+    CgmStatus,
     getIgmStatus,
+    IgmStatus,
     MergeType,
-    CgmStatus,
 } from '../utils/rest-api';
 import { Tooltip } from 'react-tooltip';
 import { getDetailsByCountryOrTso } from '../utils/tso-country-details';
 
-const TSO_STROKE_COLOR = 'white';
+const Geography = styled(RawGeography)({
+    stroke: 'white',
+    strokeWidth: '1px',
+    vectorEffect: 'non-scaling-stroke',
+});
+
 const DEFAULT_CENTER = [0, 0];
 const DEFAULT_SCALE = 35000;
 
-const useStyles = makeStyles((theme) => ({
-    tso: {
-        stroke: TSO_STROKE_COLOR,
-        strokeWidth: '1px',
-        vectorEffect: 'non-scaling-stroke',
-    },
-}));
-
 const LIGHT_BLUE_COLOR = '#009CD8';
 const LIGHT_YELLOW_COLOR = '#F8E67E';
 const DARK_BLUE_COLOR = '#02538B';
@@ -91,8 +91,6 @@ const MergeMap = (props) => {
 
     const [tooltip, setTooltip] = useState('');
 
-    const classes = useStyles();
-
     function computeBoundingBox(geoJsons) {
         const reducer = (oldBb, json) => {
             const newBb = bbox(json);
@@ -170,7 +168,7 @@ const MergeMap = (props) => {
                                 <Geography
                                     key={geo.rsmKey}
                                     geography={geo}
-                                    className={classes.tso}
+                                    className="tso"
                                     fill={color}
                                     onMouseEnter={() => {
                                         if (
@@ -235,4 +233,4 @@ MergeMap.propTypes = {
     config: PropTypes.object,
 };
 
-export default React.memo(MergeMap);
+export default memo(MergeMap);