@bolttech/form-engine 3.1.2-beta.1 → 3.1.2-beta.2

package/README.md

@@ -17,7 +17,7 @@ This is an adapter to be used with the bolttech form engine. Compatible with Nex
 6. [schema components](#schema-components)
 
 - 6.1 [formatters](#formatters)
-- 6.2 [masks] (#masks)
+- 6.2 [masks](#masks)
 - 6.3 [nameToSubmit](#nametosubmit)
 - 6.4 [props](#props)
 - 6.5 [validations](#validations)
@@ -37,6 +37,7 @@ This is an adapter to be used with the bolttech form engine. Compatible with Nex
 
 9. [AsFormField](#asformfield)
 10. [AsFormFieldBuilder](#asformfieldbuilder)
+11. [AsFormFieldRepeater](#asformfieldrepeater)
 
 <a id="sample"></a>
 
@@ -1187,3 +1188,109 @@ Other than schema component properties like `validations`, `api`, etc.., it has
 | name      | string     | field name to be identified on the form                                                                                  |
 | formIndex | string     | index of the form to be identified on the formGroup                                                                      |
 | component | string     | if mappers is provided from the formgroup context, you can assign the mapper by it's name instead of whole mapper config |
+
+<a id="asformfieldrepeater"></a>
+
+## **AsFormFieldRepeater**
+
+Component adapter to aid managing multiple forms that shares the same inputs
+
+Props:
+
+| Attr                        | Type                                                      |Description                                                                 |
+| --------------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------- |
+| RepeaterComponent           | ElementType<{ formIndex: string }>                        | Component with form schema or AsFormFieldBuilder elements                  |
+| addFieldName                | string                                                    | name of the button in the RepeaterComponent to add forms                   |
+| removeFieldName             | string                                                    | name of the button in the RepeaterComponent to remove forms                |
+| existingElements            | Record<string, unknown>[]                                 | existing values emmitted from stateUpdater to restore previous used values |
+| stateUpdater                | (payload: TFormGroupOnDataEventPayload<unknown>) => void; | callback function that reacts to RepeaterComponet values changes           |
+| formPrefix                  | string                                                    | prefix for form names ex, prefix: foo, forms: ["foo1","foo2","foo3"]       |
+| RepeaterFooter              | ElementType<{ formIndex: string }>                        | Component with a button to add forms on the last position                  |
+
+Common use case for this Adapter is to manage multiple forms that collects the same data ex: multiple person personal data
+
+# Example
+
+## RepeaterComponent
+
+```javascript
+const FormElement = ({ formIndex }: { formIndex: string }) => {
+  return (
+    <>
+      <AsFormFieldBuilder formIndex={formIndex} name="foo" component="input" props={{ label: 'foo' }} />
+      <AsFormFieldBuilder formIndex={formIndex} name="bar" component="input" props={{ label: 'bar' }} />
+      <AsFormFieldBuilder
+        formIndex={formIndex}
+        name="addForm"
+        component="button"
+        props={{
+          text: 'add element',
+        }}
+      />
+      <AsFormFieldBuilder
+        formIndex={formIndex}
+        name="removeForm"
+        component="button"
+        props={{
+          text: 'remove element',
+        }}
+      />
+    </>
+  );
+};
+```
+
+Important notes when developing this component is that it needs to receive an object with a key **formIndex**
+
+Optionally, but to add form management functionality, add two buttons with **ON_FIELD_CLICK** event capture (can't be of type submit)
+both that Field button names will be needed on the next step
+
+## RepeaterFooter
+
+Optionally, you can develop a footer component with a button that will be added the bottom of the repeated forms
+and when you press that button will add a form at the bottom of the list
+
+It's props needs to be an objet with a **formIndex** key, the button needs to have **ON_FIELD_CLICK** event capture (can't be of type submit)
+Note: the button name needs to be different from the names you gave to the buttons you are passing on the RepeaterComponent
+
+```javascript
+const FormElementFooter = ({ formIndex }: { formIndex: string }) => {
+  return (
+    <AsFormFieldBuilder
+      formIndex={formIndex}
+      name="addFormBelow"
+      component="button"
+      props={{
+        text: 'add element below',
+      }}
+    />
+  );
+};
+```
+
+## AsFormFieldRepeater
+
+Set the AsFormFieldRepeater adapter with the element you created above and the names that you gave to the button fields
+
+```javascript
+<AsFormFieldRepeater
+  RepeaterComponent={FormElement}
+  RepeaterFooter={FormElementFooter}
+  addFieldName="addForm"
+  removeFieldName="removeForm"
+  formPrefix="insured"
+  stateUpdater={(payload) => {
+    console.log(payload);
+  }}
+/>
+```
+
+**RepeaterComponent** and **RepeaterFooter** you set the elements created above
+
+**addFieldName** you set the name to the button that will add a form on the position it's being clicked
+
+**removeFieldName** you set the name to the button that will remove a form on the position it's being clicked
+
+**formPrefix** the prefix for the forms emmited on **stateUpdater** enumerated
+
+**stateUpdater** callback function that will receive the form values (similar to onData)

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.1.2-beta.1",
+  "version": "3.1.2-beta.2",
   "description": "A react adapter for bolttech form engine",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
   "dependencies": {
-    "@bolttech/form-engine-core": "1.0.2-beta.1",
+    "@bolttech/form-engine-core": "1.0.2-beta.2",
     "react": "18.2.0"
   },
   "peerDependencies": {}