Update dependencies (#1105)

Noteworthy updates
- Storybook v7 -> Storybook v8
- css-loader v6 -> v7
- http-proxy-middleware v2 -> v3

Author: azangru

.storybook/main.js

@@ -3,11 +3,16 @@ import webpackConfig from './webpack';
 export default {
   stories: ['../stories/**/*.stories.tsx'],
   webpackFinal: config => webpackConfig(config),
-  addons: ['@storybook/addon-essentials'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-webpack5-compiler-babel'],
   framework: {
     name: '@storybook/react-webpack5',
     options: {}
   },
+  // Storybook 8 changed the default component analysis tool from react-docgen-typescript to react-docgen.
+  // This has caused problems with the building of our stories; so the `typescript` below opts out of this change.
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
   core: {
     disableTelemetry: true, // 👈 Disables telemetry
   }

.storybook/manager.js

@@ -1,4 +1,5 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
+
 import { create as createTheme } from '@storybook/theming/create';
 
 const ensemblTheme = createTheme({

.storybook/webpack.js

@@ -29,7 +29,9 @@ export default (config) => {
           sourceMap: true,
           modules: {
             auto: true, // will match all files with a pattern /\.module\.\w+$/
-            localIdentName: '[local]__[name]__[hash:base64:5]'
+            localIdentName: '[local]__[name]__[hash:base64:5]',
+            namedExport: false, // since v 7.0 it is true by default, should we refactor our code to "import * as styles ..."?
+            exportLocalsConvention: 'as-is', // consequence of using `namedExport: false` (the loader in this mode also camel-cases css class names). If namedExports were true, this field wouldn't have been needed
           }
         }
       },

package-lock.json

@@ -32,73 +32,73 @@
   "dependencies": {
     "@ensembl/ensembl-genome-browser": "0.6.10",
     "@react-spring/web": "9.7.3",
-    "@reduxjs/toolkit": "2.2.1",
-    "@sentry/browser": "7.105.0",
+    "@reduxjs/toolkit": "2.2.3",
+    "@sentry/browser": "7.110.1",
+    "@storybook/addon-essentials": "8.0.8",
     "classnames": "2.5.1",
     "comlink": "4.4.1",
-    "core-js": "3.36.0",
-    "d3": "7.8.5",
-    "express": "4.18.3",
-    "filesize": "10.1.0",
+    "core-js": "3.37.0",
+    "d3": "7.9.0",
+    "express": "4.19.2",
+    "filesize": "10.1.1",
     "graphql": "16.8.1",
     "graphql-request": "6.1.0",
-    "http-proxy-middleware": "2.0.6",
+    "http-proxy-middleware": "3.0.0",
     "idb": "8.0.0",
     "jszip": "3.10.1",
     "lodash": "4.17.21",
     "react": "18.3.0-next-0ffc7f632-20230330",
     "react-dom": "18.3.0-next-0ffc7f632-20230330",
-    "react-redux": "9.1.0",
-    "react-router": "6.22.2",
-    "react-router-dom": "6.22.2",
+    "react-redux": "9.1.1",
+    "react-router": "6.22.3",
+    "react-router-dom": "6.22.3",
     "redux": "5.0.1",
     "redux-observable": "3.0.0-rc.2",
     "redux-thunk": "3.1.0",
     "rxjs": "7.8.1"
   },
   "devDependencies": {
-    "@babel/core": "7.24.0",
-    "@babel/plugin-transform-modules-commonjs": "7.23.3",
-    "@babel/preset-env": "7.24.0",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
+    "@babel/core": "7.24.4",
+    "@babel/plugin-transform-modules-commonjs": "7.24.1",
+    "@babel/preset-env": "7.24.4",
+    "@babel/preset-react": "7.24.1",
+    "@babel/preset-typescript": "7.24.1",
     "@faker-js/faker": "8.4.1",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/addons": "7.6.17",
-    "@storybook/react": "7.6.17",
-    "@storybook/react-webpack5": "7.6.17",
-    "@storybook/theming": "7.6.17",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+    "@storybook/manager-api": "8.0.8",
+    "@storybook/react": "8.0.8",
+    "@storybook/react-webpack5": "8.0.8",
+    "@storybook/theming": "8.0.8",
     "@svgr/webpack": "8.1.0",
     "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.1",
+    "@testing-library/react": "15.0.2",
     "@testing-library/user-event": "14.5.2",
     "@types/d3": "7.4.3",
     "@types/express": "4.17.21",
     "@types/jest": "29.5.12",
-    "@types/lodash": "4.14.202",
-    "@types/node": "20.11.25",
-    "@types/prettier": "3.0.0",
-    "@types/react": "18.2.64",
-    "@types/react-dom": "18.2.20",
+    "@types/lodash": "4.17.0",
+    "@types/node": "20.12.7",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
     "@types/react-redux": "7.1.33",
     "@types/react-router-dom": "5.3.3",
     "@types/webpack-env": "1.18.4",
     "@types/webpack-hot-middleware": "2.25.9",
     "@types/webpack-node-externals": "3.0.4",
-    "@typescript-eslint/eslint-plugin": "7.1.1",
-    "@typescript-eslint/parser": "7.1.1",
+    "@typescript-eslint/eslint-plugin": "7.5.0",
+    "@typescript-eslint/parser": "7.5.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-react-remove-properties": "0.3.0",
     "compression-webpack-plugin": "11.1.0",
     "copy-webpack-plugin": "12.0.2",
-    "css-loader": "6.10.0",
+    "css-loader": "7.1.1",
     "css-minimizer-webpack-plugin": "6.0.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jest": "27.9.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.34.0",
+    "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "fake-indexeddb": "5.0.2",
     "fork-ts-checker-webpack-plugin": "9.0.2",
@@ -110,29 +110,29 @@
     "jest-transform-stub": "2.0.0",
     "licence-manager": "git+https://github.com/Ensembl/ensembl-licence-manager.git#36b534d28ff26d345b4ba4da0cbc18e1e0f7a6b7",
     "lint-staged": "15.2.2",
-    "mini-css-extract-plugin": "2.8.1",
-    "msw": "2.2.2",
+    "mini-css-extract-plugin": "2.9.0",
+    "msw": "2.2.14",
     "nodemon": "3.1.0",
-    "postcss": "8.4.35",
+    "postcss": "8.4.38",
     "postcss-loader": "8.1.1",
-    "postcss-preset-env": "9.5.0",
+    "postcss-preset-env": "9.5.5",
     "prettier": "3.2.5",
     "rimraf": "5.0.5",
     "source-map-loader": "5.0.0",
-    "storybook": "7.6.17",
-    "style-loader": "3.3.4",
-    "stylelint": "16.2.1",
+    "storybook": "8.0.8",
+    "style-loader": "4.0.0",
+    "stylelint": "16.3.1",
     "stylelint-config-standard": "36.0.0",
     "stylelint-webpack-plugin": "5.0.0",
     "terser-webpack-plugin": "5.3.10",
     "ts-multipick": "1.0.0",
     "ts-node": "10.9.2",
-    "typescript": "5.4.2",
-    "webpack": "5.90.3",
-    "webpack-bundle-analyzer": "4.10.1",
+    "typescript": "5.4.5",
+    "webpack": "5.91.0",
+    "webpack-bundle-analyzer": "4.10.2",
     "webpack-cli": "5.1.4",
-    "webpack-dev-middleware": "7.0.0",
-    "webpack-dev-server": "5.0.2",
+    "webpack-dev-middleware": "7.2.1",
+    "webpack-dev-server": "5.0.4",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-merge": "5.10.0",
     "webpack-node-externals": "3.0.0",
@@ -142,8 +142,8 @@
     "msw": {
       "typescript": "$typescript"
     },
-    "react": "$react",
-    "react-dom": "$react-dom"
+    "react": "18.3.0-next-0ffc7f632-20230330",
+    "react-dom": "18.3.0-next-0ffc7f632-20230330"
   },
   "browserslist": [
     "> 1% and last 2 versions",

package.json

@@ -33,16 +33,15 @@ const serverConfig = getConfigForServer();
  * while directing requests for the genome browser backend to your locally running server,
  * change the body of the createApiProxyMiddleware function as follows:
 
-  const apiProxyMiddleware = createHttpProxyMiddleware(
-    ['/api/**', '!/api/browser/**'],
-    {
-      target: 'https://staging-2020.ensembl.org',
-      changeOrigin: true,
-      secure: false
-    }
-  );
+  const apiProxyMiddleware = createHttpProxyMiddleware({
+    pathFilter: ['/api/**', '!/api/browser/**'],
+    target: 'https://staging-2020.ensembl.org',
+    changeOrigin: true,
+    secure: false
+  });
 
-  const browserProxyMiddleware = createHttpProxyMiddleware('/api/browser/**', {
+  const browserProxyMiddleware = createHttpProxyMiddleware({
+    pathFilter: '/api/browser/**',
     target: 'http://localhost:3333',
     pathRewrite: {
       '^/api/browser': '/api' // rewrite path
@@ -55,7 +54,8 @@ const serverConfig = getConfigForServer();
 */
 
 const createApiProxyMiddleware = () => {
-  const apiProxyMiddleware = createHttpProxyMiddleware('/api', {
+  const apiProxyMiddleware = createHttpProxyMiddleware({
+    pathFilter: '/api',
     target: 'https://staging-2020.ensembl.org',
     changeOrigin: true,
     secure: false
@@ -68,7 +68,8 @@ const createApiProxyMiddleware = () => {
 
 const createStaticAssetsMiddleware = () => {
   // proxy all requests for static assets to the server that runs webpack dev middleware
-  return createHttpProxyMiddleware('/static', {
+  return createHttpProxyMiddleware({
+    pathFilter: '/static',
     target: 'http://localhost:8081'
   });
 };

src/server/middleware/proxyMiddleware.ts

@@ -56,7 +56,9 @@ export default (env: Record<string, unknown>): Configuration => {
                 modules: {
                   auto: true, // will match all files with a pattern /\.module\.\w+$/
                   localIdentName: '[local]__[name]__[hash:base64:5]',
-                  getLocalIdent: buildClassName
+                  getLocalIdent: buildClassName,
+                  namedExport: false, // since v 7.0 it is true by default, should we refactor our code to "import * as styles ..."?
+                  exportLocalsConvention: 'as-is' // consequence of using `namedExport: false` (the loader in this mode also camel-cases css class names). If namedExports were true, this field wouldn't have been needed
                 }
               }
             },

webpack/client/common.ts

@@ -57,7 +57,9 @@ export default (): Configuration => {
                 modules: {
                   auto: true, // will match all files with a pattern /\.module\.\w+$/
                   localIdentName: '[local]__[name]__[hash:base64:5]',
-                  getLocalIdent: buildClassName
+                  getLocalIdent: buildClassName,
+                  namedExport: false, // since v 7.0 it is true by default, should we refactor our code to "import * as styles ..."?
+                  exportLocalsConvention: 'as-is' // consequence of using `namedExport: false` (the loader in this mode also camel-cases css class names). If namedExports were true, this field wouldn't have been needed
                 }
               }
             },