@akinon/akiform-builder 0.4.0 → 0.6.0

package/dist/cjs/FormBuilderWatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilderWatch.d.ts","sourceRoot":"","sources":["../../src/FormBuilderWatch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,KAAK,qBAAqB,GAAG;IAC3B,aAAa,EAAE,SAAS,EAAE,CAAC;IAE3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,iDAI1B,qBAAqB,sBAgFvB,CAAC"}

package/dist/cjs/FormBuilderWatch.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormBuilderWatch = void 0;
+const akiform_1 = require("@akinon/akiform");
+const dayjs_1 = require("dayjs");
+const react_1 = require("react");
+const RenderField_1 = require("./RenderField");
+/**
+ * Reasons why seperate FormBuilderWatch component is created from FormBuilder:
+ * 1. FormBuilderWatch is a controlled component, value of form fields is controlled. In any given time, value of any field can be forced from parent. It's directly working with value instead of defaultValues. Also there is no way to change defaultValues after first render.
+ * 2. FormBuilderWatch is watching form changes and calls the given callback function. It's not using form methods like handleSubmit, reset, etc.
+ * 3. It's meticulously designed to not create loop. Since it's controlled and watching form changes, it's easy to create infinite loop. For example, callback can be called as result of form change, and parent can react to this change by returning same values to form.
+ */
+const FormBuilderWatch = ({ builderFields, handleChange, isDebounced = false }) => {
+    const { control, setValue } = (0, akiform_1.useForm)();
+    const formWatch = (0, akiform_1.useWatch)({ control });
+    react_1.default.useEffect(() => {
+        // if formWatch are empty object, it means it's the first render. Do not call handleChange
+        if (!Object.keys(formWatch).length)
+            return;
+        // if item.value is same with formWatch do not call handleChange to prevent infinite loop
+        const isSame = builderFields.every(field => {
+            // if field type is datepicker, convert the formWatch value to string before comparing
+            if (field.type === 'datepicker') {
+                if (formWatch[field.key] === null) {
+                    formWatch[field.key] = undefined;
+                }
+                if (!formWatch[field.key]) {
+                    return field.value === formWatch[field.key];
+                }
+                const compareResult = (0, dayjs_1.default)(field.value).isSame((0, dayjs_1.default)(formWatch[field.key]), 'day');
+                return compareResult;
+            }
+            // TODO write tests for this part because it can be a source of bug
+            // if watch value is object, should stringify before comparing
+            const isWatchValueObject = typeof formWatch[field.key] === 'object';
+            if (isWatchValueObject) {
+                return (JSON.stringify(field.value) === JSON.stringify(formWatch[field.key]));
+            }
+            return field.value === formWatch[field.key];
+        });
+        if (isSame) {
+            return;
+        }
+        if (!isDebounced) {
+            handleChange(formWatch);
+            return;
+        }
+        const timeout = setTimeout(() => {
+            handleChange(formWatch);
+        }, 1000);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [formWatch]);
+    // value of fields can be set by parent
+    react_1.default.useEffect(() => {
+        builderFields.forEach(field => {
+            const { key, value, type } = field;
+            // if type is datepicker and value is set, convert it to dayjs
+            if (type === 'datepicker' && value) {
+                setValue(key, (0, dayjs_1.default)(value));
+                return;
+            }
+            setValue(key, value);
+        });
+    }, [builderFields]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "form-builder" },
+            react_1.default.createElement(akiform_1.Akiform, null, builderFields.map(field => (0, RenderField_1.RenderField)(field, control))))));
+};
+exports.FormBuilderWatch = FormBuilderWatch;

package/dist/cjs/RenderField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderField.d.ts","sourceRoot":"","sources":["../../src/RenderField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAY,MAAM,iBAAiB,CAAC;AAMpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAGL,SAAS,EAIV,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,WAAW,UAAW,SAAS,WAAW,OAAO,6DA+F7D,CAAC"}

