feat: add mui@5 and nodejs@18 support

.eslintrc

@@ -12,7 +12,7 @@
   "extends": [
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier/@typescript-eslint",
+    "prettier",
     "plugin:prettier/recommended"
   ],
   "settings": {
@@ -35,7 +35,6 @@
     "@typescript-eslint/no-empty-interface": "off",
     "react/display-name": "off",
     "react/prop-types": "off",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "error"
+    "react-hooks/rules-of-hooks": "error"
   }
 }

.gitignore

@@ -2,6 +2,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn
 
 # testing
 /coverage

.npmignore

@@ -3,3 +3,4 @@
 /dist/**/stories
 !/src
 /src/**/stories
+.yarn

.storybook/preview.js → .storybook/preview.cjs

@@ -1,4 +1,3 @@
-
-export const parameters = {
+exports.parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
-}
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -19,8 +19,7 @@ Live **demo** and **usage** at
 Be sure that you have these dependencies on your project:
 
 - react (>=17.0.1)
-- @material-ui/core (>5.0.0-beta.1)
-- @material-ui/styles: (>5.0.0-beta.1)
+- @mui/material (>=5.0.0)
 
 More dependencies
 
@@ -63,6 +62,7 @@ export default function SchedulerDemo() {
 This library supports Internalization (i18n). Currently languages supported are:
 
 1. English
+2. Chinese (Simplified)
 
 We are welcoming translation contributions from the community.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-ui-cron",
-  "version": "0.1.0-beta.4",
+  "version": "0.2.0",
   "description": "A React cron editor using material ui",
   "author": "Parichay Barpanda <[email protected]> (https://github.com/baymac/)",
   "license": "MIT",
@@ -24,63 +24,46 @@
   "bugs": {
     "url": "https://github.com/baymac/material-ui-cron/issues"
   },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/cjs/index.d.ts",
+  "main": "dist/index.js",
+  "type": "module",
   "scripts": {
-    "build": "del dist && yarn build:babel && yarn build:types",
-    "build:babel": "concurrently \"yarn build:babel:esm\" \"yarn build:babel:cjs\"",
-    "build:babel:cjs": "BABEL_ENV=cjs babel --extensions \".ts,.tsx\" --copy-files src --out-dir dist/cjs --presets=@babel/env",
-    "build:babel:esm": "BABEL_ENV=esm babel --extensions \".ts,.tsx\" --copy-files src --out-dir dist/esm",
-    "build:types": "tsc",
-    "lint": "eslint 'src/**/*.ts?(x)'",
+    "build": "del-cli dist && tsc --skipLibCheck",
+    "lint": "eslint src --ext .ts,.tsx",
+    "fix": "eslint src --ext .ts,.tsx --fix",
     "prettier": "prettier --write \"src/**/*.{ts?(x),css}\"",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "deploy-storybook": "gh-pages -d storybook-static"
+    "deploy-storybook": "gh-pages -d storybook-static",
+    "prepare": "npm run build"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.6",
-    "@babel/plugin-proposal-export-default-from": "^7.14.5",
-    "@babel/plugin-transform-typescript": "^7.14.6",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "@storybook/addon-actions": "^6.3.4",
-    "@storybook/addon-essentials": "^6.3.4",
-    "@storybook/addon-links": "^6.3.4",
-    "@storybook/react": "^6.3.4",
-    "@types/node": "^16.3.3",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.28.3",
-    "@typescript-eslint/parser": "^4.28.3",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
-    "babel-plugin-typescript-to-proptypes": "^1.4.2",
-    "concurrently": "^6.2.0",
-    "del-cli": "^4.0.1",
-    "eslint": "^7.31.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "prettier": "^2.3.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "^4.0.3",
-    "typescript": "^4.3.5"
-  },
-  "peerDependencies": {
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.10.14",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "concurrently": "^7.5.0",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "typescript": "^4.9.3"
   },
   "dependencies": {
-    "@material-ui/core": "^5.0.0-beta.1",
-    "@material-ui/styles": "^5.0.0-beta.1",
-    "cronstrue": "^1.114.0",
-    "recoil": "^0.3.1"
+    "cronstrue": "^2.15.0",
+    "recoil": "^0.7.6"
   }
 }

src/Scheduler.tsx

@@ -1,5 +1,4 @@
-import Box from '@material-ui/core/Box'
-import { makeStyles } from '@material-ui/styles'
+import Box from '@mui/material/Box'
 import React from 'react'
 import {
   useRecoilState,
@@ -28,22 +27,26 @@ import {
   monthState,
   periodState,
   weekState,
+  variantState,
 } from './store'
 import { SchedulerProps } from './types'
 import { getPeriodIndex } from './utils'
 
-const useStyles = makeStyles({
-  box: {
-    minHeight: 'min-content',
-  },
-})
-
 export default function Scheduler(props: SchedulerProps) {
-  const { cron, setCron, setCronError, isAdmin, locale, customLocale } = props
-  const classes = useStyles()
+  const {
+    cron,
+    setCron,
+    setCronError,
+    isAdmin,
+    locale,
+    customLocale,
+    variant,
+  } = props
   const period = useRecoilValue(periodState)
   const [periodIndex, setPeriodIndex] = React.useState(0)
 
+  const setVariant = useSetRecoilState(variantState)
+
   const setCronExp = useSetRecoilState(cronExpState)
 
   const cronError = useRecoilValue(cronValidationErrorMessageState)
@@ -104,18 +107,24 @@ export default function Scheduler(props: SchedulerProps) {
     }
   }, [locale, customLocale])
 
