feat: upgrade ESLint to v9 (WIP)

.lintstagedrc.json

@@ -1,7 +1,6 @@
 {
   "composer.json": "composer validate",
   "package.json": "npmPkgJsonLint --allowEmptyTargets",
-  "*.md": ["markdownlint", "prettier --check"],
-  "*.{js,json,jsx,mdx,ts,tsx}": ["eslint --no-error-on-unmatched-pattern", "prettier --check"],
+  "*.{md,js,json,jsx,mdx,ts,tsx}": ["eslint --no-error-on-unmatched-pattern", "prettier --check"],
   "*.{css,scss}": ["stylelint --allow-empty-input", "prettier --check"]
 }

CONTRIBUTING.md

@@ -140,6 +140,8 @@ You can use any editor you like, but if you use [Visual Studio Code](https://cod
 
 To enable correct validation and to fix lint/style errors on save, add this to your VSCode `settings.json`:
 
+<!-- eslint-disable -->
+
 ```json
   "css.validate": false,
   "scss.validate": false,
@@ -150,9 +152,11 @@ To enable correct validation and to fix lint/style errors on save, add this to y
     "source.fixAll.markdownlint": true
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": true
 ```
 
+<!-- eslint-enable -->
+
 </details>
 
 ### Run storybook
@@ -196,7 +200,7 @@ The copyright holder for all files created by people working for the City of Ams
 If you use code from other EUPL-1.2 or higher licensed files that have a copyright notice, don’t forget to add this copyright notice as well.
 So, for a file with code written by someone working for the City of Amsterdam in 2023, but also containing code from another EUPL-1.2 or higher licensed file written by John Doe in 2021, the header would look like this:
 
-```javascript
+```js
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2021 John Doe
@@ -208,7 +212,7 @@ All documentation files should also start with a license header.
 We use the Creative Commons Zero (CC0) license for this.
 The license header looks like this:
 
-```md
+```html
 <!-- @license CC0-1.0 -->
 ```
 

documentation/storybook.md

@@ -74,7 +74,7 @@ For example, when the child is a simple string (like in the default Button compo
 
 To do this, you can override the default like so:
 
-```js
+```txt
 argTypes: {
   children: {
     table: { disable: false },

eslint.config.mjs

@@ -0,0 +1,107 @@
+import _import from 'eslint-plugin-import'
+import { fileURLToPath } from 'node:url'
+import { fixupPluginRules } from '@eslint/compat'
+import { FlatCompat } from '@eslint/eslintrc'
+import eslint from '@eslint/js'
+import globals from 'globals'
+import jest from 'eslint-plugin-jest'
+import json from '@eslint/json'
+import markdown from '@eslint/markdown'
+import mdx from 'eslint-plugin-mdx'
+import path from 'node:path'
+import react from 'eslint-plugin-react'
+import tseslint from 'typescript-eslint'
+import tsParser from '@typescript-eslint/parser'
+import tsPlugin from '@typescript-eslint/eslint-plugin'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: eslint.configs.recommended,
+  allConfig: eslint.configs.all,
+})
+
+export default tseslint.config(
+  // Global
+  {
+    ignores: [
+      '**/node_modules/',
+      '**/vendor/',
+      '**/build/',
+      '**/coverage/',
+      '**/dist/',
+      '**/tmp/',
+      'proprietary/react-icons',
+    ],
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.es6, ...globals.jest },
+    },
+  },
+  ...compat.extends('eslint-config-prettier'),
+
+  // JSON
+  {
+    files: ['**/*.json'],
+    plugins: { json },
+    language: 'json/json',
+    ...json.configs.recommended,
+  },
+
+  // Markdown
+  {
+    plugins: { markdown },
+  },
+  {
+    files: ['**/*.md'],
+    ignores: ['dist/**/*.md', 'CHANGELOG.md'],
+    processor: 'markdown/markdown',
+    rules: {
+      ...markdown.configs.recommended.rules,
+      'markdown/line-length': 'off',
+      'markdown/no-inline-html': 'off',
+    },
+  },
+
+  // MDX
+  {
+    ...mdx.flat,
+    files: ['**/*.mdx'],
+    processor: mdx.createRemarkProcessor({
+      lintCodeBlocks: true,
+    }),
+  },
+  ...compat.extends('plugin:mdx/overrides').map((config) => ({
+    ...config,
+    ...mdx.flatCodeBlocks,
+    rules: {
+      ...mdx.flatCodeBlocks.rules,
+      'react/jsx-no-undef': 'off',
+    },
+  })),
+
+  // JavaScript, TypeScript & React
+  ...compat.extends('plugin:react/recommended', './.eslintrc.ts.json', './.eslintrc.react.json').map(() => ({
+    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+      import: fixupPluginRules(_import),
+      jest,
+      react,
+    },
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+        },
+      },
+      react: { version: '18' },
+    },
+  })),
+)

package.json

@@ -27,21 +27,27 @@
     "./storybook"
   ],
   "devDependencies": {
+    "@eslint/compat": "1.2.3",
+    "@eslint/eslintrc": "3.1.0",
+    "@eslint/js": "9.14.0",
+    "@eslint/json": "0.8.0",
+    "@eslint/markdown": "6.2.1",
     "@types/node": "22.10.1",
+    "@typescript-eslint/parser": "8.16.0",
     "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
     "conventional-changelog-conventionalcommits": "8.0.0",
-    "eslint": "8.57.1",
+    "eslint": "9.14.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jest": "28.9.0",
-    "eslint-plugin-json": "3.1.0",
+    "eslint-plugin-json": "4.0.1",
+    "eslint-plugin-markdown": "5.1.0",
     "eslint-plugin-mdx": "3.1.5",
     "eslint-plugin-react": "7.37.2",
+    "globals": "15.12.0",
     "html-validate": "8.27.0",
     "husky": "9.1.7",
     "lint-staged": "15.2.10",
-    "markdownlint-cli": "0.43.0",
     "npm-check-updates": "17.1.11",
     "npm-package-json-lint": "8.0.0",
     "npm-run-all": "4.1.5",
@@ -54,21 +60,20 @@
     "stylelint-order": "6.0.4",
     "stylelint-use-logical": "2.1.2",
     "typescript": "5.7.2",
+    "typescript-eslint": "8.16.0",
     "wait-on": "8.0.1"
   },
   "scripts": {
     "build": "pnpm -r build",
     "clean": "pnpm -r clean",
     "lint": "npm-run-all --continue-on-error lint:** lint-workspaces",
     "lint:css": "stylelint --allow-empty-input '**/*.{css,scss}'",
-    "lint:js": "eslint . --ext .js,.json,.jsx,.mdx,.ts,.tsx --report-unused-disable-directives",
-    "lint:md": "markdownlint **/*.md --ignore node_modules",
+    "lint:js": "eslint . --report-unused-disable-directives",
     "lint:package-json": "npmPkgJsonLint **/package.json",
     "lint:package-lock": "pnpm ls --recursive",
     "lint-fix": "npm-run-all --continue-on-error lint-fix:** prettier",
     "lint-fix:css": "stylelint --fix '**/*.{css,scss}'",
-    "lint-fix:js": "eslint . --ext .js,.json,.jsx,.mdx,.ts,.tsx --fix --report-unused-disable-directives",
-    "lint-fix:md": "markdownlint --fix **/*.md",
+    "lint-fix:js": "eslint . --fix --report-unused-disable-directives",
     "lint-workspaces": "pnpm -r --no-bail lint",
     "plop": "plop",
     "prepare": "husky",

packages/css/README.md

@@ -35,7 +35,7 @@ Other communities only need to overwrite design tokens to use our components wit
 Import the main stylesheet and use the class names in your markup.
 
 <!-- prettier-ignore -->
-```ts
+```jsx
 import "@amsterdam/design-system-assets/font/index.css"
 import "@amsterdam/design-system-css/dist/index.css"
 import "@amsterdam/design-system-tokens/dist/index.css"