chore: migrate eslint to v9 (#1846)

* chore: migrate to eslint v9 * chore: update github action * fix: irregular whitespace * fix: unsafe optional chaining * fix: prefer const * fix: no case declaration * fix: no useless escape * fix: unnecessary rule * fix: no var * fix: no empty object type * fix: no wrapper object type * fix no unused expressions rule * fix: prefer rest params * fix: remove extra line
getlago · Nov 13, 2024 · f47c339 · f47c339
1 parent 2ddc84c
commit f47c339
Show file tree

Hide file tree

Showing 145 changed files with 686 additions and 579 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc b/.eslintrc
diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml
@@ -1,13 +1,14 @@
 name: Lint
 
-on:
+on: 
   pull_request:
     types: [opened, reopened, review_requested, ready_for_review, synchronize]
 
 jobs:
   run-linters:
     name: Run linters
     runs-on: ubuntu-latest
+
     steps:
       - name: Check out Git repository
         uses: actions/checkout@v4
@@ -21,15 +22,10 @@ jobs:
       - name: Install Node.js dependencies
         run: yarn
 
-      - name: Run linters
-        uses: wearerequired/lint-action@v2
-        with:
-          eslint: true
-          eslint_extensions: js,ts,tsx
-          continue_on_error: false
-          prettier: true
-          prettier_extensions: ts,tsx,svg,html
-
       - name: Run Translation Check
         run: |
-          yarn translations:inspect
+          yarn translations:inspect
+
+      - name: Run linters
+        run: |
+          yarn lint
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,5 +6,6 @@
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
     ["tw\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ]
+  ],
+  "eslint.useFlatConfig": true
 }
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,104 @@
+import { fixupPluginRules } from '@eslint/compat'
+import pluginJs from '@eslint/js'
+import pluginImport from 'eslint-plugin-import'
+import pluginJsxA11y from 'eslint-plugin-jsx-a11y'
+import pluginPrettier from 'eslint-plugin-prettier/recommended'
+import pluginReact from 'eslint-plugin-react'
+import pluginReactHooks from 'eslint-plugin-react-hooks'
+import pluginTailwind from 'eslint-plugin-tailwindcss'
+import globals from 'globals'
+import pluginTypescriptEslint from 'typescript-eslint'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {
+    ignores: [
+      '**/dist/*',
+      '.github/**/*',
+      '**/globals.d.ts',
+      '**/generated/**/*',
+      'cypress/**/*',
+      'src/lago-expression/*',
+    ],
+  },
+
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+      },
+      sourceType: 'module',
+    },
+  },
+
+  pluginJs.configs.recommended,
+  ...pluginTypescriptEslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  pluginReact.configs.flat['jsx-runtime'],
+  ...pluginTailwind.configs['flat/recommended'],
+
+  {
+    files: ['**/*.{js,mjs,cjs,ts,mts,jsx,tsx}'],
+    plugins: {
+      import: fixupPluginRules(pluginImport),
+      'jsx-a11y': pluginJsxA11y,
+      'react-hooks': pluginReactHooks,
+    },
+    languageOptions: {
+      parser: pluginTypescriptEslint.parser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      ecmaVersion: 6,
+      sourceType: 'module',
+    },
+    rules: {
+      ...pluginJsxA11y.configs.recommended.rules,
+      ...pluginReactHooks.configs.recommended.rules,
+
+      'no-alert': 'error',
+      'no-console': 'error',
+      eqeqeq: 'error',
+      'no-else-return': 'warn',
+      'no-unused-vars': 'off',
+      'newline-after-var': ['warn'], // TOFIX: Deprecated rule
+      'no-extra-boolean-cast': 'off',
+
+      // Plugins
+      'import/order': [
+        'error',
+        {
+          groups: ['builtin', 'external', 'internal', 'unknown', 'sibling', 'parent', 'index'],
+          'newlines-between': 'always',
+        },
+      ],
+      '@typescript-eslint/no-non-null-assertion': 'error',
+      // https://typescript-eslint.io/rules/no-shadow/
+      'no-shadow': 'off',
+      '@typescript-eslint/no-shadow': 'error',
+      // https://typescript-eslint.io/rules/no-unused-expressions/
+      'no-unused-expressions': 'off',
+      '@typescript-eslint/no-unused-expressions': [
+        'error',
+        {
+          allowTernary: true,
+          allowShortCircuit: true,
+          allowTaggedTemplates: true,
+        },
+      ],
+      '@typescript-eslint/no-unsafe-function-type': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'warn',
+    },
+  },
+  {
+    files: ['**/*.js'],
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+  pluginPrettier,
+]
diff --git a/package.json b/package.json
@@ -14,8 +14,8 @@
     "start": "webpack serve --config ./webpack.dev.js",
     "start:build": "yarn build && npx http-server-spa ./dist",
     "build": "webpack --config ./webpack.prod.js",
