Linting galore

.eslintrc.js

@@ -1,5 +1,17 @@
 module.exports = {
-    parser: "babel-eslint",
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: "module",
+      ecmaFeatures: {
+        jsx: true
+      }
+    },
+    settings: {
+      react: {
+        version: "detect"
+      }
+    },
     env: {
       browser: true,
       es6: true,
@@ -10,15 +22,13 @@ module.exports = {
       AFRAME: true,
       NAF: true
     },
-    plugins: ["prettier", "react"],
+    extends: [
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/recommended",
+      "prettier/@typescript-eslint",
+      "plugin:prettier/recommended"
+    ],
     rules: {
-      "prettier/prettier": "error",
-      "prefer-const": "error",
-      "no-use-before-define": "error",
-      "no-var": "error",
-      "no-throw-literal": "error",
-      // Light console usage is useful but remove debug logs before merging to master.
-      "no-console": "off"
-    },
-    extends: ["prettier", "plugin:react/recommended", "eslint:recommended"]
+
+    }
   };

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    semi: true, 
+    trailingComma: "all",
+    singleQuote: true,
+    printWidth: 120,
+    tabWidth: 4
+}

package.json

@@ -61,7 +61,8 @@
   },
   "scripts": {
     "prettier": "prettier --write src/**/*.js",
-    "lint:js": "eslint src/**/*.js",
+    "lint": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix",
     "start": "webpack-dev-server --mode=development",
     "build": "webpack --mode=production "
   },

src/components/avatar_part_radio_group.tsx

@@ -1,26 +1,26 @@
-import React, { Component,  } from "react";
-import * as PropTypes from "prop-types";
+import React, { Component } from 'react';
+import * as PropTypes from 'prop-types';
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBan } from "@fortawesome/free-solid-svg-icons/faBan";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBan } from '@fortawesome/free-solid-svg-icons/faBan';
 
