migrate from tslint to eslint

Author: mohsinulhaq

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
+    'plugin:react/recommended',
+    'plugin:jsx-a11y/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  plugins: ['@typescript-eslint', 'react', 'jsx-a11y'],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': 0,
+    '@typescript-eslint/no-non-null-assertion': 0,
+    'react/no-find-dom-node': 0
+  }
+};

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,43 @@
+<!--
+Thanks for your interest in contributing to react-popper-tooltip!
+
+Do you want to report a bug?
+Please, make sure to fill all the sections of the template before submitting any issue.
+
+If your issue is a feature request please feel free to delete the template and describe it.
+
+Want your issue to be fixed earlier? Create a PR that introduces a CI test that fails
+because of the bug you found!
+-->
+
+### Reproduction demo
+
+<!--
+Fork and/or modify this CodeSandbox template to allow the contributors to easily reproduce your problem.
+If the problem can't be reproduced using these templates, explain why in this section.
+
+https://codesandbox.io/s/pykkz77z5j
+-->
+
+### Steps to reproduce the problem
+
+1.
+2.
+3.
+
+### What is the expected behavior?
+
+<!-- Describe what you would have expected. -->
+
+### What went wrong?
+
+<!-- Describe what went wrong. -->
+
+### Any other comments?
+
+<!-- Any additional information. -->
+
+### Packages versions
+
+- react-popper:
+- react-popper-tooltip:

.size-snapshot.json

