@akinon/akiform-builder 0.6.0 → 0.7.0

package/dist/cjs/transformers/types.js

@@ -1,18 +0,0 @@
-"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/esm/FormBuilderWatch.d.ts

@@ -1,16 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,68 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,41 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,42 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,34 +0,0 @@
-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/transformers/index.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/esm/transformers/index.js

@@ -1,73 +0,0 @@
-import { DataTypesEnum } from './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(DataTypesEnum).includes(item.data_type));
-}
-export 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: 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);
-};

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

@@ -1,22 +0,0 @@
-export declare enum DataTypesEnum {
-    Dropdown = "dropdown",
-    Input = "input",
-    Select = "select",
-    Text = "text",
-    Bool = "bool",
-    DateTime = "datetime",
-    Nested = "nested"
-}
-export type TBaseSchema = {
-    key: string;
-    data_type: DataTypesEnum[keyof DataTypesEnum];
-    name: string;
-    pk?: number | string;
-    options?: Array<{
-        key: string;
-        value: string | number;
-        label: string;
-    }>;
-    [key: string]: any;
-};
-//# sourceMappingURL=types.d.ts.map

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

@@ -1 +0,0 @@
-{"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/esm/transformers/types.js

@@ -1,15 +0,0 @@
-export 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 || (DataTypesEnum = {}));