Adds front-end set-up

2026-06-20 17:04:17 +02:00
parent efd1569c26
commit 7dfc3a9692
62 changed files with 6875 additions and 3 deletions
@@ -0,0 +1,91 @@
+# Code Generation Summary — Unit 1: Project Scaffold & Infrastructure
+
+**Generated**: 2026-06-20
+**Application code location**: `frontend/` (workspace root)
+**Type**: Greenfield (Vite + React 19 + TypeScript)
+
+## Overview
+This unit delivers the frontend scaffold and shared infrastructure for the CMS admin UI: build tooling, theme, the authentication session model (silent refresh + 401 retry), routing with guards, i18n, mocking, and an example login → dashboard flow with tests.
+
+## Tech Stack (as built)
+| Concern | Choice |
+|---|---|
+| Build / dev | Vite 8 |
+| UI | React 19 + TypeScript (strict) |
+| Routing | TanStack Router (code-based) with `_authenticated` guard layer |
+| Styling | Tailwind v4 (`@tailwindcss/vite`), primary `#ac0000`, shadcn/ui-style primitives |
+| i18n | react-i18next + browser language detector, lazy locale chunks (NL/EN) |
+| Forms/validation | react-hook-form + zod |
+| Toasts | sonner |
+| Mocking | MSW (browser + node) |
+| Testing | Vitest + Testing Library + MSW (jsdom) |
+
+## Created Files (application code under `frontend/`)
+
+### Config & tooling
+- `vite.config.ts` — React + Tailwind plugins, `@` alias, Vitest config (jsdom, coverage)
+- `tsconfig.app.json` — strict, `@/*` paths, test/jest-dom types
+- `package.json` — scripts: dev/build/preview/test/test:watch/test:coverage/lint/format
+- `.prettierrc` — 4-space indentation (BR-U1-12)
+- `eslint.config.js` — flat config + unused-vars `^_` + targeted react-refresh overrides
+- `pnpm-workspace.yaml` — `allowBuilds` for msw/esbuild/oxide
+- `.env.example`, `.env.local` — `VITE_API_BASE_URL` (BR-U1-09)
+- `index.html`, `src/index.css` — title + Tailwind theme tokens (light/dark, `#ac0000`)
+- `src/vite-env.d.ts` — typed `ImportMetaEnv` (Q6-A)
+
+### Core libraries
+- `src/api/types.ts` — `User`, `AuthResponse`, `ProblemDetails`, `SetupStatus`, etc. (`name`, not `naam`; BR-U1-10)
+- `src/lib/utils.ts` — `cn()`
+- `src/lib/config.ts` — `getAppConfig()` with dev-only Zod validation (Q6-A)
+- `src/lib/api-client.ts` — `ApiClient`, `ProblemDetailsError`, `NetworkError`; credentials, 401 refresh+retry (BR-U1-03/04/08)
+- `src/contexts/auth-context.ts` — context + `useAuth()`
+- `src/contexts/AuthProvider.tsx` — in-memory session, silent refresh on mount (BR-U1-01/02/14)
+
+### i18n
+- `src/i18n/config.ts` — init + lazy `changeLanguage` (Q4-B)
+- `src/i18n/LanguageSwitcher.tsx`
+- `src/i18n/locales/en/translation.json`, `src/i18n/locales/nl/translation.json`
+
+### Routing & layout
+- `src/router.tsx` — route tree, guards (BR-U1-05/06), lazy feature routes (Q1-A)
+- `src/main.tsx` — providers + bootstrap splash + optional MSW
+- `src/components/layout/{AppLayout,Sidebar,Topbar,UserMenu}.tsx`
+
+### UI primitives
+- `src/components/ui/{button,input,label,card,dropdown-menu,sonner}.tsx`
+
+### Pages
+- `src/pages/{LoginPage,DashboardPage,UsersPage,CmsPage,SetupPage}.tsx`
+
+### Mocks (Q3-B)
+- `src/mocks/auth/{handlers,fixtures}.ts`, `src/mocks/users/handlers.ts`, `src/mocks/setup/handlers.ts`
+- `src/mocks/{index,browser,server}.ts`, `public/mockServiceWorker.js`
+
+### Tests
+- `src/test/setup.ts`, `src/test/utils.tsx`
+- `src/contexts/AuthContext.test.tsx`, `src/pages/LoginPage.test.tsx`, `src/test/RouteGuard.test.tsx`
+
+### Documentation
+- Root `README.md` — "Frontend Development (CMS Admin UI)" section + project-structure note
+
+## Verification Results
+- **Build** (`pnpm build`): ✅ tsc + vite succeed (non-fatal vendor chunk-size warning + cosmetic en-glob warning)
+- **Tests** (`pnpm test`): ✅ 3 files, 10/10 passing
+- **Coverage** (auth-related, NFR-U1-04 >70%): AuthProvider 92.7%, api-client 84.8%, auth-context 80%, LoginPage 84.2%
+- **Lint** (`pnpm lint`): ✅ clean
+- **Format** (`pnpm format:check`): ✅ clean
+- **Dev smoke**: ✅ boots ~267ms, HTTP 200, title `SlpModularCms`
+
+## Story Coverage
+| Story | Status in Unit 1 |
+|---|---|
+| US-01 Login | ✅ Login page + auth flow |
+| US-02 Silent Refresh | ✅ AuthProvider on-mount refresh |
+| US-03 Protected Routes | ✅ `_authenticated` guard |
+| US-04 Dashboard Shell | ✅ Layout + dashboard placeholder |
+| US-05 User Menu + Language Switcher | ✅ Topbar UserMenu + LanguageSwitcher |
+| US-06 401 Intercept | ✅ ApiClient refresh+retry |
+| US-07 Error Handling | ✅ ProblemDetailsError + inline/toast surfaces |
+| US-18/US-20 CMS Mgmt | ⏭️ Out of scope for Unit 1 (placeholder page only) |
+
+See `../../plans/unit-1-code-generation-plan.md` for full step checklist and deviations.