@bolttech/form-engine 3.0.0-beta.15 → 3.0.0-beta.17

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.
Files changed (18) hide show
  1. package/README.md +264 -212
  2. package/index.esm.js +722 -380
  3. package/package.json +3 -5
  4. package/src/components/AsFormField/AsFormField.d.ts +12 -3
  5. package/src/components/AsFormField/AsFormField.type.d.ts +9 -0
  6. package/src/components/AsFormFieldBuilder/AsFormFieldBuilder.d.ts +10 -4
  7. package/src/components/AsFormFieldBuilder/AsFormFieldBuilder.type.d.ts +16 -0
  8. package/src/components/FieldWrapper/FieldWrapper.d.ts +10 -6
  9. package/src/components/FieldWrapper/FieldWrapper.type.d.ts +28 -0
  10. package/src/components/Form/Form.d.ts +8 -4
  11. package/src/components/Form/Form.type.d.ts +11 -0
  12. package/src/context/FormGroupContext.d.ts +16 -29
  13. package/src/context/FormGroupContext.type.d.ts +46 -0
  14. package/src/generators/formBuilder.d.ts +15 -0
  15. package/src/helpers/helpers.d.ts +7 -8
  16. package/src/hooks/useForm.d.ts +5 -4
  17. package/src/hooks/useForm.type.d.ts +12 -0
  18. package/src/types/index.d.ts +13 -41
package/README.md CHANGED
@@ -1,56 +1,128 @@
1
1
  # Form Engine React Adapter
2
2
 
3
- This is a react adapter to be used with form engine.
3
+ This is an adapter to be used with the bolttech form engine. Compatible with Next.js 13 and 14 and react 18.
4
4
 
5
- ## React `<FormProvider />`
5
+ ## React `<FormGroupContextProvider />`
6
6
 
7
- React context that lets you provide configuration information to your application forms
7
+ Provider of the context surrounding the child components, providing the state and functions to manage the group of forms.
8
8
 
9
9
  ### Props
10
10
 
11
- | Prop | Type | Description |
12
- | ------------ | ------------- | ------------------------------------------------------------- |
13
- | mapper | TMapper | Allow you to map your own components to be used with the form |
14
- | propsMapping | TPropsMapping | Map your component props names with the form functionalities |
11
+ | Prop | Type | Description |
12
+ | --------- | ---------------------- | ------------------------------------------------------------------------------------------------------ |
13
+ | mappers | TMapper<ElementType>[] | Array of mappers for form element types. Allow you to map your own components to be used with the form |
14
+ | debugMode | boolean | Optional flag to enable debug mode (default: `false`). |
15
+
16
+ ### Implementation
17
+
18
+ - Creates a reference to the form group instance.
19
+ - Defines functions for adding, getting, and removing forms from the group.
20
+ - Defines a function to print the form group instance.
21
+ - Defines a function to submit multiple forms via the index.
22
+ - Defines the value of the context with the created functions and states.
23
+ - Returns the context provider involving the child components.
15
24
 
16
25
  ### Example
17
26
 
18
27
  The following example shows a provider that will provide forms with input and Dropdown component
19
28
 
20
- ```javascript
21
- import Input from 'Components/Input';
22
- import Dropdown from 'Components/Dropdown';
29
+ #### With lazy import
23
30
 
24
- const Mappings = {
25
- inputForm: { component: Input },
26
- dropdownForm: { component: Dropdown },
31
+ ```typescript
32
+ import { ElementType, SyntheticEvent } from 'react';
33
+ import { TValueChangeEvent, TMapper } from '@bolttech/form-engine-core';
34
+
35
+ const defaultChangeEvent: TValueChangeEvent = (event: unknown) => {
36
+ return (event as SyntheticEvent<HTMLInputElement>).currentTarget.value;
27
37
  };
28
38
 
