@mosip/json-form-builder 0.1.0-beta.1 → 0.1.1-beta.0
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 +177 -44
- package/dist/JsonFormBuilder.esm.js +1 -1
- package/dist/JsonFormBuilder.esm.js.map +1 -1
- package/dist/JsonFormBuilder.umd.js +1 -1
- package/dist/JsonFormBuilder.umd.js.map +1 -1
- package/dist/components/DateComponent.d.ts +0 -6
- package/dist/components/DropdownComponent.d.ts +3 -3
- package/dist/components/FileUploadComponent.d.ts +2 -0
- package/dist/components/PasswordComponent.d.ts +0 -2
- package/dist/components/RadioComponent.d.ts +8 -0
- package/dist/components/TextareaComponent.d.ts +8 -0
- package/dist/components/index.d.ts +4 -1
- package/dist/types.d.ts +13 -4
- package/dist/utils/constants.d.ts +2 -0
- package/dist/utils/icons.d.ts +8 -0
- package/dist/utils/utils.d.ts +8 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ A flexible and customizable form builder that creates forms from JSON configurat
|
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
npm install json-form-builder
|
|
18
|
+
npm install @mosip/json-form-builder
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Usage
|
|
@@ -23,55 +23,138 @@ npm install json-form-builder
|
|
|
23
23
|
### Basic Usage
|
|
24
24
|
|
|
25
25
|
```javascript
|
|
26
|
-
import { JsonFormBuilder } from "
|
|
26
|
+
import { JsonFormBuilder } from "@mosip/json-form-builder";
|
|
27
27
|
|
|
28
28
|
const config = {
|
|
29
29
|
schema: [
|
|
30
30
|
{
|
|
31
|
-
id: "
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
id: "sampleInputId",
|
|
32
|
+
required: true,
|
|
33
|
+
type: "string",
|
|
34
|
+
labelName: {
|
|
35
|
+
eng: "Sample Field",
|
|
36
|
+
ara: "حقل تجريبي",
|
|
37
|
+
fra: "Champ d'exemple",
|
|
36
38
|
},
|
|
37
39
|
placeholder: {
|
|
38
|
-
eng: "Enter
|
|
39
|
-
|
|
40
|
+
eng: "Enter value",
|
|
41
|
+
ara: "أدخل القيمة",
|
|
42
|
+
fra: "Entrez la valeur",
|
|
43
|
+
},
|
|
44
|
+
info: {
|
|
45
|
+
eng: "You have to input some text in this field",
|
|
46
|
+
ara: "عليك إدخال بعض النصوص في هذا الحقل",
|
|
47
|
+
fra: "Vous devez saisir du texte dans ce champ",
|
|
40
48
|
},
|
|
41
49
|
capsLockCheck: true,
|
|
42
|
-
|
|
50
|
+
cssClasses: "sample-input-field",
|
|
51
|
+
controlType: "textbox",
|
|
52
|
+
validators: [
|
|
43
53
|
{
|
|
44
|
-
regex: "^[a-zA-
|
|
54
|
+
regex: "^[a-zA-Z0-9]+$",
|
|
55
|
+
langCode: null,
|
|
45
56
|
error: {
|
|
46
|
-
eng: "
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
57
|
+
eng: "Special characters are not allowed",
|
|
58
|
+
ara: "لا يُسمح باستخدام الأحرف الخاصة",
|
|
59
|
+
fra: "Les caractères spéciaux ne sont pas autorisés",
|
|
60
|
+
},
|
|
61
|
+
},
|
|
50
62
|
],
|
|
63
|
+
alignmentGroup: "group1",
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
id: "gender",
|
|
67
|
+
controlType: "dropdown",
|
|
68
|
+
labelName: {
|
|
69
|
+
eng: "Gender",
|
|
70
|
+
fra: "Genre",
|
|
71
|
+
ara: "جنس",
|
|
72
|
+
},
|
|
73
|
+
required: false,
|
|
74
|
+
alignmentGroup: "group2",
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
id: "samplePhone",
|
|
78
|
+
controlType: "phone",
|
|
79
|
+
disabled: true,
|
|
80
|
+
required: false,
|
|
81
|
+
prefix: ["+91"],
|
|
82
|
+
labelName: {
|
|
83
|
+
eng: "Phone Number",
|
|
84
|
+
ara: "رقم الهاتف",
|
|
85
|
+
fra: "Numéro de téléphone",
|
|
86
|
+
},
|
|
87
|
+
placeholder: {
|
|
88
|
+
eng: "Enter your phone number",
|
|
89
|
+
ara: "أدخل رقم هاتفك",
|
|
90
|
+
fra: "Entrez votre numéro de téléphone",
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
id: "password",
|
|
95
|
+
controlType: "password",
|
|
96
|
+
labelName: {
|
|
97
|
+
eng: "Password",
|
|
98
|
+
ara: "كلمة المرور",
|
|
99
|
+
fra: "Mot de passe",
|
|
100
|
+
},
|
|
101
|
+
placeholder: {
|
|
102
|
+
eng: "Enter your password",
|
|
103
|
+
ara: "أدخل كلمة المرور الخاصة بك",
|
|
104
|
+
fra: "Entrez votre mot de passe",
|
|
105
|
+
},
|
|
51
106
|
info: {
|
|
52
|
-
eng: "
|
|
53
|
-
|
|
54
|
-
|
|
107
|
+
eng: "Use 8 or more characters with a mix of letters and at least one number.",
|
|
108
|
+
ara: "استخدم 8 أحرف أو أكثر بمزيج من الحروف ورقم واحد على الأقل.",
|
|
109
|
+
fra: "Utilisez 8 caractères ou plus avec un mélange de lettres et au moins un chiffre.",
|
|
110
|
+
},
|
|
55
111
|
required: true,
|
|
112
|
+
alignmentGroup: "group3",
|
|
56
113
|
},
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
114
|
+
{
|
|
115
|
+
id: "dob",
|
|
116
|
+
controlType: "date",
|
|
117
|
+
labelName: {
|
|
118
|
+
eng: "Date of Birth",
|
|
119
|
+
ara: "تاريخ الميلاد",
|
|
120
|
+
fra: "Date de naissance",
|
|
121
|
+
},
|
|
122
|
+
minAge: 2,
|
|
123
|
+
maxAge: 3,
|
|
124
|
+
alignmentGroup: "group4",
|
|
125
|
+
required: true,
|
|
63
126
|
},
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
127
|
+
{
|
|
128
|
+
id: "consent",
|
|
129
|
+
controlType: "checkbox",
|
|
130
|
+
labelName: {
|
|
131
|
+
eng: "I agree to the <b><a href='#'>Terms & Conditions</a></b> and <b><a href='#'>Privacy Policy</a></b>.",
|
|
132
|
+
ara: "أوافق على <b><a href='#'>الشروط والأحكام</a></b> و<b><a href='#'>سياسة الخصوصية</a></b>.",
|
|
133
|
+
fra: "J'accepte les <b><a href='#'>conditions générales</a></b> et la <b><a href='#'>politique de confidentialité</a></b>.",
|
|
134
|
+
},
|
|
135
|
+
required: true,
|
|
136
|
+
alignmentGroup: "group5",
|
|
137
|
+
},
|
|
138
|
+
],
|
|
139
|
+
i18nValues: {
|
|
140
|
+
errors: {
|
|
141
|
+
required: {
|
|
142
|
+
eng: "This field is required",
|
|
143
|
+
fra: "Ce champ est obligatoire",
|
|
144
|
+
},
|
|
145
|
+
capsLock: {
|
|
146
|
+
eng: "Caps Lock is on",
|
|
147
|
+
fra: "Verr Maj activé"
|
|
148
|
+
}
|
|
67
149
|
}
|
|
68
150
|
},
|
|
69
151
|
language: {
|
|
70
152
|
mandatory: ["eng"],
|
|
71
|
-
optional: ["fra"],
|
|
153
|
+
optional: ["fra", "ara"],
|
|
72
154
|
langCodeMap: {
|
|
73
155
|
eng: "en",
|
|
74
156
|
fra: "fr",
|
|
157
|
+
ara: "ar",
|
|
75
158
|
},
|
|
76
159
|
},
|
|
77
160
|
};
|
|
@@ -110,10 +193,66 @@ interface FormConfig {
|
|
|
110
193
|
schema: FormField[];
|
|
111
194
|
language: LanguageSettings;
|
|
112
195
|
allowedValues?: AllowedValues;
|
|
196
|
+
i18nValues?: {
|
|
197
|
+
errors?: Errors;
|
|
198
|
+
labels?: { [id: string]: Label };
|
|
199
|
+
placeholders?: { [id: string]: Label };
|
|
200
|
+
}
|
|
113
201
|
errors?: Errors;
|
|
114
202
|
}
|
|
115
203
|
```
|
|
116
204
|
|
|
205
|
+
## 📘 Schema Properties
|
|
206
|
+
|
|
207
|
+
The schema consists of the following properties:
|
|
208
|
+
|
|
209
|
+
### Field Properties Section (mandatory)
|
|
210
|
+
|
|
211
|
+
| Property | Type | Requirement | Description |
|
|
212
|
+
| ------------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
213
|
+
| `alignmentGroup` | string | Optional | Fields with the same alignment group are placed horizontally next to each other in the UI. |
|
|
214
|
+
| `capsLockCheck` | boolean | Optional | It enable a caps lock indication in top right corner(or top left corner if in rtl direction). |
|
|
215
|
+
| `controlType` | string | **Mandatory** | UI control type for rendering. Options: `textbox`, `date`, `dropdown`, `password`, `checkbox`, `phone`, `photo`. |
|
|
216
|
+
| `cssClasses` | string | Optional | External css class which can be added to the component. |
|
|
217
|
+
| `disabled` | boolean | Optional | By enabling this, it will disable that field. By default it will be `false`. |
|
|
218
|
+
| `format` | string | Optional | It will return date value in the prescribe format for date field. Used only in when you pass controlType as `date`. |
|
|
219
|
+
| `id` | string | **Mandatory** | Unique identifier for the field. Used internally to map the field. |
|
|
220
|
+
| `info` | object | Optional | It will create an info icon beside the label of the component, to show some info in the tooltip. It will be a multilingual fields and keys represent with language codes. |
|
|
221
|
+
| `labelName` | object | **Mandatory** | Multilingual field labels. Keys represent language codes (e.g., `eng`, `fra`, `ara`). |
|
|
222
|
+
| `placeholder` | object | Optional | Multilingual placeholders shown inside input fields before user enters data. |
|
|
223
|
+
| `prefix` | string[] | Optional | Multiple or single prefix for phone component, so that it can be selected as per the needs, it will work only when controlType is `phone` |
|
|
224
|
+
| `required` | boolean | Optional | Specifies whether the field is required. If set to `true`, the user must provide a value. If set to `false`, the field can be left empty. |
|
|
225
|
+
| `type` | string | Optional | Type of data expected. Can be `string` for a single-language input, or `simpleType` for multilingual input where each input ID renders multiple input fields, one for each language. |
|
|
226
|
+
| `validators` | array | Optional | List of validation rules. Each validator object has the following structure:<br><br> <table><tr><th>Property</th><th>Type</th><th>Requirement</th><th>Description</th></tr><tr><td>`regex`</td><td>string</td><td>**Mandatory**</td><td>Validation pattern</td></tr><tr><td>`error`</td><td>object</td><td>**Mandatory**</td><td>Multilingual error messages</td></tr><tr><td>`langCode`</td><td>string</td><td>Optional</td><td>Language code; if `null`, applies to all</td></tr></table> |
|
|
227
|
+
|
|
228
|
+
### Allowed Values Section (optional)
|
|
229
|
+
|
|
230
|
+
| Property | Type | Description |
|
|
231
|
+
| --------------- | ------ | -------------------------------------------------------------------------------------------------------------------------- |
|
|
232
|
+
| `allowedValues` | object | Defines predefined options for dropdowns or checkboxes. Keys represent option IDs, and values provide multilingual labels. |
|
|
233
|
+
|
|
234
|
+
### i18nValues Section (optional)
|
|
235
|
+
#### It contains errors, additional labels & placeholders
|
|
236
|
+
Errors Section
|
|
237
|
+
|
|
238
|
+
| Property | Type | Description |
|
|
239
|
+
| ------------------ | ------ | ----------------------------------------------------------------- |
|
|
240
|
+
| `required` | object | Defines multilingual error messages for required fields. |
|
|
241
|
+
| `passwordMismatch` | object | Defines multilingual error messages for password mismatch. |
|
|
242
|
+
| `capsLock` | object | Defines multilingual error messages for caps lock enabled. |
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
|
|
246
|
+
### Language Section (mandatory)
|
|
247
|
+
|
|
248
|
+
| Property | Type | Description |
|
|
249
|
+
| ------------- | ------ | ----------------------------------------------------------------------------------------- |
|
|
250
|
+
| `mandatory` | array | List of mandatory language codes that must be present in the schema. |
|
|
251
|
+
| `optional` | array | List of optional language codes that may be included if available. |
|
|
252
|
+
| `langCodeMap` | object | Bi-directional mapping between 2-letter and 3-letter language codes (e.g., `eng` ↔ `en`). |
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
|
|
117
256
|
### Additional Configuration
|
|
118
257
|
|
|
119
258
|
The additional configuration object has the following structure:
|
|
@@ -137,14 +276,6 @@ interface AdditionalConfig {
|
|
|
137
276
|
enabled?: boolean;
|
|
138
277
|
language?: string;
|
|
139
278
|
};
|
|
140
|
-
additionalSchema?: {
|
|
141
|
-
// additional schema is for passing some schema's label & placeholder on later
|
|
142
|
-
// stage of form rendering, here id will be the same id given in the schema
|
|
143
|
-
[id: string]: {
|
|
144
|
-
label: Label;
|
|
145
|
-
placeholder: Label;
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
279
|
}
|
|
149
280
|
```
|
|
150
281
|
|
|
@@ -184,6 +315,8 @@ The form builder supports the following field types:
|
|
|
184
315
|
- Date
|
|
185
316
|
- Dropdown
|
|
186
317
|
- Checkbox
|
|
318
|
+
- Phone
|
|
319
|
+
- Photo
|
|
187
320
|
|
|
188
321
|
## Validation
|
|
189
322
|
|
|
@@ -246,7 +379,6 @@ The form builder comes with default styles but can be customized using CSS. The
|
|
|
246
379
|
- `.caps-lock-icon`: Caps lock icon
|
|
247
380
|
- `.caps-lock-text`: Caps lock text
|
|
248
381
|
|
|
249
|
-
|
|
250
382
|
## Browser Support
|
|
251
383
|
|
|
252
384
|
- Chrome (latest)
|
|
@@ -285,20 +417,21 @@ This will generate:
|
|
|
285
417
|
- TypeScript declaration files
|
|
286
418
|
|
|
287
419
|
### Development with an actual Application
|
|
420
|
+
|
|
288
421
|
#### This should be used only in local for development purpose only
|
|
289
422
|
|
|
290
423
|
1. First link the current `json-form-builder` library, with below command
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
424
|
+
```bash
|
|
425
|
+
npm link
|
|
426
|
+
```
|
|
294
427
|
2. Now go to the application, where you want to use `json-form-builder` library, and run the below command
|
|
295
428
|
```bash
|
|
296
|
-
npm link @
|
|
429
|
+
npm link @mosip/json-form-builder
|
|
297
430
|
```
|
|
298
431
|
3. This will create a link between the library and application, after that if any changes has been done in the library, just run the below command and it will reflect in the application as well
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
432
|
+
```bash
|
|
433
|
+
npm run build
|
|
434
|
+
```
|
|
302
435
|
|
|
303
436
|
### Development Mode
|
|
304
437
|
|