aboutsummaryrefslogtreecommitdiffstats
path: root/language-web/src
diff options
context:
space:
mode:
authorLibravatar Kristóf Marussy <kristof@marussy.com>2021-10-03 01:15:19 +0200
committerLibravatar Kristóf Marussy <kristof@marussy.com>2021-10-03 01:22:42 +0200
commit2fb435bec0ba98c355e51675d1486af1cb7f8176 (patch)
treeb3300eb90e3d5ca81207e62e7cdf8e348b86b2c9 /language-web/src
parentchore(web): bump frontend dependencies except MUI (diff)
downloadrefinery-2fb435bec0ba98c355e51675d1486af1cb7f8176.tar.gz
refinery-2fb435bec0ba98c355e51675d1486af1cb7f8176.tar.zst
refinery-2fb435bec0ba98c355e51675d1486af1cb7f8176.zip
chore(web): bump MUI 5 to released version
Diffstat (limited to 'language-web/src')
-rw-r--r--language-web/src/main/html/index.html2
-rw-r--r--language-web/src/main/js/App.tsx137
-rw-r--r--language-web/src/main/js/editor/EditorButtons.tsx65
-rw-r--r--language-web/src/main/js/index.tsx19
-rw-r--r--language-web/src/main/js/makeStyles.ts4
-rw-r--r--language-web/src/main/js/theme/EditorTheme.ts2
-rw-r--r--language-web/src/main/js/theme/ThemeProvider.tsx2
-rw-r--r--language-web/src/main/js/theme/ThemeStore.ts4
8 files changed, 85 insertions, 150 deletions
diff --git a/language-web/src/main/html/index.html b/language-web/src/main/html/index.html
index a418b0d1..f404aa8a 100644
--- a/language-web/src/main/html/index.html
+++ b/language-web/src/main/html/index.html
@@ -3,7 +3,7 @@
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Example Web Editor</title> 6 <title>Refinery</title>
7 </head> 7 </head>
8 <body> 8 <body>
9 <noscript> 9 <noscript>
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 @@
1import AppBar from '@mui/material/AppBar';
2import Box from '@mui/material/Box';
3import Button from '@mui/material/Button';
4import IconButton from '@mui/material/IconButton';
5import Toolbar from '@mui/material/Toolbar';
6import Typography from '@mui/material/Typography';
7import MenuIcon from '@mui/icons-material/Menu';
8import PlayArrowIcon from '@mui/icons-material/PlayArrow';
1import React from 'react'; 9import React from 'react';
2import AppBar from '@material-ui/core/AppBar';
3import Box from '@material-ui/core/Box';
4import Button from '@material-ui/core/Button';
5import IconButton from '@material-ui/core/IconButton';
6import Toolbar from '@material-ui/core/Toolbar';
7import Typography from '@material-ui/core/Typography';
8import MenuIcon from '@material-ui/icons/Menu';
9import PlayArrowIcon from '@material-ui/icons/PlayArrow';
10 10
11import { makeStyles } from './makeStyles';
12import { EditorArea } from './editor/EditorArea'; 11import { EditorArea } from './editor/EditorArea';
13import { EditorButtons } from './editor/EditorButtons'; 12import { EditorButtons } from './editor/EditorButtons';
14 13
15const useStyles = makeStyles()((theme) => ({ 14export const App = (): JSX.Element => (
16 container: { 15 <Box
17 height: '100vh', 16 display="flex"
18 }, 17 flexDirection="column"
19 menuButton: { 18 sx={{ height: '100vh' }}
20 marginRight: theme.spacing(2), 19 >
21 }, 20 <AppBar
22 title: { 21 position="static"
23 flexGrow: 1, 22 color="inherit"
24 }, 23 >
25 editorBox: { 24 <Toolbar>
26 overflow: 'auto', 25 <IconButton
27 }, 26 edge="start"
28})); 27 sx={{ mr: 2 }}
29 28 color="inherit"
30export const App = (): JSX.Element => { 29 aria-label="menu"
31 const { classes, cx } = useStyles(); 30 >
32 31 <MenuIcon />
33 return ( 32 </IconButton>
33 <Typography
34 variant="h6"
35 component="h1"
36 flexGrow={1}
37 >
38 Refinery
39 </Typography>
40 </Toolbar>
41 </AppBar>
34 <Box 42 <Box
35 display="flex" 43 display="flex"
36 flexDirection="column" 44 justifyContent="space-between"
37 className={cx(classes.container)} 45 alignItems="center"
46 p={1}
38 > 47 >
39 <AppBar 48 <EditorButtons />
40 position="static" 49 <Button
41 color="inherit" 50 variant="outlined"
42 > 51 color="primary"
43 <Toolbar> 52 startIcon={<PlayArrowIcon />}
44 <IconButton
45 edge="start"
46 className={cx(classes.menuButton)}
47 color="inherit"
48 aria-label="menu"
49 >
50 <MenuIcon />
51 </IconButton>
52 <Typography
53 variant="h6"
54 component="h1"
55 className={cx(classes.title)}
56 >
57 GraphSolver
58 </Typography>
59 </Toolbar>
60 </AppBar>
61 <Box
62 display="flex"
63 justifyContent="space-between"
64 alignItems="center"
65 p={1}
66 > 53 >
67 <Box 54 Generate
68 display="flex" 55 </Button>
69 alignItems="center" 56 </Box>
70 > 57 <Box
71 <EditorButtons /> 58 flexGrow={1}
72 </Box> 59 flexShrink={1}
73 <Box> 60 sx={{ overflow: 'auto' }}
74 <Button 61 >
75 variant="outlined" 62 <EditorArea />
76 color="primary"
77 startIcon={<PlayArrowIcon />}
78 >
79 Generate
80 </Button>
81 </Box>
82 </Box>
83 <Box
84 flexGrow={1}
85 flexShrink={1}
86 className={cx(classes.editorBox)}
87 >
88 <EditorArea />
89 </Box>
90 </Box> 63 </Box>
91 ); 64 </Box>
92}; 65);
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 @@
1import { observer } from 'mobx-react-lite'; 1import { observer } from 'mobx-react-lite';
2import Stack from '@mui/material/Stack';
3import ToggleButton from '@mui/material/ToggleButton';
4import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
5import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
6import RedoIcon from '@mui/icons-material/Redo';
7import UndoIcon from '@mui/icons-material/Undo';
2import React from 'react'; 8import React from 'react';
3import Button from '@material-ui/core/Button';
4import ButtonGroup from '@material-ui/core/ButtonGroup';
5import ToggleButton from '@material-ui/core/ToggleButton';
6import Divider from '@material-ui/core/Divider';
7import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
8import RedoIcon from '@material-ui/icons/Redo';
9import UndoIcon from '@material-ui/icons/Undo';
10 9
11import { makeStyles } from '../makeStyles';
12import { useRootStore } from '../RootStore'; 10import { useRootStore } from '../RootStore';
13 11
14const useStyles = makeStyles()((theme) => ({
15 iconButton: {
16 padding: 7,
17 border: 0,
18 color: theme.palette.text.primary,
19 '&, &.MuiButtonGroup-grouped': {
20 minWidth: 36,
21 },
22 '&.MuiButtonGroup-grouped:not(:last-of-type)': {
23 borderRight: 0,
24 },
25 },
26 divider: {
27 margin: theme.spacing(0.5),
28 },
29}));
30
31export const EditorButtons = observer(() => { 12export const EditorButtons = observer(() => {
32 const { editorStore } = useRootStore(); 13 const { editorStore } = useRootStore();
33 const { classes, cx } = useStyles();
34 14
35 return ( 15 return (
36 <> 16 <Stack
37 <ButtonGroup 17 direction="row"
38 variant="text" 18 spacing={1}
19 >
20 <ToggleButtonGroup
21 size="small"
39 > 22 >
40 <Button 23 <ToggleButton
41 disabled={!editorStore.canUndo} 24 disabled={!editorStore.canUndo}
42 onClick={() => editorStore.undo()} 25 onClick={() => editorStore.undo()}
43 className={cx(classes.iconButton)}
44 color="inherit"
45 aria-label="Undo" 26 aria-label="Undo"
27 value="undo"
46 > 28 >
47 <UndoIcon fontSize="small" /> 29 <UndoIcon fontSize="small" />
48 </Button> 30 </ToggleButton>
49 <Button 31 <ToggleButton
50 disabled={!editorStore.canRedo} 32 disabled={!editorStore.canRedo}
51 onClick={() => editorStore.redo()} 33 onClick={() => editorStore.redo()}
52 className={cx(classes.iconButton)}
53 color="inherit"
54 aria-label="Redo" 34 aria-label="Redo"
35 value="redo"
55 > 36 >
56 <RedoIcon fontSize="small" /> 37 <RedoIcon fontSize="small" />
57 </Button> 38 </ToggleButton>
58 </ButtonGroup> 39 </ToggleButtonGroup>
59 <Divider
60 flexItem
61 orientation="vertical"
62 className={classes.divider}
63 />
64 <ToggleButton 40 <ToggleButton
65 selected={editorStore.showLineNumbers} 41 selected={editorStore.showLineNumbers}
66 onChange={() => editorStore.toggleLineNumbers()} 42 onChange={() => editorStore.toggleLineNumbers()}
67 size="small" 43 size="small"
68 className={cx(classes.iconButton)}
69 aria-label="Show line numbers" 44 aria-label="Show line numbers"
70 value="show-line-numbers" 45 value="show-line-numbers"
71 > 46 >
72 <FormatListNumberedIcon fontSize="small" /> 47 <FormatListNumberedIcon fontSize="small" />
73 </ToggleButton> 48 </ToggleButton>
74 </> 49 </Stack>
75 ); 50 );
76}); 51});
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 @@
1import { CacheProvider } from '@emotion/react';
2import React from 'react'; 1import React from 'react';
3import { render } from 'react-dom'; 2import { render } from 'react-dom';
4import CssBaseline from '@material-ui/core/CssBaseline'; 3import CssBaseline from '@mui/material/CssBaseline';
5import createCache from 'tss-react/@emotion/cache';
6 4
7import { App } from './App'; 5import { App } from './App';
8import { RootStore, RootStoreProvider } from './RootStore'; 6import { RootStore, RootStoreProvider } from './RootStore';
@@ -49,19 +47,12 @@ scope Family = 1, Person += 5..10.
49const rootStore = new RootStore(); 47const rootStore = new RootStore();
50rootStore.editorStore.updateValue(initialValue); 48rootStore.editorStore.updateValue(initialValue);
51 49
52const muiCache = createCache({
53 key: 'mui',
54 prepend: true,
55});
56
57const app = ( 50const app = (
58 <RootStoreProvider rootStore={rootStore}> 51 <RootStoreProvider rootStore={rootStore}>
59 <CacheProvider value={muiCache}> 52 <ThemeProvider>
60 <ThemeProvider> 53 <CssBaseline />
61 <CssBaseline /> 54 <App />
62 <App /> 55 </ThemeProvider>
63 </ThemeProvider>
64 </CacheProvider>
65 </RootStoreProvider> 56 </RootStoreProvider>
66); 57);
67 58
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 @@
1import { createMakeStyles } from 'tss-react';
2import { useTheme } from '@material-ui/core/styles';
3
4export 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 @@
1import { PaletteMode } from '@material-ui/core'; 1import type { PaletteMode } from '@mui/material';
2 2
3import cssVariables from '../../css/themeVariables.module.scss'; 3import cssVariables from '../../css/themeVariables.module.scss';
4 4
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 @@
1import { ThemeProvider as MaterialUiThemeProvider } from '@material-ui/core/styles';
2import { observer } from 'mobx-react-lite'; 1import { observer } from 'mobx-react-lite';
2import { ThemeProvider as MaterialUiThemeProvider } from '@mui/material/styles';
3import React from 'react'; 3import React from 'react';
4 4
5import { useRootStore } from '../RootStore'; 5import { 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 @@
1import { makeAutoObservable } from 'mobx';
1import { 2import {
2 Theme, 3 Theme,
3 createTheme, 4 createTheme,
4 responsiveFontSizes, 5 responsiveFontSizes,
5} from '@material-ui/core/styles'; 6} from '@mui/material/styles';
6import { makeAutoObservable } from 'mobx';
7 7
8import { 8import {
9 EditorTheme, 9 EditorTheme,
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-08 15:31:08 +0000