add eslint setup

.eslintrc.json

@@ -0,0 +1,90 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier", "unused-imports"],
+  "extends": [
+    "airbnb",
+    "airbnb/hooks",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:prettier/recommended"
+  ],
+  "env": {
+    "es6": true,
+    "browser": true,
+    "jest": true,
+    "node": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "react/require-default-props": 0,
+    "unused-imports/no-unused-imports": "error",
+    "prettier/prettier": "error",
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
+    "react/jsx-props-no-spreading": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "react/react-in-jsx-scope": 0,
+    "react/display-name": 0,
+    "react/prop-types": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/explicit-member-accessibility": 0,
+    "@typescript-eslint/indent": 0,
+    "@typescript-eslint/member-delimiter-style": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-var-requires": 0,
+    "no-use-before-define": 0,
+    "@typescript-eslint/no-use-before-define": 0,
+    "import/extensions": ["error", "never", { "svg": "always" }],
+    "react/no-unescaped-entities": 0,
+    "jsx-a11y/label-has-associated-control": 0,
+    "react/no-unused-prop-types": 0,
+    "no-underscore-dangle": 0,
+    "import/prefer-default-export": 0,
+    "import/no-unresolved": [
+      "error",
+      {
+        "ignore": ["@"]
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      0,
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "no-console": [
+      2,
+      {
+        "allow": ["warn", "error"]
+      }
+    ],
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal"],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
+  }
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": true
+}

package.json

@@ -64,7 +64,18 @@
     "@types/react-dom": "^17.0.0",
     "csstype": "^3.0.7",
     "size-limit": "^4.9.1",
-    "tsdx": "^0.14.1"
+    "tsdx": "^0.14.1",
+    "eslint": "^7.29.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-unused-imports": "^1.1.1",
+    "@typescript-eslint/eslint-plugin": "^4.27.0",
+    "@typescript-eslint/parser": "^4.27.0"
   },
   "dependencies": {
     "goober": "^2.0.35"

src/components/toast-bar.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
+
 import { styled, keyframes } from 'goober';
 
 import { Toast, ToastPosition, resolveValue, Renderable } from '../core/types';
-import { ToastIcon } from './toast-icon';
 import { prefersReducedMotion } from '../core/utils';
+import { ToastIcon } from './toast-icon';
 
 const enterAnimation = (factor: number) => `
 0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;}

src/components/toast-icon.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
+
 import { styled, keyframes } from 'goober';
 
 import { Toast } from '../core/types';
+import { CheckmarkIcon, CheckmarkTheme } from './checkmark';
 import { ErrorIcon, ErrorTheme } from './error';
 import { LoaderIcon, LoaderTheme } from './loader';
-import { CheckmarkIcon, CheckmarkTheme } from './checkmark';
 
 const StatusWrapper = styled('div')`
   position: absolute;
@@ -51,9 +52,8 @@ export const ToastIcon: React.FC<{
   if (icon !== undefined) {
     if (typeof icon === 'string') {
       return <AnimatedIconWrapper>{icon}</AnimatedIconWrapper>;
-    } else {
-      return icon;
     }
+    return icon;
   }
 
   if (type === 'blank') {

src/components/toaster.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
+
 import { setup, css } from 'goober';
 
-import { useToaster } from '../core/use-toaster';
-import { ToastBar } from './toast-bar';
 import {
   ToastPosition,
   DefaultToastOptions,
   Toast,
   resolveValue,
 } from '../core/types';
+import { useToaster } from '../core/use-toaster';
 import { createRectRef, prefersReducedMotion } from '../core/utils';
+import { ToastBar } from './toast-bar';
 
 setup(React.createElement);
 

src/core/store.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+
 import { DefaultToastOptions, Toast, ToastType } from './types';
 
 const TOAST_LIMIT = 20;
@@ -59,7 +60,7 @@ const addToRemoveQueue = (toastId: string) => {
     toastTimeouts.delete(toastId);
     dispatch({
       type: ActionType.REMOVE_TOAST,
-      toastId: toastId,
+      toastId,
     });
   }, 1000);
 

src/core/toast.ts

@@ -1,3 +1,4 @@
+import { dispatch, ActionType } from './store';
 import {
   Renderable,
   Toast,
@@ -8,7 +9,6 @@ import {
   resolveValue,
 } from './types';
 import { genId } from './utils';
-import { dispatch, ActionType } from './store';
 
 type Message = ValueOrFunction<Renderable, Toast>;
 

src/core/use-toaster.ts

@@ -1,4 +1,5 @@
 import { useEffect, useMemo } from 'react';
+
 import { dispatch, ActionType, useStore } from './store';
 import { toast } from './toast';
 import { DefaultToastOptions, Toast, ToastPosition } from './types';

src/core/utils.ts

@@ -18,7 +18,7 @@ export const createRectRef = (onRect: (rect: DOMRect) => void) => (
 
 export const prefersReducedMotion = (() => {
   // Cache result
-  let shouldReduceMotion: boolean | undefined = undefined;
+  let shouldReduceMotion: boolean | undefined;
 
   return () => {
     if (shouldReduceMotion === undefined) {

src/index.tsx

@@ -1,10 +1,10 @@
-import { toast } from './core/toast';
-
 // Type re-export workaround, to stay compatible with TS 3.7 and lower
+import { toast } from './core/toast';
 import {
   ToastOptions as _ToastOptions,
   ToastPosition as _ToastPosition,
 } from './core/types';
+
 export { useToaster } from './core/use-toaster';
 export { ToastBar } from './components/toast-bar';
 export { ToastIcon } from './components/toast-icon';