docs(contributing): align test and UI guidance

This commit is contained in:
Tam Nhu Tran committed 2026-07-26 09:34:18 -04:00
1 parent 721ca5fc33
commit 1e11335348
2 files changed
+101 -85

No files matched your search

+36 -34
View File
@@ -1,76 +1,78 @@
# CCS Dashboard UI
React + TypeScript + Vite frontend for the CCS local dashboard.
This UI is served by the CCS web server and is accessed via:
React, TypeScript, and Vite frontend for the local dashboard served by the CCS
web server through:
```bash
ccs config
```
---
## Development
From project root:
From the repository root, build the server and open the integrated dashboard:
```bash
bun run dev
```
This starts the CCS server, opens a local browser URL, and prints bind/network details for the dashboard.
If the runtime bind is reachable beyond loopback, CCS also prints an auth reminder.
For remote device access during development, run:
Pass a host explicitly when testing network access:
```bash
bun run dev -- --host 0.0.0.0
```
For local-only development, run:
```bash
bun run dev -- --host 127.0.0.1
```
From `ui/` only (frontend dev server):
For the frontend-only Vite server:
```bash
cd ui
bun run dev
```
---
Root and UI scripts are defined in
[`../package.json`](../package.json) and [`package.json`](./package.json).
## Source Ownership
| Area | Path |
| --- | --- |
| Route-level pages | [`src/pages/`](./src/pages/) |
| Domain and shared components | [`src/components/`](./src/components/) |
| Server-state hooks | [`src/hooks/`](./src/hooks/) |
| Cross-page context/providers | [`src/contexts/`](./src/contexts/) and [`src/providers/`](./src/providers/) |
| API, localization, catalogs, helpers | [`src/lib/`](./src/lib/) |
| UI tests | [`tests/`](./tests/) and colocated tests |
Follow the owning domain's existing import pattern. Barrel exports are optional,
not required at every directory level.
## Quality Commands
```bash
cd ui
bun run format
bun run typecheck
bun run lint
bun run validate
bun run test:run
```
---
`bun run validate` currently runs typecheck, lint with fixes, and the format
check. UI tests run with Vitest; use `test`, `test:run`, `test:coverage`, or
`test:ui` as defined in [`package.json`](./package.json).
## i18n
## Localization
Dashboard localization uses `react-i18next`.
- Main setup: `ui/src/lib/i18n.ts`
- Locale helpers: `ui/src/lib/locales.ts`
- Language switcher: `ui/src/components/layout/language-switcher.tsx`
| Concern | Source |
| --- | --- |
| Supported locales, normalization, fallback, persistence | [`src/lib/locales.ts`](./src/lib/locales.ts) |
| i18next setup and translation resources | [`src/lib/i18n.ts`](./src/lib/i18n.ts) |
| Language switcher | [`src/components/layout/language-switcher.tsx`](./src/components/layout/language-switcher.tsx) |
For full architecture, conventions, and locale onboarding, see:
- [`../docs/i18n-dashboard.md`](../docs/i18n-dashboard.md)
---
## Notes
- UI locale persistence uses browser localStorage key `ccs-ui-locale`.
- Current supported locales are managed in `ui/src/lib/locales.ts`.
- Current locales: `en`, `zh-CN`, `vi`.
- Fallback locale is English (`en`).
English is the fallback. The selected locale is stored in browser local storage
under `ccs-ui-locale`. Treat `src/lib/locales.ts` as the complete source of
truth for supported locale codes. When adding or removing a locale, update the
translation resources, switcher, tests, and
[dashboard i18n guide](../docs/i18n-dashboard.md) in the same change.