@akinon/akiform-builder 0.7.0 → 1.0.0

package/dist/cjs/__tests__/field-builder.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=field-builder.test.d.ts.map

package/dist/cjs/__tests__/field-builder.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-builder.test.d.ts","sourceRoot":"","sources":["../../../__tests__/field-builder.test.ts"],"names":[],"mappings":""}

package/dist/cjs/__tests__/field-builder.test.js

@@ -0,0 +1,251 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const akival_1 = require("@akinon/akival");
+const field_builder_1 = require("../src/field-builder");
+describe('FieldBuilder', () => {
+    it('should build a text field with all properties', () => {
+        const textField = (0, field_builder_1.field)()
+            .key('name')
+            .label('Name')
+            .type('text')
+            .placeholder('Enter your name')
+            .defaultValue('John Doe')
+            .validation(akival_1.akival.string().required())
+            .config({ disabled: false, visible: true })
+            .build();
+        expect(textField).toEqual({
+            key: 'name',
+            label: 'Name',
+            type: 'text',
+            placeholder: 'Enter your name',
+            defaultValue: 'John Doe',
+            validation: expect.any(Object),
+            config: { disabled: false, visible: true }
+        });
+    });
+    it('should build a number field', () => {
+        const numberField = (0, field_builder_1.field)()
+            .key('age')
+            .label('Age')
+            .type('number')
+            .placeholder('Enter your age')
+            .defaultValue(18)
+            .validation(akival_1.akival.number().min(18))
+            .build();
+        expect(numberField).toEqual({
+            key: 'age',
+            label: 'Age',
+            type: 'number',
+            placeholder: 'Enter your age',
+            defaultValue: 18,
+            validation: expect.any(Object)
+        });
+    });
+    it('should build a select field', () => {
+        const selectField = (0, field_builder_1.field)()
+            .key('country')
+            .label('Country')
+            .type('select')
+            .options([
+            { value: 'us', label: 'United States' },
+            { value: 'ca', label: 'Canada' }
+        ])
+            .defaultValue('us')
+            .build();
+        expect(selectField).toEqual({
+            key: 'country',
+            label: 'Country',
+            type: 'select',
+            options: [
+                { value: 'us', label: 'United States' },
+                { value: 'ca', label: 'Canada' }
+            ],
+            defaultValue: 'us'
+        });
+    });
+    it('should build a checkbox field', () => {
+        const checkboxField = (0, field_builder_1.field)()
+            .key('subscribe')
+            .label('Subscribe to newsletter')
+            .type('checkbox')
+            .defaultValue(false)
+            .build();
+        expect(checkboxField).toEqual({
+            key: 'subscribe',
+            label: 'Subscribe to newsletter',
+            type: 'checkbox',
+            defaultValue: false
+        });
+    });
+    it('should build a date field', () => {
+        const dateField = (0, field_builder_1.field)()
+            .key('birthdate')
+            .label('Birth Date')
+            .type('date')
+            .placeholder('Select your birth date')
+            .build();
+        expect(dateField).toEqual({
+            key: 'birthdate',
+            label: 'Birth Date',
+            type: 'date',
+            placeholder: 'Select your birth date'
+        });
+    });
+    it('should build a textarea field', () => {
+        const textareaField = (0, field_builder_1.field)()
+            .key('description')
+            .label('Description')
+            .type('textarea')
+            .placeholder('Enter a description')
+            .build();
+        expect(textareaField).toEqual({
+            key: 'description',
+            label: 'Description',
+            type: 'textarea',
+            placeholder: 'Enter a description'
+        });
+    });
+    it('should build a custom field', () => {
+        const renderFn = vi.fn();
+        const customField = (0, field_builder_1.field)()
+            .key('custom')
+            .label('Custom Field')
+            .type('custom')
+            .render(renderFn)
+            .build();
+        expect(customField).toEqual({
+            key: 'custom',
+            label: 'Custom Field',
+            type: 'custom',
+            render: renderFn
+        });
+    });
+    it('should throw an error if required properties are missing', () => {
+        expect(() => (0, field_builder_1.field)().build()).toThrow('Field must have at least a key, label, and type');
+        expect(() => (0, field_builder_1.field)().key('test').build()).toThrow('Field must have at least a key, label, and type');
+        expect(() => (0, field_builder_1.field)().key('test').label('Test').build()).toThrow('Field must have at least a key, label, and type');
+    });
+    it('should only allow options for select fields', () => {
+        const selectField = (0, field_builder_1.field)()
+            .key('country')
+            .label('Country')
+            .type('select')
+            .options([
+            { value: 'us', label: 'United States' },
+            { value: 'ca', label: 'Canada' }
+        ])
+            .build();
+        expect(selectField).toEqual({
+            key: 'country',
+            label: 'Country',
+            type: 'select',
+            options: [
+                { value: 'us', label: 'United States' },
+                { value: 'ca', label: 'Canada' }
+            ]
+        });
+        // @ts-expect-error : We are explicitly waiting .options to throw an error.
+        (0, field_builder_1.field)().key('name').label('Name').type('text').options([]);
+    });
+    it('should only allow render for custom fields', () => {
+        const renderFn = vi.fn();
+        const customField = (0, field_builder_1.field)()
+            .key('custom')
+            .label('Custom Field')
+            .type('custom')
+            .render(renderFn)
+            .build();
+        expect(customField).toEqual({
+            key: 'custom',
+            label: 'Custom Field',
+            type: 'custom',
+            render: renderFn
+        });
+        // @ts-expect-error : We are explicitly waiting .render to throw an error.
+        (0, field_builder_1.field)().key('name').label('Name').type('text').render(vi.fn());
+    });
+    it('should allow chaining methods in any order', () => {
+        const textField = (0, field_builder_1.field)()
+            .type('text')
+            .key('name')
+            .label('Name')
+            .placeholder('Enter your name')
+            .build();
+        expect(textField).toEqual({
+            key: 'name',
+            label: 'Name',
+            type: 'text',
+            placeholder: 'Enter your name'
+        });
+    });
+    it('should allow building fields with minimal properties', () => {
+        const minimalField = (0, field_builder_1.field)()
+            .key('minimal')
+            .label('Minimal')
+            .type('text')
+            .build();
+        expect(minimalField).toEqual({
+            key: 'minimal',
+            label: 'Minimal',
+            type: 'text'
+        });
+    });
+    it('should build a field array with fields', () => {
+        const fieldArray = (0, field_builder_1.field)()
+            .key('addresses')
+            .label('Addresses')
+            .type('fieldArray')
+            .fields([
+            (0, field_builder_1.field)().key('street').label('Street').type('text').build(),
+            (0, field_builder_1.field)().key('city').label('City').type('text').build()
+        ])
+            .build();
+        expect(fieldArray).toEqual({
+            key: 'addresses',
+            label: 'Addresses',
+            type: 'fieldArray',
+            fields: [
+                { key: 'street', label: 'Street', type: 'text' },
+                { key: 'city', label: 'City', type: 'text' }
+            ]
+        });
+    });
+    it('should build a section field with fields', () => {
+        const sectionField = (0, field_builder_1.field)()
+            .key('personalInfo')
+            .label('Personal Information')
+            .type('section')
+            .fields([
+            (0, field_builder_1.field)().key('name').label('Name').type('text').build(),
+            (0, field_builder_1.field)().key('age').label('Age').type('number').build()
+        ])
+            .defaultExpanded(true)
+            .build();
+        expect(sectionField).toEqual({
+            key: 'personalInfo',
+            label: 'Personal Information',
+            type: 'section',
+            fields: [
+                { key: 'name', label: 'Name', type: 'text' },
+                { key: 'age', label: 'Age', type: 'number' }
+            ],
+            defaultExpanded: true
+        });
+    });
+    it('should not set fields for non-fieldArray and non-section types', () => {
+        const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+        const textField = (0, field_builder_1.field)()
+            .key('name')
+            .label('Name')
+            .type('text')
+            .fields([(0, field_builder_1.field)().key('invalid').label('Invalid').type('text').build()])
+            .build();
+        expect(textField).toEqual({
+            key: 'name',
+            label: 'Name',
+            type: 'text'
+        });
+        expect(consoleSpy).toHaveBeenCalledWith("Fields can only be set for 'fieldArray' or 'section' types. Current type: text");
+        consoleSpy.mockRestore();
+    });
+});

