feat: migration to Electron v19 and MUI in Starter Kit

electron-starter/README.md

@@ -64,7 +64,7 @@ It is also will be skipped by running the `release:mac` or `release:pack-mac` in
 How to build a package for Windows in macOS. Introduction you will install the [WineHQ](https://www.winehq.org/). It is recommended that you use the [Homebrew](http://brew.sh/).
 
 ```bash
-brew install wine
+brew install --cask wine-stable
 ```
 
 Then run the following command. If it is correct environment you should succeed to build the package for Windows.

electron-starter/package.json

@@ -25,6 +25,7 @@
     "app": "electron --inspect=5858 src/",
     "test": "jest",
     "tsc": "tsc --rootDir ./src/ --noEmit --skipLibCheck",
+    "ncu": "ncu -u",
     "build:js-main": "webpack --env main --mode development",
     "build:js-preload": "webpack --env preload --mode development",
     "build:js-renderer": "webpack --mode development",
@@ -50,33 +51,34 @@
     "release": "npm-run-all -s release:build release:pack-*"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.8.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-redux": "^8.0.1",
-    "styled-components": "^5.3.5"
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.8.7",
+    "@reduxjs/toolkit": "^1.8.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.2"
   },
   "devDependencies": {
-    "@types/jest": "^27.4.1",
-    "@types/react": "^18.0.6",
-    "@types/react-dom": "^18.0.2",
-    "@types/styled-components": "^5.1.25",
+    "@types/jest": "^28.1.4",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.6",
     "@types/webpack": "^5.28.0",
     "cpx": "^1.5.0",
     "cross-conf-env": "^1.2.1",
-    "devtron": "^1.4.0",
-    "electron": "^18.1.0",
+    "electron": "^19.0.7",
     "electron-packager": "^15.5.1",
     "ifdef-loader": "^2.3.2",
-    "jest": "^27.5.1",
+    "jest": "^28.1.2",
+    "npm-check-updates": "^15.0.3",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "ts-jest": "^27.1.4",
-    "ts-loader": "^9.2.8",
-    "ts-node": "^10.7.0",
-    "typescript": "^4.6.3",
-    "typescript-styled-plugin": "^0.18.2",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2"
+    "ts-jest": "^28.0.5",
+    "ts-loader": "^9.3.1",
+    "ts-node": "^10.8.2",
+    "typescript": "^4.7.4",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0"
   }
 }

electron-starter/src/renderer/AppRenderer.tsx

@@ -2,49 +2,19 @@ import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { configureStore } from '@reduxjs/toolkit'
-import { reducer as RootReducer } from './reducers'
-import { createGlobalStyle, ThemeProvider } from 'styled-components'
+import { ThemeProvider } from '@mui/material'
 import { Theme } from './Theme'
+import { reducer as RootReducer } from './reducers'
 import { Container as BasicFunction } from './containers/BasicFunction'
 import { Container as DialogForm } from './containers/DialogForm'
 
-const GlobalStyle = createGlobalStyle`
-  html,
-  body {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    color: ${Theme.colors.text};
-    font-family: system-ui, sans-serif;
-    background-color: ${Theme.colors.white};
-  }
-
-  .app {
-    width: 100%;
-    height: 100%;
-  }
-
-  @font-face {
-    font-family: 'icon';
-    src: url('fonts/icon.eot?wb6ufj');
-    src: url('fonts/icon.eot?wb6ufj#iefix') format('embedded-opentype'),
-      url('fonts/icon.ttf?wb6ufj') format('truetype'),
-      url('fonts/icon.woff?wb6ufj') format('woff'),
-      url('fonts/icon.svg?wb6ufj#icomoon') format('svg');
-    font-weight: normal;
-    font-style: normal;
-  }
-`
-
 window.addEventListener('load', () => {
   let store = configureStore({ reducer: RootReducer })
   const container = document.querySelector('.app')
   const root = createRoot(container!)
   root.render(
     <Provider store={store}>
       <ThemeProvider theme={Theme}>
-        <GlobalStyle />
         <BasicFunction />
         <DialogForm />
       </ThemeProvider>