[C-2600] Eslint Clean Up (#31)

.eslintrc.js

@@ -1,122 +1,40 @@
 module.exports = {
-  "extends": [
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
     "plugin:react/recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:jsx-a11y/recommended",
+    "prettier",
   ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "ecmaFeatures": {
-      "impliedStrict": true,
-      "classes": true,
-    },
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "jest": true,
+  ignorePatterns: [".eslintrc.js", "node_modules"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "prettier", "react"],
+  parserOptions: {
+    ecmaVersion: 2017,
+    project: "./tsconfig.json",
   },
-  "plugins": [
-    "react",
-    "jest",
-    "import",
-    "react-hooks",
-    "@typescript-eslint",
-    "jsx-a11y",
-  ],
-  "rules": {
-    "array-callback-return": "error",
-    "no-await-in-loop": "error",
-    "object-curly-newline": ["error", {
-      "multiline": true,
-      "minProperties": 3,
-      "consistent": true,
-    }],
-    "brace-style": ["error", "1tbs", { "allowSingleLine": false }],
-    "no-return-await": "error",
-    "quote-props": ["error", "consistent"],
-    "require-await": "error",
-    "no-async-promise-executor": "error",
-    "no-throw-literal": "warn",
-    "no-nested-ternary": "off",
-    "no-duplicate-imports": ["error", { "includeExports": false }],
-    "import/order": "error",
-    "import/first": "error",
-    "import/default": "off",
-    "import/namespace": "off",
-    "indent": ["error", 2],
-    "react/no-find-dom-node": "warn",
-    "no-undef": "error",
-    "no-debugger": "warn",
-    "react/prop-types": 0,
-    "curly": "error",
-    "semi": ["error", "always", { "omitLastInOneLineBlock": true }],
-    "semi-style": ["error", "last"],
-    "no-console": "off",
-    "react/jsx-uses-react": "error",
-    "react/jsx-uses-vars": "error",
-    "no-prototype-builtins": "off",
-    "react/no-unescaped-entities": "off",
-    "object-curly-spacing": ["error", "always"],
-    "quotes": ["error", "double", { "allowTemplateLiterals": true }],
-    "comma-dangle": ["error", "always-multiline"],
-    "keyword-spacing": "error",
-    "no-multi-spaces": "error",
-    "no-trailing-spaces": "error",
-    "arrow-body-style": ["error", "as-needed"],
-    "space-before-function-paren": ["error", {
-      "anonymous": "always",
-      "named": "never",
-      "asyncArrow": "always",
-    }],
-    "no-return-assign": "error",
-    "padding-line-between-statements": [
-      "error",
-      {
-        "blankLine": "always",
-        "prev": "*",
-        "next": ["function", "if", "for", "while", "switch", "try"],
-      },
-      {
-        "blankLine": "always",
-        "prev": ["const", "let", "var"],
-        "next": ["block", "block-like", "multiline-expression"],
-      },
-      {
-        "blankLine": "always",
-        "prev": ["block", "block-like", "multiline-expression"],
-        "next": ["const", "let", "var"],
-      },
-    ],
-    "padded-blocks": ["error", "never"],
-    "no-unused-expressions": "error",
-    "func-names": "off",
-    "no-underscore-dangle": "off",
-    "consistent-return": "off",
-    "radix": "off",
-    "guard-for-in": "off",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "react/jsx-max-props-per-line": [2, { maximum: 3 }],
-    "object-property-newline": ["error"],
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      { "argsIgnorePattern": "^_" },
-    ],
-    "semi": "off",
-    "@typescript-eslint/semi": ["error"],
-    "@typescript-eslint/type-annotation-spacing": ["error"],
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
+    node: true,
   },
-  "settings": {
-    "react": {
-      "createClass": "createReactClass", // Regex for Component Factory to use, default to "createReactClass"
-      "pragma": "React", // Pragma to use, default to "React"
-      "version": "detect", // React version, default to the latest React stable release
+  settings: {
+    react: {
+      pragma: "React",
+      version: "detect",
     },
-    "import/resolver": { "node": { "extensions": [".js", ".jsx", ".ts", ".tsx"] } },
   },
-};
+  rules: {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/no-empty-interface": 0,
+    "@typescript-eslint/no-unused-vars": 2,
+    "no-empty-pattern": 0,
+    "no-self-assign": 0,
+    "react/display-name": 0,
+    "react/prop-types": 0,
+    "no-else-return": 2,
+    "quote-props": 0,
+  },
+};

.prettierignore

@@ -0,0 +1 @@
+dist

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "disableLanguages": ["html", "ejs", "javascript", "css"],
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "arrowParens": "always"
+}

package.json

@@ -58,6 +58,7 @@
     "babel-plugin-styled-components": "^1.12.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "eslint": "^7.18.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jest": "^22.11.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",

packages/components/src/components/Inbox.ts

@@ -1 +1 @@
-export {Inbox as default} from '@trycourier/react-inbox';
+export { Inbox as default } from "@trycourier/react-inbox";

packages/components/src/components/Toast.ts

@@ -1 +1 @@
-export {Toast as default} from '@trycourier/react-toast';
+export { Toast as default } from "@trycourier/react-toast";

packages/components/src/index.html

@@ -1,79 +1,77 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>
+      <%= htmlWebpackPlugin.options.title %>
+    </title>
+    <style>
+      body {
+        cursor: default;
+        font-family: "Nunito", sans-serif;
+        margin: 0;
+        padding: 32px;
+      }
+    </style>
+    <script type="text/javascript">
+      window.courierConfig = {
+        clientKey: "ZDRiMTViNmMtODdmZi00OWMzLWI5YTgtYmU5NTc3YTRlM2Y1",
+        userId: "3b17362c-0c91-4fcd-a829-885a2343eb67",
+        apiUrl: "https://rubmz24skk.execute-api.us-east-1.amazonaws.com/dev",
+        wsUrl: "wss://20en15n3ng.execute-api.us-east-1.amazonaws.com/dev",
+      };
+
+      window.courierAsyncInit = () => {
+        window.courier.on("toast/init", () => {
+          window.showToastOnClick = () => {
+            window.courier.toast.add({
+              title: "Hello",
+              body: "World",
+            });
+          };
 
-<head>
-  <meta charset="utf-8" />
-  <title>
-    <%= htmlWebpackPlugin.options.title %>
-  </title>
-  <style>
-    body {
-      cursor: default;
-      font-family: "Nunito", sans-serif;
-      margin: 0;
-      padding: 32px;
-    }
-  </style>
-  <script type="text/javascript">
-    window.courierConfig = {
-      clientKey: "ZDRiMTViNmMtODdmZi00OWMzLWI5YTgtYmU5NTc3YTRlM2Y1",
-      userId: "3b17362c-0c91-4fcd-a829-885a2343eb67",
-      apiUrl: "https://rubmz24skk.execute-api.us-east-1.amazonaws.com/dev",
-      wsUrl: "wss://20en15n3ng.execute-api.us-east-1.amazonaws.com/dev",
-    };
+          const showToast = document.getElementById("show-toast");
+          showToast.removeAttribute("disabled");
+        });
 
-    window.courierAsyncInit = () => {
-      window.courier.on("toast/init", () => {
-        window.showToastOnClick = () => {
-          window.courier.toast.add({
-            title: "Hello",
-            body: "World",
+        window.notifyClick = () => {
+          window.courier.transport.send({
+            action: "notify",
+            data: {
+              channel: window.courierConfig.userId,
+              event: "*",
+              message: {
+                title: "Success!",
+                body: "We sent a toast with a websocket",
+              },
+            },
           });
         };
 
-        const showToast = document.getElementById("show-toast");
-        showToast.removeAttribute("disabled");
-      });
-
-      window.notifyClick = () => {
-        window.courier.transport.send({
-          action: "notify",
-          data: {
-            channel: window.courierConfig.userId,
-            event: "*",
-            message: {
-              title: "Success!",
-              body: "We sent a toast with a websocket",
-            },
-          },
+        window.courier.transport.intercept((message) => {
+          console.log(message);
+          return message;
         });
-      };
-
-      window.courier.transport.intercept((message) => {
-        console.log(message);
-        return message;
-      });
 
-      const notify = document.getElementById("notify");
-      notify.removeAttribute("disabled");
-    };
-  </script>
-</head>
-
-<body>
-  <h1>Treva Homepage</h1>
-  <courier-toast auto-close="false"></courier-toast>
-  <courier-inbox></courier-inbox>
-  <div>
-    <button id="show-toast" onclick="showToastOnClick()" disabled>
-      Show Toast
-    </button>
-  </div>
-  <div>
-    <button id="notify" onclick="notifyClick()" disabled>
-      Notify
-    </button>
-  </div>
-</body>
+        const notify = document.getElementById("notify");
+        notify.removeAttribute("disabled");
+      };
+    </script>
+  </head>
 
-</html>
+  <body>
+    <h1>Treva Homepage</h1>
+    <courier-toast auto-close="false"></courier-toast>
+    <courier-inbox></courier-inbox>
+    <div>
+      <button id="show-toast" onclick="showToastOnClick()" disabled>
+        Show Toast
+      </button>
+    </div>
+    <div>
+      <button id="notify" onclick="notifyClick()" disabled>
+        Notify
+      </button>
+    </div>
+  </body>
+</html>

packages/react-inbox/__mocks__/fileMock.ts

@@ -1,3 +1,3 @@
 const content = "test";
 export const ReactComponent = content;
-export default content;
+export default content;

packages/react-inbox/src/components/Actions/styled.ts

@@ -1,10 +1,10 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const Container = styled.div`
   flex-shrink: 0;
 `;
 
-export const Action = styled.div<{ href: string, target: string }>(() => ({
+export const Action = styled.div<{ href: string; target: string }>(() => ({
   cursor: "pointer",
   border: "none",
   fontSize: 12,
@@ -27,4 +27,4 @@ export const Action = styled.div<{ href: string, target: string }>(() => ({
   },
 
   borderRadius: 6,
-}));
+}));

packages/react-inbox/src/components/Inbox/LazyTippy.tsx

@@ -6,19 +6,19 @@ https://github.com/atomiks/tippyjs-react/issues/288
 found here: https://gist.github.com/atomiks/520f4b0c7b537202a23a3059d4eec908
 */
 const LazyTippy: React.FunctionComponent<TippyProps> = (props) => {
-    const [mounted, setMounted] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
-    const lazyPlugin = {
-      fn: () => ({
-        onMount: () => setMounted(true),
-      }),
-    };
+  const lazyPlugin = {
+    fn: () => ({
+      onMount: () => setMounted(true),
+    }),
+  };
 
-    const computedProps = { ...props };
+  const computedProps = { ...props };
 
-    computedProps.plugins = [lazyPlugin, ...(props.plugins || [])];
-    computedProps.content = mounted ? props.content : "";
-    return <Tippy {...computedProps} />;
-}
+  computedProps.plugins = [lazyPlugin, ...(props.plugins || [])];
+  computedProps.content = mounted ? props.content : "";
+  return <Tippy {...computedProps} />;
+};
 
 export default LazyTippy;