cardosofelipe/pragma-stack
Template
1
0
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

chore(frontend): migrate from npm to Bun for dependency management and scripts

Browse Source 
- Updated README to replace npm commands with Bun equivalents.
- Added `bun.lock` file to track Bun-managed dependencies.
This commit is contained in:
Felipe Cardoso
2026-03-01 18:00:43 +01:00
parent 0760a8284d
commit ff7a67cb58
20 changed files with 2811 additions and 19161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/README.md vendored
View File

@@ -41,7 +41,7 @@ To enable CI/CD workflows:
- Runs on: Push to main/develop, PRs affecting frontend code - Runs on: Push to main/develop, PRs affecting frontend code
- Tests: Frontend unit tests (Jest) - Tests: Frontend unit tests (Jest)
- Coverage: Uploads to Codecov - Coverage: Uploads to Codecov
- Fast: Uses npm cache - Fast: Uses bun cache
### `e2e-tests.yml` ### `e2e-tests.yml`
- Runs on: All pushes and PRs - Runs on: All pushes and PRs

22
AGENTS.md
View File

@@ -13,10 +13,10 @@ uv run uvicorn app.main:app --reload # Start dev server
# Frontend (Node.js) # Frontend (Node.js)
cd frontend cd frontend
npm install # Install dependencies bun install # Install dependencies
npm run dev # Start dev server bun run dev # Start dev server
npm run generate:api # Generate API client from OpenAPI bun run generate:api # Generate API client from OpenAPI
npm run test:e2e # Run E2E tests bun run test:e2e # Run E2E tests
``` ```
**Access points:** **Access points:**
@@ -121,7 +121,7 @@ OAUTH_ISSUER=https://api.yourdomain.com # JWT issuer URL (must be HTTPS in
### Frontend State Management ### Frontend State Management
- **Zustand stores**: Lightweight state management - **Zustand stores**: Lightweight state management
- **TanStack Query**: API data fetching/caching - **TanStack Query**: API data fetching/caching
- **Auto-generated client**: From OpenAPI spec via `npm run generate:api` - **Auto-generated client**: From OpenAPI spec via `bun run generate:api`
- **Dependency Injection**: ALWAYS use `useAuth()` from `AuthContext`, NEVER import `useAuthStore` directly - **Dependency Injection**: ALWAYS use `useAuth()` from `AuthContext`, NEVER import `useAuthStore` directly
### Internationalization (i18n) ### Internationalization (i18n)
@@ -165,14 +165,14 @@ Permission dependencies in `api/dependencies/permissions.py`:
**Frontend Unit Tests (Jest):** **Frontend Unit Tests (Jest):**
- 97% coverage - 97% coverage
- Component, hook, and utility testing - Component, hook, and utility testing
- Run: `npm test` - Run: `bun test`
- Coverage: `npm run test:coverage` - Coverage: `bun run test:coverage`
**Frontend E2E Tests (Playwright):** **Frontend E2E Tests (Playwright):**
- 56 passing, 1 skipped (zero flaky tests) - 56 passing, 1 skipped (zero flaky tests)
- Complete user flows (auth, navigation, settings) - Complete user flows (auth, navigation, settings)
- Run: `npm run test:e2e` - Run: `bun run test:e2e`
- UI mode: `npm run test:e2e:ui` - UI mode: `bun run test:e2e:ui`
### Development Tooling ### Development Tooling
@@ -226,7 +226,7 @@ NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1
3. **Implement route** in `backend/app/api/routes/` 3. **Implement route** in `backend/app/api/routes/`
4. **Register router** in `backend/app/api/main.py` 4. **Register router** in `backend/app/api/main.py`
5. **Write tests** in `backend/tests/api/` 5. **Write tests** in `backend/tests/api/`
6. **Generate frontend client**: `npm run generate:api` 6. **Generate frontend client**: `bun run generate:api`
### Database Migrations ### Database Migrations
@@ -243,7 +243,7 @@ python migrate.py auto "description" # Generate + apply
2. **Follow design system** (see `frontend/docs/design-system/`) 2. **Follow design system** (see `frontend/docs/design-system/`)
3. **Use dependency injection** for auth (`useAuth()` not `useAuthStore`) 3. **Use dependency injection** for auth (`useAuth()` not `useAuthStore`)
4. **Write tests** in `frontend/tests/` or `__tests__/` 4. **Write tests** in `frontend/tests/` or `__tests__/`
5. **Run type check**: `npm run type-check` 5. **Run type check**: `bun run type-check`
## Security Features ## Security Features

