Clean up: Remove frontend files
This commit is contained in:
parent
90ba2bf72e
commit
fb7c0313a6
@ -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.
|
|
||||||
Loading…
Reference in New Issue
Block a user