@rsuci/shared-form-components 1.0.0

package/README.md

@@ -0,0 +1,152 @@
+# @rsu/shared-form-components
+
+Composants React partagés pour le rendu des formulaires d'enquête RSU v2.
+
+## 📦 Installation
+
+```bash
+npm install @rsu/shared-form-components
+```
+
+## 🎯 Objectif
+
+Ce package centralise tous les composants de rendu de formulaires pour :
+- **Frontend Admin** (`rsu_app_frontend_v2`) : Gestion interne des enquêtes
+- **Frontend Public** (`rsu_public_frontend_v2`) : Collecte de données par le public
+
+## 🚀 Utilisation
+
+### Exemple basique
+
+```typescript
+import { FormRenderer } from '@rsu/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 '@rsu/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)
+- ✅ Extraction depuis rsu_app_frontend_v2
+- ✅ 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
+
+RSU v2 Architecture Team
+
+## 📄 License
+
+UNLICENSED - Usage interne uniquement

package/dist/components/GroupRenderer.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Composant de rendu des groupes pour les formulaires d'enquête
+ * RSU v2 - Moteur de Rendu des Formulaires d'Enquête
+ */
+import React from 'react';
+import { GroupeFormulaire, EnqueteReponse, VariableValue, ValidationError, AutoAction } from '../types/enquete';
+import { ConditionEngine } from '../lib/condition-engine';
+interface GroupRendererProps {
+    groupe: GroupeFormulaire;
+    responses: Record<string, EnqueteReponse>;
+    conditionEngine: ConditionEngine;
+    onChange: (variableCode: string, value: VariableValue, iteration?: number) => void;
+    onValidation: (errors: ValidationError[]) => void;
+    onAutoAction?: (actions: AutoAction[]) => void;
+    disabled?: boolean;
+}
+declare const GroupRenderer: React.FC<GroupRendererProps>;
+export default GroupRenderer;
+//# sourceMappingURL=GroupRenderer.d.ts.map

package/dist/components/GroupRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GroupRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,eAAe,EACf,UAAU,EACX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,UAAU,kBAAkB;IAC1B,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC1C,eAAe,EAAE,eAAe,CAAC;IACjC,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnF,YAAY,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiJD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkS/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/GroupRenderer.js

@@ -0,0 +1,214 @@
+/**
+ * Composant de rendu des groupes pour les formulaires d'enquête
+ * RSU v2 - Moteur de Rendu des Formulaires d'Enquête
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Plus, Trash2, Users, AlertCircle } from 'lucide-react';
+import VariableRenderer from './VariableRenderer';
+// Composant pour gérer les groupes multiples
+const MultipleGroupManager = ({ groupe, entries, onAddEntry, onRemoveEntry, children }) => {
+    const canAddEntry = entries.length < (groupe.configMultiple?.maxIterations || 50);
+    const canRemoveEntry = entries.length > (groupe.configMultiple?.minIterations || 1);
+    return (_jsxs("div", { className: "multiple-group-manager space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsxs("div", { className: "flex items-center space-x-3", children: [_jsx(Users, { className: "h-5 w-5 text-blue-600" }), _jsxs("div", { children: [_jsx("h3", { className: "font-medium text-blue-900", children: groupe.designation }), _jsxs("p", { className: "text-sm text-blue-700", children: [entries.length, " ", entries.length > 1 ? 'entrées' : 'entrée', groupe.configMultiple?.maxIterations && (_jsxs("span", { children: [" (max: ", groupe.configMultiple.maxIterations, ")"] }))] })] })] }), groupe.configMultiple?.allowManualControl && (_jsxs("button", { onClick: onAddEntry, disabled: !canAddEntry, className: `flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${canAddEntry
+                            ? 'bg-green-600 text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500'
+                            : 'bg-gray-300 text-gray-500 cursor-not-allowed'}`, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), "Ajouter"] }))] }), _jsx("div", { className: "space-y-4", children: children })] }));
+};
+// Composant pour une entrée individuelle dans un groupe multiple
+const MultipleGroupEntry = ({ groupe, iterationNumber, totalIterations, visibleVariables, responses, onChange, onRemove, canRemove, disabled }) => {
+    const entryTitle = groupe.configMultiple?.labelTemplate?.replace('{index}', iterationNumber.toString()) ||
+        `${groupe.designation} ${iterationNumber}`;
+    return (_jsxs("div", { className: "iteration-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("h4", { className: "text-lg font-medium text-gray-800 flex items-center", children: [_jsx("span", { className: "w-6 h-6 bg-blue-100 text-blue-800 rounded-full flex items-center justify-center text-sm font-semibold mr-2", children: iterationNumber }), entryTitle] }), groupe.configMultiple?.allowManualControl && canRemove && onRemove && (_jsx("button", { onClick: onRemove, disabled: disabled, className: "p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed", title: "Supprimer cette entr\u00E9e", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }), _jsx("div", { className: "variables-grid grid grid-cols-1 md:grid-cols-2 gap-4", children: visibleVariables.map(variable => {
+                    const responseKey = `${variable.code}_${iterationNumber}`;
+                    // Extraire les variables roster si c'est un type ROSTERCHECK ou ROSTERLIST
+                    const rosterVariables = (variable.typeCode === 'ROSTERCHECK' || variable.typeCode === 'ROSTERLIST')
+                        ? variable.rosterVariables
+                        : undefined;
+                    // 🔍 LOG: Vérifier la transmission des rosterVariables dans MultipleGroupEntry
+                    if (variable.typeCode === 'ROSTERCHECK' || variable.typeCode === 'ROSTERLIST') {
+                        console.log(`🔍 [GroupRenderer/MultipleGroupEntry] Variable ${variable.code}:`, {
+                            typeCode: variable.typeCode,
+                            rosterVariables: rosterVariables,
+                            rosterVariablesType: typeof rosterVariables,
+                            isArray: Array.isArray(rosterVariables),
+                            length: Array.isArray(rosterVariables) ? rosterVariables.length : 'N/A'
+                        });
+                    }
+                    return (_jsx(VariableRenderer, { variable: variable, value: responses[responseKey]?.valeur, onChange: (value) => onChange(responseKey, value, iterationNumber), numeroMembre: iterationNumber, disabled: disabled, rosterVariables: rosterVariables }, responseKey));
+                }) })] }));
+};
+// Composant principal GroupRenderer
+const GroupRenderer = ({ groupe, responses, conditionEngine, onChange, onValidation, onAutoAction, disabled = false }) => {
+    const [multipleEntries, setMultipleEntries] = useState([1]);
+    const [validationErrors, setValidationErrors] = useState([]);
+    // Obtenir le nombre d'itérations depuis la variable de contrôle
+    const getIterationCount = () => {
+        if (!groupe.estMultiple || !groupe.configMultiple?.variableControle) {
+            return 1;
+        }
+        const controlValue = responses[groupe.configMultiple.variableControle]?.valeur;
+        if (!controlValue || controlValue < 1) {
+            return groupe.configMultiple.minIterations || 1;
+        }
+        return Math.min(controlValue, groupe.configMultiple.maxIterations || 50);
+    };
+    // Filtrer les variables visibles selon les conditions (avec support des nouvelles fonctions)
+    const getVisibleVariables = () => {
+        console.log('📋 [GroupRenderer] Filtering visible variables for group:', groupe.designation);
+        return groupe.variables.filter(variable => {
+            console.log(`📋 [GroupRenderer] Processing variable: ${variable.code} (${variable.designation})`);
+            console.log(`📋 [GroupRenderer] - estVisible: ${variable.estVisible}`);
+            console.log(`📋 [GroupRenderer] - conditionsAffichage: ${variable.conditionsAffichage}`);
+            if (!variable.conditionsAffichage) {
+                console.log(`📋 [GroupRenderer] - No condition, returning estVisible: ${variable.estVisible}`);
+                return variable.estVisible;
+            }
+            // Évaluer la condition avec le moteur étendu
+            const isVisible = conditionEngine.evaluate(variable.conditionsAffichage);
+            console.log(`📋 [GroupRenderer] - Condition evaluation result: ${isVisible}`);
+            const finalResult = variable.estVisible && isVisible;
+            console.log(`📋 [GroupRenderer] - Final visibility: ${finalResult} (estVisible: ${variable.estVisible} && condition: ${isVisible})`);
+            return finalResult;
+        });
+    };
+    const visibleVariables = getVisibleVariables();
+    // Mettre à jour le nombre d'itérations quand la variable de contrôle change
+    useEffect(() => {
+        if (groupe.estMultiple && groupe.configMultiple?.variableControle) {
+            const newCount = getIterationCount();
+            if (groupe.configMultiple.allowManualControl) {
+                // Pour les groupes avec contrôle manuel, ajuster le nombre d'entrées
+                if (newCount > multipleEntries.length) {
+                    const additionalEntries = Array.from({ length: newCount - multipleEntries.length }, (_, i) => multipleEntries.length + i + 1);
+                    setMultipleEntries([...multipleEntries, ...additionalEntries]);
+                }
+                else if (newCount < multipleEntries.length) {
+                    setMultipleEntries(multipleEntries.slice(0, newCount));
+                }
+            }
+            else {
+                // Pour les groupes automatiques, générer les entrées
+                setMultipleEntries(Array.from({ length: newCount }, (_, i) => i + 1));
+            }
+        }
+    }, [responses[groupe.configMultiple?.variableControle || '']?.valeur, groupe]);
+    // Validation du groupe
+    useEffect(() => {
+        const errors = [];
+        visibleVariables.forEach(variable => {
+            if (variable.estObligatoire) {
+                if (groupe.estMultiple) {
+                    // Valider toutes les itérations
+                    multipleEntries.forEach(iterationNumber => {
+                        const responseKey = `${variable.code}_${iterationNumber}`;
+                        const response = responses[responseKey];
+                        if (!response || isEmpty(response.valeur)) {
+                            const entryLabel = groupe.configMultiple?.labelTemplate?.replace('{index}', iterationNumber.toString()) ||
+                                `Entrée ${iterationNumber}`;
+                            errors.push({
+                                variableCode: responseKey,
+                                message: `${variable.designation} est obligatoire (${entryLabel})`,
+                                type: 'required'
+                            });
+                        }
+                    });
+                }
+                else {
+                    // Groupe simple
+                    const response = responses[variable.code];
+                    if (!response || isEmpty(response.valeur)) {
+                        errors.push({
+                            variableCode: variable.code,
+                            message: `${variable.designation} est obligatoire`,
+                            type: 'required'
+                        });
+                    }
+                }
+            }
+        });
+        setValidationErrors(errors);
+        onValidation(errors);
+    }, [responses, visibleVariables, multipleEntries, groupe, onValidation]);
+    // Exécuter les actions automatiques quand les réponses changent
+    useEffect(() => {
+        if (!onAutoAction)
+            return;
+        const executeAutoActions = () => {
+            const allActions = [];
+            // Parcourir toutes les variables pour détecter les actions automatiques
+            visibleVariables.forEach(variable => {
+                if (variable.conditionsAffichage && variable.conditionsAffichage.includes('setValeur(')) {
+                    // Évaluer la condition pour déclencher les actions automatiques
+                    conditionEngine.evaluate(variable.conditionsAffichage);
+                    // Récupérer les actions générées
+                    const actions = conditionEngine.getAutoActions();
+                    allActions.push(...actions);
+                }
+            });
+            if (allActions.length > 0) {
+                onAutoAction(allActions);
+                conditionEngine.clearAutoActions(); // Nettoyer après exécution
+            }
+        };
+        // Exécuter avec un délai pour éviter les boucles infinies
+        const timeoutId = setTimeout(executeAutoActions, 100);
+        return () => clearTimeout(timeoutId);
+    }, [responses, visibleVariables, conditionEngine, onAutoAction]);
+    // Gestion des entrées multiples
+    const addEntry = () => {
+        if (!groupe.configMultiple?.allowManualControl)
+            return;
+        const maxIterations = groupe.configMultiple.maxIterations || 50;
+        if (multipleEntries.length < maxIterations) {
+            const newEntryNumber = Math.max(...multipleEntries) + 1;
+            setMultipleEntries([...multipleEntries, newEntryNumber]);
+        }
+    };
+    const removeEntry = (index) => {
+        if (!groupe.configMultiple?.allowManualControl)
+            return;
+        if (multipleEntries.length <= (groupe.configMultiple.minIterations || 1))
+            return;
+        const entryNumber = multipleEntries[index];
+        const newEntries = multipleEntries.filter((_, i) => i !== index);
+        setMultipleEntries(newEntries);
+        // Supprimer les réponses de cette itération
+        visibleVariables.forEach(variable => {
+            const responseKey = `${variable.code}_${entryNumber}`;
+            if (responses[responseKey]) {
+                onChange(responseKey, null, entryNumber);
+            }
+        });
+    };
+    const isEmpty = (value) => {
+        return value === null ||
+            value === undefined ||
+            value === '' ||
+            (Array.isArray(value) && value.length === 0);
+    };
+    // Vérifier si le groupe doit être affiché
+    const shouldShowGroup = !groupe.conditionsAffichage ||
+        conditionEngine.evaluate(groupe.conditionsAffichage);
+    if (!shouldShowGroup) {
+        return null;
+    }
+    // Affichage des erreurs de validation
+    const ErrorSummary = () => {
+        if (validationErrors.length === 0)
+            return null;
+        return (_jsxs("div", { className: "mb-4 p-3 bg-red-50 border border-red-200 rounded-lg", children: [_jsxs("div", { className: "flex items-center mb-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-red-600 mr-2" }), _jsxs("h4", { className: "text-sm font-medium text-red-800", children: ["Erreurs de validation (", validationErrors.length, ")"] })] }), _jsxs("ul", { className: "text-sm text-red-700 space-y-1", children: [validationErrors.slice(0, 5).map((error, index) => (_jsxs("li", { children: ["\u2022 ", error.message] }, index))), validationErrors.length > 5 && (_jsxs("li", { className: "text-red-600 font-medium", children: ["... et ", validationErrors.length - 5, " autres erreurs"] }))] })] }));
+    };
+    if (groupe.estMultiple) {
+        return (_jsxs("div", { className: "group-renderer-multiple", children: [_jsx(ErrorSummary, {}), _jsx(MultipleGroupManager, { groupe: groupe, entries: multipleEntries, onAddEntry: addEntry, onRemoveEntry: removeEntry, children: multipleEntries.map((iterationNumber, index) => (_jsx(MultipleGroupEntry, { groupe: groupe, iterationNumber: iterationNumber, totalIterations: multipleEntries.length, visibleVariables: visibleVariables, responses: responses, onChange: onChange, onRemove: () => removeEntry(index), canRemove: multipleEntries.length > (groupe.configMultiple?.minIterations || 1), disabled: disabled }, iterationNumber))) })] }));
+    }
+    // Groupe simple
+    return (_jsxs("div", { className: "group-renderer-simple", children: [_jsxs("div", { className: "mb-6", children: [_jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: groupe.designation }), visibleVariables.length > 0 && (_jsxs("p", { className: "text-gray-600 text-sm", children: [visibleVariables.length, " ", visibleVariables.length > 1 ? 'champs' : 'champ'] }))] }), _jsx(ErrorSummary, {}), _jsx("div", { className: "variables-container space-y-6", children: visibleVariables.map(variable => {
+                    // Extraire les variables roster si c'est un type ROSTERCHECK ou ROSTERLIST
+                    const rosterVariables = (variable.typeCode === 'ROSTERCHECK' || variable.typeCode === 'ROSTERLIST')
+                        ? variable.rosterVariables
+                        : undefined;
+                    return (_jsx(VariableRenderer, { variable: variable, value: responses[variable.code]?.valeur, onChange: (value) => onChange(variable.code, value), disabled: disabled, rosterVariables: rosterVariables }, variable.code));
+                }) }), visibleVariables.length === 0 && (_jsx("div", { className: "text-center py-8 text-gray-500", children: _jsx("p", { children: "Aucun champ \u00E0 afficher dans ce groupe" }) }))] }));
+};
+export default GroupRenderer;

package/dist/components/IdDocInput.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Composant IdDocInput - Capture et upload de documents d'identité
+ * RSU v2 - Moteur de Rendu des Formulaires d'Enquête
+ *
+ * Ce composant permet de capturer ou uploader un document d'identité
+ * (CNI, passeport, carte électorale, etc.) avec prévisualisation.
+ */
+import React from 'react';
+import { VariableFormulaire, VariableValue } from '../types/enquete';
+export interface IdDocInputProps {
+    variable: VariableFormulaire;
+    value: VariableValue;
+    onChange: (value: VariableValue) => void;
+    onBlur?: () => void;
+    error?: string;
+    disabled?: boolean;
+}
+declare const IdDocInput: React.FC<IdDocInputProps>;
+export default IdDocInput;
+//# sourceMappingURL=IdDocInput.d.ts.map

package/dist/components/IdDocInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IdDocInput.d.ts","sourceRoot":"","sources":["../../src/components/IdDocInput.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIrE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuBD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkYzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/IdDocInput.js

@@ -0,0 +1,188 @@
+/**
+ * Composant IdDocInput - Capture et upload de documents d'identité
+ * RSU v2 - Moteur de Rendu des Formulaires d'Enquête
+ *
+ * Ce composant permet de capturer ou uploader un document d'identité
+ * (CNI, passeport, carte électorale, etc.) avec prévisualisation.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from 'react';
+import { AlertCircle, Camera, Upload, X, FileText, CreditCard } from 'lucide-react';
+// Types de documents d'identité supportés
+const DOC_TYPES = [
+    { code: 'CNI', label: 'Carte Nationale d\'Identité' },
+    { code: 'PASSEPORT', label: 'Passeport' },
+    { code: 'CARTE_ELECTEUR', label: 'Carte d\'Électeur' },
+    { code: 'PERMIS', label: 'Permis de Conduire' },
+    { code: 'AUTRE', label: 'Autre Document' }
+];
+const IdDocInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
+    const [preview, setPreview] = useState(null);
+    const [captureMode, setCaptureMode] = useState('upload');
+    const [stream, setStream] = useState(null);
+    const [isCapturing, setIsCapturing] = useState(false);
+    const fileInputRef = useRef(null);
+    const videoRef = useRef(null);
+    const canvasRef = useRef(null);
+    // Parser la valeur actuelle
+    const currentData = React.useMemo(() => {
+        if (!value)
+            return { docType: '' };
+        if (typeof value === 'string') {
+            try {
+                return JSON.parse(value);
+            }
+            catch {
+                return { docType: '' };
+            }
+        }
+        if (typeof value === 'object') {
+            return value;
+        }
+        return { docType: '' };
+    }, [value]);
+    // Mettre à jour l'aperçu quand la valeur change
+    useEffect(() => {
+        if (currentData.file) {
+            const reader = new FileReader();
+            reader.onload = (e) => setPreview(e.target?.result);
+            reader.readAsDataURL(currentData.file);
+        }
+        else {
+            setPreview(null);
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+        }
+    }, [currentData.file]);
+    // Nettoyer le stream quand le composant est démonté
+    useEffect(() => {
+        return () => {
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+            }
+        };
+    }, [stream]);
+    // Mettre à jour les données
+    const updateData = (updates) => {
+        const newData = { ...currentData, ...updates };
+        onChange(JSON.stringify(newData));
+    };
+    // Gérer la sélection de fichier
+    const handleFileSelect = (event) => {
+        if (disabled)
+            return;
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        processFile(file);
+    };
+    // Traiter le fichier sélectionné
+    const processFile = (file) => {
+        // Validation de la taille
+        const maxSize = variable.proprietes?.maxFileSize || 10 * 1024 * 1024; // 10MB par défaut
+        if (file.size > maxSize) {
+            alert(`Fichier trop volumineux. Taille maximum: ${Math.round(maxSize / 1024 / 1024)}MB`);
+            return;
+        }
+        // Validation du type
+        const acceptedTypes = variable.proprietes?.acceptedTypes || [
+            'image/jpeg', 'image/png', 'image/webp',
+            'application/pdf'
+        ];
+        if (!acceptedTypes.includes(file.type)) {
+            alert(`Type de fichier non supporté. Types acceptés: ${acceptedTypes.join(', ')}`);
+            return;
+        }
+        // Sauvegarder le fichier
+        updateData({
+            file,
+            fileName: file.name,
+            fileSize: file.size,
+            fileType: file.type,
+            timestamp: new Date(),
+            source: captureMode === 'camera' ? 'camera' : 'upload'
+        });
+    };
+    // Démarrer la caméra
+    const startCamera = async () => {
+        if (disabled)
+            return;
+        try {
+            setIsCapturing(true);
+            const mediaStream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    facingMode: 'environment' // Caméra arrière par défaut
+                }
+            });
+            setStream(mediaStream);
+            if (videoRef.current) {
+                videoRef.current.srcObject = mediaStream;
+            }
+        }
+        catch (error) {
+            console.error('Erreur accès caméra:', error);
+            alert('Impossible d\'accéder à la caméra. Vérifiez les permissions.');
+            setIsCapturing(false);
+        }
+    };
+    // Arrêter la caméra
+    const stopCamera = () => {
+        if (stream) {
+            stream.getTracks().forEach(track => track.stop());
+            setStream(null);
+        }
+        setIsCapturing(false);
+    };
+    // Capturer la photo
+    const capturePhoto = () => {
+        if (!videoRef.current || !canvasRef.current)
+            return;
+        const video = videoRef.current;
+        const canvas = canvasRef.current;
+        const context = canvas.getContext('2d');
+        if (!context)
+            return;
+        // Définir les dimensions du canvas
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        // Dessiner l'image du video sur le canvas
+        context.drawImage(video, 0, 0);
+        // Convertir en blob
+        canvas.toBlob((blob) => {
+            if (blob) {
+                const file = new File([blob], `iddoc_${Date.now()}.jpg`, { type: 'image/jpeg' });
+                processFile(file);
+                stopCamera();
+            }
+        }, 'image/jpeg', 0.9);
+    };
+    // Supprimer le document
+    const clearDocument = () => {
+        updateData({
+            file: undefined,
+            fileName: undefined,
+            fileSize: undefined,
+            fileType: undefined,
+            timestamp: undefined,
+            source: undefined
+        });
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Type de document" }), _jsxs("select", { value: currentData.docType || '', onChange: (e) => updateData({ docType: e.target.value }), onBlur: onBlur, disabled: disabled, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900 ${error ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}`, children: [_jsx("option", { value: "", children: "S\u00E9lectionner le type..." }), DOC_TYPES.map((docType) => (_jsx("option", { value: docType.code, children: docType.label }, docType.code)))] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Num\u00E9ro du document (optionnel)" }), _jsx("input", { type: "text", value: currentData.docNumber || '', onChange: (e) => updateData({ docNumber: e.target.value }), onBlur: onBlur, placeholder: "Ex: CI-123456789", disabled: disabled, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900 ${error ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}` })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Image du document" }), _jsxs("div", { className: "flex space-x-2 mb-3", children: [_jsxs("button", { type: "button", onClick: () => {
+                                    setCaptureMode('upload');
+                                    stopCamera();
+                                }, disabled: disabled, className: `flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-colors ${captureMode === 'upload'
+                                    ? 'bg-blue-600 text-white'
+                                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`, children: [_jsx(Upload, { className: "w-4 h-4 mr-2" }), "Upload"] }), _jsxs("button", { type: "button", onClick: () => {
+                                    setCaptureMode('camera');
+                                    if (!isCapturing)
+                                        startCamera();
+                                }, disabled: disabled, className: `flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-colors ${captureMode === 'camera'
+                                    ? 'bg-blue-600 text-white'
+                                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`, children: [_jsx(Camera, { className: "w-4 h-4 mr-2" }), "Cam\u00E9ra"] })] }), captureMode === 'upload' && !preview && (_jsxs("div", { className: "relative", children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*,application/pdf", onChange: handleFileSelect, disabled: disabled, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer" }), _jsxs("div", { className: `flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-lg ${error ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white hover:border-green-500 cursor-pointer'}`, children: [_jsx(CreditCard, { className: "w-10 h-10 text-gray-400 mb-2" }), _jsx("span", { className: "text-sm text-gray-600", children: "Cliquez ou glissez-d\u00E9posez" }), _jsx("span", { className: "text-xs text-gray-400 mt-1", children: "JPG, PNG, PDF - Max 10MB" })] })] })), captureMode === 'camera' && (_jsxs("div", { className: "space-y-3", children: [isCapturing && (_jsxs("div", { className: "relative", children: [_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, className: "w-full max-w-md mx-auto rounded-lg border border-gray-300" }), _jsxs("div", { className: "flex justify-center space-x-2 mt-2", children: [_jsxs("button", { type: "button", onClick: capturePhoto, disabled: disabled, className: "flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50", children: [_jsx(Camera, { className: "w-4 h-4 mr-2" }), "Capturer"] }), _jsxs("button", { type: "button", onClick: stopCamera, disabled: disabled, className: "flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50", children: [_jsx(X, { className: "w-4 h-4 mr-2" }), "Arr\u00EAter"] })] })] })), !isCapturing && !preview && (_jsxs("button", { type: "button", onClick: startCamera, disabled: disabled, className: "w-full flex items-center justify-center px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50", children: [_jsx(Camera, { className: "w-5 h-5 mr-2" }), "D\u00E9marrer la cam\u00E9ra"] }))] })), _jsx("canvas", { ref: canvasRef, style: { display: 'none' } }), preview && (_jsxs("div", { className: "relative", children: [currentData.fileType?.startsWith('image/') ? (_jsx("img", { src: preview, alt: "Aper\u00E7u du document", className: "w-full max-w-md mx-auto rounded-lg shadow-md border border-gray-200" })) : (_jsxs("div", { className: "flex items-center justify-center p-6 bg-gray-100 rounded-lg", children: [_jsx(FileText, { className: "w-10 h-10 text-gray-500 mr-3" }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-gray-700", children: currentData.fileName }), _jsx("p", { className: "text-xs text-gray-500", children: currentData.fileSize ? `${Math.round(currentData.fileSize / 1024)} KB` : '' })] })] })), _jsx("button", { type: "button", onClick: clearDocument, disabled: disabled, className: "absolute top-2 right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50", children: _jsx(X, { className: "w-4 h-4" }) })] })), currentData.fileName && (_jsxs("div", { className: "p-2 bg-green-50 border border-green-200 rounded text-sm", children: [_jsxs("div", { className: "flex items-center text-green-800", children: [_jsx(FileText, { className: "w-4 h-4 mr-2" }), _jsx("span", { className: "font-medium", children: currentData.fileName })] }), currentData.source && (_jsxs("p", { className: "text-xs text-green-600 mt-1", children: ["Source: ", currentData.source === 'camera' ? 'Caméra' : 'Upload'] }))] }))] }), error && (_jsxs("div", { className: "flex items-center space-x-1 text-red-600 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx("span", { children: error })] }))] }));
+};
+export default IdDocInput;

