Migrate to mui v5

Author: AlexandrLi

package-lock.json

@@ -7,6 +7,9 @@
     "start": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
     "client:deploy": "sls client deploy --no-config-change --no-policy-change --no-cors-change",
     "client:deploy:nc": "npm run client:deploy -- --no-confirm",
     "client:build:deploy": "npm run build && npm run client:deploy",
@@ -17,30 +20,29 @@
     "cloudfront:build:deploy": "npm run client:build:deploy && npm run cloudfront:invalidateCache",
     "cloudfront:build:deploy:nc": "npm run client:build:deploy:nc && npm run cloudfront:invalidateCache",
     "cloudfront:update:build:deploy": "npm run cloudfront:setup && npm run cloudfront:build:deploy",
-    "cloudfront:update:build:deploy:nc": "npm run cloudfront:setup && npm run cloudfront:build:deploy:nc",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest run --coverage"
+    "cloudfront:update:build:deploy:nc": "npm run cloudfront:setup && npm run cloudfront:build:deploy:nc"
   },
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.8.7",
+    "@mui/styles": "^5.8.7",
     "@reduxjs/toolkit": "^1.2.5",
     "@types/lodash": "^4.14.158",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.5",
-    "@types/yup": "^0.29.3",
+    "@types/yup": "^0.29.14",
     "axios": "^0.19.2",
-    "formik": "^2.1.5",
-    "formik-material-ui": "^2.0.1",
+    "formik": "^2.2.9",
     "lodash": "^4.17.19",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "serverless": "^2.29.0",
     "serverless-finch": "^2.6.0",
-    "yup": "^0.29.1"
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

package.json

@@ -1,10 +1,10 @@
 import React from "react";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 import { Product } from "~/models/Product";
-import CartIcon from "@material-ui/icons/ShoppingCart";
-import Add from "@material-ui/icons/Add";
-import Remove from "@material-ui/icons/Remove";
-import IconButton from "@material-ui/core/IconButton";
+import CartIcon from "@mui/icons-material/ShoppingCart";
+import Add from "@mui/icons-material/Add";
+import Remove from "@mui/icons-material/Remove";
+import IconButton from "@mui/material/IconButton";
 import { useDispatch, useSelector } from "react-redux";
 import { addToCart, selectCartItems, removeFromCart } from "~/store/cartSlice";
 
@@ -17,23 +17,21 @@ export default function AddProductToCart({ product }: AddProductToCartProps) {
   const cartItems = useSelector(selectCartItems);
   const cartItem = cartItems.find((i) => i.product.id === product.id);
 
-  return (
-    <>
-      {cartItem ? (
-        <>
-          <IconButton onClick={() => dispatch(removeFromCart(product))}>
-            <Remove color={"secondary"} />
-          </IconButton>
-          <Typography align="center">{cartItem.count}</Typography>
-          <IconButton onClick={() => dispatch(addToCart(product))}>
-            <Add color={"secondary"} />
-          </IconButton>
-        </>
-      ) : (
-        <IconButton onClick={() => dispatch(addToCart(product))}>
-          <CartIcon color={"secondary"} />
+  return <>
+    {cartItem ? (
+      <>
+        <IconButton onClick={() => dispatch(removeFromCart(product))} size="large">
+          <Remove color={"secondary"} />
         </IconButton>
-      )}
-    </>
-  );
+        <Typography align="center">{cartItem.count}</Typography>
+        <IconButton onClick={() => dispatch(addToCart(product))} size="large">
+          <Add color={"secondary"} />
+        </IconButton>
+      </>
+    ) : (
+      <IconButton onClick={() => dispatch(addToCart(product))} size="large">
+        <CartIcon color={"secondary"} />
+      </IconButton>
+    )}
+  </>;
 }

src/components/AddProductToCart/AddProductToCart.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import "~/components/App/App.css";
 import PageProducts from "~/components/pages/PageProducts/PageProducts";
 import MainLayout from "~/components/MainLayout/MainLayout";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

src/components/App/App.css

@@ -1,33 +1,18 @@
 import React from "react";
-import Typography from "@material-ui/core/Typography";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemText from "@material-ui/core/ListItemText";
-import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@mui/material/Typography";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
 import { CartItem } from "~/models/CartItem";
 import { formatAsPrice } from "~/utils/utils";
 import AddProductToCart from "~/components/AddProductToCart/AddProductToCart";
 
-const useStyles = makeStyles((theme) => ({
-  listItem: {
-    padding: theme.spacing(1, 0),
-  },
-  total: {
-    fontWeight: 700,
-  },
-  title: {
-    marginTop: theme.spacing(2),
-  },
-}));
-
 type CartItemsProps = {
   items: CartItem[];
   isEditable: boolean;
 };
 
 export default function CartItems({ items, isEditable }: CartItemsProps) {
-  const classes = useStyles();
-
   const totalPrice: number = items.reduce(
     (total, item) => item.count * item.product.price + total,
     0
@@ -37,7 +22,10 @@ export default function CartItems({ items, isEditable }: CartItemsProps) {
     <>
       <List disablePadding>
         {items.map((cartItem: CartItem) => (
-          <ListItem className={classes.listItem} key={cartItem.product.id}>
+          <ListItem
+            sx={{ padding: (theme) => theme.spacing(1, 0) }}
+            key={cartItem.product.id}
+          >
             {isEditable && <AddProductToCart product={cartItem.product} />}
             <ListItemText
               primary={cartItem.product.title}
@@ -49,13 +37,13 @@ export default function CartItems({ items, isEditable }: CartItemsProps) {
             </Typography>
           </ListItem>
         ))}
-        <ListItem className={classes.listItem}>
+        <ListItem sx={{ padding: (theme) => theme.spacing(1, 0) }}>
           <ListItemText primary="Shipping" />
           <Typography variant="body2">Free</Typography>
         </ListItem>
-        <ListItem className={classes.listItem}>
+        <ListItem sx={{ padding: (theme) => theme.spacing(1, 0) }}>
           <ListItemText primary="Total" />
-          <Typography variant="subtitle1" className={classes.total}>
+          <Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
             {formatAsPrice(totalPrice)}
           </Typography>
         </ListItem>

src/components/App/App.tsx

@@ -0,0 +1,39 @@
+import MuiTextField, {
+  TextFieldProps as MuiTextFieldProps,
+} from "@mui/material/TextField";
+import { FieldProps, getIn } from "formik";
+
+export interface TextFieldProps
+  extends FieldProps,
+    Omit<MuiTextFieldProps, "name" | "value" | "error"> {}
+
+export function fieldToTextField({
+  disabled,
+  field: { onBlur: fieldOnBlur, ...field },
+  form: { isSubmitting, touched, errors },
+  onBlur,
+  helperText,
+  ...props
+}: TextFieldProps): MuiTextFieldProps {
+  const fieldError = getIn(errors, field.name);
+  const showError = getIn(touched, field.name) && !!fieldError;
+
+  return {
+    error: showError,
+    helperText: showError ? fieldError : helperText,
+    disabled: disabled ?? isSubmitting,
+    onBlur:
+      onBlur ??
+      function (e) {
+        fieldOnBlur(e ?? field.name);
+      },
+    ...field,
+    ...props,
+  };
+}
+
+const TextField = ({ children, ...props }: TextFieldProps) => {
+  return <MuiTextField {...fieldToTextField(props)}>{children}</MuiTextField>;
+};
+
+export default TextField;