Clean up unused dependencies; set up eslint with Airbnb preset

.eslintignore

@@ -0,0 +1 @@
+.eslintrc.js

.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    extends: ['airbnb-typescript'],
+    parserOptions: {
+        project: './tsconfig.json',
+    },
+};

.gitignore

@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# Build output
+build

package.json

@@ -3,30 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/react-fontawesome": "^0.1.14",
     "@material-ui/core": "^4.11.3",
     "@techstark/opencv-js": "^4.5.2",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
-    "as-bind": "^0.6.1",
-    "buffer": "^6.0.3",
-    "is-svg": ">=4.2.2",
     "konva": "^7.2.5",
     "normalize.css": "^8.0.1",
     "react": "^17.0.1",
-    "react-app-rewired": "^2.1.8",
     "react-dom": "^17.0.1",
-    "react-images-upload": "^1.2.8",
     "react-konva": "^17.0.0-rc.1",
     "react-material-workspace-layout": "^1.0.9",
-    "react-remove-scroll": "^2.4.1",
-    "react-scripts": "4.0.1",
-    "react-use": "^17.2.1",
-    "reactstrap": "^8.9.0",
-    "transformation-matrix-js": "^2.7.6",
+    "react-scripts": "^4.0.3",
     "typescript": "^4.0.3",
     "use-event-callback": "^0.1.0",
     "use-image": "^1.0.7"
@@ -36,11 +24,6 @@
     "build": "react-scripts build",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -54,6 +37,12 @@
     ]
   },
   "devDependencies": {
+    "eslint": "^7.24.0",
+    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "wasm-loader": "^1.3.0"
   }
 }

src/App.tsx

@@ -23,12 +23,20 @@ const App = () => {
   const [{ ...imageScaleState }, { ...imageScaleApi }] = useImageScale();
 
   const toolbarProps = {
-    ...painterState, ...selectedClassState, ...imageScaleState,
-    ...painterApi, ...selectedClassApi, ...imageScaleApi
+    ...painterState,
+    ...selectedClassState,
+    ...imageScaleState,
+    ...painterApi,
+    ...selectedClassApi,
+    ...imageScaleApi,
   };
   const imageCanvasProps = {
-    ...painterState, ...imageScaleState, ...selectedClassState,
-    ...painterApi, ...imageScaleApi, canvasSize
+    ...painterState,
+    ...imageScaleState,
+    ...selectedClassState,
+    ...painterApi,
+    ...imageScaleApi,
+    canvasSize,
   };
 
   return (

src/common/colors.tsx

@@ -1,31 +1,30 @@
-
 import * as muiColors from '@material-ui/core/colors';
 
 export const colors = [
-    muiColors.red[500],
-    muiColors.blue[500],
-    muiColors.green[500],
-    muiColors.orange[800],
-    muiColors.brown[500],
-    muiColors.lightGreen[700],
-    muiColors.pink[500],
-    muiColors.purple[500],
-    muiColors.indigo[500],
-    muiColors.teal[500],
-    muiColors.lime[500],
-    muiColors.blueGrey[500],
-]
+  muiColors.red[500],
+  muiColors.blue[500],
+  muiColors.green[500],
+  muiColors.orange[800],
+  muiColors.brown[500],
+  muiColors.lightGreen[700],
+  muiColors.pink[500],
+  muiColors.purple[500],
+  muiColors.indigo[500],
+  muiColors.teal[500],
+  muiColors.lime[500],
+  muiColors.blueGrey[500],
+];
 
-const transparency = 0x88000000
+const transparency = 0x88000000;
 
 function reverseParseColor(rrggbb) {
-    rrggbb = rrggbb.replace("#", "")
-    const bbggrr = rrggbb.substr(4, 2) + rrggbb.substr(2, 2) + rrggbb.substr(0, 2)
-    return parseInt(bbggrr, 16)
+  rrggbb = rrggbb.replace('#', '');
+  const bbggrr = rrggbb.substr(4, 2) + rrggbb.substr(2, 2) + rrggbb.substr(0, 2);
+  return parseInt(bbggrr, 16);
 }
 
 export const colorInts: Array<number> = colors.map(
-    (c) => (reverseParseColor(c) | transparency) >>> 0
-)
+  (c) => (reverseParseColor(c) | transparency) >>> 0,
+);
 
-export default colors
+export default colors;

src/common/config.tsx

@@ -1,9 +1,9 @@
 const ALL_CLASSES = [
-    "foreground",
-    "background",
-    "tree",
-    "road",
-    "traffic-light"
+  'foreground',
+  'background',
+  'tree',
+  'road',
+  'traffic-light',
 ];
 
-export default ALL_CLASSES
+export default ALL_CLASSES;

