@msb/shared-form-components

Composants React partagés pour le rendu des formulaires d'enquête RSU v2.

📦 Installation

npm install @msb/shared-form-components

🎯 Objectif

Ce package centralise tous les composants de rendu de formulaires d'enquêtes dynamique afin de les réutiliser dans diverses applications :

🚀 Utilisation

Exemple basique

import { FormRenderer } from '@msb/shared-form-components';

function EnquetePage() {
  const [enquete, setEnquete] = useState<EnqueteInstance>({...});
  
  return (
    <FormRenderer
      enquete={enquete}
      formulaire={formulaire}
      disabled={false}
      onSave={handleSave}
      onComplete={handleComplete}
      onCancel={handleCancel}
    />
  );
}

Avec injection de dépendances (Frontend Admin)

import { FormRenderer, FormRendererServices } from '@msb/shared-form-components';
import { menagesService, enquetesService } from '@/lib/api';
import DistrictSelector from '@/components/selectors/geographic/DistrictSelector';
// ... autres imports

const services: FormRendererServices = {
  fetchMenages: () => menagesService.getAll(),
  fetchEnquetes: (filter) => enquetesService.getFiltered(filter),
};

const geographicComponents = {
  DistrictSelectorComponent: DistrictSelector,
  RegionSelectorComponent: RegionSelector,
  // ... autres composants
};

<FormRenderer
  enquete={enquete}
  formulaire={formulaire}
  services={services}
  geographicComponents={geographicComponents}
  onSave={handleSave}
/>

📋 Types supportés

Types de base

• STRING, TEXTE, NUMERIQUE, DATE, DATEHEURE, HOUR
• CHECKBOX, RADIO, LISTE, COMBOBOX, PHONE

Types avancés

• GPS, PHOTO, IMAGE
• LABEL, PANEL

Types géographiques

• DISTRICT, REGION, DEPARTEMENT, SOUSPREFECTURE, QUARTIER, VILLAGE, RSU

Types sélecteurs

• MENAGE, ENQUETE

Types rosters (⭐ avec rendu natif)

• ROSTERCHECK, ROSTERLIST

Types documents

• IDDOC

🔧 Architecture

Injection de dépendances

Le package utilise le pattern d'injection de dépendances pour :

• Services API : FormRendererServices (optionnel)
• Composants géographiques : GeographicComponents (optionnel)

Cela permet :

• ✅ Utilisation avec différentes API
• ✅ Réutilisation de composants existants
• ✅ Flexibilité maximale

Support des rosters

Les rosters (ROSTERCHECK et ROSTERLIST) sont automatiquement supportés avec :

• Rendu des variables selon leur type natif (RADIO, COMBOBOX, etc.)
• Indépendance des variables entre panels
• Comportement conditionnel pour ROSTERCHECK (checkbox + masquage)

📝 Changelog

v1.0.0 (2025-11-25)

• ✅ Support rosters avec RosterPanel
• ✅ Indépendance variables entre panels
• ✅ Comportement conditionnel ROSTERCHECK
• ✅ Injection de dépendances pour services et composants géographiques
• ✅ 27 types de variables supportés

🏗️ Développement

Build

npm run build

Watch mode

npm run watch

Tests

npm test
npm run test:coverage

📚 Documentation technique

• Plan de mutualisation : docs/mutualisation_FormRenderer.md
• Refonte rosters : docs/ROSTER_PANELS_FINAL.md

👥 Auteurs

Mosobi Architecture Team

📄 License

UNLICENSED - Usage interne uniquement