package/dist/cjs/index.css

@@ -0,0 +1,7 @@
+.akiform-builder .sr-only {
+  display: none;
+}
+
+.akiform-builder-field-array {
+  padding-bottom: 1rem;
+}

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

@@ -0,0 +1,7 @@
+import './index.css';
+import { FieldValues } from '@akinon/akiform';
+import React from 'react';
+import { AkiformBuilderProps, AkiformBuilderRef } from './types';
+export declare const THROTTLE_DELAY = 300;
+export declare const AkiformBuilder: React.ForwardRefExoticComponent<AkiformBuilderProps<FieldValues> & React.RefAttributes<AkiformBuilderRef<FieldValues>>>;
+//# sourceMappingURL=akiform-builder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"akiform-builder.d.ts","sourceRoot":"","sources":["../../../src/akiform-builder.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAKL,WAAW,EAMZ,MAAM,iBAAiB,CAAC;AAWzB,OAAO,KAWN,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EAMlB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,cAAc,MAAM,CAAC;AAgJlC,eAAO,MAAM,cAAc,yHAwS1B,CAAC"}

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

@@ -0,0 +1,291 @@
+"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 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_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 ui_space_1 = require("@akinon/ui-space");
+const ui_typography_1 = require("@akinon/ui-typography");
+const react_1 = require("react");
+const i18n_1 = require("./i18n");
+exports.THROTTLE_DELAY = 300; // ms
+const SectionComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
+    return (react_1.default.createElement(ui_collapse_1.Collapse, { defaultActiveKey: field.defaultExpanded ? [field.key] : [], items: [
+            {
+                label: field.label,
+                key: field.key,
+                children: field.fields.map(nestedField => {
+                    var _a, _b;
+                    const isVisible = typeof ((_a = nestedField.config) === null || _a === void 0 ? void 0 : _a.visible) === 'function'
+                        ? nestedField.config.visible(formValues)
+                        : ((_b = nestedField.config) === null || _b === void 0 ? void 0 : _b.visible) !== false;
+                    if (!isVisible) {
+                        return null;
+                    }
+                    return (react_1.default.createElement(akiform_1.FormItem, { key: nestedField.key, control: control, name: nestedField.key, label: nestedField.label }, renderField(nestedField, 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, size: "large" }, 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 }));
+        default:
+            return react_1.default.createElement(react_1.Fragment, null);
+    }
+};
+exports.AkiformBuilder = (0, react_1.forwardRef)((_a, ref) => {
+    var _b, _c;
+    var { fields, onSubmit, layout = 'vertical', layoutOptions, showResetButton = false, onReset, controlled = false, values, onValueChange } = _a, rest = __rest(_a, ["fields", "onSubmit", "layout", "layoutOptions", "showResetButton", "onReset", "controlled", "values", "onValueChange"]);
+    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 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);
+            }
+        }
+    }));
+    return (react_1.default.createElement("div", { className: "akiform-builder" },
+        react_1.default.createElement(akiform_1.Akiform, Object.assign({ 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 => {
+                var _a, _b, _c, _d;
+                const isDisabled = typeof ((_a = field.config) === null || _a === void 0 ? void 0 : _a.disabled) === 'function'
+                    ? field.config.disabled(formValues)
+                    : (_b = field.config) === null || _b === void 0 ? void 0 : _b.disabled;
+                const isVisible = typeof ((_c = field.config) === null || _c === void 0 ? void 0 : _c.visible) === 'function'
+                    ? field.config.visible(formValues)
+                    : ((_d = field.config) === null || _d === void 0 ? void 0 : _d.visible) !== false;
+                if (!isVisible) {
+                    return null;
+                }
+                if (field.type === 'section') {
+                    return (react_1.default.createElement(SectionComponent, { key: field.key, field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
+                }
+                if (field.type === 'fieldArray') {
+                    return (react_1.default.createElement("div", { className: "akiform-builder-field-array", key: field.key },
+                        react_1.default.createElement(ui_typography_1.Title, { level: 5 }, field.label),
+                        renderField(field, control, formValues, formState, layout, layoutOptions)));
+                }
+                return (react_1.default.createElement(akiform_1.FormItem, { key: field.key, control: control, name: field.key, label: field.label, disabled: isDisabled, required: field.validation ? true : false, tooltip: field.tooltip }, renderField(field, control, formValues, formState, layout, layoutOptions)));
+            }),
+            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 },
+                react_1.default.createElement(ui_space_1.Space, null,
+                    react_1.default.createElement(ui_button_1.Button, { type: "primary", htmlType: "submit" }, i18n_1.i18n.t('submit')),
+                    showResetButton && (react_1.default.createElement(ui_button_1.Button
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    , { 
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        onClick: handleReset, type: "default", htmlType: "reset" }, i18n_1.i18n.t('reset'))))))));
+});
+exports.AkiformBuilder.displayName = 'AkiformBuilder';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const FieldArrayComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
+    const { fields, append, remove } = (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` },
+        react_1.default.createElement("div", { id: `${field.key}-label`, className: "sr-only", "aria-hidden": true }, field.label),
+        fields.map((item, index) => (react_1.default.createElement("div", { key: item.id },
+            field.fields.map(nestedField => {
+                var _a, _b;
+                const isVisible = 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;
+                if (!isVisible) {
+                    return null;
+                }
+                return (react_1.default.createElement(akiform_1.FormItem, { key: `${field.key}.${index}.${nestedField.key}`, control: control, name: `${field.key}.${index}.${nestedField.key}`, label: nestedField.label, required: nestedField.validation ? true : false }, renderField(Object.assign(Object.assign({}, nestedField), { 
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    key: `${field.key}.${index}.${nestedField.key}` }), control, formValues, formState, layout, layoutOptions)));
+            }),
+            react_1.default.createElement(ui_button_1.Button, { icon: "eksi", size: "small", danger: true, onClick: () => remove(index), "aria-label": `Remove ${field.label} ${index + 1}` }, "Remove")))),
+        react_1.default.createElement(ui_button_1.Button, { icon: "arti", size: "small", type: "text", 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onClick: () => append(createInitialValue()), "aria-label": `Add ${field.label}` }, "Add")));
+};

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

@@ -0,0 +1,37 @@
+import { FieldPath, FieldValues } from '@akinon/akiform';
+import { AnySchema } from '@akinon/akival';
+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 'custom' ? CustomFieldBuilder<TFieldValues> : T extends 'section' ? SectionFieldBuilder<TFieldValues> : BaseFieldBuilder<TFieldValues>;
+declare class BaseFieldBuilder<TFieldValues extends FieldValues = FieldValues> {
+    protected 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;
+    fields(fields: FormField<TFieldValues>[]): this;
+    tooltip(tooltipProps: TooltipProps | 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 CustomFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
+    render(renderFn: (props: {
+        field: FormField<TFieldValues>;
+        formValues: TFieldValues;
+        control: any;
+    }) => React.ReactElement): this;
+}
+declare class SectionFieldBuilder<TFieldValues extends FieldValues = FieldValues> extends BaseFieldBuilder<TFieldValues> {
+    defaultExpanded(expanded: boolean): this;
+}
+export declare function field<TFieldValues extends FieldValues = FieldValues>(): BaseFieldBuilder<TFieldValues> & SelectFieldBuilder<TFieldValues> & CustomFieldBuilder<TFieldValues> & SectionFieldBuilder<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":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAEL,WAAW,EACX,SAAS,EACT,SAAS,EAEV,MAAM,SAAS,CAAC;AAEjB,KAAK,kBAAkB,CACrB,CAAC,SAAS,SAAS,EACnB,YAAY,SAAS,WAAW,GAAG,WAAW,IAC5C,CAAC,SAAS,QAAQ,GAClB,kBAAkB,CAAC,YAAY,CAAC,GAChC,CAAC,SAAS,QAAQ,GAChB,kBAAkB,CAAC,YAAY,CAAC,GAChC,CAAC,SAAS,SAAS,GACjB,mBAAmB,CAAC,YAAY,CAAC,GACjC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAEvC,cAAM,gBAAgB,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IACnE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAM;IAEvD,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,YAAY,CAAC,GAAG,IAAI;IAKvC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,IAAI,CAAC,CAAC,SAAS,SAAS,EAAE,IAAI,EAAE,CAAC,GAAG,kBAAkB,CAAC,CAAC,EAAE,YAAY,CAAC;IAKvE,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAMtC,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAK9B,UAAU,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI;IAKnC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,GAAG,IAAI;IAM/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,GAAG,IAAI;IAa/C,OAAO,CAAC,YAAY,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI;IAKlD,KAAK,IAAI,SAAS,CAAC,YAAY,CAAC;CAMjC;AAED,cAAM,kBAAkB,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,IAAI;CAKzE;AAED,cAAM,kBAAkB,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,MAAM,CACJ,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;QAC/B,UAAU,EAAE,YAAY,CAAC;QAEzB,OAAO,EAAE,GAAG,CAAC;KACd,KAAK,KAAK,CAAC,YAAY,GACvB,IAAI;CAKR;AAED,cAAM,mBAAmB,CACvB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;CAIzC;AAED,wBAAgB,KAAK,CACnB,YAAY,SAAS,WAAW,GAAG,WAAW,KAC3C,gBAAgB,CAAC,YAAY,CAAC,GACjC,kBAAkB,CAAC,YAAY,CAAC,GAChC,kBAAkB,CAAC,YAAY,CAAC,GAChC,mBAAmB,CAAC,YAAY,CAAC,CAoBlC"}