npm package: @msbci/form-components
Description: Composants réutilisables de rendu de formulaires dynamiques
Author: MSBCI Team
Latest version: 1.0.0

# @msb/shared-form-components

Composants React partagés pour le rendu des formulaires d'enquête RSU v2.

## 📦 Installation

```bash
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

```typescript
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)

```typescript
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

```bash
npm run build
```

### Watch mode

```bash
npm run watch
```

### Tests

```bash
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