Convention des stories Storybook pour les composants Agentica

English summary: Defines the mandatory structure for .stories.js files (colocated with each component), a required baseline set of stories (per-variant, Disabled, Loading, AllVariants), and naming conventions — keeping the Storybook catalogue consistent and Chromatic's visual-regression coverage predictable across components.

>

*The original French version follows below — preserved unaltered as the historical record.*

Contexte

ADR-009 décide d'utiliser Storybook. ADR-032 précise comment écrire les stories dans ce système — la convention de structure, de nommage et de contenu obligatoire pour chaque composant.

Sans convention explicite, deux problèmes émergent :

1. Incohérence entre composants — chaque développeur ou agent structure ses stories différemment, rendant le catalogue illisible et Chromatic imprévisible. 2. Stories incomplètes — les états critiques (loading, disabled, confirming) ne sont pas systématiquement documentés, créant des angles morts dans les tests de régression visuelle.

Décision

Structure obligatoire d'un fichier .stories.js

Chaque composant possède un fichier [composant].stories.js colocalisé avec [composant].js dans components/.

components/
  agtc-button.js
  agtc-button.stories.js    ← colocalisé
  agtc-icon.js
  agtc-icon.stories.js

Stories minimales obligatoires pour tout composant

// ✅ Story de variante isolée
export const Primary = { name: 'Primary — action principale', ... };

// ✅ Story d'état groupé
export const Disabled = { name: 'États — Disabled (toutes variantes)', ... };

// ✅ Story de comportement
export const CriticalConfirmFlow = { name: 'Critical — flux de confirmation (2 clics)', ... };

// ✅ Vue d'ensemble (toujours présente, entrée Chromatic)
export const AllVariants = { name: "Vue d'ensemble — toutes les variantes", ... };