feat: 🎸 Run @mui v5 codemod:base-preset on entire codebase

Migrated all components to @mui v5 following base-preset codemod instructions
melfore · Mar 31, 2022 · fd45412 · fd45412
1 parent 1b2675c
commit fd45412
Show file tree

Hide file tree

Showing 62 changed files with 2,550 additions and 3,080 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,4 +1,7 @@
 module.exports = {
   stories: ["../src/components/**/*.stories.mdx", "../src/components/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  features: {
+    emotionAlias: false,
+  },
 };
diff --git a/src/components/AppBar/__snapshots__/index.test.tsx.snap b/src/components/AppBar/__snapshots__/index.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`AppBar test suite: actions 1`] = `
 <header
-  className="MuiPaper-root MuiAppBar-root MuiAppBar-positionSticky MuiAppBar-colorPrimary MuiPaper-elevation4"
+  className="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionSticky css-7e0s21-MuiPaper-root-MuiAppBar-root"
   data-cy="appbar"
 >
   <div
-    className="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+    className="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-1t29gy6-MuiToolbar-root"
     style={
       Object {
         "alignItems": "center",
@@ -32,11 +32,12 @@ exports[`AppBar test suite: actions 1`] = `
       }
     >
       <button
-        className="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+        className="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-zylse7-MuiButtonBase-root-MuiIconButton-root"
         data-cy="appbar-action-0"
         disabled={false}
         onBlur={[Function]}
         onClick={[Function]}
+        onContextMenu={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -55,21 +56,18 @@ exports[`AppBar test suite: actions 1`] = `
         tabIndex={0}
         type="button"
       >
-        <span
-          className="MuiIconButton-label"
+        <svg
+          aria-hidden={true}
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+          data-cy="appbar-action-0-icon"
+          data-testid="AccountCircleIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
         >
-          <svg
-            aria-hidden={true}
-            className="MuiSvgIcon-root"
-            data-cy="appbar-action-0-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
+          />
+        </svg>
       </button>
     </div>
   </div>
@@ -78,11 +76,11 @@ exports[`AppBar test suite: actions 1`] = `
 
 exports[`AppBar test suite: dataCy 1`] = `
 <header
-  className="MuiPaper-root MuiAppBar-root MuiAppBar-positionSticky MuiAppBar-colorPrimary MuiPaper-elevation4"
+  className="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionSticky css-7e0s21-MuiPaper-root-MuiAppBar-root"
   data-cy="custom"
 >
   <div
-    className="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+    className="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-1t29gy6-MuiToolbar-root"
     style={
       Object {
         "alignItems": "center",
@@ -113,11 +111,11 @@ exports[`AppBar test suite: dataCy 1`] = `
 
 exports[`AppBar test suite: default 1`] = `
 <header
-  className="MuiPaper-root MuiAppBar-root MuiAppBar-positionSticky MuiAppBar-colorPrimary MuiPaper-elevation4"
+  className="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionSticky css-7e0s21-MuiPaper-root-MuiAppBar-root"
   data-cy="appbar"
 >
   <div
-    className="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+    className="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-1t29gy6-MuiToolbar-root"
     style={
       Object {
         "alignItems": "center",
@@ -148,11 +146,11 @@ exports[`AppBar test suite: default 1`] = `
 
 exports[`AppBar test suite: menu 1`] = `
 <header
-  className="MuiPaper-root MuiAppBar-root MuiAppBar-positionSticky MuiAppBar-colorPrimary MuiPaper-elevation4"
+  className="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionSticky css-7e0s21-MuiPaper-root-MuiAppBar-root"
   data-cy="appbar"
 >
   <div
-    className="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+    className="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-1t29gy6-MuiToolbar-root"
     style={
       Object {
         "alignItems": "center",
@@ -170,11 +168,12 @@ exports[`AppBar test suite: menu 1`] = `
       }
     >
       <button
-        className="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+        className="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-zylse7-MuiButtonBase-root-MuiIconButton-root"
         data-cy="appbar-menu"
         disabled={false}
         onBlur={[Function]}
         onClick={[Function]}
