Add ESLint

.tool-versions

@@ -0,0 +1,2 @@
+nodejs 14.19.1
+

package.json

@@ -7,9 +7,19 @@
     "chai": "^4.2.0",
     "gh-pages": "^2.0.1",
     "prettier": "^1.17.1",
-    "react-scripts": "^3.0.1"
+    "react-scripts": "^3.0.1",
+    "eslint": "^6.3.0",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-config-airbnb": "18.0.1",
+    "eslint-config-airbnb-typescript": "^12.3.1",
+    "@typescript-eslint/parser": "^4.28.1",
+    "eslint-plugin-import": "^2.22.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.1"
   },
   "dependencies": {
+    "typescript": "4.3.4",
     "big.js": "^5.2.2",
     "github-fork-ribbon-css": "^0.2.1",
     "react": "^16.8.6",

src/.eslintrc.json

@@ -0,0 +1,83 @@
+{
+  "extends": [
+    "airbnb-typescript",
+    "airbnb/hooks",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "jsx-a11y",
+    "react-hooks",
+    "react"
+  ],
+  "env": {
+    "browser": true,
+    "jest": true
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "no-undef": "off"
+      }
+    }
+  ],
+  "rules": {
+    "camelcase": "warn",
+    "import/no-unresolved": "warn",
+    "import/prefer-default-export": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/label-has-associated-control": ["error", {
+      "labelComponents": [],
+      "labelAttributes": [],
+      "controlComponents": [],
+      "assert": "htmlFor",
+      "depth": 25
+    }],
+    "jsx-a11y/no-static-element-interactions": "off",
+    "lines-between-class-members": "error",
+    "no-param-reassign": "error",
+    "no-restricted-globals": "warn",
+    "no-undef": "warn",
+    "no-unused-vars": "warn",
+    "prefer-destructuring": [
+      "error",
+      {
+        "object": true,
+        "array": true
+      }
+    ],
+    "react/forbid-prop-types": "off",
+    "react/jsx-curly-newline": "off",
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".jsx",
+          ".tsx"
+        ]
+      }
+    ],
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/no-unescaped-entities": "off",
+    "react/prefer-stateless-function": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/require-default-props": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": [
+          "app/assets/react",
+          "app/assets/images"
+        ]
+      }
+    }
+  }
+}

src/component/App.js