package/dist/cjs/RenderField.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderField = void 0;
+const akiform_1 = require("@akinon/akiform");
+const ui_checkbox_1 = require("@akinon/ui-checkbox");
+const ui_date_picker_1 = require("@akinon/ui-date-picker");
+const ui_input_1 = require("@akinon/ui-input");
+const ui_input_number_1 = require("@akinon/ui-input-number");
+const ui_select_1 = require("@akinon/ui-select");
+const react_1 = require("react");
+const RenderField = (field, control) => {
+    var _a, _b;
+    switch (field.type) {
+        case 'input':
+            const inputField = field;
+            return (react_1.default.createElement(akiform_1.FormItem, { key: inputField.key, name: inputField.key, label: inputField.label, control: control }, ((_a = inputField.props) === null || _a === void 0 ? void 0 : _a.mode) !== 'multiple' ? (react_1.default.createElement(ui_input_1.Input, { placeholder: inputField.placeholder })) : (react_1.default.createElement(ui_select_1.Select, { mode: "tags", placeholder: inputField.placeholder }))));
+        case 'number':
+            const numberField = field;
+            return (react_1.default.createElement(akiform_1.FormItem, { key: numberField.key, name: numberField.key, label: numberField.label, control: control },
+                react_1.default.createElement(ui_input_number_1.InputNumber, { keyboard: false, placeholder: numberField.placeholder })));
+        case 'select':
+            const selectField = field;
+            return (react_1.default.createElement(akiform_1.FormItem, { key: selectField.key, name: selectField.key, label: selectField.label, control: control },
+                react_1.default.createElement(ui_select_1.Select, { mode: (_b = selectField.props) === null || _b === void 0 ? void 0 : _b.mode, options: selectField.options, placeholder: selectField.placeholder })));
+        case 'checkbox':
+            const checkboxField = field;
+            const { labelRightAligned } = checkboxField.props || {};
+            return (react_1.default.createElement(akiform_1.FormItem, { key: checkboxField.key, name: checkboxField.key, initialValue: checkboxField.value, control: control, valuePropName: "checked", 
+                // if labelRightAligned is true, don't pass label prop to Checkbox
+                label: labelRightAligned ? '' : checkboxField.label },
+                react_1.default.createElement(ui_checkbox_1.Checkbox, null, labelRightAligned ? checkboxField.label : '')));
+        case 'datepicker':
+            const datePickerField = field;
+            return (react_1.default.createElement(akiform_1.FormItem, { key: datePickerField.key, name: datePickerField.key, label: datePickerField.label, control: control },
+                react_1.default.createElement(ui_date_picker_1.DatePicker, { placeholder: datePickerField.placeholder })));
+        case 'field-array':
+            if (field.config) {
+                return (react_1.default.createElement(react_1.default.Fragment, { key: field.key }, field.config.fields.map(nestedField => (0, exports.RenderField)(nestedField, control))));
+            }
+            break;
+        default:
+            return 'unsupported field type';
+    }
+};
+exports.RenderField = RenderField;

package/dist/cjs/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0ClD,CAAC"}

package/dist/cjs/component.js

@@ -0,0 +1,46 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormBuilder = void 0;
+const akiform_1 = require("@akinon/akiform");
+const akival = require("@akinon/akival");
+const react_1 = require("react");
+const RenderField_1 = require("./RenderField");
+const FormBuilder = (_a) => {
+    var { builderFields, children } = _a, formProps = __rest(_a, ["builderFields", "children"]);
+    const validationSchema = akival.object(builderFields.reduce((schema, field) => {
+        if (field.type !== 'field-array' && field.validation) {
+            return Object.assign(Object.assign({}, schema), { [field.key]: field.validation });
+        }
+        return schema;
+    }, {}));
+    const formMethods = (0, akiform_1.useForm)({
+        defaultValues: builderFields.reduce((defaultValues, field) => {
+            if (field.defaultValue !== undefined) {
+                defaultValues[field.key] = field.defaultValue;
+            }
+            return defaultValues;
+        }, {}),
+        resolver: (0, akiform_1.akivalResolver)(validationSchema)
+    });
+    const { control } = formMethods;
+    return (react_1.default.createElement(akiform_1.Akiform, Object.assign({}, formProps, { onFinish: formMethods.handleSubmit(() => {
+            var _a;
+            return (_a = formProps.onFinish) === null || _a === void 0 ? void 0 : _a.call(formProps, formMethods.getValues());
+        }, () => {
+            return console.error('Form validation failed');
+        }) }),
+        builderFields.map(field => (0, RenderField_1.RenderField)(field, control)),
+        react_1.default.createElement("div", null, children)));
+};
+exports.FormBuilder = FormBuilder;

