65 lines
2.2 KiB
Markdown
65 lines
2.2 KiB
Markdown
|
# Mimic frontend
|
||
|
|
|
||
|
|
React + TypeScript SPA for the Mimic BAS platform. Lives behind the existing
|
||
|
|
RT reverse proxy (Caddy + TLS + IP allowlist) — see D-007.
|
||
|
|
|
||
|
|
## Stack
|
||
|
|
|
||
|
|
- React 19, TypeScript strict
|
||
|
|
- Vite 8 (dev/build)
|
||
|
|
- Tailwind 4 (semantic tokens in `src/styles/theme.css`)
|
||
|
|
- TanStack Query 5 for server state
|
||
|
|
- react-router-dom v7 for routing
|
||
|
|
- Recharts for the report visualisations
|
||
|
|
- Vitest + Testing Library for unit tests
|
||
|
|
- Playwright for E2E (covered in sprint 1+)
|
||
|
|
|
||
|
|
## Scripts
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
npm run dev # vite dev server on :5173
|
||
|
|
npm run build # tsc -b && vite build
|
||
|
|
npm run typecheck # tsc -b --noEmit
|
||
|
|
npm run lint # eslint . (strict TS + react-hooks + prettier)
|
||
|
|
npm run format # prettier --write .
|
||
|
|
npm test # vitest run
|
||
|
|
npm run e2e # playwright test (needs npm run e2e:install once)
|
||
|
|
```
|
||
|
|
|
||
|
|
## Layout
|
||
|
|
|
||
|
|
```
|
||
|
|
src/
|
||
|
|
├── components/
|
||
|
|
│ ├── brand/ # Wordmark (provisional, awaits PR3 charter)
|
||
|
|
│ ├── shell/ # AppShell, Sidebar, StatusRail
|
||
|
|
│ └── ui/ # Panel, Pill, Button — instrument-grade primitives
|
||
|
|
├── mocks/ # sprint 0 fixtures (no backend yet)
|
||
|
|
├── router/ # RootLayout helper
|
||
|
|
├── screens/ # one folder per top-level route
|
||
|
|
├── session/ # mock auth context (D-003 v1 hook-in point)
|
||
|
|
├── styles/ # theme.css (tokens), fonts.css, globals.css
|
||
|
|
└── types/ # cross-cutting type aliases
|
||
|
|
```
|
||
|
|
|
||
|
|
## Design system status (provisional)
|
||
|
|
|
||
|
|
The token layer in `src/styles/theme.css` is structured to receive the RT
|
||
|
|
graphic charter (PR3) without touching component code. Component CSS reads
|
||
|
|
exclusively from semantic tokens (`--accent-rt`, `--status-detected`, …);
|
||
|
|
swapping the underlying primitive palette is the only change required when
|
||
|
|
PR3 lands.
|
||
|
|
|
||
|
|
## Auth status (sprint 0)
|
||
|
|
|
||
|
|
The session context reads/writes a mock user in `sessionStorage`. No real
|
||
|
|
auth yet. v1 will wire local username/password + bcrypt (D-003); v2 maps
|
||
|
|
Keycloak OIDC claims onto the same role enum.
|
||
|
|
|
||
|
|
## Fonts
|
||
|
|
|
||
|
|
IBM Plex (Sans / Sans Condensed / Mono), self-hosted under `public/fonts/`.
|
||
|
|
Files are not yet vendored — see `public/fonts/README.md`. Until then the
|
||
|
|
UI falls back to `ui-sans-serif` / `ui-monospace`.
|