14
CLAUDE.md
View File

@@ -43,7 +43,7 @@ EOF
- Check current state: `python migrate.py current` - Check current state: `python migrate.py current`
**Frontend API Client Generation:** **Frontend API Client Generation:**
- Run `npm run generate:api` after backend schema changes - Run `bun run generate:api` after backend schema changes
- Client is auto-generated from OpenAPI spec - Client is auto-generated from OpenAPI spec
- Located in `frontend/src/lib/api/generated/` - Located in `frontend/src/lib/api/generated/`
- NEVER manually edit generated files - NEVER manually edit generated files
@@ -51,8 +51,8 @@ EOF
**Testing Commands:** **Testing Commands:**
- Backend unit/integration: `IS_TEST=True uv run pytest` (always prefix with `IS_TEST=True`) - Backend unit/integration: `IS_TEST=True uv run pytest` (always prefix with `IS_TEST=True`)
- Backend E2E (requires Docker): `make test-e2e` - Backend E2E (requires Docker): `make test-e2e`
- Frontend unit: `npm test` - Frontend unit: `bun test`
- Frontend E2E: `npm run test:e2e` - Frontend E2E: `bun run test:e2e`
- Use `make test` or `make test-cov` in backend for convenience - Use `make test` or `make test-cov` in backend for convenience
**Security & Quality Commands (Backend):** **Security & Quality Commands (Backend):**
@@ -174,7 +174,7 @@ with patch.object(session, 'commit', side_effect=mock_commit):
1. Start with backend schema and CRUD 1. Start with backend schema and CRUD
2. Implement API route with proper authorization 2. Implement API route with proper authorization
3. Write backend tests (aim for >90% coverage) 3. Write backend tests (aim for >90% coverage)
4. Generate frontend API client: `npm run generate:api` 4. Generate frontend API client: `bun run generate:api`
5. Implement frontend components 5. Implement frontend components
6. Write frontend unit tests 6. Write frontend unit tests
7. Add E2E tests for critical flows 7. Add E2E tests for critical flows
@@ -187,8 +187,8 @@ with patch.object(session, 'commit', side_effect=mock_commit):
**When Debugging:** **When Debugging:**
- Backend: Check `IS_TEST=True` environment variable is set - Backend: Check `IS_TEST=True` environment variable is set
- Frontend: Run `npm run type-check` first - Frontend: Run `bun run type-check` first
- E2E: Use `npm run test:e2e:debug` for step-by-step debugging - E2E: Use `bun run test:e2e:debug` for step-by-step debugging
- Check logs: Backend has detailed error logging - Check logs: Backend has detailed error logging
**Demo Mode (Frontend-Only Showcase):** **Demo Mode (Frontend-Only Showcase):**
@@ -196,7 +196,7 @@ with patch.object(session, 'commit', side_effect=mock_commit):
- Uses MSW (Mock Service Worker) to intercept API calls in browser - Uses MSW (Mock Service Worker) to intercept API calls in browser
- Zero backend required - perfect for Vercel deployments - Zero backend required - perfect for Vercel deployments
- **Fully Automated**: MSW handlers auto-generated from OpenAPI spec - **Fully Automated**: MSW handlers auto-generated from OpenAPI spec
- Run `npm run generate:api` → updates both API client AND MSW handlers - Run `bun run generate:api` → updates both API client AND MSW handlers
- No manual synchronization needed! - No manual synchronization needed!
- Demo credentials (any password ≥8 chars works): - Demo credentials (any password ≥8 chars works):
- User: `demo@example.com` / `DemoPass123` - User: `demo@example.com` / `DemoPass123`

10
CONTRIBUTING.md
View File

@@ -122,20 +122,20 @@ uvicorn app.main:app --reload
cd frontend cd frontend
# Install dependencies # Install dependencies
npm install bun install
# Setup environment # Setup environment
cp .env.local.example .env.local cp .env.local.example .env.local
# Generate API client # Generate API client
npm run generate:api bun run generate:api
# Run tests # Run tests
npm test bun test
npm run test:e2e:ui bun run test:e2e:ui
# Start dev server # Start dev server
npm run dev bun run dev
``` ```
--- ---