+        onContextMenu={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -188,23 +187,20 @@ exports[`AppBar test suite: menu 1`] = `
         tabIndex={0}
         type="button"
       >
-        <span
-          className="MuiIconButton-label"
+        <svg
+          aria-hidden={true}
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+          data-cy="appbar-menu-icon"
+          data-testid="AccountCircleIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
         >
-          <svg
-            aria-hidden={true}
-            className="MuiSvgIcon-root"
-            data-cy="appbar-menu-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
+          />
+        </svg>
         <span
-          className="MuiTouchRipple-root"
+          className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
         />
       </button>
     </div>
@@ -222,11 +218,11 @@ exports[`AppBar test suite: menu 1`] = `
 
 exports[`AppBar test suite: title 1`] = `
 <header
-  className="MuiPaper-root MuiAppBar-root MuiAppBar-positionSticky MuiAppBar-colorPrimary MuiPaper-elevation4"
+  className="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionSticky css-7e0s21-MuiPaper-root-MuiAppBar-root"
   data-cy="appbar"
 >
   <div
-    className="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+    className="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-1t29gy6-MuiToolbar-root"
     style={
       Object {
         "alignItems": "center",
@@ -256,7 +252,7 @@ exports[`AppBar test suite: title 1`] = `
         }
       >
         <h2
-          className="MuiTypography-root MuiTypography-h6"
+          className="MuiTypography-root MuiTypography-h6 css-tho60i-MuiTypography-root"
           data-cy="appbar-title-text"
         >
           Title

diff --git a/src/components/AppBar/index.test.tsx b/src/components/AppBar/index.test.tsx
@@ -176,7 +176,7 @@ describe("AppBar test suite:", () => {
 
     const userMenuButtonDataCy = getComposedDataCy(DATA_CY_DEFAULT, SUBPARTS_MAP.userMenu);
     const userMenuButton = wrapper.find(`button[data-cy='${userMenuButtonDataCy}']`);
-    const userMenuButtonLabel = userMenuButton.find(".MuiButton-label");
+    const userMenuButtonLabel = userMenuButton.find(".MuiButton-root");
     expect(userMenuButtonLabel.text()).toEqual(username);
   });
 });
diff --git a/src/components/AppBar/index.tsx b/src/components/AppBar/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { useMemo } from "react";
-import { AppBar as MUIAppBar, Toolbar as MUIToolbar, useTheme } from "@material-ui/core";
+import { AppBar as MUIAppBar, Toolbar as MUIToolbar, useTheme } from "@mui/material";
 
 import { IAppBar } from "../../types/AppBar";
 import { Icons } from "../../types/Icon";
