art-bd-ui 1.0.44 → 1.0.45

package/dist/cjs/components/forms/dynamic-form/utils.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var evaluateFieldCondition = require('./conditions/evaluate-field-condition.js');
+require('../../../_virtual/isPlainObject.js');
+var types = require('../../../node_modules/zod/dist/esm/v3/types.js');
+
+const buildInitialValues = (definition, initialValues = {}) => {
+    return definition.fields.reduce((values, field) => {
+        const hasInitialValue = Object.prototype.hasOwnProperty.call(initialValues, field.name);
+        values[field.name] = hasInitialValue ? initialValues[field.name] : field.defaultValue;
+        return values;
+    }, {});
+};
+const isFormOptionValue = (value) => {
+    return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+};
+const encodeOptionValue = (value) => {
+    return `${typeof value}:${String(value)}`;
+};
+const findOptionValueByEncodedValue = (options, encodedValue) => {
+    var _a;
+    return (_a = options.find((option) => encodeOptionValue(option.value) === encodedValue)) === null || _a === void 0 ? void 0 : _a.value;
+};
+const buildZodSchema = (definition) => {
+    const shape = definition.fields.reduce((fields, field) => {
+        fields[field.name] = types.any();
+        return fields;
+    }, {});
+    return types.object(shape).superRefine((values) => {
+        const formValues = values;
+        for (const field of definition.fields) {
+            const visible = evaluateFieldCondition.evaluateConditionalBoolean(field.visible, {
+                fields: definition.fields,
+                values: formValues,
+                defaultValue: true,
+            });
+            if (!visible) {
+                continue;
+            }
+        }
+    });
+};
+
+exports.buildInitialValues = buildInitialValues;
+exports.buildZodSchema = buildZodSchema;
+exports.encodeOptionValue = encodeOptionValue;
+exports.findOptionValueByEncodedValue = findOptionValueByEncodedValue;
+exports.isFormOptionValue = isFormOptionValue;

