Initial changes for migrating to MUI5

MetaCell · Feb 9, 2024 · 95bd045 · 95bd045
1 parent eccca20
commit 95bd045
Show file tree

Hide file tree

Showing 29 changed files with 264 additions and 265 deletions.
diff --git a/geppetto-showcase/package.json b/geppetto-showcase/package.json
@@ -54,7 +54,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
-    "@material-ui/core": "4.11.4",
+    "@mui/material": "^5.15.9",
     "@material-ui/icons": "^4.11.2",
     "@metacell/geppetto-meta-client": "file:.yalc/@metacell/geppetto-meta-client",
     "@metacell/geppetto-meta-core": "file:.yalc/@metacell/geppetto-meta-core",

diff --git a/geppetto-showcase/src/App.js b/geppetto-showcase/src/App.js
@@ -3,10 +3,10 @@ import {
   createMuiTheme,
   responsiveFontSizes,
   MuiThemeProvider,
-} from '@material-ui/core/styles';
-import { blue, orange } from '@material-ui/core/colors';
+} from '@mui/material/styles';
+import { blue, orange } from '@mui/material/colors';
 import Main from './components/Main';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import CssBaseline from '@mui/material/CssBaseline';
 const GEPPETTO = {};
 window.GEPPETTO = GEPPETTO;
 

diff --git a/geppetto-showcase/src/components/BottomNavigation.jsx b/geppetto-showcase/src/components/BottomNavigation.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Divider from '@material-ui/core/Divider';
+import { withStyles } from '@mui/material/styles';
+import Button from '@mui/material';
+import Divider from '@mui/material/Divider';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 import pages from '../pages/index';

diff --git a/geppetto-showcase/src/components/DrawerContent.jsx b/geppetto-showcase/src/components/DrawerContent.jsx
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import ListItem from '@material-ui/core/ListItem';
+import ListItem from '@mui/material/ListItem';
 import { ExpandLess, ExpandMore } from '@material-ui/icons';
-import ListItemText from '@material-ui/core/ListItemText';
-import List from '@material-ui/core/List';
-import Collapse from '@material-ui/core/Collapse';
-import { withStyles } from '@material-ui/core/styles';
+import ListItemText from '@mui/material/ListItemText';
+import List from '@mui/material/List';
+import Collapse from '@mui/material/Collapse';
+import { withStyles } from '@mui/material/styles';
 import pages from '../pages/index';
 import stringSimilarity from 'string-similarity';
 

