TCA-1179 work on linting issues -> dev

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -26,6 +26,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# Editors
-.editorconfig

package.json

@@ -26,6 +26,7 @@
         "@sprig-technologies/sprig-browser": "^2.20.1",
         "@stripe/react-stripe-js": "1.13.0",
         "@stripe/stripe-js": "1.41.0",
+        "@types/testing-library__jest-dom": "^5.14.5",
         "apexcharts": "^3.36.0",
         "axios": "^1.1.2",
         "browser-cookies": "^1.2.0",
@@ -128,10 +129,10 @@
         "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-import": "^2.25.3",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-no-null": "^1.0.2",
         "eslint-plugin-ordered-imports": "^0.6.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
+        "eslint-plugin-unicorn": "^46.0.0",
         "file-loader": "^6.2.0",
         "husky": "^8.0.1",
         "identity-obj-proxy": "^3.0.0",
@@ -156,15 +157,6 @@
         "webpack-dev-server": "^4.11.1",
         "webpack-merge": "^5.8.0"
     },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ],
-        "rules": {
-            "no-useless-escape": 0
-        }
-    },
     "browserslist": {
         "production": [
             ">0.2%",

src-ts/.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
     },
     plugins: [
         '@typescript-eslint',
-        'no-null',
+        'unicorn',
         'ordered-imports',
         'react',
         'react-hooks'
@@ -35,6 +35,7 @@ module.exports = {
         }
     },
     rules: {
+        '@typescript-eslint/ban-ts-comment': 'off',
         '@typescript-eslint/ban-types': [
             'error',
             {
@@ -50,7 +51,7 @@ module.exports = {
                 allowExpressions: true
             }
         ],
-        '@typescript-eslint/no-explicit-any': 'error',
+        '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-inferrable-types': 'off',
         '@typescript-eslint/no-shadow': 'error',
         '@typescript-eslint/no-unused-vars': 'error',
@@ -89,9 +90,10 @@ module.exports = {
             'error',
             'prefer-single'
         ],
-        'jsx-a11y/click-events-have-key-events': 'warn',
-        'jsx-a11y/no-noninteractive-element-interactions': 'warn',
-        'jsx-a11y/no-static-element-interactions': 'warn',
+        'jsx-a11y/click-events-have-key-events': 'off',
+        'jsx-a11y/no-noninteractive-element-interactions': 'off',
+        'jsx-a11y/no-static-element-interactions': 'off',
+        'jsx-a11y/label-has-associated-control': 'off',
         'jsx-a11y/tabindex-no-positive': [
             'warn'
         ],
@@ -107,7 +109,6 @@ module.exports = {
         ],
         'no-extra-boolean-cast': 'off',
         'no-nested-ternary': 'off',
-        'no-null/no-null': 'error',
         'no-param-reassign': [
             'error',
             {
@@ -181,6 +182,7 @@ module.exports = {
                 ],
             },
         ],
+        'no-empty': ["error", { "allowEmptyCatch": true }],
         'padded-blocks': 'off',
         'padding-line-between-statements': [
             'error',
@@ -263,12 +265,14 @@ module.exports = {
         'react/jsx-props-no-spreading': [
             0
         ],
+        'react/no-danger': 'off',
         'react/react-in-jsx-scope': 'off',
         'react/require-default-props': 'off',
         'semi': [
             'error',
             'never',
         ],
-        'sort-keys': 'error'
+        'sort-keys': 'error',
+        'unicorn/no-null': 'error'
     },
 };

src-ts/lib/breadcrumb/Breadcrumb.tsx

@@ -28,6 +28,7 @@ const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
                                     <BreadcrumbItem
                                         index={index + 1}
                                         item={item}
+                                        // eslint-disable-next-line react/no-array-index-key
                                         key={index}
                                     />
                                 ))
@@ -63,6 +64,7 @@ const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
                             <BreadcrumbItem
                                 index={index + 1}
                                 item={item}
+                                // eslint-disable-next-line react/no-array-index-key
                                 key={index}
                             />
                         ))}

