[MOB-9066]: Better linting rules

.eslintrc

@@ -8,18 +8,40 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "airbnb-base"
   ],
   "ignorePatterns": [
     "webpack.*.js"
   ],
+  "globals": {
+    "window": true,
+    "document": true
+  },
   "rules": {
+    "comma-dangle": "off",
+    "implicit-arrow-linebreak": "off",
     "no-console": 1,
+    "no-underscore-dangle": "off",
     "no-duplicate-imports": 2,
+    "indent": "off",
+    "function-paren-newline": "off",
+    "no-confusing-arrow": "off",
     "no-extra-boolean-cast": "off",
+    "no-undef": "off",
+    "no-unused-vars": "off",
+    "operator-linebreak": "off",
+    "import/extensions": "off",
+    "import/prefer-default-export": "off",
+    "max-classes-per-file": "off",
+    "object-curly-newline": "off",
+    "no-shadow": "off",
     "@typescript-eslint/camelcase": "off",
     "@typescript-eslint/comma-spacing": 2,
     "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+    // come back and make this an error
+    "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/array-type": [
       2,
       {
@@ -31,5 +53,17 @@
       2,
       "single"
     ]
-  }
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
+      }
+    }
+  },
 }

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
 }

package.json

@@ -37,6 +37,8 @@
     "buffer": "^6.0.3",
     "copy-webpack-plugin": "^11.0.0",
     "idb-keyval": "^6.2.0",
+    "lodash": "^4.17.21",
+    "qs": "^6.12.3",
     "throttle-debounce": "^3.0.1",
     "uuid": "^9.0.0",
     "yup": "^0.32.9"
@@ -80,8 +82,10 @@
     "concurrently": "^6.3.0",
     "css-loader": "^6.8.1",
     "dotenv": "^10.0.0",
-    "eslint": "^7.14.0",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-prettier": "^3.4.0",
     "fake-indexeddb": "^4.0.0",
     "file-loader": "^6.2.0",
@@ -113,4 +117,4 @@
       "eslint"
     ]
   }
-}
+}

react-example/package.json

@@ -33,13 +33,14 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.9.0",
+    "@playwright/test": "^1.44.0",
     "@types/jest": "^27.0.2",
+    "@types/node": "^20.12.12",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/styled-components": "^5.1.34",
-    "@babel/preset-typescript": "^7.9.0",
-    "@playwright/test": "^1.44.0",
-    "@types/node": "^20.12.12",
+    "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
     "@webpack-cli/serve": "^1.6.0",
@@ -60,11 +61,11 @@
     "typescript": "^4.6.4",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.3",
-    "@types/uuid": "^9.0.2"
+    "webpack-dev-server": "^4.7.3"
   },
   "dependencies": {
     "@iterable/web-sdk": "../",
+    "axios": "^1.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.2.1",

react-example/src/components/Button.tsx

@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes, FC } from 'react';
 import styled from 'styled-components';
 
-const _Button = styled.button`
+const StyledButton = styled.button`
   text-align: center;
   text-decoration: none;
   width: 60%;
@@ -33,7 +33,7 @@ const _Button = styled.button`
   }
 `;
 
-const DisabledButton = styled(_Button)`
+const DisabledButton = styled(StyledButton)`
   background-color: gray;
   color: #c7c7c7;
   -webkit-box-shadow: 0 5px 0 0 #4d4d4d;
@@ -64,7 +64,5 @@ export const Button: FC<Props> = (props) => {
       </DisabledButton>
     );
   }
-  return <_Button {...rest}>{children}</_Button>;
+  return <StyledButton {...rest}>{children}</StyledButton>;
 };
-
-export default Button;

react-example/src/components/EmbeddedForm.tsx

@@ -1,11 +1,4 @@
 import { FC, FormEvent, useState } from 'react';
