refactor: migration-to-mui-v5.

package.json

@@ -8,12 +8,14 @@
     "@curi/react-dom": "^2.0.4",
     "@curi/router": "^2.1.2",
     "@date-io/date-fns": "^1.3.13",
+    "@emotion/react": "^11.6.0",
+    "@emotion/styled": "^11.6.0",
     "@fennec/configuration": "^0.0.1",
     "@hickory/browser": "^2.1.0",
-    "@material-ui/core": "^4.11.3",
+    "@mui/icons-material": "^5.2.0",
-    "@material-ui/icons": "^4.11.2",
+    "@mui/lab": "^5.0.0-alpha.56",
-    "@material-ui/lab": "*",
+    "@mui/material": "^5.2.0",
-    "@material-ui/pickers": "^3.3.10",
+    "@mui/styles": "^5.2.0",
     "@nestjs-lib/auth": "^0.1.1",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",

src/articles/article-editor.tsx

@@ -1,10 +1,6 @@
-import {
+import { Button, Grid, Paper } from "@mui/material";
-  Button,
+import createStyles from '@mui/styles/createStyles';
-  createStyles,
+import makeStyles from '@mui/styles/makeStyles';
-  Grid,
-  makeStyles,
-  Paper,
-} from "@material-ui/core";
 import { Field, Form, Formik, FormikHelpers, FormikProps } from "formik";
 import { FC, useCallback, useMemo, useRef, useState } from "react";
 import { Editor } from "../commons/editor/vditor";

src/articles/articles-index.tsx

@@ -8,13 +8,13 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-} from "@material-ui/core";
+} from "@mui/material";
 import React, { FC } from "react";
 import { Article } from "../generated/graphql";
-import EditIcon from "@material-ui/icons/Edit";
+import EditIcon from "@mui/icons-material/Edit";
 import { useRouter } from "@curi/react-dom";
 import { ARTICLES, REMOVE_ARTICLE } from './articles.constants';
-import { Delete } from '@material-ui/icons';
+import { Delete } from '@mui/icons-material';
 import { format } from "date-fns";
 
 export const ArticleIndex: FC = () => {
@@ -65,7 +65,7 @@ export const ArticleIndex: FC = () => {
                         }),
                       })
                     }
-                  >
+                    size="large">
                     <EditIcon />
                   </IconButton>
                   <IconButton
@@ -75,7 +75,7 @@ export const ArticleIndex: FC = () => {
                         variables: article,
                       })
                     }
-                  >
+                    size="large">
                     <Delete />
                   </IconButton>
                 </TableCell>