@@ -103,7 +103,7 @@ const AppBar: FC<IAppBar> = ({
               style={{
                 borderRadius: `${theme.shape.borderRadius}px`,
                 cursor: onTitleClick ? "pointer" : "default",
-                padding: `${theme.spacing(0.5)}px ${theme.spacing(1)}px`,
+                padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
                 userSelect: "none",
               }}
             >
@@ -120,7 +120,7 @@ const AppBar: FC<IAppBar> = ({
               dataCy={getComposedDataCy(dataCy, SUBPARTS_MAP.action, index)}
               icon={icon}
               onClick={onClick}
-              style={{ marginRight: `${theme.spacing(0.5)}px`, ...style }}
+              style={{ marginRight: theme.spacing(0.5), ...style }}
             />
           ))}
           {locale && (

diff --git a/src/components/Avatar/__snapshots__/index.test.tsx.snap b/src/components/Avatar/__snapshots__/index.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`Avatar test suite: dataCy 1`] = `
 <div
-  className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault"
+  className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-2s90m6-MuiAvatar-root"
   data-cy="custom"
   style={
     Object {
-      "backgroundColor": "#3f51b5",
+      "backgroundColor": "#1976d2",
       "color": "#fff",
     }
   }
@@ -15,11 +15,11 @@ exports[`Avatar test suite: dataCy 1`] = `
 
 exports[`Avatar test suite: default 1`] = `
 <div
-  className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault"
+  className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-2s90m6-MuiAvatar-root"
   data-cy="avatar"
   style={
     Object {
-      "backgroundColor": "#3f51b5",
+      "backgroundColor": "#1976d2",
       "color": "#fff",
     }
   }
@@ -28,19 +28,20 @@ exports[`Avatar test suite: default 1`] = `
 
 exports[`Avatar test suite: icon 1`] = `
 <div
-  className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault"
+  className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-2s90m6-MuiAvatar-root"
   data-cy="avatar"
   style={
     Object {
-      "backgroundColor": "#3f51b5",
+      "backgroundColor": "#1976d2",
       "color": "#fff",
     }
   }
 >
   <svg
     aria-hidden={true}
-    className="MuiSvgIcon-root"
+    className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
     data-cy="avatar-icon"
+    data-testid="BusinessIcon"
     focusable="false"
     viewBox="0 0 24 24"
   >
@@ -53,26 +54,26 @@ exports[`Avatar test suite: icon 1`] = `
 
 exports[`Avatar test suite: image 1`] = `
 <div
-  className="MuiAvatar-root MuiAvatar-circular"
+  className="MuiAvatar-root MuiAvatar-circular css-1wlk0hk-MuiAvatar-root"
   data-cy="avatar"
   style={
     Object {
-      "backgroundColor": "#3f51b5",
+      "backgroundColor": "#1976d2",
       "color": "#fff",
     }
   }
 >
   <img
     alt="Mosaic Image"
-    className="MuiAvatar-img"
+    className="MuiAvatar-img css-1pqm26d-MuiAvatar-img"
     src="//upload.wikimedia.org/wikipedia/commons/thumb/6/60/Roof_hafez_tomb.jpg/440px-Roof_hafez_tomb.jpg"
   />
 </div>
 `;
 
 exports[`Avatar test suite: loading - squared 1`] = `
 <span
-  className="MuiSkeleton-root MuiSkeleton-rect MuiSkeleton-withChildren MuiSkeleton-fitContent MuiSkeleton-heightAuto MuiSkeleton-pulse"
+  className="MuiSkeleton-root MuiSkeleton-rectangular MuiSkeleton-pulse MuiSkeleton-withChildren MuiSkeleton-fitContent MuiSkeleton-heightAuto css-qzz38t-MuiSkeleton-root"
   style={
     Object {
       "height": undefined,
@@ -81,12 +82,13 @@ exports[`Avatar test suite: loading - squared 1`] = `
   }
 >
   <div
-    className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault"
+    className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-2s90m6-MuiAvatar-root"
     data-cy="avatar-loading"
   >
     <svg
       aria-hidden={true}
-      className="MuiSvgIcon-root MuiAvatar-fallback"
+      className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
+      data-testid="PersonIcon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -100,7 +102,7 @@ exports[`Avatar test suite: loading - squared 1`] = `
 
 exports[`Avatar test suite: loading 1`] = `
 <span
-  className="MuiSkeleton-root MuiSkeleton-circle MuiSkeleton-withChildren MuiSkeleton-fitContent MuiSkeleton-heightAuto MuiSkeleton-pulse"
+  className="MuiSkeleton-root MuiSkeleton-circular MuiSkeleton-pulse MuiSkeleton-withChildren MuiSkeleton-fitContent MuiSkeleton-heightAuto css-1nk968r-MuiSkeleton-root"
   style={
     Object {
       "height": undefined,
@@ -109,12 +111,13 @@ exports[`Avatar test suite: loading 1`] = `
   }
 >
   <div
-    className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault"
+    className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-2s90m6-MuiAvatar-root"
     data-cy="avatar-loading"
   >
     <svg
       aria-hidden={true}
-      className="MuiSvgIcon-root MuiAvatar-fallback"
+      className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback css-10mi8st-MuiSvgIcon-root-MuiAvatar-fallback"
+      data-testid="PersonIcon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -128,11 +131,11 @@ exports[`Avatar test suite: loading 1`] = `
 
 exports[`Avatar test suite: squared 1`] = `
 <div
-  className="MuiAvatar-root MuiAvatar-square MuiAvatar-colorDefault"
+  className="MuiAvatar-root MuiAvatar-square MuiAvatar-colorDefault css-18gxrea-MuiAvatar-root"
   data-cy="avatar"
   style={
     Object {
-      "backgroundColor": "#3f51b5",
+      "backgroundColor": "#1976d2",
       "color": "#fff",
     }
   }
@@ -141,17 +144,17 @@ exports[`Avatar test suite: squared 1`] = `
 
 exports[`Avatar test suite: text 1`] = `
 <div
-  className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault"
+  className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-2s90m6-MuiAvatar-root"
   data-cy="avatar"
   style={
     Object {
-      "backgroundColor": "#3f51b5",
+      "backgroundColor": "#1976d2",
       "color": "#fff",
     }
   }
 >
   <p
-    className="MuiTypography-root MuiTypography-body1"
+    className="MuiTypography-root MuiTypography-body1 css-5wwosz-MuiTypography-root"
     data-cy="avatar-text"
   >
     MO

diff --git a/src/components/Avatar/index.stories.tsx b/src/components/Avatar/index.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import MUIStyleIcon from "@material-ui/icons/Style";
+import MUIStyleIcon from "@mui/icons-material/Style";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import { Icons } from "../../types/Icon";