+  React.useEffect(() => {
+    setVariant(variant)
+  }, [variant])
+
   return (
-    <>
-      <Box display='flex' flexDirection='column' className={classes.box}>
-        <Period />
-        {periodIndex > 3 && <Month />}
-        {periodIndex > 2 && <DayOfMonth />}
-        {periodIndex > 1 && <Week />}
-        {periodIndex > 0 && <Hour />}
-        <Minute />
-        <CronExp />
-        <CronReader />
-      </Box>
-    </>
+    <Box
+      display='flex'
+      flexDirection='column'
+      sx={{ minHeight: 'min-content' }}
+    >
+      <Period />
+      {periodIndex > 3 && <Month />}
+      {periodIndex > 2 && <DayOfMonth />}
+      {periodIndex > 1 && <Week />}
+      {periodIndex > 0 && <Hour />}
+      <Minute />
+      <CronExp />
+      <CronReader />
+    </Box>
   )
 }

src/components/CronExp.tsx

@@ -1,38 +1,16 @@
-import Box from '@material-ui/core/Box'
-import { makeStyles } from '@material-ui/styles'
-import TextField from '@material-ui/core/TextField'
+import Box from '@mui/material/Box'
+import TextField from '@mui/material/TextField'
 import React from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import useDebounce from '../hooks/useDebounce'
 import { cronExpState } from '../selector'
-import { cronExpInputState, isAdminState } from '../store'
-
-const useStyles = makeStyles({
-  cron: {
-    marginRight: '6px',
-    backgroundColor: '#382B5F',
-    color: 'white',
-    '& input:focus + fieldset': {
-      borderWidth: 0,
-      borderColor: '#382B5F',
-    },
-  },
-  input: {
-    minWidth: '100px',
-    maxWidth: '200px',
-    color: 'white',
-    wordSpacing: '5px',
-  },
-  label: {
-    color: 'white',
-  },
-})
+import { cronExpInputState, isAdminState, variantState } from '../store'
 
 export default function CronExp() {
-  const classes = useStyles()
-
   const isAdmin = useRecoilValue(isAdminState)
 
+  const variant = useRecoilValue(variantState)
+
   const [cronExp, setCronExp] = useRecoilState(cronExpState)
 
   const [cronExpInput, setCronExpInput] = useRecoilState(cronExpInputState)
@@ -52,21 +30,17 @@ export default function CronExp() {
   return (
     <Box display='flex' p={1} m={1}>
       <TextField
-        variant='outlined'
+        variant={variant}
         value={cronExpInput}
         onChange={(event) => {
           setCronExpInput(event.target.value)
         }}
-        label=''
-        className={classes.cron}
-        InputProps={{
-          classes: {
-            input: classes.input,
-          },
-        }}
-        InputLabelProps={{
-          classes: {
-            root: classes.label,
+        sx={{
+          mr: 1,
+          '& input': {
+            minWidth: 100,
+            maxWidth: 200,
+            wordSpacing: '5px',
           },
         }}
         disabled={!isAdmin}

src/components/CronReader.tsx

@@ -1,22 +1,12 @@
-import { makeStyles, createStyles } from '@material-ui/styles'
-import Box from '@material-ui/core/Box'
-import Typography from '@material-ui/core/Typography'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
 import cronstrue from 'cronstrue/i18n'
 import React from 'react'
 import { useRecoilValue } from 'recoil'
 import { cronExpState } from '../selector'
 import { cronValidationErrorMessageState, localeState } from '../store'
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    error: {
-      color: 'red',
-    },
-  })
-)
-
 export default function CronReader() {
-  const classes = useStyles()
   const cronExp = useRecoilValue(cronExpState)
   const resolvedLocale = useRecoilValue(localeState)
 
@@ -41,12 +31,12 @@ export default function CronReader() {
   return (
     <Box display='flex' p={1} m={1}>
       {cronValidationErrorMessage.length === 0 && (
-        <Typography variant='h6' style={{ color: '#382B5F' }}>
+        <Typography variant='h6' color='primary' className='MaterialCronHr'>
           {cronHr}
         </Typography>
       )}
       {cronValidationErrorMessage.length > 0 && (
-        <Typography className={classes.error}>
+        <Typography sx={{ color: 'red' }}>
           {cronValidationErrorMessage}
         </Typography>
       )}