diff --git a/geppetto-showcase/src/components/Main.jsx b/geppetto-showcase/src/components/Main.jsx
@@ -1,11 +1,11 @@
 import React, { Component, Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
-import { withStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Drawer from '@material-ui/core/Drawer';
+import { withStyles } from '@mui/material/styles';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Drawer from '@mui/material/Drawer';
 import DrawerContent from './DrawerContent';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material';
 import Search from './Search';
 import pages from '../pages/index'
 import Loader from '@metacell/geppetto-meta-ui/loader/Loader'

diff --git a/geppetto-showcase/src/components/Search.jsx b/geppetto-showcase/src/components/Search.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import SearchIcon from '@material-ui/icons/Search';
-import InputBase from '@material-ui/core/InputBase';
-import { fade, withStyles } from '@material-ui/core/styles';
+import InputBase from '@mui/material/InputBase';
+import { fade, withStyles } from '@mui/material/styles';
 
 const styles = (theme) => ({
   search: {

diff --git a/geppetto-showcase/src/components/showcase/Code.jsx b/geppetto-showcase/src/components/showcase/Code.jsx
@@ -1,11 +1,11 @@
 import React, { Component, Fragment } from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@mui/material/styles';
 import IconButtonWithTooltip from '../utilities/IconButtonWithTooltip';
 import { faCode, faEdit, faCopy } from '@fortawesome/free-solid-svg-icons';
-import Toolbar from '@material-ui/core/Toolbar';
+import Toolbar from '@mui/material/Toolbar';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import Snackbar from '@material-ui/core/Snackbar';
+import Snackbar from '@mui/material/Snackbar';
 
 const styles = theme => ({
   toolbar: {

diff --git a/geppetto-showcase/src/components/showcase/PropsTable.jsx b/geppetto-showcase/src/components/showcase/PropsTable.jsx
@@ -1,15 +1,15 @@
 import React, { Component, Fragment } from 'react';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
-import { withStyles } from '@material-ui/core/styles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import { withStyles } from '@mui/material/styles';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import ExpandLess from '@material-ui/icons/ExpandLess';
-import IconButton from '@material-ui/core/IconButton';
+import IconButton from '@mui/materialButton';
 
 const styles = (theme) => ({
   tableName: {

diff --git a/geppetto-showcase/src/components/showcase/Showcase.jsx b/geppetto-showcase/src/components/showcase/Showcase.jsx
@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@mui/material/styles';
 import Code from './Code';
 import { getConfigFromMarkdown } from './ShowcaseUtils';
-import Paper from '@material-ui/core/Paper';
-import Chip from '@material-ui/core/Chip';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
+import Paper from '@mui/material/Paper';
+import Chip from '@mui/material/Chip';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import PropsTable from './PropsTable';
 import BottomNavigation from '../BottomNavigation';

diff --git a/geppetto-showcase/src/components/utilities/IconButtonWithTooltip.js b/geppetto-showcase/src/components/utilities/IconButtonWithTooltip.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import Tooltip from '@material-ui/core/Tooltip';
-import IconButton from '@material-ui/core/IconButton';
-import { withStyles } from '@material-ui/core/styles';
+import Tooltip from '@mui/material/Tooltip';
+import IconButton from '@mui/materialButton';
+import { withStyles } from '@mui/material/styles';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const styles = { lightTooltip: { fontSize: 12, }, };

diff --git a/geppetto-showcase/src/examples/3d-canvas/AuditoryCortexExample.js b/geppetto-showcase/src/examples/3d-canvas/AuditoryCortexExample.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@mui/material';
 import Canvas from '@metacell/geppetto-meta-ui/3d-canvas/Canvas'; 
 import CameraControls from '@metacell/geppetto-meta-ui/camera-controls/CameraControls';
 import Loader from "@metacell/geppetto-meta-ui/loader/Loader";
-import Button from "@material-ui/core/Button";
+import Button from "@material-ui/core";
 import Manager from '@metacell/geppetto-meta-core/ModelManager';
 import { applySelection, mapToCanvasData } from "@metacell/geppetto-meta-ui/3d-canvas/utils/SelectionUtils"
 

diff --git a/geppetto-showcase/src/examples/3d-canvas/AuditoryCortexExample2.js b/geppetto-showcase/src/examples/3d-canvas/AuditoryCortexExample2.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@mui/material';
 import Canvas from '@metacell/geppetto-meta-ui/3d-canvas/Canvas';
 import CameraControls from '@metacell/geppetto-meta-ui/camera-controls/CameraControls';
-import Button from "@material-ui/core/Button";
+import Button from "@material-ui/core";
 import Loader from "@metacell/geppetto-meta-ui/loader/Loader";
 import Manager from '@metacell/geppetto-meta-core/ModelManager';
 import { applySelection, mapToCanvasData } from "@metacell/geppetto-meta-ui/3d-canvas/utils/SelectionUtils";

diff --git a/geppetto-showcase/src/examples/3d-canvas/CA1CellExample.js b/geppetto-showcase/src/examples/3d-canvas/CA1CellExample.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@mui/material';
 import Canvas from '@metacell/geppetto-meta-ui/3d-canvas/Canvas';
 import CameraControls from '@metacell/geppetto-meta-ui/camera-controls/CameraControls';
-import Button from "@material-ui/core/Button";
+import Button from "@material-ui/core";
 import Loader from '@metacell/geppetto-meta-ui/loader/Loader';
 import Manager from '@metacell/geppetto-meta-core/ModelManager';
 import { applySelection, mapToCanvasData } from "@metacell/geppetto-meta-ui/3d-canvas/utils/SelectionUtils"

diff --git a/geppetto-showcase/src/examples/3d-canvas/CustomControlsExample.js b/geppetto-showcase/src/examples/3d-canvas/CustomControlsExample.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import * as THREE from 'three';
 import Canvas from "@metacell/geppetto-meta-ui/3d-canvas/Canvas";
 import SimpleInstance from "@metacell/geppetto-meta-core/model/SimpleInstance";
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@mui/material';
 import neuron from './assets/SketchVolumeViewer_SAAVR_SAAVR_1_1_0000_draco.gltf';
 import contact from './assets/Sketch_Volume_Viewer_AIB_Rby_AIAR_AIB_Rby_AIAR_1_1_0000_green_0_24947b6670.gltf';
-import Button from "@material-ui/core/Button";
+import Button from "@material-ui/core";
 import { applySelection, mapToCanvasData } from "@metacell/geppetto-meta-ui/3d-canvas/utils/SelectionUtils"
 import Resources from '@metacell/geppetto-meta-core/Resources';
 import ModelFactory from '@metacell/geppetto-meta-core/ModelFactory';

diff --git a/geppetto-showcase/src/examples/3d-canvas/LimitedAuditoryCortexExample.js b/geppetto-showcase/src/examples/3d-canvas/LimitedAuditoryCortexExample.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@mui/material';
 import Canvas from '@metacell/geppetto-meta-ui/3d-canvas/Canvas'; 
 import CameraControls from '@metacell/geppetto-meta-ui/camera-controls/CameraControls';
 import Loader from "@metacell/geppetto-meta-ui/loader/Loader";
-import Button from "@material-ui/core/Button";
+import Button from "@material-ui/core";
 import Manager from '@metacell/geppetto-meta-core/ModelManager';
 import { applySelection, mapToCanvasData } from "@metacell/geppetto-meta-ui/3d-canvas/utils/SelectionUtils"
 

diff --git a/geppetto-showcase/src/examples/3d-canvas/MultipleInstancesExample.js b/geppetto-showcase/src/examples/3d-canvas/MultipleInstancesExample.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import Canvas from "@metacell/geppetto-meta-ui/3d-canvas/Canvas";
 import CameraControls from "@metacell/geppetto-meta-ui/camera-controls/CameraControls";
 import SimpleInstance from "@metacell/geppetto-meta-core/model/SimpleInstance";
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@mui/material';
 import neuron from './assets/SketchVolumeViewer_SAAVR_SAAVR_1_1_0000_draco.gltf';
 import contact from './assets/Sketch_Volume_Viewer_AIB_Rby_AIAR_AIB_Rby_AIAR_1_1_0000_green_0_24947b6670.gltf';
-import Button from "@material-ui/core/Button";
+import Button from "@material-ui/core";
 import Resources from '@metacell/geppetto-meta-core/Resources';
 import ModelFactory from '@metacell/geppetto-meta-core/ModelFactory';
 import { augmentInstancesArray } from '@metacell/geppetto-meta-core/Instances';

diff --git a/geppetto-showcase/src/examples/3d-canvas/SimpleInstancesExample.js b/geppetto-showcase/src/examples/3d-canvas/SimpleInstancesExample.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import Canvas from "@metacell/geppetto-meta-ui/3d-canvas/Canvas";
 import CameraControls from "@metacell/geppetto-meta-ui/camera-controls/CameraControls";
 import SimpleInstance from "@metacell/geppetto-meta-core/model/SimpleInstance";
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@mui/material';
 import neuron from './assets/SketchVolumeViewer_SAAVR_SAAVR_1_1_0000_draco.gltf';
 import contact from './assets/Sketch_Volume_Viewer_AIB_Rby_AIAR_AIB_Rby_AIAR_1_1_0000_green_0_24947b6670.gltf';
-import Button from "@material-ui/core/Button";
+import Button from "@material-ui/core";
 import { applySelection, mapToCanvasData } from "@metacell/geppetto-meta-ui/3d-canvas/utils/SelectionUtils"
 import CaptureControls from "@metacell/geppetto-meta-ui/capture-controls/CaptureControls";
 import Resources from '@metacell/geppetto-meta-core/Resources';

diff --git a/geppetto-showcase/src/examples/3d-canvas/VFBExample.js b/geppetto-showcase/src/examples/3d-canvas/VFBExample.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@mui/material';
 import Canvas from '@metacell/geppetto-meta-ui/3d-canvas/Canvas';
 import CameraControls from '@metacell/geppetto-meta-ui/camera-controls/CameraControls';
 import * as THREE from 'three';
 import Loader from "@metacell/geppetto-meta-ui/loader/Loader";
-import Button from "@material-ui/core/Button";
+import Button from "@material-ui/core";
 import { applySelection, mapToCanvasData } from "@metacell/geppetto-meta-ui/3d-canvas/utils/SelectionUtils"
 import Manager from '@metacell/geppetto-meta-core/ModelManager';
 

diff --git a/geppetto-showcase/src/examples/big-image-viewer/BigImageViewerExample.js b/geppetto-showcase/src/examples/big-image-viewer/BigImageViewerExample.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import BigImageViewer from '@metacell/geppetto-meta-ui/big-image-viewer/BigImageViewer';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@mui/material';
 
 const styles = {
   bigImageViewer: {

diff --git a/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseForce.js b/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseForce.js
@@ -5,7 +5,7 @@ import Resources from '@metacell/geppetto-meta-core/Resources';
 import model from './model';
 import { Force } from '@metacell/geppetto-meta-ui/connectivity-viewer/layouts/Force';
 import ConnectivityComponent from '@metacell/geppetto-meta-ui/connectivity-viewer/ConnectivityComponent';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@mui/material';
 
 const styles = {
   connectivity: {

diff --git a/geppetto-showcase/src/examples/loader/LoaderShowcase1.js b/geppetto-showcase/src/examples/loader/LoaderShowcase1.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Loader from '@metacell/geppetto-meta-ui/loader/Loader';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material';
 
 export default class LoaderShowcase1 extends Component {
   constructor (props) {

diff --git a/geppetto-showcase/src/examples/loader/LoaderShowcase2.js b/geppetto-showcase/src/examples/loader/LoaderShowcase2.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Loader from '@metacell/geppetto-meta-ui/loader/Loader';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material';
 
 export default class LoaderShowcase2 extends Component {
   constructor (props) {

diff --git a/geppetto-showcase/src/examples/loader/LoaderShowcase3.js b/geppetto-showcase/src/examples/loader/LoaderShowcase3.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Loader from '@metacell/geppetto-meta-ui/loader/Loader';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material';
 
 export default class LoaderShowcase3 extends Component {
   constructor (props) {

diff --git a/geppetto-showcase/src/examples/loader/LoaderShowcase4.js b/geppetto-showcase/src/examples/loader/LoaderShowcase4.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Loader from '@metacell/geppetto-meta-ui/loader/Loader';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material';
 
 export default class LoaderShowcase4 extends Component {
   constructor (props) {

diff --git a/geppetto-showcase/src/examples/loader/LoaderShowcase5.js b/geppetto-showcase/src/examples/loader/LoaderShowcase5.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Loader from '@metacell/geppetto-meta-ui/loader/Loader';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material';
 
 export default class LoaderShowcase4 extends Component {
   constructor (props) {

diff --git a/geppetto-showcase/src/examples/loader/LoaderShowcase6.js b/geppetto-showcase/src/examples/loader/LoaderShowcase6.js
@@ -1,8 +1,8 @@
 import React, { Component, Fragment } from 'react';
 import Loader from '@metacell/geppetto-meta-ui/loader/Loader';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material';
 import * as FlexLayout from '@metacell/geppetto-meta-ui/flex-layout/src';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@mui/material';
 
 const styles = () => ({
   container: {

diff --git a/geppetto-showcase/src/examples/loader/LoaderShowcase7.js b/geppetto-showcase/src/examples/loader/LoaderShowcase7.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Loader from '@metacell/geppetto-meta-ui/loader/Loader';
-import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core';
+import Button from '@mui/material';
+import { withStyles } from '@mui/material';
 
 const styles = () => ({ typography: { textDecoration: 'underline', }, });
 

diff --git a/geppetto-showcase/src/pages/home.js b/geppetto-showcase/src/pages/home.js
@@ -1,4 +1,4 @@
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import React, { Component, Fragment } from 'react';
 
 export default class Home extends Component {