-    "lint": "prettier --check src/**/*.{ts,tsx,svg,html} --check cypress/**/*.ts && eslint \"**/*.{js,ts,tsx}\"",
-    "eslint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint": "prettier --check src/**/*.{ts,tsx,svg,html} --check cypress/**/*.ts && eslint",
+    "eslint": "eslint",
     "lint:fix": "prettier --write {src,cypress}/** && eslint --fix .",
     "codegen": "graphql-codegen --config codegen.yml -r dotenv/config",
     "codegen:watch": "graphql-codegen --config codegen.yml -r dotenv/config --watch",
@@ -34,6 +34,9 @@
     "@babel/preset-react": "7.22.15",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@eslint/compat": "^1.2.2",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.14.0",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/typescript": "4.0.9",
     "@graphql-codegen/typescript-operations": "4.2.3",
@@ -59,8 +62,6 @@
     "@types/sanitize-html": "2.9.5",
     "@types/styled-components": "5.1.34",
     "@types/webpack": "5.28.5",
-    "@typescript-eslint/eslint-plugin": "7.15.0",
-    "@typescript-eslint/parser": "7.15.0",
     "auto-changelog": "2.4.0",
     "autoprefixer": "^10.4.19",
     "babel-loader": "9.1.3",
@@ -72,17 +73,19 @@
     "cypress": "13.14.2",
     "dotenv": "16.3.1",
     "duplicate-package-checker-webpack-plugin": "3.0.0",
-    "eslint": "8.56.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-tailwindcss": "^3.17.4",
+    "eslint": "^9.14.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "file-loader": "6.2.0",
     "fork-ts-checker-webpack-plugin": "9.0.2",
     "gettext-extractor": "3.8.0",
     "glob": "^10.3.4",
+    "globals": "^15.12.0",
     "html-webpack-plugin": "5.5.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -130,6 +133,7 @@
     "recharts": "^2.9.0",
     "sanitize-html": "2.12.1",
     "styled-components": "5.3.11",
+    "typescript-eslint": "^8.14.0",
     "yarn": "1.22.19",
     "yup": "1.2.0"
   },

