Blomios
307ae71857
Agents for developpement added + frontend add + backend added. Git viewer created + agent and template creator + layout and project creator
40 lines
2.8 KiB
Markdown
40 lines
2.8 KiB
Markdown
# LD — Design System (UI kit maison)
|
|
|
|
**Binôme :** `dev-ui` / `test-ui`
|
|
**Zones :** `frontend/src/shared` (UI kit), `frontend` (config Tailwind), `frontend/src/app` (app shell)
|
|
**Dépendances amont :** L1 (frontend ports/adapters/DI en place).
|
|
**Position :** inséré **après L6** (décision produit : voir CONTEXT, lot transverse), consommé ensuite au fil de l'eau par chaque feature.
|
|
|
|
## Objectif
|
|
Doter IdeA d'un **design system maison** cohérent et d'un **thème sombre** par défaut (c'est un IDE), pour que chaque feature cesse de bricoler des styles inline et consomme des composants réutilisables.
|
|
|
|
## Stack (validée)
|
|
- **Tailwind v4** + `@tailwindcss/vite` (CSS-first, `@theme`), composants **maison** dans `shared/ui` (pas de lib de composants tierce).
|
|
- Tokens de design (couleurs/typo/espacements/rayons) en variables de thème ; helper `cn()` pour composer les classes.
|
|
|
|
## Périmètre (DEV)
|
|
- Config Tailwind (plugin Vite, feuille de thème globale, tokens, dark par défaut).
|
|
- `shared/ui` : composants de base — `Button`, `IconButton`, `Input`, `Panel`/`Card`, `Tabs`, `Toolbar`, `Spinner`, `Field`. Helper `cn`.
|
|
- **App shell** sombre dans `app/` (remplace les styles inline du smoke-test).
|
|
|
|
## Périmètre (TEST)
|
|
- `cn()` (unitaire).
|
|
- Rendu + variantes/états des composants (`Button` variants/disabled, `Input` label/aria, `Tabs` sélection) via RTL/vitest, **sans backend**.
|
|
|
|
## Definition of Done
|
|
- `vitest` vert ; `tsc --noEmit` vert ; le domaine/les ports UI restent inchangés (pur skin).
|
|
- Aucune feature ne régresse ; l'app monte avec le thème sombre.
|
|
|
|
## Hors périmètre
|
|
- Re-styling exhaustif de toutes les features (fait au fil de l'eau quand on touche chacune).
|
|
|
|
## Avancement — ✅ vert
|
|
|
|
- **Config** : `tailwindcss@4` + `@tailwindcss/vite` ajoutés ; plugin câblé dans `vite.config.ts` ; feuille de thème globale `src/shared/styles/theme.css` (tokens sémantiques sous `@theme`, thème **sombre** par défaut, focus ring), importée une fois dans `app/main.tsx`.
|
|
- **UI kit** `src/shared/ui` : `Button` (variants primary/secondary/ghost/danger, sizes, loading), `IconButton`, `Input`, `Field` (label/hint/error + aria), `Panel`, `Tabs` (sélection + close), `Toolbar`, `Spinner`. Helper `cn()`. Baril `@/shared`.
|
|
- **App shell** sombre (`app/App.tsx`) : header avec statut backend, plus de styles inline.
|
|
- **Consommation** : `features/projects/ProjectsView` migré sur le kit (premier consommateur), hooks d'accessibilité préservés (tests L2 toujours verts).
|
|
- **Tests** : `cn` + composants (`Button`/`Input`/`Field`/`Tabs`) via RTL — assertions sur rôles/aria, pas sur les classes Tailwind (le design peut évoluer sans casser la suite).
|
|
|
|
**Vérifs** : `tsc --noEmit` vert · `vitest` **103 tests verts** (14 fichiers) · `vite build` OK (Tailwind compile, CSS 22.8 kB).
|