Add ESLint flat config support (#476)

* feat: add ESLint flat config support to @topotal/eslint-config-typescript and @topotal/eslint-config-react

Co-Authored-By: [email protected] <[email protected]>

* refactor: improve flat config implementation to follow ESLint guidelines

Co-Authored-By: [email protected] <[email protected]>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>

packages/eslint-config-react/README.md

@@ -18,7 +18,9 @@ yarn add -D eslint-plugin-react eslint-plugin-react-hooks
 
 ## Usage
 
-Add `@topotal/eslunt-config-react` to `eslintrc` extends.
+### Legacy ESLint Configuration (ESLint v8 and below)
+
+Add `@topotal/eslint-config-react` to `eslintrc` extends.
 
 ```json
 {
@@ -27,3 +29,19 @@ Add `@topotal/eslunt-config-react` to `eslintrc` extends.
   ]
 }
 ```
+
+### Flat ESLint Configuration (ESLint v9 and above)
+
+In your `eslint.config.js`:
+
+```js
+const topotalReactConfig = require('@topotal/eslint-config-react/flat');
+
+// Or using the conditional exports (recommended)
+// const { flat: topotalReactConfig } = require('@topotal/eslint-config-react');
+
+module.exports = [
+  topotalReactConfig,
+  // other configs...
+];
+```

packages/eslint-config-react/flat.js

@@ -0,0 +1,33 @@
+const reactPlugin = require('eslint-plugin-react');
+const reactHooksPlugin = require('eslint-plugin-react-hooks');
+
+module.exports = {
+  files: ['**/*.{jsx,tsx}'],
+  settings: {
+    react: {
+      pragma: 'React',
+      version: 'detect'
+    }
+  },
+  plugins: {
+    'react': reactPlugin,
+    'react-hooks': reactHooksPlugin,
+  },
+  rules: {
+    'react/jsx-quotes': 0,
+    'jsx-quotes': 'error',
+    'react/self-closing-comp': ['error', {
+      'component': true,
+      'html': true
+    }],
+    'react-hooks/exhaustive-deps': ['error', {
+      'additionalHooks': '(useAsync|useAsyncFn)'
+    }],
+    'react/jsx-key': ['error'],
+    'react/jsx-newline': ['error', { 'prevent': true }],
+    'react/prop-types': 'off',
+    'react/display-name': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+  }
+};

packages/eslint-config-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topotal/eslint-config-react",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "This is a common ESlint setting for React used within Topotal",
   "homepage": "https://github.com/topotal/js-sdk#readme",
   "bugs": {
@@ -14,13 +14,25 @@
   "license": "MIT",
   "author": "SAWADA Takayoshi <[email protected]>",
   "main": "index.js",
+  "files": [
+    "index.js",
+    "flat.js"
+  ],
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.js"
+    },
+    "./flat": "./flat.js"
+  },
   "devDependencies": {
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0"
   },
   "peerDependencies": {
-    "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "4.x"
+    "eslint": ">=6.0.0",
+    "eslint-plugin-react": ">=7.0.0",
+    "eslint-plugin-react-hooks": ">=4.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/eslint-config-typescript/README.md

@@ -18,7 +18,9 @@ yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
 
 ## Usage
 
-Add `@topotal/eslunt-config-typescript` to `eslintrc` extends.
+### Legacy ESLint Configuration (ESLint v8 and below)
+
+Add `@topotal/eslint-config-typescript` to `eslintrc` extends.
 
 ```json
 {
@@ -27,3 +29,19 @@ Add `@topotal/eslunt-config-typescript` to `eslintrc` extends.
   ]
 }
 ```
+
+### Flat ESLint Configuration (ESLint v9 and above)
+
+In your `eslint.config.js`:
+
+```js
+const topotalTypescriptConfig = require('@topotal/eslint-config-typescript/flat');
+
+// Or using the conditional exports (recommended)
+// const { flat: topotalTypescriptConfig } = require('@topotal/eslint-config-typescript');
+
+module.exports = [
+  topotalTypescriptConfig,
+  // other configs...
+];
+```

packages/eslint-config-typescript/flat.js

@@ -0,0 +1,34 @@
+const typescriptEslint = require('@typescript-eslint/eslint-plugin');
+const typescriptParser = require('@typescript-eslint/parser');
+
+module.exports = {
+  files: ['**/*.{ts,tsx}'],
+  languageOptions: {
+    parser: typescriptParser,
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+  plugins: {
+    '@typescript-eslint': typescriptEslint,
+  },
+  rules: {
+    '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    // Indent setting
+    'indent': 'off',
+    '@typescript-eslint/indent': ['error', 2, {'SwitchCase': 1}],
+    // Disallow unused variables
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        'argsIgnorePattern': '^_',
+        'ignoreRestSiblings': true
+      }
+    ],
+  }
+};

packages/eslint-config-typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topotal/eslint-config-typescript",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "This is a common ESlint setting for TypeScript used within Topotal",
   "homepage": "https://github.com/topotal/js-sdk#readme",
   "bugs": {
@@ -13,13 +13,25 @@
   "license": "MIT",
   "author": "sawa-zen <[email protected]>",
   "main": "main.js",
+  "files": [
+    "main.js",
+    "flat.js"
+  ],
+  "exports": {
+    ".": {
+      "import": "./main.js",
+      "require": "./main.js"
+    },
+    "./flat": "./flat.js"
+  },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2"
   },
   "peerDependencies": {
-    "@typescript-eslint/eslint-plugin": "4.x",
-    "@typescript-eslint/parser": "4.x"
+    "@typescript-eslint/eslint-plugin": ">=4.0.0",
+    "@typescript-eslint/parser": ">=4.0.0",
+    "eslint": ">=6.0.0"
   },
   "publishConfig": {
     "access": "public"