Update to React 18 and MUI 6

.github/workflows/node.install.yml

@@ -27,3 +27,4 @@ jobs:
     - run: npm ci
     - run: npm run all-checks
     - run: npm run test
+    - run: npm run rollup

package.json

@@ -19,63 +19,65 @@
   },
   "dependencies": {
     "apollo-link-retry": "^2.2.16",
-    "bufferutil": "^4.0.7",
-    "loglevel": "^1.8.0",
-    "plotly.js": "^2.20.0",
-    "plotly.js-basic-dist": "^2.20.0",
+    "bufferutil": "^4.0.8",
+    "loglevel": "^1.9.2",
+    "plotly.js": "^2.35.2",
+    "plotly.js-basic-dist": "^2.35.2",
     "react-plotly.js": "^2.6.0",
-    "redux": "^4.1.2",
+    "redux": "^4.2.1",
     "utf-8-validate": "^5.0.10",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@apollo/client": "^3.6.0",
-    "@material-ui/core": "^4.9.9",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.0.0",
-    "@types/jest": "^27.4.0",
-    "@types/node": "^22.5.2",
-    "@types/react-plotly.js": "^2.5.2",
-    "@types/react-test-renderer": "^17.0.1",
+    "@apollo/client": "^3.11.8",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.6",
+    "@rollup/plugin-commonjs": "^28",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^22.9.0",
+    "@types/react-plotly.js": "^2.6.3",
+    "@types/react-test-renderer": "^18.3.0",
     "@types/uuid": "^9.0.8",
-    "@vitejs/plugin-react": "^4.3.1",
-    "base64-js": "^1.3.1",
+    "@typescript-eslint/typescript-estree": "^8.13.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "base64-js": "^1.5.1",
     "clipboard-copy": "^4.0.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-unicorn": "^55.0.0",
-    "graphql-ws": "^5.9.1",
-    "jsdom": "^25.0.0",
-    "loglevel": "^1.8.0",
+    "graphql-ws": "^5.16.0",
+    "jsdom": "^25.0.1",
+    "loglevel": "^1.9.2",
     "prettier": "^3.3.3",
-    "react-id-generator": "^3.0.0",
-    "react-test-renderer": "^17.0.0",
-    "react-tiny-popover": "^6.0.10",
-    "rollup": "^2.63.0",
-    "rollup-plugin-dts": "^4.1.0",
+    "react-id-generator": "^3.0.2",
+    "react-test-renderer": "^18.3.1",
+    "react-tiny-popover": "^8.1.2",
+    "rollup": "^4",
+    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.5.4",
-    "vite": "^5.4.2",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-node-polyfills": "^0.22.0",
-    "vitest": "^2.0.5",
+    "vitest": "^2.1.4",
     "vitest-canvas-mock": "^0.3.3",
     "vitest-websocket-mock": "^0.4.0",
     "xml-js": "^1.6.11"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.38",
-    "@types/react-router-dom": "^5.1.2",
-    "react": "^17.0.0",
-    "react-redux": "^7.1.3",
-    "react-router-dom": "^5.2.0"
+    "@types/react": "^18.3.1",
+    "@types/react-router-dom": "^5.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^7.2.9",
+    "react-router-dom": "^5.3.4"
   },
   "module": "dist/esm/index.js",
   "files": [
@@ -86,4 +88,4 @@
     "trailingComma": "none",
     "arrowParens": "avoid"
   }
-}
+}

rollup.config.js → rollup.config.mjs

@@ -4,38 +4,41 @@ import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
 
 import postcss from "rollup-plugin-postcss";
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
 
-const packageJson = require("./package.json");
-
-export default [
+const config = [
   {
     input: "src/index.ts",
     output: [
       {
-        file: packageJson.main,
+        file: "dist/cjs/index.js",
         format: "cjs",
-        sourcemap: true,
+        sourcemap: true
       },
       {
-        file: packageJson.module,
+        file: "dist/esm/index.js",
         format: "esm",
-        sourcemap: true,
-      },
+        sourcemap: true
+      }
     ],
     plugins: [
       peerDepsExternal(),
       resolve({ preferBuiltins: true }),
       commonjs(),
-      typescript({ tsconfig: "./tsconfig.json" }),
-      postcss(),
-    ],
+      typescript({
+        tsconfig: "./tsconfig.json",
+        compilerOptions: { outDir: "dist" }
+      }),
+      postcss()
+    ]
   },
   {
     input: "dist/esm/index.d.ts",
     output: [{ file: "dist/index.d.ts", format: "esm" }],
     plugins: [dts()],
 
-    external: [/\.css$/],
-  },
+    external: [/\.css$/]
+  }
 ];
+
+export default config;

src/ui/hooks/useRules.test.tsx

@@ -10,7 +10,7 @@ import { CsState } from "../../redux/csState";
 function getRuleTester(props: any): JSX.Element {
   const RuleTester = (props: { id: string; rules: Rule[] }): JSX.Element => {
     const ruleProps = useRules(props as AnyProps);
-    return <div>{ruleProps.text}</div>;
+    return <div>{ruleProps.text.toString()}</div>;
   };
   return <RuleTester {...props} />;
 }

src/ui/widgets/Drawer/drawer.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Drawer from "@material-ui/core/Drawer";
+import Drawer from "@mui/material/Drawer";
 
 import { Widget } from "../widget";
 import { WidgetPropType } from "../widgetProps";

tsconfig.json

@@ -7,7 +7,7 @@
     "declaration": true,
     "sourceMap": true,
     "outDir": "dist",
-    "declarationDir": "types",
+    "declarationDir": "dist",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
@@ -24,7 +24,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "types": [
-      "vite/client"
+      "vite/client", "jest", "@testing-library/jest-dom", "node"
     ],
   },
   "include": [