src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import { Link } from 'react-router-dom'
+import classNames from 'classnames'
 
 import styles from '../Breadcrumb.module.scss'
 
@@ -23,7 +24,7 @@ const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) =>
             className={props.item.isElipsis ? 'elipsis' : ''}
         >
             <Link
-                className={props.item.isElipsis ? styles.elipsis : ''}
+                className={classNames(props.item.isElipsis && styles.elipsis)}
                 to={props.item.url}
             >
                 {props.item.name}

src-ts/lib/contact-support-form/ContactSupportForm.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, FC, SetStateAction, useCallback, useContext, useEffect, useState } from 'react'
 
 import { Form, FormDefinition, formGetInputModel, FormInputModel } from '../form'
+import { FormValue } from '../form/form-functions'
 import { LoadingSpinner } from '../loading-spinner'
 import { profileContext, ProfileContextData } from '../profile-provider'
 
@@ -27,13 +28,13 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
 
     useEffect(() => {
         if (!loading && saveOnSuccess) {
-            props.onSave()
+            props.onSave.call(undefined)
         }
     }, [loading, saveOnSuccess, props.onSave])
 
-    const generateRequest: (inputs: ReadonlyArray<FormInputModel>) => void = useCallback((
+    const generateRequest: (inputs: ReadonlyArray<FormInputModel>) => FormValue = useCallback((
         inputs: ReadonlyArray<FormInputModel>,
-    ): ContactSupportRequest => {
+    ): FormValue => {
         const firstName: string
             = formGetInputModel(inputs, ContactSupportFormField.first).value as string
         const lastName: string
@@ -50,12 +51,12 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
             lastName,
             question,
         }
-    }, [props.workId])
+    }, [props.isSelfService, props.workId])
 
