@akinon/akiform-builder 0.8.0 → 1.0.1

package/dist/cjs/src/akiform-builder.js

@@ -0,0 +1,458 @@
+"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.AkiformBuilder = exports.THROTTLE_DELAY = void 0;
+require("./index.css");
+const akiform_1 = require("@akinon/akiform");
+const akival_1 = require("@akinon/akival");
+const icons_1 = require("@akinon/icons");
+const ui_button_1 = require("@akinon/ui-button");
+const ui_checkbox_1 = require("@akinon/ui-checkbox");
+const ui_collapse_1 = require("@akinon/ui-collapse");
+const ui_date_picker_1 = require("@akinon/ui-date-picker");
+const ui_divider_1 = require("@akinon/ui-divider");
+const ui_input_1 = require("@akinon/ui-input");
+const ui_input_number_1 = require("@akinon/ui-input-number");
+const ui_layout_1 = require("@akinon/ui-layout");
+const ui_select_1 = require("@akinon/ui-select");
+const ui_typography_1 = require("@akinon/ui-typography");
+const clsx_1 = require("clsx");
+const react_1 = require("react");
+const i18n_1 = require("./i18n");
+exports.THROTTLE_DELAY = 300; // ms
+const checkIsDisabled = ({ field, formValues }) => {
+    var _a;
+    const configDisabledProperty = (_a = field.config) === null || _a === void 0 ? void 0 : _a.disabled;
+    return typeof configDisabledProperty === 'function'
+        ? configDisabledProperty(formValues)
+        : !!configDisabledProperty;
+};
+const checkIsVisible = ({ field, formValues }) => {
+    var _a;
+    const configVisibleProperty = (_a = field.config) === null || _a === void 0 ? void 0 : _a.visible;
+    return typeof configVisibleProperty === 'function'
+        ? configVisibleProperty(formValues)
+        : configVisibleProperty !== false;
+};
+const SectionComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { errors } = formState;
+    if (field.collapsible) {
+        return (react_1.default.createElement(ui_collapse_1.Collapse, { defaultActiveKey: field.defaultExpanded ? [field.key] : [], expandIcon: panelProps => ({
+                name: 'circle-down',
+                style: {
+                    color: 'var(--color-azure-500)',
+                    transform: panelProps.isActive ? 'rotate(-180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.3s'
+                },
+                size: 20
+            }), items: [
+                {
+                    label: (react_1.default.createElement("div", { className: "akiform-builder-form-actions" },
+                        react_1.default.createElement(ui_typography_1.Text, { strong: true }, field.label),
+                        Object.keys(errors).length > 0 ? (react_1.default.createElement(ui_typography_1.Text, { strong: true, type: "danger" }, i18n_1.i18n.t('an_error_occurred'))) : null)),
+                    key: field.key,
+                    children: field.fields.map(nestedField => {
+                        return renderFormItem({
+                            field: nestedField,
+                            control,
+                            formValues,
+                            formState,
+                            layout,
+                            layoutOptions
+                        });
+                    })
+                }
+            ] }));
+    }
+    else {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ui_divider_1.Divider, { orientation: "left", plain: true, plainOffset: 40 }, field.label),
+            field.fields.map(nestedField => {
+                return renderFormItem({
+                    field: nestedField,
+                    control,
+                    formValues,
+                    formState,
+                    layout,
+                    layoutOptions
+                });
+            })));
+    }
+};
+const RowComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
+    const { columnFields, rowProps } = field;
+    if (!(columnFields === null || columnFields === void 0 ? void 0 : columnFields.length))
+        return;
+    return (react_1.default.createElement(ui_layout_1.Row, Object.assign({}, rowProps), columnFields.map(columnField => {
+        const { columnProps } = columnField;
+        const isVisible = checkIsVisible({
+            field: columnField,
+            formValues
+        });
+        if (!isVisible)
+            return null;
+        return (react_1.default.createElement(ui_layout_1.Col, Object.assign({ key: columnField.key, flex: "1" }, columnProps),
+            react_1.default.createElement(ColumnComponent, { field: columnField, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions })));
+    })));
+};
+const ColumnComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
+    const { fields } = field;
+    if (!(fields === null || fields === void 0 ? void 0 : fields.length))
+        return;
+    return fields.map(rowField => {
+        const isVisible = checkIsVisible({
+            field: rowField,
+            formValues
+        });
+        if (!isVisible)
+            return null;
+        const isRowField = rowField.type === 'row';
+        return isRowField
+            ? renderField(rowField, control, formValues, formState, layout, layoutOptions)
+            : renderFormItem({
+                field: rowField,
+                control,
+                formValues,
+                formState,
+                layout,
+                layoutOptions
+            });
+    });
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const renderField = (field, control, formValues, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+formState, layout, layoutOptions) => {
+    const commonProps = {
+        'aria-required': field.validation ? true : false,
+        'aria-invalid': formState.errors[field.key] ? true : false
+    };
+    switch (field.type) {
+        case 'text':
+            return (react_1.default.createElement(ui_input_1.Input, Object.assign({ placeholder: field.placeholder, size: "large" }, commonProps)));
+        case 'number':
+            return (react_1.default.createElement(ui_input_number_1.InputNumber, Object.assign({ placeholder: field.placeholder, size: "large" }, commonProps)));
+        case 'select':
+            return (react_1.default.createElement(ui_select_1.Select, Object.assign({ placeholder: field.placeholder, options: field.options }, commonProps)));
+        case 'checkbox':
+            return (react_1.default.createElement(ui_checkbox_1.Checkbox, Object.assign({ checked: formValues[field.key] }, commonProps), field.label));
+        case 'date':
+            return (react_1.default.createElement(ui_date_picker_1.DatePicker, Object.assign({ placeholder: field.placeholder, showTime: field.showTime }, commonProps)));
+        case 'textarea':
+            return react_1.default.createElement(ui_input_1.InputTextArea, Object.assign({ placeholder: field.placeholder }, commonProps));
+        case 'fieldArray':
+            return (react_1.default.createElement(FieldArrayComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
+        case 'custom':
+            if (typeof field.render === 'function') {
+                return field.render({ field, formValues, control, formState });
+            }
+            console.warn(`Custom field "${field.key}" has no render function`);
+            return react_1.default.createElement(react_1.Fragment, null);
+        case 'section':
+            return (react_1.default.createElement(SectionComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
+        case 'row':
+            return (react_1.default.createElement(RowComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
+        case 'column':
+            return (react_1.default.createElement(ColumnComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
+        default:
+            return react_1.default.createElement(react_1.Fragment, null);
+    }
+};
+const renderFormItem = ({ field, control, formValues, formState, layout, layoutOptions, customVisibleCheck }) => {
+    const isVisible = customVisibleCheck
+        ? customVisibleCheck()
+        : checkIsVisible({
+            field,
+            formValues
+        });
+    if (!isVisible)
+        return null;
+    const isDisabled = checkIsDisabled({
+        field,
+        formValues
+    });
+    return (react_1.default.createElement(akiform_1.FormItem, { key: field.key, control: control, name: field.key, label: field.label, required: field.validation ? true : false, tooltip: field.tooltip, disabled: isDisabled, help: field.help, labelDescription: field.labelDescription }, renderField(field, control, formValues, formState, layout, layoutOptions)));
+};
+exports.AkiformBuilder = (0, react_1.forwardRef)((_a, ref) => {
+    var _b, _c;
+    var { fields, onSubmit, layout = 'vertical', layoutOptions, showResetButton = false, onReset, controlled = false, values, onValueChange, submitButtonProps, resetButtonProps } = _a, rest = __rest(_a, ["fields", "onSubmit", "layout", "layoutOptions", "showResetButton", "onReset", "controlled", "values", "onValueChange", "submitButtonProps", "resetButtonProps"]);
+    const validationSchema = (0, react_1.useMemo)(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const schema = {};
+        fields.forEach(field => {
+            if (field.validation) {
+                schema[field.key] = field.validation;
+            }
+            if (field.type === 'fieldArray') {
+                schema[field.key] = akival_1.akival.array().of(akival_1.akival.object().shape(field.fields.reduce((acc, nestedField) => {
+                    if (nestedField.validation) {
+                        acc[nestedField.key] = nestedField.validation;
+                    }
+                    return acc;
+                }, 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                {})));
+            }
+        });
+        return akival_1.akival.object().shape(schema);
+    }, [fields]);
+    const { control, handleSubmit, reset, setValue, formState } = (0, akiform_1.useForm)(Object.assign({ 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        resolver: (0, akiform_1.akivalResolver)(validationSchema), 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        defaultValues: rest.initialValues }, (controlled && { values: values })));
+    const formValues = (0, akiform_1.useWatch)({ control });
+    const prevFormValuesRef = (0, react_1.useRef)(null);
+    const isInitialRenderRef = (0, react_1.useRef)(true);
+    const throttleTimeoutRef = (0, react_1.useRef)(null);
+    const hasSubmitButton = !!onSubmit;
+    const hasFormActions = hasSubmitButton || showResetButton;
+    const handleValueChange = (0, react_1.useCallback)((values) => {
+        if (!controlled) {
+            if (throttleTimeoutRef.current) {
+                clearTimeout(throttleTimeoutRef.current);
+            }
+            throttleTimeoutRef.current = setTimeout(() => {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(values);
+            }, exports.THROTTLE_DELAY);
+        }
+        else {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(values);
+        }
+    }, [controlled, onValueChange]);
+    (0, react_1.useEffect)(() => {
+        if (isInitialRenderRef.current) {
+            isInitialRenderRef.current = false;
+            prevFormValuesRef.current = Object.assign({}, formValues);
+            return;
+        }
+        if (formState.isDirty ||
+            Object.keys(formState.touchedFields).length > 0) {
+            const hasChanged = JSON.stringify(formValues) !==
+                JSON.stringify(prevFormValuesRef.current);
+            if (hasChanged) {
+                handleValueChange(formValues);
+                prevFormValuesRef.current = Object.assign({}, formValues);
+            }
+        }
+    }, [
+        formValues,
+        formState.isDirty,
+        formState.touchedFields,
+        handleValueChange
+    ]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (throttleTimeoutRef.current) {
+                clearTimeout(throttleTimeoutRef.current);
+            }
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (controlled && onValueChange) {
+            onValueChange(formValues);
+        }
+    }, [controlled, onValueChange, formValues]);
+    const formItemLayout = (0, react_1.useMemo)(() => {
+        const defaultHorizontalLayout = {
+            labelCol: { span: 6 },
+            wrapperCol: { span: 18 }
+        };
+        const defaultInlineLayout = {
+            wrapperCol: { span: 24 }
+        };
+        switch (layout) {
+            case 'horizontal':
+                return {
+                    labelCol: (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.labelCol) || defaultHorizontalLayout.labelCol,
+                    wrapperCol: (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.wrapperCol) || defaultHorizontalLayout.wrapperCol
+                };
+            case 'inline':
+                return {
+                    wrapperCol: (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.wrapperCol) || defaultInlineLayout.wrapperCol
+                };
+            case 'vertical':
+            default:
+                return {};
+        }
+    }, [layout, layoutOptions]);
+    const handleReset = (event) => {
+        event.preventDefault();
+        reset();
+        if (onReset) {
+            // Create a synthetic FormEvent if the event is a MouseEvent
+            const formEvent = event.type === 'click'
+                ? {
+                    preventDefault: () => { },
+                    target: event.target.closest('form')
+                }
+                : event;
+            onReset(formEvent);
+        }
+    };
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        reset: (values) => {
+            if (values) {
+                // Partial reset: only reset specified fields
+                Object.keys(values).forEach(key => {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    setValue(key, values[key]);
+                });
+            }
+            else {
+                // Full reset
+                reset();
+            }
+            if (onReset) {
+                const syntheticEvent = {
+                    preventDefault: () => { },
+                    target: { reset: () => { } }
+                };
+                onReset(syntheticEvent);
+            }
+        }
+    }));
+    const renderSubmitButton = () => {
+        const _a = submitButtonProps || {}, { children, block = false, className } = _a, otherSubmitButtonProps = __rest(_a, ["children", "block", "className"]);
+        const submitButtonClassName = (0, clsx_1.default)(className, {
+            'w-full': block
+        });
+        return (react_1.default.createElement(ui_button_1.Button, Object.assign({ className: submitButtonClassName, type: "primary" }, otherSubmitButtonProps, { htmlType: "submit" }), children || i18n_1.i18n.t('submit')));
+    };
+    const renderShowResetButton = () => {
+        const _a = resetButtonProps || {}, { children, block = false, className, onClick } = _a, otherResetButtonProps = __rest(_a, ["children", "block", "className", "onClick"]);
+        const resetButtonClassName = (0, clsx_1.default)(className, {
+            'w-full': block
+        });
+        const handleOnClickReset = event => {
+            handleReset(event);
+            if (onClick) {
+                onClick(event);
+            }
+        };
+        return (react_1.default.createElement(ui_button_1.Button
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        , Object.assign({ 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onClick: handleOnClickReset, className: resetButtonClassName, type: "default" }, otherResetButtonProps, { htmlType: "reset" }), children || i18n_1.i18n.t('reset')));
+    };
+    const renderFormActions = () => {
+        return (react_1.default.createElement("div", { className: "akiform-builder-form-actions" },
+            hasSubmitButton && renderSubmitButton(),
+            showResetButton && renderShowResetButton()));
+    };
+    return (react_1.default.createElement("div", { className: "akiform-builder" },
+        react_1.default.createElement(akiform_1.Akiform, Object.assign({}, (hasSubmitButton && { onFinish: handleSubmit(onSubmit) }), { onReset: handleReset, layout: layout }, formItemLayout, rest, { "data-testid": "akiform-builder", role: "form", "aria-label": i18n_1.i18n.t('formLabel'), requiredMark: true }),
+            fields.map(field => {
+                const isVisible = checkIsVisible({
+                    field,
+                    formValues
+                });
+                if (!isVisible) {
+                    return null;
+                }
+                switch (field.type) {
+                    case 'section':
+                        return (react_1.default.createElement(SectionComponent, { key: field.key, field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
+                    case 'fieldArray':
+                        return (react_1.default.createElement("div", { className: "akiform-builder-field-array", key: field.key },
+                            react_1.default.createElement(ui_divider_1.Divider, { orientation: "left", plain: true, plainOffset: 40 },
+                                react_1.default.createElement("span", { id: `${field.key}-label` }, field.label)),
+                            renderField(field, control, formValues, formState, layout, layoutOptions)));
+                    case 'row':
+                        return renderField(field, control, formValues, formState, layout, layoutOptions);
+                    default:
+                        return renderFormItem({
+                            field,
+                            control,
+                            formValues,
+                            formState,
+                            layout,
+                            layoutOptions
+                        });
+                }
+            }),
+            hasFormActions && (react_1.default.createElement(akiform_1.FormItem, { control: control, name: 'form_actions', wrapperCol: layout === 'horizontal'
+                    ? {
+                        offset: (_b = formItemLayout.labelCol) === null || _b === void 0 ? void 0 : _b.span,
+                        span: (_c = formItemLayout.wrapperCol) === null || _c === void 0 ? void 0 : _c.span
+                    }
+                    : undefined }, renderFormActions())))));
+});
+exports.AkiformBuilder.displayName = 'AkiformBuilder';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const FieldArrayComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
+    const { errors } = formState;
+    const { fields, append, remove, insert } = (0, akiform_1.useFieldArray)({
+        control,
+        name: field.key
+    });
+    const createInitialValue = () => {
+        return field.fields.reduce((acc, nestedField) => {
+            acc[nestedField.key] = nestedField.defaultValue || '';
+            return acc;
+        }, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        {});
+    };
+    return (react_1.default.createElement("div", { role: "group", "aria-labelledby": `${field.key}-label` },
+        !fields.length && (react_1.default.createElement("div", { className: "akiform-builder-form-actions akiform-builder-action-icon", "data-testid": `${field.key}-add-button`, onClick: () => append(createInitialValue()) },
+            react_1.default.createElement(icons_1.Icon, { icon: "plus", size: 20, color: "var(--color-green-500)", "aria-label": i18n_1.i18n.t('add', { label: field.label }) }),
+            react_1.default.createElement(ui_typography_1.Text, { strong: true }, i18n_1.i18n.t('add', { label: field.label })))),
+        fields.map((item, index) => {
+            var _a;
+            return (react_1.default.createElement(react_1.Fragment, { key: item.id },
+                react_1.default.createElement(ui_collapse_1.Collapse, { collapsible: "icon", defaultActiveKey: field.defaultExpanded ? [item.id] : [], expandIcon: panelProps => ({
+                        name: 'circle-down',
+                        style: {
+                            color: 'var(--color-azure-500)',
+                            transform: panelProps.isActive
+                                ? 'rotate(-180deg)'
+                                : 'rotate(0deg)',
+                            transition: 'transform 0.3s'
+                        },
+                        size: 20
+                    }), items: [
+                        {
+                            label: (react_1.default.createElement("div", { className: "akiform-builder-form-actions" },
+                                react_1.default.createElement(ui_typography_1.Text, { strong: true }, i18n_1.i18n.t('itemof', {
+                                    label: field.label,
+                                    count: index + 1,
+                                    ordinal: true
+                                })),
+                                react_1.default.createElement(icons_1.Icon, { className: "akiform-builder-action-icon", onClick: () => remove(index), icon: "minus", size: 20, color: "var(--color-red-500)", "aria-label": i18n_1.i18n.t('remove', { label: field.label }) }),
+                                react_1.default.createElement(icons_1.Icon, { className: "akiform-builder-action-icon", onClick: () => insert(index + 1, createInitialValue()), icon: "plus", size: 20, color: "var(--color-green-500)", "aria-label": i18n_1.i18n.t('add', { label: field.label }) }),
+                                ((_a = errors[field.key]) === null || _a === void 0 ? void 0 : _a[index]) ? (react_1.default.createElement(ui_typography_1.Text, { strong: true, type: "danger" }, i18n_1.i18n.t('an_error_occurred'))) : null)),
+                            key: field.key,
+                            children: field.fields.map(nestedField => {
+                                return renderFormItem({
+                                    field: Object.assign(Object.assign({}, nestedField), { key: `${field.key}.${index}.${nestedField.key}` }),
+                                    control,
+                                    formValues,
+                                    formState,
+                                    layout,
+                                    layoutOptions,
+                                    customVisibleCheck: () => {
+                                        var _a, _b;
+                                        return typeof ((_a = nestedField.config) === null || _a === void 0 ? void 0 : _a.visible) === 'function'
+                                            ? nestedField.config.visible(((_b = formValues[field.key]) === null || _b === void 0 ? void 0 : _b[index]) || {})
+                                            : true;
+                                    }
+                                });
+                            })
+                        }
+                    ] }),
+                react_1.default.createElement(ui_divider_1.Divider, { plain: true })));
+        })));
+};

package/dist/cjs/src/field-builder.d.ts

@@ -0,0 +1,54 @@
+import { FieldPath, FieldValues } from '@akinon/akiform';
+import { AnySchema } from '@akinon/akival';
+import { ColProps, RowProps } from '@akinon/ui-layout';
+import { TooltipProps } from '@akinon/ui-tooltip';
+import { FieldConfig, FieldType, FormField } from './types';
+type FieldTypeToBuilder<T extends FieldType, TFieldValues extends FieldValues = FieldValues> = T extends 'select' ? SelectFieldBuilder<TFieldValues> : T extends 'date' ? DateFieldBuilder<TFieldValues> : T extends 'custom' ? CustomFieldBuilder<TFieldValues> : T extends 'section' ? SectionFieldBuilder<TFieldValues> : T extends 'fieldArray' ? FieldArrayOrSectionFieldBuilder<TFieldValues> : T extends 'row' ? RowFieldBuilder<TFieldValues> : T extends 'column' ? ColumnFieldBuilder<TFieldValues> : BaseFieldBuilder<TFieldValues>;
+declare class BaseFieldBuilder<TFieldValues extends FieldValues = FieldValues> {
+    field: Partial<FormField<TFieldValues>>;
+    key(key: FieldPath<TFieldValues>): this;
+    label(label: string): this;
+    type<T extends FieldType>(type: T): FieldTypeToBuilder<T, TFieldValues>;
+    placeholder(placeholder: string): this;
+    defaultValue(value: any): this;
+    validation(schema: AnySchema): this;
+    config(config: FieldConfig<TFieldValues>): this;
+    tooltip(tooltipProps: TooltipProps | string): this;
+    help(help: string): this;
+    labelDescription(labelDescription: string): this;
+    build(): FormField<TFieldValues>;
+}
+declare class SelectFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
+    options(options: Array<{
+        value: string | number;
+        label: string;
+    }>): this;
+}
+declare class DateFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
+    showTime(showTime: boolean): this;
+}
+declare class CustomFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
+    render(renderFn: (props: {
+        field: FormField<TFieldValues>;
+        formValues: TFieldValues;
+        control: any;
+    }) => React.ReactElement): this;
+}
+declare class FieldArrayOrSectionFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
+    defaultExpanded(expanded: boolean): this;
+    fields(fields: FormField<TFieldValues>[]): this;
+}
+declare class SectionFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends FieldArrayOrSectionFieldBuilder<TFieldValues> {
+    collapsible(collapsible: boolean): this;
+}
+declare class RowFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
+    columnFields(columnFields: FormField<TFieldValues>[]): this;
+    rowProps(rowProps: RowProps): this;
+}
+declare class ColumnFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
+    fields(fields: FormField<TFieldValues>[]): this;
+    columnProps(columnProps: ColProps): this;
+}
+export declare function field<TFieldValues extends FieldValues = FieldValues>(): BaseFieldBuilder<TFieldValues> & SelectFieldBuilder<TFieldValues> & DateFieldBuilder<TFieldValues> & CustomFieldBuilder<TFieldValues> & SectionFieldBuilder<TFieldValues> & FieldArrayOrSectionFieldBuilder<TFieldValues>;
+export {};
+//# sourceMappingURL=field-builder.d.ts.map

