upgrade prettier, apply new lint rules throughout

Author: mohsinulhaq

.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/cjs/react-popper-tooltip.js": {
-    "bundled": 12761,
-    "minified": 7781,
-    "gzipped": 2222
+    "bundled": 12816,
+    "minified": 7779,
+    "gzipped": 2223
   },
   "dist/esm/react-popper-tooltip.js": {
-    "bundled": 12722,
-    "minified": 7753,
-    "gzipped": 2209,
+    "bundled": 12777,
+    "minified": 7751,
+    "gzipped": 2211,
     "treeshaked": {
       "rollup": {
         "code": 187,
         "import_statements": 167
       },
       "webpack": {
-        "code": 8420
+        "code": 8418
       }
     }
   }

babel.config.js

@@ -1,4 +1,8 @@
 module.exports = {
-  presets: ['@babel/typescript', '@babel/react', ['@babel/env', {loose: true}]],
-  plugins: [['@babel/proposal-class-properties', {loose: true}]]
+  presets: [
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+    ['@babel/preset-env', { bugfixes: true, loose: true }],
+  ],
+  plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],
 };

docs/examples/BasicTooltipTrigger.tsx

@@ -1,16 +1,16 @@
-import React, {memo} from 'react';
+import React, { memo } from 'react';
 import TooltipTrigger from '../../src';
 import '../../src/styles.css';
