@uipath/apollo-wind 0.9.1 → 0.10.0-pr219.61d64eb

package/dist/components/custom/flow-properties-simple.js

@@ -0,0 +1,323 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Copy, FileJson, Folder, Redo2, RefreshCw, Settings2, Undo2, Variable, Webhook, X } from "lucide-react";
+import { useState } from "react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion.js";
+import { Input } from "../ui/input.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
+import { fontFamily } from "../../foundation/Future/typography.js";
+import { cn } from "../../lib/index.js";
+function FieldItem({ field, onGraphControl }) {
+    const [value, setValue] = useState(field.value ?? '');
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-1 pt-4",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ jsxs("span", {
+                        className: "text-sm font-medium leading-5 text-foreground-muted",
+                        children: [
+                            field.label,
+                            field.required && '*'
+                        ]
+                    }),
+                    field.showGraphControl && /*#__PURE__*/ jsx("button", {
+                        className: "flex h-6 w-6 items-center justify-center rounded-lg bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground",
+                        onClick: ()=>onGraphControl?.(field.label),
+                        "aria-label": "Graph control",
+                        children: /*#__PURE__*/ jsx(Settings2, {
+                            className: "h-4 w-4"
+                        })
+                    })
+                ]
+            }),
+            'select' === field.type ? /*#__PURE__*/ jsxs(Select, {
+                value: value || void 0,
+                onValueChange: setValue,
+                children: [
+                    /*#__PURE__*/ jsx(SelectTrigger, {
+                        className: cn('h-10 rounded-xl border-0 shadow-sm', value ? 'bg-surface-hover text-foreground' : 'bg-surface-overlay text-foreground-muted'),
+                        children: /*#__PURE__*/ jsx(SelectValue, {
+                            placeholder: field.placeholder ?? 'Select...'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(SelectContent, {
+                        className: "border-border bg-surface-overlay text-foreground",
+                        children: (field.options ?? []).map((opt)=>/*#__PURE__*/ jsx(SelectItem, {
+                                value: opt.value,
+                                className: "focus:bg-surface-hover focus:text-foreground",
+                                children: opt.label
+                            }, opt.value))
+                    })
+                ]
+            }) : 'url' === field.type ? /*#__PURE__*/ jsxs("div", {
+                className: "flex h-10 items-center overflow-hidden rounded-xl bg-surface-overlay shadow-sm",
+                children: [
+                    /*#__PURE__*/ jsx(Input, {
+                        value: value,
+                        onChange: (e)=>setValue(e.target.value),
+                        placeholder: field.placeholder,
+                        className: "h-full flex-1 rounded-none border-0 bg-transparent text-sm font-medium text-foreground-muted shadow-none placeholder:text-foreground-subtle focus-visible:ring-0"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "flex h-full w-[50px] items-center justify-center border-l border-border text-foreground-muted transition-colors hover:text-foreground",
+                        "aria-label": "Browse files",
+                        children: /*#__PURE__*/ jsx(Folder, {
+                            className: "h-5 w-5"
+                        })
+                    })
+                ]
+            }) : /*#__PURE__*/ jsx(Input, {
+                value: value,
+                onChange: (e)=>setValue(e.target.value),
+                placeholder: field.placeholder,
+                className: cn('h-10 rounded-xl border-0 text-sm font-medium shadow-sm', value ? 'bg-surface-hover text-foreground' : 'bg-surface-overlay text-foreground-muted placeholder:text-foreground-subtle')
+            })
+        ]
+    });
+}
+const sampleJsonLines = [
+    '{',
+    '  "extracted": {',
+    '    "vendor": "Acme Corp",',
+    '    "amount": 1250,',
+    '    "date": "2024-01-15",',
+    '    "items": [',
+    '      {',
+    '        "description": "Professional',
+    '  Services",',
+    '        "amount": 1250',
+    '      }',
+    '    ]',
+    '  },',
+    '  "invoiceId": "INV-2024-001",',
+    '  "timestamp": "2026-01-28T19:51:41.085Z"',
+    '}'
+];
+function EditorToolbarButton({ icon, label }) {
+    return /*#__PURE__*/ jsx("button", {
+        className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground",
+        "aria-label": label,
+        children: icon
+    });
+}
+function JsonEditorDrawer({ open, onClose }) {
+    if (!open) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex h-full w-full flex-col rounded-2xl border border-border bg-surface-raised",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between px-6 py-4",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text-base font-semibold leading-5 tracking-[-0.4px] text-foreground",
+                        children: "JSON editor"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: "flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground",
+                        onClick: onClose,
+                        "aria-label": "Close editor",
+                        children: /*#__PURE__*/ jsx(X, {
+                            className: "h-5 w-5"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-2 px-6 pb-4",
+                children: [
+                    /*#__PURE__*/ jsx(EditorToolbarButton, {
+                        icon: /*#__PURE__*/ jsx(Undo2, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Undo"
+                    }),
+                    /*#__PURE__*/ jsx(EditorToolbarButton, {
+                        icon: /*#__PURE__*/ jsx(Redo2, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Redo"
+                    }),
+                    /*#__PURE__*/ jsx(EditorToolbarButton, {
+                        icon: /*#__PURE__*/ jsx(Variable, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Variables"
+                    }),
+                    /*#__PURE__*/ jsx(EditorToolbarButton, {
+                        icon: /*#__PURE__*/ jsx(Copy, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Copy"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex flex-1 flex-col overflow-hidden px-6 pb-4",
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "flex flex-1 flex-col overflow-hidden rounded-xl border border-border-subtle bg-surface shadow-sm",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex items-center justify-between px-3 py-2.5",
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex items-center gap-2 text-foreground-muted",
+                                    children: [
+                                        /*#__PURE__*/ jsx(FileJson, {
+                                            className: "h-4 w-4"
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "text-sm font-medium leading-none",
+                                            children: "script.js"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("button", {
+                                    className: "flex h-5 w-5 items-center justify-center text-foreground-muted transition-colors hover:text-foreground",
+                                    "aria-label": "Refresh",
+                                    children: /*#__PURE__*/ jsx(RefreshCw, {
+                                        className: "h-4 w-4"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex flex-1 gap-6 overflow-auto px-3 py-3 text-sm leading-6",
+                            style: {
+                                fontFamily: fontFamily.monospace
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "flex flex-col text-right text-foreground-subtle select-none",
+                                    children: sampleJsonLines.map((_, i)=>/*#__PURE__*/ jsx("span", {
+                                            children: i + 1
+                                        }, i))
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "flex flex-col whitespace-pre text-foreground-muted",
+                                    children: sampleJsonLines.map((line, i)=>/*#__PURE__*/ jsx("span", {
+                                            children: line
+                                        }, i))
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-end gap-2 px-6 py-4",
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        className: "flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground",
+                        onClick: onClose,
+                        children: /*#__PURE__*/ jsx("span", {
+                            children: "Cancel"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: "flex h-10 items-center gap-2 rounded-xl bg-brand px-4 py-2 text-sm font-semibold leading-5 text-foreground-inverse transition-colors hover:bg-brand/90",
+                        onClick: onClose,
+                        children: /*#__PURE__*/ jsx("span", {
+                            children: "Save"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function PropertiesSimple({ className, icon, title = 'HTTP Request', fields = [], sections = [], onClose, onGraphControl }) {
+    const [editorOpen, setEditorOpen] = useState(false);
+    const handleGraphControl = (fieldLabel)=>{
+        onGraphControl?.(fieldLabel);
+        setEditorOpen(true);
+    };
+    const defaultExpandedKeys = sections.filter((s)=>s.defaultExpanded).map((s)=>s.label);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "relative h-full w-[360px] shrink-0",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: cn('flex h-full w-full flex-col overflow-hidden rounded-2xl border border-border bg-surface-raised', className),
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center justify-between border-b border-border px-4 py-4",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center gap-4",
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "flex h-10 w-10 items-center justify-center rounded-xl bg-brand-subtle",
+                                        children: icon ?? /*#__PURE__*/ jsx(Webhook, {
+                                            className: "h-6 w-6 text-brand-foreground"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "text-base font-semibold leading-5 tracking-[-0.4px] text-foreground",
+                                        children: title
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                className: "flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground",
+                                onClick: onClose,
+                                "aria-label": "Close properties",
+                                children: /*#__PURE__*/ jsx(X, {
+                                    className: "h-5 w-5"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-1 flex-col overflow-y-auto",
+                        children: [
+                            fields.length > 0 && /*#__PURE__*/ jsx("div", {
+                                className: "flex flex-col px-6 pb-2",
+                                children: fields.map((field)=>/*#__PURE__*/ jsx(FieldItem, {
+                                        field: field,
+                                        onGraphControl: handleGraphControl
+                                    }, field.label))
+                            }),
+                            sections.length > 0 && /*#__PURE__*/ jsx(Accordion, {
+                                type: "multiple",
+                                defaultValue: defaultExpandedKeys,
+                                className: "px-6",
+                                children: sections.map((section)=>/*#__PURE__*/ jsxs(AccordionItem, {
+                                        value: section.label,
+                                        className: "border-b border-border-subtle",
+                                        children: [
+                                            /*#__PURE__*/ jsx(AccordionTrigger, {
+                                                className: "py-4 hover:no-underline [&>svg]:text-foreground-muted",
+                                                children: /*#__PURE__*/ jsx("span", {
+                                                    className: "text-xs font-medium uppercase leading-6 tracking-wide text-foreground-muted",
+                                                    children: section.label
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(AccordionContent, {
+                                                className: "pb-2 pt-0",
+                                                children: section.fields && section.fields.length > 0 && /*#__PURE__*/ jsx("div", {
+                                                    className: "flex flex-col",
+                                                    children: section.fields.map((field)=>/*#__PURE__*/ jsx(FieldItem, {
+                                                            field: field,
+                                                            onGraphControl: handleGraphControl
+                                                        }, field.label))
+                                                })
+                                            })
+                                        ]
+                                    }, section.label))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            editorOpen && /*#__PURE__*/ jsx("div", {
+                className: "absolute inset-y-0 right-0 z-20 w-[480px]",
+                children: /*#__PURE__*/ jsx(JsonEditorDrawer, {
+                    open: editorOpen,
+                    onClose: ()=>setEditorOpen(false)
+                })
+            })
+        ]
+    });
+}
+export { PropertiesSimple };

package/dist/components/custom/flow-properties.cjs

@@ -0,0 +1,56 @@
+"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__, {
+    FlowProperties: ()=>FlowProperties
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_flow_properties_bar_cjs_namespaceObject = require("./flow-properties-bar.cjs");
+const external_flow_properties_expanded_cjs_namespaceObject = require("./flow-properties-expanded.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function FlowProperties({ className, expanded = false, flowName = 'Invoice processing', flowType = 'Workflow', nodeName = 'Validate invoice', nodeType = 'AI Agent', activeTab = 'properties', onTabChange, onExpand, onClose }) {
+    if (expanded) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_flow_properties_expanded_cjs_namespaceObject.PropertiesExpanded, {
+        className: (0, index_cjs_namespaceObject.cn)(className),
+        nodeName: nodeName,
+        nodeType: nodeType,
+        activeTab: activeTab,
+        onClose: onClose
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_flow_properties_bar_cjs_namespaceObject.PropertiesBar, {
+        className: className,
+        flowName: flowName,
+        flowType: flowType,
+        activeTab: activeTab,
+        onTabChange: onTabChange,
+        onExpand: onExpand
+    });
+}
+exports.FlowProperties = __webpack_exports__.FlowProperties;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FlowProperties"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/flow-properties.d.ts

@@ -0,0 +1,28 @@
+export interface FlowPropertiesProps {
+    className?: string;
+    /** When false, renders the collapsed bar; when true, renders the expanded panel */
+    expanded?: boolean;
+    /** Flow name (collapsed bar) */
+    flowName?: string;
+    /** Flow type label, e.g. "Workflow" (collapsed bar) */
+    flowType?: string;
+    /** Node name (expanded panel header) */
+    nodeName?: string;
+    /** Node type label, e.g. "AI Agent" (expanded panel header) */
+    nodeType?: string;
+    /** Active tab: 'properties' | 'variables' */
+    activeTab?: 'properties' | 'variables';
+    /** Callback when tab changes */
+    onTabChange?: (tab: 'properties' | 'variables') => void;
+    /** Callback when user expands (e.g. clicks Properties in the bar) */
+    onExpand?: () => void;
+    /** Callback when user closes the expanded panel */
+    onClose?: () => void;
+}
+/**
+ * Flow properties UI in one of two states: collapsed (bar on canvas) or expanded (full panel).
+ *
+ * Use `expanded` to switch. Collapsed shows flow name/type and Properties/Variables tabs;
+ * expanded shows the full node properties panel with header, toolbar, code, and input/output.
+ */
+export declare function FlowProperties({ className, expanded, flowName, flowType, nodeName, nodeType, activeTab, onTabChange, onExpand, onClose, }: FlowPropertiesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/flow-properties.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { PropertiesBar } from "./flow-properties-bar.js";
+import { PropertiesExpanded } from "./flow-properties-expanded.js";
+import { cn } from "../../lib/index.js";
+function FlowProperties({ className, expanded = false, flowName = 'Invoice processing', flowType = 'Workflow', nodeName = 'Validate invoice', nodeType = 'AI Agent', activeTab = 'properties', onTabChange, onExpand, onClose }) {
+    if (expanded) return /*#__PURE__*/ jsx(PropertiesExpanded, {
+        className: cn(className),
+        nodeName: nodeName,
+        nodeType: nodeType,
+        activeTab: activeTab,
+        onClose: onClose
+    });
+    return /*#__PURE__*/ jsx(PropertiesBar, {
+        className: className,
+        flowName: flowName,
+        flowType: flowType,
+        activeTab: activeTab,
+        onTabChange: onTabChange,
+        onExpand: onExpand
+    });
+}
+export { FlowProperties };