-import {
-  Button,
-  EndpointWrapper,
-  Form,
-  Heading,
-  Response
-} from '../views/Components.styled';
 import {
   IterableEmbeddedManager,
   IterableEmbeddedMessageUpdateHandler,
@@ -14,11 +7,17 @@ import {
   trackEmbeddedClick,
   trackEmbeddedDismiss
 } from '@iterable/web-sdk';
-import TextField from 'src/components/TextField';
 import { v4 as uuidv4 } from 'uuid';
+import { TextField } from './TextField';
+import {
+  StyledButton,
+  EndpointWrapper,
+  Form,
+  Heading,
+  Response
+} from '../views/Components.styled';
 
 interface Props {
-  userId: string;
   endpointName: string;
   heading: string;
   needsInputField?: boolean;
@@ -32,7 +31,6 @@ export const TYPE_DISMISS = 3;
 export const TYPE_SESSION = 4;
 
 export const EmbeddedForm: FC<Props> = ({
-  userId,
   endpointName,
   heading,
   needsInputField,
@@ -77,7 +75,7 @@ export const EmbeddedForm: FC<Props> = ({
     setTrackingEvent(true);
 
     const receivedMessage = {
-      messageId: messageId,
+      messageId,
       appPackageName: 'my-lil-site'
     };
 
@@ -99,7 +97,7 @@ export const EmbeddedForm: FC<Props> = ({
     setTrackingEvent(true);
 
     const payload = {
-      messageId: messageId,
+      messageId,
       campaignId: 1
     };
 
@@ -130,7 +128,7 @@ export const EmbeddedForm: FC<Props> = ({
     setTrackingEvent(true);
 
     const sessionData = {
-      messageId: messageId,
+      messageId,
       buttonIdentifier: '123',
       deviceInfo: {
         deviceId: '123',
@@ -163,7 +161,7 @@ export const EmbeddedForm: FC<Props> = ({
       },
       impressions: [
         {
-          messageId: messageId,
+          messageId,
           displayCount: 1,
           displayDuration: 1000
         }
@@ -224,14 +222,12 @@ export const EmbeddedForm: FC<Props> = ({
               />
             </>
           )}
-          <Button disabled={isTrackingEvent} type="submit">
+          <StyledButton disabled={isTrackingEvent} type="submit">
             Submit
-          </Button>
+          </StyledButton>
         </Form>
         <Response {...responseAttr}>{trackResponse}</Response>
       </EndpointWrapper>
     </>
   );
 };
-
-export default EmbeddedForm;

react-example/src/components/EventsForm.tsx

@@ -1,18 +1,19 @@
-import { FC, FormEvent, useState } from 'react';
+import { FC, FormEvent, SetStateAction, useState } from 'react';
+import { IterablePromise, IterableResponse } from '@iterable/web-sdk';
 import {
-  Button,
+  StyledButton,
   EndpointWrapper,
   Form,
   Heading,
   Response
 } from '../views/Components.styled';
-import { IterablePromise, IterableResponse } from '@iterable/web-sdk';
-import TextField from 'src/components/TextField';
+import { TextField } from './TextField';
 
 interface Props {
   endpointName: string;
   heading: string;
   needsEventName?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   method: (...args: any) => IterablePromise<IterableResponse>;
 }
 
@@ -67,19 +68,19 @@ export const EventsForm: FC<Props> = ({
           </label>
           <TextField
             value={trackEvent}
-            onChange={(e) => setTrackEvent(e.target.value)}
+            onChange={(e: { target: { value: SetStateAction<string> } }) =>
+              setTrackEvent(e.target.value)
+            }
             id="item-1"
             placeholder={needsEventName ? 'e.g. button-clicked' : 'e.g. df3fe3'}
             {...inputAttr}
           />
-          <Button disabled={isTrackingEvent} type="submit">
+          <StyledButton disabled={isTrackingEvent} type="submit">
             Submit
-          </Button>
+          </StyledButton>
         </Form>
         <Response {...responseAttr}>{trackResponse}</Response>
       </EndpointWrapper>
     </>
   );
 };
-
-export default EventsForm;

react-example/src/components/Link.tsx

@@ -72,5 +72,3 @@ export const Link: FC<Props> = (props) => {
 
   return <_Link {...rest}>{children}</_Link>;
 };
-
-export default Link;

react-example/src/components/LoginForm.tsx

@@ -1,14 +1,15 @@
-import { ChangeEvent, FC, FormEvent, useState } from 'react';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ChangeEvent, FC, FormEvent, SetStateAction, useState } from 'react';
 import styled from 'styled-components';
 
-import _TextField from 'src/components/TextField';
-import _Button from 'src/components/Button';
+import { TextField } from './TextField';
+import { Button } from './Button';
 
-import { useUser } from 'src/context/Users';
+import { useUser } from '../context/Users';
 
-const TextField = styled(_TextField)``;
+const StyledTextField = styled(TextField)``;
 
-const Button = styled(_Button)`
+const StyledButton = styled(Button)`
   margin-left: 0.4em;
   max-width: 425px;
 `;
@@ -20,7 +21,7 @@ const Form = styled.form`
   justify-content: flex-end;
   height: 100%;
 
-  ${TextField} {
+  ${StyledTextField} {
     align-self: stretch;
     margin-top: 5px;
   }
@@ -101,11 +102,13 @@ export const LoginForm: FC<Props> = ({
     <>
       {loggedInUser && !isEditingUser ? (
         <>
-          <Button onClick={handleEditUser}>
+          <StyledButton onClick={handleEditUser}>
             Logged in as {`${first5}...${last9}`} (change)
-          </Button>
-          <Button onClick={handleJwtRefresh}>Manually Refresh JWT Token</Button>
-          <Button onClick={handleLogout}>Logout</Button>
+          </StyledButton>
+          <StyledButton onClick={handleJwtRefresh}>
+            Manually Refresh JWT Token
+          </StyledButton>
+          <StyledButton onClick={handleLogout}>Logout</StyledButton>
         </>
       ) : (
         <StyledDiv>
@@ -134,8 +137,10 @@ export const LoginForm: FC<Props> = ({
             </div>
           </Form>
           <Form onSubmit={handleSubmit} data-qa-login-form>
-            <TextField
-              onChange={(e) => updateUser(e.target.value)}
+            <StyledTextField
+              onChange={(e: { target: { value: SetStateAction<string> } }) =>
+                updateUser(e.target.value)
+              }
               value={user}
               placeholder="e.g. [email protected]"
               required
@@ -152,5 +157,3 @@ export const LoginForm: FC<Props> = ({
     </>
   );
 };
-
-export default LoginForm;

react-example/src/components/TextField.tsx

@@ -13,5 +13,3 @@ export const TextField: FC<Props> = (props) => {
   const { ...rest } = props;
   return <Input type="text" {...rest} />;
 };
-
-export default TextField;