package/dist/cjs/components/forms/dynamic-form-builder/condition/condition-builder-adapter.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var conditionOperatorCapabilities = require('../../dynamic-form/capabilities/condition-operator-capabilities.js');
+var fieldTypeCapabilities = require('../../dynamic-form/capabilities/field-type-capabilities.js');
+var conditionOperators = require('../../../ui/condition-builder/condition-operators.js');
+
+const isRecord = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+const isJsonPrimitive = (value) => value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+const toConditionJsonValue = (value) => value;
+const getFieldLabel = (field) => field.label || field.name;
+function buildConditionFieldsFromFormFields(fields, options) {
+    return fields
+        .filter((field) => field.name !== (options === null || options === void 0 ? void 0 : options.excludeFieldName))
+        .filter((field) => (options === null || options === void 0 ? void 0 : options.includeHidden) || field.type !== "hidden")
+        .map((field) => {
+        const valueType = fieldTypeCapabilities.FIELD_VALUE_TYPE_BY_FIELD_TYPE[field.type];
+        const conditionField = {
+            name: field.name,
+            label: getFieldLabel(field),
+            type: valueType,
+            description: field.description,
+        };
+        if ((field.type === "select" || field.type === "multiSelect") && field.options) {
+            conditionField.options = field.options.map((option) => ({
+                label: option.label,
+                value: option.value,
+                disabled: option.disabled,
+            }));
+        }
+        if (field.type === "multiSelect") {
+            conditionField.list = true;
+        }
+        return conditionField;
+    });
+}
+const createGroup = (operator, conditions) => ({
+    kind: "group",
+    operator,
+    conditions,
+});
+const createEmptyGroupCondition = () => createGroup("AND", []);
+const createFieldCondition = (field, operator, value) => ({
+    kind: "field",
+    field,
+    operator,
+    value: toConditionJsonValue(value),
+});
+const filterToFieldConditions = (condition) => {
+    const conditions = [];
+    Object.entries(condition).forEach(([field, expression]) => {
+        if (field.startsWith("$") || conditionOperators.isConditionGroupOperator(field)) {
+            return;
+        }
+        if (isJsonPrimitive(expression)) {
+            conditions.push(createFieldCondition(field, "eq", expression));
+            return;
+        }
+        if (!isRecord(expression)) {
+            return;
+        }
+        Object.entries(expression).forEach(([operator, value]) => {
+            if (!conditionOperatorCapabilities.isConditionOperator(operator)) {
+                return;
+            }
+            conditions.push(createFieldCondition(field, operator, value));
+        });
+    });
+    return conditions;
+};
+const getLogicalConditionGroup = (condition) => {
+    const { AND, NOT, OR } = condition;
+    if (Array.isArray(AND)) {
+        return { operator: "AND", conditions: AND };
+    }
+    if (Array.isArray(OR)) {
+        return { operator: "OR", conditions: OR };
+    }
+    if (Array.isArray(NOT)) {
+        return { operator: "NOT", conditions: NOT };
+    }
+    return undefined;
+};
+const filterToGroupConditions = (condition, parentOperator) => {
+    const fieldConditions = filterToFieldConditions(condition);
+    if (parentOperator === "OR" && fieldConditions.length > 1) {
+        return [createGroup("AND", fieldConditions)];
+    }
+    return fieldConditions;
+};
+const flattenGroupConditions = (conditions, operator) => conditions.flatMap((childCondition) => {
+    const childRecord = isRecord(childCondition) ? childCondition : undefined;
+    if (childRecord && !getLogicalConditionGroup(childRecord)) {
+        return filterToGroupConditions(childRecord, operator);
+    }
+    const childGroup = conditionFilterToGroupCondition(childCondition);
+    return childGroup.operator === operator ? childGroup.conditions : [childGroup];
+});
+const flattenNotCondition = (condition) => (condition.operator === "AND" ? condition.conditions : [condition]);
+function conditionFilterToGroupCondition(condition) {
+    if (!condition || typeof condition === "boolean") {
+        return createEmptyGroupCondition();
+    }
+    const group = getLogicalConditionGroup(condition);
+    if (!group) {
+        return createGroup("AND", filterToFieldConditions(condition));
+    }
+    if (group.operator === "NOT") {
+        return createGroup("NOT", group.conditions.map(conditionFilterToGroupCondition).flatMap(flattenNotCondition));
+    }
+    return createGroup(group.operator, flattenGroupConditions(group.conditions, group.operator));
+}
+const conditionValueFromField = (condition) => {
+    if (!condition.field) {
+        return undefined;
+    }
+    const value = condition.operator === "empty" || condition.operator === "notEmpty" ? true : condition.value;
+    if (!conditionOperatorCapabilities.isConditionOperator(condition.operator)) {
+        return undefined;
+    }
+    return {
+        [condition.field]: {
+            [condition.operator]: value,
+        },
+    };
+};
+const compact = (values) => values.filter(Boolean);
+const groupToConditionFilter = (group) => {
+    const conditions = compact(group.conditions.map((condition) => condition.kind === "group" ? groupToConditionFilter(condition) : conditionValueFromField(condition)));
+    if (!conditions.length) {
+        return undefined;
+    }
+    if (group.operator === "NOT") {
+        return { NOT: conditions };
+    }
+    if (conditions.length === 1) {
+        return conditions[0];
+    }
+    return group.operator === "OR"
+        ? { OR: conditions }
+        : { AND: conditions };
+};
+function groupConditionToConditionFilter(group) {
+    return groupToConditionFilter(group);
+}
+
+exports.buildConditionFieldsFromFormFields = buildConditionFieldsFromFormFields;
+exports.conditionFilterToGroupCondition = conditionFilterToGroupCondition;
+exports.groupConditionToConditionFilter = groupConditionToConditionFilter;

package/dist/cjs/components/forms/dynamic-form-builder/condition/dynamic-form-field-condition-editor.js

