Upgrading configuration to support ESLint 9 (#27)

* upgrading configuration to support ESLint 9

* adjust configuration

* add prettier and fix lint issues

* add pre-commit hook

* update tailwind config to new plugin major version

* add rules from old config

* add unused-imports plugin

* enable case sensitive import sorting

---------

Co-authored-by: Lukas Weiss <lukas.weiss@aboutbits.it>

Author: alexlanz

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.ts-next.json

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+set -e
+set -o pipefail
+
+npm run lint

.eslintrc.ts-react.json

@@ -0,0 +1,26 @@
+import { defineConfig } from 'eslint/config'
+import formatjsPlugin from 'eslint-plugin-formatjs'
+import jsonc from 'eslint-plugin-jsonc'
+
+export default defineConfig([
+  {
+    files: ['**/*.{js,cjs,mjs,jsx,ts,tsx}'],
+    plugins: {
+      formatjs: formatjsPlugin,
+    },
+    rules: {
+      'formatjs/enforce-default-message': ['error', 'literal'],
+      'formatjs/enforce-placeholders': 'error',
+      'formatjs/no-multiple-whitespaces': 'error',
+      'formatjs/enforce-id': 'error',
+    },
+  },
+  {
+    files: ['**/translations/*.json'],
+    language: 'json/json',
+    plugins: { jsonc },
+    rules: {
+      'jsonc/sort-keys': 'error',
+    },
+  },
+])

.eslintrc.ts.json

@@ -0,0 +1,9 @@
+import { defineConfig } from 'eslint/config'
+import jestPlugin from 'eslint-plugin-jest'
+
+export default defineConfig([
+  {
+    files: ['**/*.{js,cjs,mjs,jsx,ts,tsx}'],
+    ...jestPlugin.configs['flat/recommended'],
+  },
+])

.githooks/pre-commit

@@ -0,0 +1,39 @@
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+import { FlatCompat } from '@eslint/eslintrc'
+import { defineConfig } from 'eslint/config'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+})
+
+export default defineConfig([
+  // coreWebVitals includes Next recommended rules
+  ...compat.extends('plugin:@next/next/core-web-vitals'),
+  {
+    files: ['**/*.{js,cjs,mjs,jsx,ts,tsx}'],
+    rules: {
+      '@next/next/no-img-element': 'off',
+    },
+  },
+])
+
+// Alternative/modern approach:
+// Working, but has some issues with the Next lint command (running with `next build`).
+// This approach can probably be used with Next 16, as they removed Next lint completely.
+//
+// import next from '@next/eslint-plugin-next'
+// import { defineConfig } from 'eslint/config'
+// export default defineConfig([
+//   {
+//     files: ['**/*.{js,cjs,mjs,jsx,ts,tsx}'],
+//     // coreWebVitals includes Next recommended rules
+//     ...next.flatConfig.coreWebVitals,
+//     rules: {
+//       '@next/next/no-img-element': 'off',
+//     },
+//   },
+// ])

configs/formatjs.js

@@ -0,0 +1,44 @@
+import { defineConfig } from 'eslint/config'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
+import reactPlugin from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+
+export default defineConfig([
+  {
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    files: ['**/*.{js,cjs,mjs,jsx,ts,tsx}'],
+    extends: [
+      reactPlugin.configs.flat.recommended,
+      reactPlugin.configs.flat['jsx-runtime'],
+      reactHooks.configs['recommended-latest'],
+      jsxA11y.flatConfigs.strict,
+    ],
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'react/jsx-curly-brace-presence': [
+        'error',
+        { props: 'never', children: 'never', propElementValues: 'always' },
+      ],
+      'react/self-closing-comp': [
+        'error',
+        {
+          component: true,
+          html: true,
+        },
+      ],
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+      'jsx-a11y/no-autofocus': 'off',
+    },
+  },
+])

configs/jest.js

@@ -0,0 +1,27 @@
+import { defineConfig } from 'eslint/config'
+import * as mdx from 'eslint-plugin-mdx'
+import { configs as storybookConfigs } from 'eslint-plugin-storybook'
+import { configs as tseslintConfigs } from 'typescript-eslint'
+
+export default defineConfig([
+  {
+    files: ['**/*.{js,cjs,mjs,jsx,ts,tsx}'],
+    extends: [storybookConfigs['flat/recommended']],
+  },
+  {
+    ignores: ['!.storybook'],
+  },
+  {
+    ...mdx.flat,
+    processor: mdx.createRemarkProcessor({
+      lintCodeBlocks: false, // Disable linting of code blocks as it shows irrelevant errors.
+    }),
+  },
+  {
+    ...mdx.flatCodeBlocks,
+    extends: [tseslintConfigs.disableTypeChecked],
+    rules: {
+      'import/no-unresolved': 'off',
+    },
+  },
+])