-import {ChildrenArg, TooltipArg} from '../../src/types';
-import {BasicTooltipTriggerProps} from './types';
+import { ChildrenArg, TooltipArg } from '../../src';
+import { BasicTooltipTriggerProps } from './types';
 
 const Trigger = (children: React.ReactNode) => ({
   triggerRef,
-  getTriggerProps
+  getTriggerProps,
 }: ChildrenArg) => (
   <span
     {...getTriggerProps({
-      ref: triggerRef
+      ref: triggerRef,
     })}
   >
     {children}
@@ -22,20 +22,20 @@ const Tooltip = (tooltip: React.ReactNode, hideArrow?: boolean) => ({
   tooltipRef,
   getArrowProps,
   getTooltipProps,
-  placement
+  placement,
 }: TooltipArg) => (
   <div
     {...getTooltipProps({
       className: 'tooltip-container',
-      ref: tooltipRef
+      ref: tooltipRef,
     })}
   >
     {!hideArrow && (
       <div
         {...getArrowProps({
           className: 'tooltip-arrow',
           'data-placement': placement,
-          ref: arrowRef
+          ref: arrowRef,
         })}
       />
     )}
@@ -44,7 +44,7 @@ const Tooltip = (tooltip: React.ReactNode, hideArrow?: boolean) => ({
 );
 
 const BasicTooltipTrigger = memo(
-  ({tooltip, children, hideArrow, ...props}: BasicTooltipTriggerProps) => (
+  ({ tooltip, children, hideArrow, ...props }: BasicTooltipTriggerProps) => (
     <TooltipTrigger {...props} tooltip={Tooltip(tooltip, hideArrow)}>
       {Trigger(children)}
     </TooltipTrigger>

docs/examples/EscapeToClose.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-class EscapeToClose extends React.Component<{closeTooltip: () => void}> {
+class EscapeToClose extends React.Component<{ closeTooltip: () => void }> {
   public componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown);
   }
@@ -10,7 +10,7 @@ class EscapeToClose extends React.Component<{closeTooltip: () => void}> {
   public render() {
     return this.props.children;
   }
-  private handleKeyDown = ({key}: {key: string}) => {
+  private handleKeyDown = ({ key }: { key: string }) => {
     if (key === 'Escape') {
       this.props.closeTooltip();
     }

docs/examples/types.ts

@@ -11,7 +11,7 @@ export interface StateContainerProps {
   children: ({
     on,
     set,
-    toggle
+    toggle,
   }: {
     on: boolean;
     set: (on: boolean) => void;

docs/examples/utils.ts

@@ -1,24 +1,24 @@
 import React from 'react';
-import {StateContainerProps, StateContainerState} from './types';
+import { StateContainerProps, StateContainerState } from './types';
 
 class StateContainer extends React.Component<
   StateContainerProps,
   StateContainerState
 > {
   public state: StateContainerState = {
-    on: false
+    on: false,
   };
 
   public render() {
     return this.props.children({
       on: this.state.on,
       set: this.set,
-      toggle: this.toggle
+      toggle: this.toggle,
     });
   }
 
-  private set = (on: boolean) => this.setState({on});
-  private toggle = () => this.setState(prevState => ({on: !prevState.on}));
+  private set = (on: boolean) => this.setState({ on });
+  private toggle = () => this.setState((prevState) => ({ on: !prevState.on }));
 }
 
-export {StateContainer};
+export { StateContainer };

doczrc.js

@@ -1,5 +1,5 @@
 export default {
   title: 'react-popper-tooltip',
   description: 'Documentation for react-popper-tooltip',
-  typescript: true
+  typescript: true,
 };

package.json

@@ -25,7 +25,7 @@
     "docs:build": "docz build",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/**/*.{ts,tsx}",
-    "test": "jest"
+    "test": "jest tests/"
   },
   "husky": {
     "hooks": {
@@ -36,9 +36,6 @@
     "src/**/*.(ts|tsx)": [
       "prettier --write",
       "yarn lint --fix"
-    ],
-    "*": [
-      "git add"
     ]
   },
   "keywords": [
@@ -56,35 +53,35 @@
     "react-dom": "^16.6.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.8.7",
+    "@babel/runtime": "^7.9.2",
     "react-popper": "^1.3.7"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.7",
+    "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.7",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/preset-typescript": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
     "@testing-library/react": "^10.0.1",
     "@types/jest": "^25.1.4",
-    "@types/react": "^16.9.23",
+    "@types/react": "^16.9.26",
     "@types/react-dom": "^16.9.5",
-    "@typescript-eslint/eslint-plugin": "^2.24.0",
-    "@typescript-eslint/parser": "^2.24.0",
+    "@typescript-eslint/eslint-plugin": "^2.25.0",
+    "@typescript-eslint/parser": "^2.25.0",
     "docz": "^2.2.0",
     "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.19.0",
     "husky": "^4.2.3",
-    "jest": "^25.1.0",
-    "lint-staged": "^10.0.8",
-    "prettier": "^1.19.1",
+    "jest": "^25.2.3",
+    "lint-staged": "^10.0.9",
+    "prettier": "^2.0.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "rollup": "^2.0.6",
+    "rollup": "^2.2.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-size-snapshot": "^0.11.0",

rollup.config.js

@@ -1,14 +1,14 @@
 import babel from 'rollup-plugin-babel';
 import resolve from 'rollup-plugin-node-resolve';
-import {sizeSnapshot} from 'rollup-plugin-size-snapshot';
+import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
 import pkg from './package.json';
 
 const input = 'src/index.ts';
-const external = id => !id.startsWith('.') && !id.startsWith('/');
+const external = (id) => !id.startsWith('.') && !id.startsWith('/');
 const getBabelOptions = (useESModules = true) => ({
   extensions: ['.ts', '.tsx'],
   runtimeHelpers: true,
-  plugins: [['@babel/plugin-transform-runtime', {useESModules}]]
+  plugins: [['@babel/plugin-transform-runtime', { useESModules }]],
 });
 
 export default [
@@ -18,27 +18,27 @@ export default [
       file: pkg.main,
       format: 'cjs',
       interop: false,
-      sourcemap: true
+      sourcemap: true,
     },
     external,
     plugins: [
-      resolve({extensions: ['.ts', '.tsx']}),
+      resolve({ extensions: ['.ts', '.tsx'] }),
       babel(getBabelOptions(false)),
-      sizeSnapshot()
-    ]
+      sizeSnapshot(),
+    ],
   },
   {
     input,
     output: {
       file: pkg.module,
       format: 'esm',
-      sourcemap: true
+      sourcemap: true,
     },
     external,
     plugins: [
-      resolve({extensions: ['.ts', '.tsx']}),
+      resolve({ extensions: ['.ts', '.tsx'] }),
       babel(getBabelOptions()),
-      sizeSnapshot()
-    ]
-  }
+      sizeSnapshot(),
+    ],
+  },
 ];

src/Tooltip.tsx

@@ -3,13 +3,13 @@ import {
   GetArrowPropsArg,
   GetTooltipPropsArg,
   TooltipProps,
-  TriggerTypes
+  TriggerTypes,
 } from './types';
 import { callAll, TooltipContext, setRef } from './utils';
 
 const MUTATION_OBSERVER_CONFIG: MutationObserverInit = {
   childList: true,
-  subtree: true
+  subtree: true,
 };
 
 class Tooltip extends Component<TooltipProps> {
@@ -31,7 +31,7 @@ class Tooltip extends Component<TooltipProps> {
     ) {
       const {
         removeParentOutsideClickHandler,
-        removeParentOutsideRightClickHandler
+        removeParentOutsideRightClickHandler,
       } = this.context;
       this.addOutsideClickHandler();
       this.addOutsideRightClickHandler();
@@ -63,7 +63,7 @@ class Tooltip extends Component<TooltipProps> {
       const {
         isParentNoneTriggered,
         addParentOutsideClickHandler,
-        addParentOutsideRightClickHandler
+        addParentOutsideRightClickHandler,
       } = this.context;
       this.removeOutsideClickHandler();
       this.removeOutsideRightClickHandler();
@@ -88,7 +88,7 @@ class Tooltip extends Component<TooltipProps> {
           getArrowProps: this.getArrowProps,
           getTooltipProps: this.getTooltipProps,
           placement,
-          tooltipRef: this.getTooltipRef
+          tooltipRef: this.getTooltipRef,
         })}
       </TooltipContext.Provider>
     );
@@ -101,7 +101,7 @@ class Tooltip extends Component<TooltipProps> {
     );
   }
 
-  private handleOutsideClick?: EventListener = event => {
+  private handleOutsideClick?: EventListener = (event) => {
     if (this.tooltipRef && !this.tooltipRef.contains(event.target as Node)) {
       const { parentOutsideClickHandler } = this.context;
       const { hideTooltip, clearScheduled } = this.props;
@@ -114,7 +114,7 @@ class Tooltip extends Component<TooltipProps> {
     }
   };
 
-  private handleOutsideRightClick?: EventListener = event => {
+  private handleOutsideRightClick?: EventListener = (event) => {
     if (this.tooltipRef && !this.tooltipRef.contains(event.target as Node)) {
       const { parentOutsideRightClickHandler } = this.context;
       const { hideTooltip, clearScheduled } = this.props;
@@ -156,16 +156,16 @@ class Tooltip extends Component<TooltipProps> {
 
   private getArrowProps = (props: GetArrowPropsArg = {}) => ({
     ...props,
-    style: { ...props.style, ...this.props.arrowProps.style }
+    style: { ...props.style, ...this.props.arrowProps.style },
   });
 
   private getTooltipProps = (props: GetTooltipPropsArg = {}) => ({
     ...props,
     ...(this.isTriggeredBy('hover') && {
       onMouseEnter: callAll(this.props.clearScheduled, props.onMouseEnter),
-      onMouseLeave: callAll(this.props.hideTooltip, props.onMouseLeave)
+      onMouseLeave: callAll(this.props.hideTooltip, props.onMouseLeave),
     }),
-    style: { ...props.style, ...this.props.style }
+    style: { ...props.style, ...this.props.style },
   });
 
   private contextValue = {
@@ -175,7 +175,7 @@ class Tooltip extends Component<TooltipProps> {
     parentOutsideClickHandler: this.handleOutsideClick,
     parentOutsideRightClickHandler: this.handleOutsideRightClick,
     removeParentOutsideClickHandler: this.removeOutsideClickHandler,
-    removeParentOutsideRightClickHandler: this.removeOutsideRightClickHandler
+    removeParentOutsideRightClickHandler: this.removeOutsideRightClickHandler,
   };
 }