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

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

@@ -0,0 +1,357 @@
+"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__, {
+    PropertiesSimple: ()=>PropertiesSimple
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const accordion_cjs_namespaceObject = require("../ui/accordion.cjs");
+const input_cjs_namespaceObject = require("../ui/input.cjs");
+const select_cjs_namespaceObject = require("../ui/select.cjs");
+const typography_cjs_namespaceObject = require("../../foundation/Future/typography.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function FieldItem({ field, onGraphControl }) {
+    const [value, setValue] = external_react_namespaceObject.useState(field.value ?? '');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex flex-col gap-1 pt-4",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                        className: "text-sm font-medium leading-5 text-foreground-muted",
+                        children: [
+                            field.label,
+                            field.required && '*'
+                        ]
+                    }),
+                    field.showGraphControl && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Settings2, {
+                            className: "h-4 w-4"
+                        })
+                    })
+                ]
+            }),
+            'select' === field.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.Select, {
+                value: value || void 0,
+                onValueChange: setValue,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectTrigger, {
+                        className: (0, index_cjs_namespaceObject.cn)('h-10 rounded-xl border-0 shadow-sm', value ? 'bg-surface-hover text-foreground' : 'bg-surface-overlay text-foreground-muted'),
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectValue, {
+                            placeholder: field.placeholder ?? 'Select...'
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectContent, {
+                        className: "border-border bg-surface-overlay text-foreground",
+                        children: (field.options ?? []).map((opt)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
+                                value: opt.value,
+                                className: "focus:bg-surface-hover focus:text-foreground",
+                                children: opt.label
+                            }, opt.value))
+                    })
+                ]
+            }) : 'url' === field.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex h-10 items-center overflow-hidden rounded-xl bg-surface-overlay shadow-sm",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Folder, {
+                            className: "h-5 w-5"
+                        })
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                value: value,
+                onChange: (e)=>setValue(e.target.value),
+                placeholder: field.placeholder,
+                className: (0, index_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex h-full w-full flex-col rounded-2xl border border-border bg-surface-raised",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center justify-between px-6 py-4",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "text-base font-semibold leading-5 tracking-[-0.4px] text-foreground",
+                        children: "JSON editor"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
+                            className: "h-5 w-5"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center gap-2 px-6 pb-4",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorToolbarButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Undo2, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Undo"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorToolbarButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Redo2, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Redo"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorToolbarButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Variable, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Variables"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorToolbarButton, {
+                        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Copy, {
+                            className: "h-5 w-5"
+                        }),
+                        label: "Copy"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex flex-1 flex-col overflow-hidden px-6 pb-4",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "flex flex-1 flex-col overflow-hidden rounded-xl border border-border-subtle bg-surface shadow-sm",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: "flex items-center justify-between px-3 py-2.5",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "flex items-center gap-2 text-foreground-muted",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FileJson, {
+                                            className: "h-4 w-4"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            className: "text-sm font-medium leading-none",
+                                            children: "script.js"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.RefreshCw, {
+                                        className: "h-4 w-4"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: "flex flex-1 gap-6 overflow-auto px-3 py-3 text-sm leading-6",
+                            style: {
+                                fontFamily: typography_cjs_namespaceObject.fontFamily.monospace
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: "flex flex-col text-right text-foreground-subtle select-none",
+                                    children: sampleJsonLines.map((_, i)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            children: i + 1
+                                        }, i))
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: "flex flex-col whitespace-pre text-foreground-muted",
+                                    children: sampleJsonLines.map((line, i)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            children: line
+                                        }, i))
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center justify-end gap-2 px-6 py-4",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            children: "Cancel"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            children: "Save"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function PropertiesSimple({ className, icon, title = 'HTTP Request', fields = [], sections = [], onClose, onGraphControl }) {
+    const [editorOpen, setEditorOpen] = external_react_namespaceObject.useState(false);
+    const handleGraphControl = (fieldLabel)=>{
+        onGraphControl?.(fieldLabel);
+        setEditorOpen(true);
+    };
+    const defaultExpandedKeys = sections.filter((s)=>s.defaultExpanded).map((s)=>s.label);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "relative h-full w-[360px] shrink-0",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: (0, index_cjs_namespaceObject.cn)('flex h-full w-full flex-col overflow-hidden rounded-2xl border border-border bg-surface-raised', className),
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-center justify-between border-b border-border px-4 py-4",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "flex items-center gap-4",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "flex h-10 w-10 items-center justify-center rounded-xl bg-brand-subtle",
+                                        children: icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Webhook, {
+                                            className: "h-6 w-6 text-brand-foreground"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "text-base font-semibold leading-5 tracking-[-0.4px] text-foreground",
+                                        children: title
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
+                                    className: "h-5 w-5"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex flex-1 flex-col overflow-y-auto",
+                        children: [
+                            fields.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "flex flex-col px-6 pb-2",
+                                children: fields.map((field)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FieldItem, {
+                                        field: field,
+                                        onGraphControl: handleGraphControl
+                                    }, field.label))
+                            }),
+                            sections.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.Accordion, {
+                                type: "multiple",
+                                defaultValue: defaultExpandedKeys,
+                                className: "px-6",
+                                children: sections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(accordion_cjs_namespaceObject.AccordionItem, {
+                                        value: section.label,
+                                        className: "border-b border-border-subtle",
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.AccordionTrigger, {
+                                                className: "py-4 hover:no-underline [&>svg]:text-foreground-muted",
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                    className: "text-xs font-medium uppercase leading-6 tracking-wide text-foreground-muted",
+                                                    children: section.label
+                                                })
+                                            }),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.AccordionContent, {
+                                                className: "pb-2 pt-0",
+                                                children: section.fields && section.fields.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                    className: "flex flex-col",
+                                                    children: section.fields.map((field)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FieldItem, {
+                                                            field: field,
+                                                            onGraphControl: handleGraphControl
+                                                        }, field.label))
+                                                })
+                                            })
+                                        ]
+                                    }, section.label))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            editorOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "absolute inset-y-0 right-0 z-20 w-[480px]",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(JsonEditorDrawer, {
+                    open: editorOpen,
+                    onClose: ()=>setEditorOpen(false)
+                })
+            })
+        ]
+    });
+}
+exports.PropertiesSimple = __webpack_exports__.PropertiesSimple;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "PropertiesSimple"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,62 @@
+import * as React from 'react';
+export interface PropertiesSimpleFieldOption {
+    /** Option value */
+    value: string;
+    /** Display label */
+    label: string;
+}
+export interface PropertiesSimpleField {
+    /** Field label */
+    label: string;
+    /** Whether field is required (shows asterisk) */
+    required?: boolean;
+    /** Current value displayed in the field */
+    value?: string;
+    /** Placeholder when no value is set */
+    placeholder?: string;
+    /** Whether the field has a value (uses filled styling) */
+    filled?: boolean;
+    /** Field type */
+    type?: 'select' | 'input' | 'url';
+    /** Options for select fields */
+    options?: PropertiesSimpleFieldOption[];
+    /** Show the "Graph control" icon */
+    showGraphControl?: boolean;
+}
+export interface PropertiesSimpleSection {
+    /** Section label (displayed uppercase) */
+    label: string;
+    /** Whether the section starts expanded */
+    defaultExpanded?: boolean;
+    /** Fields inside the section */
+    fields?: PropertiesSimpleField[];
+}
+export interface PropertiesSimpleProps {
+    className?: string;
+    /** Icon to show in the header (defaults to Webhook) */
+    icon?: React.ReactNode;
+    /** Title shown in the header */
+    title?: string;
+    /** Top-level fields (above accordion sections) */
+    fields?: PropertiesSimpleField[];
+    /** Collapsible accordion sections */
+    sections?: PropertiesSimpleSection[];
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Callback when Graph control is clicked on a field */
+    onGraphControl?: (fieldLabel: string) => void;
+}
+/**
+ * Simple properties panel for the Flow template.
+ *
+ * A compact right-side panel that shows node configuration fields
+ * and collapsible accordion sections. Based on the "Properties 1"
+ * Figma component.
+ *
+ * Features:
+ * - Header with node icon, title, and close button
+ * - Real shadcn Select, Input components for interactive fields
+ * - Shadcn Accordion for collapsible sections
+ * - "Graph control" icon opens a JSON editor drawer
+ */
+export declare function PropertiesSimple({ className, icon, title, fields, sections, onClose, onGraphControl, }: PropertiesSimpleProps): import("react/jsx-runtime").JSX.Element;