diff --git a/scripts/translations/inspect.js b/scripts/translations/inspect.js
@@ -28,10 +28,10 @@ async function extract(replaceMode) {
   const files = globSync(path.join(SRC_DIR, '**/*.@(ts|js|tsx|jsx)'))
   const usedKeysWithoutTranslate = files.reduce((acc, file) => {
     const content = fs.readFileSync(file, 'utf-8')
-    const usedKeys = content.match(/\'text_(.*?)\'/g)
+    const usedKeys = content.match(/'text_(.*?)'/g)
 
     if (usedKeys && usedKeys.length) {
-      acc = [...acc, ...usedKeys.map((key) => key.replace(/\'/g, ''))]
+      acc = [...acc, ...usedKeys.map((key) => key.replace(/'/g, ''))]
     }
 
     return acc

diff --git a/src/components/DebugInfoDialog.tsx b/src/components/DebugInfoDialog.tsx
@@ -10,9 +10,9 @@ import { theme } from '~/styles'
 
 const { appEnv, apiUrl, appVersion } = envGlobalVar()
 
-export interface DebugInfoDialogRef extends DialogRef {}
+export type DebugInfoDialogRef = DialogRef
 
-export const DebugInfoDialog = forwardRef<DialogRef>(({}, ref) => {
+export const DebugInfoDialog = forwardRef<DialogRef>((_props, ref) => {
   const { translate } = useInternationalization()
   const { currentUser } = useCurrentUser()
 

diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
@@ -7,7 +7,7 @@ interface ErrorBoundaryProps {
   children: ReactNode
 }
 
-export class ErrorBoundary extends Component<ErrorBoundaryProps, {}> {
+export class ErrorBoundary extends Component<ErrorBoundaryProps> {
   componentDidCatch(error: { message: string; name: string }, errorInfo: ErrorInfo) {
     withScope((scope) => {
       Object.keys(errorInfo).forEach((key) => {

diff --git a/src/components/OrganizationLogoPicker.tsx b/src/components/OrganizationLogoPicker.tsx
@@ -25,7 +25,7 @@ export const OrganizationLogoPicker = ({
   const hiddenFileInputRef = useRef<HTMLInputElement>(null)
 
   const getBase64 = (file: Blob) => {
-    var reader = new FileReader()
+    const reader = new FileReader()
 
     if (file.size > FILE_MAX_SIZE) {
       setLogoUploadError(true)

diff --git a/src/components/PremiumWarningDialog.tsx b/src/components/PremiumWarningDialog.tsx
@@ -11,9 +11,7 @@ type TProps = {
   mailtoBody?: string
 }
 
-export interface PremiumWarningDialogRef extends DialogRef {}
-
-export interface PremiumWarningDialogRef {
+export interface PremiumWarningDialogRef extends DialogRef {
   openDialog: (data?: TProps) => unknown
   closeDialog: () => unknown
 }

diff --git a/src/components/UserIdentifier.tsx b/src/components/UserIdentifier.tsx
@@ -49,7 +49,7 @@ export const UserIdentifier = () => {
         })
       }
     } else {
-      const { id, email } = data?.me
+      const { id, email } = data?.me || {}
 
       Settings.defaultZone = getTimezoneConfig(data?.organization?.timezone).name
 

diff --git a/src/components/WarningDialog.tsx b/src/components/WarningDialog.tsx
@@ -16,7 +16,7 @@ interface WarningDialogProps extends Omit<DialogProps, 'actions'> {
   disableOnContinue?: boolean
 }
 
-export interface WarningDialogRef extends DialogRef {}
+export type WarningDialogRef = DialogRef
 
 export const WarningDialog = forwardRef<DialogRef, WarningDialogProps>(
   (

diff --git a/src/components/auth/GoogleAuthButton.tsx b/src/components/auth/GoogleAuthButton.tsx
@@ -49,7 +49,7 @@ const GoogleAuthButton = ({
   mode,
 }: BasicGoogleAuthButtonProps) => {
   const { translate } = useInternationalization()
-  let [searchParams] = useSearchParams()
+  const [searchParams] = useSearchParams()
 
   const [errorCode, setErrorCode] = useState<string | undefined>(undefined)
   const lagoErrorCode = searchParams.get('lago_error_code') || ''

diff --git a/src/components/billableMetrics/BillableMetricItem.tsx b/src/components/billableMetrics/BillableMetricItem.tsx
@@ -79,7 +79,6 @@ export const BillableMetricItem = memo(
           <Popper
             PopperProps={{ placement: 'bottom-end' }}
             opener={({ isOpen }) => (
-              // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
               <PopperOpener>
                 <Tooltip
                   placement="top-end"

diff --git a/src/components/billableMetrics/utils.ts b/src/components/billableMetrics/utils.ts
@@ -39,7 +39,7 @@ export const wrappedParseExpression = (expression?: string | null): boolean => {
     parseExpression(expression)
 
     return true
-  } catch (e) {
+  } catch {
     return false
   }
 }
@@ -59,7 +59,7 @@ export const isValidJSON = (json?: unknown) => {
     }
 
     return true
-  } catch (e) {
+  } catch {
     return false
   }
 }
diff --git a/src/components/coupons/AddBillableMetricToCouponDialog.tsx b/src/components/coupons/AddBillableMetricToCouponDialog.tsx
@@ -30,11 +30,11 @@ gql`
   ${BillableMetricsForCouponsFragmentDoc}
 `
 
-export interface AddBillableMetricToCouponDialogRef extends DialogRef {}
+export type AddBillableMetricToCouponDialogRef = DialogRef
 
 interface AddBillableMetricToCouponDialogProps {
   onSubmit: Function
-  attachedBillableMetricsIds?: String[]
+  attachedBillableMetricsIds?: string[]
 }
 
 export const AddBillableMetricToCouponDialog = forwardRef<