Aller au contenu principal

Composants

Statut​

Document de cadrage frontend — version initiale.

Objectif​

Les composants frontend DMV doivent être réutilisables, lisibles et adaptés à des usages concrets.

La priorité est de créer des composants qui simplifient les parcours, pas une bibliothèque abstraite sans besoin immédiat.

État actuel visible​

Le site public contient notamment :

  • headers et footer ;
  • modales ;
  • mur de ville ;
  • filtres ;
  • drawer de ville ;
  • cartes de publication ;
  • feed de publications ;
  • carrousel ;
  • gestionnaire de documents ;
  • galerie de documents ;
  • carte Leaflet.

Le backoffice contient notamment :

  • layout ;
  • panels ;
  • switch ;
  • disclosure ;
  • uploaders médias ;
  • tag picker ;
  • modales d'import ;
  • pages métier composées avec Tailwind.

Catégories de composants​

CatégorieExemples
UI de baseboutons, champs, badges, loaders, switchs.
Layoutheaders, navigation, panels, conteneurs de page.
Métierpublication card, acteur preview, document manager, tag picker.
Interactionmodales, drawers, filtres, carrousels.
Donnéestableaux, listes, états vides, erreurs.

Principes​

  • Un composant doit avoir une responsabilité claire.
  • Les composants métier peuvent rester proches du domaine.
  • Les composants UI génériques doivent être plus stables.
  • Les props doivent rester compréhensibles.
  • Les états doivent être prévus dès le départ.
  • L'accessibilité doit être intégrée, pas ajoutée après coup.

Vision cible​

La cible est de distinguer :

  • composants UI partagés ;
  • composants métier DMV public ;
  • composants métier backoffice ;
  • composants futurs pour PlayLoop, AssoSuite et Mairie.

La mutualisation doit être pragmatique : partager ce qui est réellement commun, éviter de forcer les usages différents.

Checklist composant​

  • Nom clair.
  • États loading/empty/error si nécessaire.
  • Accessibilité clavier et lecteur d'écran selon usage.
  • Comportement mobile.
  • Taille tactile suffisante.
  • Pas de logique métier sensible cachée dans l'UI.
  • Pas d'appel données si un parent ou service peut mieux l'isoler.

Points à clarifier​

  • Convention de nommage des composants.
  • Niveau de Storybook ou documentation visuelle souhaité.
  • Politique de composants client dans Next.js.
  • Stratégie de refactor des composants backoffice volumineux.