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

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

@@ -0,0 +1,366 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion.js";
+import { Button } from "../ui/button.js";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { DataFetcher } from "./data-fetcher.js";
+import { FormFieldRenderer } from "./field-renderer.js";
+import { RulesEngine } from "./rules-engine.js";
+import { validationConfigToZod } from "./validation-converter.js";
+const DEFAULT_PLUGINS = [];
+function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete }) {
+    const [currentStep, setCurrentStep] = useState(0);
+    const [customComponents, setCustomComponents] = useState({});
+    const [isInitialized, setIsInitialized] = useState(false);
+    const zodSchema = useMemo(()=>buildZodSchema(schema), [
+        schema
+    ]);
+    const form = useForm({
+        resolver: standardSchemaResolver(zodSchema),
+        mode: schema.mode || 'onSubmit',
+        reValidateMode: schema.reValidateMode || 'onChange'
+    });
+    const { watch, handleSubmit, reset } = form;
+    const valuesRef = useRef({});
+    const watchedValues = watch();
+    valuesRef.current = watchedValues;
+    const context = 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)=>RulesEngine.evaluateConditions(conditions, valuesRef.current, 'AND'),
+            fetchData: async (source)=>{
+                const result = await DataFetcher.fetch(source, valuesRef.current);
+                return result;
+            },
+            registerCustomComponent: (name, component)=>{
+                setCustomComponents((prev)=>({
+                        ...prev,
+                        [name]: component
+                    }));
+            }
+        }), [
+        schema,
+        form,
+        currentStep
+    ]);
+    const contextRef = useRef(context);
+    contextRef.current = context;
+    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
+    ]);
+    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__*/ jsx(MultiStepForm, {
+            schema: schema,
+            context: context,
+            currentStep: currentStep,
+            setCurrentStep: setCurrentStep,
+            customComponents: customComponents,
+            disabled: disabled
+        });
+        return /*#__PURE__*/ jsx(SinglePageForm, {
+            schema: schema,
+            context: context,
+            customComponents: customComponents,
+            disabled: disabled
+        });
+    };
+    return /*#__PURE__*/ jsx(FormProvider, {
+        ...form,
+        children: /*#__PURE__*/ jsxs("form", {
+            onSubmit: handleFormSubmit,
+            className: className,
+            autoComplete: autoComplete,
+            children: [
+                renderContent(),
+                !schema.steps && /*#__PURE__*/ 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__*/ jsx("div", {
+        className: "space-y-2",
+        children: visibleSections.map((section)=>/*#__PURE__*/ 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__*/ jsxs("div", {
+        className: "space-y-6",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ jsx("h2", {
+                                className: "text-2xl font-semibold",
+                                children: step.title
+                            }),
+                            step.description && /*#__PURE__*/ jsx("p", {
+                                className: "text-muted-foreground mt-1",
+                                children: step.description
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "text-sm text-muted-foreground",
+                        children: [
+                            "Step ",
+                            currentStep + 1,
+                            " of ",
+                            steps.length
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "space-y-2",
+                children: step.sections.map((section)=>/*#__PURE__*/ jsx(FormSection, {
+                        section: section,
+                        context: context,
+                        customComponents: customComponents,
+                        disabled: disabled
+                    }, section.id))
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex justify-between pt-6",
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        type: "button",
+                        onClick: ()=>setCurrentStep(Math.max(0, currentStep - 1)),
+                        disabled: 0 === currentStep,
+                        variant: "secondary",
+                        children: "Previous"
+                    }),
+                    currentStep < steps.length - 1 ? /*#__PURE__*/ jsx(Button, {
+                        type: "button",
+                        onClick: ()=>setCurrentStep(currentStep + 1),
+                        variant: "default",
+                        children: "Next"
+                    }) : /*#__PURE__*/ jsx(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__*/ jsx("div", {
+        className: "grid",
+        style: {
+            gridTemplateColumns: `repeat(${gridColumns}, minmax(0, 1fr))`,
+            gap: `${0.25 * gap}rem`
+        },
+        children: section.fields.map((field)=>/*#__PURE__*/ jsx(FormFieldRenderer, {
+                field: field,
+                context: context,
+                customComponents: customComponents,
+                disabled: disabled
+            }, field.name))
+    });
+    if (!section.title) return fieldsGrid;
+    const innerContent = /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-4",
+        children: [
+            section.description && /*#__PURE__*/ jsx("p", {
+                className: "text-sm text-muted-foreground",
+                children: section.description
+            }),
+            fieldsGrid
+        ]
+    });
+    if (section.collapsible) {
+        const defaultValue = false !== section.defaultExpanded ? [
+            section.id
+        ] : [];
+        return /*#__PURE__*/ jsx(Accordion, {
+            type: "multiple",
+            defaultValue: defaultValue,
+            children: /*#__PURE__*/ jsxs(AccordionItem, {
+                value: section.id,
+                className: "border rounded-lg px-3",
+                children: [
+                    /*#__PURE__*/ jsx(AccordionTrigger, {
+                        className: "text-sm font-medium",
+                        children: section.title
+                    }),
+                    /*#__PURE__*/ jsx(AccordionContent, {
+                        children: innerContent
+                    })
+                ]
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: "border rounded-lg px-3",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "flex flex-1 items-center justify-between py-4 text-sm font-medium",
+                    children: section.title
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "text-sm",
+                children: /*#__PURE__*/ 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__*/ 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__*/ jsx(Button, {
+                type: "button",
+                onClick: onReset,
+                variant: action.variant || 'secondary',
+                disabled: action.disabled,
+                children: action.label
+            }, action.id);
+            return /*#__PURE__*/ jsx(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] = validationConfigToZod(validationConfig, field.type);
+    });
+    const baseSchema = 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 = RulesEngine.isFieldVisible(rules, values);
+            if (!isVisible) continue;
+            const ruleResult = 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: z.ZodIssueCode.custom,
+                    message: customRequiredMessage || 'This field is required',
+                    path: [
+                        name
+                    ]
+                });
+            }
+        }
+    });
+}
+async function loadInitialData(initialData, _context) {
+    if (!initialData) return {};
+    return initialData;
+}
+export { MetadataForm };