package/dist/cjs/src/field-builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-builder.d.ts","sourceRoot":"","sources":["../../../src/field-builder.ts"],"names":[],"mappings":"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"}

package/dist/cjs/src/field-builder.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.field = field;
+class BaseFieldBuilder {
+    constructor() {
+        this.field = {};
+    }
+    key(key) {
+        this.field.key = key;
+        return this;
+    }
+    label(label) {
+        this.field.label = label;
+        return this;
+    }
+    type(type) {
+        this.field.type = type;
+        return this;
+    }
+    placeholder(placeholder) {
+        this.field.placeholder = placeholder;
+        return this;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    defaultValue(value) {
+        this.field.defaultValue = value;
+        return this;
+    }
+    validation(schema) {
+        this.field.validation = schema;
+        return this;
+    }
+    config(config) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.field.config = config;
+        return this;
+    }
+    tooltip(tooltipProps) {
+        this.field.tooltip = tooltipProps;
+        return this;
+    }
+    help(help) {
+        this.field.help = help;
+        return this;
+    }
+    labelDescription(labelDescription) {
+        this.field.labelDescription = labelDescription;
+        return this;
+    }
+    build() {
+        if (!this.field.key || !this.field.type) {
+            throw new Error('Field must have at least a key and type');
+        }
+        return this.field;
+    }
+}
+class SelectFieldBuilder extends BaseFieldBuilder {
+    options(options) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.field.options = options;
+        return this;
+    }
+}
+class DateFieldBuilder extends BaseFieldBuilder {
+    showTime(showTime) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.field.showTime = showTime;
+        return this;
+    }
+}
+class CustomFieldBuilder extends BaseFieldBuilder {
+    render(renderFn) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.field.render = renderFn;
+        return this;
+    }
+}
+class FieldArrayOrSectionFieldBuilder extends BaseFieldBuilder {
+    defaultExpanded(expanded) {
+        this.field.defaultExpanded = expanded;
+        return this;
+    }
+    fields(fields) {
+        if (this.field.type === 'fieldArray' || this.field.type === 'section') {
+            this.field.fields = fields;
+        }
+        else {
+            console.warn(`Fields can only be set for 'fieldArray' or 'section' types. Current type: ${this.field.type}`);
+        }
+        return this;
+    }
+}
+class SectionFieldBuilder extends FieldArrayOrSectionFieldBuilder {
+    collapsible(collapsible) {
+        this.field.collapsible = collapsible;
+        return this;
+    }
+}
+class RowFieldBuilder extends BaseFieldBuilder {
+    columnFields(columnFields) {
+        this.field.columnFields =
+            columnFields;
+        return this;
+    }
+    rowProps(rowProps) {
+        this.field.rowProps = rowProps;
+        return this;
+    }
+}
+class ColumnFieldBuilder extends BaseFieldBuilder {
+    fields(fields) {
+        this.field.fields = fields;
+        return this;
+    }
+    columnProps(columnProps) {
+        this.field.columnProps = columnProps;
+        return this;
+    }
+}
+function field() {
+    return new Proxy(new BaseFieldBuilder(), {
+        get(target, prop) {
+            switch (prop) {
+                case 'options':
+                    return SelectFieldBuilder.prototype.options;
+                case 'showTime':
+                    return DateFieldBuilder.prototype.showTime;
+                case 'render':
+                    return CustomFieldBuilder.prototype.render;
+                case 'defaultExpanded':
+                    return FieldArrayOrSectionFieldBuilder.prototype.defaultExpanded;
+                case 'fields': {
+                    const fieldType = target.field.type;
+                    if (fieldType === 'column') {
+                        return ColumnFieldBuilder.prototype.fields;
+                    }
+                    return FieldArrayOrSectionFieldBuilder.prototype.fields;
+                }
+                case 'collapsible':
+                    return SectionFieldBuilder.prototype.collapsible;
+                case 'columnFields':
+                    return RowFieldBuilder.prototype.columnFields;
+                case 'rowProps':
+                    return RowFieldBuilder.prototype.rowProps;
+                case 'columnProps':
+                    return ColumnFieldBuilder.prototype.columnProps;
+                default:
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    return target[prop];
+            }
+        }
+    });
+}