feat: migrate to ESLint v9 flat config

.changeset/khaki-pens-learn.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/configs': minor
+---
+
+Migrate to ESLint v9 which uses flat config and makes it easier to extend/share configs.

README.md

@@ -11,10 +11,21 @@ This repository contains the default Tokens Studio configs for developing in Typ
 
 ## ESLint extend
 
+We use ESLint v9 Flat config, which is the modern way to use, extend and share ESLint.
+
+> We are currently stuck with CJS config because of react and react-hooks plugins being CJS-only.
+
 ```js
-module.exports = {
-	extends: '@tokens-studio/configs/eslint',
-};
+const studioConfig = require('@tokens-studio/configs/eslint');
+
+module.exports = [
+	...studioConfig,
+	{
+		rules: {
+			// overrides here
+		},
+	},
+];
 ```
 
 ## Prettier extend

eslint.config.cjs

@@ -0,0 +1,66 @@
+const js = require('@eslint/js');
+const hooks = require('eslint-plugin-react-hooks');
+const react = require('eslint-plugin-react');
+const tseslint = require('typescript-eslint');
+const globals = require('globals');
+
+module.exports = tseslint.config(
+	js.configs.recommended,
+	...tseslint.configs.recommended,
+	react.configs.flat.recommended,
+	react.configs.flat['jsx-runtime'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.node,
+			},
+		},
+		plugins: {
+			'react-hooks': hooks,
+		},
+		rules: {
+			...hooks.configs.recommended.rules,
+			'no-console': ['error', { allow: ['warn', 'error'] }],
+			'react/react-in-jsx-scope': 'off',
+			'react/jsx-key': 'off',
+			'@typescript-eslint/no-explicit-any': 1,
+			'import/no-anonymous-default-export': 'off',
+			'@typescript-eslint/no-unused-vars': 1,
+			'@typescript-eslint/ban-ts-comment': [
+				2,
+				{
+					'ts-check': false,
+					'ts-ignore': true,
+					'ts-nocheck': 'allow-with-description',
+					'ts-expect-error': 'allow-with-description',
+				},
+			],
+			'@typescript-eslint/no-require-imports': [
+				2,
+				{
+					allow: ['\\.cjs$'],
+				},
+			],
+			'sort-imports': 'error',
+			// Should be used with known heuristics like knowing that a property is non optional in GraphQL for example
+			'@typescript-eslint/no-non-null-assertion': 'off',
+			'react/jsx-curly-spacing': ['error', 'never'],
+
+			'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+			// Causes issues with prettier
+			indent: 'off',
+			'react/jsx-indent-props': 'off',
+		},
+		settings: {
+			react: {
+				version: 'detect',
+			},
+		},
+	},
+	{
+		files: ['*.cjs'],
+		rules: {
+			'@typescript-eslint/no-require-imports': 0,
+		},
+	},
+);