chore(eslint-config): upgrade config to use ESLint v9 & FlatConfig

.changeset/gold-chairs-jog.md

@@ -0,0 +1,30 @@
+---
+"@vue-storefront/eslint-config": major
+---
+
+**[BREAKING]**: The ``@vue-storefront/eslint-config` is migrated to support ESLint v9 and FlatConfig. Please upgrade following way:
+
+**Step 1: Update Dependencies**
+
+First, update your project dependencies to use the latest versions of ESLint and Prettier.
+
+```bash
+yarn add -D eslint@^9 prettier@^3 @vue-storefront/eslint-config@^4
+```
+
+**Step 2: Update ESLint Configuration**
+
+Replace your existing ESLint configuration with the new configuration format. Below is a basic example from the `README.md`:
+
+```js
+import { ecma, typescript, style, concat } from "@vue-storefront/eslint-config";
+
+export default concat(
+  ecma(),
+  typescript(),
+  style(),
+  // Here it's a place for you custom configuration
+);
+```
+
+Read more about FlatConfig in [ESLint docs](https://eslint.org/docs/latest/use/configure/).

engineering-toolkit/eslint-config/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": false,
+  "printWidth": 120
+}

engineering-toolkit/eslint-config/README.MD

@@ -1,95 +1,241 @@
 # @vue-storefront/eslint-config
 
-> Common eslint configuration used in alokai projects
+> Common ESLint configuration used in Alokai projects. These configurations are compatible with ESLint 9.
 
 ## Usage
 
-#### Install
+### Install
 
 ```bash
 yarn add -D eslint prettier @vue-storefront/eslint-config
 ```
 
-#### Config `.eslintrc`
+### Building Blocks
 
-```json
-{
-  "extends": "@vue-storefront/eslint-config"
+This ESLint configuration is composed of several building blocks, each tailored for specific use cases:
+
+- `ecma`: For ECMAScript projects.
+- `typescript`: For TypeScript projects.
+- `style`: For Prettier and Perfectionist plugins.
+- `nextjs`: For Next.js projects.
+- `playwright`: For Playwright projects.
+- `architecture`: For enforcing architectural rules.
+
+### Options
+
+All options are optional. You don't have to set these options if you are okay with the default configuration.
+
+#### `ecma`
+
+- `files` (default: `"**/*.{mjs,cjs,js,jsx}"`): The glob pattern for files to lint.
+- `isStrict` (default: `true`): Enables extra rules for stricter checking.
+- `withImport` (default: `true`): Enables `eslint-plugin-import`.
+
+
+#### `typescript`
+
+- `files` (default: `"**/*.{ts,tsx,mts,cts,mtsx,ctsx}"`): The glob pattern for files to lint.
+- `isStrict` (default: `true`): Enables extra rules for stricter checking.
+- `withImport` (default: `true`): Enables `eslint-plugin-import`.
+
+### `style`
+
+- `files` (default: `"**/*.{mjs,cjs,js,jsx,ts,tsx,mts,cts,mtsx,ctsx}"`): The glob pattern for files to lint.
+
+### `nextjs`
+
+- `files` (default: `"**/*.{mjs,cjs,js,jsx,ts,tsx,mts,cts,mtsx,ctsx}"`): The glob pattern for files to lint.
+Here you can pass the general file glob pattern for all directories with Next.js/React code. But for better results please pass the glob for the components folders and hooks. Those two are passed to the special rules just for them.
+
+```ts
+files: {
+  general: "**/*.{js,jsx,ts,tsx}",
+  components: "src/components/**/*.{js,jsx,ts,tsx}",
+  hooks: "src/hooks/**/*.{js,jsx,ts,tsx}"
 }
 ```
 
-### Without Prettier `.eslintrc`
+- `isStrict` (default: `true`): Enables extra rules for stricter checking.
 
-If you do not want to use `prettier`, you can easily compose your own config:
+### `playwright`
 
-```json
-{
-  "extends": [
-    "@vue-storefront/eslint-config/ecma",
-    "@vue-storefront/eslint-config/typescript",
-    "@vue-storefront/eslint-config/json"
-  ]
-}
+- `files` (default: `"**/*.test.ts"`): The glob pattern for files to lint.
+
+### `architecture`
+
+- `files` (default: `"**/*.{mjs,cjs,js,jsx,ts,tsx,mts,cts,mtsx,ctsx}"`): The glob pattern for files to lint.
+- `maxComplexity` (default: `6`): The maximum cyclomatic complexity allowed in a program.
+- `maxDepth` (default: `4`): The maximum depth that blocks can be nested.
+- `maxStatementsPerLine` (default: `1`): The maximum number of statements allowed per line.
+- `maxLines` (default: `300`): The maximum number of lines per file.
+- `maxLinesPerFunction` (default: `60`): The maximum number of lines of code in a function.
+- `maxStatements` (default: `10`): The maximum number of statements allowed in function blocks.
+- `maxNestedCallbacks` (default: `5`): The maximum depth that callbacks can be nested.
+- `maxParams` (default: `3`): The maximum number of parameters in function definitions.
+
+
+## Example configurations
+
+### Config `eslint.config.js`
+
+```javascript
+import { ecma, typescript, style } from "@vue-storefront/eslint-config";
+
+export default [
+  ecma(),
+  typescript(),
+  style()
+];
 ```
 
-### Usage with React `.eslintrc`
+### Usage with Next.js `eslint.config.js`
 
-Vue Storefront `React` specific linting rules.
+Vue Storefront `Next.js` specific linting rules.
 
-```json
-{
-  "extends": [
-    "@vue-storefront/eslint-config",
-    "@vue-storefront/eslint-config/react"
-  ]
-}
+```javascript
+import { ecma, nextjs } from "@vue-storefront/eslint-config";
+
+export default [
+  ecma(),
+  nextjs({
+    files: {
+      general: "**/*.{js,jsx,ts,tsx}",
+      components: "src/components/**/*.{js,jsx,ts,tsx}",
+      hooks: "src/hooks/**/*.{js,jsx,ts,tsx}"
+    },
+    isStrict: true
+  })
+];
 ```
 
-### Usage with Vue `.eslintrc`
+### Usage with Nuxt 3
+
+For projects using Nuxt 3, we recommend using the Nuxt ESLint module and adding styling and architecture configurations to it.
+
+Here is a basic config using the ESLint Nuxt module:
+
+```javascript
+import withNuxt from './.nuxt/eslint.config.mjs';
+import { ecma, typescript, style, architecture } from "@vue-storefront/eslint-config";
+
+export default withNuxt(
+  ecma(),
+  typescript(),
+  style(),
+  architecture({
+    maxComplexity: 10,
+    maxDepth: 5,
+    maxStatementsPerLine: 1,
+    maxLines: 500,
+    maxLinesPerFunction: 100,
+    maxStatements: 15,
+    maxNestedCallbacks: 3,
+    maxParams: 4
+  })
+);
+```
 
-Vue Storefront `Vue` specific linting rules.
+### Usage with Node.js `eslint.config.js`
 
-```json
-{
-  "extends": [
-    "@vue-storefront/eslint-config",
-    "@vue-storefront/eslint-config/vue"
-  ]
-}
+Vue Storefront `Node.js` specific linting rules.
+
+```javascript
+import { ecma } from "@vue-storefront/eslint-config";
+
+export default [
+  ecma()
+];
 ```
 
-### Usage with Vue3 `.eslintrc`
+### Usage with Playwright `eslint.config.js`
 
-Vue Storefront `Vue3` specific linting rules.
+Vue Storefront `Playwright` specific linting rules.
 
-```json
-{
-  "extends": [
-    "@vue-storefront/eslint-config",
-    "@vue-storefront/eslint-config/vue3"
-  ]
-}
+```javascript
+import { ecma, playwright } from "@vue-storefront/eslint-config";
+
+export default [
+  ecma(),
+  playwright({
+    files: "**/*.test.ts",
+    isStrict: true
+  })
+];
 ```
 
-### Usage with NextJs `.eslintrc`
+### Usage with TypeScript `eslint.config.js`
 
-Vue Storefront `NextJs` specific linting rules.
+Vue Storefront `TypeScript` specific linting rules.
 
-```json
-{
-  "extends": [
-    "@vue-storefront/eslint-config/next"
-  ]
-}
+```javascript
+import { ecma, typescript } from "@vue-storefront/eslint-config";
+
+export default [
+  ecma(),
+  typescript()
+];
+```
+
+### Usage with Architectural Rules `eslint.config.js`
+
+Vue Storefront `Architectural` specific linting rules.
+
+```javascript
+import { ecma, architecture } from "@vue-storefront/eslint-config";
+
+export default [
+  ecma(),
+  architecture({
+    maxComplexity: 10,
+    maxDepth: 5,
+    maxStatementsPerLine: 1,
+    maxLines: 500,
+    maxLinesPerFunction: 100,
+    maxStatements: 15,
+    maxNestedCallbacks: 3,
+    maxParams: 4
+  })
+];
+```
+
+### Using `concat` function
+
+You can use the `concat` function to combine configurations from different sources.
+
+```javascript
+import { ecma, typescript, concat } from "@vue-storefront/eslint-config";
+import customConfig from "./custom-eslint-config";
+
+export default concat(
+  ecma(),
+  typescript(),
+  customConfig
+);
+```
+
+### Overriding rules in a factory
+
+You can override rules in one of our factories by passing a custom rules object.
+
+```javascript
+import { ecma, typescript } from "@vue-storefront/eslint-config";
+
+export default [
+  ecma(),
+  typescript({}, {
+    name: 'custom-config',
+    files: ['**/*.ts'],
+    rules: {
+      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }]
+    }
+  })
+];
 ```
 
 ## Used rulesets & plugins
 
 - [unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn)
 - [no-secrets](https://github.com/nickdeis/eslint-plugin-no-secrets)
 - [promise](https://github.com/eslint-community/eslint-plugin-promise)
-- [sonarjs](https://github.com/SonarSource/eslint-plugin-sonarjs)
-- [@microsoft/sdl](https://github.com/microsoft/eslint-plugin-sdl)
 - [unused-imports](https://www.npmjs.com/package/eslint-plugin-unused-imports)
 - [prettier](https://github.com/prettier/eslint-plugin-prettier)
-

engineering-toolkit/eslint-config/eslint.config.js

@@ -0,0 +1,5 @@
+import { concat } from "eslint-flat-config-utils";
+
+import { ecma, style } from "./src/index.js";
+
+export default concat(ecma(), style());