chore(eslint): upgrade to typescript-eslint v8, upgrade all eslint packages (#7082)

packages/eslint-config/index.mjs

@@ -1,6 +1,6 @@
 import js from '@eslint/js'
 import tseslint from 'typescript-eslint'
-import perfectionistNatural from 'eslint-plugin-perfectionist/configs/recommended-natural'
+import perfectionist from 'eslint-plugin-perfectionist'
 import { configs as regexpPluginConfigs } from 'eslint-plugin-regexp'
 import eslintConfigPrettier from 'eslint-config-prettier'
 import payloadPlugin from '@payloadcms/eslint-plugin'
@@ -30,10 +30,10 @@ const baseRules = {
     {
       type: 'natural',
       order: 'asc',
-      'partition-by-comment': true,
-      'partition-by-new-line': true,
+      partitionByComment: true,
+      partitionByNewLine: true,
       groups: ['top', 'unknown'],
-      'custom-groups': {
+      customGroups: {
         top: ['_id', 'id', 'name', 'slug', 'type'],
       },
     },
@@ -41,13 +41,13 @@ const baseRules = {
   /*'perfectionist/sort-object-types': [
     'error',
     {
-      'partition-by-new-line': true,
+      partitionByNewLine: true,
     },
   ],
   'perfectionist/sort-interfaces': [
     'error',
     {
-      'partition-by-new-line': true,
+      partitionByNewLine': true,
     },
   ],*/
   'payload/no-jsx-import-statements': 'error',
@@ -62,7 +62,6 @@ const reactA11yRules = {
 
 const typescriptRules = {
   '@typescript-eslint/no-use-before-define': 'off',
-  '@typescript-eslint/ban-ts-comment': 'off',
 
   // Type-aware any rules:
   '@typescript-eslint/no-unsafe-assignment': 'off',
@@ -76,7 +75,7 @@ const typescriptRules = {
   // Type-aware any rules end
 
   // ts-expect preferred over ts-ignore. It will error if the expected error is no longer present.
-  '@typescript-eslint/prefer-ts-expect-error': 'error',
+  '@typescript-eslint/ban-ts-comment': 'warn', // Recommended over deprecated @typescript-eslint/prefer-ts-expect-error: https://github.com/typescript-eslint/typescript-eslint/issues/8333. Set to warn to ease migration.
   // By default, it errors for unused variables. This is annoying, warnings are enough.
   '@typescript-eslint/no-unused-vars': [
     'warn',
@@ -94,7 +93,17 @@ const typescriptRules = {
   '@typescript-eslint/restrict-template-expressions': 'warn',
   '@typescript-eslint/no-redundant-type-constituents': 'warn',
   '@typescript-eslint/no-unnecessary-type-constraint': 'warn',
-  '@typescript-eslint/ban-types': 'warn',
+  '@typescript-eslint/no-misused-promises': [
+    'error',
+    {
+      // See https://github.com/typescript-eslint/typescript-eslint/issues/4619 and https://github.com/typescript-eslint/typescript-eslint/pull/4623
+      // Don't want something like <button onClick={someAsyncFunction}> to error
+      checksVoidReturn: {
+        attributes: false,
+        arguments: false
+      }
+    },
+  ]
 }
 
 /** @typedef {import('eslint').Linter.FlatConfig} */
@@ -103,7 +112,7 @@ let FlatConfig
 /** @type {FlatConfig} */
 const baseExtends = deepMerge(
   js.configs.recommended,
-  perfectionistNatural,
+  perfectionist.configs['recommended-natural'],
   regexpPluginConfigs['flat/recommended'],
 )