Migrate Material UI from v4 to v5.

cypress/integration/docs.spec.ts

@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+export { };
 
 describe("Documentation Viewer", () => {
   beforeEach(() => {
@@ -11,6 +12,24 @@ describe("Documentation Viewer", () => {
     cy.contains(label).should("be.visible");
   };
 
+  /**
+   * Assert that the header bar does not overlap the sidebar.
+   * Catches CSS box-model regressions (e.g. content-box vs border-box).
+   */
+  const assertNoHeaderSidebarOverlap = () => {
+    cy.get('[data-testid="sidebar"]').then(($sidebar) => {
+      const sidebarRight = $sidebar[0].getBoundingClientRect().right;
+      cy.get("header").then(($header) => {
+        const headerLeft = $header[0].getBoundingClientRect().left;
+        // eslint-disable-next-line jest/valid-expect
+        expect(headerLeft).to.be.at.least(
+          sidebarRight - 1,
+          "Header should not overlap sidebar"
+        );
+      });
+    });
+  };
+
   describe("Package Mode", () => {
     beforeEach(() => {
       // Load the package-specific json
@@ -36,6 +55,9 @@ describe("Documentation Viewer", () => {
       cy.contains(" -> string").should("be.visible");
       cy.contains("bar a/A").should("be.visible");
       cy.contains(" -> A").should("be.visible");
+
+      // Layout: header blur must not overlap the sidebar
+      assertNoHeaderSidebarOverlap();
     });
 
     it("navigates to class A", () => {
@@ -44,11 +66,12 @@ describe("Documentation Viewer", () => {
       cy.contains("bar").should("be.visible");
 
       // Click on 'A' explicitly within the Classes section.
+      // scrollIntoView first since the sidebar can overlap the link
       cy.contains("h3", "Classes")
         .parent()
         .parent()
         .within(() => {
-          cy.contains("a", /^A$/).click();
+          cy.contains("a", /^A$/).scrollIntoView().click({ force: true });
         });
       cy.contains("Class A").should("be.visible");
 

cypress/integration/todo.spec.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 /// <reference types="cypress" />
+export { };
 
 // Welcome to Cypress!
 //

package.json

@@ -6,8 +6,8 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@fontsource/roboto": "^5.0.15",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "5.16.14",
+    "@mui/material": "5.16.14",
     "@reduxjs/toolkit": "^1.4.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
@@ -27,6 +27,7 @@
     "react-router-hash-link": "^2.2.2",
     "react-scripts": "^5.0.1",
     "redux": "^4.0.5",
+    "tss-react": "^4.9.20",
     "typescript": "^4.9.5"
   },
   "scripts": {

src/@types/emotion.d.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import { Theme as MTheme } from "@material-ui/core/styles";
+import { Theme as MTheme } from "@mui/material/styles";
 
 declare module "@emotion/react" {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface

src/@types/theme.d.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-export declare module "@material-ui/core/styles" {
+export declare module "@mui/material/styles" {
   interface Theme {
     layout: {
       sidebarWidth: string | number;

src/App.tsx

@@ -3,18 +3,19 @@
 // found in the LICENSE file.
 
 import styled from "@emotion/styled";
-import { CircularProgress } from "@material-ui/core";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import { CircularProgress } from "@mui/material";
+import { Theme } from "@mui/material/styles";
 import { AnyAction, ThunkDispatch } from "@reduxjs/toolkit";
 import React, { Component, useEffect } from "react";
 import { connect } from "react-redux";
 import {
-  BrowserRouter,
-  Redirect,
-  Route,
-  RouteComponentProps,
-  useLocation,
+    BrowserRouter,
+    Redirect,
+    Route,
+    RouteComponentProps,
+    useLocation,
 } from "react-router-dom";
+import { makeStyles } from "tss-react/mui";
 import { length, sideBarTheme, theme } from "./assets/theme";
 import "./assets/typography.css";
 import ErrorBoundary from "./components/ErrorPage";
@@ -24,7 +25,7 @@ import { LibraryInfoParams } from "./components/main/LibraryInfoView";
 import WelcomeFolderPage from "./components/main/WelcomeFolderPage";
 import WelcomePage from "./components/main/WelcomePage";
 import NavigationView, {
-  NavigationParams,
+    NavigationParams,
 } from "./components/navigation/NavigationView";
 import ThemeProvider from "./components/ThemeProvider";
 import ClassInfo from "./containers/main/ClassInfo";
@@ -52,39 +53,37 @@ const mapDispatchToProps = (
   };
 };
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    "@global": {
-      body: {
-        margin: 0,
-        fontFamily: "Roboto",
-      },
+const useStyles = makeStyles()((theme: Theme) => ({
+  "@global": {
+    body: {
+      margin: 0,
+      fontFamily: "Roboto",
+    },
 
-      code: {
-        fontFamily: "monospace",
-        fontSize: 14,
-      },
+    code: {
+      fontFamily: "monospace",
+      fontSize: 14,
+    },
 
-      "*": {
-        boxSizing: "border-box",
-      },
-      "a:link": {
-        color: theme.palette.primary.main,
-        textDecoration: "none",
-      },
-      "a:visited": {
-        color: theme.palette.primary.main,
-        textDecoration: "none",
-      },
-      "a:hover": {
-        textDecoration: "underline",
-      },
+    "*": {
+      boxSizing: "border-box",
+    },
+    "a:link": {
+      color: theme.palette.primary.main,
+      textDecoration: "none",
+    },
+    "a:visited": {
+      color: theme.palette.primary.main,
+      textDecoration: "none",
     },
-    appContainer: {
-      position: "relative",
+    "a:hover": {
+      textDecoration: "underline",
     },
-  })
-);
+  },
+  appContainer: {
+    position: "relative",
+  },
+}));
 
 const ContentWrapper = styled.div`
   padding-top: calc(3rem + ${({ theme }) => length(theme.layout.headerHeight)});
@@ -201,7 +200,7 @@ const FixedNavigationView = styled(NavigationView)`
 `;
 
 function AppContent(props: AppProps): JSX.Element {
-  const classes = useStyles(props);
+  const { classes } = useStyles();
 
   const { pathname } = useLocation();
 

src/assets/theme.ts

@@ -2,18 +2,18 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import { createMuiTheme } from "@material-ui/core";
+import { createTheme } from "@mui/material/styles";
 
 const layout = {
   sidebarWidth: "18rem",
   headerHeight: 64,
   footerHeight: "6rem",
 };
 
-export const theme = createMuiTheme({
+export const theme = createTheme({
   layout: layout,
   palette: {
-    type: "light",
+    mode: "light",
     background: {
       paper: "#fff",
       default: "#fff",
@@ -61,10 +61,10 @@ export const theme = createMuiTheme({
   },
 });
 
-export const sideBarTheme = createMuiTheme({
+export const sideBarTheme = createTheme({
   layout: layout,
   palette: {
-    type: "dark",
+    mode: "dark",
     background: {
       paper: "#000",
       default: "#000",

src/components/ErrorPage.tsx

@@ -2,29 +2,30 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import {
-  createStyles,
-  Grid,
-  StyleRules,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core";
+import { Grid, Theme } from "@mui/material";
 import React, { ErrorInfo } from "react";
 import { Link } from "react-router-dom";
+import { makeStyles } from "tss-react/mui";
 
-const styles = (theme: Theme): StyleRules =>
-  createStyles({
-    grid: {
-      margin: theme.spacing(3),
-    },
-  });
+const useStyles = makeStyles()((theme: Theme) => ({
+  grid: {
+    margin: theme.spacing(3),
+  },
+}));
 
-interface ErrorBoundaryProps extends WithStyles<typeof styles> {
+interface ErrorBoundaryProps {
   children: React.ReactNode;
 }
 
-class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+// Error boundaries must be class components
+class ErrorBoundaryInner extends React.Component<
+  ErrorBoundaryProps & { classes: Record<string, string> },
+  ErrorBoundaryState
+> {
   state = {
     hasError: false,
   };
@@ -39,7 +40,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
       // You can render any custom fallback UI
       console.log("ERROR: In the object ");
       return (
-        <Grid item className={this.props.classes.grid}>
+        <Grid className={this.props.classes.grid}>
           <h1>Something went wrong.</h1>
           <Link to={`/#`}>Home Page</Link>
         </Grid>
@@ -50,4 +51,8 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
   }
 }
 
-export default withStyles(styles)(ErrorBoundary);
+// Wrapper to inject makeStyles into the class component
+export default function ErrorBoundary(props: ErrorBoundaryProps): JSX.Element {
+  const { classes } = useStyles();
+  return <ErrorBoundaryInner classes={classes} {...props} />;
+}

src/components/ThemeProvider.tsx

@@ -4,9 +4,9 @@
 
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import {
-  Theme,
-  ThemeProvider as MaterialThemeProvider,
-} from "@material-ui/core/styles";
+    ThemeProvider as MaterialThemeProvider,
+    Theme,
+} from "@mui/material/styles";
 import React from "react";
 
 type ThemeProviderProps = React.PropsWithChildren<{

src/components/doc/Functions.tsx

@@ -2,15 +2,13 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import { makeStyles } from "@material-ui/core";
-import { ClassNameMap } from "@material-ui/core/styles/withStyles";
-import React from "react";
+import { makeStyles } from "tss-react/mui";
 import { getFunctionId } from "../../misc/util";
 import { Function, Method, Parameter, Type } from "../../model/model";
 import DetailsList from "../general/DetailsList";
 import { TypeView } from "./Type";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()(() => ({
   defaultValue: { fontSize: "0.875em" },
 }));
 
@@ -25,7 +23,7 @@ export function getDescription(
   returnType?: Type,
   hideReturnTypes?: boolean,
   includeDefaultValues?: boolean,
-  classes?: ClassNameMap<"defaultValue">
+  classes?: Record<"defaultValue", string>
 ): JSX.Element {
   return (
     <>
@@ -66,7 +64,7 @@ export function getDescription(
 }
 
 export default function Functions(props: FunctionsProps): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <DetailsList
       title={props.title}