@@ -1,11 +1,11 @@
 {
   "dist/cjs/react-popper-tooltip.js": {
-    "bundled": 15320,
+    "bundled": 15447,
     "minified": 8206,
     "gzipped": 2346
   },
   "dist/esm/react-popper-tooltip.js": {
-    "bundled": 15268,
+    "bundled": 15395,
     "minified": 8173,
     "gzipped": 2343,
     "treeshaked": {

docs/examples/BasicTooltipTrigger.tsx

@@ -1,13 +1,13 @@
 import React, {memo} from 'react';
 import TooltipTrigger from '../../src';
 import '../../src/styles.css';
-import {IChildrenArg, ITooltipArg} from '../../src/types';
-import {IBasicTooltipTriggerProps} from './types';
+import {ChildrenArg, TooltipArg} from '../../src/types';
+import {BasicTooltipTriggerProps} from './types';
 
 const Trigger = (children: React.ReactNode) => ({
   triggerRef,
   getTriggerProps
-}: IChildrenArg) => (
+}: ChildrenArg) => (
   <span
     {...getTriggerProps({
       ref: triggerRef
@@ -23,7 +23,7 @@ const Tooltip = (tooltip: React.ReactNode, hideArrow?: boolean) => ({
   getArrowProps,
   getTooltipProps,
   placement
-}: ITooltipArg) => (
+}: TooltipArg) => (
   <div
     {...getTooltipProps({
       className: 'tooltip-container',
@@ -44,7 +44,7 @@ const Tooltip = (tooltip: React.ReactNode, hideArrow?: boolean) => ({
 );
 
 const BasicTooltipTrigger = memo(
-  ({tooltip, children, hideArrow, ...props}: IBasicTooltipTriggerProps) => (
+  ({tooltip, children, hideArrow, ...props}: BasicTooltipTriggerProps) => (
     <TooltipTrigger {...props} tooltip={Tooltip(tooltip, hideArrow)}>
       {Trigger(children)}
     </TooltipTrigger>

docs/examples/types.ts

@@ -1,22 +1,24 @@
 import React from 'react';
 
-export interface IBasicTooltipTriggerProps {
+export interface BasicTooltipTriggerProps {
   tooltip: React.ReactNode;
   children: React.ReactNode;
   hideArrow?: boolean;
   [key: string]: any;
 }
 
-export interface IStateContainerProps {
-  children: (
-    {
-      on,
-      set,
-      toggle
-    }: {on: boolean; set: (on: boolean) => void; toggle: () => void}
-  ) => React.ReactNode;
+export interface StateContainerProps {
+  children: ({
+    on,
+    set,
+    toggle
+  }: {
+    on: boolean;
+    set: (on: boolean) => void;
+    toggle: () => void;
+  }) => React.ReactNode;
 }
 
-export interface IStateContainerState {
+export interface StateContainerState {
   on: boolean;
 }

docs/examples/utils.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import {IStateContainerProps, IStateContainerState} from './types';
+import {StateContainerProps, StateContainerState} from './types';
 
 class StateContainer extends React.Component<
-  IStateContainerProps,
-  IStateContainerState
+  StateContainerProps,
+  StateContainerState
 > {
-  public state: IStateContainerState = {
+  public state: StateContainerState = {
     on: false
   };
 

package.json

@@ -24,7 +24,7 @@
     "docs:build": "docz build",
     "docs:deploy": "yarn docs:build && cp .docz/dist/index.html .docz/dist/404.html && gh-pages -d .docz/dist",
     "typecheck": "tsc --noEmit",
-    "lint": "tslint -p .",
+    "lint": "eslint src/**/*.{ts,tsx}",
     "test": "jest"
   },
   "pre-commit": [
@@ -47,39 +47,41 @@
     "react-dom": "^16.6.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.3.4",
+    "@babel/runtime": "^7.4.2",
     "react-popper": "^1.3.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-transform-runtime": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "^7.4.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-transform-runtime": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
-    "@types/jest": "^24.0.9",
-    "@types/react": "^16.8.6",
-    "@types/react-dom": "^16.8.2",
+    "@types/jest": "^24.0.11",
+    "@types/react": "^16.8.8",
+    "@types/react-dom": "^16.8.3",
+    "@typescript-eslint/eslint-plugin": "^1.5.0",
+    "@typescript-eslint/parser": "^1.5.0",
     "docz": "^0.13.7",
     "docz-plugin-css": "^0.11.0",
     "docz-theme-default": "^0.13.7",
+    "eslint": "^5.15.3",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
     "gh-pages": "^2.0.1",
-    "jest": "^24.1.0",
+    "jest": "^24.5.0",
     "pre-commit": "^1.2.2",
     "prettier": "^1.16.4",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
-    "react-testing-library": "^6.0.0",
-    "rollup": "^1.4.1",
+    "react": "^16.8.5",
+    "react-dom": "^16.8.5",
+    "react-testing-library": "^6.0.3",
+    "rollup": "^1.7.3",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-node-resolve": "^4.0.1",
     "rollup-plugin-size-snapshot": "^0.8.0",
-    "tslint": "^5.13.1",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-eslint-rules": "^5.4.0",
-    "tslint-plugin-prettier": "^2.0.1",
-    "tslint-react": "^3.6.0",
-    "typescript": "^3.3.3333"
+    "typescript": "^3.3.4000"
   }
 }

src/Tooltip.tsx

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
 import {findDOMNode} from 'react-dom';
-import {IGetArrowPropsArg, IGetTooltipPropsArg, ITooltipProps} from './types';
+import {GetArrowPropsArg, GetTooltipPropsArg, TooltipProps} from './types';
 import {callAll, TooltipContext} from './utils';
 
 const MUTATION_OBSERVER_CONFIG: MutationObserverInit = {
   childList: true,
   subtree: true
 };
 
-class Tooltip extends Component<ITooltipProps> {
+class Tooltip extends Component<TooltipProps> {
   private mounted?: boolean;
   private observer?: MutationObserver;
 
@@ -143,12 +143,12 @@ class Tooltip extends Component<ITooltipProps> {
   private removeOutsideRightClickHandler = () =>
     document.removeEventListener('contextmenu', this.handleOutsideRightClick!);
 
-  private getArrowProps = (props: IGetArrowPropsArg = {}) => ({
+  private getArrowProps = (props: GetArrowPropsArg = {}) => ({
     ...props,
     style: {...props.style, ...this.props.arrowProps.style}
   });
 
-  private getTooltipProps = (props: IGetTooltipPropsArg = {}) => {
+  private getTooltipProps = (props: GetTooltipPropsArg = {}) => {
     const isHoverTriggered = this.props.trigger === 'hover';
 
     return {

src/TooltipTrigger.tsx

@@ -7,9 +7,9 @@ import {createPortal} from 'react-dom';
 import {Manager, Popper, Reference} from 'react-popper';
 import Tooltip from './Tooltip';
 import {
-  IGetTriggerPropsArg,
-  ITooltipTriggerProps,
-  ITooltipTriggerState
+  GetTriggerPropsArg,
+  TooltipTriggerProps,
+  TooltipTriggerState
 } from './types';
 import {callAll, canUseDOM, noop, TooltipContext} from './utils';
 
@@ -20,8 +20,8 @@ const DEFAULT_MODIFIERS: PopperJS.Modifiers = {
 };
 
 class TooltipTrigger extends Component<
-  ITooltipTriggerProps,
-  ITooltipTriggerState
+  TooltipTriggerProps,
+  TooltipTriggerState
 > {
   public static defaultProps = {
     closeOnOutOfBoundaries: true,
@@ -38,7 +38,7 @@ class TooltipTrigger extends Component<
 
   public static contextType = TooltipContext;
 
-  public state: ITooltipTriggerState = {
+  public state: TooltipTriggerState = {
     tooltipShown: this.props.defaultTooltipShown
   };
 
@@ -166,7 +166,7 @@ class TooltipTrigger extends Component<
       : this.state.tooltipShown;
   }
 
-  private setTooltipState = (state: ITooltipTriggerState) => {
+  private setTooltipState = (state: TooltipTriggerState) => {
     const cb = () => this.props.onVisibilityChange(state.tooltipShown);
     this.isControlled() ? cb() : this.setState(state, cb);
   };
@@ -178,7 +178,7 @@ class TooltipTrigger extends Component<
 
   private showTooltip = ({pageX, pageY}: {pageX: number; pageY: number}) => {
     this.clearScheduled();
-    let state: ITooltipTriggerState = {
+    let state: TooltipTriggerState = {
       tooltipShown: true
     };
     if (this.props.followCursor) {
@@ -222,7 +222,7 @@ class TooltipTrigger extends Component<
     this[action]({pageX, pageY});
   };
 
-  private getTriggerProps = (props: IGetTriggerPropsArg = {}) => {
+  private getTriggerProps = (props: GetTriggerPropsArg = {}) => {
     const {trigger, followCursor} = this.props;
     const isClickTriggered = trigger === 'click';
     const isHoverTriggered = trigger === 'hover';