@rsuci/shared-form-components 1.0.109 → 1.0.111
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +141 -45
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -1,29 +1,31 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @rsuci/shared-form-components
|
|
2
2
|
|
|
3
3
|
Composants React partagés pour le rendu des formulaires d'enquête RSU v2.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @
|
|
8
|
+
npm install @rsuci/shared-form-components
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Objectif
|
|
12
12
|
|
|
13
13
|
Ce package centralise tous les composants de rendu de formulaires pour :
|
|
14
|
+
|
|
14
15
|
- **Frontend Admin** (`rsu_app_frontend_v2`) : Gestion interne des enquêtes
|
|
15
16
|
- **Frontend Public** (`rsu_public_frontend_v2`) : Collecte de données par le public
|
|
17
|
+
- **App Mobile** (`rsu_app_mobile_react`) : Collecte terrain (types réutilisés, rendu natif séparé)
|
|
16
18
|
|
|
17
|
-
##
|
|
19
|
+
## Utilisation
|
|
18
20
|
|
|
19
21
|
### Exemple basique
|
|
20
22
|
|
|
21
23
|
```typescript
|
|
22
|
-
import { FormRenderer } from '@
|
|
24
|
+
import { FormRenderer } from '@rsuci/shared-form-components';
|
|
23
25
|
|
|
24
26
|
function EnquetePage() {
|
|
25
27
|
const [enquete, setEnquete] = useState<EnqueteInstance>({...});
|
|
26
|
-
|
|
28
|
+
|
|
27
29
|
return (
|
|
28
30
|
<FormRenderer
|
|
29
31
|
enquete={enquete}
|
|
@@ -40,10 +42,9 @@ function EnquetePage() {
|
|
|
40
42
|
### Avec injection de dépendances (Frontend Admin)
|
|
41
43
|
|
|
42
44
|
```typescript
|
|
43
|
-
import { FormRenderer, FormRendererServices } from '@
|
|
45
|
+
import { FormRenderer, FormRendererServices } from '@rsuci/shared-form-components';
|
|
44
46
|
import { menagesService, enquetesService } from '@/lib/api';
|
|
45
47
|
import DistrictSelector from '@/components/selectors/geographic/DistrictSelector';
|
|
46
|
-
// ... autres imports
|
|
47
48
|
|
|
48
49
|
const services: FormRendererServices = {
|
|
49
50
|
fetchMenages: () => menagesService.getAll(),
|
|
@@ -65,59 +66,159 @@ const geographicComponents = {
|
|
|
65
66
|
/>
|
|
66
67
|
```
|
|
67
68
|
|
|
68
|
-
##
|
|
69
|
+
## Types supportés (42 types)
|
|
69
70
|
|
|
70
|
-
### Types de
|
|
71
|
-
- STRING, TEXTE, NUMERIQUE, DATE, DATEHEURE, HOUR
|
|
72
|
-
- CHECKBOX, RADIO, LISTE, COMBOBOX, PHONE
|
|
71
|
+
### Types de saisie texte
|
|
73
72
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
| Type | Description |
|
|
74
|
+
| ------------- | -------------------------------- |
|
|
75
|
+
| `STRING` | Champ texte court (une ligne) |
|
|
76
|
+
| `TEXTE` | Champ texte long (textarea) |
|
|
77
|
+
| `EMAIL` | Champ email avec validation |
|
|
78
|
+
| `PHONE` | Numéro de téléphone |
|
|
79
|
+
| `MOBILEPHONE` | Numéro de téléphone mobile |
|
|
77
80
|
|
|
78
|
-
### Types
|
|
79
|
-
|
|
81
|
+
### Types numériques et temporels
|
|
82
|
+
|
|
83
|
+
| Type | Description |
|
|
84
|
+
| ----------- | -------------------------- |
|
|
85
|
+
| `NUMERIQUE` | Champ numérique |
|
|
86
|
+
| `DATE` | Sélecteur de date |
|
|
87
|
+
| `DATEHEURE` | Sélecteur de date et heure |
|
|
88
|
+
| `HOUR` | Sélecteur d'heure |
|
|
89
|
+
|
|
90
|
+
### Types de sélection
|
|
91
|
+
|
|
92
|
+
| Type | Description |
|
|
93
|
+
| ----------- | ------------------------------------ |
|
|
94
|
+
| `CHECKBOX` | Cases à cocher (sélection multiple) |
|
|
95
|
+
| `RADIO` | Boutons radio (sélection unique) |
|
|
96
|
+
| `LISTE` | Liste déroulante (select) |
|
|
97
|
+
| `COMBOBOX` | Liste déroulante avec recherche |
|
|
98
|
+
| `LISTRADIO` | Liste avec affichage radio |
|
|
80
99
|
|
|
81
|
-
### Types
|
|
82
|
-
- MENAGE, ENQUETE
|
|
100
|
+
### Types médias et localisation
|
|
83
101
|
|
|
84
|
-
|
|
85
|
-
|
|
102
|
+
| Type | Description |
|
|
103
|
+
| ------- | ---------------------------- |
|
|
104
|
+
| `GPS` | Capture de coordonnées GPS |
|
|
105
|
+
| `PHOTO` | Capture photo (caméra) |
|
|
106
|
+
| `IMAGE` | Sélection d'image (galerie) |
|
|
86
107
|
|
|
87
|
-
### Types
|
|
88
|
-
- IDDOC
|
|
108
|
+
### Types d'affichage (lecture seule)
|
|
89
109
|
|
|
90
|
-
|
|
110
|
+
| Type | Description |
|
|
111
|
+
| ---------- | -------------------------------------------------------- |
|
|
112
|
+
| `LABEL` | Texte statique avec interpolation `${VARIABLE}` |
|
|
113
|
+
| `PANEL` | Panneau de regroupement visuel |
|
|
114
|
+
| `RICHTEXT` | Contenu HTML riche avec interpolation `${VARIABLE}` |
|
|
115
|
+
|
|
116
|
+
### Types géographiques
|
|
117
|
+
|
|
118
|
+
| Type | Description |
|
|
119
|
+
| ----------------- | ------------------------------ |
|
|
120
|
+
| `DEPARTEMENT` | Sélecteur de département |
|
|
121
|
+
| `DISTRICT` | Sélecteur de district |
|
|
122
|
+
| `REGION` | Sélecteur de région |
|
|
123
|
+
| `QUARTIER` | Sélecteur de quartier |
|
|
124
|
+
| `VILLAGE` | Sélecteur de village |
|
|
125
|
+
| `SOUSPREFECTURE` | Sélecteur de sous-préfecture |
|
|
126
|
+
| `RSU` | Sélecteur RSU |
|
|
127
|
+
| `PAYS` | Sélecteur de pays |
|
|
128
|
+
|
|
129
|
+
### Types de référence
|
|
130
|
+
|
|
131
|
+
| Type | Description |
|
|
132
|
+
| --------------------- | ---------------------------------------- |
|
|
133
|
+
| `MENAGE` | Sélecteur de ménage |
|
|
134
|
+
| `ENQUETE` | Sélecteur d'enquête |
|
|
135
|
+
| `ENQUETEUR` | Nom de l'enquêteur (auto-rempli) |
|
|
136
|
+
| `EMAIL_ENQUETEUR` | Email de l'enquêteur (auto-rempli) |
|
|
137
|
+
| `TELEPHONE_ENQUETEUR` | Téléphone de l'enquêteur (auto-rempli) |
|
|
138
|
+
|
|
139
|
+
### Types documents d'identité
|
|
140
|
+
|
|
141
|
+
| Type | Description |
|
|
142
|
+
| ------------ | --------------------------------------- |
|
|
143
|
+
| `IDDOC` | Document d'identité générique |
|
|
144
|
+
| `CNI` | Carte Nationale d'Identité |
|
|
145
|
+
| `NNI` | Numéro National d'Identité |
|
|
146
|
+
| `CMU` | Carte de Couverture Maladie Universelle |
|
|
147
|
+
| `PASSEPORT` | Passeport |
|
|
148
|
+
| `CC` | Certificat de Conformité |
|
|
149
|
+
| `EXTRAIT` | Extrait de naissance |
|
|
150
|
+
|
|
151
|
+
### Types rosters (groupes multiples)
|
|
152
|
+
|
|
153
|
+
| Type | Description |
|
|
154
|
+
| ------------- | -------------------------------------------------------- |
|
|
155
|
+
| `ROSTERCHECK` | Roster avec checkbox (sélection + masquage conditionnel) |
|
|
156
|
+
| `ROSTERLIST` | Roster avec liste déroulante |
|
|
157
|
+
|
|
158
|
+
### Types collections
|
|
159
|
+
|
|
160
|
+
| Type | Description |
|
|
161
|
+
| ------------------ | -------------------------------------------------- |
|
|
162
|
+
| `COLLECTION` | Collection de sous-formulaires |
|
|
163
|
+
| `COLLECTIONEXTEND` | Collection étendue avec fonctionnalités avancées |
|
|
164
|
+
|
|
165
|
+
## Architecture
|
|
91
166
|
|
|
92
167
|
### Injection de dépendances
|
|
93
168
|
|
|
94
169
|
Le package utilise le pattern d'injection de dépendances pour :
|
|
170
|
+
|
|
95
171
|
- **Services API** : `FormRendererServices` (optionnel)
|
|
96
172
|
- **Composants géographiques** : `GeographicComponents` (optionnel)
|
|
97
173
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
174
|
+
### Peer Dependencies
|
|
175
|
+
|
|
176
|
+
Le package déclare ses dépendances framework en `peerDependencies` :
|
|
177
|
+
|
|
178
|
+
- `react` (^18 ou ^19)
|
|
179
|
+
- `react-dom` (optionnel)
|
|
180
|
+
- `next` (optionnel, ^14 ou ^15)
|
|
181
|
+
- `lucide-react` (optionnel)
|
|
182
|
+
|
|
183
|
+
Seuls `clsx` et `tailwind-merge` sont embarqués comme dépendances directes.
|
|
102
184
|
|
|
103
185
|
### Support des rosters
|
|
104
186
|
|
|
105
187
|
Les rosters (ROSTERCHECK et ROSTERLIST) sont automatiquement supportés avec :
|
|
188
|
+
|
|
106
189
|
- Rendu des variables selon leur type natif (RADIO, COMBOBOX, etc.)
|
|
107
190
|
- Indépendance des variables entre panels
|
|
108
191
|
- Comportement conditionnel pour ROSTERCHECK (checkbox + masquage)
|
|
109
192
|
|
|
110
|
-
##
|
|
193
|
+
## Changelog
|
|
194
|
+
|
|
195
|
+
### v1.0.109 (2026-03-01)
|
|
196
|
+
|
|
197
|
+
- Ajout du type `RICHTEXT` : affichage de contenu HTML riche avec interpolation de variables
|
|
198
|
+
- Nouveau composant `RichTextDisplay` pour le rendu HTML (`dangerouslySetInnerHTML`)
|
|
199
|
+
- Retrait de `lucide-react` des `dependencies` (reste en `peerDependencies` optionnel)
|
|
200
|
+
|
|
201
|
+
### v1.0.100+ (2026-01 - 2026-02)
|
|
202
|
+
|
|
203
|
+
- Ajout des types `COLLECTION` et `COLLECTIONEXTEND` pour les sous-formulaires
|
|
204
|
+
- Ajout du type `MOBILEPHONE`
|
|
205
|
+
- Ajout du type `LISTRADIO`
|
|
206
|
+
|
|
207
|
+
### v1.0.50+ (2025-12)
|
|
208
|
+
|
|
209
|
+
- Ajout des types documents d'identité : `CNI`, `NNI`, `CMU`, `PASSEPORT`, `CC`, `EXTRAIT`
|
|
210
|
+
- Ajout des types enquêteur : `ENQUETEUR`, `EMAIL_ENQUETEUR`, `TELEPHONE_ENQUETEUR`
|
|
111
211
|
|
|
112
212
|
### v1.0.0 (2025-11-25)
|
|
113
|
-
- ✅ Extraction depuis rsu_app_frontend_v2
|
|
114
|
-
- ✅ Support rosters avec RosterPanel
|
|
115
|
-
- ✅ Indépendance variables entre panels
|
|
116
|
-
- ✅ Comportement conditionnel ROSTERCHECK
|
|
117
|
-
- ✅ Injection de dépendances pour services et composants géographiques
|
|
118
|
-
- ✅ 27 types de variables supportés
|
|
119
213
|
|
|
120
|
-
|
|
214
|
+
- Extraction depuis `rsu_app_frontend_v2`
|
|
215
|
+
- Support rosters avec `RosterPanel`
|
|
216
|
+
- Indépendance des variables entre panels
|
|
217
|
+
- Comportement conditionnel ROSTERCHECK
|
|
218
|
+
- Injection de dépendances pour services et composants géographiques
|
|
219
|
+
- 27 types de variables initiaux
|
|
220
|
+
|
|
221
|
+
## Développement
|
|
121
222
|
|
|
122
223
|
### Build
|
|
123
224
|
|
|
@@ -138,15 +239,10 @@ npm test
|
|
|
138
239
|
npm run test:coverage
|
|
139
240
|
```
|
|
140
241
|
|
|
141
|
-
##
|
|
142
|
-
|
|
143
|
-
- Plan de mutualisation : `docs/mutualisation_FormRenderer.md`
|
|
144
|
-
- Refonte rosters : `docs/ROSTER_PANELS_FINAL.md`
|
|
145
|
-
|
|
146
|
-
## 👥 Auteurs
|
|
242
|
+
## Auteurs
|
|
147
243
|
|
|
148
244
|
RSU v2 Architecture Team
|
|
149
245
|
|
|
150
|
-
##
|
|
246
|
+
## License
|
|
151
247
|
|
|
152
|
-
|
|
248
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsuci/shared-form-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.111",
|
|
4
4
|
"description": "Composants partagés de rendu de formulaires RSU v2 - Package local pour frontend Admin et Public",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -57,7 +57,6 @@
|
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"clsx": "^2.0.0",
|
|
60
|
-
"lucide-react": "^0.263.0 || ^0.525.0",
|
|
61
60
|
"tailwind-merge": "^2.0.0"
|
|
62
61
|
}
|
|
63
62
|
}
|