package/dist/components/VariableRenderer.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { VariableFormulaire, VariableValue, EnqueteReponse } from '../types/enquete';
+import type { MenageCompletDto } from '../types/menages';
+import type { EnqueteCompletDto } from '../types/enquete-service';
+export interface VariableRendererProps {
+    variable: VariableFormulaire;
+    value: VariableValue;
+    onChange: (value: VariableValue) => void;
+    onBlur?: () => void;
+    error?: string;
+    disabled?: boolean;
+    numeroMembre?: number;
+    valeurMin?: number;
+    onFillFormFromMenage?: (menageData: MenageCompletDto) => void;
+    onFillFormFromEnquete?: (enqueteData: EnqueteCompletDto) => void;
+    formulaireVariables?: VariableFormulaire[];
+    rosterVariables?: Array<{
+        code: string;
+        ordre: number;
+        designation?: string;
+        valeur?: string;
+    }>;
+    allResponses?: Record<string, EnqueteReponse>;
+    RosterCheckInput?: React.ComponentType<VariableRendererProps>;
+    RosterListInput?: React.ComponentType<VariableRendererProps>;
+    interpolateVariableLabel?: (label: string, responses: Record<string, EnqueteReponse>, numeroMembre?: number) => string;
+    services?: any;
+    geographicComponents?: any;
+}
+declare const GeographicFallback: React.FC<VariableRendererProps>;
+declare const getVariableRenderer: (typeCode: string, RosterCheckInput?: React.ComponentType<VariableRendererProps>, RosterListInput?: React.ComponentType<VariableRendererProps>) => React.ComponentType<VariableRendererProps>;
+declare const VariableRenderer: React.FC<VariableRendererProps>;
+export default VariableRenderer;
+export { getVariableRenderer, GeographicFallback };
+//# sourceMappingURL=VariableRenderer.d.ts.map

package/dist/components/VariableRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableRenderer.d.ts","sourceRoot":"","sources":["../../src/components/VariableRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgCxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9D,qBAAqB,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjE,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC3C,eAAe,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChG,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAG9C,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC9D,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC7D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAGvH,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,oBAAoB,CAAC,EAAE,GAAG,CAAC;CAC5B;AAGD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAQvD,CAAC;AAGF,QAAA,MAAM,mBAAmB,GACvB,UAAU,MAAM,EAChB,mBAAmB,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,EAC7D,kBAAkB,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,KAC3D,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAgD3C,CAAC;AAGF,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+FrD,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC"}