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 <jfay@miletwo.us>

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>
     );
 };