-import AvatarPart from "../models/avatar_part";
-import Radio from "./radio";
+import AvatarPart from '../models/avatar_part';
+import Radio from './radio';
 
 interface AvatarPartRadioGroupProps {
     avatarPart: AvatarPart;
     iconPaths: string[];
 }
 
 export default class AvatarPartRadioGroup extends Component {
-    disabled: Boolean;
-    isRequired: Boolean;
+    disabled: boolean;
+    isRequired: boolean;
     props: AvatarPartRadioGroupProps;
 
     static propTypes = {
         avatarPart: PropTypes.instanceOf(AvatarPart),
-        iconPaths: PropTypes.arrayOf(PropTypes.string)
-    }
+        iconPaths: PropTypes.arrayOf(PropTypes.string),
+    };
 
     constructor(props: AvatarPartRadioGroupProps) {
         super(props);
@@ -31,44 +31,45 @@ export default class AvatarPartRadioGroup extends Component {
         this.togglePart = this.togglePart.bind(this);
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
         //random start
         const count = this.props.iconPaths.length;
         const rand = Math.floor(Math.random() * count);
-        
-        if (this.isRequired || Math.random() < (1 - (1/count))) {
+
+        if (this.isRequired || Math.random() < 1 - 1 / count) {
             this.togglePart(rand);
         } else {
             this.disablePart();
         }
     }
 
-    disablePart() {
+    disablePart(): void {
         this.props.avatarPart.disable();
         this.forceUpdate();
     }
 
-    togglePart(partIndex: number) {
+    togglePart(partIndex: number): void {
         this.props.avatarPart.toggleMesh(partIndex);
         this.forceUpdate();
     }
 
-    render() {    
-        const disableButton = this.isRequired 
-                ? null 
-                :   <Radio onClickCallback={this.disablePart} 
-                            selected={this.props.avatarPart.disabled}>
-                            <FontAwesomeIcon className="icon" icon={faBan}/>
-                    </Radio>;
+    render(): JSX.Element {
+        const disableButton = this.isRequired ? null : (
+            <Radio onClickCallback={this.disablePart} selected={this.props.avatarPart.disabled}>
+                <FontAwesomeIcon className="icon" icon={faBan} />
+            </Radio>
+        );
 
-        const parts = this.props.iconPaths.map((path, i) => 
-            <Radio key={i} 
-                onClickCallback={this.togglePart} 
+        const parts = this.props.iconPaths.map((path, i) => (
+            <Radio
+                key={i}
+                onClickCallback={this.togglePart}
                 value={i}
-                selected={!this.props.avatarPart.disabled && this.props.avatarPart.isSelected(i)}>
-                    <img className="icon" src={path}/>
+                selected={!this.props.avatarPart.disabled && this.props.avatarPart.isSelected(i)}
+            >
+                <img className="icon" src={path} />
             </Radio>
-        );
+        ));
 
         return (
             <div className="swatchContainer">
@@ -77,4 +78,4 @@ export default class AvatarPartRadioGroup extends Component {
             </div>
         );
     }
-}
+}

src/components/color.tsx

@@ -1,9 +1,9 @@
-import React, {Component,} from 'react';
-import * as PropTypes from "prop-types";
-import { CustomPicker } from 'react-color';
-import * as tinycolor from 'tinycolor2';
+import React, { Component } from 'react';
+import * as PropTypes from 'prop-types';
+import { CustomPicker, ColorResult } from 'react-color';
+import tinycolor from 'tinycolor2';
 
-import {Hue, Saturation} from 'react-color/lib/components/common';
+import { Hue, Saturation } from 'react-color/lib/components/common';
 
 interface MyColorPickerProps {
     color: string;
@@ -15,32 +15,33 @@ class MyColorPicker extends Component {
     state = {
         hsl: { h: 0, s: 0, l: 0 },
         hsv: { h: 0, s: 0, v: 0 },
-        hex: 'aaaaaa'
+        hex: 'aaaaaa',
     };
 
     static propTypes = {
         color: PropTypes.string,
-        onChange: PropTypes.func
-    }
+        onChange: PropTypes.func,
+    };
 
     constructor(props: MyColorPickerProps) {
         super(props);
 
         this.onChange = this.onChange.bind(this);
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
         const color = tinycolor(this.props.color);
         this.setState({
             hsv: color.toHsv(),
             hsl: color.toHsl(),
             hex: color.toHex(),
-        })
+        });
     }
 
-    // @ts-ignore
-    onChange(e) {
-        const color = tinycolor(e);
+    // e actually takes the form of hsl or hsv exclusively. do not believe the lies!!
+    onChange(c: ColorResult): void {
+        // @ts-ignore
+        const color = tinycolor(c);
         this.setState({
             hsv: color.toHsv(),
             hsl: color.toHsl(),
@@ -50,43 +51,45 @@ class MyColorPicker extends Component {
         this.props.onChange(color.toHex());
     }
 
-    render() {
+    render(): JSX.Element {
         const style = {
             width: '100%',
             position: 'relative',
             display: 'block',
-            height: '60px'
+            height: '60px',
         } as React.CSSProperties;
-        
+
         const saturationStyle = {
             height: '80%',
-            position: 'relative'
+            position: 'relative',
         } as React.CSSProperties;
 
         const hueStyle = {
             height: '20%',
-            position: 'relative'
+            position: 'relative',
         } as React.CSSProperties;
 
-        return(
-            <span style={style} >
+        return (
+            <span style={style}>
                 <div style={saturationStyle}>
-                    <Saturation 
+                    <Saturation
                         // @ts-ignore
-                        hsl={this.state.hsl} 
-                        hsv={this.state.hsv} 
-                        onChange={this.onChange}/>
+                        hsl={this.state.hsl}
+                        hsv={this.state.hsv}
+                        onChange={this.onChange}
+                    />
                 </div>
                 <div style={hueStyle}>
-                    <Hue 
+                    <Hue
                         // @ts-ignore
-                        hsl={this.state.hsl} 
-                        onChange={this.onChange}/>
+                        hsl={this.state.hsl}
+                        onChange={this.onChange}
+                    />
                 </div>
             </span>
-        )
+        );
     }
 }
 
 //@ts-ignore
-export default CustomPicker(MyColorPicker);
+export default CustomPicker(MyColorPicker);