chore: update material-ui and storybook 9 (#5444)

* chore: update material ui 7

* chore: update storybook 9

.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@verdaccio/eslint-config'],
+  extends: ['@verdaccio/eslint-config', 'plugin:storybook/recommended'],
 };

packages/ui-components/.storybook/main.ts

@@ -5,11 +5,9 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 
   addons: [
-    getAbsolutePath('@storybook/addon-actions'),
     getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
+    getAbsolutePath('@storybook/addon-docs'),
   ],
 
   framework: {

packages/ui-components/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import type { Preview, StoryFn } from '@storybook/react';
+import type { Preview, StoryFn } from '@storybook/react-webpack5';
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import React from 'react';
 import { Provider } from 'react-redux';

packages/ui-components/package.json

@@ -8,7 +8,7 @@
   "main": "./build/index.js",
   "types": "build/index.d.ts",
   "scripts": {
-    "test": "cross-env TZ=UTC vitest run",
+    "test": "cross-env TZ=UTC vitest run -u",
     "clean": "rimraf ./build",
     "type-check": "tsc --noEmit -p tsconfig.build.json",
     "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json",
@@ -23,8 +23,8 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@microlink/react-json-view": "1.26.2",
-    "@mui/icons-material": "5.17.1",
+    "@mui/icons-material": "7.3.4",
-    "@mui/material": "5.17.1",
+    "@mui/material": "7.3.4",
     "@rematch/core": "2.2.0",
     "@rematch/loading": "2.1.2",
     "@verdaccio/ui-i18n": "workspace:*",
@@ -55,13 +55,9 @@
   "devDependencies": {
     "@babel/core": "7.28.4",
     "@emotion/babel-plugin": "11.13.5",
-    "@storybook/addon-actions": "8.6.14",
+    "@storybook/addon-links": "9.1.15",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-interactions": "8.6.14",
-    "@storybook/addon-links": "8.6.14",
     "@storybook/addon-webpack5-compiler-babel": "3.0.6",
-    "@storybook/react": "8.6.14",
+    "@storybook/react-webpack5": "9.1.15",
-    "@storybook/react-webpack5": "8.6.14",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "16.3.0",
@@ -77,9 +73,11 @@
     "msw": "2.11.3",
     "msw-storybook-addon": "2.0.6",
     "mutationobserver-shim": "0.3.7",
-    "storybook": "8.6.14",
+    "storybook": "9.1.15",
     "vitest": "3.2.4",
-    "whatwg-fetch": "3.6.20"
+    "whatwg-fetch": "3.6.20",
+    "eslint-plugin-storybook": "9.1.15",
+    "@storybook/addon-docs": "9.1.15"
   },
   "msw": {
     "workerDirectory": [

packages/ui-components/src/AppTest/App.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter } from 'react-router';

packages/ui-components/src/components/ActionBar/ActionBar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { clone, merge } from 'lodash';
 import React from 'react';
 

packages/ui-components/src/components/Dependencies/Dependencies.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 
 import { default as Dependencies } from '.';

packages/ui-components/src/components/FundButton/FundButton.stories.tsx

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 
 import { default as FundButton } from '.';

packages/ui-components/src/components/Install/Install.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 
 import { default as Install } from '.';

packages/ui-components/src/components/LoginDialog/LoginDialog.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable verdaccio/jsx-spread */
-import { action } from '@storybook/addon-actions';
 import React from 'react';
+import { action } from 'storybook/actions';
 
 import LoginDialog from './LoginDialog';
 

packages/ui-components/src/components/NoItems/__snapshots__/Noitems.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`<NoItem /> component > should load the component in default state 1`] =
 <div
   class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard makeStyles-MuiPaper-root-MuiAlert-root"
   role="alert"
+  style="--Paper-shadow: none;"
 >
   <div
     class="MuiAlert-icon makeStyles-MuiAlert-icon"

packages/ui-components/src/components/Repository/Repository.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 
 import { default as Repository } from '.';

packages/ui-components/src/components/Search/Search.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable verdaccio/jsx-spread */
 import Box from '@mui/material/Box';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter } from 'react-router';

packages/ui-components/src/components/SideBarTitle/SideBarTitle.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 
 import { default as SideBarTittle } from '.';

packages/ui-components/src/components/TextField/__snapshots__/TextField.test.tsx.snap

@@ -17,10 +17,13 @@ exports[`<TextField /> component > should load the component in default state 1`
     />
     <fieldset
       aria-hidden="true"
-      class="MuiOutlinedInput-notchedOutline makeStyles-MuiOutlinedInput-notchedOutline"
+      class="MuiOutlinedInput-notchedOutline makeStyles-MuiNotchedOutlined-root-MuiOutlinedInput-notchedOutline"
     >
-      <legend>
+      <legend
+        class="makeStyles-MuiNotchedOutlined-root"
+      >
         <span
+          aria-hidden="true"
           class="notranslate"
         >
           ​

packages/ui-components/src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap

@@ -7,6 +7,7 @@ Object {
     <div>
       <div
         class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root makeStyles-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <div
           class="MuiCardContent-root makeStyles-MuiCardContent-root"
@@ -14,6 +15,7 @@ Object {
           <div
             class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard makeStyles-MuiPaper-root-MuiAlert-root"
             role="alert"
+            style="--Paper-shadow: none;"
           >
             <div
               class="MuiAlert-icon makeStyles-MuiAlert-icon"
@@ -48,6 +50,7 @@ Object {
   "container": <div>
     <div
       class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root makeStyles-MuiPaper-root-MuiCard-root"
+      style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
     >
       <div
         class="MuiCardContent-root makeStyles-MuiCardContent-root"
@@ -55,6 +58,7 @@ Object {
         <div
           class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard makeStyles-MuiPaper-root-MuiAlert-root"
           role="alert"
+          style="--Paper-shadow: none;"
         >
           <div
             class="MuiAlert-icon makeStyles-MuiAlert-icon"
@@ -146,6 +150,7 @@ Object {
     <div>
       <div
         class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root makeStyles-MuiPaper-root-MuiCard-root"
+        style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
       >
         <div
           class="MuiCardContent-root makeStyles-MuiCardContent-root"
@@ -205,6 +210,7 @@ Object {
   "container": <div>
     <div
       class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root makeStyles-MuiPaper-root-MuiCard-root"
+      style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
     >
       <div
         class="MuiCardContent-root makeStyles-MuiCardContent-root"

packages/ui-components/src/layouts/Version/Version.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';

packages/ui-components/src/sections/Detail/Detail.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';

packages/ui-components/src/sections/Detail/__snapshots__/Detail.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`DetailContainer > renders correctly 1`] = `
       style="overflow: hidden; margin-bottom: 0px;"
     >
       <div
-        class="MuiTabs-flexContainer makeStyles-MuiTabs-flexContainer"
+        class="MuiTabs-list MuiTabs-flexContainer makeStyles-MuiTabs-list"
         role="tablist"
       >
         <button
@@ -25,9 +25,6 @@ exports[`DetailContainer > renders correctly 1`] = `
           type="button"
         >
           tab.readme
-          <span
-            class="MuiTouchRipple-root makeStyles-MuiTouchRipple-root"
-          />
         </button>
         <button
           aria-selected="false"
@@ -39,9 +36,6 @@ exports[`DetailContainer > renders correctly 1`] = `
           type="button"
         >
           tab.dependencies
-          <span
-            class="MuiTouchRipple-root makeStyles-MuiTouchRipple-root"
-          />
         </button>
         <button
           aria-selected="false"
@@ -53,9 +47,6 @@ exports[`DetailContainer > renders correctly 1`] = `
           type="button"
         >
           tab.versions
-          <span
-            class="MuiTouchRipple-root makeStyles-MuiTouchRipple-root"
-          />
         </button>
         <button
           aria-selected="false"
@@ -67,9 +58,6 @@ exports[`DetailContainer > renders correctly 1`] = `
           type="button"
         >
           tab.uplinks
-          <span
-            class="MuiTouchRipple-root makeStyles-MuiTouchRipple-root"
-          />
         </button>
       </div>
       <span

packages/ui-components/src/sections/Header/Header.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';

packages/ui-components/src/sections/Home/Home.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';

packages/ui-components/src/sections/SideBar/Sidebar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { HttpResponse, http } from 'msw';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';