package/dist/cjs/hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/hook.ts"],"names":[],"mappings":"AAQA,OAAO,EAAmB,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzE,eAAO,MAAM,cAAc,WAAY,SAAS,EAAE,KAAG,kBAkCpD,CAAC"}

package/dist/cjs/hook.js

@@ -0,0 +1,38 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormBuilder = void 0;
+const akiform_1 = require("@akinon/akiform");
+const akival = require("@akinon/akival");
+const useFormBuilder = (fields) => {
+    const validationSchema = akival.object(fields.reduce((schema, field) => {
+        if (field.type !== 'field-array' && field.validation) {
+            return Object.assign(Object.assign({}, schema), { [field.key]: field.validation });
+        }
+        return schema;
+    }, {}));
+    const formMethods = (0, akiform_1.useForm)({
+        resolver: (0, akiform_1.akivalResolver)(validationSchema)
+    });
+    const fieldArrays = fields
+        .filter((field) => field.type === 'field-array')
+        .map(fieldArray => {
+        const _a = (0, akiform_1.useFieldArray)({
+            control: formMethods.control,
+            name: fieldArray.config.name
+        }), { fields: nestedFields } = _a, arrayHelpers = __rest(_a, ["fields"]);
+        return Object.assign(Object.assign(Object.assign({}, fieldArray), { name: fieldArray.config.name, fields: nestedFields }), arrayHelpers);
+    });
+    return Object.assign(Object.assign({}, formMethods), { fieldArrays });
+};
+exports.useFormBuilder = useFormBuilder;

package/dist/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACvD,cAAc,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformToFormFields = exports.useFormBuilder = exports.FormBuilderWatch = exports.FormBuilder = void 0;
+var component_1 = require("./component");
+Object.defineProperty(exports, "FormBuilder", { enumerable: true, get: function () { return component_1.FormBuilder; } });
+var FormBuilderWatch_1 = require("./FormBuilderWatch");
+Object.defineProperty(exports, "FormBuilderWatch", { enumerable: true, get: function () { return FormBuilderWatch_1.FormBuilderWatch; } });
+var hook_1 = require("./hook");
+Object.defineProperty(exports, "useFormBuilder", { enumerable: true, get: function () { return hook_1.useFormBuilder; } });
+var transformers_1 = require("./transformers");
+Object.defineProperty(exports, "transformToFormFields", { enumerable: true, get: function () { return transformers_1.transformToFormFields; } });
+__exportStar(require("./types"), exports);

package/dist/cjs/transformers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/transformers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,SAAS,EAGV,MAAM,UAAU,CAAC;AAClB,OAAO,EAAiB,WAAW,EAAE,MAAM,SAAS,CAAC;AAsBrD,eAAO,MAAM,qBAAqB,SAC1B,OAAO,MAAM,EAAE,WAAW,CAAC,KAChC,SAAS,EA8EX,CAAC"}

