Migrate to MUI v5 (#28)

package.json

@@ -102,9 +102,9 @@
     "@babel/runtime": "^7.16.3",
     "@emotion/react": "^11.6.0",
     "@emotion/styled": "^11.6.0",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@mui/icons-material": "^5.3.1",
+    "@mui/material": "^5.3.1",
+    "@mui/styles": "^5.3.0",
     "@reduxjs/toolkit": "^1.6.2",
     "assert": "^2.0.0",
     "browserify-zlib": "^0.2.0",
@@ -118,7 +118,7 @@
     "jszip": "^3.6.0",
     "konva": "8.3.0",
     "localforage": "^1.9.0",
-    "material-ui-color": "^1.2.0",
+    "mui-color": "^2.0.0-beta.2",
     "pako": "^2.0.3",
     "react": "^17.0.2",
     "react-colorful": "^5.2.0",

src/App.tsx

@@ -5,7 +5,7 @@ import { ToastContainer } from 'react-toastify'
 import { useDispatch, useSelector } from 'react-redux'
 import { useInjectReducer, useInjectSaga } from 'redux-injectors'
 import { getImage } from './common/utils/image'
-import { FOOTER_HEIGHT, RIGHT_BAR_WIDTH } from './common/constants'
+import { RIGHT_BAR_WIDTH } from './common/constants'
 import { EDITOR_RESOURCE_NAME } from './store/editor/constants'
 import { selectIsLoading } from './store/app/selectors'
 import { selectCanvas, selectTileset } from './store/editor/selectors'
@@ -17,7 +17,6 @@ import LoadingIndicator from './components/LoadingIndicator'
 import LayersList from './components/LayersList'
 import ToolBar from './components/ToolBar'
 import KonvaStage from './components/KonvaStage'
-import Footer from './components/Footer'
 import TabContainer from './components/TabsContainer'
 import WelcomeDialog from './components/WelcomeDialog'
 import ImportDialog from './components/ImportDialog'
@@ -34,14 +33,10 @@ const StyledWrapper = styled.div`
 `
 
 const StyledContainer = styled.div`
-    height: calc(100vh - ${FOOTER_HEIGHT}px);
+    height: calc(100vh);
     display: flex;
 `
 
-const StyledFooter = styled(Footer)`
-    height: ${FOOTER_HEIGHT}px;
-`
-
 const StyledMiddleContainer = styled.div`
     display: flex;
     flex-direction: column;
@@ -104,7 +99,7 @@ const App = (): JSX.Element => {
 
     return (
         <StyledWrapper>
-            <ToastContainer theme="dark" autoClose={2000} />
+            <ToastContainer position="bottom-left" theme="dark" autoClose={2000} />
             <WelcomeDialog />
             <ImportDialog />
             <NewProjectDialog />
@@ -117,7 +112,6 @@ const App = (): JSX.Element => {
                     <LayersList />
                 </StyledRightContainer>
             </StyledContainer>
-            <StyledFooter />
         </StyledWrapper>
     )
 }

src/assets/projects/demo-project.json

@@ -51,6 +51,7 @@
         "area": null,
         "color": [0, 0, 0, 255],
         "layerId": "a3841a1f-4f7a-486b-8eaf-1bfe4f939cb8",
+        "palette": "DEFAULT",
         "stamp": [],
         "tileId": 1,
         "tool": "DRAG",

src/common/constants.ts

@@ -1,9 +1,8 @@
 export const IS_PRODUCTION = process.env.NODE_ENV === 'production'
 
-export const FOOTER_HEIGHT = 30
 export const LEFT_BAR_WIDTH = 60
 export const RIGHT_BAR_WIDTH = 340
-export const STATUS_BAR_HEIGHT = 30
+export const STATUS_BAR_HEIGHT = 34
 
 export const SCALE_BY = 1.2
 export const SCALE_MIN = 0.25

src/components/ConfirmationDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core'
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 
 type Props = {

src/components/GridLines.tsx

@@ -16,27 +16,37 @@ type Props = {
 const GridLines = forwardRef<Konva.Group | null, Props>(({ grid, width, height, scale, dash, x, y }: Props, ref) => {
     const mesh = useMemo(() => {
         const lines: any[] = []
-        const getStrokeWidth = (i: number) => (grid.pitch && i % grid.pitch === 0 ? 0.5 / scale : 0.2 / scale)
-        const line = (key: string, points: any[], strokeWidth: number) => (
-            <Line
-                dash={dash && grid.width * scale > 8 ? [2 / scale, 1 / scale] : undefined}
-                {...{
-                    key,
-                    points,
-                    stroke: getRgbaValue(grid.color),
-                    strokeWidth
-                }}
-            />
-        )
-        for (let i = 1; i < width / grid.width; i += 1) {
-            lines.push(
-                line(`w${i}`, [Math.round(i * grid.width), 0, Math.round(i * grid.width), height], getStrokeWidth(i))
-            )
-        }
-        for (let j = 1; j < height / grid.height; j += 1) {
-            lines.push(
-                line(`h${j}`, [0, Math.round(j * grid.height), width, Math.round(j * grid.height)], getStrokeWidth(j))
+        if (scale > 0.5) {
+            const getStrokeWidth = (i: number) => (grid.pitch && i % grid.pitch === 0 ? 0.5 / scale : 0.2 / scale)
+            const line = (key: string, points: any[], strokeWidth: number) => (
+                <Line
+                    dash={dash && grid.width * scale > 8 ? [2 / scale, 1 / scale] : undefined}
+                    {...{
+                        key,
+                        points,
+                        stroke: getRgbaValue(grid.color),
+                        strokeWidth
+                    }}
+                />
             )
+            for (let i = 1; i < width / grid.width; i += 1) {
+                lines.push(
+                    line(
+                        `w${i}`,
+                        [Math.round(i * grid.width), 0, Math.round(i * grid.width), height],
+                        getStrokeWidth(i)
+                    )
+                )
+            }
+            for (let j = 1; j < height / grid.height; j += 1) {
+                lines.push(
+                    line(
+                        `h${j}`,
+                        [0, Math.round(j * grid.height), width, Math.round(j * grid.height)],
+                        getStrokeWidth(j)
+                    )
+                )
+            }
         }
         return lines
     }, [grid, scale, dash, width, height])

src/components/Icons/EraserIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import SvgIcon from '@material-ui/core/SvgIcon'
+import SvgIcon from '@mui/material/SvgIcon'
 
 const EraserIcon = (props): JSX.Element => (
     <SvgIcon {...props}>

src/components/Icons/LineIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import SvgIcon from '@material-ui/core/SvgIcon'
+import SvgIcon from '@mui/material/SvgIcon'
 
 const LineIcon = (props): JSX.Element => (
     <SvgIcon width="24" height="24" viewBox="0 0 24 24" {...props}>

src/components/Icons/StampIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import SvgIcon from '@material-ui/core/SvgIcon'
+import SvgIcon from '@mui/material/SvgIcon'
 
 const StampIcon = (props): JSX.Element => (
     <SvgIcon {...props} viewBox="0 0 229.885 229.885">

src/components/Icons/TileReplaceIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import SvgIcon from '@material-ui/core/SvgIcon'
+import SvgIcon from '@mui/material/SvgIcon'
 
 const TileReplaceIcon = (props): JSX.Element => (
     <SvgIcon viewBox="0 0 1024 1024" {...props}>

src/components/ImportDialog.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { makeStyles, withStyles } from '@material-ui/core/styles'
 import {
     Button,
     Dialog,
@@ -16,7 +15,7 @@ import {
     RadioGroup,
     TextField,
     Typography
-} from '@material-ui/core'
+} from '@mui/material'
 import { IMPORT_MODES } from '../common/constants'
 import { changeAppImportedImage } from '../store/app/actions'
 import { createNewImageLayerFromFile, createNewTileLayerFromFile } from '../store/editor/actions'
@@ -26,18 +25,7 @@ import { getImage } from '../common/utils/image'
 import { LayerImportConfig } from '../store/editor/types'
 import ImportPreview from './ImportPreview'
 
-const ImageResolutionInfo = withStyles({ root: { color: '#222' } })(Typography)
-
-const useStyles = makeStyles(theme => ({
-    input: {
-        marginRight: theme.spacing(1),
-        marginTop: theme.spacing(1),
-        minWidth: '80px'
-    }
-}))
-
 const ImportDialog = (): JSX.Element => {
-    const classes = useStyles()
     const canvas = useSelector(selectCanvas)
     const tileset = useSelector(selectTileset)
     const importedImage = useSelector(selectImportedImage)
@@ -116,41 +104,39 @@ const ImportDialog = (): JSX.Element => {
                             <FormControlLabel
                                 value={IMPORT_MODES.NEW_PROJECT}
                                 control={<Radio color="primary" />}
-                                label={t('i18_as_a_new_project')}
+                                label={t('i18_as_a_new_project') as string}
                             />
                             <FormControlLabel
                                 value={IMPORT_MODES.NEW_LAYER}
                                 control={<Radio color="primary" />}
-                                label={t('i18_as_a_new_layer')}
+                                label={t('i18_as_a_new_layer') as string}
                             />
                             <FormControlLabel
                                 value={IMPORT_MODES.NEW_IMAGE}
                                 control={<Radio color="primary" />}
-                                label={t('i18_as_an_image')}
+                                label={t('i18_as_an_image') as string}
                             />
                         </RadioGroup>
                     </FormControl>
                 )}
-                <Grid container>
-                    <TextField
-                        fullWidth
-                        className={classes.input}
-                        value={name}
-                        onChange={e => setConfigProp('name', e.target.value)}
-                        id="name"
-                        label={t('i18_layer_name')}
-                        size="small"
-                        variant="outlined"
-                    />
-                </Grid>
+
+                <TextField
+                    fullWidth={true}
+                    value={name}
+                    onChange={e => setConfigProp('name', e.target.value)}
+                    id="name"
+                    label={t('i18_layer_name')}
+                    size="small"
+                    variant="standard"
+                />
+
                 {image && <ImportPreview {...{ config, image }} />}
-                <Grid container>
+                <Grid container spacing={1}>
                     {mode === IMPORT_MODES.NEW_PROJECT && (
                         <>
                             <Grid item xs={2}>
                                 <TextField
                                     type="number"
-                                    className={classes.input}
                                     value={tileSize.w}
                                     onChange={event => {
                                         const w = parseInt(event.target.value)
@@ -168,7 +154,6 @@ const ImportDialog = (): JSX.Element => {
                             <Grid item xs={2}>
                                 <TextField
                                     type="number"
-                                    className={classes.input}
                                     value={tileSize.h}
                                     onChange={event => {
                                         const h = parseInt(event.target.value)
@@ -186,7 +171,6 @@ const ImportDialog = (): JSX.Element => {
                             <Grid item xs={4}>
                                 <TextField
                                     type="number"
-                                    className={classes.input}
                                     value={columns}
                                     onChange={event => {
                                         const c = parseInt(event.target.value)
@@ -211,7 +195,6 @@ const ImportDialog = (): JSX.Element => {
                             <Grid item xs={2}>
                                 <TextField
                                     type="number"
-                                    className={classes.input}
                                     value={offset.x}
                                     onChange={event =>
                                         setConfigProp('offset', { ...offset, x: parseInt(event.target.value) })
@@ -225,7 +208,6 @@ const ImportDialog = (): JSX.Element => {
                             <Grid item xs={2}>
                                 <TextField
                                     type="number"
-                                    className={classes.input}
                                     value={offset.y}
                                     onChange={event =>
                                         setConfigProp('offset', { ...offset, y: parseInt(event.target.value) })
@@ -242,10 +224,10 @@ const ImportDialog = (): JSX.Element => {
             </DialogContent>
             <DialogActions>
                 {resolution && (
-                    <ImageResolutionInfo variant="caption" display="block">
+                    <Typography variant="caption" display="block" sx={{ color: '#ccc', padding: '5px 20px' }}>
                         {Math.ceil(resolution.w / tileSize.w) * tileSize.w} x{' '}
                         {Math.ceil(resolution.h / tileSize.h) * tileSize.h} {t('i18_pixels')}
-                    </ImageResolutionInfo>
+                    </Typography>
                 )}
                 <div style={{ flex: '1 0 0' }} />
                 <Button onClick={onClose} color="primary">

src/components/ImportPreview.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import Konva from 'konva'
 import styled from '@emotion/styled'
-import Slider from '@material-ui/core/Slider'
+import Slider from '@mui/material/Slider'
 import { Stage, Layer, Rect } from 'react-konva'
 import {
     IMPORT_PREVIEW_WIDTH,
@@ -52,7 +52,7 @@ const ImportPreview = ({ image, config }: Props): JSX.Element => {
     }, [])
 
     const onScale = useCallback(
-        (newScale: any): void => {
+        (newScale: number): void => {
             if (stage) {
                 const x = IMPORT_PREVIEW_WIDTH / 2
                 const y = IMPORT_PREVIEW_HEIGHT / 2
@@ -111,11 +111,13 @@ const ImportPreview = ({ image, config }: Props): JSX.Element => {
                 </StyledStage>
             </StyledPreviewContainer>
             <Slider
+                sx={{ marginBottom: '10px' }}
+                size="small"
                 value={scale.x}
                 step={SCALE_STEP}
                 min={SCALE_MIN}
                 max={SCALE_MAX}
-                onChange={(event, value) => onScale(value)}
+                onChange={(_, value) => onScale(value as number)}
             />
         </>
     )