chore(frontend): migrate to pnpm and add lint tooling

Author: gildesmarais

.devcontainer/Dockerfile

@@ -16,6 +16,10 @@ RUN apk add --no-cache \
     yaml-dev \
     tzdata
 
+RUN if ! command -v corepack >/dev/null 2>&1; then npm install -g corepack; fi \
+  && corepack enable \
+  && corepack prepare "pnpm@latest" --activate
+
 ARG USER=vscode
 ARG UID=1000
 ARG GID=1000

.devcontainer/devcontainer.json

@@ -8,11 +8,16 @@
     "vscode": {
       "extensions": [
         "rebornix.ruby",
-        "esbenp.prettier-vscode"
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint"
       ],
       "settings": {
         "editor.formatOnSave": true,
         "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.codeActionsOnSave": {
+          "source.fixAll.eslint": "explicit"
+        },
+        "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
         "prettier.configPath": "./frontend/prettier.config.js",
         "ruby.format": "rubocop",
         "ruby.lint": { "rubocop": true },

.github/workflows/ci.yml

@@ -54,15 +54,20 @@ jobs:
         with:
           bundler-cache: true
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          cache: true
+          cache_dependency_path: frontend/pnpm-lock.yaml
+          package_json_file: frontend/package.json
+
       - name: Setup Node.js for OpenAPI lint tooling
         uses: actions/setup-node@v6
         with:
           node-version-file: ".tool-versions"
-          cache: npm
-          cache-dependency-path: frontend/package-lock.json
 
       - name: Install frontend dependencies for OpenAPI client verification
-        run: npm ci
+        run: pnpm install --frozen-lockfile
         working-directory: frontend
 
       - name: Verify generated OpenAPI spec and client are up to date
@@ -79,33 +84,41 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          cache: true
+          cache_dependency_path: frontend/pnpm-lock.yaml
+          package_json_file: frontend/package.json
+
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
           node-version-file: ".tool-versions"
-          cache: npm
-          cache-dependency-path: frontend/package-lock.json
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Typecheck frontend
-        run: npm run typecheck
+        run: pnpm run typecheck
+
+      - name: Lint CSS with Stylelint
+        run: pnpm exec stylelint "**/*.css"
 
       - name: Check formatting
-        run: npm run format:check
+        run: pnpm run format:check
 
       - name: Audit dependencies
-        run: npm audit --audit-level=moderate
+        run: pnpm audit --audit-level=moderate
 
       - name: Run frontend tests
-        run: npm run test:ci
+        run: pnpm run test:ci
 
       - name: Install Playwright Chromium
-        run: npx playwright install --with-deps chromium
+        run: pnpm exec playwright install --with-deps chromium
 
       - name: Run frontend smoke test
-        run: npm run test:e2e
+        run: pnpm run test:e2e
 
   docker-build-smoke-image:
     needs:
@@ -175,19 +188,24 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v6
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          cache: true
+          cache_dependency_path: frontend/pnpm-lock.yaml
+          package_json_file: frontend/package.json
+
       - name: Setup Node.js for Docker build
         uses: actions/setup-node@v6
         with:
           node-version-file: ".tool-versions"
-          cache: npm
-          cache-dependency-path: frontend/package-lock.json
 
       - name: Install frontend dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
         working-directory: frontend
 
       - name: Build frontend static assets
-        run: npm run build
+        run: pnpm run build
         working-directory: frontend
 
       - name: Set up QEMU

Dockerfile

@@ -5,10 +5,10 @@ ARG NODE_BASE_IMAGE=node:22-alpine@sha256:8094c002d08262dba12645a3b4a15cd6cd627d
 FROM ${NODE_BASE_IMAGE} AS frontend-builder
 
 WORKDIR /app/frontend
-COPY frontend/package*.json ./
-RUN npm ci
+COPY frontend/package.json frontend/pnpm-lock.yaml ./
+RUN corepack enable && pnpm install --frozen-lockfile
 COPY frontend/ ./
-RUN npm run build
+RUN pnpm run build
 
 # Stage 2: Ruby Build
 FROM ${RUBY_BASE_IMAGE} AS builder

Makefile

@@ -18,7 +18,7 @@ setup: ## Full development setup
 	fi
 	@mkdir -p tmp/rack-cache-body tmp/rack-cache-meta
 	@echo "Setting up frontend..."
-	@cd frontend && npm install
+	@cd frontend && CI=1 pnpm install --frozen-lockfile
 	@echo "Setup complete!"
 
 dev: ## Start development server with live reload
@@ -29,26 +29,26 @@ dev-ruby: ## Start Ruby server only
 	@bin/dev-ruby
 
 dev-frontend: ## Start frontend dev server only
-	@cd frontend && npm run dev
+	@cd frontend && pnpm run dev
 
 test: ## Run all tests (Ruby + Frontend)
 	bundle exec rspec
-	@cd frontend && npm run test:ci
+	@cd frontend && pnpm run test:ci
 
 test-ruby: ## Run Ruby tests only
 	bundle exec rspec
 
 test-frontend: ## Run frontend tests only
-	@cd frontend && npm run test:ci
+	@cd frontend && pnpm run test:ci
 
 test-frontend-unit: ## Run frontend unit tests only
-	@cd frontend && npm run test:unit
+	@cd frontend && pnpm run test:unit
 
 test-frontend-contract: ## Run frontend contract tests only
-	@cd frontend && npm run test:contract
+	@cd frontend && pnpm run test:contract
 
 test-frontend-e2e: ## Run frontend Playwright smoke tests
-	@cd frontend && npm run test:e2e
+	@cd frontend && pnpm run test:e2e
 
 check-frontend: ## Run frontend typecheck, format, and test checks
 	$(MAKE) lint-js
@@ -67,11 +67,15 @@ lint-ruby: ## Run Ruby linter (RuboCop) - errors when issues found
 	bundle exec rake yard:verify_public_docs
 	@echo "Ruby linting complete!"
 
-lint-js: ## Run JavaScript/Frontend linter (Prettier) - errors when issues found
+lint-js: ## Run JavaScript/Frontend linting (TypeScript + ESLint + Stylelint + Prettier) - errors when issues found
 	@echo "Running TypeScript typecheck..."
-	@cd frontend && npm run typecheck
+	@cd frontend && pnpm run typecheck
+	@echo "Running ESLint..."
+	@cd frontend && pnpm run lint
+	@echo "Running Stylelint..."
+	@cd frontend && pnpm exec stylelint "../public/shared-ui.css" "**/*.css"
 	@echo "Running Prettier format check..."
-	@cd frontend && npm run format:check
+	@cd frontend && pnpm run format:check
 	@echo "JavaScript linting complete!"
 
 lintfix: lintfix-ruby lintfix-js ## Auto-fix all linting issues (Ruby + Frontend)
@@ -83,8 +87,10 @@ lintfix-ruby: ## Auto-fix Ruby linting issues
 	@echo "Ruby lintfix complete!"
 
 lintfix-js: ## Auto-fix JavaScript/Frontend linting issues
+	@echo "Running ESLint auto-fix..."
+	@cd frontend && pnpm run lint:fix
 	@echo "Running Prettier formatting..."
-	@cd frontend && npm run format
+	@cd frontend && pnpm run format
 	@echo "JavaScript lintfix complete!"
 
 quick-check: ## Fast local checks (Ruby lint/docs + frontend format/typecheck)
@@ -110,10 +116,10 @@ openapi-verify: ## Regenerate OpenAPI and fail if public/openapi.yaml or fronten
 	$(MAKE) openapi-client-verify
 
 openapi-client: ## Generate frontend OpenAPI client/types from public/openapi.yaml
-	@cd frontend && npm run openapi:generate
+	@cd frontend && pnpm run openapi:generate
 
 openapi-client-verify: ## Generate frontend OpenAPI client and fail if generated files are stale
-	@cd frontend && npm run openapi:verify
+	@cd frontend && pnpm run openapi:verify
 
 openapi-lint: openapi-lint-redocly openapi-lint-spectral ## Lint public/openapi.yaml with Redocly and Spectral
 
@@ -132,5 +138,5 @@ clean: ## Clean temporary files
 
 frontend-setup: ## Setup frontend dependencies
 	@echo "Setting up frontend dependencies..."
-	@cd frontend && npm install
+	@cd frontend && CI=1 pnpm install --frozen-lockfile
 	@echo "Frontend setup complete!"

bin/dev

@@ -28,7 +28,7 @@ cleanup() {
 
   # Kill frontend dev server and its children
   if [ ! -z "$FRONTEND_PID" ]; then
-    # Kill the npm process and its children
+    # Kill the frontend package-manager process and its children
     pkill -P $FRONTEND_PID 2>/dev/null || true
     kill $FRONTEND_PID 2>/dev/null || true
     wait $FRONTEND_PID 2>/dev/null || true
@@ -79,7 +79,7 @@ fi
 
 # Start frontend dev server
 cd frontend
-npm run dev &
+pnpm run dev &
 FRONTEND_PID=$!
 
 # Verify frontend server started

bin/dev-with-frontend

@@ -49,7 +49,7 @@ echo "Starting frontend dev server with API proxy..."
 cd frontend
 
 # Start frontend dev server (it will proxy API calls to Ruby server)
-npm run dev &
+pnpm run dev &
 FRONTEND_PID=$!
 
 # Wait a moment for the frontend server to start

frontend/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist/
+.astro

frontend/.prettierignore

@@ -1,5 +1,5 @@
 # Frontend package files
-package-lock.json
+pnpm-lock.yaml
 yarn.lock
 
 # Generated and transient frontend output

frontend/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import eslintPluginUnicorn from 'eslint-plugin-unicorn';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  {
+    ignores: ['.astro/**', 'dist/**', 'node_modules/**', 'src/api/generated/**', 'test-results/**'],
+  },
+  {
+    files: ['src/**/*.{js,jsx,ts,tsx}', 'e2e/**/*.ts', './*.{js,ts}'],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      eslintPluginUnicorn.configs.recommended,
+    ],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.vitest,
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'unicorn/filename-case': 'off',
+      'unicorn/better-regex': 'warn',
+    },
+  }
+);