package/dist/cjs/transformers/index.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformToFormFields = void 0;
+const types_1 = require("./types");
+const fieldTypeMap = {
+    text: 'input',
+    input: 'input',
+    dropdown: 'select',
+    select: 'select',
+    datetime: 'datepicker',
+    nested: 'field-array',
+    boolean: 'select',
+    bool: 'checkbox'
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isItemCompatible(item) {
+    return (typeof item.key === 'string' &&
+        typeof item.name === 'string' &&
+        Object.values(types_1.DataTypesEnum).includes(item.data_type));
+}
+const transformToFormFields = (data) => {
+    return Object.values(data)
+        .reduce((acc, item) => {
+        if (!isItemCompatible(item)) {
+            console.warn('Incompatible item detected on field type transformer:', item);
+            return acc;
+        }
+        const fieldType = fieldTypeMap[item.data_type];
+        if (!fieldType) {
+            console.error('Unsupported data type:', item.data_type);
+            return acc;
+        }
+        let field = null;
+        // TODO: add defaultValue to all fields
+        switch (fieldType) {
+            case 'field-array':
+                if (item.schema) {
+                    field = {
+                        key: item.key,
+                        label: item.name,
+                        type: fieldType,
+                        config: {
+                            name: item.key,
+                            fields: (0, exports.transformToFormFields)(item.schema)
+                        }
+                    };
+                }
+                break;
+            case 'select':
+                if (item.choices) {
+                    const choices = item.choices;
+                    field = {
+                        key: item.key,
+                        label: item.name,
+                        type: fieldType,
+                        placeholder: item.placeholder,
+                        options: choices.map(choice => ({
+                            key: choice.value.toString(),
+                            value: choice.value,
+                            label: choice.label
+                        })),
+                        validation: item.validation
+                    };
+                }
+                break;
+            default:
+                field = Object.assign(Object.assign({}, item), { key: item.key, label: item.name, validation: item.validation, type: fieldType, children: null, control: item.control });
+                break;
+        }
+        if (field !== null) {
+            acc.push(field);
+        }
+        return acc;
+    }, [])
+        .filter((item) => item !== null);
+};
+exports.transformToFormFields = transformToFormFields;

package/dist/cjs/transformers/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/transformers/types.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IAEvB,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,IAAI,SAAS;IAIb,QAAQ,aAAa;IAErB,MAAM,WAAW;CAClB;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,aAAa,CAAC,MAAM,aAAa,CAAC,CAAC;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;IAEH,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC"}

package/dist/cjs/transformers/types.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTypesEnum = void 0;
+var DataTypesEnum;
+(function (DataTypesEnum) {
+    // Area = 'area',
+    DataTypesEnum["Dropdown"] = "dropdown";
+    DataTypesEnum["Input"] = "input";
+    DataTypesEnum["Select"] = "select";
+    DataTypesEnum["Text"] = "text";
+    DataTypesEnum["Bool"] = "bool";
+    // Image = 'image',
+    // ValueLabel = 'valuelabel',
+    // File = 'file',
+    DataTypesEnum["DateTime"] = "datetime";
+    // Multiple = 'multiple',
+    DataTypesEnum["Nested"] = "nested";
+})(DataTypesEnum || (exports.DataTypesEnum = DataTypesEnum = {}));

package/dist/cjs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,YAAY,GACZ,aAAa,GACb,MAAM,CAAC;AAEX,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,GAAG;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,MAAM,CAAC;IACnD,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE;QACN,IAAI,CAAC,EAAE,UAAU,CAAC;KACnB,CAAC;CACH;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,MAAM,CAAC;IACpD,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC;IAC7D,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,KAAK,CAAC;QACb,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE;QACN,IAAI,CAAC,EAAE,UAAU,CAAC;KACnB,CAAC;CACH;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,OAAO,CAAC;IACvD,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE;QACN,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,IAAI,CAAC;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,SAAS,GACjB,UAAU,GACV,WAAW,GACX,WAAW,GACX,aAAa,GACb,eAAe,GACf,eAAe,CAAC;AAEpB,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,aAAa,EAAE,SAAS,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5C,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACtC,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAElC,WAAW,EAAE,KAAK,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;QAChC,MAAM,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;QAC7B,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;QAC5C,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;QAC9B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;QAC5C,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;QAC/C,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;KAC1C,CAAC,CAAC;CACJ"}

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/FormBuilderWatch.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { FormField } from './types';
+type FormBuilderWatchProps = {
+    builderFields: FormField[];
+    isDebounced?: boolean;
+    handleChange: (data: any) => void;
+};
+/**
+ * Reasons why seperate FormBuilderWatch component is created from FormBuilder:
+ * 1. FormBuilderWatch is a controlled component, value of form fields is controlled. In any given time, value of any field can be forced from parent. It's directly working with value instead of defaultValues. Also there is no way to change defaultValues after first render.
+ * 2. FormBuilderWatch is watching form changes and calls the given callback function. It's not using form methods like handleSubmit, reset, etc.
+ * 3. It's meticulously designed to not create loop. Since it's controlled and watching form changes, it's easy to create infinite loop. For example, callback can be called as result of form change, and parent can react to this change by returning same values to form.
+ */
+export declare const FormBuilderWatch: ({ builderFields, handleChange, isDebounced }: FormBuilderWatchProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=FormBuilderWatch.d.ts.map

package/dist/esm/FormBuilderWatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilderWatch.d.ts","sourceRoot":"","sources":["../../src/FormBuilderWatch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,KAAK,qBAAqB,GAAG;IAC3B,aAAa,EAAE,SAAS,EAAE,CAAC;IAE3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,iDAI1B,qBAAqB,sBAgFvB,CAAC"}

package/dist/esm/FormBuilderWatch.js

@@ -0,0 +1,68 @@
+import { Akiform, useForm, useWatch } from '@akinon/akiform';
+import dayjs from 'dayjs';
+import React from 'react';
+import { RenderField } from './RenderField';
+/**
+ * Reasons why seperate FormBuilderWatch component is created from FormBuilder:
+ * 1. FormBuilderWatch is a controlled component, value of form fields is controlled. In any given time, value of any field can be forced from parent. It's directly working with value instead of defaultValues. Also there is no way to change defaultValues after first render.
+ * 2. FormBuilderWatch is watching form changes and calls the given callback function. It's not using form methods like handleSubmit, reset, etc.
+ * 3. It's meticulously designed to not create loop. Since it's controlled and watching form changes, it's easy to create infinite loop. For example, callback can be called as result of form change, and parent can react to this change by returning same values to form.
+ */
+export const FormBuilderWatch = ({ builderFields, handleChange, isDebounced = false }) => {
+    const { control, setValue } = useForm();
+    const formWatch = useWatch({ control });
+    React.useEffect(() => {
+        // if formWatch are empty object, it means it's the first render. Do not call handleChange
+        if (!Object.keys(formWatch).length)
+            return;
+        // if item.value is same with formWatch do not call handleChange to prevent infinite loop
+        const isSame = builderFields.every(field => {
+            // if field type is datepicker, convert the formWatch value to string before comparing
+            if (field.type === 'datepicker') {
+                if (formWatch[field.key] === null) {
+                    formWatch[field.key] = undefined;
+                }
+                if (!formWatch[field.key]) {
+                    return field.value === formWatch[field.key];
+                }
+                const compareResult = dayjs(field.value).isSame(dayjs(formWatch[field.key]), 'day');
+                return compareResult;
+            }
+            // TODO write tests for this part because it can be a source of bug
+            // if watch value is object, should stringify before comparing
+            const isWatchValueObject = typeof formWatch[field.key] === 'object';
+            if (isWatchValueObject) {
+                return (JSON.stringify(field.value) === JSON.stringify(formWatch[field.key]));
+            }
+            return field.value === formWatch[field.key];
+        });
+        if (isSame) {
+            return;
+        }
+        if (!isDebounced) {
+            handleChange(formWatch);
+            return;
+        }
+        const timeout = setTimeout(() => {
+            handleChange(formWatch);
+        }, 1000);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [formWatch]);
+    // value of fields can be set by parent
+    React.useEffect(() => {
+        builderFields.forEach(field => {
+            const { key, value, type } = field;
+            // if type is datepicker and value is set, convert it to dayjs
+            if (type === 'datepicker' && value) {
+                setValue(key, dayjs(value));
+                return;
+            }
+            setValue(key, value);
+        });
+    }, [builderFields]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "form-builder" },
+            React.createElement(Akiform, null, builderFields.map(field => RenderField(field, control))))));
+};

