docs(claude) : refactorise CLAUDE.md en index + extrait les regles dans .claude/rules/
- CLAUDE.md devient un index concis : contexte, stack, regles absolues numerotees, pointeurs vers les fichiers de regles detaillees via references @.claude/rules/*.md - Les conventions detaillees (architecture, backend, frontend, testing, naming, git, workflow) sont extraites dans .claude/rules/ pour rester chargees a la demande sans gonfler le context du CLAUDE.md principal - Ajoute la regle absolue "Ne jamais mentionner Claude/IA dans commits ou PR" (point 10) pour garder l'historique git signe par l'utilisateur
This commit is contained in:
69
.claude/rules/frontend.md
Normal file
69
.claude/rules/frontend.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# Frontend — Regles Nuxt 4 / Vue 3 / @malio/layer-ui
|
||||
|
||||
## Base
|
||||
|
||||
- TypeScript strict
|
||||
- 4 espaces d'indentation
|
||||
- Commentaires (JSDoc, inline, bloc) **en francais** ; code (variables, types) en anglais
|
||||
- Chaque module front = un layer Nuxt auto-detecte (`frontend/modules/*/nuxt.config.ts` minimal)
|
||||
|
||||
## Appels API
|
||||
|
||||
- Toujours `useApi()` — jamais `$fetch`, `ofetch`, `axios` en direct
|
||||
- `useApi()` gere : cookies JWT, erreurs, toasts i18n, parsing Hydra
|
||||
|
||||
## Stores (Pinia)
|
||||
|
||||
- `useAuthStore` pour l'authentification
|
||||
- `useUiStore` pour l'etat UI global (sidebar, modales, etc.)
|
||||
- Composables avec state singleton (refs module-level) : exposer une fonction `reset*()` et la rappeler au logout (ex: `useSidebar().resetSidebar()`)
|
||||
|
||||
## Middlewares globaux
|
||||
|
||||
- `auth.global.ts` protege les routes + charge la sidebar apres login
|
||||
- `modules.global.ts` redirige si la route demandee est dans `disabledRoutes`
|
||||
|
||||
## i18n et sidebar
|
||||
|
||||
- Labels de sidebar = cles i18n `sidebar.<module>.*`, jamais du texte brut
|
||||
- Le layout `default.vue` applique `t()` sur les labels retournes par `/api/sidebar`
|
||||
- Traductions dans `frontend/i18n/locales/`
|
||||
|
||||
## Composants formulaires — @malio/layer-ui obligatoire
|
||||
|
||||
Tout champ de formulaire / filtre doit utiliser les composants `Malio*` plutot que `<input>` / `<select>` bruts :
|
||||
|
||||
- `MalioInputText`, `MalioInputNumber`, `MalioInputAmount`, `MalioInputPassword`, `MalioInputTextArea`
|
||||
- `MalioSelect`, `MalioSelectCheckbox`, `MalioCheckbox`, `MalioRadioButton`
|
||||
- `MalioInputUpload`, `MalioTime`
|
||||
- `MalioButton`, `MalioButtonIcon`
|
||||
|
||||
**Exceptions autorisees** (commenter un `// TODO` pour migrer quand la lib couvrira le cas) :
|
||||
1. Type non couvert : `datetime-local`, `date`, color picker, file drag & drop
|
||||
2. Bug connu bloquant (ex: `MalioSelect` avec options string) — documenter le bug en commentaire
|
||||
|
||||
Toute autre exception requiert validation avant merge.
|
||||
|
||||
## Tableaux de donnees — MalioDataTable obligatoire
|
||||
|
||||
Tout affichage LISTE tabulaire (donnees metier paginees, CRUD admin) doit passer par `MalioDataTable` :
|
||||
- Pagination integree
|
||||
- Slots `#header-*` pour filtres, `#cell-*` pour rendu custom
|
||||
- Pas de `<table>` brut avec pagination custom
|
||||
|
||||
**Exception** : tableaux purement presentationnels non paginables (diff field/old/new, grille de comparaison, matrice RBAC d'admin, etc.) peuvent rester en `<table>` HTML brut.
|
||||
|
||||
## Etat des tableaux — pas de persistance URL
|
||||
|
||||
**Interdit** de persister l'etat d'un tableau (filtres, pagination, tri par colonne, selection, ligne active, scroll) dans la query string ou de le reinjecter depuis `route.query` au montage.
|
||||
|
||||
- L'etat vit uniquement dans le composant (`reactive`, `ref` locales)
|
||||
- Seuls les deep links "de navigation metier" (ex: ouvrir un detail precis `/users/42`) sont dans l'URL
|
||||
- Exceptions autorisees **sur demande explicite** de l'utilisateur
|
||||
|
||||
## Interdits
|
||||
|
||||
- `modules-loader.ts`, `.module.ts` — le scan des layers est automatique
|
||||
- Hardcode de la sidebar cote front — elle vient de `/api/sidebar`
|
||||
- Edition manuelle de `extends` dans `frontend/nuxt.config.ts` — les layers sont scannes
|
||||
- Import d'un module front depuis un autre module — passer par `frontend/shared/`
|
||||
Reference in New Issue
Block a user