@uipath/apollo-wind 0.7.2-pr188.4865fad

package/dist/components/forms/metadata-form.cjs

@@ -0,0 +1,400 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    MetadataForm: ()=>MetadataForm
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_react_hook_form_namespaceObject = require("react-hook-form");
+const v4_namespaceObject = require("zod/v4");
+const accordion_cjs_namespaceObject = require("../ui/accordion.cjs");
+const button_cjs_namespaceObject = require("../ui/button.cjs");
+const standard_schema_namespaceObject = require("@hookform/resolvers/standard-schema");
+const external_data_fetcher_cjs_namespaceObject = require("./data-fetcher.cjs");
+const external_field_renderer_cjs_namespaceObject = require("./field-renderer.cjs");
+const external_rules_engine_cjs_namespaceObject = require("./rules-engine.cjs");
+const external_validation_converter_cjs_namespaceObject = require("./validation-converter.cjs");
+const DEFAULT_PLUGINS = [];
+function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete }) {
+    const [currentStep, setCurrentStep] = (0, external_react_namespaceObject.useState)(0);
+    const [customComponents, setCustomComponents] = (0, external_react_namespaceObject.useState)({});
+    const [isInitialized, setIsInitialized] = (0, external_react_namespaceObject.useState)(false);
+    const zodSchema = (0, external_react_namespaceObject.useMemo)(()=>buildZodSchema(schema), [
+        schema
+    ]);
+    const form = (0, external_react_hook_form_namespaceObject.useForm)({
+        resolver: (0, standard_schema_namespaceObject.standardSchemaResolver)(zodSchema),
+        mode: schema.mode || 'onSubmit',
+        reValidateMode: schema.reValidateMode || 'onChange'
+    });
+    const { watch, handleSubmit, reset } = form;
+    const valuesRef = (0, external_react_namespaceObject.useRef)({});
+    const watchedValues = watch();
+    valuesRef.current = watchedValues;
+    const context = (0, external_react_namespaceObject.useMemo)(()=>({
+            schema,
+            form,
+            get values () {
+                return valuesRef.current;
+            },
+            get errors () {
+                return form.formState.errors;
+            },
+            get isSubmitting () {
+                return form.formState.isSubmitting;
+            },
+            get isDirty () {
+                return form.formState.isDirty;
+            },
+            currentStep: schema.steps ? currentStep : void 0,
+            evaluateConditions: (conditions)=>external_rules_engine_cjs_namespaceObject.RulesEngine.evaluateConditions(conditions, valuesRef.current, 'AND'),
+            fetchData: async (source)=>{
+                const result = await external_data_fetcher_cjs_namespaceObject.DataFetcher.fetch(source, valuesRef.current);
+                return result;
+            },
+            registerCustomComponent: (name, component)=>{
+                setCustomComponents((prev)=>({
+                        ...prev,
+                        [name]: component
+                    }));
+            }
+        }), [
+        schema,
+        form,
+        currentStep
+    ]);
+    const contextRef = (0, external_react_namespaceObject.useRef)(context);
+    contextRef.current = context;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (isInitialized) return;
+        const initializeForm = async ()=>{
+            if (schema.initialData) {
+                const data = await loadInitialData(schema.initialData, contextRef.current);
+                reset(data);
+            }
+            for (const plugin of plugins)await plugin.onFormInit?.(contextRef.current);
+            setIsInitialized(true);
+        };
+        initializeForm();
+    }, [
+        isInitialized
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!isInitialized) return;
+        const subscription = watch((value, { name })=>{
+            if (name) {
+                valuesRef.current = value;
+                plugins.forEach((plugin)=>{
+                    plugin.onValueChange?.(name, value[name], contextRef.current);
+                });
+            }
+        });
+        return ()=>subscription.unsubscribe();
+    }, [
+        watch,
+        isInitialized,
+        plugins
+    ]);
+    const handleFormSubmit = handleSubmit(async (data)=>{
+        let finalData = data;
+        for (const plugin of plugins)if (plugin.onSubmit) finalData = await plugin.onSubmit(finalData, context) || finalData;
+        if (onSubmit) await onSubmit(finalData);
+    });
+    const renderContent = ()=>{
+        if (schema.steps) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MultiStepForm, {
+            schema: schema,
+            context: context,
+            currentStep: currentStep,
+            setCurrentStep: setCurrentStep,
+            customComponents: customComponents,
+            disabled: disabled
+        });
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SinglePageForm, {
+            schema: schema,
+            context: context,
+            customComponents: customComponents,
+            disabled: disabled
+        });
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.FormProvider, {
+        ...form,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("form", {
+            onSubmit: handleFormSubmit,
+            className: className,
+            autoComplete: autoComplete,
+            children: [
+                renderContent(),
+                !schema.steps && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormActions, {
+                    schema: schema,
+                    context: context,
+                    onReset: ()=>reset()
+                })
+            ]
+        })
+    });
+}
+function SinglePageForm({ schema, context, customComponents, disabled }) {
+    const sections = schema.sections || [];
+    const visibleSections = sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "space-y-2",
+        children: visibleSections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
+                section: section,
+                context: context,
+                customComponents: customComponents,
+                disabled: disabled
+            }, section.id))
+    });
+}
+function MultiStepForm({ schema, context, currentStep, setCurrentStep, customComponents, disabled }) {
+    const steps = schema.steps || [];
+    const step = steps[currentStep];
+    if (!step) return null;
+    if (step.conditions && !context.evaluateConditions(step.conditions)) {
+        if (currentStep < steps.length - 1) setCurrentStep(currentStep + 1);
+        return null;
+    }
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "space-y-6",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                                className: "text-2xl font-semibold",
+                                children: step.title
+                            }),
+                            step.description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                className: "text-muted-foreground mt-1",
+                                children: step.description
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "text-sm text-muted-foreground",
+                        children: [
+                            "Step ",
+                            currentStep + 1,
+                            " of ",
+                            steps.length
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "space-y-2",
+                children: step.sections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
+                        section: section,
+                        context: context,
+                        customComponents: customComponents,
+                        disabled: disabled
+                    }, section.id))
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex justify-between pt-6",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                        type: "button",
+                        onClick: ()=>setCurrentStep(Math.max(0, currentStep - 1)),
+                        disabled: 0 === currentStep,
+                        variant: "secondary",
+                        children: "Previous"
+                    }),
+                    currentStep < steps.length - 1 ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                        type: "button",
+                        onClick: ()=>setCurrentStep(currentStep + 1),
+                        variant: "default",
+                        children: "Next"
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                        type: "submit",
+                        variant: "default",
+                        children: "Submit"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function FormSection({ section, context, customComponents, disabled }) {
+    const gridColumns = context.schema.layout?.columns || 1;
+    const gap = context.schema.layout?.gap || 4;
+    const fieldsGrid = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "grid",
+        style: {
+            gridTemplateColumns: `repeat(${gridColumns}, minmax(0, 1fr))`,
+            gap: `${0.25 * gap}rem`
+        },
+        children: section.fields.map((field)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_field_renderer_cjs_namespaceObject.FormFieldRenderer, {
+                field: field,
+                context: context,
+                customComponents: customComponents,
+                disabled: disabled
+            }, field.name))
+    });
+    if (!section.title) return fieldsGrid;
+    const innerContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex flex-col gap-4",
+        children: [
+            section.description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                className: "text-sm text-muted-foreground",
+                children: section.description
+            }),
+            fieldsGrid
+        ]
+    });
+    if (section.collapsible) {
+        const defaultValue = false !== section.defaultExpanded ? [
+            section.id
+        ] : [];
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.Accordion, {
+            type: "multiple",
+            defaultValue: defaultValue,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(accordion_cjs_namespaceObject.AccordionItem, {
+                value: section.id,
+                className: "border rounded-lg px-3",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.AccordionTrigger, {
+                        className: "text-sm font-medium",
+                        children: section.title
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.AccordionContent, {
+                        children: innerContent
+                    })
+                ]
+            })
+        });
+    }
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "border rounded-lg px-3",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "flex flex-1 items-center justify-between py-4 text-sm font-medium",
+                    children: section.title
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "text-sm",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "pb-4 pt-0",
+                    children: innerContent
+                })
+            })
+        ]
+    });
+}
+function FormActions({ schema, context, onReset }) {
+    const actions = schema.actions || [
+        {
+            id: 'submit',
+            type: 'submit',
+            label: 'Submit',
+            variant: 'default'
+        }
+    ];
+    if (0 === actions.length) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "flex gap-2 pt-6",
+        children: actions.map((action)=>{
+            if (action.conditions && !context.evaluateConditions(action.conditions)) return null;
+            if ('reset' === action.type) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                type: "button",
+                onClick: onReset,
+                variant: action.variant || 'secondary',
+                disabled: action.disabled,
+                children: action.label
+            }, action.id);
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                type: 'submit' === action.type ? 'submit' : 'button',
+                variant: action.variant || 'default',
+                disabled: action.disabled || 'submit' === action.type && context.isSubmitting,
+                children: action.loading && context.isSubmitting ? 'Loading...' : action.label
+            }, action.id);
+        })
+    });
+}
+function buildZodSchema(schema) {
+    const shape = {};
+    const fields = schema.steps ? schema.steps.flatMap((step)=>step.sections.flatMap((s)=>s.fields)) : schema.sections?.flatMap((s)=>s.fields) || [];
+    const dynamicValidationFields = [];
+    fields.forEach((field)=>{
+        const hasUnconditionalRequired = field.rules?.some((rule)=>true === rule.effects.required && 0 === rule.conditions.length);
+        const hasConditionalRequired = field.rules?.some((rule)=>true === rule.effects.required && rule.conditions.length > 0);
+        const hasVisibilityRules = field.rules?.some((rule)=>void 0 !== rule.effects.visible);
+        const hasStaticRequired = field.validation?.required === true;
+        const hasAnyRequired = hasStaticRequired || hasUnconditionalRequired || hasConditionalRequired;
+        if (field.rules && (hasConditionalRequired || hasAnyRequired && hasVisibilityRules)) dynamicValidationFields.push({
+            name: field.name,
+            rules: field.rules,
+            staticRequired: hasStaticRequired || hasUnconditionalRequired || false,
+            customRequiredMessage: field.validation?.messages?.required
+        });
+        const shouldIncludeRequiredInBase = (hasUnconditionalRequired || hasStaticRequired) && !hasVisibilityRules;
+        const validationConfig = field.validation ? {
+            ...field.validation,
+            required: shouldIncludeRequiredInBase
+        } : shouldIncludeRequiredInBase ? {
+            required: true
+        } : void 0;
+        shape[field.name] = (0, external_validation_converter_cjs_namespaceObject.validationConfigToZod)(validationConfig, field.type);
+    });
+    const baseSchema = v4_namespaceObject.z.object(shape);
+    if (0 === dynamicValidationFields.length) return baseSchema;
+    return baseSchema.superRefine((data, ctx)=>{
+        const values = data;
+        for (const { name, rules, staticRequired, customRequiredMessage } of dynamicValidationFields){
+            const isVisible = external_rules_engine_cjs_namespaceObject.RulesEngine.isFieldVisible(rules, values);
+            if (!isVisible) continue;
+            const ruleResult = external_rules_engine_cjs_namespaceObject.RulesEngine.applyRules(rules, values, {});
+            const isRequired = true === ruleResult.required || staticRequired;
+            if (isRequired) {
+                const value = values[name];
+                const isEmpty = null == value || '' === value || Array.isArray(value) && 0 === value.length;
+                if (isEmpty) ctx.addIssue({
+                    code: v4_namespaceObject.z.ZodIssueCode.custom,
+                    message: customRequiredMessage || 'This field is required',
+                    path: [
+                        name
+                    ]
+                });
+            }
+        }
+    });
+}
+async function loadInitialData(initialData, _context) {
+    if (!initialData) return {};
+    return initialData;
+}
+exports.MetadataForm = __webpack_exports__.MetadataForm;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "MetadataForm"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/forms/metadata-form.d.ts

@@ -0,0 +1,16 @@
+import type { FormPlugin, FormSchema } from './form-schema';
+/**
+ * Core MetadataForm Component
+ * Renders forms from JSON/object schema with full RHF integration
+ */
+interface MetadataFormProps {
+    schema: FormSchema;
+    plugins?: FormPlugin[];
+    onSubmit?: (data: unknown) => void | Promise<void>;
+    className?: string;
+    disabled?: boolean;
+    /** Disable browser autocomplete suggestions. Defaults to undefined (browser default). */
+    autoComplete?: 'off' | 'on';
+}
+export declare function MetadataForm({ schema, plugins, onSubmit, className, disabled, autoComplete, }: MetadataFormProps): import("react/jsx-runtime").JSX.Element;
+export {};