diff --git a/apps/web/STORYBOOK_AUDIT_COMPARISON.md b/apps/web/STORYBOOK_AUDIT_COMPARISON.md index 48cfbc2e9..c913fdff6 100644 --- a/apps/web/STORYBOOK_AUDIT_COMPARISON.md +++ b/apps/web/STORYBOOK_AUDIT_COMPARISON.md @@ -79,3 +79,33 @@ Ces URLs **existent** dans `storybook-static/` (fichiers présents). Les `net::E **Audit "app only"** : le script a été modifié pour ignorer les requêtes `/sb-manager/`, `/sb-addons/`, `/index.json`, `/project.json`. Avec ce filtre : **0 stories en erreur**, **0 erreurs capturées**. **Phase 1 peut être considérée close** pour la partie “environnement clos côté app”. Les prochaines étapes sont Phase 2 (décorateur global unique) et affinage du script d’audit (filtrage sb-manager/sb-addons ou délai) pour que le nombre de “stories en erreur” reflète uniquement les vrais échecs applicatifs. + +--- + +## État final : 67 % → 0 % (post Phase 4 & 5) + +### Métriques finales + +| Métrique | Début (avant remédiation) | Après Phase 1–2 | État final (Phase 4–5) | +|----------|---------------------------|------------------|------------------------| +| Stories en erreur | **641** (~67 % des stories) | 101* | **0** | +| Total erreurs capturées | **1 250** | 144* | **0** | +| Taux d'échec | **~67 %** | ~10 %* | **0 %** | + +\* Les 101 / 144 restants après Phase 1–2 étaient uniquement des requêtes internes Storybook (sb-manager, sb-addons) ; le script d'audit les exclut désormais. Côté applicatif, l'objectif était déjà 0 erreur. + +### Ce qui a été mis en place + +1. **Environnement clos** : MSW intercepte tous les appels API ; `onUnhandledRequest: 'error'` rend tout oubli de mock bloquant. +2. **Décorateur global** : `StorybookDecorator` fournit tous les providers ; plus d'import de providers applicatifs dans les stories. +3. **Hiérarchie et tags** : Stories classées en App/Pages, App/Layouts, Components/UI, Components/Features, Docs/Failures ; autodocs activé. +4. **Toasts silencieux** : En mode Storybook (`VITE_STORYBOOK=true`), les toasts sont loggés en console au lieu d'être affichés. +5. **CI et outillage** : + - Workflow **`.github/workflows/storybook-audit.yml`** : build Storybook, serve sur 6007, exécution de l'audit ; le job **échoue (exit 1)** si au moins une erreur est détectée. + - Script local **`npm run test:storybook`** (dans `apps/web`) : exécute l'audit (après build + serve sur 6007, à faire manuellement ou via un script wrapper si besoin). +6. **Documentation** : Contrat décrit dans `docs/STORYBOOK_CONTRACT.md`. + +### Vérification + +- L'audit (`node scripts/audit-storybook.js`) termine avec **exit 0** si 0 erreur, **exit 1** sinon. +- En commentant un mock MSW important (ex. `GET */api/v1/auth/me` dans `src/mocks/handlers.ts`), rebuild Storybook, serve sur 6007, puis `node scripts/audit-storybook.js` : l'audit doit détecter des erreurs (MSW en mode `error`) et **quitter avec code 1**. diff --git a/apps/web/src/components/feedback/ToastProvider.tsx b/apps/web/src/components/feedback/ToastProvider.tsx index e012d063c..ad8a60ade 100644 --- a/apps/web/src/components/feedback/ToastProvider.tsx +++ b/apps/web/src/components/feedback/ToastProvider.tsx @@ -78,6 +78,10 @@ export function ToastProvider({ const [toasts, setToasts] = useState([]); const addToast = useCallback((toast: Omit) => { + if (import.meta.env.VITE_STORYBOOK === 'true') { + console.log('[Storybook Toast]', toast.type ?? 'info', toast.message); + return; + } const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; const newToast: Toast = { ...toast, diff --git a/docs/STORYBOOK_CONTRACT.md b/docs/STORYBOOK_CONTRACT.md index a2f0b550a..fb7458acc 100644 --- a/docs/STORYBOOK_CONTRACT.md +++ b/docs/STORYBOOK_CONTRACT.md @@ -96,9 +96,11 @@ Autodocs are enabled globally; each component gets a generated docs page. ```bash npm run build-storybook npx serve -s storybook-static -p 6007 & - node scripts/audit-storybook.js + npm run test:storybook ``` - The audit must report **0 application errors** (console errors, page errors, unhandled network failures). MSW strict mode ensures any unhandled request is treated as an error. + Or run `npm run test:storybook` after starting the server (it runs `node scripts/audit-storybook.js`). The audit must report **0 application errors** (console errors, page errors, unhandled network failures). On failure it **exits with code 1** so CI can fail the job. + +- **CI:** The workflow `.github/workflows/storybook-audit.yml` runs on changes under `apps/web`, builds Storybook, serves it on 6007, and runs the audit; the job fails if any story has errors. - **Local run:** Use `npm run storybook` (port 6006). Ensure no console errors when opening the stories you changed.