From 2fb435bec0ba98c355e51675d1486af1cb7f8176 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sun, 3 Oct 2021 01:15:19 +0200
Subject: chore(web): bump MUI 5 to released version

---
 language-web/src/main/js/App.tsx                  | 137 +++++++++-------------
 language-web/src/main/js/editor/EditorButtons.tsx |  65 ++++------
 language-web/src/main/js/index.tsx                |  19 +--
 language-web/src/main/js/makeStyles.ts            |   4 -
 language-web/src/main/js/theme/EditorTheme.ts     |   2 +-
 language-web/src/main/js/theme/ThemeProvider.tsx  |   2 +-
 language-web/src/main/js/theme/ThemeStore.ts      |   4 +-
 7 files changed, 84 insertions(+), 149 deletions(-)
 delete mode 100644 language-web/src/main/js/makeStyles.ts

(limited to 'language-web/src/main/js')

diff --git a/language-web/src/main/js/App.tsx b/language-web/src/main/js/App.tsx
index 5cd157fa..d25ac4d3 100644
--- a/language-web/src/main/js/App.tsx
+++ b/language-web/src/main/js/App.tsx
@@ -1,92 +1,65 @@
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import MenuIcon from '@mui/icons-material/Menu';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import React from 'react';
-import AppBar from '@material-ui/core/AppBar';
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import MenuIcon from '@material-ui/icons/Menu';
-import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 
-import { makeStyles } from './makeStyles';
 import { EditorArea } from './editor/EditorArea';
 import { EditorButtons } from './editor/EditorButtons';
 
-const useStyles = makeStyles()((theme) => ({
-  container: {
-    height: '100vh',
-  },
-  menuButton: {
-    marginRight: theme.spacing(2),
-  },
-  title: {
-    flexGrow: 1,
-  },
-  editorBox: {
-    overflow: 'auto',
-  },
-}));
-
-export const App = (): JSX.Element => {
-  const { classes, cx } = useStyles();
-
-  return (
+export const App = (): JSX.Element => (
+  <Box
+    display="flex"
+    flexDirection="column"
+    sx={{ height: '100vh' }}
+  >
+    <AppBar
+      position="static"
+      color="inherit"
+    >
+      <Toolbar>
+        <IconButton
+          edge="start"
+          sx={{ mr: 2 }}
+          color="inherit"
+          aria-label="menu"
+        >
+          <MenuIcon />
+        </IconButton>
+        <Typography
+          variant="h6"
+          component="h1"
+          flexGrow={1}
+        >
+          Refinery
+        </Typography>
+      </Toolbar>
+    </AppBar>
     <Box
       display="flex"
-      flexDirection="column"
-      className={cx(classes.container)}
+      justifyContent="space-between"
+      alignItems="center"
+      p={1}
     >
-      <AppBar
-        position="static"
-        color="inherit"
-      >
-        <Toolbar>
-          <IconButton
-            edge="start"
-            className={cx(classes.menuButton)}
-            color="inherit"
-            aria-label="menu"
-          >
-            <MenuIcon />
-          </IconButton>
-          <Typography
-            variant="h6"
-            component="h1"
-            className={cx(classes.title)}
-          >
-            GraphSolver
-          </Typography>
-        </Toolbar>
-      </AppBar>
-      <Box
-        display="flex"
-        justifyContent="space-between"
-        alignItems="center"
-        p={1}
+      <EditorButtons />
+      <Button
+        variant="outlined"
+        color="primary"
+        startIcon={<PlayArrowIcon />}
       >
-        <Box
-          display="flex"
-          alignItems="center"
-        >
-          <EditorButtons />
-        </Box>
-        <Box>
-          <Button
-            variant="outlined"
-            color="primary"
-            startIcon={<PlayArrowIcon />}
-          >
-            Generate
-          </Button>
-        </Box>
-      </Box>
-      <Box
-        flexGrow={1}
-        flexShrink={1}
-        className={cx(classes.editorBox)}
-      >
-        <EditorArea />
-      </Box>
+        Generate
+      </Button>
+    </Box>
+    <Box
+      flexGrow={1}
+      flexShrink={1}
+      sx={{ overflow: 'auto' }}
+    >
+      <EditorArea />
     </Box>
-  );
-};
+  </Box>
+);
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx
index d3825c07..56577e82 100644
--- a/language-web/src/main/js/editor/EditorButtons.tsx
+++ b/language-web/src/main/js/editor/EditorButtons.tsx
@@ -1,76 +1,51 @@
 import { observer } from 'mobx-react-lite';
+import Stack from '@mui/material/Stack';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
+import RedoIcon from '@mui/icons-material/Redo';
+import UndoIcon from '@mui/icons-material/Undo';
 import React from 'react';
-import Button from '@material-ui/core/Button';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
-import ToggleButton from '@material-ui/core/ToggleButton';
-import Divider from '@material-ui/core/Divider';
-import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
-import RedoIcon from '@material-ui/icons/Redo';
-import UndoIcon from '@material-ui/icons/Undo';
 
-import { makeStyles } from '../makeStyles';
 import { useRootStore } from '../RootStore';
 