package/dist/esm/RenderField.d.ts

@@ -0,0 +1,5 @@
+import { Control } from '@akinon/akiform';
+import React from 'react';
+import { FormField } from './types';
+export declare const RenderField: (field: FormField, control: Control) => React.JSX.Element | "unsupported field type" | undefined;
+//# sourceMappingURL=RenderField.d.ts.map

package/dist/esm/RenderField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderField.d.ts","sourceRoot":"","sources":["../../src/RenderField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAY,MAAM,iBAAiB,CAAC;AAMpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAGL,SAAS,EAIV,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,WAAW,UAAW,SAAS,WAAW,OAAO,6DA+F7D,CAAC"}

package/dist/esm/RenderField.js

@@ -0,0 +1,41 @@
+import { FormItem } from '@akinon/akiform';
+import { Checkbox } from '@akinon/ui-checkbox';
+import { DatePicker } from '@akinon/ui-date-picker';
+import { Input } from '@akinon/ui-input';
+import { InputNumber } from '@akinon/ui-input-number';
+import { Select } from '@akinon/ui-select';
+import React from 'react';
+export const RenderField = (field, control) => {
+    var _a, _b;
+    switch (field.type) {
+        case 'input':
+            const inputField = field;
+            return (React.createElement(FormItem, { key: inputField.key, name: inputField.key, label: inputField.label, control: control }, ((_a = inputField.props) === null || _a === void 0 ? void 0 : _a.mode) !== 'multiple' ? (React.createElement(Input, { placeholder: inputField.placeholder })) : (React.createElement(Select, { mode: "tags", placeholder: inputField.placeholder }))));
+        case 'number':
+            const numberField = field;
+            return (React.createElement(FormItem, { key: numberField.key, name: numberField.key, label: numberField.label, control: control },
+                React.createElement(InputNumber, { keyboard: false, placeholder: numberField.placeholder })));
+        case 'select':
+            const selectField = field;
+            return (React.createElement(FormItem, { key: selectField.key, name: selectField.key, label: selectField.label, control: control },
+                React.createElement(Select, { mode: (_b = selectField.props) === null || _b === void 0 ? void 0 : _b.mode, options: selectField.options, placeholder: selectField.placeholder })));
+        case 'checkbox':
+            const checkboxField = field;
+            const { labelRightAligned } = checkboxField.props || {};
+            return (React.createElement(FormItem, { key: checkboxField.key, name: checkboxField.key, initialValue: checkboxField.value, control: control, valuePropName: "checked", 
+                // if labelRightAligned is true, don't pass label prop to Checkbox
+                label: labelRightAligned ? '' : checkboxField.label },
+                React.createElement(Checkbox, null, labelRightAligned ? checkboxField.label : '')));
+        case 'datepicker':
+            const datePickerField = field;
+            return (React.createElement(FormItem, { key: datePickerField.key, name: datePickerField.key, label: datePickerField.label, control: control },
+                React.createElement(DatePicker, { placeholder: datePickerField.placeholder })));
+        case 'field-array':
+            if (field.config) {
+                return (React.createElement(React.Fragment, { key: field.key }, field.config.fields.map(nestedField => RenderField(nestedField, control))));
+            }
+            break;
+        default:
+            return 'unsupported field type';
+    }
+};

