mui v4 -> v5

joostory · joostory · commit 5d15d64692d0 · 2022-01-15T01:35:07.000+09:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,9 +61,12 @@
   },
   "dependencies": {
     "@electron/remote": "^2.0.1",
-    "@material-ui/core": "^4.11.2",
-    "@material-ui/icons": "^4.11.2",
-    "@reduxjs/toolkit": "^1.6.2",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.2.5",
+    "@mui/material": "^5.2.8",
+    "@mui/styles": "^5.2.3",
+    "@reduxjs/toolkit": "^1.7.1",
     "@tinymce/tinymce-react": "^3.9.0",
     "autobind-decorator": "^2.4.0",
     "axios": "^0.24.0",
diff --git a/src/renderer/components/Loading.js b/src/renderer/components/Loading.js
@@ -1,5 +1,6 @@
 import React from 'react'
-import { CircularProgress, Backdrop, makeStyles } from '@material-ui/core'
+import { CircularProgress, Backdrop } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
   root: {
diff --git a/src/renderer/components/Preference.js b/src/renderer/components/Preference.js
@@ -5,8 +5,9 @@ import { ipcRenderer } from 'electron'
 import {
   Dialog, Button, DialogTitle, DialogContent, DialogActions,
   RadioGroup, Radio, FormControl, InputLabel,
-  FormControlLabel, FormLabel, Select, MenuItem, makeStyles
-} from '@material-ui/core'
+  FormControlLabel, FormLabel, Select, MenuItem
+} from '@mui/material'
+import { makeStyles } from '@mui/styles'
 
 import * as EditorMode from '../constants/EditorMode'
 import * as AppTheme from '../constants/AppTheme'
diff --git a/src/renderer/components/blog/Blog.js b/src/renderer/components/blog/Blog.js
@@ -2,10 +2,10 @@ import React, { useState, useEffect } from 'react'
 import { ipcRenderer } from 'electron'
 import { useSelector } from 'react-redux'
 import {
-  Fab, Dialog, DialogTitle, DialogContent, Slide, Box,
-  makeStyles
-} from '@material-ui/core'
-import { Add } from '@material-ui/icons'
+  Fab, Dialog, DialogTitle, DialogContent, Slide, Box
+} from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { Add } from '@mui/icons-material'
 import Sidebar from './sidebar/Sidebar'
 import Content from './content/Content'
 import Editor from '../editor/Editor'
diff --git a/src/renderer/components/blog/content/Content.js b/src/renderer/components/blog/content/Content.js
@@ -2,7 +2,8 @@ import React, { } from 'react'
 import { useSelector } from 'react-redux'
 import TumblrContentViewer from './TumblrContentViewer'
 import TistoryContentViewer from './TistoryContentViewer'
