chore: upgraded eslint, prettier, and all related plugins. fixed unused or otherwise faulty code flagged by the new lint

eslint.config.js

@@ -0,0 +1,115 @@
+const { FlatCompat } = require('@eslint/eslintrc')
+const js = require('@eslint/js')
+const path = require('path')
+const globals = require('globals')
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+})
+
+module.exports = [
+  {
+    ignores: [
+      'node_modules/',
+      'packages/frontend/src/graphql/index.tsx',
+      'packages/api/src/graphql.ts',
+      'packages/db-migration/**',
+      '**/lib/**',
+      '**/dist/**',
+    ],
+  },
+
+  {
+    settings: {
+      react: { version: 'detect' },
+    },
+  },
+
+  // Extend old configs
+  ...compat.extends(
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier'
+  ),
+
+  // Set parser and parserOptions for TS files
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parser: require('@typescript-eslint/parser'),
+      parserOptions: {
+        project: [path.resolve(__dirname, 'tsconfig.eslint.json')],
+        tsconfigRootDir: __dirname,
+        sourceType: 'module',
+      },
+      globals: {
+        ...globals.node,
+      },
+    },
+    plugins: {
+      '@typescript-eslint': require('@typescript-eslint/eslint-plugin'),
+    },
+    rules: {
+      '@typescript-eslint/ban-types': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          varsIgnorePattern: '^_',
+          argsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+      '@typescript-eslint/no-use-before-define': 'off',
+      'react/display-name': 'off',
+      'react/prop-types': 'off',
+    },
+  },
+
+  //Set globals for js files
+  {
+    files: ['**/*.js', 'scripts/**/*.js', '*.config.js', '.eslintrc.js'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'commonjs',
+      globals: {
+        ...globals.node,
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          varsIgnorePattern: '^_',
+          argsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+
+  // React plugin specific settings for JSX/TSX files
+  {
+    files: ['**/*.tsx', '**/*.jsx'],
+    plugins: {
+      react: require('eslint-plugin-react'),
+      'react-hooks': require('eslint-plugin-react-hooks'),
+    },
+  },
+
+  //backend and components package rule override
+  {
+    files: ['packages/backend/**/*.{ts,tsx,js,jsx}', 'packages/components/**/*.{ts,tsx,js,jsx}'],
+    rules: {
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      'react/prop-types': 'off',
+    },
+  },
+]

package.json

@@ -21,8 +21,8 @@
     "generate:verify": "yarn generate && git diff --exit-code",
     "invoke:cleanup": "sls invoke local -f cleanup",
     "lerna:start": "lerna run start --stream",
-    "lint": "eslint packages --ext .ts,.tsx --fix",
-    "lint:verify": "eslint packages --ext .ts,.tsx",
+    "lint": "eslint packages --fix",
+    "lint:verify": "eslint packages",
     "sls": "sls offline start",
     "sort-package-jsons": "sort-package-json package.json packages/*/package.json",
     "sort-package-jsons:verify": "yarn sort-package-jsons && git diff --exit-code package.json packages/*/package.json",
@@ -43,20 +43,21 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
+    "@eslint/eslintrc": "^3.3.1",
     "@types/node": "^22.9.0",
     "@types/webpack-env": "^1.15.3",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
+    "@typescript-eslint/eslint-plugin": "^8.39.0",
+    "@typescript-eslint/parser": "^8.39.0",
     "concurrently": "^6.2.0",
     "dotenv": "^10.0.0",
     "dynamodb-admin": "^4.1.0",
-    "eslint": "^7.27.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "husky": "^4.3.0",
     "lerna": "^7.4.2",
-    "prettier": "^2.1.2",
+    "prettier": "^3.6.2",
     "serverless": "^3.23.0",
     "serverless-dynamodb": "^0.2.47",
     "serverless-iam-roles-per-function": "^3.2.0",

packages/alexa/src/helpers/slot.ts

@@ -5,15 +5,18 @@ export const getSlotValues = <T extends string>(
   requestEnvelope: RequestEnvelope,
   ...slotNames: T[]
 ): Record<T, string | undefined> => {
-  return slotNames.reduce((acc, name) => {
-    const value = getSlotValue(requestEnvelope, name)
+  return slotNames.reduce(
+    (acc, name) => {
+      const value = getSlotValue(requestEnvelope, name)
 
-    if (value === '?') {
-      return acc
-    }
+      if (value === '?') {
+        return acc
+      }
 
-    return { ...acc, [name]: value }
-  }, {} as Record<T, string | undefined>)
+      return { ...acc, [name]: value }
+    },
+    {} as Record<T, string | undefined>
+  )
 }
 
 export const getSlotId = (slot?: Slot): string | undefined =>

packages/api/src/email.ts

@@ -43,7 +43,7 @@ export type ExportMailPayload = BaseEmailPayload & {
   attachments: [
     {
       filename: string
-    }
+    },
   ]
 }
 

packages/backend/src/services/oauth.service.ts

@@ -81,7 +81,7 @@ export const validateJWT = (jwt: string): JWTPayload | undefined => {
   try {
     const decoded = verify(jwt, LaraSecret)
     return typeof decoded !== 'object' ? JSON.parse(decoded) : (decoded as JWTPayload)
-  } catch (e) {
+  } catch (_) {
     return undefined
   }
 }

packages/backend/src/test/getEnv.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-undef
 process.env = {
   USER_TABLE: 'foo',
   COMPANY_TABLE: 'foo',

packages/components/src/navigation-button-link.tsx

@@ -10,8 +10,8 @@ export interface StyledLinkProps extends LinkProps {
 }
 
 // isLeft props needs to be removed from LinkProps
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledLink = styled(({ isLeft, ...rest }) => <Link {...rest} />)<StyledLinkProps>`
+
+const StyledLink = styled(({ isLeft: _isLeft, ...rest }) => <Link {...rest} />)<StyledLinkProps>`
   display: flex;
   align-items: center;
   justify-content: center;

packages/components/src/navigation.tsx

@@ -55,8 +55,7 @@ export interface NavItemProps extends NavLinkProps {
   isMobile: boolean
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const StyledNavItem = styled(({ isMobile, ...rest }: NavItemProps) => <NavLink {...rest} />)`
+export const StyledNavItem = styled(({ isMobile: _isMobile, ...rest }: NavItemProps) => <NavLink {...rest} />)`
   height: 60px;
   display: flex;
   align-items: center;

packages/components/src/text-time-input.tsx

@@ -9,8 +9,7 @@ interface WrapperProps extends FlexProps {
   readonly focused: boolean
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const StyledTextTimeInputWrapper = styled(({ focused, ...rest }: WrapperProps) => (
+export const StyledTextTimeInputWrapper = styled(({ focused: _focused, ...rest }: WrapperProps) => (
   <StyledEntryValueWrapper {...rest} />
 ))<WrapperProps>`
   border-bottom: 1px solid ${({ focused, theme }) => (focused ? theme.blueFont : theme.inputBorderEmpty)};

packages/components/src/unstyled-link.tsx

@@ -6,8 +6,7 @@ interface UnstyledLinkProps extends LinkProps {
   fullWidth?: boolean
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const UnstyledLink = styled(({ fullWidth, ...rest }: UnstyledLinkProps) => <Link {...rest} />)`
+export const UnstyledLink = styled(({ fullWidth: _fullWidth, ...rest }: UnstyledLinkProps) => <Link {...rest} />)`
   text-decoration: none;
   width: ${(props) => !props.fullWidth && 'fit-content'};
 `

packages/e2e/tests/entry.spec.ts

@@ -19,9 +19,9 @@ test.describe('entry', () => {
   test.beforeAll(async ({ browser }) => {
     const context = await browser.newContext()
     page = await context.newPage()
-    await page.goto(URL)
+    await page.goto(URL ?? '')
     await page.locator(`text=${envName}`).hover()
-    await page.type('input', USER_ID)
+    await page.type('input', USER_ID ?? '')
     await page.locator('text=Dev Login').click()
   })
 
@@ -53,6 +53,6 @@ test.describe('entry', () => {
     await page.locator('button > i').click()
     await page.locator('text=Entry has been deleted').waitFor()
     const work = page.locator(updatedEntryText)
-    expect(work).toBeUndefined
+    expect(work).toBeUndefined()
   })
 })

packages/frontend/scripts/get-revision.js

@@ -1,7 +1,7 @@
 module.exports = function () {
   try {
     return require('child_process').execSync('git rev-parse HEAD').toString().trim()
-  } catch (error) {
+  } catch (_) {
     return 'Revision not available'
   }
 }

packages/frontend/src/apollo-provider.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
 
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 import {
   ApolloClient,
   ApolloLink,
@@ -35,7 +33,6 @@ const ApolloProvider: React.FunctionComponent = ({ children }) => {
           fields: {
             entries: {
               merge(_, incoming) {
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-return
                 return incoming
               },
             },

packages/frontend/src/components/day-input.tsx

@@ -152,7 +152,7 @@ const DayInput: React.FunctionComponent<DayInputProps> = ({ day, heading, disabl
 
   const handleStatusChange = (newStatus: EntryStatusType) => {
     clearTimeout(statusTimeout)
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
     setStatus({ ...newStatus, icon: StatusIcons[newStatus.type] })
     setStatusVisible(true)
 

packages/frontend/src/components/entry-input.tsx

@@ -223,9 +223,13 @@ const EntryInput: React.FC<EntryDisplayFieldProps> = ({
   }
 
   const toggleContextMenu = () => {
-    setShowContextMenu && showContextMenu != entry.id
-      ? setShowContextMenu(entry.id)
-      : setShowContextMenu && setShowContextMenu('')
+    if (setShowContextMenu) {
+      if (showContextMenu !== entry.id) {
+        setShowContextMenu(entry.id)
+      } else {
+        setShowContextMenu('')
+      }
+    }
   }
 
   const onDragEnter = React.useCallback(() => {