From fb7c0313a6d84b7a9cba3a99028b69e530cb8ecb Mon Sep 17 00:00:00 2001 From: Samuel James Date: Sat, 5 Sep 2026 15:26:54 +0000 Subject: [PATCH] Clean up: Remove frontend files --- frontend/README.md | 102 --------------------------------------------- 1 file changed, 102 deletions(-) delete mode 100644 frontend/README.md diff --git a/frontend/README.md b/frontend/README.md deleted file mode 100644 index 782ff32..0000000 --- a/frontend/README.md +++ /dev/null @@ -1,102 +0,0 @@ -# TaskFlow frontend - -React 19 + TypeScript single-page app built with Create React App, implementing -the approved mockups in `architect/01-mockups/` and the contract in -`architect/03-feasibility/frontend-handoff.md`. - -## Commands - -Run these from `frontend/`: - -| Command | What it does | -| --- | --- | -| `npm install` | Install dependencies | -| `npm start` | Dev server with hot reload (`HOST=0.0.0.0 PORT=5173` to expose it) | -| `npm run build` | Production build into `build/` | -| `npm test` | Jest + React Testing Library, watch mode | -| `npm run test:ci` | Single non-interactive test run | -| `npm run typecheck` | `tsc --noEmit` | - -`CI=true npm run build` treats lint warnings as errors, which is how the build is -verified before hand-off. - -## Layout - -``` -src/ -├── App.tsx container: data loading, filtering, save/delete -├── App.css reset, design tokens, shared primitives -├── types.ts Task/User types and the labels used in the UI -├── services/api.ts REST client (currently an in-memory stand-in) -└── components/ - ├── common/ - │ ├── AppShell.tsx header, team sidebar, main region - │ ├── TaskFields.tsx avatar, priority, status control, due date - │ └── ErrorBoundary.tsx render-crash recovery screen - ├── TaskList/ - │ ├── TaskList.tsx filter tabs, empty states, blocked guidance - │ ├── TaskRow.tsx desktop table row - │ └── TaskCard.tsx mobile card - └── TaskForm/TaskForm.tsx create/edit dialog with validation -``` - -## Backend contract - -`src/services/api.ts` is the only file that talks to the server. It is an -in-memory stand-in whose method names and payloads match the documented -endpoints, so the Backend phase can replace the method bodies with `fetch` or -`axios` calls without touching a component: - -| Method | Endpoint | -| --- | --- | -| `getCurrentUser()` | `GET /api/auth/me` | -| `getUsers()` | `GET /api/users` | -| `getTasks()` | `GET /api/tasks` | -| `createTask(draft)` | `POST /api/tasks` | -| `updateTask(id, changes)` | `PUT /api/tasks/:id` | -| `deleteTask(id)` | `DELETE /api/tasks/:id` | - -Draft validation lives in `validateDraft` inside that module as well as in the -form, because the server is the real trust boundary and the same rules have to -hold there. - -## States covered - -Screenshots of each are in `preview/`. - -- **Loading** — spinner with `role="status"` while the first fetch runs. -- **Load failure** — `role="alert"` with the reason and a Try again button. -- **Empty** — distinct copy for no tasks at all, nothing assigned to you, and - nothing blocked, so an active filter is never mistaken for an empty account. -- **Blocked** — explanatory notice above the list, per the blocked-state mockup. -- **Validation** — per-field messages tied to inputs with `aria-describedby`. -- **Save failure** — the dialog stays open with the user's input intact. - -## Accessibility - -Targeting WCAG 2.1 AA. - -- Skip link to the task list; single visible focus style via `:focus-visible`. -- Filter tabs are an ARIA tablist with arrow-key navigation and counts in the - accessible name. -- The task table exposes `table`/`rowgroup`/`row`/`columnheader`/`cell` roles. -- The dialog is `role="dialog" aria-modal="true"`, focuses the title field on - open, traps Tab, closes on Escape, and returns focus to whatever opened it. -- Errors use `role="alert"` and `aria-invalid`; confirmations go to a polite - live region. -- Interactive targets are at least 44px. -- Contrast: the mockup accent `#3b82f6` only reaches 3.7:1 behind white text, so - filled buttons use `#2563eb` (5.2:1) and accent text `#1d4ed8` (6.4:1). Amber - status text was darkened to `#92400e` for the same reason. - -Still to do by hand, since they cannot be automated here: screen reader passes -(NVDA/VoiceOver), 200% browser zoom, and cross-browser checks on Firefox, Safari -and Edge. Note that `@axe-core/react` is listed as a dependency but is not wired -up: version 4 relies on `ReactDOM.findDOMNode`, which React 19 removed. - -## Responsive behaviour - -One breakpoint at 768px. The desktop table and the mobile cards are both -rendered and CSS picks one, so the hidden view is also removed from the -accessibility tree and no task is announced twice. Below 768px the team sidebar -is hidden and Create Task becomes a floating action button.