-import { Box, Typography, makeStyles } from '@material-ui/core'
+import { Box, Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
   container: {
diff --git a/src/renderer/components/blog/content/TumblrContentViewer.js b/src/renderer/components/blog/content/TumblrContentViewer.js
@@ -3,7 +3,8 @@ import { useSelector } from 'react-redux'
 import { pageview } from '../../../modules/AnalyticsHelper'
 import TextContentViewer from './type/TextContentViewer'
 import PhotoContentViewer from './type/PhotoContentViewer'
-import { Typography, makeStyles } from '@material-ui/core'
+import { Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
   emtpyMessage: {
diff --git a/src/renderer/components/blog/content/type/PhotoContentViewer.js b/src/renderer/components/blog/content/type/PhotoContentViewer.js
@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useSelector } from 'react-redux'
 import dayjs from 'dayjs'
-import { Chip, IconButton, Box, Divider, Typography, makeStyles, Container, Card, CardMedia, CardContent } from '@material-ui/core'
-import { OpenInBrowser, Edit } from '@material-ui/icons'
+import { Chip, IconButton, Box, Divider, Typography, Container, Card, CardMedia, CardContent } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { OpenInBrowser, Edit } from '@mui/icons-material'
 import 'highlight.js/styles/atom-one-dark.css'
 import { pageview } from '../../../../modules/AnalyticsHelper'
 
diff --git a/src/renderer/components/blog/content/type/TextContentViewer.js b/src/renderer/components/blog/content/type/TextContentViewer.js
@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useSelector } from 'react-redux'
 import dayjs from 'dayjs'
-import { Chip, IconButton, Box, Divider, Typography, makeStyles, Container } from '@material-ui/core'
-import { OpenInBrowser, Edit } from '@material-ui/icons'
+import { Chip, IconButton, Box, Divider, Typography, Container } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { OpenInBrowser, Edit } from '@mui/icons-material'
 import highlightjs from 'highlight.js'
 import 'highlight.js/styles/atom-one-dark.css'
 import * as ContentHelper from '../../../../modules/ContentHelper'
diff --git a/src/renderer/components/blog/sidebar/Header.js b/src/renderer/components/blog/sidebar/Header.js
@@ -2,10 +2,10 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 import {
   Toolbar, Avatar, Typography, Button,
-  makeStyles,
   Badge, IconButton
-} from '@material-ui/core'
-import { Menu, MoreHoriz, ArrowDropDown } from '@material-ui/icons'
+} from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { Menu, MoreHoriz, ArrowDropDown } from '@mui/icons-material'
 import Providers from '../../../constants/Providers'
 
 const useStyle = makeStyles(theme => ({
diff --git a/src/renderer/components/blog/sidebar/PostList.js b/src/renderer/components/blog/sidebar/PostList.js
@@ -2,7 +2,8 @@ import React, { useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { ipcRenderer } from 'electron'
 
-import { CircularProgress, List, Typography, makeStyles, Box } from '@material-ui/core'
+import { CircularProgress, List, Typography, Box } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 
 import PostListItem from './PostListItem'
 import { selectPost, lockPostsLoad } from '../../../actions'
diff --git a/src/renderer/components/blog/sidebar/PostListItem.js b/src/renderer/components/blog/sidebar/PostListItem.js
@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react'
 import { useSelector } from 'react-redux'
 import dayjs from 'dayjs'
-import { ListItem, ListItemText, Typography, Box, makeStyles } from '@material-ui/core'
-import { DraftsOutlined, PhotoOutlined, CommentOutlined } from '@material-ui/icons'
+import { ListItem, ListItemText, Typography, Box } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { DraftsOutlined, PhotoOutlined, CommentOutlined } from '@mui/icons-material'
 import { isPublished } from '../../../constants/PostState'
 
 const useStyles = makeStyles(theme => ({
diff --git a/src/renderer/components/blog/sidebar/Sidebar.js b/src/renderer/components/blog/sidebar/Sidebar.js
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Drawer, makeStyles, AppBar, Box } from '@material-ui/core'
+import { Drawer, AppBar, Box } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import Header from './Header'
 import PostList from './PostList'
 
diff --git a/src/renderer/components/editor/ChipInput.js b/src/renderer/components/editor/ChipInput.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { Chip, TextField } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Chip, TextField } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import update from 'immutability-helper'
 
 const useListStyles = makeStyles((theme) => ({
diff --git a/src/renderer/components/editor/Editor.js b/src/renderer/components/editor/Editor.js
@@ -7,8 +7,9 @@ import { addPost, updatePost } from '../../actions'
 import * as ContentMode from '../../constants/ContentMode'
 
 import {
-  Box, Snackbar, makeStyles
-} from '@material-ui/core'
+  Box, Snackbar
+} from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import EditorContent from './EditorContent'
 import EditorToolbar from './EditorToolbar'
 import EditorInfoDialog from './EditorInfoDialog'
diff --git a/src/renderer/components/editor/EditorContent.js b/src/renderer/components/editor/EditorContent.js
@@ -8,7 +8,8 @@ import Dropzone from 'react-dropzone'
 import MarkdownEditor from './codemirror/MarkdownEditor'
 import TinymceEditor from './tinymce/TinymceEditor'
 import EditorSwitch from './EditorSwich'
-import { Container, InputBase, makeStyles } from '@material-ui/core'
+import { Container, InputBase } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
   container: {
diff --git a/src/renderer/components/editor/EditorInfoDialog.js b/src/renderer/components/editor/EditorInfoDialog.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
-import { Dialog, Button, DialogTitle, DialogContent, DialogActions, makeStyles, Select, MenuItem, FormControl, InputLabel } from '@material-ui/core'
+import { Dialog, Button, DialogTitle, DialogContent, DialogActions, Select, MenuItem, FormControl, InputLabel } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import ChipInput from './ChipInput'
 
 const useStyles = makeStyles(theme => ({
diff --git a/src/renderer/components/editor/EditorSwich.js b/src/renderer/components/editor/EditorSwich.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import * as EditorMode from '../../constants/EditorMode'
-import { Menu, MenuItem, Fab, makeStyles } from '@material-ui/core'
-import { SwapVert } from '@material-ui/icons'
+import { Menu, MenuItem, Fab } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { SwapVert } from '@mui/icons-material'
 
 const useStyles = makeStyles(theme => ({
   btn: {
diff --git a/src/renderer/components/editor/EditorToolbar.js b/src/renderer/components/editor/EditorToolbar.js
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Toolbar, Button, makeStyles } from '@material-ui/core'
+import { Toolbar, Button } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
   root: {
diff --git a/src/renderer/components/editor/codemirror/MarkdownEditor.js b/src/renderer/components/editor/codemirror/MarkdownEditor.js
@@ -4,8 +4,9 @@ import { ipcRenderer, clipboard } from 'electron'
 import CodeMirrorComponent from 'react-codemirror-component'
 import MarkdownHelper from './MarkdownHelper'
 
-import { Button, Box, makeStyles } from '@material-ui/core'
-import { FormatBold, FormatItalic, FormatUnderlined, Attachment } from '@material-ui/icons'
+import { Button, Box } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { FormatBold, FormatItalic, FormatUnderlined, Attachment } from '@mui/icons-material'
 
 import CodeMirrorHelper from './CodeMirrorHelper'
 import GooglePhotosDialog from '../plugins/google-photos/GooglePhotosDialog'
diff --git a/src/renderer/components/editor/plugins/google-photos/GooglePhotos.js b/src/renderer/components/editor/plugins/google-photos/GooglePhotos.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { ipcRenderer } from 'electron'
 import update from 'immutability-helper'
-import { Button } from '@material-ui/core'
+import { Button } from '@mui/material'
 import Loading from '../../../Loading'
 import PhotoList from './PhotoList'
 
diff --git a/src/renderer/components/editor/plugins/google-photos/GooglePhotosDialog.js b/src/renderer/components/editor/plugins/google-photos/GooglePhotosDialog.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import autobind from 'autobind-decorator'
 import { ipcRenderer } from 'electron'
 
-import { Dialog, Button, DialogTitle, DialogContent, DialogActions } from '@material-ui/core'
+import { Dialog, Button, DialogTitle, DialogContent, DialogActions } from '@mui/material'
 import GooglePhotos from './GooglePhotos'
 
 class GooglePhotosDialog extends Component {
diff --git a/src/renderer/components/editor/plugins/google-photos/PhotoList.js b/src/renderer/components/editor/plugins/google-photos/PhotoList.js
@@ -7,9 +7,9 @@ import {
   GridListTileBar,
   ListSubheader,
   IconButton
-} from '@material-ui/core'
+} from '@mui/material'
 
-import { AddCircleOutline } from '@material-ui/icons'
+import { AddCircleOutline } from '@mui/icons-material'
 
 import Loading from '../../../../components/Loading'
 import { timestampsToDate } from '../../../../modules/ContentHelper'
diff --git a/src/renderer/components/index/AuthButton.js b/src/renderer/components/index/AuthButton.js
@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import { ipcRenderer } from 'electron'
 import {
-  Button, Dialog, DialogTitle, makeStyles, Box,
+  Button, Dialog, DialogTitle, Box,
   List, ListItem, ListItemAvatar, ListItemText, Avatar, CircularProgress
-} from '@material-ui/core'
-import { Add } from '@material-ui/icons'
+} from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { Add } from '@mui/icons-material'
 import Providers from '../../constants/Providers'
 
 const useStyle = makeStyles(theme => ({
diff --git a/src/renderer/components/index/BlogList.js b/src/renderer/components/index/BlogList.js
@@ -3,8 +3,9 @@ import { useDispatch, useSelector } from 'react-redux'
 import { ipcRenderer } from 'electron'
 import {
   List, ListSubheader, Button, Avatar,
-  Typography, Paper, makeStyles
-} from '@material-ui/core'
+  Typography, Paper
+} from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import BlogListItem from './BlogListItem'
 import { selectBlog } from '../../actions'
 import Providers from '../../constants/Providers'
diff --git a/src/renderer/components/index/BlogListItem.js b/src/renderer/components/index/BlogListItem.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { Avatar, ListItem, ListItemText, ListItemAvatar, Typography } from '@material-ui/core';
-import { Stars } from '@material-ui/icons'
+import { Avatar, ListItem, ListItemText, ListItemAvatar, Typography } from '@mui/material';
+import { Stars } from '@mui/icons-material'
 
 function ProfileAvatar({blog}) {
   if (blog.image) {
diff --git a/src/renderer/components/index/Index.js b/src/renderer/components/index/Index.js
@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react'
 import { pageview } from '../../modules/AnalyticsHelper'
 import {
-  Container, Typography, makeStyles,
-} from '@material-ui/core'
+  Container, Typography
+} from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import BlogList from './BlogList'
 import AuthButton from './AuthButton'
 
diff --git a/src/renderer/containers/App.js b/src/renderer/containers/App.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { ipcRenderer } from 'electron'
-import { Snackbar, CssBaseline } from '@material-ui/core'
+import { Snackbar, CssBaseline } from '@mui/material'
 
 import Main from './Main'
 import Preference from '../components/Preference'
diff --git a/src/renderer/containers/ThemeApp.js b/src/renderer/containers/ThemeApp.js
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react'
 import { nativeTheme } from '@electron/remote'
 import { useSelector } from 'react-redux'
-import { ThemeProvider, createTheme } from '@material-ui/core'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
 import * as AppTheme from '../constants/AppTheme'
 import App from './App'
 
@@ -20,7 +20,7 @@ const EDITOR_PALETTE = {
 }
 
 const DARK_PALETTE = {
-  type: 'dark',
+  mode: 'dark',
   primary: {
     main: '#f9dc41'
   },
@@ -32,7 +32,7 @@ const DARK_PALETTE = {
   editor: EDITOR_PALETTE,
 }
 const LIGHT_PALETTE = {
-  type: 'light',
+  mode: 'light',
   primary: {
     main: '#212121'
   },
diff --git a/src/renderer/model/Visibility.js b/src/renderer/model/Visibility.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Drafts } from '@material-ui/icons'
+import { Drafts } from '@mui/icons-material'
 
 class Visibility {
 
