chore: add shared ESLint and Prettier configuration

Closes #615

- Add @probo/eslint-config package with ESLint 9.x flat config
- Enhance @probo/prettier with aligned stylistic rules
- Migrate console, trust, and UI packages to shared config
- Remove duplicate ESLint dependencies from individual packages

Signed-off-by: Yash Gupta <yash3144@gmail.com>

apps/console/eslint.config.mjs

@@ -1,28 +1,6 @@
-// @ts-check
+import { browser } from "@probo/eslint-config";
 
-import js from "@eslint/js";
+export default [
-import { defineConfig } from "eslint/config";
+    { ignores: ["dist", "eslint.config.mjs", "*.config.{js,mjs,ts}"] },
-import globals from "globals";
+    ...browser(["./tsconfig.app.json", "./tsconfig.node.json"], import.meta.dirname),
-import reactHooks from "eslint-plugin-react-hooks";
+];
-import tseslint from "typescript-eslint";
-
-export default defineConfig([
-  { ignores: ["dist"] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ["**/*.{ts,tsx}"],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-    plugins: {
-      "react-hooks": reactHooks,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-    },
-  },
-]);

apps/console/package.json

@@ -40,7 +40,8 @@
     "zod": "^3.25.17"
   },
   "devDependencies": {
-    "@eslint/js": "^9.25.0",
+    "@probo/eslint-config": "1.0.0",
+    "@probo/prettier": "1.0.0",
     "@tailwindcss/vite": "^4.1.7",
     "@types/node": "^22.15.21",
     "@types/react": "^19.1.2",
@@ -50,14 +51,13 @@
     "@vitejs/plugin-react": "^4.4.1",
     "babel-plugin-relay": "^19.0.0",
     "eslint": "^9.25.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.0.0",
     "graphql": "^16.11.0",
     "prettier": "^3.5.3",
     "relay-compiler": "^19.0.0",
     "tailwindcss": "^4.1.7",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.30.1",
     "vite": "^6.4.1"
-  }
+  },
+  "prettier": "@probo/prettier"
 }

apps/trust/eslint.config.mjs

@@ -1,27 +1,6 @@
-// @ts-check
+import { browser } from "@probo/eslint-config";
 
-import js from "@eslint/js";
+export default [
-import globals from "globals";
+    { ignores: ["dist", "eslint.config.mjs", "*.config.{js,mjs,ts}"] },
-import reactHooks from "eslint-plugin-react-hooks";
+    ...browser(["./tsconfig.app.json", "./tsconfig.node.json"], import.meta.dirname),
-import tseslint from "typescript-eslint";
+];
-
-export default tseslint.config(
-  { ignores: ["dist"] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ["**/*.{ts,tsx}"],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-    plugins: {
-      "react-hooks": reactHooks,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-    },
-  }
-);

apps/trust/package.json

@@ -31,7 +31,8 @@
     "zod": "^3.25.71"
   },
   "devDependencies": {
-    "@eslint/js": "^9.25.0",
+    "@probo/eslint-config": "1.0.0",
+    "@probo/prettier": "1.0.0",
     "@tailwindcss/vite": "^4.1.7",
     "@types/node": "^22.15.21",
     "@types/react": "^19.1.2",
@@ -41,16 +42,14 @@
     "@vitejs/plugin-react": "^4.4.1",
     "babel-plugin-relay": "^19.0.0",
     "eslint": "^9.25.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^16.0.0",
     "graphql": "^16.11.0",
     "prettier": "^3.5.3",
     "relay-compiler": "^19.0.0",
     "tailwindcss": "^4.1.7",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.30.1",
     "vite": "^6.4.1"
   },
+  "prettier": "@probo/prettier",
   "volta": {
     "node": "24.4.0"
   }

package.json

@@ -17,8 +17,10 @@
     "relay": "turbo run relay"
   },
   "devDependencies": {
+    "prettier": "^3.5.3",
     "turbo": "^2.5.3"
   },
+  "prettier": "@probo/prettier",
   "graphql": {
     "schema": "./pkg/server/api/console/v1/schema.graphql"
   },
@@ -29,5 +31,8 @@
   "packageManager": "npm@11.1.0",
   "volta": {
     "node": "24.4.0"
+  },
+  "dependencies": {
+    "react-dom": "^19.2.1"
   }
 }

packages/eslint-config/eslint.config.mjs