29
- const propsMapping = {
30
- inputForm: {
31
- getValue: 'onChange',
32
- setValue: 'value',
39
+ const pathImports = {
40
+ input: lazy(() =>
41
+ import('@bolttech/atoms-input').then((module) => ({
42
+ default: module.Input,
43
+ }))
44
+ ),
45
+ };
46
+
47
+ const mappers: TMapper<ElementType>[] = [
48
+ {
49
+ asynccomponent: pathImports.input,
50
+ componentName: 'input',
51
+ events: {
52
+ getValue: 'onChange',
53
+ setValue: 'value',
54
+ setErrorMessage: 'errorMessage',
55
+ onBlur: 'onBlur',
56
+ onFocus: 'onFocus',
57
+ onKeyUp: 'onKeyUp',
58
+ onKeyDown: 'onKeyUpCapture',
59
+ },
60
+ valueChangeEvent: defaultChangeEvent,
33
61
  },
34
- dropdownForm: {
35
- getValue: 'onChangeCallback',
36
- setValue: 'data',
37
- setErrorMessage: 'errorMessageArray',
38
- setErrorState: 'isErrored',
39
- onBlur: 'onBlurCallback',
40
- onFocus: 'onFocusCallback',
41
- onKeyUp: 'onKeyUpCallback',
42
- onKeyDown: 'onKeyDownCallback',
62
+ ];
63
+ ```
64
+
65
+ #### Without lazy import
66
+
67
+ ```typescript
68
+ import { ElementType, SyntheticEvent } from 'react';
69
+ import { TValueChangeEvent, TMapper } from '@bolttech/form-engine-core';
70
+ import { OptionType } from '@bolttech/atoms-select';
71
+ import { Dropdown } from '@bolttech/molecules-dropdown';
72
+
73
+ const mappers: TMapper<ElementType>[] = [
74
+ {
75
+ component: Dropdown,
76
+ componentName: 'dropdown',
77
+ events: {
78
+ getValue: 'onChange',
79
+ setValue: 'value',
80
+ setErrorMessage: 'errorMessage',
81
+ },
82
+ valueChangeEvent: (event: unknown, opts) => {
83
+ if (typeof event === 'object' && event !== null && 'value' in event && 'id' in event) {
84
+ return {
85
+ _value: event?.id,
86
+ _metadata: event,
87
+ };
88
+ } else if (typeof event === 'string' && typeof opts === 'object' && 'props' in opts && typeof opts.props === 'object' && 'optionList' in opts.props && Array.isArray(opts.props.optionList)) {
89
+ const option = (opts.props.optionList as OptionType[]).find((el) => el?.value === event);
90
+ if (option) return { _value: option.id, _metadata: option };
91
+ } else return { _value: event, _metadata: event };
92
+ },
43
93
  },
94
+ ];
95
+ ```
96
+
97
+ The codes above are created using the `valueChangeEvent` method, which is a new way of controlling how the field value will be manipulated when setValue happens. In other words: Optional function to handle value changes.
98
+
99
+ #### Calling provider
100
+
101
+ ```typescript
102
+ import React from 'react';
103
+ import { FormGroupContextProvider } from '@bolttech/form-engine'; // Import the previously created provider
104
+
105
+ type Props = {
106
+ children: React.ReactNode;
44
107
  };
45
108
 
46
- const App = () => {
47
- return <FormProvider mapper={Mappings} propsMapping={propsMapping} />;
109
+ const App = ({ children }: Props): React.ReactElement => {
110
+ const mappers = []; // Define your type mappers here
111
+ const debugMode = true; // Enable debug mode
112
+
113
+ return (
114
+ <FormGroupContextProvider mappers={mappers} debugMode={debugMode}>
115
+ {children}
116
+ </FormGroupContextProvider>
117
+ );
48
118
  };
119
+
120
+ export default App;
49
121
  ```
50
122
 
51
- You now can use in your [form](#react-form-) the mapped components with names `inputForm` and `dropdownForm`.
123
+ You now can use in your [form](#react-form-) the mapped components with names `input` and `dropdown`.
52
124
 
53
- Also note the data in `propsMapping`. There you can map up to five form functionalities per component
125
+ Also note the data in `TMapper.events`. There you can map up to five form functionalities per component
54
126
 
55
127
  | Key | Functionality |
56
128
  | --------------- | -------------------------------------------------------------------------------------------------------------------- |
@@ -63,7 +135,7 @@ Also note the data in `propsMapping`. There you can map up to five form function
63
135
  | onKeyUp | Prop name that is called when user releases a key on field |
64
136
  | onKeyDown | Prop name that is called when user presses a key on field |
65
137
 
66
- You can also use default prop names for functionalities like:
138
+ [DEPRECIATED] You can also use default prop names for functionalities like:
67
139
 
68
140
  ```javascript
69
141
  import Input from 'Components/Input';
@@ -91,180 +163,131 @@ const App = () => {
91
163
  };
92
164
  ```
93
165
 
94
- This will make form search for those names in all your components that do not have split mapping.
166
+ [DEPRECIATED] This will make form search for those names in all your components that do not have split mapping.
95
167
 
96
- ## React `<Form />`
168
+ ## React `useFormGroupContext()` hook
97
169
 
98
- After configuring the provider, `<Form />` components lets you render a form
170
+ Hook that facilitates the use of the FormGroupContext context in functional components.
99
171
 
100
- ### Props
172
+ - Checks if the context is set and throws an error if not.
173
+ - Returns the context.
101
174
 
102
- | Prop | Type | Description |
103
- | --------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
104
- | disable | boolean | Disable all form inputs. It will use the default htm disable attribute |
105
- | group | string | Form group identifier. Used be able to group several forms and then get data with useGroupForm. One will be generated as default if omitted |
106
- | id | string | Form identified. One will be generated as default if omitted |
107
- | hooks | THooks | Provide functions to run on certain life-cycle events |
108
- | iVars | Object | One object with internal variables to be used in form with data binding |
109
- | initialValues | Object | Object with form initial values that will map to a field. |
110
- | Schema | TSchema | Form Schema |
111
- | autoComplete | string | HTML autocomplete |
112
- | className | string | Allow to style form |
113
- | onSubmit | callback(HTMLFormElement,TFormValues) | Will be called when there is a submit action in the form |
114
- | onData | callback(TFormValues,TComponent, TField) | Will be called when any field data change. The arguments will let you know which field changed and the field configuration |
115
- | onBlur | callback(TFormValues,TComponent, TField) | Will be called when any field blured. The arguments will let you know which field blured and the field configuration |
116
- | onFocus | callback(TFormValues,TComponent, TField) | Will be called when any field focused change. The arguments will let you know which field focused and the field configuration |
117
- | onFieldMount | callback(TFormValues,TComponent, TField) | Will be called when some field mounted. Its called with the field that information that mounted. |
118
- | onStep | callback(TFormValues) | Called when a form step changed |
119
- | onLog | callback(TLoggingEvent) | Called on each log, if the logging is enabled |
120
- | onScopeChange | onScopeChange?(scope: TScope, namespace: string, key: string): void; | Called everything scope change with the changing information (namespace and key) and the changed scope |
121
- | onClick | onClick(TFormValues, TField) | Callback function that runs on each component click |
122
- | afterApiCall | afterApiCall(values: TFormValues, component?: TComponent, field?: TField) | Callback function that runs on each component after api call. |
123
- | onFieldRehydrate | onFieldRehydrate?(values: TFormValues, component: TComponent, field: TField): void | This callback is called whenever some form field was rehydrated |
124
- | renderLoading | renderLoading?(): ReactElement; | Component to render while the schema has not rendered |
125
- | onFormMount | onFormMount?(values: TFormValues): void; | Called when the form finished mounted |
126
- | formattedDataDefaults | Object | Some default data to fields when they are undefined |
127
- | submitOnValidOnly | boolean | Boolean indicating if form can be submitted even if it is invalid |
128
- | renderFieldWrapper | renderFieldWrapper(component: TComponent, children: ReactElement[]) | Function that allows to insert a wrapper in place of a component or wrapping the component |
175
+ ### What comes from
129
176
 
130
- ### Example
177
+ - `addForm`: Function to add a form to the group.
178
+ - `getForm`: Function to obtain a specific form from the group.
179
+ - `removeForm`: Function to remove a form from the group.
180
+ - `formGroupInstance`: Instance of the form group.
181
+ - `printFormGroupInstance`: Function to print the form group instance.
182
+ - `submitMultipleFormsByIndex`: Function to submit multiple forms by index.
131
183
 
132
- A simple example of rendering a basic form
133
-
134
- ```javascript
135
- <Form schema={schema} />
184
+ ```typescript
185
+ type TFormContext = {
186
+ addForm: (payload: { key: string; formInstance: TFormCore }) => void;
187
+ getForm: (payload: { key: string }) => FormCore | undefined;
188
+ removeForm: (payload: { key: string }) => void;
189
+ formGroupInstance: TFormGroup;
190
+ printFormGroupInstance: () => void;
191
+ submitMultipleFormsByIndex: (indexes: string[]) => TFormValues;
192
+ };
136
193
  ```
137
194
 
138
- ## React `useForm()`
139
-
140
- Exposed hook that allows you to connect to any form by the formId in any part of the application, as long as you are inside the form context.
195
+ ### Example
141
196
 
142
- ### Props
197
+ ```typescript
198
+ import React from 'react';
199
+ import { useFormGroupContext } from '@bolttech/form-engine'; // Import the previously created hook
143
200
 
144
- You can use the following arguments to tho hook
201
+ const FormComponent = (): React.ReactElement => {
202
+ const { addForm, removeForm, getForm, printFormGroupInstance, submitMultipleFormsByIndex, debugMode } = useFormGroupContext();
145
203
 
146
- | Prop | Type | Description |
147
- | -------- | --------------- | ------------------------------------------------------ |
148
- | id | string | The id of the form you want to connect to |
149
- | ids | array of string | A range of ids of the each form you want to connect to |
150
- | onValid | callback | Called whenever form validation changes |
151
- | onClick | callback | Called whenever field has clicked |
152
- | onData | callback | Called whenever data changes |
153
- | onSubmit | callback | Called whenever form is submitted |
204
+ const handleAddForm = () => {
205
+ const key = 'form1';
206
+ const formInstance = new FormCore(); // Assuming FormCore is an existing class
207
+ addForm({ key, formInstance });
208
+ };
154
209
 
155
- And it will provide you the following
210
+ const handleRemoveForm = () => {
211
+ const key = 'form1';
212
+ removeForm({ key });
213
+ };
156
214
 
157
- | Prop | Type | Description |
158
- | ---------- | -------- | ----------------------------------------------------------------------------------------------- |
159
- | submitForm | function | Function that lets you call the submit on the form. After, the onSubmit callback will be called |
160
- | formData | function | Lets you get the most up-to-date form date |
215
+ const handleGetForm = () => {
216
+ const key = 'form1';
217
+ const form = getForm({ key });
218
+ console.log(form);
219
+ };
161
220
 
162
- ### Example
221
+ const handleSubmitForms = () => {
222
+ const indexes = ['form1', 'form2'];
223
+ const formValues = submitMultipleFormsByIndex(indexes);
224
+ console.log(formValues);
225
+ };
163
226
 
164
- In the following example `useForm` hooks are used to connect to multiple forms that are inside other components.
227
+ return (
228
+ <div>
229
+ <button onClick={handleAddForm}>Add Form</button>
230
+ <button onClick={handleRemoveForm}>Remove Form</button>
231
+ <button onClick={handleGetForm}>Get Form</button>
232
+ <button onClick={handleSubmitForms}>Submit Forms</button>
233
+ <button onClick={printFormGroupInstance}>Print Form Group Instance</button>
234
+ {debugMode && <p>Debug mode is enabled</p>}
235
+ </div>
236
+ );
237
+ };
165
238
 
166
- ```javascript
167
- const Comp = () => {
168
- const { submitForm: submitOne } = useForm({
169
- id: 'id1',
170
- onData: (data) => {},
171
- onSubmit: () => {},
172
- });
173
- const { submitForm: submitTwo } = useForm({
174
- id: 'id2',
175
- onData: (data) => {},
176
- onSubmit: () => {},
177
- });
178
-
179
- return (
180
- <>
181
- <button onClick={(() => submitOne())}>
182
- <button onClick={(() => submitTwo())}>
183
- </>
184
- );
185
- }
186
-
187
- const CompOne = () => {
188
- return (
189
- <Form id="id1" {...}/>
190
- );
191
- }
192
-
193
- const CompTwo = () => {
194
- return (
195
- <Form id="id2" {...} />
196
- );
197
- }
239
+ export default FormComponent;
198
240
  ```
199
241
 
200
- ## React `useFormGroup()`
242
+ ## React `<Form />`
201
243
 
202
- Similar to `useForm`
244
+ After configuring the provider, `<Form />` components lets you render a form
203
245
 
204
246
  ### Props
205
247
 
206
- You can use the following arguments to tho hook
207
-
208
- | Prop | Type | Description |
209
- | -------- | --------------- | --------------------------------------------------------- |
210
- | ids | array of string | The ids we want to listen to |
211
- | group | string | A string to identify the form group we want to connect to |
212
- | onValid | callback | Called whenever form validation changes |
213
- | onClick | callback | Called whenever field has clicked |
214
- | onData | callback | Called whenever data changes |
215
- | onSubmit | callback | Called whenever form is submitted |
216
-
217
- And it will provide you the following
218
-
219
- | Prop | Type | Description |
220
- | ---------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
221
- | submitForm | function | Function that lets you call the submit on the form. After, the onSubmit callback will be called |
222
- | formData | function({aggregate}) | Lets you get the most up-to-date form date in two ways. Aggregate the forms data in a single object or split by the several forms in the group or identified by the id |
248
+ | Prop | Type | Description |
249
+ | ----------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
250
+ | [DEPRECIATED] disable | boolean | Disable all form inputs. It will use the default htm disable attribute |
251
+ | [DEPRECIATED] group | string | Form group identifier. Used be able to group several forms and then get data with useGroupForm. One will be generated as default if omitted |
252
+ | index | string | Form identified. One will be generated as default if omitted |
253
+ | [DEPRECIATED] hooks | THooks | Provide functions to run on certain life-cycle events |
254
+ | iVars | Object | One object with internal variables to be used in form with data binding |
255
+ | initialValues | Object | Object with form initial values that will map to a field. |
256
+ | Schema | TSchema | Form Schema |
257
+ | [DEPRECIATED] autoComplete | string | HTML autocomplete |
258
+ | className | string | Allow to style form |
259
+ | onSubmit | callback(HTMLFormElement,TFormValues) | Will be called when there is a submit action in the form |
260
+ | onData | callback(TFormValues,TComponent, TField) | Will be called when any field data change. The arguments will let you know which field changed and the field configuration |
261
+ | onBlur | callback(TFormValues,TComponent, TField) | Will be called when any field blured. The arguments will let you know which field blured and the field configuration |
262
+ | onFocus | callback(TFormValues,TComponent, TField) | Will be called when any field focused change. The arguments will let you know which field focused and the field configuration |
263
+ | onMount | callback(TFormValues,TComponent, TField) | Will be called when some field mounted. Its called with the field that information that mounted. |
264
+ | [DEPRECIATED] onStep | callback(TFormValues) | Called when a form step changed |
265
+ | [DEPRECIATED] onLog | callback(TLoggingEvent) | Called on each log, if the logging is enabled |
266
+ | [DEPRECIATED] onScopeChange | onScopeChange?(scope: TScope, namespace: string, key: string): void; | Called everything scope change with the changing information (namespace and key) and the changed scope |
267
+ | onClick | onClick(TFormValues, TField) | Callback function that runs on each component click |
268
+ | onApiResponse | onApiResponse(values: TFormValues, component?: TComponent, field?: TField) | Callback function that runs on each component after api call. |
269
+ | [DEPRECIATED] onFieldRehydrate | onFieldRehydrate?(values: TFormValues, component: TComponent, field: TField): void | This callback is called whenever some form field was rehydrated |
270
+ | [DEPRECIATED] renderLoading | renderLoading?(): ReactElement; | Component to render while the schema has not rendered |
271
+ | [DEPRECIATED] onFormMount | onFormMount?(values: TFormValues): void; | Called when the form finished mounted |
272
+ | [DEPRECIATED] formattedDataDefaults | Object | Some default data to fields when they are undefined |
273
+ | [DEPRECIATED] submitOnValidOnly | boolean | Boolean indicating if form can be submitted even if it is invalid |
274
+ | [DEPRECIATED] renderFieldWrapper | renderFieldWrapper(component: TComponent, children: ReactElement[]) | Function that allows to insert a wrapper in place of a component or wrapping the component |
223
275
 
224
276
  ### Example
225
277
 
226
- In the following example `useForm` hooks are used to connect to multiple forms that are inside other components.
278
+ A simple example of rendering a basic form
227
279
 
228
280
  ```javascript
229
- useForm({
230
- onSubmit: () => {
231
- dispatch(
232
- formData({
233
- aggregate: true,
234
- }),
235
- );
236
- },
237
- id: 'main-form',
238
- });
239
- const { formData } = useFormGroup({
240
- onSubmit: (data) => {
241
- console.log('SUBMIT', data);
242
- },
243
- onData: (data) => {
244
- console.log('-> ', data);
245
- },
246
- group: 'logical',
247
- });
248
-
249
- return (
250
- <Form
251
- id="1"
252
- group="logical"
253
- schema={...}
254
- />
255
- <Form
256
- id="2"
257
- group="logical"
258
- schema={...}
259
- />
260
- <Form
261
- id="main-form"
262
- schema={...}
263
- />
264
- )
281
+ <Form schema={schema} />
265
282
  ```
266
283
 
267
- The above example will connect to main-form with `useForm` and to a form group (logical) with `useFormGroup`
284
+ ## React `useForm()`
285
+
286
+ Exposed hook that allows you to connect to any form by the formId in any part of the application, as long as you are inside the form context.
287
+
288
+ ## React `useFormGroup()` [DEPRECIATED]
289
+
290
+ Similar to `useForm`
268
291
 
269
292
  ## React `asFormField()`
270
293
 
@@ -314,54 +337,83 @@ In the following example `asFormField` hooks are used to create `Component` fiel
314
337
  propsMapping: propsMapping.component,
315
338
  };
316
339
 
317
- <FormProvider mapper={Mappings} propsMapping={formBuilderPropsMapping}>
340
+ <FormGroupContextProvider mapper={Mappings}>
318
341
  <FormComponent
319
342
  formId="test"
320
343
  label="Field example"
321
344
  name="ss"
322
- filter={{ maxLength: 10 }}
323
- masks={{
324
- ON_FIELD_FOCUS: { cleanMask: true },
325
- ON_FIELD_BLUR: {
326
- generic: [
327
- {
328
- from: 1,
329
- to: 2,
330
- mask: 'X',
331
- },
332
- {
333
- from: 4,
334
- to: 5,
335
- mask: 'X',
336
- },
337
- ],
338
- },
339
- }}
340
- formatters={{
341
- ON_FIELD_CHANGE: {
342
- splitter: [
343
- {
344
- position: 2,
345
- value: '/',
346
- },
347
- {
348
- position: 5,
349
- value: '/',
350
- },
351
- ],
352
- },
353
- }}
345
+ formatters={
346
+ splitter: [
347
+ {
348
+ position: 2,
349
+ value: '/',
350
+ },
351
+ {
352
+ position: 5,
353
+ value: '/',
354
+ },
355
+ ]
356
+ }
354
357
  validations={{
355
- ON_FIELD_BLUR: {
358
+ config: {
356
359
  callback: (data) => {
357
360
  return {
358
361
  fail: data === '10/10/1000',
359
362
  };
360
363
  },
361
364
  },
365
+ events: ['ON_FIELD_BLUR']
362
366
  }}
363
- errorMessages={{ default: 'ERRRO' }}
367
+ errorMessages={{ callback: 'ERRRO' }}
364
368
  />
365
- </FormProvider>;
369
+ </FormGroupContextProvider>;
366
370
  }
367
371
  ```
372
+
373
+ ## React `AsFormFieldBuilder()`
374
+
375
+ Extends the asFormField implementation with the addition of the prop formId and mapper and doesn't required the Form component to render a form field
376
+
377
+ | Prop | Type | Description |
378
+ |formIndex | string | index of the form to identity the form |
379
+ |mapper | TMapper<ElementType> | same mapper used on the mapper context |
380
+
381
+ ```javascript
382
+ <FormGroupContextProvider mapper={Mappings}>
383
+ <AsFormFieldBuilder
384
+ mapper={{
385
+ component: Input,
386
+ componentName: 'input',
387
+ events: {
388
+ getValue: 'onChange',
389
+ setValue: 'value',
390
+ setErrorMessage: 'errorMessage',
391
+ onBlur: 'onBlur',
392
+ onFocus: 'onFocus',
393
+ onKeyUp: 'onKeyUp',
394
+ onKeyDown: 'onKeyUpCapture',
395
+ },
396
+ valueChangeEvent: (event: unknown) => {
397
+ return (event as SyntheticEvent<HTMLInputElement>).currentTarget
398
+ .value;
399
+ },
400
+ }}
401
+ formIndex="form1"
402
+ name={`input1`}
403
+ props={{
404
+ label: '${"insert something"||${input1.value}}',
405
+ helperMessage: `\${input1.api.default.response}`,
406
+ }}
407
+ api={{
408
+ defaultConfig: {
409
+ config: {
410
+ method: 'GET',
411
+ url: 'https://api.chucknorris.io/jokes/random',
412
+ resultPath: 'value',
413
+ },
414
+ events: ['ON_FIELD_MOUNT'],
415
+ },
416
+ }}
417
+ />
418
+ </FormGroupContextProvider>
419
+ ```