wip

react/.eslintrc → react/.eslintrc.cjs

@@ -1,4 +1,4 @@
-{
+module.exports = {
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
         "ecmaVersion": 6,

react/package.json

@@ -32,88 +32,69 @@
         "preversion": "npm run lint",
         "typecheck": "tsc --noEmit",
         "format": "eslint --fix \"src/**/*.{ts,tsx,js,jsx,json,css}\" \"tests/**/*.{ts,tsx,js,jsx,json,css}\"",
-        "lint": "eslint \"src/**/*.{ts,tsx,js,jsx,json,css}\" \"tests/**/*.{ts,tsx,js,jsx,json,css}\"",
+        "lint": "eslint 'src/**/*.+(ts|tsx|js|jsx|json)' 'tests/**/*.+(ts|tsx|js|jsx|json)'",
         "validate": "npm run typecheck && npm run lint",
-        "test": "jest",
-        "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook"
+        "test": "jest"
     },
     "author": "Equinor <[email protected]>",
     "license": "MIT",
     "dependencies": {
-        "@equinor/eds-core-react": "^0.31.1",
-        "@equinor/eds-icons": "^0.19.2",
-        "@material-ui/core": "^4.11.3",
-        "@material-ui/lab": "^4.0.0-alpha.57",
-        "@react-hook/size": "^2.1.2",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@equinor/eds-core-react": "^0.33.0",
+        "@equinor/eds-icons": "^0.19.3",
+        "@mui/material": "^5.11",
         "animate.css": "^4.1.1",
-        "classnames": "^2.3.2",
+        "classnames": "^2.5.1",
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
         "notistack": "^3.0.1",
-        "react-colorscales": "^0.7.3",
-        "react-draggable": "^4.4.5",
-        "reactour": "^1.19.0",
-        "styled-components": "^5.3.11",
-        "uuid": "^8.3.2"
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-draggable": "^4.4.6",
+        "reactour": "^1.19.4",
+        "uuid": "^11.0.3"
     },
     "devDependencies": {
         "@babel/core": "^7.13.10",
         "@babel/plugin-proposal-class-properties": "^7.13.0",
         "@babel/preset-env": "^7.13.12",
         "@babel/preset-react": "^7.12.13",
         "@babel/preset-typescript": "^7.13.0",
-        "@storybook/addon-actions": "^6.4.18",
-        "@storybook/addon-essentials": "^6.4.18",
-        "@storybook/addon-links": "^6.4.18",
-        "@storybook/builder-webpack5": "^6.4.18",
-        "@storybook/manager-webpack5": "^6.4.18",
-        "@storybook/react": "^6.4.18",
-        "@testing-library/react": "^12.1.2",
-        "@testing-library/user-event": "^13.5.0",
-        "@types/jest": "^26.0.23",
-        "@types/lodash": "^4.14.176",
-        "@types/react": "^17.0.3",
-        "@types/react-dom": "^17.0.3",
-        "@types/reactour": "^1.18.2",
-        "@types/uuid": "^8.3.2",
-        "@typescript-eslint/eslint-plugin": "^5.61.0",
-        "@typescript-eslint/parser": "^5.61.0",
-        "babel-jest": "^26.6.3",
-        "babel-loader": "^8.2.2",
-        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+        "@testing-library/react": "^16.1.0",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/jest": "^29.5.14",
+        "@types/lodash": "^4.17.13",
+        "@types/prop-types": "15.7.8",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "@types/reactour": "^1.18.5",
+        "@types/uuid": "^10.0.0",
+        "@typescript-eslint/eslint-plugin": "^8.18.1",
+        "@typescript-eslint/parser": "^8.18.1",
+        "babel-jest": "^29.7.0",
+        "babel-loader": "^9.2.1",
         "copyfiles": "^2.4.1",
-        "css-loader": "^5.1.3",
-        "css-minimizer-webpack-plugin": "^4.2.2",
-        "dotenv-webpack": "^7.0.2",
-        "eslint": "^8.44.0",
-        "eslint-config-prettier": "^8.8.0",
-        "eslint-plugin-import": "^2.27.5",
-        "eslint-plugin-react": "^7.32.2",
+        "css-loader": "^5.2.7",
+        "eslint": "^8.40.0",
+        "eslint-config-prettier": "^8.6.0",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-react": "^7.37.2",
         "file-loader": "^6.2.0",
-        "jest": "^26.6.3",
-        "mini-css-extract-plugin": "^1.3.9",
-        "prop-types": "^15.7.2",
-        "react": "^16.14.0",
-        "react-docgen": "^5.3.1",
-        "react-dom": "^16.14.0",
-        "react-test-renderer": "^16.14.0",
-        "rimraf": "^2.7.1",
-        "style-loader": "^2.0.0",
-        "styled-jsx": "^5.1.0",
-        "ts-loader": "^8.0.18",
+        "jest": "^29.7.0",
+        "prop-types": "^15.8.1",
+        "react-docgen": "^5.4.2",
+        "rimraf": "^5.0.0",
+        "style-loader": "^3.3.1",
+        "ts-loader": "^9.3.1",
         "tsconfig.js": "^3.0.0",
-        "typescript": "^4.2.3",
+        "typescript": "^4.9.5",
         "url-loader": "^4.1.1",
-        "webpack": "^5.27.2",
-        "webpack-cli": "^4.5.0",
-        "webpack-dev-server": "^4.11.0"
-    },
-    "engines": {
-        "node": ">=16",
-        "npm": ">=7"
+        "webpack": "^5.94.0",
+        "webpack-cli": "^4.10.0",
+        "webpack-dev-server": "^5.2.0"
     },
     "volta": {
         "node": "16.18.1"
     }
-}
+}

react/src/demo/App.tsx

@@ -6,7 +6,7 @@
  */
 
 /* eslint no-magic-numbers: 0 */
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
 import React from "react";
 
 import {

react/src/demo/index.tsx

@@ -7,7 +7,15 @@
 
 
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+const container = document.getElementById("root");
+
+if (!container) {
+    throw new Error("Root element not found");
+}
+
+const root = createRoot(container);
+
+root.render(<App />);

react/src/lib/components/Dialog/components/DialogComponent.tsx

@@ -8,8 +8,8 @@ import {
     DialogContent,
     DialogTitle,
     IconButton,
-} from "@material-ui/core";
-import Paper from "@material-ui/core/Paper";
+} from "@mui/material";
+import Paper from "@mui/material/Paper";
 
 import { Icon } from "@equinor/eds-core-react";
 import { close } from "@equinor/eds-icons";
@@ -126,6 +126,7 @@ export const DialogComponent: React.FC<DialogProps> = (props) => {
                         color: "#ccc",
                     }}
                 >
+                    { /* @ts-expect-error - this is a very weird bug */}
                     <Icon name="close" />
                 </IconButton>
             </DialogTitle>
@@ -161,7 +162,7 @@ export const DialogComponent: React.FC<DialogProps> = (props) => {
             scroll="body"
             style={{ pointerEvents: "none" }}
         >
-            {content}
+            <>{content}</>
         </MuiDialog>
     );
 };

react/src/lib/components/Dialog/components/DraggablePaperComponent.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import Paper, { PaperProps } from "@material-ui/core/Paper";
+import Paper, { PaperProps } from "@mui/material/Paper";
 import Draggable from "react-draggable";
 
 export const DraggablePaperComponent: React.FC<PaperProps> = (props) => {