@mosip/json-form-builder 0.1.0-beta.0 → 0.1.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
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,14 +23,14 @@ 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
31
|
id: "name",
|
|
32
32
|
controlType: "textbox",
|
|
33
|
-
|
|
33
|
+
labelName: {
|
|
34
34
|
eng: "Name",
|
|
35
35
|
fra: "Nom",
|
|
36
36
|
},
|
|
@@ -56,14 +56,16 @@ const config = {
|
|
|
56
56
|
},
|
|
57
57
|
// ... more fields
|
|
58
58
|
],
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
59
|
+
i18nValues: {
|
|
60
|
+
errors: {
|
|
61
|
+
required: {
|
|
62
|
+
eng: "This field is required",
|
|
63
|
+
fra: "Ce champ est obligatoire",
|
|
64
|
+
},
|
|
65
|
+
capsLock: {
|
|
66
|
+
eng: "Caps Lock is on",
|
|
67
|
+
fra: "Verr Maj activé"
|
|
68
|
+
}
|
|
67
69
|
}
|
|
68
70
|
},
|
|
69
71
|
language: {
|
|
@@ -110,10 +112,66 @@ interface FormConfig {
|
|
|
110
112
|
schema: FormField[];
|
|
111
113
|
language: LanguageSettings;
|
|
112
114
|
allowedValues?: AllowedValues;
|
|
115
|
+
i18nValues?: {
|
|
116
|
+
errors?: Errors;
|
|
117
|
+
labels?: { [id: string]: Label };
|
|
118
|
+
placeholders?: { [id: string]: Label };
|
|
119
|
+
}
|
|
113
120
|
errors?: Errors;
|
|
114
121
|
}
|
|
115
122
|
```
|
|
116
123
|
|
|
124
|
+
## 📘 Schema Properties
|
|
125
|
+
|
|
126
|
+
The schema consists of the following properties:
|
|
127
|
+
|
|
128
|
+
### Field Properties Section (mandatory)
|
|
129
|
+
|
|
130
|
+
| Property | Type | Requirement | Description |
|
|
131
|
+
| ------------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
132
|
+
| `alignmentGroup` | string | Optional | Fields with the same alignment group are placed horizontally next to each other in the UI. |
|
|
133
|
+
| `capsLockCheck` | boolean | Optional | It enable a caps lock indication in top right corner(or top left corner if in rtl direction). |
|
|
134
|
+
| `controlType` | string | **Mandatory** | UI control type for rendering. Options: `textbox`, `date`, `dropdown`, `password`, `checkbox`, `phone`, `photo`. |
|
|
135
|
+
| `cssClasses` | string | Optional | External css class which can be added to the component. |
|
|
136
|
+
| `disabled` | boolean | Optional | By enabling this, it will disable that field. By default it will be `false`. |
|
|
137
|
+
| `format` | string | Optional | It will return date value in the prescribe format for date field. Used only in when you pass controlType as `date`. |
|
|
138
|
+
| `id` | string | **Mandatory** | Unique identifier for the field. Used internally to map the field. |
|
|
139
|
+
| `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. |
|
|
140
|
+
| `labelName` | object | **Mandatory** | Multilingual field labels. Keys represent language codes (e.g., `eng`, `fra`, `ara`). |
|
|
141
|
+
| `placeholder` | object | Optional | Multilingual placeholders shown inside input fields before user enters data. |
|
|
142
|
+
| `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` |
|
|
143
|
+
| `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. |
|
|
144
|
+
| `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. |
|
|
145
|
+
| `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> |
|
|
146
|
+
|
|
147
|
+
### Allowed Values Section (optional)
|
|
148
|
+
|
|
149
|
+
| Property | Type | Description |
|
|
150
|
+
| --------------- | ------ | -------------------------------------------------------------------------------------------------------------------------- |
|
|
151
|
+
| `allowedValues` | object | Defines predefined options for dropdowns or checkboxes. Keys represent option IDs, and values provide multilingual labels. |
|
|
152
|
+
|
|
153
|
+
### i18nValues Section (optional)
|
|
154
|
+
#### It contains errors, additional labels & placeholders
|
|
155
|
+
Errors Section
|
|
156
|
+
|
|
157
|
+
| Property | Type | Description |
|
|
158
|
+
| ------------------ | ------ | ----------------------------------------------------------------- |
|
|
159
|
+
| `required` | object | Defines multilingual error messages for required fields. |
|
|
160
|
+
| `passwordMismatch` | object | Defines multilingual error messages for password mismatch. |
|
|
161
|
+
| `capsLock` | object | Defines multilingual error messages for caps lock enabled. |
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
### Language Section (mandatory)
|
|
166
|
+
|
|
167
|
+
| Property | Type | Description |
|
|
168
|
+
| ------------- | ------ | ----------------------------------------------------------------------------------------- |
|
|
169
|
+
| `mandatory` | array | List of mandatory language codes that must be present in the schema. |
|
|
170
|
+
| `optional` | array | List of optional language codes that may be included if available. |
|
|
171
|
+
| `langCodeMap` | object | Bi-directional mapping between 2-letter and 3-letter language codes (e.g., `eng` ↔ `en`). |
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
117
175
|
### Additional Configuration
|
|
118
176
|
|
|
119
177
|
The additional configuration object has the following structure:
|
|
@@ -137,14 +195,6 @@ interface AdditionalConfig {
|
|
|
137
195
|
enabled?: boolean;
|
|
138
196
|
language?: string;
|
|
139
197
|
};
|
|
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
198
|
}
|
|
149
199
|
```
|
|
150
200
|
|
|
@@ -184,6 +234,8 @@ The form builder supports the following field types:
|
|
|
184
234
|
- Date
|
|
185
235
|
- Dropdown
|
|
186
236
|
- Checkbox
|
|
237
|
+
- Phone
|
|
238
|
+
- Photo
|
|
187
239
|
|
|
188
240
|
## Validation
|
|
189
241
|
|
|
@@ -293,7 +345,7 @@ This will generate:
|
|
|
293
345
|
```
|
|
294
346
|
2. Now go to the application, where you want to use `json-form-builder` library, and run the below command
|
|
295
347
|
```bash
|
|
296
|
-
npm link @
|
|
348
|
+
npm link @mosip/json-form-builder
|
|
297
349
|
```
|
|
298
350
|
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
351
|
```bash
|