mirror of
https://github.com/MaksTinyWorkshop/_Assistant_Lead_Tech
synced 2026-04-27 23:08:16 +02:00
chore(capitalisation): integrate triage entries and anchor new knowledge
This commit is contained in:
@@ -176,3 +176,25 @@ return (
|
||||
</>
|
||||
);
|
||||
```
|
||||
---
|
||||
|
||||
<a id="pattern-navigation-overlay-focus-trap"></a>
|
||||
## Pattern : Overlay/drawer accessible avec focus trap
|
||||
|
||||
### Synthèse
|
||||
Teleport + backdrop + Escape + scroll-lock n'est pas suffisant : le focus trap est obligatoire.
|
||||
|
||||
### Analyse
|
||||
Sans focus trap, le clavier peut sortir de la sheet/panel et casser l'ordre de navigation.
|
||||
|
||||
### Validation
|
||||
- Validé le : 09-04-2026
|
||||
- Contexte technique : Vue 3 / accessibilité overlays — RL799_V2
|
||||
- Applicable à tout drawer/sheet/modal custom en SPA (desktop et mobile clavier).
|
||||
|
||||
### Implémentation
|
||||
- Capturer le focus à l'ouverture (premier élément interactif).
|
||||
- Boucler Tab/Shift+Tab dans le conteneur.
|
||||
- Restaurer le focus au trigger à la fermeture.
|
||||
|
||||
---
|
||||
|
||||
@@ -187,3 +187,24 @@ Ne jamais :
|
||||
- [ ] Garde-fou explicite contre les doubles actions
|
||||
- [ ] Refresh explicite après mutation réussie
|
||||
- [ ] Tests sur succès, erreur et action concurrente
|
||||
|
||||
---
|
||||
|
||||
<a id="pattern-state-hydratation-auth-async"></a>
|
||||
## Pattern : Hydratation auth asynchrone avec états explicites
|
||||
|
||||
### Synthèse
|
||||
Lors d'un passage sync -> async au boot, exposer un statut d'hydratation explicite (`idle`/`hydrating`/`ready`).
|
||||
|
||||
### Analyse
|
||||
Sans état transitoire formel, les guards lisent des valeurs incomplètes et déclenchent des redirections erronées.
|
||||
|
||||
### Validation
|
||||
- Validé le : 18-04-2026
|
||||
- Contexte technique : Vue 3 / Pinia / boot async — RL799_V2
|
||||
- Applicable à toute initialisation critique : session, feature flags, restore état persistant.
|
||||
|
||||
### Implémentation (exemple minimal)
|
||||
- Store : `hydrateStatus` + promesse partagée en cours pour les appels concurrents.
|
||||
- Guards : `await hydrate()` avant toute décision d'accès.
|
||||
- UI : fallback de rendu tant que l'hydratation n'est pas `ready`.
|
||||
|
||||
@@ -132,3 +132,24 @@ expect(aBeforeB).toBe(true);
|
||||
### Risque associé
|
||||
|
||||
`boundingBox().y` vérifie la position visuelle rendue par CSS, pas l'ordre dans le DOM. De plus `boundingBox()` retourne `null` pour les éléments hors viewport → crash non déterministe.
|
||||
|
||||
---
|
||||
|
||||
<a id="pattern-tests-selecteurs-e2e-stables"></a>
|
||||
## Pattern : Sélecteurs E2E stables orientés intention
|
||||
|
||||
### Synthèse
|
||||
Les tests E2E doivent cibler des sélecteurs stables (`data-testid`, role/name) et non la structure CSS/XPath.
|
||||
|
||||
### Analyse
|
||||
Les classes et la structure DOM changent fréquemment sans régression fonctionnelle.
|
||||
|
||||
### Validation
|
||||
- Validé le : 14-04-2026
|
||||
- Contexte technique : Playwright / sélecteurs robustes — RL799_V2
|
||||
- Ce pattern s'applique à Playwright/Cypress sur toutes les UIs réactives.
|
||||
|
||||
### Implémentation
|
||||
- Préférer `data-testid` paramétré par identifiant métier stable.
|
||||
- Éviter `locator.first()` si l'ordre peut muter.
|
||||
- Isoler les tests mutateurs avec stratégie de remise à l'état (snapshot/restore).
|
||||
|
||||
@@ -135,3 +135,39 @@ if (user === null || user.role !== 'ADMIN') return <View />;
|
||||
- **Signal review** : `Authorization: Bearer` dans les tests alors que le code production utilise `credentials: 'include'`
|
||||
|
||||
- Contexte technique : Vue 3 / auth migration — RL799_V2 08-04-2026
|
||||
|
||||
---
|
||||
|
||||
<a id="risque-auth-me-fallback-localstorage"></a>
|
||||
## Migration vers `/auth/me` — fallback localStorage réintroduit une confiance client
|
||||
|
||||
### Risques
|
||||
- Un blocage réseau ciblé peut forcer un fallback sur des données locales falsifiables.
|
||||
|
||||
### Symptômes
|
||||
- Rôle/grade consommés depuis localStorage en cas d'erreur endpoint d'autorité.
|
||||
|
||||
### Bonnes pratiques / mitigations
|
||||
- Si l'endpoint d'autorité échoue, conserver un état non authentifié/dégradé, pas un fallback de privilèges.
|
||||
- Garder localStorage strictement pour métadonnées UX non sensibles.
|
||||
|
||||
- Contexte technique : auth frontend / source d'autorité — RL799_V2 18-04-2026
|
||||
|
||||
---
|
||||
|
||||
<a id="risque-auth-store-source-verite-bypass-service"></a>
|
||||
## Source de vérité auth déplacée vers store, appels directs service laissés en place
|
||||
|
||||
### Risques
|
||||
- Guards/router lisent un état store non synchronisé après login/logout.
|
||||
|
||||
### Symptômes
|
||||
- Login réussi puis redirection immédiate vers `/login`.
|
||||
|
||||
### Bonnes pratiques / mitigations
|
||||
- Interdire les appels directs au service auth depuis les pages une fois le store source de vérité.
|
||||
- Centraliser login/logout/change-password via actions store.
|
||||
|
||||
- Contexte technique : auth frontend / Pinia store — RL799_V2 18-04-2026
|
||||
|
||||
---
|
||||
|
||||
@@ -119,3 +119,39 @@ Erreurs courantes :
|
||||
- Activer `@typescript-eslint/no-unused-vars` et `no-unused-imports` dans la config ESLint mobile
|
||||
- Lors de toute migration de tokens, auditer les imports de chaque composant UI concerné
|
||||
- Contexte technique : React Native / ESLint — app-alexandrie, 25-03-2026
|
||||
|
||||
---
|
||||
|
||||
<a id="risque-design-tokens-fallback-theme-incoherent"></a>
|
||||
## Fallbacks de tokens incohérents avec le thème actif
|
||||
|
||||
### Risques
|
||||
- Composants lisibles en dev mais illisibles quand une variable manque en production.
|
||||
|
||||
### Symptômes
|
||||
- Fallback hardcodé light-theme dans un contexte dark-theme.
|
||||
|
||||
### Bonnes pratiques / mitigations
|
||||
- Utiliser des fallbacks cohérents avec le thème de référence.
|
||||
- Préférer un fallback vers alias sémantique existant plutôt qu'une couleur brute.
|
||||
|
||||
- Contexte technique : design tokens / thèmes CSS — RL799_V2 10-04-2026
|
||||
|
||||
---
|
||||
|
||||
<a id="risque-design-tokens-variables-non-definies"></a>
|
||||
## Variables CSS utilisées mais non définies (fallback silencieux)
|
||||
|
||||
### Risques
|
||||
- Dérive invisible du design system (les fallbacks masquent les oublis de token).
|
||||
|
||||
### Symptômes
|
||||
- L'UI semble correcte mais contourne les tokens sur une part significative des règles.
|
||||
|
||||
### Bonnes pratiques / mitigations
|
||||
- Auditer régulièrement : variables utilisées moins variables définies.
|
||||
- Traiter chaque variable non définie comme dette explicite.
|
||||
|
||||
- Contexte technique : design tokens / audit CSS vars — RL799_V2 17-04-2026
|
||||
|
||||
---
|
||||
|
||||
@@ -248,3 +248,74 @@ Poser `role="menu"` / `role="menuitem"` implique obligatoirement :
|
||||
- **Signal review** : tout `.catch(() => {})` ou `catch { /* ignore */ }` mérite au minimum un log ou un feedback visuel
|
||||
|
||||
- Contexte technique : frontend / actions async — RL799_V2 07-04-2026
|
||||
|
||||
---
|
||||
|
||||
<a id="risque-monorepo-shim-js-desynchronise"></a>
|
||||
## Monorepo ESM — shim runtime `.js` désynchronisé de l'index TypeScript
|
||||
|
||||
### Risques
|
||||
- Le typecheck passe mais le runtime navigateur casse (`named export not found`).
|
||||
|
||||
### Symptômes
|
||||
- Erreur Vite/browser sur export absent alors que `index.ts` est correct.
|
||||
|
||||
### Bonnes pratiques / mitigations
|
||||
- Si un shim `.js` est maintenu, imposer une mise à jour miroir à chaque nouvel export.
|
||||
- Ajouter un test/guard de cohérence exports TS vs JS shim.
|
||||
|
||||
- Contexte technique : monorepo / ESM shim runtime — RL799_V2 15-04-2026
|
||||
|
||||
---
|
||||
|
||||
<a id="risque-eslint-flat-tsconfigrootdir-manquant"></a>
|
||||
## ESLint flat config TypeScript sans `tsconfigRootDir`
|
||||
|
||||
### Risques
|
||||
- Erreurs de parsing massives en IDE/monorepo selon CWD d'exécution.
|
||||
|
||||
### Symptômes
|
||||
- `No TsConfigRootDir` / `Cannot read tsconfig.json` alors que le build TS passe.
|
||||
|
||||
### Bonnes pratiques / mitigations
|
||||
- Toujours définir `tsconfigRootDir: import.meta.dirname` quand `parserOptions.project` est utilisé.
|
||||
- Redémarrer le serveur ESLint après correction.
|
||||
|
||||
- Contexte technique : tooling / ESLint flat config — RL799_V2 17-04-2026
|
||||
|
||||
---
|
||||
|
||||
<a id="risque-pwa-auth-cookie-cache"></a>
|
||||
## PWA + auth cookie httpOnly — stratégie de cache non maîtrisée
|
||||
|
||||
### Risques
|
||||
- Réponses sensibles servies depuis cache offline.
|
||||
- Comportement d'auth incohérent entre réseau/cached.
|
||||
|
||||
### Symptômes
|
||||
- Session/app state divergents après activation SW ou reprise réseau.
|
||||
|
||||
### Bonnes pratiques / mitigations
|
||||
- Exclure explicitement les routes authentifiées sensibles du cache persistant.
|
||||
- Définir une stratégie stricte par classe de route (auth, API privée, assets publics).
|
||||
|
||||
- Contexte technique : PWA / service worker / auth cookie — RL799_V2 18-04-2026
|
||||
|
||||
---
|
||||
|
||||
<a id="risque-pwa-beforeinstallprompt-tardif"></a>
|
||||
## PWA install prompt — capture tardive de `beforeinstallprompt`
|
||||
|
||||
### Risques
|
||||
- Événement perdu au cold boot, prompt jamais proposé.
|
||||
|
||||
### Symptômes
|
||||
- Implémentation correcte en apparence mais aucun déclenchement sur Android.
|
||||
|
||||
### Bonnes pratiques / mitigations
|
||||
- Installer l'écouteur le plus tôt possible dans le cycle d'initialisation.
|
||||
- Ne pas baser la détection iOS uniquement sur l'UA (cas iPad en mode desktop).
|
||||
|
||||
- Contexte technique : PWA / install prompt — RL799_V2 18-04-2026
|
||||
|
||||
---
|
||||
|
||||
@@ -277,3 +277,22 @@ const routes = [
|
||||
- **Signal review** : guards de navigation couverts uniquement par des tests `includes()` sans test comportemental
|
||||
|
||||
- Contexte technique : Vue 3 / Vue Router 4 / node:test — RL799_V2 08-04-2026
|
||||
|
||||
---
|
||||
|
||||
<a id="risque-navigation-router-push-undefined"></a>
|
||||
## `router.push` construit avec segment potentiellement `undefined`
|
||||
|
||||
### Risques
|
||||
- Navigation vers `/.../undefined`, historique pollué et diagnostics trompeurs.
|
||||
|
||||
### Symptômes
|
||||
- Warnings Vue Router en cascade au boot ou à la reprise d'événements globaux.
|
||||
|
||||
### Bonnes pratiques / mitigations
|
||||
- Valider les segments dynamiques avant `push/replace`.
|
||||
- Préférer la navigation nommée avec params validés plutôt que concaténation de string.
|
||||
|
||||
- Contexte technique : Vue Router / navigation dynamique — RL799_V2 15-04-2026
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user