package/dist/esm/component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FormBuilderProps } from './types';
+export declare const FormBuilder: React.FC<FormBuilderProps>;
+//# sourceMappingURL=component.d.ts.map

package/dist/esm/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0ClD,CAAC"}

package/dist/esm/component.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Akiform, akivalResolver, useForm } from '@akinon/akiform';
+import * as akival from '@akinon/akival';
+import React from 'react';
+import { RenderField } from './RenderField';
+export const FormBuilder = (_a) => {
+    var { builderFields, children } = _a, formProps = __rest(_a, ["builderFields", "children"]);
+    const validationSchema = akival.object(builderFields.reduce((schema, field) => {
+        if (field.type !== 'field-array' && field.validation) {
+            return Object.assign(Object.assign({}, schema), { [field.key]: field.validation });
+        }
+        return schema;
+    }, {}));
+    const formMethods = useForm({
+        defaultValues: builderFields.reduce((defaultValues, field) => {
+            if (field.defaultValue !== undefined) {
+                defaultValues[field.key] = field.defaultValue;
+            }
+            return defaultValues;
+        }, {}),
+        resolver: akivalResolver(validationSchema)
+    });
+    const { control } = formMethods;
+    return (React.createElement(Akiform, Object.assign({}, formProps, { onFinish: formMethods.handleSubmit(() => {
+            var _a;
+            return (_a = formProps.onFinish) === null || _a === void 0 ? void 0 : _a.call(formProps, formMethods.getValues());
+        }, () => {
+            return console.error('Form validation failed');
+        }) }),
+        builderFields.map(field => RenderField(field, control)),
+        React.createElement("div", null, children)));
+};