@@ -0,0 +1,143 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
+import stylistic from "@stylistic/eslint-plugin";
+import prettier from "eslint-plugin-prettier";
+import prettierConfig from "eslint-config-prettier";
+
+/**
+ * Base ESLint configuration with strict and stylistic rules
+ */
+export function createConfig({
+    files = ["**/*.{ts,tsx}"],
+    languageOptions = {},
+    react = false,
+    project = true,
+    tsconfigRootDir,
+} = {}) {
+    const configs = [
+        { ignores: ["dist", "node_modules", "**/*.d.ts"] },
+        js.configs.recommended,
+        ...tseslint.configs.recommendedTypeChecked,
+        ...tseslint.configs.stylisticTypeChecked,
+        {
+            files,
+            languageOptions: (() => {
+                const mergedGlobals = {
+                    ...globals.node,
+                    ...globals.es2021,
+                    ...(languageOptions.globals || {}),
+                };
+                const mergedParserOptions = {
+                    project,
+                    ...(tsconfigRootDir && { tsconfigRootDir }),
+                    ...(languageOptions.parserOptions || {}),
+                };
+                const otherLanguageOptions = Object.fromEntries(
+                    Object.entries(languageOptions).filter(([key]) => key !== "globals" && key !== "parserOptions"),
+                );
+
+                return {
+                    ecmaVersion: 2020,
+                    sourceType: "module",
+                    globals: mergedGlobals,
+                    parserOptions: mergedParserOptions,
+                    ...otherLanguageOptions,
+                };
+            })(),
+            plugins: {
+                "@stylistic": stylistic,
+                prettier,
+            },
+            rules: {
+                // Prettier integration
+                "prettier/prettier": "error",
+
+                // TypeScript strict rules
+                "@typescript-eslint/no-unused-vars": [
+                    "error",
+                    {
+                        argsIgnorePattern: "^_",
+                        varsIgnorePattern: "^_",
+                    },
+                ],
+                "@typescript-eslint/explicit-function-return-type": "off",
+                "@typescript-eslint/no-explicit-any": "warn",
+                "@typescript-eslint/no-floating-promises": "error",
+                "@typescript-eslint/no-misused-promises": "error",
+                "@typescript-eslint/await-thenable": "error",
+                "@typescript-eslint/no-unnecessary-type-assertion": "error",
+
+                // Stylistic rules
+                "@stylistic/quotes": ["error", "double", { avoidEscape: true }],
+                "@stylistic/semi": ["error", "always"],
+                "@stylistic/comma-dangle": ["error", "always-multiline"],
+                "@stylistic/indent": ["error", 4, { SwitchCase: 1 }],
+                "@stylistic/object-curly-spacing": ["error", "always"],
+                "@stylistic/array-bracket-spacing": ["error", "never"],
+                "@stylistic/comma-spacing": ["error", { before: false, after: true }],
+                "@stylistic/key-spacing": ["error", { beforeColon: false, afterColon: true }],
+                "@stylistic/space-before-blocks": ["error", "always"],
+                "@stylistic/space-before-function-paren": [
+                    "error",
+                    { anonymous: "always", named: "never", asyncArrow: "always" },
+                ],
+                "@stylistic/space-infix-ops": "error",
+                "@stylistic/arrow-spacing": ["error", { before: true, after: true }],
+                "@stylistic/no-trailing-spaces": "error",
+                "@stylistic/eol-last": ["error", "always"],
+                "@stylistic/max-len": ["warn", { code: 120, ignoreUrls: true, ignoreStrings: true }],
+            },
+        },
+        prettierConfig,
+    ];
+
+    if (react) {
+        configs.push({
+            files,
+            plugins: {
+                "react-hooks": reactHooks,
+            },
+            rules: {
+                ...reactHooks.configs.recommended.rules,
+            },
+        });
+    }
+
+    return configs;
+}
+
+/**
+ * Browser/React configuration
+ */
+export function browser(project = true, tsconfigRootDir) {
+    return createConfig({
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+            },
+        },
+        react: true,
+        project,
+        tsconfigRootDir,
+    });
+}
+
+/**
+ * Node.js configuration
+ */
+export function node(project = true, tsconfigRootDir) {
+    return createConfig({
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            globals: {
+                ...globals.node,
+            },
+        },
+        react: false,
+        project,
+        tsconfigRootDir,
+    });
+}

packages/eslint-config/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "@probo/eslint-config",
+    "version": "1.0.0",
+    "private": true,
+    "description": "Shared ESLint configuration for Probo monorepo",
+    "main": "eslint.config.mjs",
+    "type": "module",
+    "scripts": {},
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "@eslint/js": "^9.25.0",
+        "@stylistic/eslint-plugin": "^4.2.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.2.1",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "globals": "^16.0.0",
+        "typescript-eslint": "^8.30.1"
+    },
+    "peerDependencies": {
+        "eslint": "^9.25.0",
+        "prettier": "^3.5.3"
+    }
+}