@@ -0,0 +1,78 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var conditionBuilderAdapter = require('./condition-builder-adapter.js');
+var button = require('../../../buttons/button/button.js');
+var conditionBuilder = require('../../../ui/condition-builder/condition-builder.js');
+require('../../select/select.js');
+require('../../../ui/badge/badge.js');
+
+const MODE_OPTIONS = ["always", "never", "conditional"];
+const MODE_SETTINGS = {
+    visible: {
+        defaultValue: true,
+        labels: {
+            always: "Visible",
+            never: "Hidden",
+            conditional: "Conditional",
+        },
+    },
+    disabled: {
+        defaultValue: false,
+        labels: {
+            always: "Disabled",
+            never: "Enabled",
+            conditional: "Conditional",
+        },
+    },
+};
+const getMode = (value, defaultMode) => {
+    if (typeof value === "undefined") {
+        return MODE_SETTINGS[defaultMode].defaultValue ? "always" : "never";
+    }
+    if (typeof value === "boolean") {
+        return value ? "always" : "never";
+    }
+    return "conditional";
+};
+const getDefaultConditionValue = (field) => {
+    var _a, _b, _c;
+    if (field.type === "boolean") {
+        return true;
+    }
+    return (_c = (_b = (_a = field.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : "";
+};
+const createDefaultCondition = (conditionFields) => {
+    const firstField = conditionFields[0];
+    return firstField ? { [firstField.name]: { eq: getDefaultConditionValue(firstField) } } : undefined;
+};
+const DynamicFormFieldConditionEditor = ({ defaultMode, disabled, field, fields, label, onChange, value, }) => {
+    const valueMode = getMode(value, defaultMode);
+    const [mode, setModeState] = React.useState(valueMode);
+    const labels = MODE_SETTINGS[defaultMode].labels;
+    const conditionFields = React.useMemo(() => conditionBuilderAdapter.buildConditionFieldsFromFormFields(fields, { excludeFieldName: field.name }), [fields, field.name]);
+    const condition = React.useMemo(() => conditionBuilderAdapter.conditionFilterToGroupCondition(value), [value]);
+    React.useEffect(() => {
+        setModeState(valueMode);
+    }, [field.name, valueMode]);
+    const setMode = (nextMode) => {
+        setModeState(nextMode);
+        if (nextMode === "conditional") {
+            const nextCondition = typeof value === "object" && value ? value : createDefaultCondition(conditionFields);
+            onChange(nextCondition);
+            return;
+        }
+        const nextValue = nextMode === "always";
+        const defaultValue = MODE_SETTINGS[defaultMode].defaultValue;
+        const nextConditionValue = nextValue === defaultValue ? undefined : nextValue;
+        onChange(nextConditionValue);
+    };
+    const updateCondition = (nextCondition) => {
+        onChange(conditionBuilderAdapter.groupConditionToConditionFilter(nextCondition));
+    };
+    return (jsxRuntime.jsxs("section", { className: "grid gap-3", children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("h4", { className: "text-sm font-medium", children: label }) }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 rounded-md border bg-muted/30 p-1", children: MODE_OPTIONS.map((candidate) => (jsxRuntime.jsx(button.Button, { type: "button", variant: mode === candidate ? "secondary" : "ghost", size: "sm", disabled: disabled, className: "flex-1", onClick: () => setMode(candidate), children: labels[candidate] }, candidate))) }), mode === "conditional" ? (conditionFields.length ? (jsxRuntime.jsx(conditionBuilder.ConditionBuilder, { value: condition, fields: conditionFields, disabled: disabled, onChange: updateCondition })) : (jsxRuntime.jsx("p", { className: "text-muted-foreground rounded-md border border-dashed p-3 text-sm", children: "Add another field before configuring a condition." }))) : null] }));
+};
+
+exports.DynamicFormFieldConditionEditor = DynamicFormFieldConditionEditor;

package/dist/cjs/components/forms/dynamic-form-builder/dynamic-form-builder-field-palette.js

@@ -0,0 +1,18 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var dynamicFormBuilder_utils = require('./dynamic-form-builder.utils.js');
+var button = require('../../buttons/button/button.js');
+var popover = require('../../popovers/popover/popover.js');
+
+const DynamicFormBuilderFieldPalette = ({ addFieldDisabled, allowedFieldTypes, disabled, fieldTemplates, onAddField, value, }) => {
+    const templates = React.useMemo(() => fieldTemplates !== null && fieldTemplates !== void 0 ? fieldTemplates : dynamicFormBuilder_utils.createDefaultFieldTemplates(value.fields), [fieldTemplates, value.fields]);
+    const allowedTypes = React.useMemo(() => new Set(allowedFieldTypes !== null && allowedFieldTypes !== void 0 ? allowedFieldTypes : Object.keys(dynamicFormBuilder_utils.FIELD_TYPE_LABELS)), [allowedFieldTypes]);
+    return (jsxRuntime.jsx("aside", { className: "flex min-h-0 flex-col gap-4 border-r bg-muted/20 p-3", children: jsxRuntime.jsx("section", { className: "grid gap-3", children: jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { type: "button", variant: "outline", size: "sm", leftIcon: "plus", disabled: disabled || addFieldDisabled, className: "w-full justify-start", children: "Add field" }) }), jsxRuntime.jsx(popover.PopoverContent, { align: "start", matchTriggerWidth: true, className: "grid max-h-[420px] gap-1 overflow-auto p-2", children: templates
+                            .filter((template) => allowedTypes.has(template.type))
+                            .map((template) => (jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", leftIcon: "plus", disabled: disabled || addFieldDisabled, className: "justify-start", onClick: () => onAddField(template.createField()), children: template.label }, template.type))) })] }) }) }));
+};
+
+exports.DynamicFormBuilderFieldPalette = DynamicFormBuilderFieldPalette;

package/dist/cjs/components/forms/dynamic-form-builder/dynamic-form-builder-inspector-sheet.js

@@ -0,0 +1,23 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var dynamicFormBuilderLayoutInspector = require('./dynamic-form-builder-layout-inspector.js');
+var sheet = require('../../popovers/sheet/sheet.js');
+
+const getSelectionTitle = (selection, value) => {
+    if (selection.kind === "field") {
+        const field = value.fields.find((candidate) => candidate.name === selection.fieldId);
+        return (field === null || field === void 0 ? void 0 : field.label) || (field === null || field === void 0 ? void 0 : field.name) || "Field";
+    }
+    return "Form settings";
+};
+const getSelectionDescription = (selection) => {
+    if (selection.kind === "field") {
+        return "Edit field content, conditions, and advanced JSON.";
+    }
+    return "Edit form metadata and layout settings.";
+};
+const DynamicFormBuilderInspectorSheet = ({ disabled, onChange, onOpenChange, open, selection, value, }) => (jsxRuntime.jsx(sheet.Sheet, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(sheet.SheetContent, { side: "right", className: "w-[min(720px,calc(100vw-32px))] overflow-hidden sm:max-w-[720px]", children: [jsxRuntime.jsxs(sheet.SheetHeader, { className: "border-b pr-12", children: [jsxRuntime.jsx(sheet.SheetTitle, { children: getSelectionTitle(selection, value) }), jsxRuntime.jsx(sheet.SheetDescription, { children: getSelectionDescription(selection) })] }), jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto p-3 sm:p-4", children: jsxRuntime.jsx(dynamicFormBuilderLayoutInspector.DynamicFormBuilderLayoutInspector, { disabled: disabled, selection: selection, value: value, onChange: onChange }) })] }) }));
+
+exports.DynamicFormBuilderInspectorSheet = DynamicFormBuilderInspectorSheet;

package/dist/cjs/components/forms/dynamic-form-builder/dynamic-form-builder-json-panel.js

@@ -0,0 +1,36 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var dynamicFormBuilder_utils = require('./dynamic-form-builder.utils.js');
+var button = require('../../buttons/button/button.js');
+var textarea = require('../textarea/textarea.js');
+
+const DynamicFormBuilderJsonPanel = ({ disabled, onChange, value }) => {
+    const [draft, setDraft] = React.useState(() => dynamicFormBuilder_utils.formatJson(value));
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        setDraft(dynamicFormBuilder_utils.formatJson(value));
+        setError(null);
+    }, [value]);
+    const applyDraft = () => {
+        try {
+            const parsed = JSON.parse(draft);
+            const normalized = dynamicFormBuilder_utils.normalizeBuilderDefinitionLayout(parsed);
+            onChange(normalized);
+            setError(null);
+        }
+        catch (parseError) {
+            setError(parseError instanceof Error ? parseError.message : "Invalid form definition JSON");
+        }
+    };
+    const copyDraft = () => {
+        if (typeof navigator !== "undefined" && navigator.clipboard) {
+            void navigator.clipboard.writeText(draft);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-col gap-3 p-4", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxRuntime.jsx("h3", { className: "text-sm font-medium", children: "Definition JSON" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(button.Button, { type: "button", variant: "outline", size: "sm", leftIcon: "copy", disabled: disabled, onClick: copyDraft, children: "Copy" }), jsxRuntime.jsx(button.Button, { type: "button", size: "sm", leftIcon: "check", disabled: disabled, onClick: applyDraft, children: "Apply" })] })] }), jsxRuntime.jsx(textarea.Textarea, { value: draft, disabled: disabled, className: "min-h-[520px] flex-1 resize-none font-mono text-xs leading-relaxed", onChange: (event) => setDraft(event.target.value) }), error ? (jsxRuntime.jsx("pre", { className: "text-destructive max-h-48 overflow-auto rounded-md border border-destructive/40 bg-destructive/5 p-3 text-xs whitespace-pre-wrap", children: error })) : null] }));
+};
+
+exports.DynamicFormBuilderJsonPanel = DynamicFormBuilderJsonPanel;

package/dist/cjs/components/forms/dynamic-form-builder/dynamic-form-builder-layout-canvas.js

@@ -0,0 +1,54 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var dynamicFormBuilderFieldPalette = require('./dynamic-form-builder-field-palette.js');
+var formLayoutUtils = require('./layout/form-layout-utils.js');
+var icon = require('../../media/icon/icon.js');
+var geometry = require('../../layout/grid-layout/core/geometry.js');
+var utils = require('../../../lib/utils.js');
+var gridEditor = require('../../layout/grid-layout/components/grid-editor.js');
+require('../../utility/resizable/resizable.js');
+require('react');
+
+const getFieldLabel = (field) => (field === null || field === void 0 ? void 0 : field.label) || (field === null || field === void 0 ? void 0 : field.name) || "Empty slot";
+const getBoundedEditorLayout = (layout) => {
+    const editorLayout = formLayoutUtils.toGridEngineLayout(layout);
+    const rows = geometry.resolveGridRows(editorLayout.grid);
+    if (editorLayout.grid.maxRows !== undefined || rows <= 0) {
+        return editorLayout;
+    }
+    return Object.assign(Object.assign({}, editorLayout), { grid: Object.assign(Object.assign({}, editorLayout.grid), { maxRows: rows }) });
+};
+const GridFieldItem = ({ field, item, itemKey }) => (jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col rounded-sm bg-background px-3 py-2", children: [jsxRuntime.jsx("span", { className: "truncate text-sm font-medium", children: getFieldLabel(field) }), jsxRuntime.jsx("span", { className: "text-muted-foreground truncate text-xs", children: field ? field.type : `${itemKey} · ${item.w} x ${item.h} at ${item.x}, ${item.y}` })] }));
+const renderGridItemChrome = (entry, children, ctx) => {
+    var _a;
+    const _b = (_a = ctx.dragHandleProps) !== null && _a !== void 0 ? _a : {}, { ref: dragHandleRef, disabled: dragDisabled } = _b, dragHandleProps = tslib_es6.__rest(_b, ["ref", "disabled"]);
+    return (jsxRuntime.jsxs("div", { className: utils.cn("relative flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden rounded-md border bg-background shadow-xs", ctx.isActive && "border-primary ring-primary/20 ring-2", ctx.invalid && "border-destructive ring-destructive/25 ring-2", ctx.isDragging && "opacity-70"), children: [jsxRuntime.jsxs("div", { className: "flex min-h-8 items-center justify-between gap-2 border-b bg-muted/30 px-2 py-1", children: [jsxRuntime.jsx("span", { className: "text-muted-foreground truncate text-xs", children: entry.itemKey }), jsxRuntime.jsx("button", Object.assign({ ref: dragHandleRef, type: "button", className: utils.cn("inline-flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none", "hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary", dragDisabled ? "cursor-not-allowed opacity-50" : "cursor-grab active:cursor-grabbing"), "aria-label": `Drag ${entry.itemKey}`, disabled: dragDisabled }, dragHandleProps, { children: jsxRuntime.jsx(icon.Icon, { name: "grip-vertical", className: "size-4" }) }))] }), jsxRuntime.jsx("div", { className: "min-h-0 flex-1 p-2", children: children })] }));
+};
+const DynamicFormBuilderLayoutCanvas = ({ addFieldDisabled, allowedFieldTypes, disabled, fieldTemplates, onAddField, onChangeLayout, onSelect, selection, value, }) => {
+    const layout = value.layout;
+    const editorLayout = getBoundedEditorLayout(layout);
+    const fieldsByName = Object.fromEntries(value.fields.map((field) => [field.name, field]));
+    const selectedItemKey = selection.kind === "field" && layout.items[selection.fieldId] ? selection.fieldId : null;
+    const handleSelectedItemKeyChange = (itemKey) => {
+        if (!itemKey) {
+            onSelect({ kind: "form" });
+            return;
+        }
+        onSelect({ kind: "field", fieldId: itemKey });
+    };
+    return (jsxRuntime.jsx("main", { className: "grid min-h-0 flex-1 lg:grid-cols-[240px_minmax(0,1fr)]", children: jsxRuntime.jsx(gridEditor.GridEditor, { value: editorLayout, onChange: (nextLayout) => onChangeLayout(formLayoutUtils.fromGridEngineLayout(layout, nextLayout)), config: {
+                autoScroll: false,
+                bounded: true,
+                collisionPolicy: "push",
+                compactPolicy: "vertical",
+                compactOnCommit: true,
+                draggable: !disabled,
+                resizable: !disabled,
+                resizeHandles: ["e", "s", "se"],
+            }, selectedItemKey: selectedItemKey, onSelectedItemKeyChange: handleSelectedItemKeyChange, renderItem: (entry) => (jsxRuntime.jsx(GridFieldItem, { item: entry.item, itemKey: entry.itemKey, field: fieldsByName[entry.itemKey] })), renderItemChrome: renderGridItemChrome, className: "m-4 min-h-0 overflow-y-auto overflow-x-hidden overscroll-contain", children: jsxRuntime.jsx(dynamicFormBuilderFieldPalette.DynamicFormBuilderFieldPalette, { addFieldDisabled: addFieldDisabled, allowedFieldTypes: allowedFieldTypes, disabled: disabled, fieldTemplates: fieldTemplates, value: value, onAddField: onAddField }) }) }));
+};
+
+exports.DynamicFormBuilderLayoutCanvas = DynamicFormBuilderLayoutCanvas;

package/dist/cjs/components/forms/dynamic-form-builder/dynamic-form-builder-layout-inspector.js

@@ -0,0 +1,18 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var fieldInspector = require('./inspectors/field-inspector.js');
+var formInspector = require('./inspectors/form-inspector.js');
+
+const DynamicFormBuilderLayoutInspector = ({ disabled, onChange, selection, value, }) => {
+    if (selection.kind === "field") {
+        const field = value.fields.find((candidate) => candidate.name === selection.fieldId);
+        if (field) {
+            return jsxRuntime.jsx(fieldInspector.DynamicFormBuilderFieldInspector, { disabled: disabled, field: field, value: value, onChange: onChange });
+        }
+    }
+    return jsxRuntime.jsx(formInspector.FormInspector, { disabled: disabled, value: value, onChange: onChange });
+};
+
+exports.DynamicFormBuilderLayoutInspector = DynamicFormBuilderLayoutInspector;

package/dist/cjs/components/forms/dynamic-form-builder/dynamic-form-builder-preview.js

@@ -0,0 +1,86 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var dynamicFormBuilder_utils = require('./dynamic-form-builder.utils.js');
+require('../dynamic-form/capabilities/field-type-capabilities.js');
+require('../dynamic-form/conditions/evaluate-field-condition.js');
+require('../dynamic-form/conditions/validate-field-condition.js');
+var dynamicForm = require('../dynamic-form/dynamic-form.js');
+require('../checkbox/checkbox.js');
+require('../switch/switch.js');
+require('../../../node_modules/tslib/tslib.es6.js');
+require('../../media/country-flag/country-flag.js');
+require('../select/select.js');
+require('../../../lib/countries.js');
+require('../../../lib/currencies.js');
+require('../../../_virtual/isPlainObject.js');
+require('../../ui/date-pickers/date-input/date-input.js');
+require('../../ui/date-pickers/date-range-picker/date-range-picker.js');
+require('../../ui/date-pickers/date-time-picker/date-time-picker.js');
+require('../file-upload/file-upload.js');
+require('../file-upload/file-input.js');
+require('../file-upload/files-input.js');
+require('../../ui/date-pickers/month-select/month-select.js');
+require('../../selectors/multiselect/multiselect.js');
+require('../input-number/input-number.js');
+require('../phone-input/phone-input.js');
+require('../../../node_modules/awesome-phonenumber/index-esm.js');
+require('../../../node_modules/@tiptap/extensions/dist/index.js');
+require('../../ui/rich-editor/extensions/carousel/extension.js');
+require('../../ui/rich-editor/extensions/carousel/editor.js');
+require('../../ui/carousel/carousel.js');
+require('../../ui/rich-editor/extensions/code-block/index.js');
+require('../../ui/rich-editor/extensions.js');
+require('react-dom');
+require('../../../node_modules/prosemirror-tables/dist/index.js');
+require('../../ui/rich-editor/extensions/table/table-hover-extension.js');
+require('../../ui/rich-editor/toolbar/color-constants.js');
+require('../../ui/dropdown-menu/dropdown-menu.js');
+var button = require('../../buttons/button/button.js');
+require('../../popovers/tooltip/tooltip.js');
+require('../../buttons/toggle/toggle.js');
+require('../../ui/rich-editor/toolbar/constants.js');
+require('../../popovers/popover/popover.js');
+require('../../ui/rich-editor/toolbar/list-dropdown.js');
+require('../../ui/rich-editor/toolbar/dropdowns.js');
+require('../../utility/separator/separator.js');
+require('../input/input.js');
+require('../../popovers/shared/icon-close.js');
+require('../../ui/rich-editor/extensions/code-block/utils.js');
+require('../../ui/rich-editor/extensions/table/table.js');
+require('../../../node_modules/@tiptap/extension-table/dist/index.js');
+require('../../ui/rich-editor/extensions/table/table-header.js');
+require('../../ui/rich-editor/extensions/table/table-cell.js');
+require('../../ui/rich-editor/extensions/table/table-cell-style.js');
+require('../../ui/rich-editor/extensions/table/kit.js');
+require('../../ui/rich-editor/extensions/table/table-actions-extension.js');
+require('../../ui/rich-editor/extensions/table/table-selection-overlay.js');
+require('../../ui/rich-editor/bubble-menus/shared.js');
+require('../dropzone/dropzone.js');
+require('../label/label.js');
+require('../../ui/rich-editor/bubble-menus/layout-bubble-menu.js');
+require('../../ui/rich-editor/bubble-menus/text-selection-bubble-menu.js');
+require('../../../node_modules/@tiptap/extension-drag-handle/dist/index.js');
+require('../../ui/rich-editor/extensions/slash/slash.js');
+require('../../ui/rich-editor/extensions/slash/slash-menu.js');
+require('../../../node_modules/@tiptap/suggestion/dist/index.js');
+require('../tags-input/tags-input.js');
+require('../textarea/textarea.js');
+require('../../ui/date-pickers/time-picker/time-picker.js');
+require('../../ui/date-pickers/year-select/year-select.js');
+require('../form/form.js');
+require('../dynamic-form/layout/dynamic-form-field-renderer.js');
+require('../../media/icon/icon.js');
+require('../../utility/resizable/resizable.js');
+
+const DynamicFormBuilderPreview = ({ value }) => {
+    const formRef = React.useRef(null);
+    const [submittedValues, setSubmittedValues] = React.useState(null);
+    return (jsxRuntime.jsxs("div", { className: "grid min-h-0 gap-4 overflow-auto p-4 xl:grid-cols-[minmax(0,560px)_minmax(0,1fr)]", children: [jsxRuntime.jsxs("section", { className: "min-w-0 rounded-md border bg-background p-4", children: [value.title || value.description ? (jsxRuntime.jsxs("header", { className: "mb-4 flex flex-col gap-1", children: [value.title ? jsxRuntime.jsx("h3", { className: "text-sm font-medium", children: value.title }) : null, value.description ? jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: value.description }) : null] })) : null, jsxRuntime.jsx(dynamicForm.DynamicForm, { ref: formRef, definition: value, className: "flex flex-col gap-4", onSubmit: (values) => {
+                            setSubmittedValues(values);
+                        } }), jsxRuntime.jsx("div", { className: "mt-4 flex justify-end", children: jsxRuntime.jsx(button.Button, { type: "button", onClick: () => { var _a; return void ((_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit()); }, children: "Preview submit" }) })] }), jsxRuntime.jsxs("section", { className: "min-w-0 rounded-md border bg-background p-4", children: [jsxRuntime.jsx("h3", { className: "text-sm font-medium", children: "Preview Submit" }), jsxRuntime.jsx("pre", { className: "mt-3 max-h-[520px] overflow-auto rounded-md bg-muted p-3 text-xs whitespace-pre-wrap", children: submittedValues ? dynamicFormBuilder_utils.formatJson(submittedValues) : "{}" })] })] }));
+};
+
+exports.DynamicFormBuilderPreview = DynamicFormBuilderPreview;

package/dist/cjs/components/forms/dynamic-form-builder/dynamic-form-builder-selection.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const shouldOpenInspectorForSelection = (selection) => selection.kind !== "form";
+
+exports.shouldOpenInspectorForSelection = shouldOpenInspectorForSelection;

package/dist/cjs/components/forms/dynamic-form-builder/dynamic-form-builder-toolbar.js

@@ -0,0 +1,14 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var button = require('../../buttons/button/button.js');
+var input = require('../input/input.js');
+var utils = require('../../../lib/utils.js');
+
+const DynamicFormBuilderToolbar = ({ availableModes, disabled, isSaving, mode, onChangeMode, onChangeTitle, onOpenFormSettings, onSave, value, }) => {
+    var _a;
+    return (jsxRuntime.jsxs("header", { className: "flex flex-wrap items-center gap-3 border-b bg-background p-3", children: [jsxRuntime.jsx("div", { className: "min-w-[220px] flex-1", children: jsxRuntime.jsx(input.Input, { value: (_a = value.title) !== null && _a !== void 0 ? _a : "", disabled: disabled, placeholder: "Form title", "aria-label": "Form title", onChange: (event) => onChangeTitle(event.target.value) }) }), jsxRuntime.jsx("div", { className: "flex items-center gap-1 rounded-md border bg-muted/30 p-1", children: availableModes.map((candidateMode) => (jsxRuntime.jsx(button.Button, { type: "button", variant: mode === candidateMode ? "secondary" : "ghost", size: "sm", className: utils.cn("capitalize", mode === candidateMode && "shadow-xs"), disabled: disabled, onClick: () => onChangeMode(candidateMode), children: candidateMode }, candidateMode))) }), onOpenFormSettings ? (jsxRuntime.jsx(button.Button, { type: "button", variant: "outline", size: "sm", leftIcon: "settings", disabled: disabled, onClick: onOpenFormSettings, children: "Form settings" })) : null, onSave ? (jsxRuntime.jsx(button.Button, { type: "button", size: "sm", leftIcon: "save", disabled: disabled || isSaving, loading: isSaving, onClick: onSave, children: "Save" })) : null] }));
+};
+
+exports.DynamicFormBuilderToolbar = DynamicFormBuilderToolbar;

package/dist/cjs/components/forms/dynamic-form-builder/dynamic-form-builder.js

@@ -0,0 +1,69 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var dynamicFormBuilderInspectorSheet = require('./dynamic-form-builder-inspector-sheet.js');
+var dynamicFormBuilderLayoutCanvas = require('./dynamic-form-builder-layout-canvas.js');
+var dynamicFormBuilderJsonPanel = require('./dynamic-form-builder-json-panel.js');
+var dynamicFormBuilderPreview = require('./dynamic-form-builder-preview.js');
+var dynamicFormBuilderToolbar = require('./dynamic-form-builder-toolbar.js');
+var dynamicFormBuilderSelection = require('./dynamic-form-builder-selection.js');
+var dynamicFormBuilder_utils = require('./dynamic-form-builder.utils.js');
+
+const getAvailableModes = (features) => {
+    const modes = ["layout"];
+    if (features.preview) {
+        modes.push("preview");
+    }
+    if (features.jsonEditor) {
+        modes.push("json");
+    }
+    return modes;
+};
+const DynamicFormBuilder = ({ allowedFieldTypes, disabled, features: featuresProp, fieldTemplates, onChange, onSave, readOnly, value, }) => {
+    var _a;
+    const features = Object.assign(Object.assign({}, dynamicFormBuilder_utils.DEFAULT_BUILDER_FEATURES), featuresProp);
+    const normalizedValue = React.useMemo(() => dynamicFormBuilder_utils.normalizeBuilderDefinitionLayout(value), [value]);
+    const availableModes = getAvailableModes(features);
+    const [mode, setMode] = React.useState((_a = availableModes[0]) !== null && _a !== void 0 ? _a : "layout");
+    const [selection, setSelection] = React.useState({ kind: "form" });
+    const [inspectorOpen, setInspectorOpen] = React.useState(false);
+    const [isSaving, setIsSaving] = React.useState(false);
+    const isDisabled = disabled || readOnly;
+    const fieldEditorLocked = !features.fieldEditor;
+    const layoutEditorLocked = !features.layoutEditor;
+    const inspectorDisabled = isDisabled || (selection.kind === "field" ? fieldEditorLocked : layoutEditorLocked);
+    const selectAndOpen = (nextSelection) => {
+        setSelection(nextSelection);
+        setInspectorOpen(dynamicFormBuilderSelection.shouldOpenInspectorForSelection(nextSelection));
+    };
+    const updateGridLayout = (layout) => {
+        onChange(Object.assign(Object.assign({}, normalizedValue), { layout }));
+    };
+    const addField = (field) => {
+        onChange(dynamicFormBuilder_utils.addFieldToDefinition(normalizedValue, field));
+        selectAndOpen({ kind: "field", fieldId: field.name });
+    };
+    const save = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        if (!onSave) {
+            return;
+        }
+        setIsSaving(true);
+        try {
+            yield onSave(normalizedValue);
+        }
+        finally {
+            setIsSaving(false);
+        }
+    });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex min-h-[720px] flex-col overflow-hidden rounded-md border bg-background", children: [jsxRuntime.jsx(dynamicFormBuilderToolbar.DynamicFormBuilderToolbar, { availableModes: availableModes, disabled: isDisabled, isSaving: isSaving, mode: mode, value: normalizedValue, onChangeMode: setMode, onChangeTitle: (title) => onChange(Object.assign(Object.assign({}, normalizedValue), { title })), onOpenFormSettings: () => {
+                            setSelection({ kind: "form" });
+                            setInspectorOpen(true);
+                        }, onSave: onSave ? save : undefined }), jsxRuntime.jsxs("div", { className: "grid min-h-0 flex-1", children: [mode === "layout" ? (jsxRuntime.jsx(dynamicFormBuilderLayoutCanvas.DynamicFormBuilderLayoutCanvas, { addFieldDisabled: fieldEditorLocked, allowedFieldTypes: allowedFieldTypes, disabled: isDisabled || layoutEditorLocked, fieldTemplates: fieldTemplates, selection: selection, value: normalizedValue, onAddField: addField, onChangeLayout: (layout) => {
+                                    updateGridLayout(layout);
+                                }, onSelect: selectAndOpen })) : null, mode === "preview" ? jsxRuntime.jsx(dynamicFormBuilderPreview.DynamicFormBuilderPreview, { value: normalizedValue }) : null, mode === "json" ? (jsxRuntime.jsx(dynamicFormBuilderJsonPanel.DynamicFormBuilderJsonPanel, { disabled: isDisabled, value: normalizedValue, onChange: onChange })) : null] })] }), jsxRuntime.jsx(dynamicFormBuilderInspectorSheet.DynamicFormBuilderInspectorSheet, { open: inspectorOpen, disabled: inspectorDisabled, selection: selection, value: normalizedValue, onOpenChange: setInspectorOpen, onChange: onChange })] }));
+};
+
+exports.DynamicFormBuilder = DynamicFormBuilder;