Add ESLint to pre-commit hooks to prevent CI failures

Previously, pre-commit hooks only ran RuboCop, Prettier, and trailing
newline checks, but did NOT run ESLint. This meant ESLint errors could
slip through and only be caught in CI.

Changes:
- Created bin/lefthook/eslint-lint hook script that auto-fixes ESLint issues
- Added ESLint hook to .lefthook.yml pre-commit configuration
- Updated CLAUDE.md to document:
  - The complete list of pre-commit hooks that run
  - The monorepo structure with separate Pro package linting
  - Why CI lints both directories separately

The hook follows the same pattern as other hooks:
- Detects changed JS/TS files (staged + unstaged + untracked)
- Runs ESLint with --fix to auto-correct issues
- Re-stages fixed files automatically

This prevents the frustrating situation where local commits succeed but
CI fails on ESLint violations.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

Author: justin808

.lefthook.yml

@@ -11,6 +11,9 @@ pre-commit:
     rubocop:
       run: bin/lefthook/ruby-lint all-changed
 
+    eslint:
+      run: bin/lefthook/eslint-lint all-changed
+
     prettier:
       run: bin/lefthook/prettier-format all-changed
 

CLAUDE.md

@@ -17,6 +17,12 @@ These requirements are non-negotiable. CI will fail if not followed.
 
 Git hooks will automatically run linting on **all changed files (staged + unstaged + untracked)** before each commit - making it fast while preventing CI failures!
 
+Pre-commit hooks automatically run:
+- **RuboCop** (auto-fix Ruby code style)
+- **ESLint** (auto-fix JS/TS code style)
+- **Prettier** (auto-format all supported files)
+- **Trailing newline checks** (ensure all files end with newlines)
+
 **Note:** Git hooks are for React on Rails gem developers only, not for users who install the gem.
 
 ## Development Commands
@@ -90,13 +96,17 @@ Git hooks will automatically run linting on **all changed files (staged + unstag
 
 ## Project Architecture
 
-### Dual Package Structure
+### Monorepo Structure
 
-This project maintains both a Ruby gem and an NPM package:
+This is a monorepo containing both the open-source package and the Pro package:
 
+- **Open Source**: Root directory contains the main React on Rails gem and package
+- **Pro Package**: `react_on_rails_pro/` contains the Pro features (separate linting/formatting config)
 - **Ruby gem**: Located in `lib/`, provides Rails integration and server-side rendering
 - **NPM package**: Located in `packages/react-on-rails/src/`, provides client-side React integration
 
+**IMPORTANT**: The `react_on_rails_pro/` directory has its own Prettier/ESLint configuration. When CI runs, it lints both directories separately. The pre-commit hooks will catch issues in both directories.
+
 ### Core Components
 
 #### Ruby Side (`lib/react_on_rails/`)

bin/lefthook/eslint-lint

@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+# Lint and auto-fix JS/TS files with ESLint
+set -euo pipefail
+
+CONTEXT="${1:-staged}"
+files="$(bin/lefthook/get-changed-files "$CONTEXT" '\.(js|jsx|ts|tsx)$')"
+
+if [ -z "$files" ]; then
+  echo "✅ No JS/TS files to lint with ESLint"
+  exit 0
+fi
+
+if [ "$CONTEXT" = "all-changed" ]; then
+  echo "🔍 ESLint on all changed files:"
+else
+  echo "🔍 ESLint on $CONTEXT files:"
+fi
+printf "  %s\n" $files
+
+# Run ESLint with auto-fix
+yarn run eslint $files --report-unused-disable-directives --fix
+
+# Re-stage files if running on staged or all-changed context
+if [ "$CONTEXT" = "staged" ] || [ "$CONTEXT" = "all-changed" ]; then
+  echo $files | xargs -r git add
+  echo "✅ Re-staged fixed files"
+fi