[CORL-678] Transition to eslint (#2634)

* chore: setup eslint

* chore: tslint checks with types & check for import order

* chore: complete eslint transition

* fix: tests

* fix: linting after rebase, faster lint for lint-staged

* chore: remove line

* fix: lint rules

* feat: add a11y linter and fix errors

* fix: tests

src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx

@@ -1,8 +1,8 @@
-import { useCoralContext } from "coral-framework/lib/bootstrap";
-import { PropTypesOf } from "coral-ui/types";
 import React, { FunctionComponent, useMemo } from "react";
 
+import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { Typography } from "coral-ui/components";
+import { PropTypesOf } from "coral-ui/types";
 
 interface Props {
   date: string;

src/core/client/ui/components/BaseButton/BaseButton.tsx

@@ -73,7 +73,7 @@ const BaseButton: FunctionComponent<Props> = ({
   }
 
   if (anchor && type) {
-    // tslint:disable:next-line: no-console
+    // eslint-disable-next-line no-console
     console.warn(
       "BaseButton used as anchor does not support the `type` property"
     );

src/core/client/ui/components/Button/Button.spec.tsx

@@ -20,7 +20,7 @@ it("renders correctly", () => {
 
 it("forwards ref", () => {
   const props: PropTypesOf<typeof Button> = {
-    // tslint:disable-next-line:no-empty
+    // eslint-disable-next-line:no-empty
     forwardRef: () => {},
     classes: {} as any,
     children: "Push me",

src/core/client/ui/components/Button/ButtonIcon.spec.tsx

@@ -19,7 +19,7 @@ it("renders correctly", () => {
 
 it("forwards ref", () => {
   const props: PropTypesOf<typeof ButtonIcon> = {
-    // tslint:disable-next-line:no-empty
+    // eslint-disable-next-line:no-empty
     forwardRef: () => {},
     classes: {} as any,
     children: "Push me",

src/core/client/ui/components/CallOut/CallOut.tsx

@@ -1,6 +1,5 @@
 import cn from "classnames";
-import React from "react";
-import { FunctionComponent, ReactNode } from "react";
+import React, { FunctionComponent, ReactNode } from "react";
 
 import { withStyles } from "coral-ui/hocs";
 

src/core/client/ui/components/Card/Card.tsx

@@ -1,8 +1,7 @@
 import cn from "classnames";
-import { withStyles } from "coral-ui/hocs";
-import { withForwardRef } from "coral-ui/hocs";
-import React, { Ref } from "react";
-import { FunctionComponent, ReactNode } from "react";
+import React, { FunctionComponent, ReactNode, Ref } from "react";
+
+import { withForwardRef, withStyles } from "coral-ui/hocs";
 
 import styles from "./Card.css";
 

src/core/client/ui/components/Card/CloseButton.tsx

@@ -1,7 +1,7 @@
+import React, { FunctionComponent, Ref } from "react";
+
 import { withForwardRef, withStyles } from "coral-ui/hocs";
 import { Omit, PropTypesOf } from "coral-ui/types";
-import React, { Ref } from "react";
-import { FunctionComponent } from "react";
 
 import BaseButton from "../BaseButton";
 import Icon from "../Icon";

src/core/client/ui/components/CheckBox/CheckBox.tsx

@@ -62,7 +62,7 @@ class CheckBox extends Component<CheckBoxProps> {
     } = this.props;
 
     const rootClassName = cn(classes.root, className);
-    const finalID = this.props.id || this.state.randomID;
+    const finalID = id || this.state.randomID;
 
     return (
       <div className={rootClassName}>

src/core/client/ui/components/ClickOutside/ClickOutside.spec.tsx

@@ -4,7 +4,6 @@ import simulant from "simulant";
 import sinon from "sinon";
 
 import UIContext from "../UIContext";
-
 import {
   ClickFarAwayCallback,
   ClickFarAwayRegister,

src/core/client/ui/components/ClickOutside/ClickOutside.tsx

@@ -29,18 +29,20 @@ export class ClickOutside extends React.Component<ClickOutsideProps> {
   public handleClick = (e: MouseEvent) => {
     const { onClickOutside } = this.props;
     if (!e || !this.domNode!.contains(e.target as HTMLInputElement)) {
-      // tslint:disable-next-line:no-unused-expression
+      // eslint-disable-next-line no-unused-expressions
       onClickOutside && onClickOutside(e);
     }
   };
 
   public handleClickFarAway = () => {
     const { onClickOutside } = this.props;
-    // tslint:disable-next-line:no-unused-expression
+    // eslint-disable-next-line no-unused-expressions
     onClickOutside && onClickOutside();
   };
 
   public componentDidMount() {
+    // TODO: find another solution to `findDOMNode`.
+    // eslint-disable-next-line react/no-find-dom-node
     this.domNode = findDOMNode(this) as Element;
     document.addEventListener("click", this.handleClick, true);
 

src/core/client/ui/components/Dropdown/Button.tsx

@@ -4,10 +4,10 @@ import React, { FunctionComponent } from "react";
 import { Omit } from "coral-framework/types";
 import { withStyles } from "coral-ui/hocs";
 
+import { Flex } from "../";
 import BaseButton, { BaseButtonProps } from "../BaseButton";
 import Icon from "../Icon";
 
-import { Flex } from "..";
 import styles from "./Button.css";
 
 interface Props extends Omit<BaseButtonProps, "ref"> {

src/core/client/ui/components/Flex/Flex.tsx

@@ -1,17 +1,16 @@
 import cn from "classnames";
-import React, { Ref } from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent, Ref } from "react";
 
 import { pascalCase } from "coral-common/utils";
 import { withForwardRef, withStyles } from "coral-ui/hocs";
 import { Spacing } from "coral-ui/theme/variables";
 import { PropTypesOf } from "coral-ui/types";
 
-import styles from "./Flex.css";
-
 /** Needs to be loaded after styles, because Box styles have priority */
 import Box from "../Box";
 
+import styles from "./Flex.css";
+
 interface Props extends PropTypesOf<typeof Box> {
   /**
    * This prop can be used to add custom classnames.
@@ -83,7 +82,7 @@ const Flex: FunctionComponent<Props> = props => {
     classes.flex,
     classObject,
     (itemGutter || spacing) && "gutter",
-    spacing && (classes as any)[`spacing-${spacing!}`]
+    spacing && (classes as any)[`spacing-${spacing}`]
   );
 
   // text nodes can't be modified with css, so replace them with spans.

src/core/client/ui/components/FormField/FormField.spec.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import TestRenderer from "react-test-renderer";
 
-import FormField from "../FormField";
-
 import { InputDescription, InputLabel, TextField } from "../../components";
+import FormField from "../FormField";
 
 it("renders correctly", () => {
   const renderer = TestRenderer.create(

src/core/client/ui/components/FormField/FormField.tsx

@@ -1,6 +1,5 @@
 import cn from "classnames";
-import React, { ReactNode } from "react";
-import { FunctionComponent } from "react";
+import React, { FunctionComponent, ReactNode } from "react";
 
 import { withStyles } from "coral-ui/hocs";
 import { Omit, PropTypesOf } from "coral-ui/types";

src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx

@@ -5,11 +5,11 @@ import { withForwardRef, withStyles } from "coral-ui/hocs";
 import { Spacing } from "coral-ui/theme/variables";
 import { PropTypesOf } from "coral-ui/types";
 
-import styles from "./HorizontalGutter.css";
-
 /** Needs to be loaded after styles, because Box styles have priority */
 import Box from "../Box";
 
+import styles from "./HorizontalGutter.css";
+
 interface Props extends PropTypesOf<typeof Box> {
   /**
    * This prop can be used to add custom classnames.
@@ -50,7 +50,7 @@ const HorizontalGutter: FunctionComponent<Props> = props => {
   const rootClassName = cn(
     classes.root,
     className,
-    spacing ? (classes as any)[`spacing-${spacing!}`] : classes[size!]
+    spacing ? (classes as any)[`spacing-${spacing}`] : classes[size!]
   );
 
   const innerProps = {

src/core/client/ui/components/InputDescription/InputDescription.tsx

@@ -1,6 +1,7 @@
+import React, { FunctionComponent, ReactNode } from "react";
+
 import { Typography } from "coral-ui/components";
 import { PropTypesOf } from "coral-ui/types";
-import React, { FunctionComponent, ReactNode } from "react";
 
 interface InputDescriptionProps {
   children: ReactNode;

src/core/client/ui/components/InputLabel/InputLabel.tsx

@@ -1,10 +1,11 @@
 import cn from "classnames";
+import React, { FunctionComponent, ReactNode } from "react";
+
 import { withStyles } from "coral-ui/hocs";
 import { Omit, PropTypesOf } from "coral-ui/types";
-import React, { ReactNode } from "react";
-import { FunctionComponent } from "react";
 
 import Typography from "../Typography";
+
 import styles from "./InputLabel.css";
 
 export interface InputLabelProps

src/core/client/ui/components/MatchMedia/MatchMedia.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { FunctionComponent, ReactNode } from "react";
+import React, { FunctionComponent, ReactNode } from "react";
 import Responsive, { MediaQueryMatchers } from "react-responsive";
 
 import { PropTypesOf } from "coral-ui/types";

src/core/client/ui/components/Message/Message.tsx

@@ -1,7 +1,8 @@
 import cn from "classnames";
-import { withStyles } from "coral-ui/hocs";
 import React, { FunctionComponent, ReactNode } from "react";
 
+import { withStyles } from "coral-ui/hocs";
+
 import styles from "./Message.css";
 
 export interface MessageProps {

src/core/client/ui/components/Modal/Modal.spec.tsx

@@ -78,9 +78,9 @@ it("relays esc events", () => {
       { createNodeMock }
     );
   });
-  const modal = testRenderer!.root.findByProps({ role: "modal" });
-  modal.props.onKeyDown(escEvent);
-  modal.props.onKeyDown(otherEvent);
+  const el = testRenderer!.root.find(i => i.props.onKeyDown);
+  el.props.onKeyDown(escEvent);
+  el.props.onKeyDown(otherEvent);
   TestRenderer.act(() => {
     testRenderer.unmount();
   });

src/core/client/ui/components/Modal/Modal.tsx

@@ -26,6 +26,7 @@ function appendDivNode() {
 /**
  * useDOMNode is a React hook that returns a DOM node
  * to be used as a portal for the modal.
+ *
  * @param open whether the modal is open or not.
  */
 function useDOMNode(open: boolean) {
@@ -35,7 +36,7 @@ function useDOMNode(open: boolean) {
       const node = appendDivNode();
       setModalDOMNode(node);
       return () => {
-        node!.parentElement!.removeChild(node!);
+        node.parentElement!.removeChild(node);
         setModalDOMNode(null);
       };
     }
@@ -100,19 +101,18 @@ const Modal: FunctionComponent<Props> = ({
 
   if (open && modalDOMNode) {
     return ReactDOM.createPortal(
-      <div
-        className={rootClassName}
-        onKeyDown={handleEscapeKeyDown}
-        {...rest}
-        role="modal"
-      >
+      <div role="dialog" className={rootClassName} {...rest}>
         <NoScroll active={open} />
         <Backdrop
           active={open}
           data-testid="backdrop"
           onClick={handleBackdropClick}
         />
-        <div className={styles.scroll}>
+        <div
+          role="presentation"
+          className={styles.scroll}
+          onKeyDown={handleEscapeKeyDown}
+        >
           <div className={styles.alignContainer1}>
             <div className={styles.alignContainer2}>
               <div className={styles.wrapper}>

src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap

@@ -3,8 +3,7 @@
 exports[`renders correctly 1`] = `
 <div
   className="Modal-root"
-  onKeyDown={[Function]}
-  role="modal"
+  role="dialog"
 >
   <div
     className="Backdrop-root Backdrop-active"
@@ -13,6 +12,8 @@ exports[`renders correctly 1`] = `
   />
   <div
     className="Modal-scroll"
+    onKeyDown={[Function]}
+    role="presentation"
   >
     <div
       className="Modal-alignContainer1"

src/core/client/ui/components/PasswordField/PasswordField.tsx

@@ -1,14 +1,16 @@
 import cn from "classnames";
-import { withStyles } from "coral-ui/hocs";
 import React, {
   AllHTMLAttributes,
   ChangeEvent,
   Component,
   EventHandler,
-  MouseEvent,
+  KeyboardEvent,
 } from "react";
 
+import { withStyles } from "coral-ui/hocs";
+
 import Icon from "../Icon";
+
 import styles from "./PasswordField.css";
 
 export interface PasswordFieldProps {
@@ -85,7 +87,14 @@ class PasswordField extends Component<PasswordFieldProps, State> {
     reveal: false,
   };
 
-  private handleToggleVisibility = (e: MouseEvent) => {
+  private handleVisibilityKeyUp = (e: KeyboardEvent) => {
+    // Number 13 is the "Enter" key on the keyboard
+    if (e.keyCode === 13) {
+      this.toggleVisibility();
+    }
+  };
+
+  private toggleVisibility = () => {
     this.setState(state => ({
       reveal: !state.reveal,
     }));
@@ -137,7 +146,8 @@ class PasswordField extends Component<PasswordFieldProps, State> {
             role="button"
             className={styles.icon}
             title={reveal ? hidePasswordTitle : showPasswordTitle}
-            onClick={this.handleToggleVisibility}
+            onClick={this.toggleVisibility}
+            onKeyUp={this.handleVisibilityKeyUp}
             tabIndex={0}
           >
             <Icon>{reveal ? "visibility_off" : "visibility"}</Icon>

src/core/client/ui/components/PasswordField/__snapshots__/PasswordField.spec.tsx.snap

@@ -20,6 +20,7 @@ exports[`renders correctly 1`] = `
     <div
       className="PasswordField-icon"
       onClick={[Function]}
+      onKeyUp={[Function]}
       role="button"
       tabIndex={0}
       title="Hide password"
@@ -55,6 +56,7 @@ exports[`renders correctly 2`] = `
     <div
       className="PasswordField-icon"
       onClick={[Function]}
+      onKeyUp={[Function]}
       role="button"
       tabIndex={0}
       title="Show password"

src/core/client/ui/components/Popover/Arrow.tsx

@@ -7,8 +7,11 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   dark?: boolean;
 }
 
-const Arrow = React.forwardRef<HTMLDivElement, Props>(
-  ({ className, dark, ...rest }, ref) => (
+const Arrow = React.forwardRef<HTMLDivElement, Props>(function Arrow(
+  { className, dark, ...rest },
+  ref
+) {
+  return (
     <div
       {...rest}
       className={cn(className, styles.root, {
@@ -16,7 +19,7 @@ const Arrow = React.forwardRef<HTMLDivElement, Props>(
       })}
       ref={ref}
     />
-  )
-);
+  );
+});
 
 export default Arrow;

src/core/client/ui/components/Popover/Popover.tsx

@@ -7,8 +7,8 @@ import { withStyles } from "coral-ui/hocs";
 import { PropTypesOf } from "coral-ui/types";
 
 import AriaInfo from "../AriaInfo";
-
 import Arrow from "./Arrow";
+
 import styles from "./Popover.css";
 
 type Placement =
@@ -156,7 +156,7 @@ class Popover extends React.Component<PopoverProps> {
             {props => (
               <div
                 id={id}
-                role="popup"
+                role="dialog"
                 aria-labelledby={`${id}-ariainfo`}
                 aria-hidden={!visible}
               >

src/core/client/ui/components/Popup/Popup.ts

@@ -93,7 +93,7 @@ export default class Popup extends Component<PopupProps> {
     try {
       this.setCallbacks();
     } catch (err) {
-      // tslint:disable-next-line: no-console
+      // eslint-disable-next-line no-console
       console.error(err);
     }
   }
@@ -208,7 +208,7 @@ export default class Popup extends Component<PopupProps> {
     }
   };
 
-  public componentWillReceiveProps(nextProps: PopupProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: PopupProps) {
     if (nextProps.open && !this.ref) {
       this.openWindow(nextProps);
     }

src/core/client/ui/components/RadioButton/RadioButton.tsx

@@ -66,7 +66,7 @@ class RadioButton extends Component<RadioButtonProps> {
     } = this.props;
 
     const rootClassName = cn(classes.root, className);
-    const finalID = this.props.id || this.state.randomID;
+    const finalID = id || this.state.randomID;
 
     return (
       <Flex alignItems="center" className={rootClassName}>

src/core/client/ui/components/SelectField/OptGroup.spec.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import TestRenderer from "react-test-renderer";
 
 import { PropTypesOf } from "coral-ui/types";
+
 import OptGroup from "./OptGroup";
 
 it("renders correctly", () => {

src/core/client/ui/components/SelectField/Option.spec.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import TestRenderer from "react-test-renderer";
 
 import { PropTypesOf } from "coral-ui/types";
+
 import Option from "./Option";
 
 it("renders correctly", () => {

src/core/client/ui/components/SelectField/SelectField.spec.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import TestRenderer from "react-test-renderer";
 
 import { PropTypesOf } from "coral-ui/types";
+
 import SelectField from "./SelectField";
 
 it("renders correctly", () => {

src/core/client/ui/components/SelectField/SelectField.tsx

@@ -1,8 +1,13 @@
 import cn from "classnames";
-import React, { ChangeEvent, EventHandler, FocusEvent } from "react";
-import { FunctionComponent } from "react";
+import React, {
+  ChangeEvent,
+  EventHandler,
+  FocusEvent,
+  FunctionComponent,
+} from "react";
 
 import { withKeyboardFocus, withStyles } from "coral-ui/hocs";
+
 import Icon from "../Icon";
 
 import styles from "./SelectField.css";

src/core/client/ui/components/Spinner/Spinner.tsx

@@ -1,7 +1,8 @@
 import cn from "classnames";
-import { withStyles } from "coral-ui/hocs";
 import React, { FunctionComponent } from "react";
 
+import { withStyles } from "coral-ui/hocs";
+
 import styles from "./Spinner.css";
 
 type Size = "xs" | "sm" | "md";

src/core/client/ui/components/Steps/Circle.tsx

@@ -1,5 +1,6 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
+
 import Icon from "../Icon";
 
 import styles from "./Circle.css";

src/core/client/ui/components/Steps/Step.tsx

@@ -1,4 +1,5 @@
 import React, { Component, ReactNode, ReactText } from "react";
+
 import Flex from "../Flex";
 import Typography from "../Typography";
 import Circle from "./Circle";

src/core/client/ui/components/Steps/StepBar.tsx

@@ -1,5 +1,6 @@
 import cn from "classnames";
 import React, { Component, ReactNode } from "react";
+
 import Flex from "../Flex";
 
 import styles from "./StepBar.css";

src/core/client/ui/components/Table/Table.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { createRenderer } from "react-test-renderer/shallow";
 
-import { Table, TableBody, TableCell, TableHead, TableRow } from ".";
+import { Table, TableBody, TableCell, TableHead, TableRow } from "./";
 
 it("renders correctly", () => {
   const renderer = createRenderer();

src/core/client/ui/components/TextField/TextField.tsx

@@ -1,8 +1,12 @@
 import cn from "classnames";
-import React, { AllHTMLAttributes, ChangeEvent, EventHandler } from "react";
+import React, {
+  AllHTMLAttributes,
+  ChangeEvent,
+  EventHandler,
+  FunctionComponent,
+} from "react";
 
 import { withStyles } from "coral-ui/hocs";
-import { FunctionComponent } from "react";
 
 import styles from "./TextField.css";
 

src/core/client/ui/components/TextLink/TextLink.tsx

@@ -1,7 +1,7 @@
 import cn from "classnames";
-import { Icon } from "coral-ui/components";
 import React, { AnchorHTMLAttributes, StatelessComponent } from "react";
 
+import { Icon } from "coral-ui/components";
 import { withStyles } from "coral-ui/hocs";
 
 import styles from "./TextLink.css";

src/core/client/ui/components/TileSelector/TileOption.tsx

@@ -1,9 +1,10 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
-import styles from "./TileOption.css";
 import { SelectorChildProps } from "./TileSelector";
 
+import styles from "./TileOption.css";
+
 interface Props extends SelectorChildProps {
   className?: string;
 }

src/core/client/ui/components/TrapFocus/TrapFocus.spec.tsx

@@ -1,12 +1,14 @@
+/* eslint-disable react/display-name */
 import { noop } from "lodash";
 import React from "react";
 import { create } from "react-test-renderer";
 import sinon from "sinon";
 
 import { PropTypesOf } from "coral-ui/types";
+
 import TrapFocus from "./TrapFocus";
 
-const FakeFocusable: any = class extends React.Component {
+const FakeFocusable: any = class FakeFocusable extends React.Component {
   public focus = sinon.spy();
   public render() {
     return null;

src/core/client/ui/components/TrapFocus/TrapFocus.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 import React, { RefObject } from "react";
 
 interface RenderProps {
@@ -25,13 +26,13 @@ export default class TrapFocus extends React.Component<TrapFocusProps> {
 
   // Trap keyboard focus inside the dropdown until a value has been chosen.
   private focusBegin = () =>
-    (this.firstFocusableRef.current || this.fallbackRef.current!).focus();
+    (this.firstFocusableRef.current || this.fallbackRef.current).focus();
   private focusEnd = () =>
-    (this.lastFocusableRef.current || this.fallbackRef.current!).focus();
+    (this.lastFocusableRef.current || this.fallbackRef.current).focus();
 
   public componentDidMount() {
     this.previousActiveElement = document.activeElement;
-    this.fallbackRef.current!.focus();
+    this.fallbackRef.current.focus();
   }
 
   public componentWillUnmount() {

src/core/client/ui/components/Typography/Typography.tsx

@@ -1,16 +1,15 @@
 import cn from "classnames";
-import React from "react";
-import { FunctionComponent, ReactNode } from "react";
+import React, { FunctionComponent, ReactNode } from "react";
 
 import { withForwardRef, withStyles } from "coral-ui/hocs";
 import { PropTypesOf } from "coral-ui/types";
 
-/* In this case the Box styles have higher priority! */
-import styles from "./Typography.css";
-
 /** Needs to be loaded after styles, because Box styles have priority */
 import Box from "../Box";
 
+/* In this case the Box styles have higher priority! */
+import styles from "./Typography.css";
+
 type Variant =
   | "heading1"
   | "heading2"

src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent, ReactNode } from "react";
+
 import Message from "../Message";
 import MessageIcon from "../Message/MessageIcon";
 

src/core/client/ui/helpers/combineEventHandlers.ts

@@ -24,10 +24,10 @@ export default function combineEventHandlers(...propObjects: any[]): any {
         const prev = result[k];
         result[k] = (...args: any[]) => {
           prev(...args);
-          (o as any)[k](...args);
+          o[k](...args);
         };
       } else {
-        result[k] = (o as any)[k];
+        result[k] = o[k];
       }
     });
   });

src/core/client/ui/hocs/withKeyboardFocus.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { FocusEvent } from "react";
+import React, { FocusEvent } from "react";
 import { DefaultingInferableComponentEnhancer, hoistStatics } from "recompose";
 
 interface InjectedProps {
@@ -22,7 +21,7 @@ const withKeyboardFocus: DefaultingInferableComponentEnhancer<
     const Workaround = BaseComponent as React.ComponentType<InjectedProps>;
 
     class WithKeyboardFocus extends React.Component<any> {
-      private lastMouseDownTime: number = 0;
+      private lastMouseDownTime = 0;
       public state = {
         keyboardFocus: false,
       };

src/core/client/ui/hocs/withMouseHover.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { MouseEvent, TouchEvent } from "react";
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
+import React, { MouseEvent, TouchEvent } from "react";
 import { DefaultingInferableComponentEnhancer, hoistStatics } from "recompose";
 
 interface InjectedProps {
@@ -11,8 +11,7 @@ interface InjectedProps {
 
 /**
  * withMouseHover provides a property `MouseHover: boolean`
- * to indicate a focus on the element, that wasn't triggered by mouse
- * or touch.
+ * to indicate a that the mouse is hovering the element.
  */
 const withMouseHover: DefaultingInferableComponentEnhancer<
   InjectedProps

src/core/client/ui/hocs/withStyles.ts

@@ -21,7 +21,7 @@ function withStyles<T>(
         } else if (process.env.NODE_ENV === "test") {
           throw new Error(`Extending non existent className ${k}`);
         } else if (process.env.NODE_ENV !== "production") {
-          // tslint:disable:next-line: no-console
+          // eslint-disable-next-line no-console
           console.warn("Extending non existent className", k);
         }
       });

src/core/client/ui/hooks/useComboBox.ts

@@ -61,7 +61,7 @@ export default function useComboBox<T extends ListBoxOption>(
           item.element.props.onClick ||
           ((evt: React.MouseEvent) => {
             if (item.onClickOrEnter) {
-              item.onClickOrEnter!(evt, item.element);
+              item.onClickOrEnter(evt, item.element);
             }
           }),
       }),

src/core/client/ui/theme/variables.ts

@@ -3,9 +3,6 @@
  * We keep the `.ts` extension to keep the types.
  */
 
-export type Spacing = keyof typeof variables["spacing"];
-export type Shade = keyof typeof variables["palette"]["primary"];
-
 const variables = {
   elevation: {
     main: "1px 0px 4px rgba(0, 0, 0, 0.25)",
@@ -90,7 +87,7 @@ const variables = {
   fontWeightRegular: 400,
   fontWeightMedium: 600,
   fontWeightBold: 700,
-  /***************/
+  /** End Deprecated */
   fontSize: {
     1: "12px",
     2: "14px",
@@ -154,4 +151,6 @@ const variables = {
   },
 };
 
+export type Spacing = keyof typeof variables["spacing"];
+export type Shade = keyof typeof variables["palette"]["primary"];
 export default variables;