18
README.md
View File

@@ -166,7 +166,7 @@ Full OAuth 2.0 Authorization Server for Model Context Protocol (MCP) and third-p
```bash ```bash
cd frontend cd frontend
echo "NEXT_PUBLIC_DEMO_MODE=true" > .env.local echo "NEXT_PUBLIC_DEMO_MODE=true" > .env.local
npm run dev bun run dev
``` ```
**Demo Credentials:** **Demo Credentials:**
@@ -298,17 +298,17 @@ uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
cd frontend cd frontend
# Install dependencies # Install dependencies
npm install bun install
# Setup environment # Setup environment
cp .env.local.example .env.local cp .env.local.example .env.local
# Edit .env.local with your backend URL # Edit .env.local with your backend URL
# Generate API client # Generate API client
npm run generate:api bun run generate:api
# Start development server # Start development server
npm run dev bun run dev
``` ```
Visit http://localhost:3000 to see your app! Visit http://localhost:3000 to see your app!
@@ -390,13 +390,13 @@ open htmlcov/index.html
cd frontend cd frontend
# Run unit tests # Run unit tests
npm test bun test
# Run with coverage # Run with coverage
npm run test:coverage bun run test:coverage
# Watch mode # Watch mode
npm run test:watch bun run test:watch
``` ```
**Test types:** **Test types:**
@@ -414,10 +414,10 @@ npm run test:watch
cd frontend cd frontend
# Run E2E tests # Run E2E tests
npm run test:e2e bun run test:e2e
# Run E2E tests in UI mode (recommended for development) # Run E2E tests in UI mode (recommended for development)
npm run test:e2e:ui bun run test:e2e:ui
# Run specific test file # Run specific test file
npx playwright test auth-login.spec.ts npx playwright test auth-login.spec.ts

2
docker-compose.dev.yml
View File

@@ -62,7 +62,7 @@ services:
- NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL} - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
depends_on: depends_on:
- backend - backend
command: npm run dev command: bun run dev
networks: networks:
- app-network - app-network

2
frontend/.gitignore vendored
View File

@@ -42,5 +42,5 @@ yarn-error.log*
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts next-env.d.ts
# Auto-generated files (regenerate with npm run generate:api) # Auto-generated files (regenerate with bun run generate:api)
/src/mocks/handlers/generated.ts /src/mocks/handlers/generated.ts

12
frontend/Dockerfile
View File

@@ -1,16 +1,16 @@
# Stage 1: Dependencies # Stage 1: Dependencies
FROM node:20-alpine AS deps FROM oven/bun:1-alpine AS deps
WORKDIR /app WORKDIR /app
COPY package.json package-lock.json ./ COPY package.json bun.lock ./
RUN npm ci RUN bun install --frozen-lockfile
# Stage 2: Builder # Stage 2: Builder
FROM node:20-alpine AS builder FROM oven/bun:1-alpine AS builder
WORKDIR /app WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules COPY --from=deps /app/node_modules ./node_modules
COPY . . COPY . .
ENV NEXT_TELEMETRY_DISABLED 1 ENV NEXT_TELEMETRY_DISABLED 1
RUN npm run build RUN bun run build
# Stage 3: Runner # Stage 3: Runner
FROM node:20-alpine AS runner FROM node:20-alpine AS runner
@@ -33,4 +33,4 @@ EXPOSE 3000
ENV PORT 3000 ENV PORT 3000
ENV HOSTNAME "0.0.0.0" ENV HOSTNAME "0.0.0.0"
CMD ["node", "server.js"] CMD ["node", "server.js"]

48
frontend/README.md
View File

