Chore/mui v5 (#35)

* base url to tsconfig

* switching over to mui v5

* remove absolute imports, tests break

* comment cleanup & duplicate code removal

* theme options

* custom port on readme

Co-authored-by: John Fay <[email protected]>

Author: storiesOfRen

README.md

@@ -52,7 +52,7 @@ Starts the application in development mode with hot-code reloading, error report
 The application will start at http://localhost:3000 by default. The default port can be changed with -p, like so:
 
 ```bash
-npm run dev -p 4000
+npm run dev -- -p 4000
 ```
 
 ### format

components/Image.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import NextImage from 'next/image';
-import { Avatar, createStyles, makeStyles, Theme } from '@material-ui/core';
+import { Avatar, Theme } from '@mui/material';
+import { createStyles, makeStyles } from '@mui/styles';
 import { Image as ImageType } from '../pages';
 
 interface Props {

components/layout.tsx

@@ -1,4 +1,5 @@
-import { makeStyles, createStyles, Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
+import { createStyles, makeStyles } from '@mui/styles';
 import { ReactElement } from 'react';
 import Head from 'next/head';
 

components/link/Link.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link as MUILink } from '@material-ui/core';
+import { Link as MUILink } from '@mui/material';
 import Link from 'next/link';
 
 type Props = {

components/list/ListItem.tsx

@@ -1,15 +1,6 @@
 import Image from '../Image';
-import {
-    ListItem as MUIListItem,
-    ListItemAvatar,
-    Avatar,
-    ListItemText,
-    Grid,
-    Typography,
-    makeStyles,
-    createStyles,
-    Theme,
-} from '@material-ui/core';
+import { ListItem as MUIListItem, ListItemAvatar, Avatar, ListItemText, Grid, Typography, Theme } from '@mui/material';
+import { createStyles, makeStyles } from '@mui/styles';
 import Link from '../link/Link';
 import { Image as ImageType } from '../../pages/index';
 

jest.config.ts

@@ -10,6 +10,10 @@ const config: Config.InitialOptions = {
         '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     },
     verbose: true,
+    moduleNameMapper: {
+        'src/(.*)': '<rootDir>/src/$1',
+        'tests/(.*)': '<rootDir>/tests/$1',
+    },
 };
 
 export default config;

lib/theme.ts

@@ -1,7 +1,6 @@
-import { createTheme, responsiveFontSizes, ThemeOptions } from '@material-ui/core/styles';
-import '@material-ui/core/styles';
+import { createTheme, responsiveFontSizes, ThemeOptions } from '@mui/material/styles';
 
-declare module '@material-ui/core/styles/createTypography' {
+declare module '@mui/material/styles/createTypography' {
     interface Typography {
         fontWeightHeavy: number;
     }

package-lock.json

@@ -3,7 +3,10 @@
     "version": "1.0.1",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "^4.12.3",
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": "^5.0.1",
+        "@mui/styles": "^5.0.1",
         "next": "^11.1.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2"

package.json

@@ -1,9 +1,14 @@
 import { AppProps } from 'next/app';
-import { ThemeProvider } from '@material-ui/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 import theme from '../lib/theme';
 import React, { useEffect } from 'react';
 
+declare module '@mui/styles/defaultTheme' {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface DefaultTheme extends Theme {}
+}
+
 // Determines if we are running on server or in client.
 const isServerSideRendered = () => {
     return typeof window === 'undefined';
@@ -31,11 +36,13 @@ const App = ({ Component, pageProps }: AppProps) => {
     }, []);
 
     return (
-        <ThemeProvider theme={theme}>
-            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-            <CssBaseline />
-            <Component {...pageProps} />
-        </ThemeProvider>
+        <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={theme}>
+                {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+                <CssBaseline />
+                <Component {...pageProps} />
+            </ThemeProvider>
+        </StyledEngineProvider>
     );
 };
 

pages/_app.tsx

@@ -1,5 +1,5 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { ServerStyleSheets } from '@material-ui/styles';
+import { ServerStyleSheets } from '@mui/styles';
 
 import theme from '../lib/theme';
 import React from 'react';

pages/_document.tsx

@@ -1,5 +1,6 @@
 import { GetServerSideProps } from 'next';
-import { makeStyles, createStyles, Typography, Theme, List, Grid } from '@material-ui/core';
+import { Typography, Theme, List, Grid } from '@mui/material';
+import { createStyles, makeStyles } from '@mui/styles';
 import Layout from '../components/layout';
 import ListItem, { Link } from '../components/list/ListItem';
 
@@ -9,7 +10,7 @@ const useStyles = makeStyles((theme: Theme) =>
     createStyles({
         list: {
             minWidth: theme.breakpoints.values.sm,
-            [theme.breakpoints.down('xs')]: {
+            [theme.breakpoints.down('sm')]: {
                 width: '100%',
                 minWidth: 100,
             },

pages/index.tsx

@@ -1,8 +1,9 @@
-import { Button, Grid, makeStyles, Theme, Typography } from '@material-ui/core';
+import { Button, Grid, Theme, Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import { GetStaticProps } from 'next';
 import Link from 'next/link';
 import Image from 'next/image';
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
 import { Tool, tools } from '../../lib/tools';
 import { ReactElement } from 'react';
 import Layout from '../../components/layout';

pages/tool/[name].tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { RouterContext } from 'next/dist/shared/lib/router-context';
 import { NextRouter } from 'next/router';
-import { ThemeProvider } from '@material-ui/core';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material';
 import theme from '../lib/theme';
 
 export * from '@testing-library/react';
@@ -49,9 +49,11 @@ const mockRouter: NextRouter = {
 // Where you add your providers for mock testing wrapper
 export function customRender(ui: RenderUI, { wrapper, router, ...options }: RenderOptions = {}) {
     wrapper = ({ children }) => (
-        <ThemeProvider theme={theme}>
-            <RouterContext.Provider value={{ ...mockRouter, ...router }}>{children}</RouterContext.Provider>
-        </ThemeProvider>
+        <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={theme}>
+                <RouterContext.Provider value={{ ...mockRouter, ...router }}>{children}</RouterContext.Provider>
+            </ThemeProvider>
+        </StyledEngineProvider>
     );
 
     return render(ui, { wrapper, ...options });