Migration to mui v5 (#39)

* Upgrade mui dependencies and update imports * Pass down standalone package name * Use chips for links * Upgrade mui dependencies and update imports
stdlib-js · Sep 25, 2021 · d4b58e5 · d4b58e5
1 parent 2adc084
commit d4b58e5
Show file tree

Hide file tree

Showing 21 changed files with 109 additions and 96 deletions.
diff --git a/lib/server/lib/routes/home.jsx b/lib/server/lib/routes/home.jsx
@@ -22,7 +22,7 @@
 
 var React = require( 'react' );
 var render = require( 'react-dom/server' ).renderToString;
-var styles = require( '@material-ui/core/styles' );
+var styles = require( '@mui/styles' );
 
 
 // VARIABLES //

diff --git a/lib/server/lib/routes/packages.jsx b/lib/server/lib/routes/packages.jsx
@@ -24,7 +24,7 @@ var fs = require( 'fs' );
 var path = require( 'path' );
 var React = require( 'react' );
 var render = require( 'react-dom/server' ).renderToString;
-var styles = require( '@material-ui/core/styles' );
+var styles = require( '@mui/styles' );
 var readFile = require( '@stdlib/fs/read-file' );
 var pkg2title = require( './../title.js' );
 var packageData = require( './../package_data.js' );

diff --git a/lib/server/lib/routes/search.jsx b/lib/server/lib/routes/search.jsx
@@ -22,7 +22,7 @@
 
 var React = require( 'react' );
 var render = require( 'react-dom/server' ).renderToString;
-var styles = require( '@material-ui/core/styles' );
+var styles = require( '@mui/styles' );
 
 
 // VARIABLES //

diff --git a/lib/server/lib/routes/version.jsx b/lib/server/lib/routes/version.jsx
@@ -22,7 +22,7 @@
 
 var React = require( 'react' );
 var render = require( 'react-dom/server' ).renderToString;
-var styles = require( '@material-ui/core/styles' );
+var styles = require( '@mui/styles' );
 
 
 // VARIABLES //

diff --git a/package.json b/package.json
@@ -67,8 +67,10 @@
     "@babel/plugin-transform-react-jsx": "^7.7.0",
     "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/register": "^7.7.0",
-    "@material-ui/core": "^4.6.0",
-    "@material-ui/icons": "^4.5.1",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.1",
+    "@mui/material": "^5.0.1",
+    "@mui/styles": "^5.0.1",
     "fastify": "^3.20.2",
     "fastify-helmet": "^5.3.2",
     "fastify-static": "^4.2.3",

diff --git a/public/css/docs/bundle.min.css b/public/css/docs/bundle.min.css
diff --git a/public/css/docs/layout.css b/public/css/docs/layout.css
@@ -898,7 +898,7 @@ h2 {
 .top-nav .icon-button {
 	height: 2em;
 
-	margin-top: 0.5em;
+	margin-top: 0.2em;
 
 	padding-left: 8px;
 	padding-right: 8px;

diff --git a/src/app.jsx b/src/app.jsx
@@ -20,8 +20,11 @@
 
 import React, { Fragment } from 'react';
 import { Route, Redirect, Switch, matchPath, withRouter } from 'react-router-dom';
+import { ThemeProvider } from '@mui/styles';
+import { createTheme } from '@mui/material/styles';
 import qs from 'qs';
 import startsWith from '@stdlib/string/starts-with';
+import replace from '@stdlib/string/replace';
 import Welcome from './components/welcome/index.jsx';
 import Footer from './components/footer/index.jsx';
 import Readme from './components/readme/index.jsx';
@@ -53,6 +56,7 @@ var RENDER_METHOD_NAMES = {
 	'test': '_renderTest'
 };
 var SIDE_MENU_TIMEOUT = 1000; // milliseconds
+var theme = createTheme();
 
 
 // FUNCTIONS //
@@ -587,6 +591,7 @@ class App extends React.Component {
 					url={ match.url.replace( /tests$/, 'test_bundle.js' ) }
 					pkg={ match.params.pkg }
 					version={ version }
+					standalone={ replace( match.params.pkg, '/', '-' ) }
 				/>
 			);
 		}
@@ -757,48 +762,50 @@ class App extends React.Component {
 	*/
 	render() {
 		return (
-			<Fragment>
-				{ this._renderTopNav() }
-				<Switch>
-					<Redirect
-						exact
-						from={ routes.PACKAGE_INDEX }
-						to={ routes.PACKAGE_DEFAULT }
-					/>
-					<Route
-						exact
-						path={ routes.PACKAGE_BENCHMARKS }
-						render={ this._renderer( 'benchmark' ) }
-					/>
-					<Route
-						exact
-						path={ routes.PACKAGE_TESTS }
-						render={ this._renderer( 'test' ) }
-					/>
-					<Route
-						exact
-						path={ routes.PACKAGE_DEFAULT }
-						render={ this._renderer( 'readme' ) }
-					/>
-					<Route
-						exact
-						path={ routes.SEARCH }
-						render={ this._renderer( 'search' ) }
-					/>
-					<Redirect
-						exact
-						from={ routes.NONPACKAGE_DEFAULT }
-						to={ routes.VERSION_DEFAULT }
-					/>
-					<Route
-						exact
-						path={ routes.VERSION_DEFAULT }
-						render={ this._renderer( 'welcome' ) }
-					/>
-					<Redirect to={ config.mount+this.props.version } />
-				</Switch>
-				<Footer />
-			</Fragment>
+			<ThemeProvider theme={theme} >
+				<Fragment>
+					{ this._renderTopNav() }
+					<Switch>
+						<Redirect
+							exact
+							from={ routes.PACKAGE_INDEX }
+							to={ routes.PACKAGE_DEFAULT }
+						/>
+						<Route
+							exact
+							path={ routes.PACKAGE_BENCHMARKS }
+							render={ this._renderer( 'benchmark' ) }
+						/>
+						<Route
+							exact
+							path={ routes.PACKAGE_TESTS }
+							render={ this._renderer( 'test' ) }
+						/>
+						<Route
+							exact
+							path={ routes.PACKAGE_DEFAULT }
+							render={ this._renderer( 'readme' ) }
+						/>
+						<Route
+							exact
+							path={ routes.SEARCH }
+							render={ this._renderer( 'search' ) }
+						/>
+						<Redirect
+							exact
+							from={ routes.NONPACKAGE_DEFAULT }
+							to={ routes.VERSION_DEFAULT }
+						/>
+						<Route
+							exact
+							path={ routes.VERSION_DEFAULT }
+							render={ this._renderer( 'welcome' ) }
+						/>
+						<Redirect to={ config.mount+this.props.version } />
+					</Switch>
+					<Footer />
+				</Fragment>
+			</ThemeProvider>
 		);
 	}
 }

diff --git a/src/components/readme/breadcrumbs.jsx b/src/components/readme/breadcrumbs.jsx
@@ -20,7 +20,7 @@
 
 import React from 'react';
 import { Link } from 'react-router-dom';
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
 import pkgPath from './../../utils/pkg_doc_path.js';
 import config from './../../config.js';
 

diff --git a/src/components/readme/edit_link.jsx b/src/components/readme/edit_link.jsx
@@ -19,7 +19,7 @@
 // MODULES //
 
 import React from 'react';
-import EditIcon from '@material-ui/icons/Edit';
+import EditIcon from '@mui/icons-material/Edit';
 import config from './../../config.js';
 
 

diff --git a/src/components/runner/benchmark.jsx b/src/components/runner/benchmark.jsx
@@ -19,7 +19,7 @@
 // MODULES //
 
 import React, { Fragment } from 'react';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 import log from './../../utils/log.js';
 import config from './../../config.js';
 

diff --git a/src/components/runner/test.jsx b/src/components/runner/test.jsx
@@ -19,7 +19,7 @@
 // MODULES //
 
 import React, { Fragment } from 'react';
-import replace from '@stdlib/string/replace';
+import Chip from '@material-ui/core/Chip';
 import log from './../../utils/log.js';
 import config from './../../config.js';
 
@@ -82,8 +82,6 @@ class TestRunner extends React.Component {
 		this._prevLine = '';
 
 		this._worker = null;
-
-		this._standalone = replace( props.pkg, '/', '-' );
 	}
 
 	/**
@@ -421,23 +419,23 @@ class TestRunner extends React.Component {
 
 				<section className="runner-results badges" >
 
-					<a href={ GITHUB_PRE + this._standalone + GITHUB_WORKFLOW } >
-						<img
-							src={ GITHUB_PRE + this._standalone + GITHUB_WORKFLOW + BADGE_FILE }
-							alt="Built Status"
-						/>
-					</a>
-
-					<a href={ CODECOV_URL_PRE + this._standalone + CODECOV_QS } >
-						<img
-							src={ CODECOV_SVG_PRE + this._standalone + CODECOV_SVG_FILE }
-							alt="Code Coverage"
-						/>
-					</a>
-
-					<a href={ SNYK_PRE + this._standalone } >
+					<Chip
+						label="Build Status"
+						variant="outlined"
+						href={ GITHUB_PRE + this.props.standalone + GITHUB_WORKFLOW }
+						clickable
+					/>
+
+					<Chip
+						label="Code Coverage"
+						variant="outlined"
+						href={ CODECOV_URL_PRE + this.props.standalone + CODECOV_QS }
+						clickable
+					/>
+
+					<a href={ SNYK_PRE + this.props.standalone } >
 						<img
-							src={ SNYK_BADGE_PRE + this._standalone + BADGE_FILE }
+							src={ SNYK_BADGE_PRE + this.props.standalone + BADGE_FILE }
 							alt="Security Rating"
 						/>
 					</a>

diff --git a/src/components/search/index.jsx b/src/components/search/index.jsx
@@ -21,10 +21,10 @@
 import React from 'react';
 import lunr from 'lunr';
 import { Link, withRouter } from 'react-router-dom';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import IconButton from '@material-ui/core/IconButton';
-import ClearIcon from '@material-ui/icons/Clear';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import IconButton from '@mui/material/IconButton';
+import ClearIcon from '@mui/icons-material/Clear';
 import fetchSearchData from './../../utils/fetch_search_data.js';
 import packageDescription from './../../utils/package_description.js';
 import deprefix from './../../utils/deprefix_package_name.js';
@@ -278,7 +278,7 @@ class Search extends React.Component {
 			<div id="readme" className="readme search-results">
 				<h1>
 					<span>Search Results</span>
-					<IconButton aria-label="close">
+					<IconButton aria-label="close" size="large">
 						<ClearIcon
 							className="search-results-close"
 							title="Close search results"

diff --git a/src/components/top-nav/download_button.jsx b/src/components/top-nav/download_button.jsx
@@ -19,9 +19,9 @@
 // MODULES //
 
 import React from 'react';
-import IconButton from '@material-ui/core/IconButton';
-import GetAppIcon from '@material-ui/icons/GetApp';
-import CancelIcon from '@material-ui/icons/Cancel';
+import IconButton from '@mui/material/IconButton';
+import GetAppIcon from '@mui/icons-material/GetApp';
+import CancelIcon from '@mui/icons-material/Cancel';
 import fetchDownloadData from './../../utils/fetch_download_data.js';
 import download from './../../utils/download_assets.js';
 import log from './../../utils/log.js';
@@ -138,6 +138,7 @@ class DownloadButton extends React.Component {
 					title="Cancel download"
 					onClick={ this._onDownloadCancel }
 					aria-label="cancel download"
+					size="large"
 				>
 					<CancelIcon aria-hidden="true" />
 				</IconButton>
@@ -149,6 +150,7 @@ class DownloadButton extends React.Component {
 				title="Download documentation for offline access"
 				onClick={ this._onDownloadClick }
 				aria-label="download documentation"
+				size="large"
 			>
 				<GetAppIcon aria-hidden="true" />
 			</IconButton>

diff --git a/src/components/top-nav/download_progress_bar.jsx b/src/components/top-nav/download_progress_bar.jsx
@@ -19,7 +19,7 @@
 // MODULES //
 
 import React from 'react';
-import LinearProgress from '@material-ui/core/LinearProgress';
+import LinearProgress from '@mui/material/LinearProgress';
 
 
 // MAIN //

diff --git a/src/components/top-nav/pkg-menu/index.jsx b/src/components/top-nav/pkg-menu/index.jsx
@@ -19,8 +19,8 @@
 // MODULES //
 
 import React, { Fragment } from 'react';
-import IconButton from '@material-ui/core/IconButton';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import IconButton from '@mui/material/IconButton';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import pkgPath from './../../../utils/pkg_doc_path.js';
 import Benchmarks from './benchmarks.jsx';
 import Docs from './docs.jsx';
@@ -108,6 +108,7 @@ class PackageMenu extends React.Component {
 					aria-controls="top-nav-package-menu"
 					aria-expanded={ this.props.open }
 					aria-haspopup="menu"
+					size="large"
 				>
 					<ExpandMoreIcon aria-hidden="true" />
 				</IconButton>

diff --git a/src/components/top-nav/search_input.jsx b/src/components/top-nav/search_input.jsx
@@ -19,9 +19,9 @@
 // MODULES //
 
 import React, { Fragment } from 'react';
-import InputBase from '@material-ui/core/InputBase';
-import IconButton from '@material-ui/core/IconButton';
-import SearchIcon from '@material-ui/icons/Search';
+import InputBase from '@mui/material/InputBase';
+import IconButton from '@mui/material/IconButton';
+import SearchIcon from '@mui/icons-material/Search';
 
 
 // MAIN //
@@ -139,6 +139,7 @@ class SearchInput extends React.Component {
 					className="icon-button top-nav-search-button"
 					onClick={ this._onSubmitClick }
 					aria-label="search"
+					size="large"
 				>
 					<SearchIcon aria-hidden="true" />
 				</IconButton>

diff --git a/src/components/top-nav/side-menu/drawer.jsx b/src/components/top-nav/side-menu/drawer.jsx
@@ -22,11 +22,11 @@ import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 import { debounce } from 'throttle-debounce';
 import scrollIntoView from 'scroll-into-view-if-needed';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import Collapse from '@material-ui/core/Collapse';
-import Drawer from '@material-ui/core/Drawer';
-import IconButton from '@material-ui/core/IconButton';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Collapse from '@mui/material/Collapse';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
 import pkgPath from './../../../utils/pkg_doc_path.js';
 import packageTree from './../../../utils/package_tree.js';
 import namespaces from './../../../utils/namespace_list.js';

diff --git a/src/components/top-nav/side-menu/filter.jsx b/src/components/top-nav/side-menu/filter.jsx
@@ -19,7 +19,7 @@
 // MODULES //
 
 import React from 'react';
-import ClearIcon from '@material-ui/icons/Clear';
+import ClearIcon from '@mui/icons-material/Clear';
 
 
 // MAIN //