chore: eslint migration

.eslintignore

@@ -0,0 +1 @@
+pkg/**/*

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["@carforyou/eslint-config/react"],
+}

jest.config.js

@@ -1,21 +1,18 @@
-/* tslint:disable:object-literal-sort-keys */
 module.exports = {
   globals: {
     "ts-jest": {
-      diagnostics: { warnOnly: true }
-    }
+      diagnostics: { warnOnly: true },
+    },
   },
   moduleFileExtensions: ["js", "ts", "tsx", "node"],
   moduleNameMapper: {
     "assets/(.*).(jpe?g|png|gif|ico|svg)$":
       "<rootDir>/src/__mocks__/fileMock.js",
-    "\\.(css|less)$": "<rootDir>/src/__mocks__/styleMock.js"
+    "\\.(css|less)$": "<rootDir>/src/__mocks__/styleMock.js",
   },
-  setupFiles: [
-    "<rootDir>/src/__tests__/setup/setupGlobalMocks.ts"
-  ],
+  setupFiles: ["<rootDir>/src/__tests__/setup/setupGlobalMocks.ts"],
   testMatch: ["**/__tests__/**/*.test.ts?(x)"],
   transform: {
-    "\\.tsx?$": "ts-jest"
-  }
+    "\\.tsx?$": "ts-jest",
+  },
 }

package.json

@@ -6,8 +6,8 @@
     "version": "npm run build",
     "dev": "npm run build:tailwind && start-storybook -p 6006",
     "test": "jest",
-    "lint": "tslint --project tsconfig.json",
-    "format": "tslint --project tsconfig.json --fix",
+    "lint": "eslint --ext ts,js,tsx,jsx,json .",
+    "format": "npm run lint -- --fix",
     "build": "npm run build:tailwind && pika build",
     "build:tailwind": "tsc --project tsconfig.tailwind.json",
     "build:storybook": "npm run build:tailwind && build-storybook",
@@ -39,9 +39,9 @@
     "use-deep-compare-effect": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.3",
+    "@babel/core": "^7.8.4",
+    "@carforyou/eslint-config": "1.1.0-initial-rules-ca8a1992a789bb4c88f8f9a642c9c867859b13b9.6",
     "@carforyou/pika-plugin-build-standalone-node": "^1.0.0",
-    "@carforyou/tslint-rules": "^3.0.0",
     "@percy/storybook": "^3.2.0",
     "@pika/pack": "^0.5.0",
     "@pika/plugin-build-web": "^0.9.0",
@@ -63,21 +63,23 @@
     "@types/react-paginate": "^6.2.1",
     "@zeit/next-typescript": "^1.1.1",
     "awesome-typescript-loader": "^5.2.1",
+    "eslint": "^6.8.0",
+    "eslint-plugin-prettier": "^3.1.3",
     "jest": "^25.1.0",
     "marked": "^1.0.0",
     "marked-terminal": "^4.1.0",
     "postcss-easy-import": "^3.0.0",
     "postcss-loader": "^3.0.0",
     "prettier": "^2.0.5",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0",
     "react-docgen-typescript-loader": "^3.6.0",
+    "react-dom": "^16.12.0",
     "react-test-renderer": "^16.12.0",
     "semantic-release": "^17.0.0",
     "svgo": "^1.3.2",
     "tailwindcss": "^1.2.0",
     "ts-jest": "^25.0.0",
-    "tslint": "^5.20.1",
+    "tslint": "^6.1.2",
     "typescript": "^3.7.5"
   },
   "@pika/pack": {

release.config.js

@@ -5,8 +5,8 @@ module.exports = {
     "master",
     {
       name: "!(+([0-9])?(.{+([0-9]),x}).x|master)",
-      prerelease: "${ name }" + `-${process.env.CIRCLE_SHA1}`
-    }
+      prerelease: "${ name }" + `-${process.env.CIRCLE_SHA1}`,
+    },
   ],
-  pkgRoot: "pkg"
+  pkgRoot: "pkg",
 }

src/__tests__/setup/setupGlobalMocks.ts