package/dist/esm/hook.d.ts

@@ -0,0 +1,3 @@
+import { FormBuilderMethods, FormField } from './types';
+export declare const useFormBuilder: (fields: FormField[]) => FormBuilderMethods;
+//# sourceMappingURL=hook.d.ts.map

package/dist/esm/hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/hook.ts"],"names":[],"mappings":"AAQA,OAAO,EAAmB,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzE,eAAO,MAAM,cAAc,WAAY,SAAS,EAAE,KAAG,kBAkCpD,CAAC"}

package/dist/esm/hook.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { akivalResolver, useFieldArray, useForm } from '@akinon/akiform';
+import * as akival from '@akinon/akival';
+export const useFormBuilder = (fields) => {
+    const validationSchema = akival.object(fields.reduce((schema, field) => {
+        if (field.type !== 'field-array' && field.validation) {
+            return Object.assign(Object.assign({}, schema), { [field.key]: field.validation });
+        }
+        return schema;
+    }, {}));
+    const formMethods = useForm({
+        resolver: akivalResolver(validationSchema)
+    });
+    const fieldArrays = fields
+        .filter((field) => field.type === 'field-array')
+        .map(fieldArray => {
+        const _a = useFieldArray({
+            control: formMethods.control,
+            name: fieldArray.config.name
+        }), { fields: nestedFields } = _a, arrayHelpers = __rest(_a, ["fields"]);
+        return Object.assign(Object.assign(Object.assign({}, fieldArray), { name: fieldArray.config.name, fields: nestedFields }), arrayHelpers);
+    });
+    return Object.assign(Object.assign({}, formMethods), { fieldArrays });
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,6 @@
+export { FormBuilder } from './component';
+export { FormBuilderWatch } from './FormBuilderWatch';
+export { useFormBuilder } from './hook';
+export { transformToFormFields } from './transformers';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACvD,cAAc,SAAS,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+export { FormBuilder } from './component';
+export { FormBuilderWatch } from './FormBuilderWatch';
+export { useFormBuilder } from './hook';
+export { transformToFormFields } from './transformers';
+export * from './types';

package/dist/esm/transformers/index.d.ts

@@ -0,0 +1,4 @@
+import { FormField } from '../types';
+import { TBaseSchema } from './types';
+export declare const transformToFormFields: (data: Record<string, TBaseSchema>) => FormField[];
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/transformers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/transformers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,SAAS,EAGV,MAAM,UAAU,CAAC;AAClB,OAAO,EAAiB,WAAW,EAAE,MAAM,SAAS,CAAC;AAsBrD,eAAO,MAAM,qBAAqB,SAC1B,OAAO,MAAM,EAAE,WAAW,CAAC,KAChC,SAAS,EA8EX,CAAC"}