@@ -47,16 +47,16 @@ Production-ready Next.js 16 frontend with TypeScript, authentication, admin pane
### Prerequisites ### Prerequisites
- Node.js 18+ - Node.js 18+
- npm, yarn, or pnpm - [Bun](https://bun.sh/) (recommended runtime & package manager)
### Installation ### Installation
```bash ```bash
# Install dependencies # Install dependencies
npm install bun install
# Run development server # Run development server
npm run dev bun run dev
``` ```
Open [http://localhost:3000](http://localhost:3000) to view the app. Open [http://localhost:3000](http://localhost:3000) to view the app.
@@ -74,26 +74,26 @@ NEXT_PUBLIC_SITE_URL=http://localhost:3000
```bash ```bash
# Development # Development
npm run dev # Start dev server bun run dev # Start dev server
npm run build # Production build bun run build # Production build
npm run start # Start production server bun run start # Start production server
# Code Quality # Code Quality
npm run lint # Run ESLint bun run lint # Run ESLint
npm run format # Format with Prettier bun run format # Format with Prettier
npm run format:check # Check formatting bun run format:check # Check formatting
npm run type-check # TypeScript type checking bun run type-check # TypeScript type checking
npm run validate # Run all checks (lint + format + type-check) bun run validate # Run all checks (lint + format + type-check)
# Testing # Testing
npm test # Run unit tests bun test # Run unit tests
npm run test:watch # Watch mode bun run test:watch # Watch mode
npm run test:coverage # Coverage report bun run test:coverage # Coverage report
npm run test:e2e # Run E2E tests bun run test:e2e # Run E2E tests
npm run test:e2e:ui # Playwright UI mode bun run test:e2e:ui # Playwright UI mode
# API Client # API Client
npm run generate:api # Generate TypeScript client from OpenAPI spec bun run generate:api # Generate TypeScript client from OpenAPI spec
``` ```
## Project Structure ## Project Structure
@@ -184,13 +184,13 @@ See [docs/I18N.md](./docs/I18N.md) for complete guide.
```bash ```bash
# Run all tests # Run all tests
npm test bun test
# Watch mode # Watch mode
npm run test:watch bun run test:watch
# Coverage # Coverage
npm run test:coverage bun run test:coverage
``` ```
**Coverage**: 1,142+ tests covering components, hooks, utilities, and pages. **Coverage**: 1,142+ tests covering components, hooks, utilities, and pages.
@@ -199,13 +199,13 @@ npm run test:coverage
```bash ```bash
# Run E2E tests # Run E2E tests
npm run test:e2e bun run test:e2e
# UI mode (recommended for debugging) # UI mode (recommended for debugging)
npm run test:e2e:ui bun run test:e2e:ui
# Debug mode # Debug mode
npm run test:e2e:debug bun run test:e2e:debug
``` ```
**Coverage**: 178+ tests covering authentication, navigation, admin panel, and user flows. **Coverage**: 178+ tests covering authentication, navigation, admin panel, and user flows.
@@ -247,7 +247,7 @@ npm run test:e2e:debug
1. Follow existing code patterns 1. Follow existing code patterns
2. Write tests for new features 2. Write tests for new features
3. Run `npm run validate` before committing 3. Run `bun run validate` before committing
4. Keep translations in sync (en.json & it.json) 4. Keep translations in sync (en.json & it.json)
## License ## License

2671
frontend/bun.lock Normal file
View File

File diff suppressed because it is too large Load Diff

4
frontend/docs/API_INTEGRATION.md
View File

@@ -35,7 +35,7 @@
```bash ```bash
cd frontend cd frontend
npm run generate:api bun run generate:api
``` ```
This fetches the OpenAPI spec from the backend and generates TypeScript types and API client functions. This fetches the OpenAPI spec from the backend and generates TypeScript types and API client functions.
@@ -894,7 +894,7 @@ apiClient.interceptors.request.use((config) => {
**Solution**: Regenerate API client to sync with backend **Solution**: Regenerate API client to sync with backend
```bash ```bash
npm run generate:api bun run generate:api
``` ```
### 9.4 Stale Data ### 9.4 Stale Data

22
frontend/docs/ARCHITECTURE.md
View File

@@ -1300,7 +1300,7 @@ import Image from 'next/image';
**Bundle Size Monitoring:** **Bundle Size Monitoring:**
```bash ```bash
npm run build && npm run analyze bun run build && bun run analyze
# Use webpack-bundle-analyzer to identify large dependencies # Use webpack-bundle-analyzer to identify large dependencies
``` ```
@@ -1362,8 +1362,8 @@ npm run build && npm run analyze
**Regular Audits:** **Regular Audits:**
```bash ```bash
npm audit bun audit
npm audit fix bun audit fix
``` ```
**Automated Scanning:** **Automated Scanning:**
@@ -1496,11 +1496,11 @@ npm audit fix
FROM node:20-alpine FROM node:20-alpine
WORKDIR /app WORKDIR /app
COPY package*.json ./ COPY package*.json ./
RUN npm ci --only=production RUN bun install --frozen-lockfile --only=production
COPY . . COPY . .
RUN npm run build RUN bun run build
EXPOSE 3000 EXPOSE 3000
CMD ["npm", "start"] CMD ["bun", "start"]
``` ```
### 14.2 Environment Configuration ### 14.2 Environment Configuration
@@ -1536,15 +1536,15 @@ jobs:
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
- name: Install dependencies - name: Install dependencies
run: npm ci run: bun install --frozen-lockfile
- name: Run tests - name: Run tests
run: npm test run: bun test
- name: Run linter - name: Run linter
run: npm run lint run: bun run lint
- name: Type check - name: Type check
run: npm run type-check run: bun run type-check
- name: Build - name: Build
run: npm run build run: bun run build
``` ```
--- ---

8
frontend/docs/COMMON_PITFALLS.md
View File

@@ -908,16 +908,16 @@ Before committing code, always run:
```bash ```bash
# Type checking # Type checking
npm run type-check bun run type-check
# Linting # Linting
npm run lint bun run lint
# Tests # Tests
npm test bun test
# Build check # Build check
npm run build bun run build
``` ```
**In browser:** **In browser:**

14
frontend/docs/DEMO_MODE.md
View File

@@ -59,7 +59,7 @@ cd frontend
echo "NEXT_PUBLIC_DEMO_MODE=true" > .env.local echo "NEXT_PUBLIC_DEMO_MODE=true" > .env.local
# Start frontend only (no backend needed) # Start frontend only (no backend needed)
npm run dev bun run dev
# Open http://localhost:3000 # Open http://localhost:3000
``` ```
@@ -233,7 +233,7 @@ MSW never initializes during Jest tests:
- 97%+ coverage maintained - 97%+ coverage maintained
```bash ```bash
npm test # MSW will NOT interfere bun test # MSW will NOT interfere
``` ```
### E2E Tests (Playwright) ### E2E Tests (Playwright)
@@ -247,14 +247,14 @@ MSW never initializes during Playwright tests:
- All E2E tests pass unchanged - All E2E tests pass unchanged
```bash ```bash
npm run test:e2e # MSW will NOT interfere bun run test:e2e # MSW will NOT interfere
``` ```
### Manual Testing in Demo Mode ### Manual Testing in Demo Mode
```bash ```bash
# Enable demo mode # Enable demo mode
NEXT_PUBLIC_DEMO_MODE=true npm run dev NEXT_PUBLIC_DEMO_MODE=true bun run dev
# Test flows: # Test flows:
# 1. Open http://localhost:3000 # 1. Open http://localhost:3000
@@ -304,7 +304,7 @@ NEXT_PUBLIC_APP_NAME=My Demo App
```bash ```bash
# netlify.toml # netlify.toml
[build] [build]
command = "npm run build" command = "bun run build"
publish = ".next" publish = ".next"
[build.environment] [build.environment]
@@ -321,10 +321,10 @@ module.exports = {
} }
# Build # Build
NEXT_PUBLIC_DEMO_MODE=true npm run build NEXT_PUBLIC_DEMO_MODE=true bun run build
# Deploy to GitHub Pages # Deploy to GitHub Pages
npm run deploy bun run deploy
``` ```
## Troubleshooting ## Troubleshooting

20
frontend/docs/MSW_AUTO_GENERATION.md
View File

@@ -9,7 +9,7 @@ MSW (Mock Service Worker) handlers are **automatically generated** from your Ope
``` ```
Backend API Changes Backend API Changes
↓ ↓
npm run generate:api bun run generate:api
↓ ↓
┌─────────────────────────────────────┐ ┌─────────────────────────────────────┐
│ 1. Fetches OpenAPI spec │ │ 1. Fetches OpenAPI spec │
@@ -30,7 +30,7 @@ src/mocks/handlers/
When you run: When you run:
```bash ```bash
npm run generate:api bun run generate:api
``` ```
The system: The system:
@@ -125,7 +125,7 @@ Overrides are applied FIRST, so they take precedence over generated handlers.
```bash ```bash
# Backend adds new endpoint # Backend adds new endpoint
# 1. Run npm run generate:api # 1. Run bun run generate:api
# 2. Manually add MSW handler # 2. Manually add MSW handler
# 3. Test demo mode # 3. Test demo mode
# 4. Fix bugs # 4. Fix bugs
@@ -136,7 +136,7 @@ Overrides are applied FIRST, so they take precedence over generated handlers.
```bash ```bash
# Backend adds new endpoint # Backend adds new endpoint
npm run generate:api # Done! MSW auto-synced bun run generate:api # Done! MSW auto-synced
``` ```
### ✅ Always In Sync ### ✅ Always In Sync
@@ -202,11 +202,11 @@ frontend/
2. **Regenerate clients:** 2. **Regenerate clients:**
```bash ```bash
cd frontend cd frontend
npm run generate:api bun run generate:api
``` ```
3. **Test demo mode:** 3. **Test demo mode:**
```bash ```bash
NEXT_PUBLIC_DEMO_MODE=true npm run dev NEXT_PUBLIC_DEMO_MODE=true bun run dev
``` ```
4. **Done!** New endpoint automatically works in demo mode 4. **Done!** New endpoint automatically works in demo mode
@@ -286,7 +286,7 @@ The generator (`scripts/generate-msw-handlers.ts`) does:
**Check:** **Check:**
1. Is backend running? (`npm run generate:api` requires backend) 1. Is backend running? (`bun run generate:api` requires backend)
2. Check console for `[MSW]` warnings 2. Check console for `[MSW]` warnings
3. Verify `generated.ts` exists and has your endpoint 3. Verify `generated.ts` exists and has your endpoint
4. Check path parameters match exactly 4. Check path parameters match exactly
@@ -324,7 +324,7 @@ npx tsx scripts/generate-msw-handlers.ts /tmp/openapi.json
### ✅ Do ### ✅ Do
- Run `npm run generate:api` after backend changes - Run `bun run generate:api` after backend changes
- Use `overrides.ts` for complex logic - Use `overrides.ts` for complex logic
- Keep mock data in `data/` files - Keep mock data in `data/` files
- Test demo mode regularly - Test demo mode regularly
@@ -380,7 +380,7 @@ http.get(`${API_BASE_URL}/api/v1/users/me`, async ({ request }) => {
### After (Automated) ### After (Automated)
```bash ```bash
npm run generate:api # Done! All 31+ endpoints handled automatically bun run generate:api # Done! All 31+ endpoints handled automatically
``` ```
**Manual Code: 1500+ lines** **Manual Code: 1500+ lines**
@@ -399,6 +399,6 @@ npm run generate:api # Done! All 31+ endpoints handled automatically
**This template is batteries-included.** **This template is batteries-included.**
Your API client and MSW handlers stay perfectly synchronized with zero manual work. Your API client and MSW handlers stay perfectly synchronized with zero manual work.
Just run `npm run generate:api` and everything updates automatically. Just run `bun run generate:api` and everything updates automatically.
That's the power of OpenAPI + automation! 🚀 That's the power of OpenAPI + automation! 🚀

4
frontend/frontend-requirements.md
View File

@@ -526,7 +526,7 @@ interface UserSession {
- Development: `http://localhost:8000/api/v1/openapi.json` - Development: `http://localhost:8000/api/v1/openapi.json`
- Docker: `http://backend:8000/api/v1/openapi.json` - Docker: `http://backend:8000/api/v1/openapi.json`
- Generates TypeScript client in `src/lib/api/generated/` - Generates TypeScript client in `src/lib/api/generated/`
- Runs as npm script: `npm run generate:api` - Runs as script: `bun run generate:api`
- Can be run independently for frontend-only development - Can be run independently for frontend-only development
**Root Script** (`root/scripts/generate-frontend-api.sh`): **Root Script** (`root/scripts/generate-frontend-api.sh`):
@@ -1724,7 +1724,7 @@ Provide 2-3 complete feature implementation walkthroughs, including:
**Dependency Security:** **Dependency Security:**
- Regular dependency updates - Regular dependency updates
- Security audit via `npm audit` - Security audit via `bun audit`
- Automated security scanning (Dependabot, Snyk) - Automated security scanning (Dependabot, Snyk)
### 12.5 SEO ### 12.5 SEO

19020
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

67
frontend/package.json
View File

@@ -12,7 +12,7 @@
"type-check": "tsc --noEmit", "type-check": "tsc --noEmit",
"format": "prettier --write .", "format": "prettier --write .",
"format:check": "prettier --check .", "format:check": "prettier --check .",
"validate": "npm run lint && npm run format:check && npm run type-check", "validate": "bun run lint && bun run format:check && bun run type-check",
"generate:api": "./scripts/generate-api-client.sh", "generate:api": "./scripts/generate-api-client.sh",
"test": "jest", "test": "jest",
"test:watch": "jest --watch", "test:watch": "jest --watch",
@@ -24,7 +24,7 @@
"dependencies": { "dependencies": {
"@hookform/resolvers": "^5.2.2", "@hookform/resolvers": "^5.2.2",
"@radix-ui/react-alert-dialog": "^1.1.15", "@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-avatar": "^1.1.10", "@radix-ui/react-avatar": "^1.1.11",
"@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -32,65 +32,65 @@
"@radix-ui/react-label": "^2.1.8", "@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-select": "^2.2.6", "@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-separator": "^1.1.7", "@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tabs": "^1.1.13", "@radix-ui/react-tabs": "^1.1.13",
"@tanstack/react-query": "^5.90.5", "@tanstack/react-query": "^5.90.21",
"@types/react-syntax-highlighter": "^15.5.13", "@types/react-syntax-highlighter": "^15.5.13",
"axios": "^1.13.1", "axios": "^1.13.6",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"framer-motion": "^12.23.24", "framer-motion": "^12.34.3",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"lucide-react": "^0.552.0", "lucide-react": "^0.552.0",
"next": "^16", "next": "^16.1.6",
"next-intl": "^4.5.3", "next-intl": "^4.8.3",
"next-themes": "^0.4.6", "next-themes": "^0.4.6",
"react": "^19.0.0", "react": "^19.2.4",
"react-dom": "^19.0.0", "react-dom": "^19.2.4",
"react-hook-form": "^7.66.0", "react-hook-form": "^7.71.2",
"react-markdown": "^10.1.0", "react-markdown": "^10.1.0",
"react-syntax-highlighter": "^16.1.0", "react-syntax-highlighter": "^16.1.1",
"recharts": "^2.15.4", "recharts": "^2.15.4",
"rehype-autolink-headings": "^7.1.0", "rehype-autolink-headings": "^7.1.0",
"rehype-highlight": "^7.0.2", "rehype-highlight": "^7.0.2",
"rehype-slug": "^6.0.0", "rehype-slug": "^6.0.0",
"remark-gfm": "^4.0.1", "remark-gfm": "^4.0.1",
"sonner": "^2.0.7", "sonner": "^2.0.7",
"tailwind-merge": "^3.3.1", "tailwind-merge": "^3.5.0",
"zod": "^3.25.76", "zod": "^3.25.76",
"zustand": "^4.5.7" "zustand": "^4.5.7"
}, },
"devDependencies": { "devDependencies": {
"@hey-api/openapi-ts": "^0.86.11", "@hey-api/openapi-ts": "^0.86.12",
"@next/bundle-analyzer": "^16.0.1", "@next/bundle-analyzer": "^16.1.6",
"@peculiar/webcrypto": "^1.5.0", "@peculiar/webcrypto": "^1.5.0",
"@playwright/test": "^1.56.1", "@playwright/test": "^1.58.2",
"@tailwindcss/postcss": "^4", "@tailwindcss/postcss": "^4.2.1",
"@tanstack/react-query-devtools": "^5.90.2", "@tanstack/react-query-devtools": "^5.91.3",
"@testing-library/jest-dom": "^6.9.1", "@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.0", "@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1", "@testing-library/user-event": "^14.6.1",
"@types/jest": "^30.0.0", "@types/jest": "^30.0.0",
"@types/node": "^20", "@types/node": "^20.19.35",
"@types/react": "^19", "@types/react": "^19.2.14",
"@types/react-dom": "^19", "@types/react-dom": "^19.2.3",
"eslint": "^9", "eslint": "^9.39.3",
"eslint-config-next": "^16", "eslint-config-next": "^16.1.6",
"eslint-config-prettier": "^10.1.8", "eslint-config-prettier": "^10.1.8",
"eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-react": "^7.37.2", "eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-hooks": "^5.2.0",
"jest": "^30.2.0", "jest": "^30.2.0",
"jest-environment-jsdom": "^30.2.0", "jest-environment-jsdom": "^30.2.0",
"lighthouse": "^12.8.2", "lighthouse": "^12.8.2",
"msw": "^2.12.3", "msw": "^2.12.10",
"prettier": "^3.6.2", "prettier": "^3.8.1",
"tailwindcss": "^4", "tailwindcss": "^4.2.1",
"tsx": "^4.20.6", "tsx": "^4.21.0",
"typescript": "^5", "typescript": "^5.9.3",
"typescript-eslint": "^8.15.0", "typescript-eslint": "^8.56.1",
"whatwg-fetch": "^3.6.20" "whatwg-fetch": "^3.6.20"
}, },
"msw": { "msw": {
@@ -99,7 +99,6 @@
] ]
}, },
"overrides": { "overrides": {
"glob": "^10.4.1", "glob": "^10.4.1"
"inflight": "npm:lru-cache@^10.0.0"
} }
} }

2
frontend/public/mockServiceWorker.js
View File

@@ -7,7 +7,7 @@
* - Please do NOT modify this file. * - Please do NOT modify this file.
*/ */
const PACKAGE_VERSION = '2.12.7'; const PACKAGE_VERSION = '2.12.10';
const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'; const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82';
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse'); const IS_MOCKED_RESPONSE = Symbol('isMockedResponse');
const activeClientIds = new Set(); const activeClientIds = new Set();

10
frontend/scripts/sync-msw-with-openapi.md
View File

@@ -11,7 +11,7 @@ MSW handlers can drift out of sync with the backend API as it evolves.
Install the package that auto-generates MSW handlers from OpenAPI: Install the package that auto-generates MSW handlers from OpenAPI:
```bash ```bash
npm install --save-dev openapi-msw bun install --save-dev openapi-msw
``` ```
Then create a generation script: Then create a generation script:
@@ -39,9 +39,9 @@ generate();
When you add/change backend endpoints: When you add/change backend endpoints:
1. **Update Backend** → Make API changes 1. **Update Backend** → Make API changes
2. **Generate Frontend Client** → `npm run generate:api` 2. **Generate Frontend Client** → `bun run generate:api`
3. **Update MSW Handlers** → Edit `src/mocks/handlers/*.ts` 3. **Update MSW Handlers** → Edit `src/mocks/handlers/*.ts`
4. **Test Demo Mode** → `NEXT_PUBLIC_DEMO_MODE=true npm run dev` 4. **Test Demo Mode** → `NEXT_PUBLIC_DEMO_MODE=true bun run dev`
### Option 3: Automated with Script Hook ### Option 3: Automated with Script Hook
@@ -50,7 +50,7 @@ Add to `package.json`:
```json ```json
{ {
"scripts": { "scripts": {
"generate:api": "./scripts/generate-api-client.sh && npm run sync:msw", "generate:api": "./scripts/generate-api-client.sh && bun run sync:msw",
"sync:msw": "echo '⚠️ Don't forget to update MSW handlers in src/mocks/handlers/'" "sync:msw": "echo '⚠️ Don't forget to update MSW handlers in src/mocks/handlers/'"
} }
} }
@@ -100,7 +100,7 @@ Our MSW handlers currently cover:
To check if MSW is missing handlers: To check if MSW is missing handlers:
1. Start demo mode: `NEXT_PUBLIC_DEMO_MODE=true npm run dev` 1. Start demo mode: `NEXT_PUBLIC_DEMO_MODE=true bun run dev`
2. Open browser console 2. Open browser console
3. Look for `[MSW] Warning: intercepted a request without a matching request handler` 3. Look for `[MSW] Warning: intercepted a request without a matching request handler`
4. Add missing handlers to appropriate file in `src/mocks/handlers/` 4. Add missing handlers to appropriate file in `src/mocks/handlers/`