@proveanything/smartlinks-form-renderer
Version:
A flexible React component for rendering forms from JSON schema with conditional logic and storage configuration
369 lines (353 loc) • 28 kB
JavaScript
;
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(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;
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var evaluateFieldConditions = function (conditions, showWhen, formData) {
if (conditions === void 0) { conditions = []; }
if (showWhen === void 0) { showWhen = 'all'; }
if (formData === void 0) { formData = {}; }
if (!conditions || conditions.length === 0) {
return true; // No conditions means field is always visible
}
var results = conditions.map(function (condition) {
var targetValue = formData[condition.targetFieldId];
switch (condition.operator) {
case 'equals':
return targetValue === condition.value;
case 'not_equals':
return targetValue !== condition.value;
case 'contains':
return typeof targetValue === 'string' && targetValue.includes(condition.value);
case 'not_contains':
return typeof targetValue === 'string' && !targetValue.includes(condition.value);
case 'greater_than':
return Number(targetValue) > Number(condition.value);
case 'less_than':
return Number(targetValue) < Number(condition.value);
case 'is_empty':
return !targetValue || targetValue === '' || (Array.isArray(targetValue) && targetValue.length === 0);
case 'is_not_empty':
return targetValue && targetValue !== '' && (!Array.isArray(targetValue) || targetValue.length > 0);
default:
return true;
}
});
return showWhen === 'all' ? results.every(Boolean) : results.some(Boolean);
};
var TableInput = function (_a) {
var columns = _a.columns, _b = _a.value, value = _b === void 0 ? [] : _b, onChange = _a.onChange, _c = _a.minRows, minRows = _c === void 0 ? 1 : _c, maxRows = _a.maxRows, _d = _a.className, className = _d === void 0 ? '' : _d;
var _e = React.useState([]), data = _e[0], setData = _e[1];
// Initialize data when component mounts or when value prop changes
React.useEffect(function () {
var initializeData = function () {
var initialData = __spreadArray([], value, true);
var _loop_1 = function () {
var newRow = {};
columns.forEach(function (col) {
newRow[col.id] = col.type === 'boolean' ? false : '';
});
initialData.push(newRow);
};
// Ensure minimum rows
while (initialData.length < minRows) {
_loop_1();
}
return initialData;
};
setData(initializeData());
}, [value, columns, minRows]);
var updateData = function (newData) {
setData(newData);
onChange(newData);
};
var addRow = function () {
if (maxRows && data.length >= maxRows)
return;
var newRow = {};
columns.forEach(function (col) {
newRow[col.id] = col.type === 'boolean' ? false : '';
});
updateData(__spreadArray(__spreadArray([], data, true), [newRow], false));
};
var removeRow = function (index) {
if (data.length <= minRows)
return;
var newData = data.filter(function (_, i) { return i !== index; });
updateData(newData);
};
var updateCell = function (rowIndex, columnId, cellValue) {
var _a;
var newData = __spreadArray([], data, true);
newData[rowIndex] = __assign(__assign({}, newData[rowIndex]), (_a = {}, _a[columnId] = cellValue, _a));
updateData(newData);
};
var renderCell = function (row, column, rowIndex) {
var value = row[column.id] || '';
switch (column.type) {
case 'boolean':
return (jsxRuntime.jsx("input", { type: "checkbox", checked: value === true, onChange: function (e) { return updateCell(rowIndex, column.id, e.target.checked); }, className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }));
case 'number':
return (jsxRuntime.jsx("input", { type: "number", value: value, onChange: function (e) { return updateCell(rowIndex, column.id, parseFloat(e.target.value) || 0); }, className: "w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500", style: { width: column.width || 'auto' } }));
case 'date':
return (jsxRuntime.jsx("input", { type: "date", value: value, onChange: function (e) { return updateCell(rowIndex, column.id, e.target.value); }, className: "w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500", style: { width: column.width || 'auto' } }));
default: // string
return (jsxRuntime.jsx("input", { type: "text", value: value, onChange: function (e) { return updateCell(rowIndex, column.id, e.target.value); }, className: "w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500", style: { width: column.width || 'auto' } }));
}
};
if (columns.length === 0) {
return (jsxRuntime.jsx("div", { className: "p-4 border border-dashed border-gray-300 rounded-lg text-center text-gray-500", children: "No columns configured for this table field." }));
}
return (jsxRuntime.jsxs("div", { className: "space-y-4 ".concat(className), children: [jsxRuntime.jsx("div", { className: "overflow-x-auto", children: jsxRuntime.jsxs("table", { className: "w-full border-collapse border border-gray-300", children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { className: "bg-gray-50", children: [columns.map(function (column) { return (jsxRuntime.jsxs("th", { className: "border border-gray-300 px-3 py-2 text-left font-medium text-gray-700", style: { width: column.width || 'auto' }, children: [column.title, column.required && jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })] }, column.id)); }), jsxRuntime.jsx("th", { className: "border border-gray-300 px-3 py-2 text-center font-medium text-gray-700 w-16", children: "Actions" })] }) }), jsxRuntime.jsx("tbody", { children: data.map(function (row, rowIndex) { return (jsxRuntime.jsxs("tr", { className: "hover:bg-gray-50", children: [columns.map(function (column) { return (jsxRuntime.jsx("td", { className: "border border-gray-300 px-3 py-2", children: renderCell(row, column, rowIndex) }, column.id)); }), jsxRuntime.jsx("td", { className: "border border-gray-300 px-3 py-2 text-center", children: jsxRuntime.jsx("button", { type: "button", onClick: function () { return removeRow(rowIndex); }, disabled: data.length <= minRows, className: "text-red-600 hover:text-red-800 disabled:text-gray-400 disabled:cursor-not-allowed px-2 py-1 rounded", children: "\u00D7" }) })] }, rowIndex)); }) })] }) }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsx("button", { type: "button", onClick: addRow, disabled: maxRows ? data.length >= maxRows : false, className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed", children: "+ Add Row" }), jsxRuntime.jsxs("span", { className: "text-sm text-gray-600", children: [data.length, " row", data.length !== 1 ? 's' : '', minRows && " (min: ".concat(minRows, ")"), maxRows && " (max: ".concat(maxRows, ")")] })] })] }));
};
// Default styled components that work without external dependencies
var Button = function (_a) {
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, props = __rest(_a, ["children", "className", "variant"]);
var baseClasses = 'px-4 py-2 rounded font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';
var variantClasses = variant === 'outline'
? 'border-2 border-input text-foreground hover:bg-accent hover:text-accent-foreground focus:ring-ring'
: 'bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-ring';
return (jsxRuntime.jsx("button", __assign({ className: "".concat(baseClasses, " ").concat(variantClasses, " ").concat(className) }, props, { children: children })));
};
var Input = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, props = __rest(_a, ["className"]);
return (jsxRuntime.jsx("input", __assign({ className: "w-full px-3 py-2 border border-input bg-background text-foreground rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring ".concat(className) }, props)));
};
var Textarea = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, props = __rest(_a, ["className"]);
return (jsxRuntime.jsx("textarea", __assign({ className: "w-full px-3 py-2 border border-input bg-background text-foreground rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring resize-vertical ".concat(className) }, props)));
};
var Label = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, props = __rest(_a, ["className", "children"]);
return (jsxRuntime.jsx("label", __assign({ className: "block text-sm font-medium text-foreground mb-1 ".concat(className) }, props, { children: children })));
};
var Select = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, placeholder = _a.placeholder, onValueChange = _a.onValueChange, onChange = _a.onChange, children = _a.children, props = __rest(_a, ["className", "placeholder", "onValueChange", "onChange", "children"]);
return (jsxRuntime.jsxs("select", __assign({ className: "w-full px-3 py-2 border border-input bg-background text-foreground rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring ".concat(className), onChange: function (e) {
onChange === null || onChange === void 0 ? void 0 : onChange(e);
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
} }, props, { children: [placeholder && jsxRuntime.jsx("option", { value: "", children: placeholder }), children] })));
};
var Checkbox = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, onCheckedChange = _a.onCheckedChange, onChange = _a.onChange, props = __rest(_a, ["className", "onCheckedChange", "onChange"]);
return (jsxRuntime.jsx("input", __assign({ type: "checkbox", className: "h-4 w-4 text-primary focus:ring-ring border-input rounded ".concat(className), onChange: function (e) {
onChange === null || onChange === void 0 ? void 0 : onChange(e);
onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(e.target.checked);
} }, props)));
};
var Switch = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, onCheckedChange = _a.onCheckedChange, onChange = _a.onChange, props = __rest(_a, ["className", "onCheckedChange", "onChange"]);
return (jsxRuntime.jsxs("label", { className: "relative inline-flex items-center cursor-pointer ".concat(className), children: [jsxRuntime.jsx("input", __assign({ type: "checkbox", className: "sr-only", onChange: function (e) {
onChange === null || onChange === void 0 ? void 0 : onChange(e);
onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(e.target.checked);
} }, props)), jsxRuntime.jsx("div", { className: "w-11 h-6 bg-input peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-ring/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-background after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-input after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary" })] }));
};
var RadioGroup = function (_a) {
var value = _a.value, onValueChange = _a.onValueChange, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
return (jsxRuntime.jsx("div", { className: "space-y-2 ".concat(className), children: React.Children.map(children, function (child) {
if (React.isValidElement(child)) {
return React.cloneElement(child, __assign(__assign({}, child.props), { checked: child.props.value === value, onChange: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(child.props.value); } }));
}
return child;
}) }));
};
var RadioGroupItem = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, props = __rest(_a, ["className"]);
return (jsxRuntime.jsx("input", __assign({ type: "radio", className: "h-4 w-4 text-primary focus:ring-ring border-input ".concat(className) }, props)));
};
var DefaultComponents = /*#__PURE__*/Object.freeze({
__proto__: null,
Button: Button,
Checkbox: Checkbox,
Input: Input,
Label: Label,
RadioGroup: RadioGroup,
RadioGroupItem: RadioGroupItem,
Select: Select,
Switch: Switch,
TableInput: TableInput,
Textarea: Textarea
});
var SchemaFormRenderer = function (_a) {
var config = _a.config, onSubmit = _a.onSubmit, _b = _a.isSubmitting, isSubmitting = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.initialData, initialData = _d === void 0 ? {} : _d, _e = _a.components, components = _e === void 0 ? {} : _e;
var _f = React.useState({}), formData = _f[0], setFormData = _f[1];
var _g = React.useState(new Set()), touchedFields = _g[0], setTouchedFields = _g[1];
var _h = React.useState(false), isInitialized = _h[0], setIsInitialized = _h[1];
var schemaPropertiesRef = React.useRef('');
// Merge default components with custom components
var _j = components.Button, Button$1 = _j === void 0 ? Button : _j, _k = components.Input, Input$1 = _k === void 0 ? Input : _k, _l = components.Textarea, Textarea$1 = _l === void 0 ? Textarea : _l, _m = components.Label, Label$1 = _m === void 0 ? Label : _m, _o = components.Select, Select$1 = _o === void 0 ? Select : _o, _p = components.Checkbox, Checkbox$1 = _p === void 0 ? Checkbox : _p, _q = components.RadioGroup, RadioGroup$1 = _q === void 0 ? RadioGroup : _q, _r = components.Switch, Switch$1 = _r === void 0 ? Switch : _r, _s = components.TableInput, TableInput$1 = _s === void 0 ? TableInput : _s;
// Stabilize schema properties using serialization to prevent unnecessary re-renders
var schemaPropertiesKey = React.useMemo(function () {
return JSON.stringify(config.schema.properties);
}, [config.schema.properties]);
var initialDataKey = React.useMemo(function () {
return JSON.stringify(initialData);
}, [initialData]);
// Initialize form data with default values and initial data
React.useEffect(function () {
// Only re-initialize if schema properties or initial data actually changed
if (schemaPropertiesRef.current === schemaPropertiesKey + initialDataKey && isInitialized) {
return;
}
var combinedData = {};
// First, apply schema defaults for untouched fields only
Object.entries(config.schema.properties).forEach(function (_a) {
var fieldId = _a[0], field = _a[1];
if (field.default !== undefined && (!isInitialized || !touchedFields.has(fieldId))) {
combinedData[fieldId] = field.default;
}
});
// Then, apply initial data (this takes precedence over defaults) for untouched fields only
Object.entries(initialData).forEach(function (_a) {
var fieldId = _a[0], value = _a[1];
if (config.schema.properties[fieldId] && value !== undefined && (!isInitialized || !touchedFields.has(fieldId))) {
combinedData[fieldId] = value;
}
});
// Only update form data if we have new data or this is the first initialization
if (!isInitialized || Object.keys(combinedData).length > 0) {
setFormData(function (prev) { return (__assign(__assign({}, prev), combinedData)); });
schemaPropertiesRef.current = schemaPropertiesKey + initialDataKey;
setIsInitialized(true);
}
}, [schemaPropertiesKey, initialDataKey, config.schema.properties, initialData, touchedFields, isInitialized]);
var handleSubmit = function (e) {
e.preventDefault();
// Only submit data for visible fields
var visibleData = {};
Object.entries(config.schema.properties).forEach(function (_a) {
var fieldId = _a[0], field = _a[1];
if (evaluateFieldConditions(field.conditions, field.showWhen, formData)) {
visibleData[fieldId] = formData[fieldId];
}
});
onSubmit(visibleData);
};
var updateFormData = React.useCallback(function (fieldId, value) {
setFormData(function (prev) {
var _a;
return (__assign(__assign({}, prev), (_a = {}, _a[fieldId] = value, _a)));
});
setTouchedFields(function (prev) { return new Set(prev).add(fieldId); });
}, []);
var renderField = React.useCallback(function (fieldId, field) {
var _a;
// Check if field should be visible based on conditions
if (!evaluateFieldConditions(field.conditions, field.showWhen, formData)) {
return null;
}
var value = formData[fieldId] || '';
var uiConfig = config.uiSchema[fieldId] || {};
var isRequired = ((_a = config.schema.required) === null || _a === void 0 ? void 0 : _a.includes(fieldId)) || false;
var renderInput = function () {
var _a, _b, _c;
switch (field.type) {
case 'table':
var tableValue = Array.isArray(value) ? value : [];
return (jsxRuntime.jsx(TableInput$1, { columns: field.columns || [], value: tableValue, onChange: function (val) { return updateFormData(fieldId, val); }, minRows: field.minRows, maxRows: field.maxRows }));
case 'boolean':
if (field.format === 'switch') {
return (jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntime.jsx(Switch$1, { id: fieldId, checked: value === true, onCheckedChange: function (checked) { return updateFormData(fieldId, checked); } }), jsxRuntime.jsx(Label$1, { htmlFor: fieldId, children: field.title })] }));
}
else {
return (jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntime.jsx(Checkbox$1, { id: fieldId, checked: value === true, onCheckedChange: function (checked) { return updateFormData(fieldId, checked); } }), jsxRuntime.jsx(Label$1, { htmlFor: fieldId, children: field.title })] }));
}
case 'string':
switch (field.format) {
case 'textarea':
return (jsxRuntime.jsx(Textarea$1, { value: value, onChange: function (e) { return updateFormData(fieldId, e.target.value); }, placeholder: uiConfig['ui:placeholder'], rows: ((_a = uiConfig['ui:options']) === null || _a === void 0 ? void 0 : _a.rows) || 4 }));
case 'select':
return (jsxRuntime.jsx(Select$1, { value: value, onValueChange: function (val) { return updateFormData(fieldId, val); }, placeholder: uiConfig['ui:placeholder'] || "Select ".concat((_b = field.title) === null || _b === void 0 ? void 0 : _b.toLowerCase()), children: (field.enum || []).map(function (option, index) {
var _a;
return (jsxRuntime.jsx("option", { value: String(option), children: ((_a = field.enumNames) === null || _a === void 0 ? void 0 : _a[index]) || String(option) }, index));
}) }));
case 'radio':
return (jsxRuntime.jsx(RadioGroup$1, { value: value, onValueChange: function (val) { return updateFormData(fieldId, val); }, children: (field.enum || []).map(function (option, index) {
var _a;
return (jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntime.jsx(RadioGroupItem, { value: String(option), id: "".concat(fieldId, "-").concat(index) }), jsxRuntime.jsx(Label$1, { htmlFor: "".concat(fieldId, "-").concat(index), children: ((_a = field.enumNames) === null || _a === void 0 ? void 0 : _a[index]) || String(option) })] }, index));
}) }));
case 'checkboxes':
case 'multiselect':
var selectedValues_1 = Array.isArray(value) ? value : [];
return (jsxRuntime.jsx("div", { className: "space-y-2", children: (field.enum || []).map(function (option, index) {
var _a;
return (jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntime.jsx(Checkbox$1, { id: "".concat(fieldId, "-").concat(index), checked: selectedValues_1.includes(String(option)), onCheckedChange: function (checked) {
var newValues = checked
? __spreadArray(__spreadArray([], selectedValues_1, true), [String(option)], false) : selectedValues_1.filter(function (v) { return v !== String(option); });
updateFormData(fieldId, newValues);
} }), jsxRuntime.jsx(Label$1, { htmlFor: "".concat(fieldId, "-").concat(index), children: ((_a = field.enumNames) === null || _a === void 0 ? void 0 : _a[index]) || String(option) })] }, index));
}) }));
case 'file':
return (jsxRuntime.jsx(Input$1, { type: "file", onChange: function (e) {
var _a;
var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
updateFormData(fieldId, file);
}, accept: (_c = uiConfig['ui:options']) === null || _c === void 0 ? void 0 : _c.accept }));
default:
return (jsxRuntime.jsx(Input$1, { type: field.format === 'email' ? 'email' : field.format === 'date' ? 'date' : field.format === 'date-time' ? 'datetime-local' : 'text', value: value, onChange: function (e) { return updateFormData(fieldId, e.target.value); }, placeholder: uiConfig['ui:placeholder'], minLength: field.minLength, maxLength: field.maxLength, pattern: field.pattern }));
}
case 'number':
case 'integer':
return (jsxRuntime.jsx(Input$1, { type: "number", value: value, onChange: function (e) { return updateFormData(fieldId, field.type === 'integer' ? parseInt(e.target.value) || 0 : parseFloat(e.target.value) || 0); }, placeholder: uiConfig['ui:placeholder'], min: field.minimum, max: field.maximum, step: field.type === 'integer' ? 1 : 'any' }));
default:
return (jsxRuntime.jsx(Input$1, { value: value, onChange: function (e) { return updateFormData(fieldId, e.target.value); }, placeholder: uiConfig['ui:placeholder'] }));
}
};
return (jsxRuntime.jsxs("div", { className: "space-y-2", children: [field.type !== 'boolean' && (jsxRuntime.jsxs(Label$1, { htmlFor: fieldId, children: [field.title || fieldId, isRequired && jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), renderInput(), field.description && (jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: field.description })), uiConfig['ui:help'] && (jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: uiConfig['ui:help'] }))] }, fieldId));
}, [formData, config.uiSchema, config.schema.required, updateFormData]);
// Get ordered field IDs, falling back to object keys if no order is specified
var orderedFieldIds = config.fieldOrder || Object.keys(config.schema.properties);
var filteredFieldIds = orderedFieldIds.filter(function (fieldId) { return config.schema.properties[fieldId]; });
return (jsxRuntime.jsxs("div", { className: "space-y-6 ".concat(className), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h2", { className: "text-2xl font-bold", children: config.title }), config.description && (jsxRuntime.jsx("p", { className: "text-gray-600 mt-2", children: config.description }))] }), jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [filteredFieldIds.map(function (fieldId) {
return renderField(fieldId, config.schema.properties[fieldId]);
}), jsxRuntime.jsx(Button$1, { type: "submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : config.settings.submitButtonText })] })] }));
};
exports.DefaultComponents = DefaultComponents;
exports.SchemaFormRenderer = SchemaFormRenderer;
exports.evaluateFieldConditions = evaluateFieldConditions;
//# sourceMappingURL=index.js.map