@@ -5,14 +5,14 @@ window.matchMedia =
   window.matchMedia ||
   (() => {
     return {
-      addListener: () => {}, // tslint:disable-line: no-empty
+      addListener: jest.fn(),
       matches: false,
-      removeListener: () => {}, // tslint:disable-line: no-empty
+      removeListener: jest.fn(),
       media: "test",
-      onchange: () => {}, // tslint:disable-line: no-empty
-      addEventListener: () => {}, // tslint:disable-line: no-empty
-      removeEventListener: () => {}, // tslint:disable-line: no-empty
-      dispatchEvent: () => true, // tslint:disable-line: no-empty
+      onchange: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: () => true,
     }
   })
 

src/components/checkbox.tsx

@@ -11,7 +11,7 @@ interface CheckboxProps {
   disabled?: boolean
   error?: string
   renderLabel?: () => JSX.Element
-  onChange?: (e: ChangeEvent<any>) => void
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
 }
 
 interface PositionedLabelProps extends CheckboxProps {

src/components/dropdown/buttonToggle.tsx

@@ -1,4 +1,4 @@
-import React, { ReactChild, FC, ReactElement } from "react"
+import React, { ReactChild, ReactElement } from "react"
 
 interface Props<T> {
   placeholder?: string

src/components/dropdown/menu.tsx

@@ -108,7 +108,7 @@ class Menu<T> extends Component<Props<T>> {
           )
 
           return (
-            // tslint:disable-next-line:jsx-key
+            // eslint-disable-next-line react/jsx-key
             <li
               {...getItemProps({
                 "data-testid": item.name,

src/components/dropdown/withAutosuggest.tsx

@@ -72,7 +72,7 @@ const filterOptions = (noResults) => (allOptions, text) => {
     return allOptions
   }
 
-  const specialChars = /[-\/\\^$*+?.()|[\]{}]/g
+  const specialChars = /[-/\\^$*+?.()|[\]{}]/g
   const cleanedText = text.replace(specialChars, "\\$&")
   const regex = new RegExp(cleanedText, "i")
   const startsWith = new RegExp(`^${cleanedText}`, "i")

src/components/input/index.tsx

@@ -21,9 +21,9 @@ interface InputProps {
   onChange: <T extends { target: { name: string; value: string | number } }>(
     e: T
   ) => void
-  onBlur?: (e: FocusEvent<any>) => void
-  onKeyDown?: (e: KeyboardEvent<any>) => void
-  onFocus?: (e: FocusEvent<any>) => void
+  onBlur?: (e: FocusEvent) => void
+  onKeyDown?: (e: KeyboardEvent) => void
+  onFocus?: (e: FocusEvent) => void
   step?: number
   min?: number
   max?: number
@@ -93,6 +93,7 @@ const Input = forwardRef<HTMLInputElement, Props>(
         value={value || ""}
         placeholder={placeholder || ""}
         className={classNames("w-12/12", className, {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
           input_withClearButton: hasClearButton,
           "floatingLabel-input": labelProps.floating,
         })}

src/components/input/inputField.tsx

@@ -57,7 +57,7 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
   disabled?: boolean
   required?: boolean
   onChange?: (e: { target: { value: string | number } }) => void
-  onBlur?: (e: FocusEvent<any>) => void
+  onBlur?: (e: FocusEvent) => void
   debounce?: number
 }
 
@@ -93,15 +93,13 @@ const InputField = forwardRef<HTMLInputElement, Props>(
         className={className}
         inputMode={mode !== "text" ? mode : null}
         onKeyDown={(e) => {
-          // tslint:disable:no-unused-expression
           mode === "numeric"
             ? validateNumber(e)
             : mode === "decimal"
             ? validateDecimal(e)
             : null
 
           onKeyDown && onKeyDown(e)
-          // tslint:enable:no-unused-expression
         }}
         onChange={debounceCallback(onChange, debounce)}
         onBlur={onBlur}

src/components/intercom/helper.ts

@@ -9,6 +9,7 @@ const loadIntercom = (settings) => {
   if (!window.Intercom) {
     ;((w, d, id, s, _x) => {
       function i() {
+        // eslint-disable-next-line prefer-rest-params
         i.c(arguments)
       }
       i.q = []

src/components/pagination.tsx

@@ -7,7 +7,7 @@ interface Props {
   previousLabel: string
   nextLabel: string
   rangePageLabel: string
-  onPageChange: (data: any) => void
+  onPageChange: (data) => void
   forcePage: number
   query?: object
   pageLinkBuilder?: (page: number, params: object) => string

src/components/radioButton.tsx

@@ -12,7 +12,7 @@ interface Props<T> {
   error?: string
   renderLabel?: () => JSX.Element
   labelPosition?: "left" | "right"
-  onChange?: (e: ChangeEvent<any>) => void
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
 }
 
 function RadioButton<T>({

src/components/segmentedControl/button.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, createElement } from "react"
+import { FC, ReactNode, createElement } from "react"
 import classnames from "classnames"
 
 import { wrapLink } from "../../lib/buttonHelper"

src/components/select.tsx

@@ -46,6 +46,7 @@ interface SimpleSelect<T> extends BaseProps<T> {
 
 type Props<T> = AutosuggestSelect<T> | SimpleSelect<T>
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Select = forwardRef<HTMLInputElement, Props<any>>(
   (
     {
@@ -178,6 +179,7 @@ const Select = forwardRef<HTMLInputElement, Props<any>>(
       return {
         select_open: showOpenedIcon && !selected,
         select_closed: !isOpen && !selected,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
         select_withSearchIcon: showOpenedIcon && !selected && showSearchIcon,
       }
     }
@@ -211,9 +213,11 @@ const Select = forwardRef<HTMLInputElement, Props<any>>(
       <>
         {"withAutosuggest" in rest && rest.withAutosuggest ? (
           <DropdownWithAutosuggest
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             {...(dropdownProps as DropdownWithAutosuggestProps<any>)}
           />
         ) : (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           <Dropdown {...(dropdownProps as DropdownProps<any>)} />
         )}
       </>

src/components/textarea.tsx

@@ -16,7 +16,7 @@ interface Props {
   disabled?: boolean
   required?: boolean
   onChange: (e: { target: { value: string } }) => void
-  onBlur: (e: FocusEvent<any>) => void
+  onBlur: (e: FocusEvent) => void
   rows?: number
   cols?: number
   maxLength?: number

src/lib/debounceHelper.ts

@@ -5,14 +5,14 @@
  * @note: Currently only supports callbacks with a single parameter (for form input events)
  */
 function debounce(
-  callback?: (event: any) => void,
+  callback?: (event) => void,
   delay?: number
-): (event: any) => void | undefined {
+): (event) => void | undefined {
   if (!callback || !delay) {
     return callback
   }
   let timer
-  return (event: any): void => {
+  return (event): void => {
     clearTimeout(timer)
     timer = setTimeout(() => {
       timer = null

src/tailwind/defaultConfig.ts

@@ -1,4 +1,3 @@
-/* tslint:disable:object-literal-sort-keys */
 import TransformPlugin from "./plugins/transform"
 /*
 Tailwind - The Utility-First CSS Framework
@@ -594,5 +593,6 @@ export default {
     transitionDuration: ["responsive", "hover"],
   },
   corePlugins: {},
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   plugins: [TransformPlugin, require("tailwindcss-gradients")()],
 }

src/tailwind/index.ts

@@ -38,6 +38,7 @@ export interface TailwindConfig {
   theme?: TailwindTheme
   options?: { [key: string]: string | number | boolean }
   modules?: { [key: string]: string[] }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   plugins?: any[]
 }
 
@@ -49,7 +50,7 @@ const resolveConfig = (config) => {
   }
 
   for (const conf in config.theme) {
-    if (config.theme.hasOwnProperty(conf)) {
+    if (Object.prototype.hasOwnProperty.call(config.theme, conf)) {
       theme[conf] =
         typeof config.theme[conf] === "function"
           ? config.theme[conf](getKey)