@@ -1,8 +1,8 @@
-import React from "react";
-import Display from "./Display";
-import ButtonPanel from "./ButtonPanel";
-import calculate from "../logic/calculate";
-import "./App.css";
+import React from 'react';
+import Display from './Display';
+import ButtonPanel from './ButtonPanel';
+import calculate from '../logic/calculate';
+import './App.css';
 
 export default class App extends React.Component {
   state = {
@@ -11,14 +11,14 @@ export default class App extends React.Component {
     operation: null,
   };
 
-  handleClick = buttonName => {
+  handleClick = (buttonName) => {
     this.setState(calculate(this.state, buttonName));
   };
 
   render() {
     return (
       <div className="component-app">
-        <Display value={this.state.next || this.state.total || "0"} />
+        <Display value={this.state.next || this.state.total || '0'} />
         <ButtonPanel clickHandler={this.handleClick} />
       </div>
     );

src/component/App.test.js

@@ -1,8 +1,8 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
-it("renders without crashing", () => {
-  const div = document.createElement("div");
+it('renders without crashing', () => {
+  const div = document.createElement('div');
   ReactDOM.render(<App />, div);
 });

src/component/Button.js

@@ -1,6 +1,6 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./Button.css";
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Button.css';
 
 export default class Button extends React.Component {
   static propTypes = {
@@ -16,13 +16,13 @@ export default class Button extends React.Component {
 
   render() {
     const className = [
-      "component-button",
-      this.props.orange ? "orange" : "",
-      this.props.wide ? "wide" : "",
+      'component-button',
+      this.props.orange ? 'orange' : '',
+      this.props.wide ? 'wide' : '',
     ];
 
     return (
-      <div className={className.join(" ").trim()}>
+      <div className={className.join(' ').trim()}>
         <button onClick={this.handleClick}>{this.props.name}</button>
       </div>
     );

src/component/ButtonPanel.js

@@ -1,15 +1,15 @@
-import Button from "./Button";
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from './Button';
 
-import "./ButtonPanel.css";
+import './ButtonPanel.css';
 
 export default class ButtonPanel extends React.Component {
   static propTypes = {
     clickHandler: PropTypes.func,
   };
 
-  handleClick = buttonName => {
+  handleClick = (buttonName) => {
     this.props.clickHandler(buttonName);
   };
 

src/component/Display.js

@@ -1,7 +1,7 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import "./Display.css";
+import './Display.css';
 
 export default class Display extends React.Component {
   static propTypes = {

src/index.js

@@ -1,7 +1,7 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./component/App";
-import "./index.css";
-import "github-fork-ribbon-css/gh-fork-ribbon.css";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './component/App';
+import './index.css';
+import 'github-fork-ribbon-css/gh-fork-ribbon.css';
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<App />, document.getElementById('root'));

src/logic/calculate.js

@@ -1,7 +1,7 @@
-import Big from "big.js";
+import Big from 'big.js';
 
-import operate from "./operate";
-import isNumber from "./isNumber";
+import operate from './operate';
+import isNumber from './isNumber';
 
 /**
  * Given a button name and a calculator data object, return an updated
@@ -13,7 +13,7 @@ import isNumber from "./isNumber";
  *   operation:String  +, -, etc.
  */
 export default function calculate(obj, buttonName) {
-  if (buttonName === "AC") {
+  if (buttonName === 'AC') {
     return {
       total: null,
       next: null,
@@ -22,7 +22,7 @@ export default function calculate(obj, buttonName) {
   }
 
   if (isNumber(buttonName)) {
-    if (buttonName === "0" && obj.next === "0") {
+    if (buttonName === '0' && obj.next === '0') {
       return {};
     }
     // If there is an operation, update next
@@ -34,7 +34,7 @@ export default function calculate(obj, buttonName) {
     }
     // If there is no operation, update next and clear the value
     if (obj.next) {
-      const next = obj.next === "0" ? buttonName : obj.next + buttonName;
+      const next = obj.next === '0' ? buttonName : obj.next + buttonName;
       return {
         next,
         total: null,
@@ -46,12 +46,12 @@ export default function calculate(obj, buttonName) {
     };
   }
 
-  if (buttonName === "%") {
+  if (buttonName === '%') {
     if (obj.operation && obj.next) {
       const result = operate(obj.total, obj.next, obj.operation);
       return {
         total: Big(result)
-          .div(Big("100"))
+          .div(Big('100'))
           .toString(),
         next: null,
         operation: null,
@@ -60,38 +60,37 @@ export default function calculate(obj, buttonName) {
     if (obj.next) {
       return {
         next: Big(obj.next)
-          .div(Big("100"))
+          .div(Big('100'))
           .toString(),
       };
     }
     return {};
   }
 
-  if (buttonName === ".") {
+  if (buttonName === '.') {
     if (obj.next) {
       // ignore a . if the next number already has one
-      if (obj.next.includes(".")) {
+      if (obj.next.includes('.')) {
         return {};
       }
-      return { next: obj.next + "." };
+      return { next: `${obj.next}.` };
     }
-    return { next: "0." };
+    return { next: '0.' };
   }
 
-  if (buttonName === "=") {
+  if (buttonName === '=') {
     if (obj.next && obj.operation) {
       return {
         total: operate(obj.total, obj.next, obj.operation),
         next: null,
         operation: null,
       };
-    } else {
-      // '=' with no operation, nothing to do
-      return {};
     }
+    // '=' with no operation, nothing to do
+    return {};
   }
 
-  if (buttonName === "+/-") {
+  if (buttonName === '+/-') {
     if (obj.next) {
       return { next: (-1 * parseFloat(obj.next)).toString() };
     }