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

package/dist/components/forms/field-renderer.js

@@ -0,0 +1,561 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { hasOptions, isCustomField } from "./form-schema.js";
+import { RulesEngine } from "./rules-engine.js";
+import { DataFetcher } from "./data-fetcher.js";
+import { Input } from "../ui/input.js";
+import { Textarea } from "../ui/textarea.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
+import { MultiSelect } from "../ui/multi-select.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Switch } from "../ui/switch.js";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group.js";
+import { Slider } from "../ui/slider.js";
+import { Label } from "../ui/label.js";
+import { DatePicker } from "../ui/date-picker.js";
+import { DateTimePicker } from "../ui/datetime-picker.js";
+import { FileUpload } from "../ui/file-upload.js";
+import { cn, deepEqual } from "../../lib/index.js";
+function FormFieldRenderer({ field, context, customComponents, disabled: formDisabled = false }) {
+    const { control, watch, getValues } = useFormContext();
+    const contextRef = useRef(context);
+    contextRef.current = context;
+    const getInitialVisibility = ()=>{
+        if (!field.rules || 0 === field.rules.length) return true;
+        const hasShowRule = field.rules.some((rule)=>rule.effects?.visible === true);
+        const hasHideRule = field.rules.some((rule)=>rule.effects?.visible === false);
+        if (!hasShowRule && !hasHideRule) return true;
+        const allValues = getValues();
+        const ruleResult = RulesEngine.applyRules(field.rules, allValues, context);
+        if (void 0 !== ruleResult.visible) return ruleResult.visible;
+        return !hasShowRule;
+    };
+    const getInitialRequired = ()=>{
+        const staticRequired = field.validation?.required ?? false;
+        if (!field.rules || 0 === field.rules.length) return staticRequired;
+        const allValues = getValues();
+        const ruleResult = RulesEngine.applyRules(field.rules, allValues, context);
+        return ruleResult.required ?? staticRequired;
+    };
+    const [fieldState, setFieldState] = useState({
+        visible: getInitialVisibility(),
+        disabled: false,
+        required: getInitialRequired(),
+        options: hasOptions(field) ? field.options || [] : []
+    });
+    const dependentFields = useMemo(()=>{
+        if (!field.rules || 0 === field.rules.length) return [];
+        const fields = new Set();
+        field.rules.forEach((rule)=>{
+            rule.conditions?.forEach((condition)=>{
+                if ('when' in condition && condition.when) fields.add(condition.when);
+            });
+        });
+        return Array.from(fields);
+    }, [
+        field.rules
+    ]);
+    const dataSourceDependentFields = useMemo(()=>{
+        if (!field.dataSource) return [];
+        const fields = new Set();
+        if ('params' in field.dataSource && field.dataSource.params) Object.values(field.dataSource.params).forEach((value)=>{
+            if ('string' == typeof value && value.startsWith('$')) fields.add(value.slice(1));
+        });
+        if ('computed' === field.dataSource.type && 'dependency' in field.dataSource) field.dataSource.dependency.forEach((dep)=>fields.add(dep));
+        return Array.from(fields);
+    }, [
+        field.dataSource
+    ]);
+    const watchedDataSourceValues = watch(dataSourceDependentFields);
+    const watchedRuleDependentValues = watch(dependentFields);
+    useEffect(()=>{
+        if (!field.rules || 0 === field.rules.length) return;
+        const allValues = getValues();
+        const ruleResult = RulesEngine.applyRules(field.rules, allValues, contextRef.current);
+        const hasShowRule = field.rules.some((rule)=>rule.effects?.visible === true);
+        const hasHideRule = field.rules.some((rule)=>rule.effects?.visible === false);
+        const hasRequiredRule = field.rules.some((rule)=>rule.effects?.required !== void 0);
+        const hasDisabledRule = field.rules.some((rule)=>rule.effects?.disabled !== void 0);
+        const newState = {};
+        if (void 0 !== ruleResult.visible) newState.visible = ruleResult.visible;
+        else if (hasShowRule || hasHideRule) newState.visible = !hasShowRule;
+        if (void 0 !== ruleResult.required) newState.required = ruleResult.required;
+        else if (hasRequiredRule) {
+            const hasUnconditionalRequired = field.rules.some((rule)=>rule.effects?.required === true && 0 === rule.conditions.length);
+            newState.required = hasUnconditionalRequired || (field.validation?.required ?? false);
+        }
+        if (void 0 !== ruleResult.disabled) newState.disabled = ruleResult.disabled;
+        else if (hasDisabledRule) newState.disabled = false;
+        setFieldState((prev)=>{
+            const nextState = {
+                ...prev,
+                ...newState
+            };
+            if (deepEqual(prev, nextState)) return prev;
+            return nextState;
+        });
+    }, [
+        field.rules,
+        field.validation?.required,
+        getValues,
+        watchedRuleDependentValues
+    ]);
+    useEffect(()=>{
+        if (field.dataSource) return;
+        if (!hasOptions(field)) return;
+        const inlineOptions = field.options || [];
+        setFieldState((prev)=>{
+            if (deepEqual(prev.options, inlineOptions)) return prev;
+            return {
+                ...prev,
+                options: inlineOptions
+            };
+        });
+    }, [
+        field
+    ]);
+    useEffect(()=>{
+        if (!field.dataSource) return;
+        const fetchOptions = async ()=>{
+            try {
+                const allValues = getValues();
+                const data = await DataFetcher.fetch(field.dataSource, allValues);
+                setFieldState((prev)=>{
+                    if (deepEqual(prev.options, data)) return prev;
+                    return {
+                        ...prev,
+                        options: data
+                    };
+                });
+            } catch (error) {
+                console.error(`Failed to fetch options for ${field.name}:`, error);
+            }
+        };
+        fetchOptions();
+    }, [
+        field.dataSource,
+        field.name,
+        getValues,
+        watchedDataSourceValues
+    ]);
+    if (!fieldState.visible) return null;
+    const gridSpan = field.grid?.span || 1;
+    const gridStyle = {
+        gridColumn: `span ${gridSpan}`
+    };
+    if (isCustomField(field) && customComponents[field.component]) {
+        const CustomComponent = customComponents[field.component];
+        return /*#__PURE__*/ jsx("div", {
+            style: gridStyle,
+            children: /*#__PURE__*/ jsx(Controller, {
+                name: field.name,
+                control: control,
+                defaultValue: field.defaultValue,
+                render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ jsx(CustomComponent, {
+                        ...formField,
+                        ...field.componentProps,
+                        field: field,
+                        disabled: formDisabled || fieldState.disabled,
+                        required: fieldState.required,
+                        error: error?.message
+                    })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx("div", {
+        style: gridStyle,
+        children: /*#__PURE__*/ jsx(Controller, {
+            name: field.name,
+            control: control,
+            defaultValue: field.defaultValue,
+            render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ jsx(FieldByType, {
+                    field: field,
+                    formField: formField,
+                    error: error?.message,
+                    disabled: formDisabled || fieldState.disabled,
+                    required: fieldState.required,
+                    options: fieldState.options
+                })
+        })
+    });
+}
+function FieldByType({ field, formField, error, disabled, required, options }) {
+    switch(field.type){
+        case 'text':
+        case 'email':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormLabel, {
+                        required: required,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ jsx(Input, {
+                        value: formField.value,
+                        onChange: (e)=>formField.onChange(e.target.value),
+                        onBlur: formField.onBlur,
+                        name: formField.name,
+                        ref: formField.ref,
+                        type: field.type,
+                        placeholder: field.placeholder,
+                        disabled: disabled,
+                        "aria-label": field.ariaLabel
+                    }),
+                    /*#__PURE__*/ jsx(FormDescription, {
+                        children: field.description
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        case 'number':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormLabel, {
+                        required: required,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ jsx(Input, {
+                        value: formField.value,
+                        onBlur: formField.onBlur,
+                        name: formField.name,
+                        ref: formField.ref,
+                        type: "number",
+                        min: field.min,
+                        max: field.max,
+                        step: field.step,
+                        placeholder: field.placeholder,
+                        disabled: disabled,
+                        onChange: (e)=>formField.onChange(parseFloat(e.target.value))
+                    }),
+                    /*#__PURE__*/ jsx(FormDescription, {
+                        children: field.description
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        case 'textarea':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormLabel, {
+                        required: required,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ jsx(Textarea, {
+                        value: formField.value,
+                        onChange: (e)=>formField.onChange(e.target.value),
+                        onBlur: formField.onBlur,
+                        name: formField.name,
+                        ref: formField.ref,
+                        placeholder: field.placeholder,
+                        disabled: disabled,
+                        rows: field.rows || 4
+                    }),
+                    /*#__PURE__*/ jsx(FormDescription, {
+                        children: field.description
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        case 'select':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormLabel, {
+                        required: required,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ jsxs(Select, {
+                        value: formField.value,
+                        onValueChange: formField.onChange,
+                        disabled: disabled,
+                        children: [
+                            /*#__PURE__*/ jsx(SelectTrigger, {
+                                children: /*#__PURE__*/ jsx(SelectValue, {
+                                    placeholder: field.placeholder || 'Select...'
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(SelectContent, {
+                                children: options.map((option)=>/*#__PURE__*/ jsx(SelectItem, {
+                                        value: String(option.value),
+                                        disabled: 'disabled' in option ? Boolean(option.disabled) : false,
+                                        children: option.label
+                                    }, String(option.value)))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(FormDescription, {
+                        children: field.description
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        case 'multiselect':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormLabel, {
+                        required: required,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ jsx(MultiSelect, {
+                        selected: formField.value || [],
+                        onChange: formField.onChange,
+                        options: options.map((opt)=>({
+                                label: opt.label,
+                                value: String(opt.value)
+                            })),
+                        disabled: disabled,
+                        placeholder: field.placeholder || 'Select items...',
+                        emptyMessage: "No items found.",
+                        searchPlaceholder: "Search...",
+                        maxSelected: field.maxSelected
+                    }),
+                    /*#__PURE__*/ jsx(FormDescription, {
+                        children: field.description
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        case 'checkbox':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-start space-x-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Checkbox, {
+                                checked: true === formField.value,
+                                onCheckedChange: (checked)=>formField.onChange(true === checked),
+                                disabled: disabled,
+                                id: field.name
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "space-y-1 leading-none",
+                                children: [
+                                    /*#__PURE__*/ jsx(FormLabel, {
+                                        htmlFor: field.name,
+                                        className: "font-normal",
+                                        children: field.label
+                                    }),
+                                    /*#__PURE__*/ jsx(FormDescription, {
+                                        children: field.description
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        case 'switch':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center justify-between",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "space-y-0.5",
+                                children: [
+                                    /*#__PURE__*/ jsx(FormLabel, {
+                                        children: field.label
+                                    }),
+                                    /*#__PURE__*/ jsx(FormDescription, {
+                                        children: field.description
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Switch, {
+                                checked: true === formField.value,
+                                onCheckedChange: (checked)=>formField.onChange(true === checked),
+                                disabled: disabled
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        case 'radio':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormLabel, {
+                        required: required,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ jsx(RadioGroup, {
+                        value: formField.value,
+                        onValueChange: formField.onChange,
+                        disabled: disabled,
+                        children: options.map((option)=>/*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center space-x-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(RadioGroupItem, {
+                                        value: String(option.value),
+                                        id: `${field.name}-${option.value}`,
+                                        disabled: 'disabled' in option ? Boolean(option.disabled) : false
+                                    }),
+                                    /*#__PURE__*/ jsx(Label, {
+                                        htmlFor: `${field.name}-${option.value}`,
+                                        children: option.label
+                                    })
+                                ]
+                            }, String(option.value)))
+                    }),
+                    /*#__PURE__*/ jsx(FormDescription, {
+                        children: field.description
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        case 'slider':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex justify-between",
+                        children: [
+                            /*#__PURE__*/ jsx(FormLabel, {
+                                required: required,
+                                children: field.label
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-sm text-muted-foreground",
+                                children: formField.value
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Slider, {
+                        value: [
+                            formField.value
+                        ],
+                        onValueChange: (values)=>formField.onChange(values[0]),
+                        min: field.min || 0,
+                        max: field.max || 100,
+                        step: field.step || 1,
+                        disabled: disabled
+                    }),
+                    /*#__PURE__*/ jsx(FormDescription, {
+                        children: field.description
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        case 'date':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormLabel, {
+                        required: required,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ jsx(DatePicker, {
+                        value: formField.value,
+                        onValueChange: formField.onChange,
+                        disabled: disabled,
+                        placeholder: field.placeholder
+                    }),
+                    /*#__PURE__*/ jsx(FormDescription, {
+                        children: field.description
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        case 'datetime':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormLabel, {
+                        required: required,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ jsx(DateTimePicker, {
+                        value: formField.value,
+                        onValueChange: formField.onChange,
+                        disabled: disabled,
+                        placeholder: field.placeholder,
+                        use12Hour: field.use12Hour
+                    }),
+                    /*#__PURE__*/ jsx(FormDescription, {
+                        children: field.description
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        case 'file':
+            return /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormLabel, {
+                        required: required,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ jsx(FileUpload, {
+                        accept: field.accept,
+                        multiple: field.multiple,
+                        disabled: disabled,
+                        maxSize: field.maxSize,
+                        showPreview: field.showPreview,
+                        onFilesChange: (files)=>{
+                            formField.onChange(field.multiple ? files : files[0]);
+                        }
+                    }),
+                    /*#__PURE__*/ jsx(FormDescription, {
+                        children: field.description
+                    }),
+                    /*#__PURE__*/ jsx(FormError, {
+                        children: error
+                    })
+                ]
+            });
+        default:
+            return null;
+    }
+}
+function FormField({ children, className = '' }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('space-y-2', className),
+        children: children
+    });
+}
+function FormLabel({ children, required, htmlFor, className = '' }) {
+    return /*#__PURE__*/ jsxs(Label, {
+        htmlFor: htmlFor,
+        className: className,
+        children: [
+            children,
+            required && /*#__PURE__*/ jsx("span", {
+                className: "text-destructive ml-1",
+                children: "*"
+            })
+        ]
+    });
+}
+function FormDescription({ children }) {
+    if (!children) return null;
+    return /*#__PURE__*/ jsx("p", {
+        className: "text-sm text-muted-foreground",
+        children: children
+    });
+}
+function FormError({ children }) {
+    if (!children) return null;
+    return /*#__PURE__*/ jsx("p", {
+        className: "text-sm text-destructive",
+        children: children
+    });
+}
+export { FormFieldRenderer };