-const useStyles = makeStyles()((theme) => ({
-  iconButton: {
-    padding: 7,
-    border: 0,
-    color: theme.palette.text.primary,
-    '&, &.MuiButtonGroup-grouped': {
-      minWidth: 36,
-    },
-    '&.MuiButtonGroup-grouped:not(:last-of-type)': {
-      borderRight: 0,
-    },
-  },
-  divider: {
-    margin: theme.spacing(0.5),
-  },
-}));
-
 export const EditorButtons = observer(() => {
   const { editorStore } = useRootStore();
-  const { classes, cx } = useStyles();
 
   return (
-    <>
-      <ButtonGroup
-        variant="text"
+    <Stack
+      direction="row"
+      spacing={1}
+    >
+      <ToggleButtonGroup
+        size="small"
       >
-        <Button
+        <ToggleButton
           disabled={!editorStore.canUndo}
           onClick={() => editorStore.undo()}
-          className={cx(classes.iconButton)}
-          color="inherit"
           aria-label="Undo"
+          value="undo"
         >
           <UndoIcon fontSize="small" />
-        </Button>
-        <Button
+        </ToggleButton>
+        <ToggleButton
           disabled={!editorStore.canRedo}
           onClick={() => editorStore.redo()}
-          className={cx(classes.iconButton)}
-          color="inherit"
           aria-label="Redo"
+          value="redo"
         >
           <RedoIcon fontSize="small" />
-        </Button>
-      </ButtonGroup>
-      <Divider
-        flexItem
-        orientation="vertical"
-        className={classes.divider}
-      />
+        </ToggleButton>
+      </ToggleButtonGroup>
       <ToggleButton
         selected={editorStore.showLineNumbers}
         onChange={() => editorStore.toggleLineNumbers()}
         size="small"
-        className={cx(classes.iconButton)}
         aria-label="Show line numbers"
         value="show-line-numbers"
       >
         <FormatListNumberedIcon fontSize="small" />
       </ToggleButton>
-    </>
+    </Stack>
   );
 });
diff --git a/language-web/src/main/js/index.tsx b/language-web/src/main/js/index.tsx
index 86cb4a65..80c70f23 100644
--- a/language-web/src/main/js/index.tsx
+++ b/language-web/src/main/js/index.tsx
@@ -1,8 +1,6 @@
-import { CacheProvider } from '@emotion/react';
 import React from 'react';
 import { render } from 'react-dom';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import createCache from 'tss-react/@emotion/cache';
+import CssBaseline from '@mui/material/CssBaseline';
 
 import { App } from './App';
 import { RootStore, RootStoreProvider } from './RootStore';
@@ -49,19 +47,12 @@ scope Family = 1, Person += 5..10.
 const rootStore = new RootStore();
 rootStore.editorStore.updateValue(initialValue);
 
-const muiCache = createCache({
-  key: 'mui',
-  prepend: true,
-});
-
 const app = (
   <RootStoreProvider rootStore={rootStore}>
-    <CacheProvider value={muiCache}>
-      <ThemeProvider>
-        <CssBaseline />
-        <App />
-      </ThemeProvider>
-    </CacheProvider>
+    <ThemeProvider>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
   </RootStoreProvider>
 );
 
diff --git a/language-web/src/main/js/makeStyles.ts b/language-web/src/main/js/makeStyles.ts
deleted file mode 100644
index a80e8858..00000000
--- a/language-web/src/main/js/makeStyles.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createMakeStyles } from 'tss-react';
-import { useTheme } from '@material-ui/core/styles';
-
-export const { makeStyles } = createMakeStyles({ useTheme });
diff --git a/language-web/src/main/js/theme/EditorTheme.ts b/language-web/src/main/js/theme/EditorTheme.ts
index 957f2426..1b0dd5de 100644
--- a/language-web/src/main/js/theme/EditorTheme.ts
+++ b/language-web/src/main/js/theme/EditorTheme.ts
@@ -1,4 +1,4 @@
-import { PaletteMode } from '@material-ui/core';
+import type { PaletteMode } from '@mui/material';
 
 import cssVariables from '../../css/themeVariables.module.scss';
 
diff --git a/language-web/src/main/js/theme/ThemeProvider.tsx b/language-web/src/main/js/theme/ThemeProvider.tsx
index e7574725..f5b50be1 100644
--- a/language-web/src/main/js/theme/ThemeProvider.tsx
+++ b/language-web/src/main/js/theme/ThemeProvider.tsx
@@ -1,5 +1,5 @@
-import { ThemeProvider as MaterialUiThemeProvider } from '@material-ui/core/styles';
 import { observer } from 'mobx-react-lite';
+import { ThemeProvider as MaterialUiThemeProvider } from '@mui/material/styles';
 import React from 'react';
 
 import { useRootStore } from '../RootStore';
diff --git a/language-web/src/main/js/theme/ThemeStore.ts b/language-web/src/main/js/theme/ThemeStore.ts
index 2644a96a..3bbea3a1 100644
--- a/language-web/src/main/js/theme/ThemeStore.ts
+++ b/language-web/src/main/js/theme/ThemeStore.ts
@@ -1,9 +1,9 @@
+import { makeAutoObservable } from 'mobx';
 import {
   Theme,
   createTheme,
   responsiveFontSizes,
-} from '@material-ui/core/styles';
-import { makeAutoObservable } from 'mobx';
+} from '@mui/material/styles';
 
 import {
   EditorTheme,
-- 
cgit v1.2.3-70-g09d2