-    const saveAsync: (request: ContactSupportRequest) => Promise<void>
-        = useCallback(async (request: ContactSupportRequest): Promise<void> => {
+    const saveAsync: (request: FormValue) => Promise<void>
+        = useCallback(async (request: FormValue): Promise<void> => {
             setLoading(true)
-            return contactSupportSubmitRequestAsync(request)
+            return contactSupportSubmitRequestAsync(request as unknown as ContactSupportRequest)
                 .then(() => {
                     setSaveOnSuccess(true)
                 })
@@ -92,7 +93,7 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
 
             <Form
                 formDef={props.formDef}
-                formValues={profile}
+                formValues={profile as unknown as FormValue}
                 requestGenerator={generateRequest}
                 save={saveAsync}
             />

src-ts/lib/form/Form.tsx

@@ -44,7 +44,10 @@ interface FormProps<ValueType, RequestType> {
     readonly shouldDisableButton?: (isPrimaryGroup: boolean, index: number) => boolean
 }
 
-const Form: <ValueType extends FormValue, RequestType extends FormValue>(props: FormProps<ValueType, RequestType>) => JSX.Element
+const Form: <
+    ValueType extends FormValue,
+    RequestType extends FormValue
+>(props: FormProps<ValueType, RequestType>) => JSX.Element
     = <ValueType extends FormValue, RequestType extends FormValue>(props: FormProps<ValueType, RequestType>) => {
 
         const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
@@ -60,8 +63,10 @@ const Form: <ValueType extends FormValue, RequestType extends FormValue>(props:
             = useState<RefObject<HTMLFormElement>>(createRef<HTMLFormElement>())
 
         // This will hold all the inputs
-        const [inputs, setInputs]: [Array<FormInputModel>, Dispatch<SetStateAction<Array<FormInputModel>>>] = useState<Array<FormInputModel>>(formGetInputFields(formDef.groups || []))
-        const [isFormInvalid, setFormInvalid]: [boolean, Dispatch<boolean>] = useState<boolean>(inputs.filter(item => !!item.error).length > 0)
+        const [inputs, setInputs]: [Array<FormInputModel>, Dispatch<SetStateAction<Array<FormInputModel>>>]
+            = useState<Array<FormInputModel>>(formGetInputFields(formDef.groups || []))
+        const [isFormInvalid, setFormInvalid]: [boolean, Dispatch<boolean>]
+            = useState<boolean>(inputs.filter(item => !!item.error).length > 0)
 
         useEffect(() => {
             if (!formRef.current?.elements) {
@@ -129,7 +134,14 @@ const Form: <ValueType extends FormValue, RequestType extends FormValue>(props:
 
         async function onSubmitAsync(event: FormEvent<HTMLFormElement>): Promise<void> {
             const values: RequestType = props.requestGenerator(inputs)
-            formOnSubmitAsync<RequestType>(props.action || 'submit', event, formDef, values, props.save, props.onSuccess)
+            formOnSubmitAsync<RequestType>(
+                props.action || 'submit',
+                event,
+                formDef,
+                values,
+                props.save,
+                props.onSuccess,
+            )
                 .then(() => {
                     if (!props.resetFormAfterSave) {
                         setFormKey(Date.now())
@@ -149,22 +161,17 @@ const Form: <ValueType extends FormValue, RequestType extends FormValue>(props:
 
         formInitializeValues(inputs, props.formValues)
 
-        const setOnClickOnReset: (button: FormButton) => FormButton = button => {
+        const setOnClickOnReset: (button: FormButton) => FormButton = button => (
             // if this is a reset button, set its onclick to reset
-            if (!!button.isReset) {
-                button = {
-                    ...button,
-                    onClick: onReset,
-                }
-            }
-
-            return button
-        }
+            !button.isReset ? button : { ...button, onClick: onReset }
+        )
 
-        const createButtonGroup: (groups: ReadonlyArray<FormButton>, isPrimaryGroup: boolean) => Array<JSX.Element> = (groups, isPrimaryGroup) => groups.map((button, index) => {
-            button = setOnClickOnReset(button)
+        const createButtonGroup: (groups: ReadonlyArray<FormButton>, isPrimaryGroup: boolean) => Array<JSX.Element>
+        = (groups, isPrimaryGroup) => groups.map((button, index) => {
+            Object.assign(button, setOnClickOnReset(button))
 
-            const disabled: boolean = (button.isSubmit && isFormInvalid) || !!props.shouldDisableButton?.(isPrimaryGroup, index)
+            const disabled: boolean = (button.isSubmit && isFormInvalid)
+                || !!props.shouldDisableButton?.(isPrimaryGroup, index)
 
             return (
                 <Button

src-ts/lib/form/form-functions/form.functions.ts

@@ -9,7 +9,10 @@ import { FormValue } from './form-value.model'
 
 export type ValidationEvent = 'blur' | 'change' | 'submit' | 'initial'
 
-export function getInputElement(formElements: HTMLFormControlsCollection, fieldName: string): HTMLInputElement | undefined {
+export function getInputElement(
+    formElements: HTMLFormControlsCollection,
+    fieldName: string,
+): HTMLInputElement | undefined {
     return formElements.namedItem(fieldName) as HTMLInputElement
 }
 
@@ -79,14 +82,20 @@ export function onReset<T extends FormValue>(inputs: ReadonlyArray<FormInputMode
     })
 }
 
+type CustomFormValidator = (
+    formElements: HTMLFormControlsCollection,
+    event: ValidationEvent,
+    inputs: ReadonlyArray<FormInputModel>,
+) => boolean
+
 export async function onSubmitAsync<T extends FormValue>(
     action: FormAction,
     event: FormEvent<HTMLFormElement>,
     formDef: FormDefinition,
     formValue: T,
     save: (value: T) => Promise<void>,
     onSuccess?: () => void,
-    customValidateForm?: (formElements: HTMLFormControlsCollection, event: ValidationEvent, inputs: ReadonlyArray<FormInputModel>) => boolean,
+    customValidateForm?: CustomFormValidator,
 ): Promise<void> {
 
     event.preventDefault()