packages/prettier/package.json

@@ -1,12 +1,14 @@
 {
-  "name": "@probo/prettier",
+    "name": "@probo/prettier",
-  "private": true,
+    "private": true,
-  "version": "1.0.0",
+    "version": "1.0.0",
-  "description": "",
+    "description": "Shared Prettier configuration for Probo monorepo",
-  "main": "prettier.config.js",
+    "main": "prettier.config.js",
-  "scripts": {
+    "scripts": {},
-  },
+    "keywords": [],
-  "keywords": [],
+    "author": "",
-  "author": "",
+    "license": "ISC",
-  "license": "ISC"
+    "peerDependencies": {
+        "prettier": "^3.5.3"
+    }
 }

packages/prettier/prettier.config.js

@@ -1,3 +1,14 @@
 module.exports = {
   tabWidth: 2,
+  useTabs: false,
+  semi: true, // Add semicolons
+  singleQuote: false, // Use double quotes (matches @stylistic/quotes)
+  quoteProps: "as-needed",
+  trailingComma: "all", // Trailing commas (matches @stylistic/comma-dangle)
+  bracketSpacing: true, // { foo: bar } not {foo: bar}
+  arrowParens: "always", // (x) => x not x => x
+  endOfLine: "lf", // Unix line endings
+  printWidth: 120, // Max line length (matches @stylistic/max-len)
+  proseWrap: "preserve",
+  bracketSameLine: false,
 };

packages/react-lazy/package.json

@@ -9,10 +9,5 @@
     "prettier": "@probo/prettier",
     "peerDependencies": {
         "react": ">18.0.0"
-    },
-    "eslintConfig": {
-        "extends": [
-            "plugin:storybook/recommended"
-        ]
     }
 }

packages/ui/eslint.config.mjs

@@ -1,28 +1,14 @@
-// @ts-check
+import { browser } from "@probo/eslint-config";
 
-import js from "@eslint/js";
+export default [
-import { defineConfig } from "eslint/config";
-import globals from "globals";
-import reactHooks from "eslint-plugin-react-hooks";
-import tseslint from "typescript-eslint";
-
-export default defineConfig(
-    { ignores: ["dist"] },
     {
-        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        ignores: [
-        files: ["**/*.{ts,tsx}"],
+            "dist",
-        languageOptions: {
+            "eslint.config.mjs",
-            ecmaVersion: 2020,
+            "*.config.{js,mjs,ts}",
-            globals: globals.browser,
+            ".storybook/**",
-            parserOptions: {
+            "src/Atoms/Icons/**/*.tsx", // Icon files have parsing issues, likely auto-generated
-                tsconfigRootDir: import.meta.dirname,
+        ],
-            },
-        },
-        plugins: {
-            "react-hooks": reactHooks,
-        },
-        rules: {
-            ...reactHooks.configs.recommended.rules,
-        },
     },
-);
+    ...browser(["./tsconfig.app.json", "./tsconfig.node.json"], import.meta.dirname),
+];

packages/ui/package.json

@@ -37,7 +37,7 @@
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^3.2.6",
-        "@eslint/js": "^9.25.0",
+        "@probo/eslint-config": "1.0.0",
         "@probo/prettier": "1.0.0",
         "@rollup/pluginutils": "^5.1.4",
         "@storybook/addon-essentials": "^8.6.13",
@@ -54,9 +54,6 @@
         "@vitest/browser": "^3.1.3",
         "@vitest/coverage-v8": "^3.1.3",
         "eslint": "^9.25.0",
-        "eslint-plugin-react-hooks": "^5.2.0",
-        "eslint-plugin-storybook": "^0.12.0",
-        "globals": "^16.0.0",
         "playwright": "^1.55.1",
         "prettier": "^3.5.3",
         "react": "^19.1.0",
@@ -65,7 +62,6 @@
         "react-router": "^7.12.0",
         "storybook": "^8.6.15",
         "typescript": "~5.8.3",
-        "typescript-eslint": "^8.30.1",
         "vite": "^6.4.1",
         "vitest": "^3.1.3"
     },
@@ -74,11 +70,6 @@
         "react-dom": "^19.1.0",
         "react-router": "^7.12.0"
     },
-    "eslintConfig": {
-        "extends": [
-            "plugin:storybook/recommended"
-        ]
-    },
     "volta": {
         "node": "24.4.0"
     }