Aller au contenu

Storybook & rangement du DS dans le paquet uimmo

Note de chantier issue d'un point Design × Front du 2026-08-20 [source locale non partagée]. ADR proposée : 2026-08-20 designers UI Storybook hors apps (proposed).

Contexte

Le DS vit dans Figma (lib 🎨 Uimmo) et dans le code (projects/common/uimmo/ + thème projects/common/front/theme/*, monorepo brickssas/monorepo). Les composants et stories sont dispersés entre uimmo et les apps (AppInvest, PDP, Shared).

Le palier acté le 2026-08-20 : Figma reste ; les PD prennent eux-mêmes le passage maquette → Storybook ; le Front relit le code. L'IA ne remplace pas cette revue. Hors-scope : brancher les apps (Investors, EF) et les API.

État actuel

Dernière mise à jour : 2026-10-15

  • 2026-10-15 — découpage révisé : 3 milestones Cadrer (BRI-2537, BRI-2532, BRI-2565, BRI-2561, BRI-2556) / Pilote sur un parcours (BRI-2559, BRI-2566, BRI-2557, BRI-2562, BRI-2560 — Figma hors milestone) / Généraliser (BRI-2534, BRI-2535, BRI-2563, BRI-2564, BRI-2530, BRI-2567 — fini quand tous les composants existants sont traités). Structure par usage : tokens / composants / patterns / templates — P-BRI-518 · ADR proposed.

  • 2026-10-15 — chantier visible dans Linear : Pierre a posé deux projets (Backlog, initiative « Accélérer le produit avec l'IA ») : Uimmo AI+Human Ready — refondre Uimmo pour qu'un humain et un agent s'en servent, par lots, avec un flow avant/après — et Build en code avec Uimmo — construire un flow réel en code avec l'agent, en binôme Design × TechFront, une fois Uimmo prêt. « Rien n'est figé » — DM groupe 2026-10-15.

  • BRI-2556 Rendre Storybook lisible (Backlog, milestone « Cadrer » depuis le 2026-10-15) : navigation en deux niveaux, Tokens puis Components ; stories produit sorties de l'arborescence Uimmo ; pas de section Foundations ; règles des composants via BRI-2535, patterns (BRI-2557) et templates (BRI-2562) après l'état des lieux (BRI-2561) — BRI-2556.

  • Review : workflow retenu pour monorepo#6679 : partager la PR dans le canal du groupe puis demander la revue sur GitHub — DM groupe 2026-10-15.

  • Point Design × Front du 2026-08-20 : périmètre, review, publication Storybook et première PR cadrés [source locale non partagée].

  • Le Front s'occupe d'abord du plugin docs et de la publication auto du Storybook sur les PR (sans label Chromatic). Chromatic = tests CI. Railway déploie le Storybook.
  • Au 2026-08-20, aucune issue Linear n'était ouverte pour ces actions (levé le 2026-10-15, voir ci-dessus).
  • Antériorité : BRI-132 · BRI-1039 · BRI-1333.
  • [outcome non formulé].

Ce qui est cadré (ne plus rejouer)

Décision Détail Source
Hors-scope Storybook seulement. Pas d'apps, pas d'API. Source locale non partagée
Figma On continue Figma. 1re étape = les PD font le dernier kilomètre dans Cursor. Pas « tuer Figma ». Source locale non partagée
Merge Revue design croisée entre PD. Le Front relit le code. Les PD ne mergent pas. Source locale non partagée
Publication PR Storybook auto, sans label Chromatic. Chromatic = CI. Railway = deploy. Source locale non partagée
Rules Cursor Pas de rules par rôle designer. Do/don't = doc de composant. La codebase (props) prime. Source locale non partagée
Où travailler Local pour voir le Storybook. Cloud pour planifier. Une conversation = une branche, depuis develop. Source locale non partagée
Premiers sujets Screens et modals. Éviter la navigation comme premier test. Source locale non partagée

Workflow PD (récap Hugo)

  1. Conversation locale, partir de develop. Mode Plan d'abord, puis Build.
  2. Lancer le Storybook (Cursor peut le faire). Itérer en local.
  3. Inspecter : lire le JSX (variant, size, color) plutôt que l'inspecteur CSS. Vérifier les tokens.
  4. Stories interactives (state), pas des maquettes mortes.
  5. Layout Storybook : composants centrés, screens fullscreen — ne pas se battre contre le layout sans le savoir.
  6. Push → PR. Assigner un autre PD en review design. Le Front relit le code. Attendre le lien Storybook de la PR.
  7. Questions → #techfront.

Rangement vers uimmo

Aucun critère formel de promotion n'est encore posé. Consigne : regarder AppInvest, PDP et Shared, puis identifier ce qui devrait plutôt vivre dans Uimmo [source locale non partagée].

1re PR attendue : prise en main, même fake — réorganisation, rangement, correctif (ex. un type de badge déjà changé dans Figma mais pas en code).

Composant Emplacement actuel Story ? Équivalent Figma Uimmo Décision Ticket
à remplir à l'inventaire

Questions encore ouvertes

Les questions 1–4 de la V0 (publication, plugin, review, apps) sont tranchées. Il reste :

  1. Répartition du travail entre PD — attribuer explicitement chaque action pour éviter les collisions sur les mêmes fichiers.
  2. Format de la doc composant une fois le plugin activé (miroir des descriptions Figma ? do/don't ?).
  3. Outcome — toujours [outcome non formulé].
  4. Lien éventuel avec BRI-1368 (CI Design QA qui lit Storybook) — non évoqué dans le meeting.

Pages liées

Sources