Upgrade react, react-scripts, storybook, and any other necessary libr…

web-ui/.storybook/main.js

@@ -1,11 +1,22 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
+  "stories": ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  "staticDirs": ["../public"], //👈 Configures the static asset folder in Storybook
+  "core": {
+    "disableTelemetry": true, // 👈 Disables telemetry
+  },
+
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/preset-create-react-app"
-  ]
+  ],
+
+  "framework": {
+    "name": "@storybook/react-webpack5",
+    "options": {}
+  },
+
+  "docs": {
+    "autodocs": true
+  }
 }

web-ui/build.gradle

@@ -4,7 +4,7 @@ plugins {
 }
 
 node {
-    version = '14.17.6' // https://nodejs.org/en/
+    version = '20.11.1' // https://nodejs.org/en/
     yarnVersion = '1.22.5' // https://yarnpkg.com/en/
     download = true
 }

web-ui/package.json

@@ -31,20 +31,21 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@emotion/jest": "^11.5.0",
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@fortawesome/free-regular-svg-icons": "^6.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/react-fontawesome": "^0.1.17",
-    "@mui/icons-material": "^5.0.1",
-    "@mui/lab": "^5.0.0-alpha.48",
-    "@mui/material": "^5.0.4",
-    "@mui/styled-engine-sc": "^5.0.0",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/lab": "^5.0.0-alpha.169",
+    "@mui/material": "^5.15.14",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@mui/styles": "^5.0.1",
+    "@mui/x-date-pickers": "^7.0.0",
     "@nivo/core": "^0.73.0",
     "@nivo/radar": "^0.73.0",
-    "@tinymce/tinymce-react": "^4.2.0",
+    "@tinymce/tinymce-react": "^4.3.2",
     "axios": "^1.6.0",
     "canvas-confetti": "^1.6.0",
     "date-fns": "^2.24.0",
@@ -53,14 +54,14 @@
     "jest-fetch-mock": "^3.0.3",
     "js-file-download": "^0.4.12",
     "lodash": "^4.17.21",
-    "mjml": "^4.12.0",
-    "mjml-browser": "^4.12.0",
+    "mjml": "^4.15.3",
+    "mjml-browser": "^4.15.3",
     "msw": "^0.35.0",
     "query-string": "^7.0.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-csv": "^2.2.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.3",
     "react-html-parser": "^2.0.2",
     "react-jss": "^10.4.0",
@@ -69,7 +70,7 @@
     "react-quill": "^1.3.5",
     "react-router-dom": "^5.3.0",
     "react-swipeable-views": "^0.14.0",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.2.0",
     "reselect": "^4.0.0",
     "sanitize-html": "^2.12.1",
     "styled-components": "^5.3.1",
@@ -84,8 +85,8 @@
     "test": "react-scripts test",
     "coverage": "yarn test --coverage",
     "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -103,22 +104,25 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/node-logger": "^6.3.8",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.8",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.1",
-    "@testing-library/user-event": "^13.2.1",
+    "@babel/plugin-transform-private-property-in-object": "^7.24.1",
+    "@storybook/addon-actions": "^8.0.4",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/node-logger": "^8.0.4",
+    "@storybook/preset-create-react-app": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-webpack5": "^8.0.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@testing-library/user-event": "^14.5.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "babel-loader": "8.1.0",
+    "babel-loader": "^8.1.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
     "prettier": "2.8.1",
-    "prop-types": "^15.7.2",
-    "react-is": "^17.0.2",
-    "react-scripts": "5.0.0"
+    "prop-types": "^15.8.1",
+    "react-is": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "storybook": "^8.0.4"
   }
 }

web-ui/src/App.js

@@ -8,8 +8,8 @@ import Menu from "./components/menu/Menu";
 import ErrorFallback from "./pages/ErrorBoundaryPage";
 import { AppContextProvider } from "./context/AppContext";
 import SnackBarWithContext from "./components/snackbar/SnackBarWithContext";
-import AdapterDateFns from "@mui/lab/AdapterDateFns";
-import LocalizationProvider from "@mui/lab/LocalizationProvider";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { LocalizationProvider } from "@mui/x-date-pickers";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 import "./App.css";

web-ui/src/components/action_item/__snapshots__/ActionItemsPanel.test.js.snap

@@ -231,7 +231,7 @@ exports[`renders correctly 1`] = `
           viewBox="0 0 24 24"
         >
           <path
-            d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+            d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"
           />
         </svg>
       </button>