src/commons/auth/login.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core";
+import makeStyles from '@mui/styles/makeStyles';
 import { FC, Fragment, useEffect, useRef } from "react";
 import { useAuth } from "./auth.provider";
 const useStyles = makeStyles((theme) => ({

src/commons/editor/vditor.tsx

@@ -1,5 +1,7 @@
-import { createStyles, FormControl, FormHelperText, FormLabel, makeStyles } from '@material-ui/core';
+import { FormControl, FormHelperText, FormLabel } from '@mui/material';
-import { Skeleton } from "@material-ui/lab";
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
+import { Skeleton } from '@mui/material';
 import { FieldHookConfig, useField } from "formik";
 import React, { FC, useEffect, useMemo, useRef, useState } from "react";
 import Vditor from "vditor";
@@ -63,7 +65,7 @@ export const Editor: FC<Props> = ({ label, className, ...props }) => {
       {meta.error && <FormHelperText error={true}>{meta.error}</FormHelperText>}
       {instance ? null : (
         <Skeleton
-          variant="rect"
+          variant="rectangular"
           animation="wave"
           height="100%"
           width="100%"

src/commons/route/router.tsx

@@ -4,7 +4,7 @@ import { createRouter, announce } from "@curi/router";
 import { browser } from "@hickory/browser";
 import { FC, useEffect, useState } from "react";
 import routes from "../../routes";
-import { LinearProgress } from "@material-ui/core";
+import { LinearProgress } from "@mui/material";
 
 const Component: FC = ({ children }) => {
   const client = useApolloClient();

src/index.tsx

@@ -11,20 +11,43 @@ import zhLocale from "date-fns/locale/zh-CN";
 import { SnackbarProvider } from "notistack";
 import Router from "./commons/route/router";
 import { AuthProvider } from "./commons/auth/auth.provider";
+import {
+  ThemeProvider,
+  Theme,
+  StyledEngineProvider,
+  createTheme,
+} from "@mui/material/styles";
+
+import makeStyles from "@mui/styles/makeStyles";
+
+declare module "@mui/styles/defaultTheme" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
+
+const theme = createTheme();
+
+const useStyles = makeStyles((theme) => ({
+  root: {},
+}));
 
 ReactDOM.render(
   <React.StrictMode>
-    <SnackbarProvider maxSnack={5}>
+    <StyledEngineProvider injectFirst>
-      <AuthProvider>
+      <ThemeProvider theme={theme}>
-        <AppApolloClientProvider>
+        <SnackbarProvider maxSnack={5}>
-          <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
+          <AuthProvider>
-            <Router>
+            <AppApolloClientProvider>
-              <App />
+              <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
-            </Router>
+                <Router>
-          </MuiPickersUtilsProvider>
+                  <App />
-        </AppApolloClientProvider>
+                </Router>
-      </AuthProvider>
+              </MuiPickersUtilsProvider>
-    </SnackbarProvider>
+            </AppApolloClientProvider>
+          </AuthProvider>
+        </SnackbarProvider>
+      </ThemeProvider>
+    </StyledEngineProvider>
   </React.StrictMode>,
   document.getElementById("root")
 );

src/layouts/default.tsx

@@ -1,26 +1,23 @@
 import React, { FC } from "react";
 import clsx from "clsx";
-import {
+import { useTheme, Theme } from "@mui/material/styles";
-  createStyles,
+import createStyles from '@mui/styles/createStyles';
-  makeStyles,
+import makeStyles from '@mui/styles/makeStyles';
-  useTheme,
+import Drawer from "@mui/material/Drawer";
-  Theme,
+import AppBar from "@mui/material/AppBar";
-} from "@material-ui/core/styles";
+import Toolbar from "@mui/material/Toolbar";
-import Drawer from "@material-ui/core/Drawer";
+import List from "@mui/material/List";
-import AppBar from "@material-ui/core/AppBar";
+import CssBaseline from "@mui/material/CssBaseline";
-import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@mui/material/Typography";
-import List from "@material-ui/core/List";
+import Divider from "@mui/material/Divider";
-import CssBaseline from "@material-ui/core/CssBaseline";
+import IconButton from "@mui/material/IconButton";
-import Typography from "@material-ui/core/Typography";
+import MenuIcon from "@mui/icons-material/Menu";
-import Divider from "@material-ui/core/Divider";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import IconButton from "@material-ui/core/IconButton";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import MenuIcon from "@material-ui/icons/Menu";
+import ListItem from "@mui/material/ListItem";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import ListItemIcon from "@mui/material/ListItemIcon";
-import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+import ListItemText from "@mui/material/ListItemText";
-import ListItem from "@material-ui/core/ListItem";
+import { AddCircle, Description, LocalOffer } from '@mui/icons-material';
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemText from "@material-ui/core/ListItemText";
-import { AddCircle, Description, LocalOffer } from '@material-ui/icons';
 import { Link } from '@curi/react-dom';
 const drawerWidth = 240;
 
@@ -119,7 +116,7 @@ export const DefaultLayout: FC = ({children}) => {
               className={clsx(classes.menuButton, {
                 [classes.hide]: open,
               })}
-            >
+              size="large">
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" noWrap>
@@ -141,7 +138,7 @@ export const DefaultLayout: FC = ({children}) => {
           }}
         >
           <div className={classes.toolbar}>
-            <IconButton onClick={handleDrawerClose}>
+            <IconButton onClick={handleDrawerClose} size="large">
               {theme.direction === "rtl" ? (
                 <ChevronRightIcon />
               ) : (

src/tags/article-editor.tsx

@@ -1,10 +1,6 @@
-import {
+import { Button, Grid, Paper } from "@mui/material";
-  Button,
+import createStyles from '@mui/styles/createStyles';
-  createStyles,
+import makeStyles from '@mui/styles/makeStyles';
-  Grid,
-  makeStyles,
-  Paper,
-} from "@material-ui/core";
 import { Field, Form, Formik, FormikHelpers } from "formik";
 import { FC } from "react";
 import { Editor } from "../commons/editor/vditor";

src/tags/tags-index.tsx

@@ -8,12 +8,12 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-} from "@material-ui/core";
+} from "@mui/material";
 import { FC } from "react";
 import { Tag } from "../generated/graphql";
-import EditIcon from "@material-ui/icons/Edit";
+import EditIcon from "@mui/icons-material/Edit";
 import { useRouter } from "@curi/react-dom";
-import { Delete } from "@material-ui/icons";
+import { Delete } from "@mui/icons-material";
 import { REMOVE_TAG, TAGS } from "./tags.constants";
 
 export const TagsIndex: FC = () => {
@@ -56,7 +56,7 @@ export const TagsIndex: FC = () => {
                         }),
                       })
                     }
-                  >
+                    size="large">
                     <EditIcon />
                   </IconButton>
                   <IconButton
@@ -66,7 +66,7 @@ export const TagsIndex: FC = () => {
                         variables: tag,
                       })
                     }
-                  >
+                    size="large">
                     <Delete />
                   </IconButton>
                 </TableCell>