diff --git a/electron-starter/README.md b/electron-starter/README.md
index 089d9a6..3097b46 100755
--- a/electron-starter/README.md
+++ b/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.
diff --git a/electron-starter/package.json b/electron-starter/package.json
index ba572c8..807e80e 100644
--- a/electron-starter/package.json
+++ b/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"
}
}
diff --git a/electron-starter/src/assets/fonts/icon.eot b/electron-starter/src/assets/fonts/icon.eot
deleted file mode 100755
index 9fe2945..0000000
Binary files a/electron-starter/src/assets/fonts/icon.eot and /dev/null differ
diff --git a/electron-starter/src/assets/fonts/icon.svg b/electron-starter/src/assets/fonts/icon.svg
deleted file mode 100755
index 6d02312..0000000
--- a/electron-starter/src/assets/fonts/icon.svg
+++ /dev/null
@@ -1,395 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/electron-starter/src/assets/fonts/icon.ttf b/electron-starter/src/assets/fonts/icon.ttf
deleted file mode 100755
index ad3d7e8..0000000
Binary files a/electron-starter/src/assets/fonts/icon.ttf and /dev/null differ
diff --git a/electron-starter/src/assets/fonts/icon.woff b/electron-starter/src/assets/fonts/icon.woff
deleted file mode 100755
index 642f69e..0000000
Binary files a/electron-starter/src/assets/fonts/icon.woff and /dev/null differ
diff --git a/electron-starter/src/renderer/AppRenderer.tsx b/electron-starter/src/renderer/AppRenderer.tsx
index 91f0799..a79b7b1 100755
--- a/electron-starter/src/renderer/AppRenderer.tsx
+++ b/electron-starter/src/renderer/AppRenderer.tsx
@@ -2,41 +2,12 @@ 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')
@@ -44,7 +15,6 @@ window.addEventListener('load', () => {
root.render(
-
diff --git a/electron-starter/src/renderer/Theme.ts b/electron-starter/src/renderer/Theme.ts
index 89845b0..1786a52 100644
--- a/electron-starter/src/renderer/Theme.ts
+++ b/electron-starter/src/renderer/Theme.ts
@@ -1,426 +1,14 @@
-import 'styled-components'
+import { createTheme } from '@mui/material'
-/** Theme for ThemeProvider (styled-components). */
-export const Theme = {
- colors: {
- white: '#fff',
- black: '#000',
- grayLightness: '#f8f8f8',
- grayLight: '#ecf0f1',
- gray: '#bdc3c7',
- grayDark: '#95a5a6',
- grayDarkness: '#7f8c8d',
- indigo: '#34495e',
- indigoDark: '#2c3e50',
- red: '#e74c3c',
- redDark: '#e74c3c',
- blueLight: '#9fd6fe',
- blue: '#3498db',
- blueDark: '#2980b9',
- green: '#2ecc71',
- greenDark: '#27ae60',
- viridian: '#1abc9c',
- viridianDark: '#16a085',
- yellow: '#f1c40f',
- yellowDark: '#f39c12',
- orange: '#e67e22',
- orangeDark: '#d35400',
- purple: '#9b59b6',
- purpleDark: '#8e44ad',
- text: '#2c3e50'
- },
- layout: {},
- icons: {
- add_to_list: '\\e900',
- classic_computer: '\\e901',
- controller_fast_backward: '\\e902',
- creative_commons_attribution: '\\e903',
- creative_commons_noderivs: '\\e904',
- creative_commons_noncommercial_eu: '\\e905',
- creative_commons_noncommercial_us: '\\e906',
- creative_commons_public_domain: '\\e907',
- creative_commons_remix: '\\e908',
- creative_commons_share: '\\e909',
- creative_commons_sharealike: '\\e90a',
- creative_commons: '\\e90b',
- document_landscape: '\\e90c',
- remove_user: '\\e90d',
- warning: '\\e90e',
- arrow_bold_down: '\\e90f',
- arrow_bold_left: '\\e910',
- arrow_bold_right: '\\e911',
- arrow_bold_up: '\\e912',
- arrow_down: '\\e913',
- arrow_left: '\\e914',
- arrow_long_down: '\\e915',
- arrow_long_left: '\\e916',
- arrow_long_right: '\\e917',
- arrow_long_up: '\\e918',
- arrow_right: '\\e919',
- arrow_up: '\\e91a',
- arrow_with_circle_down: '\\e91b',
- arrow_with_circle_left: '\\e91c',
- arrow_with_circle_right: '\\e91d',
- arrow_with_circle_up: '\\e91e',
- bookmark: '\\e91f',
- bookmarks: '\\e920',
- chevron_down: '\\e921',
- chevron_left: '\\e922',
- chevron_right: '\\e923',
- chevron_small_down: '\\e924',
- chevron_small_left: '\\e925',
- chevron_small_right: '\\e926',
- chevron_small_up: '\\e927',
- chevron_thin_down: '\\e928',
- chevron_thin_left: '\\e929',
- chevron_thin_right: '\\e92a',
- chevron_thin_up: '\\e92b',
- chevron_up: '\\e92c',
- chevron_with_circle_down: '\\e92d',
- chevron_with_circle_left: '\\e92e',
- chevron_with_circle_right: '\\e92f',
- chevron_with_circle_up: '\\e930',
- cloud: '\\e931',
- controller_fast_forward: '\\e932',
- controller_jump_to_start: '\\e933',
- controller_next: '\\e934',
- controller_paus: '\\e935',
- controller_play: '\\e936',
- controller_record: '\\e937',
- controller_stop: '\\e938',
- controller_volume: '\\e939',
- dot_single: '\\e93a',
- dots_three_horizontal: '\\e93b',
- dots_three_vertical: '\\e93c',
- dots_two_horizontal: '\\e93d',
- dots_two_vertical: '\\e93e',
- download: '\\e93f',
- emoji_flirt: '\\e940',
- flow_branch: '\\e941',
- flow_cascade: '\\e942',
- flow_line: '\\e943',
- flow_parallel: '\\e944',
- flow_tree: '\\e945',
- install: '\\e946',
- layers: '\\e947',
- open_book: '\\e948',
- resize_100: '\\e949',
- resize_full_screen: '\\e94a',
- save: '\\e94b',
- select_arrows: '\\e94c',
- sound_mute: '\\e94d',
- sound: '\\e94e',
- trash: '\\e94f',
- triangle_down: '\\e950',
- triangle_left: '\\e951',
- triangle_right: '\\e952',
- triangle_up: '\\e953',
- uninstall: '\\e954',
- upload_to_cloud: '\\e955',
- upload: '\\e956',
- add_user: '\\e957',
- address: '\\e958',
- adjust: '\\e959',
- air: '\\e95a',
- aircraft_landing: '\\e95b',
- aircraft_take_off: '\\e95c',
- aircraft: '\\e95d',
- align_bottom: '\\e95e',
- align_horizontal_middle: '\\e95f',
- align_left: '\\e960',
- align_right: '\\e961',
- align_top: '\\e962',
- align_vertical_middle: '\\e963',
- archive: '\\e964',
- area_graph: '\\e965',
- attachment: '\\e966',
- awareness_ribbon: '\\e967',
- back_in_time: '\\e968',
- back: '\\e969',
- bar_graph: '\\e96a',
- battery: '\\e96b',
- beamed_note: '\\e96c',
- bell: '\\e96d',
- blackboard: '\\e96e',
- block: '\\e96f',
- book: '\\e970',
- bowl: '\\e971',
- box: '\\e972',
- briefcase: '\\e973',
- browser: '\\e974',
- brush: '\\e975',
- bucket: '\\e976',
- cake: '\\e977',
- calculator: '\\e978',
- calendar: '\\e979',
- camera: '\\e97a',
- ccw: '\\e97b',
- chat: '\\e97c',
- check: '\\e97d',
- circle_with_cross: '\\e97e',
- circle_with_minus: '\\e97f',
- circle_with_plus: '\\e980',
- circle: '\\e981',
- circular_graph: '\\e982',
- clapperboard: '\\e983',
- clipboard: '\\e984',
- clock: '\\e985',
- code: '\\e986',
- cog: '\\e987',
- colours: '\\e988',
- compass: '\\e989',
- copy: '\\e98a',
- credit_card: '\\e98b',
- credit: '\\e98c',
- cross: '\\e98d',
- cup: '\\e98e',
- cw: '\\e98f',
- cycle: '\\e990',
- database: '\\e991',
- dial_pad: '\\e992',
- direction: '\\e993',
- document: '\\e994',
- documents: '\\e995',
- drink: '\\e996',
- drive: '\\e997',
- drop: '\\e998',
- edit: '\\e999',
- email: '\\e99a',
- emoji_happy: '\\e99b',
- emoji_neutral: '\\e99c',
- emoji_sad: '\\e99d',
- erase: '\\e99e',
- eraser: '\\e99f',
- export: '\\e9a0',
- eye: '\\e9a1',
- feather: '\\e9a2',
- flag: '\\e9a3',
- flash: '\\e9a4',
- flashlight: '\\e9a5',
- flat_brush: '\\e9a6',
- folder_images: '\\e9a7',
- folder_music: '\\e9a8',
- folder_video: '\\e9a9',
- folder: '\\e9aa',
- forward: '\\e9ab',
- funnel: '\\e9ac',
- game_controller: '\\e9ad',
- gauge: '\\e9ae',
- globe: '\\e9af',
- graduation_cap: '\\e9b0',
- grid: '\\e9b1',
- hair_cross: '\\e9b2',
- hand: '\\e9b3',
- heart_outlined: '\\e9b4',
- heart: '\\e9b5',
- help_with_circle: '\\e9b6',
- help: '\\e9b7',
- home: '\\e9b8',
- hour_glass: '\\e9b9',
- image_inverted: '\\e9ba',
- image: '\\e9bb',
- images: '\\e9bc',
- inbox: '\\e9bd',
- infinity: '\\e9be',
- info_with_circle: '\\e9bf',
- info: '\\e9c0',
- key: '\\e9c1',
- keyboard: '\\e9c2',
- lab_flask: '\\e9c3',
- landline: '\\e9c4',
- language: '\\e9c5',
- laptop: '\\e9c6',
- leaf: '\\e9c7',
- level_down: '\\e9c8',
- level_up: '\\e9c9',
- lifebuoy: '\\e9ca',
- light_bulb: '\\e9cb',
- light_down: '\\e9cc',
- light_up: '\\e9cd',
- line_graph: '\\e9ce',
- link: '\\e9cf',
- list: '\\e9d0',
- location_pin: '\\e9d1',
- location: '\\e9d2',
- lock_open: '\\e9d3',
- lock: '\\e9d4',
- log_out: '\\e9d5',
- login: '\\e9d6',
- loop: '\\e9d7',
- magnet: '\\e9d8',
- magnifying_glass: '\\e9d9',
- mail: '\\e9da',
- man: '\\e9db',
- map: '\\e9dc',
- mask: '\\e9dd',
- medal: '\\e9de',
- megaphone: '\\e9df',
- menu: '\\e9e0',
- message: '\\e9e1',
- mic: '\\e9e2',
- minus: '\\e9e3',
- mobile: '\\e9e4',
- modern_mic: '\\e9e5',
- moon: '\\e9e6',
- mouse: '\\e9e7',
- music: '\\e9e8',
- network: '\\e9e9',
- new_message: '\\e9ea',
- new: '\\e9eb',
- news: '\\e9ec',
- note: '\\e9ed',
- notification: '\\e9ee',
- old_mobile: '\\e9ef',
- old_phone: '\\e9f0',
- palette: '\\e9f1',
- paper_plane: '\\e9f2',
- pencil: '\\e9f3',
- phone: '\\e9f4',
- pie_chart: '\\e9f5',
- pin: '\\e9f6',
- plus: '\\e9f7',
- popup: '\\e9f8',
- power_plug: '\\e9f9',
- price_ribbon: '\\e9fa',
- price_tag: '\\e9fb',
- print: '\\e9fc',
- progress_empty: '\\e9fd',
- progress_full: '\\e9fe',
- progress_one: '\\e9ff',
- progress_two: '\\ea00',
- publish: '\\ea01',
- quote: '\\ea02',
- radio: '\\ea03',
- reply_all: '\\ea04',
- reply: '\\ea05',
- retweet: '\\ea06',
- rocket: '\\ea07',
- round_brush: '\\ea08',
- rss: '\\ea09',
- ruler: '\\ea0a',
- scissors: '\\ea0b',
- share_alternitive: '\\ea0c',
- share: '\\ea0d',
- shareable: '\\ea0e',
- shield: '\\ea0f',
- shop: '\\ea10',
- shopping_bag: '\\ea11',
- shopping_basket: '\\ea12',
- shopping_cart: '\\ea13',
- shuffle: '\\ea14',
- signal: '\\ea15',
- sound_mix: '\\ea16',
- sports_club: '\\ea17',
- spreadsheet: '\\ea18',
- squared_cross: '\\ea19',
- squared_minus: '\\ea1a',
- squared_plus: '\\ea1b',
- star_outlined: '\\ea1c',
- star: '\\ea1d',
- stopwatch: '\\ea1e',
- suitcase: '\\ea1f',
- swap: '\\ea20',
- sweden: '\\ea21',
- switch: '\\ea22',
- tablet: '\\ea23',
- tag: '\\ea24',
- text_document_inverted: '\\ea25',
- text_document: '\\ea26',
- text: '\\ea27',
- thermometer: '\\ea28',
- thumbs_down: '\\ea29',
- thumbs_up: '\\ea2a',
- thunder_cloud: '\\ea2b',
- ticket: '\\ea2c',
- time_slot: '\\ea2d',
- tools: '\\ea2e',
- traffic_cone: '\\ea2f',
- tree: '\\ea30',
- trophy: '\\ea31',
- tv: '\\ea32',
- typing: '\\ea33',
- unread: '\\ea34',
- untag: '\\ea35',
- user: '\\ea36',
- users: '\\ea37',
- v_card: '\\ea38',
- video: '\\ea39',
- vinyl: '\\ea3a',
- voicemail: '\\ea3b',
- wallet: '\\ea3c',
- water: '\\ea3d',
- px_with_circle: '\\ea3e',
- px: '\\ea3f',
- basecamp: '\\ea40',
- behance: '\\ea41',
- creative_cloud: '\\ea42',
- dropbox: '\\ea43',
- evernote: '\\ea44',
- flattr: '\\ea45',
- foursquare: '\\ea46',
- google_drive: '\\ea47',
- google_hangouts: '\\ea48',
- grooveshark: '\\ea49',
- icloud: '\\ea4a',
- mixi: '\\ea4b',
- onedrive: '\\ea4c',
- paypal: '\\ea4d',
- picasa: '\\ea4e',
- qq: '\\ea4f',
- rdio_with_circle: '\\ea50',
- renren: '\\ea51',
- scribd: '\\ea52',
- sina_weibo: '\\ea53',
- skype_with_circle: '\\ea54',
- skype: '\\ea55',
- slideshare: '\\ea56',
- smashing: '\\ea57',
- soundcloud: '\\ea58',
- spotify_with_circle: '\\ea59',
- spotify: '\\ea5a',
- swarm: '\\ea5b',
- vine_with_circle: '\\ea5c',
- vine: '\\ea5d',
- vk_alternitive: '\\ea5e',
- vk_with_circle: '\\ea5f',
- vk: '\\ea60',
- xing_with_circle: '\\ea61',
- xing: '\\ea62',
- yelp: '\\ea63',
- dribbble_with_circle: '\\ea64',
- dribbble: '\\ea65',
- facebook_with_circle: '\\ea66',
- facebook: '\\ea67',
- flickr_with_circle: '\\ea68',
- flickr: '\\ea69',
- github_with_circle: '\\ea6a',
- github: '\\ea6b',
- google_with_circle: '\\ea6c',
- google: '\\ea6d',
- instagram_with_circle: '\\ea6e',
- instagram: '\\ea6f',
- lastfm_with_circle: '\\ea70',
- lastfm: '\\ea71',
- linkedin_with_circle: '\\ea72',
- linkedin: '\\ea73',
- pinterest_with_circle: '\\ea74',
- pinterest: '\\ea75',
- rdio: '\\ea76',
- stumbleupon_with_circle: '\\ea77',
- stumbleupon: '\\ea78',
- tumblr_with_circle: '\\ea79',
- tumblr: '\\ea7a',
- twitter_with_circle: '\\ea7b',
- twitter: '\\ea7c',
- vimeo_with_circle: '\\ea7d',
- vimeo: '\\ea7e',
- youtube_with_circle: '\\ea7f',
- youtube: '\\ea80'
+/**
+ * Theme for ThemeProvider (mui).
+ */
+export const Theme = createTheme({
+ palette: {
+ primary: {
+ main: '#3498db',
+ light: '#9fd6fe',
+ dark: '#2980b9'
+ }
}
-} as const
-
-type AppTheme = typeof Theme
-
-declare module 'styled-components' {
- interface DefaultTheme extends AppTheme {}
-}
+})
diff --git a/electron-starter/src/renderer/components/BasicFunction.tsx b/electron-starter/src/renderer/components/BasicFunction.tsx
index 08c4bb4..67e9a6c 100755
--- a/electron-starter/src/renderer/components/BasicFunction.tsx
+++ b/electron-starter/src/renderer/components/BasicFunction.tsx
@@ -1,26 +1,32 @@
import React from 'react'
-import { Link } from '../components/Link'
-import { Button } from '../components/Button'
-import styled from 'styled-components'
-import { Theme } from '../Theme'
+import { Box, Typography, Link } from '@mui/material'
+import { GitHub } from '@mui/icons-material'
+import { Button } from './Button'
export type StateByProps = {
+ /**
+ * URL.
+ */
url: string
+ /**
+ * Date time.
+ */
dateTime: string
}
export type DispatchByProps = {
+ /**
+ * Updates the time display to the current time.ß
+ */
updateTime?: () => void
+ /**
+ * The URL is displayed in the system's standard Web browser.
+ */
showURL?: (url: string) => void
}
type Props = StateByProps & DispatchByProps
-const StyledBasicFunction = styled.div`
- padding-bottom: 1rem;
- text-align: center;
-`
-
/**
* Component of the basic functions.
*/
@@ -30,9 +36,36 @@ export const BasicFunction: React.FC = ({
updateTime = () => {},
showURL = () => {}
}) => (
-
-
- {dateTime}
-
-
+
+
+
+ {dateTime}
+
+
+
+ showURL(url)}>{url}
+
+
)
diff --git a/electron-starter/src/renderer/components/Button.tsx b/electron-starter/src/renderer/components/Button.tsx
old mode 100755
new mode 100644
index e566ff6..4e1b49a
--- a/electron-starter/src/renderer/components/Button.tsx
+++ b/electron-starter/src/renderer/components/Button.tsx
@@ -1,26 +1,8 @@
-import React from 'react'
-import styled from 'styled-components'
-
-type Props = {
- label: string
- onClick: () => void
-}
-
-const StyledButton = styled.span`
- user-select: none;
- cursor: pointer;
- display: inline-block;
- margin: 1em;
- padding: 0.3em 0.5em;
- border-radius: 0.2em;
- border: solid 1px ${(props) => props.theme.colors.blue};
- color: ${(props) => props.theme.colors.white};
- background-color: ${(props) => props.theme.colors.blue};
-`
+import { Button as MuiButton, styled } from '@mui/material'
/**
- * Component of a button control.
+ * This is an app-specific button that extends the MUI button.
*/
-export const Button: React.FC = ({ label, onClick }) => (
- {label}
-)
+export const Button = styled(MuiButton)({
+ textTransform: 'none'
+})
diff --git a/electron-starter/src/renderer/components/DialogForm.tsx b/electron-starter/src/renderer/components/DialogForm.tsx
index d5e7af7..7aef711 100755
--- a/electron-starter/src/renderer/components/DialogForm.tsx
+++ b/electron-starter/src/renderer/components/DialogForm.tsx
@@ -1,42 +1,63 @@
-import React from 'react'
-import styled from 'styled-components'
+import React, { FC } from 'react'
+import { Box, Typography } from '@mui/material'
import { Button } from './Button'
export type StateByProps = {}
export type DispatchByProps = {
+ /**
+ * Execute the Electron API `dialog.showOpenDialog`.
+ */
showOpenDialog?: () => void
+ /**
+ * Execute the Electron API `dialog.showSaveDialog`.
+ */
showSaveDialog?: () => void
+ /**
+ * Execute the Electron API `dialog.showMessageBox`.
+ */
showMessageBox?: () => void
}
-type Porps = StateByProps & DispatchByProps
-
-const StyledDialogForm = styled.div`
- padding: 1rem;
- text-align: center;
-
- fieldset {
- border: solid 1px ${(props) => props.theme.colors.grayDark};
- }
-`
+type Props = StateByProps & DispatchByProps
/**
* Component of a dialog api tester.
*/
-export const DialogForm: React.FC = ({
+export const DialogForm: FC = ({
showOpenDialog = () => {},
showSaveDialog = () => {},
showMessageBox = () => {}
}) => (
-
-
-
+
+
+
+ Dialog & MessageBox
+
+
+
+
+
+
+
+
)
diff --git a/electron-starter/src/renderer/components/Icon.tsx b/electron-starter/src/renderer/components/Icon.tsx
deleted file mode 100644
index f640d22..0000000
--- a/electron-starter/src/renderer/components/Icon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from 'styled-components'
-
-export const Icon = styled.i<{ icon: string }>`
- font-family: 'icon' !important;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
-
- // Better Font Rendering
- -webkit-font-smoothing: antialiased;
-
- &:before {
- content: '${(props) => props.icon}';
- }
-`
diff --git a/electron-starter/src/renderer/components/Link.tsx b/electron-starter/src/renderer/components/Link.tsx
deleted file mode 100755
index 4b26127..0000000
--- a/electron-starter/src/renderer/components/Link.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { Icon } from './Icon'
-
-type Props = {
- label: string
- url: string
- icon?: string
- onClick: (url: string) => void
-}
-
-const StyledLink = styled.div`
- a,
- a:link,
- a:visited {
- margin-left: 0.3rem;
- text-decoration: none;
- color: ${(props) => props.theme.colors.blue};
- }
-
- a:hover,
- a:active {
- color: ${(props) => props.theme.colors.red};
- }
-`
-
-/**
- * Component of a hyper link of web page.
- */
-export const Link: React.FC = ({ label, url, icon, onClick }) => (
-
- {icon ? : null}
- {
- onClick(url)
- }}
- >
- {label}
-
-
-)