Rewrite project in Typescript

package.json

@@ -26,6 +26,8 @@
     "url": "https://github.com/saharmor/react-super-cmd/issues"
   },
   "scripts": {
+    "build-ts": "tsc",
+    "watch-ts": "tsc -w",
     "build": "microbundle-crl --no-compress --format modern,cjs",
     "start": "microbundle-crl watch --no-compress --format modern,cjs",
     "prepare": "run-s build",
@@ -38,13 +40,14 @@
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
     "@material-ui/core": "^4.11.2",
-    "@material-ui/icons": "^4.11.2"
+    "@material-ui/icons": "^4.11.2",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0"
   },
   "devDependencies": {
-    "microbundle-crl": "^0.13.10",
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
     "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
     "eslint": "^6.8.0",
@@ -58,13 +61,12 @@
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-standard": "^4.0.1",
     "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
-    "react-scripts": "^3.4.1",
-    "@material-ui/core": "^4.11.2",
-    "@material-ui/icons": "^4.11.2"
+    "react-scripts": "^3.4.1"
   },
   "files": [
     "dist"
@@ -73,5 +75,7 @@
   "directories": {
     "example": "example"
   },
-  "dependencies": {}
+  "dependencies": {
+    "typescript": "^5.2.2"
+  }
 }

src/AutocompleteCommandField/index.tsx

@@ -0,0 +1,27 @@
+import withStyles from '@material-ui/core/styles/withStyles'
+import TextField from '@material-ui/core/TextField'
+import { useStyles } from './styles'
+import { Props } from './types'
+
+const AutoCompleteCommandField = ({
+  classes,
+  fieldValue,
+  onChange,
+  onKeyPress,
+}: Props) => (
+  <div className={classes.root}>
+    <TextField
+      className={classes.inputField}
+      fullWidth
+      onChange={onChange}
+      onKeyDown={onKeyPress}
+      value={fieldValue}
+      InputProps={{
+        className: classes.input,
+        disableUnderline: true,
+      }}
+    />
+  </div>
+)
+
+export default withStyles(useStyles)(AutoCompleteCommandField)

src/AutocompleteCommandField/styles.ts

@@ -0,0 +1,23 @@
+import { Theme, createStyles } from '@material-ui/core'
+
+export const useStyles = (theme: Theme) => createStyles({
+  root: {
+    backgroundColor: '#212121',
+    display: 'flex',
+    width: '100%',
+    margin: '1.5rem 0',
+  },
+  inputField: {
+    flex: '1',
+    border: 'none',
+    boxShadow: 'inset 0.1875rem 0 0 #dcb865',
+    backgroundColor: 'inherit',
+    color: '#b7babe',
+  },
+  input: {
+    color: '#f1f2f2',
+    paddingLeft: '1.875rem',
+    fontSize: '1.3125rem',
+    lineHeight: '1.75rem',
+  }
+})

src/AutocompleteCommandField/types.ts

@@ -0,0 +1,10 @@
+import { ChangeEvent, KeyboardEvent } from 'react'
+
+export type Props = {
+  classes: {
+    [key: string]: string
+  }
+  fieldValue: string
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void
+  onKeyPress: (e: KeyboardEvent<HTMLDivElement>) => void
+}

src/CommandRow/Shortcut.tsx

@@ -0,0 +1,21 @@
+import { Grid, Typography, withStyles } from '@material-ui/core'
+import { useStyles } from './styles'
+
+const Shortcut = ({ className, shortcut }: {
+  className: string
+  shortcut: string
+}) => (
+  <Grid container>
+    {shortcut.split(' ').map((keyboardKey: string) => (
+      <Grid item>
+        <Typography
+          className={className}
+          variant="body2"
+          align="center"
+        >{keyboardKey}</Typography>
+      </Grid>
+    ))}
+  </Grid>
+)
+
+export default withStyles(useStyles)(Shortcut)

src/CommandRow/index.tsx

@@ -0,0 +1,60 @@
+import {
+  ButtonBase,
+  Typography,
+  withStyles,
+} from '@material-ui/core'
+import Grid from '@material-ui/core/Grid'
+import { useStyles } from './styles'
+import Shortcut from './Shortcut'
+import { Props } from './types'
+
+const CommandRow = ({
+  classes,
+  command,
+  commandName,
+  isHighlighted,
+  onClick,
+  onHover,
+  onKeyPress,
+}: Props) => {
+  const rootStyle = isHighlighted ? classes.rootHighlighted : classes.root
+  const shortcutToKeys = (shortcut: string) => (
+    <Shortcut
+      className={classes.shortcut}
+      shortcut={shortcut}
+    />
+  )
+
+  return (
+    <ButtonBase
+      ref={command.ref}
+      className={rootStyle}
+      onClick={onClick}
+      onMouseEnter={() => onHover(commandName)}
+      onKeyPress={onKeyPress}
+    >
+      <Grid
+        item
+        container
+        className={classes.button}
+        justify="space-between"
+      >
+        <Grid item xs={10} md={8}>
+          <Grid container>
+            <Grid item className={classes.cmdIcon} xs={1}>{command.logo}</Grid>
+            <Grid>
+              <Typography variant="body1">{command.name}</Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item>
+          {command.shortcut && shortcutToKeys(command.shortcut)}
+        </Grid>
+      </Grid>
+    </ButtonBase>
+  )
+}
+
+export * from './types'
+
+export default withStyles(useStyles)(CommandRow)

src/CommandRow/styles.ts

@@ -0,0 +1,35 @@
+import { Theme, createStyles } from '@material-ui/core'
+
+export const useStyles = (theme: Theme) => createStyles({
+  root: {
+    textAlign: 'left',
+    color: '#b7babe',
+    minHeight: '60px',
+    padding: '20px 36px',
+    width: '100%',
+  },
+  rootHighlighted: {
+    minHeight: '60px',
+    padding: '20px 36px',
+    width: '100%',
+    textAlign: 'left',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    color: '#ffffffe6',
+  },
+  button: {
+    flexGrow: 1,
+  },
+  cmdIcon: {
+    width: '20px',
+    height: '20px',
+  },
+  shortcut: {
+    background: 'rgba(255, 255, 255, 0.15)',
+    borderRadius: '3px',
+    maxHeight: '18px',
+    minWidth: '19px',
+    marginLeft: '4px',
+    padding: "1px 5px 5px 5px",
+    marginTop: "3px",
+  }
+})

src/CommandRow/types.ts

@@ -0,0 +1,26 @@
+import {
+  KeyboardEvent,
+  MouseEvent,
+  MutableRefObject,
+  ReactNode,
+} from 'react'
+
+export interface Command {
+  name: string
+  logo: ReactNode
+  callback?: () => void
+  shortcut: string
+  ref?: MutableRefObject<HTMLButtonElement | null>
+}
+
+export type Props = {
+  classes: {
+    [key: string]: string
+  },
+  command: Command
+  commandName: string
+  isHighlighted: boolean
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void
+  onHover: (command: string) => void
+  onKeyPress: (e: KeyboardEvent<HTMLButtonElement>) => void
+}