@bolttech/form-engine 0.1.9 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.0](http://bitbucket.org/gofrank/bolttech-frontend/compare/form-engine-0.1.9...form-engine-0.2.0) (2023-08-03)
+
+
+### Features
+
+* select index on step back or forward ([c651570](http://bitbucket.org/gofrank/bolttech-frontend/commit/c651570ab0a6c378310a79799910ceb5891f1c7f))
+
 ## [0.1.9](http://bitbucket.org/gofrank/bolttech-frontend/compare/form-engine-0.1.8...form-engine-0.1.9) (2023-08-01)
 
 ## [0.1.8](http://bitbucket.org/gofrank/bolttech-frontend/compare/form-engine-0.1.7...form-engine-0.1.8) (2023-08-01)

package/README.md

@@ -2,36 +2,37 @@
 
 Achieve form logic reusage with forms expressed in json format.
 
-> version 0.1.7
+> version 0.2.0
 
 ---
 
 1. [Basic setup](#markdown-header-basic-setup)
 2. [Step by step](#markdown-header-step-by-step)
 3. [Form Features](#markdown-header-available-features)
-  3.1. [Validations - Allow form to run validations in the field](#markdown-header-validations)
-   3.1.1. [Named Validations](#markdown-header-validations)
-   3.1.2. [Error Messages](#markdown-header-validations)
-   3.1.3. [Available Validations](#markdown-header-validations)
-  3.2. [Filters - Allow only what you want in the field](#markdown-header-filters)
-3.2.1. [Available formatters](#markdown-header-formatters)
-  3.3. [Formatters - Style your field value with formatters](#markdown-header-formatters)
-  3.4. [Masks - Modify the field value, while maintaining the original with masks](#markdown-header-masks)
-   3.4.1. [Available Masks](#markdown-header-formatters)
-  3.5. [Visibility conditions - Configure when to show hide/components](#markdown-header-visibility-conditions)
-  3.6. [Clear fields](#markdown-header-clear-fields)
-  3.7. [Api - Make api calls on certain form events](#markdown-header-api)
-  3.8. [Data binding - Allow to have dynamic data in the form, binding and subscribing to form changes](#markdown-header-data-binding)
-   3.8.1. [Scopes](#markdown-header-scope)
-   3.8.2. [Templates](#markdown-header-templates)
-   3.8.3. [varOps](#markdown-header-varops)
-  3.9. [State - Define component state](#markdown-header-state)
-  3.10. [Group](#markdown-header-group)
+   - 3.1. [Validations - Allow form to run validations in the field](#markdown-header-validations)
+     - 3.1.1. [Named Validations](#markdown-header-validations)
+     - 3.1.2. [Error Messages](#markdown-header-validations)
+     - 3.1.3. [Available Validations](#markdown-header-validations)
+   - 3.2. [Filters - Allow only what you want in the field](#markdown-header-filters)
+     - 3.2.1. [Available formatters](#markdown-header-formatters)
+   - 3.3. [Formatters - Style your field value with formatters](#markdown-header-formatters)
+   - 3.4. [Masks - Modify the field value, while maintaining the original with masks](#markdown-header-masks)
+     - 3.4.1. [Available Masks](#markdown-header-formatters)
+   - 3.5. [Visibility conditions - Configure when to show hide/components](#markdown-header-visibility-conditions)
+   - 3.6. [Clear fields](#markdown-header-clear-fields)
+   - 3.7. [Api - Make api calls on certain form events](#markdown-header-api)
+   - 3.8. [Data binding - Allow to have dynamic data in the form, binding and subscribing to form changes](#markdown-header-data-binding)
+     - 3.8.1. [Scopes](#markdown-header-scope)
+     - 3.8.2. [Templates](#markdown-header-templates)
+     - 3.8.3. [varOps](#markdown-header-varops)
+   - 3.9. [State - Define component state](#markdown-header-state)
+   - 3.10. [Group](#markdown-header-group)
+   - 3.11. [Steps](#markdown-header-form-step)
 4. [React](#markdown-header-react-components)
-  4.1. [FormProvider - Provider to configure the form with component mappings](#markdown-header-react-formprovider)
-  4.2. [Form - Component to render a form based on a schema and listen to some events](#markdown-header-react-form)
-  4.3. [useForm hook- Allo to connect to any form in the page](#markdown-header-react-useform)
-  4.4. [asFormField HOC- Leverage form features but keep the control of your component](#markdown-header-react-asFormField-HOC)
+   - 4.1. [FormProvider - Provider to configure the form with component mappings](#markdown-header-react-formprovider)
+   - 4.2. [Form - Component to render a form based on a schema and listen to some events](#markdown-header-react-form)
+   - 4.3. [useForm hook- Allo to connect to any form in the page](#markdown-header-react-useform)
+   - 4.4. [asFormField HOC- Leverage form features but keep the control of your component](#markdown-header-react-asFormField-HOC)
 
 ## **Basic setup**
 
@@ -912,6 +913,65 @@ Say you have two checkboxes and want the selected value. You can use `group` for
 
 This example will store the selected value of the checkbox in the `checkedGroup` and will then be sent to the client.
 
+## Form Step
+
+In the form it is possible to use it as steps. With this it is possible to have more than one form in just one schema.
+
+For example, if you implement something like:
+
+```js
+{
+  components: [
+    { component: '', name: 'step1', children: [] },
+    { component: '', name: 'step2', children: [] },
+    { component: '', name: 'step3', children: [] },
+  ]
+}
+```
+
+You can control the go back and forth event from the [onClick](#props) event of a button inside one of the forms using the form reference. 
+Or Simply using the form reference in a button outside the form, for example:
+
+```js
+{
+  const ref = useRef<TFormRefActions>(null);
+  
+  return  <Form
+    id='form'
+    ref={ref}
+    onClick={() => ref.current?.stepForward()}
+  />
+}
+
+// --------------------- OR --------------------- //
+
+{
+  const ref = useRef<TFormRefActions>(null);
+  
+  return  (
+    <>
+      <Form
+        id='form'
+        ref={ref}
+      />
+      <button onClick={ref.current?.stepBack()} />
+    </>
+  )
+}
+```
+
+However, it is possible to choose which step you want to go or go back, using the numerical index or simply the name of the step you want, for example:
+
+```js
+() => ref.current?.stepForward(2);
+// --------------- OR -------------- //
+() => ref.current?.stepForward('step3');
+  
+() => ref.current?.stepBack(0);
+// --------------- OR -------------- //
+() => ref.current?.stepBack('step1');
+```
+
 # React Components
 
 ## React `<FormProvider />`
@@ -958,7 +1018,7 @@ const App = () => {
 };
 ```
 
-You now can use in your [form](#react-form) the mapped components with names `inputForm` and `dropdownForm`.
+You now can use in your [form](#react-form-) the mapped components with names `inputForm` and `dropdownForm`.
 
 Also note the data in `propsMapping`. There you can map up to five form functionalities per component
 
@@ -1024,7 +1084,7 @@ After configuring the provider, `<Form />` components lets you render a form
 | onStep                | callback(TFormValues)                                                              | Called when a form step changed                                                                                                             |
 | onLog                 | callback(TLoggingEvent)                                                            | Called on each log, if the logging is enabled                                                                                               |
 | onScopeChange         | onScopeChange?(scope: TScope, namespace: string, key: string): void;               | Called everything scope change with the changing information (namespace and key) and the changed scope                                      |
-|                       |
+| onClick               | onClick(TFormValues, TField)                                                       | Callback function that runs on each component click                                                                                         |
 | onFieldRehydrate      | onFieldRehydrate?(values: TFormValues, component: TComponent, field: TField): void | This callback is called whenever some form field was rehydrated                                                                             |
 | renderLoading         | renderLoading?(): ReactElement;                                                    | Component to render while the schema has not rendered                                                                                       |
 | onFormMount           | onFormMount?(values: TFormValues): void;                                           | Called when the form finished mounted                                                                                                       |