src/components/BrushPreview.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 interface Props {
   currentColor: string;
@@ -16,7 +16,7 @@ export const BrushPreview: React.FC<Props> = ({
   };
   return (
     <div className="preview">
-      <div style={styles} className="preview__brush"></div>
+      <div style={styles} className="preview__brush" />
     </div>
   );
 };

src/components/ClassSelectionMenu.tsx

@@ -1,4 +1,3 @@
-
 import classnames from 'classnames';
 import capitalize from 'lodash/capitalize';
 import React, { useEffect } from 'react';
@@ -11,89 +10,89 @@ import { styled } from '@material-ui/core/styles';
 import colors from '../common/colors';
 import SidebarBoxContainer from './SideBarBoxContainer';
 
-const LabelContainer = styled("div")({
-    display: "flex",
-    paddingTop: 4,
-    paddingBottom: 4,
-    paddingLeft: 16,
-    paddingRight: 16,
-    alignItems: "center",
-    cursor: "pointer",
-    opacity: 0.7,
-    backgroundColor: "#fff",
-    "&:hover": {
-        opacity: 1,
-    },
-    "&.selected": {
-        opacity: 1,
-        fontWeight: "bold",
-    },
-})
-const Circle = styled("div")({
-    width: 12,
-    height: 12,
-    borderRadius: 12,
-    marginRight: 8,
-})
-const Label = styled("div")({
-    fontSize: 11,
-})
-const DashSep = styled("div")({
-    flexGrow: 1,
-    borderBottom: `2px dotted ${muiColors.grey[300]}`,
-    marginLeft: 8,
-    marginRight: 8,
-})
-const Number = styled("div")({
-    fontSize: 11,
-    textAlign: "center",
-    minWidth: 14,
-    paddingTop: 2,
-    paddingBottom: 2,
-    fontWeight: "bold",
-    color: muiColors.grey[700],
-})
+const LabelContainer = styled('div')({
+  display: 'flex',
+  paddingTop: 4,
+  paddingBottom: 4,
+  paddingLeft: 16,
+  paddingRight: 16,
+  alignItems: 'center',
+  cursor: 'pointer',
+  opacity: 0.7,
+  backgroundColor: '#fff',
+  '&:hover': {
+    opacity: 1,
+  },
+  '&.selected': {
+    opacity: 1,
+    fontWeight: 'bold',
+  },
+});
+const Circle = styled('div')({
+  width: 12,
+  height: 12,
+  borderRadius: 12,
+  marginRight: 8,
+});
+const Label = styled('div')({
+  fontSize: 11,
+});
+const DashSep = styled('div')({
+  flexGrow: 1,
+  borderBottom: `2px dotted ${muiColors.grey[300]}`,
+  marginLeft: 8,
+  marginRight: 8,
+});
+const Number = styled('div')({
+  fontSize: 11,
+  textAlign: 'center',
+  minWidth: 14,
+  paddingTop: 2,
+  paddingBottom: 2,
+  fontWeight: 'bold',
+  color: muiColors.grey[700],
+});
 
 export const ClassSelectionMenu = ({
-    selectedCls,
-    regionClsList,
-    onSelectCls,
+  selectedCls,
+  regionClsList,
+  onSelectCls,
 }) => {
-    useEffect(() => {
-        const keyMapping = {}
-        for (let i = 0; i < 9 && i < regionClsList.length; i++) {
-            keyMapping[i + 1] = () => onSelectCls(regionClsList[i])
-        }
-        const onKeyDown = (e) => {
-            if (keyMapping[e.key]) {
-                keyMapping[e.key]()
-                e.preventDefault()
-                e.stopPropagation()
-            }
-        }
-        window.addEventListener("keydown", onKeyDown)
-        return () => window.removeEventListener("keydown", onKeyDown)
-    }, [regionClsList, selectedCls, onSelectCls])
+  useEffect(() => {
+    const keyMapping = {};
+    for (let i = 0; i < 9 && i < regionClsList.length; i++) {
+      keyMapping[i + 1] = () => onSelectCls(regionClsList[i]);
+    }
+    const onKeyDown = (e) => {
+      if (keyMapping[e.key]) {
+        keyMapping[e.key]();
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [regionClsList, selectedCls, onSelectCls]);
 
-    return (
-        <div>
-            {regionClsList.map((label, index) => (
-                <LabelContainer
-                    className={classnames({ selected: label === selectedCls })}
-                    onClick={() => onSelectCls(label)}
-                >
-                    <Circle style={{ backgroundColor: colors[index % colors.length] }} />
-                    <Label className={classnames({ selected: label === selectedCls })}>
-                        {capitalize(label)}
-                    </Label>
-                    <DashSep />
-                    <Number className={classnames({ selected: label === selectedCls })}>
-                        {index < 9 ? `Key [${index + 1}]` : ""}
-                    </Number>
-                </LabelContainer>
-            ))}
-        </div>
-    )
-}
+  return (
+    <div>
+      {regionClsList.map((label, index) => (
+        <LabelContainer
+          className={classnames({ selected: label === selectedCls })}
+          onClick={() => onSelectCls(label)}
+        >
+          <Circle style={{ backgroundColor: colors[index % colors.length] }} />
+          <Label className={classnames({ selected: label === selectedCls })}>
+            {capitalize(label)}
+          </Label>
+          <DashSep />
+          <Number className={classnames({ selected: label === selectedCls })}>
+            {index < 9 ? `Key [${index + 1}]` : ''}
+          </Number>
+        </LabelContainer>
+      ))}
+    </div>
+  );
+};
 
-export default ClassSelectionMenu
+export default ClassSelectionMenu;