refactor(deps): upgraded to the latest eslint and migrated config

Author: jan-molak

.eslintrc.cjs

@@ -0,0 +1,106 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import stylistic from '@stylistic/eslint-plugin';
+import importPlugin from 'eslint-plugin-import';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import unusedImports from 'eslint-plugin-unused-imports';
+import unicorn from 'eslint-plugin-unicorn';
+
+export default tseslint.config(
+    // Ignore patterns
+    {
+        ignores: ['**/lib/**', 'node_modules/**', 'dist/**', 'target/**', 'test-results/**', 'playwright/.cache', 'playwright-report/**']
+    },
+
+    // Base ESLint recommended config
+    eslint.configs.recommended,
+
+    // TypeScript ESLint recommended configs
+    ...tseslint.configs.recommended,
+
+    // Unicorn recommended config
+    unicorn.configs['flat/recommended'],
+
+    // Main configuration
+    {
+        files: ['**/*.ts', '**/*.tsx'],
+        languageOptions: {
+            parser: tseslint.parser,
+            parserOptions: {
+                ecmaVersion: 6,
+                sourceType: 'module',
+                project: [
+                    './tsconfig.eslint.json',
+                ],
+            },
+        },
+        plugins: {
+            '@typescript-eslint': tseslint.plugin,
+            '@stylistic': stylistic,
+            'import': importPlugin,
+            'simple-import-sort': simpleImportSort,
+            'unused-imports': unusedImports,
+        },
+        rules: {
+            'simple-import-sort/imports': 'error',
+            'simple-import-sort/exports': 'error',
+            'sort-imports': 'off',
+            'import/order': 'off',
+            'unused-imports/no-unused-imports': 'error',
+
+            'no-multiple-empty-lines': ['warn', {
+                'max': 1,
+            }],
+
+            '@typescript-eslint/explicit-module-boundary-types': 'off',
+
+            // Formatting rules using @stylistic plugin
+            '@stylistic/indent': ['error', 4, {
+                'MemberExpression': 'off',
+                'SwitchCase': 1,
+            }],
+
+            '@stylistic/quotes': ['error', 'single', {
+                'allowTemplateLiterals': 'always',
+                'avoidEscape': true,
+            }],
+
+            '@typescript-eslint/no-explicit-any': 'off', // todo: review
+
+            '@typescript-eslint/no-unused-vars': ['warn', {
+                'args': 'none',
+                'vars': 'all',
+                'varsIgnorePattern': '^.*_$',
+            }],
+
+            'unicorn/empty-brace-spaces': 'off',
+
+            'unicorn/filename-case': [ 'error', {
+                'cases': {
+                    'kebabCase': true,      // packages
+                    'pascalCase': true,     // classes
+                    'camelCase': true,      // functions
+                }
+            }],
+
+            'unicorn/no-array-for-each': 'off',
+            'unicorn/no-array-reduce': 'off',
+            'unicorn/no-array-callback-reference': 'off',
+            'unicorn/no-static-only-class': 'off',
+
+            'unicorn/numeric-separators-style': 'off',
+
+            'unicorn/prefer-module': 'off',         // fixme disable when we can provide support for ESM
+            'unicorn/prefer-node-protocol': 'off',  // fixme requires Node 14.13 or newer, disable until we no longer have to support Node 12
+            'unicorn/prefer-spread': 'off',
+
+            'unicorn/prevent-abbreviations': [ 'error', {
+                'allowList': {
+                    'conf': true,
+                    'wdio': true,
+                }
+            }]
+        }
+    }
+);
+

eslint.config.js

@@ -33,7 +33,7 @@
     "test:execute": "playwright test -c playwright-ct.config.ts",
     "test:report": "serenity-bdd run --features ./src",
     "start": "mkdirp target/site/serenity && npx http-server -p 8080 target/site/serenity -s -o",
-    "lint": "eslint --ext ts --config .eslintrc.cjs .",
+    "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix"
   },
   "repository": {
@@ -70,6 +70,7 @@
     }
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.1",
     "@playwright/experimental-ct-react": "1.57.0",
     "@serenity-js/assertions": "^3.37.0",
     "@serenity-js/console-reporter": "^3.37.0",
@@ -79,9 +80,8 @@
     "@serenity-js/rest": "^3.37.0",
     "@serenity-js/serenity-bdd": "^3.37.0",
     "@serenity-js/web": "^3.37.0",
+    "@stylistic/eslint-plugin": "^5.6.1",
     "@types/node": "^24.10.2",
-    "@typescript-eslint/eslint-plugin": "^8.49.0",
-    "@typescript-eslint/parser": "^8.49.0",
     "cpy-cli": "^6.0.0",
     "eslint": "^9.39.1",
     "eslint-plugin-import": "^2.32.0",
@@ -95,7 +95,8 @@
     "react-dom": "^19.2.1",
     "rimraf": "^6.1.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.49.0"
   },
   "dependencies": {
     "clsx": "^2.1.1"

package-lock.json

@@ -46,10 +46,10 @@ export function Dropdown({ placeholder, options, allowMultiple, onChange }: Drop
             }
         }
 
-        window.addEventListener('click', handler);
+        globalThis.addEventListener('click', handler);
 
         return () => {
-            window.removeEventListener('click', handler);
+            globalThis.removeEventListener('click', handler);
         };
     });
 

package.json

@@ -3,6 +3,7 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
+    "playwright/index.tsx",
     "playwright-ct.config.ts"
   ],
   "exclude": [