@uipath/apollo-wind 0.8.0 → 0.9.0

package/dist/examples/flow-start-example.cjs

@@ -0,0 +1,467 @@
+"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__, {
+    FlowStartExample: ()=>FlowStartExample
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const badge_cjs_namespaceObject = require("../components/ui/badge.cjs");
+const button_cjs_namespaceObject = require("../components/ui/button.cjs");
+const button_group_cjs_namespaceObject = require("../components/ui/button-group.cjs");
+const card_cjs_namespaceObject = require("../components/ui/card.cjs");
+const data_table_cjs_namespaceObject = require("../components/ui/data-table.cjs");
+const dropdown_menu_cjs_namespaceObject = require("../components/ui/dropdown-menu.cjs");
+const skeleton_cjs_namespaceObject = require("../components/ui/skeleton.cjs");
+const index_cjs_namespaceObject = require("../components/ui/layout/index.cjs");
+const external_lib_index_cjs_namespaceObject = require("../lib/index.cjs");
+function ProcessOptionCard({ option, isSelected, onSelect }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.Card, {
+        className: (0, external_lib_index_cjs_namespaceObject.cn)('group relative cursor-pointer transition-all duration-200 hover:border-primary/50 hover:shadow-md', isSelected && 'border-primary ring-2 ring-primary/20'),
+        onClick: onSelect,
+        children: [
+            option.badge && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
+                variant: option.badgeVariant,
+                className: "absolute -top-2 right-4 text-[10px] px-2 py-0.5",
+                children: option.badge
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardHeader, {
+                className: "pb-3",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Row, {
+                    gap: 3,
+                    align: "center",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary",
+                        children: option.icon
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(card_cjs_namespaceObject.CardContent, {
+                className: "pt-0",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardTitle, {
+                        className: "text-base mb-2",
+                        children: option.title
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardDescription, {
+                        className: "text-sm leading-relaxed",
+                        children: option.description
+                    })
+                ]
+            })
+        ]
+    });
+}
+function getTypeIcon(type) {
+    switch(type){
+        case 'flow':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.GitBranch, {
+                className: "h-4 w-4"
+            });
+        case 'bpmn':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Blocks, {
+                className: "h-4 w-4"
+            });
+        case 'case':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FolderKanban, {
+                className: "h-4 w-4"
+            });
+        case 'autopilot':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Bot, {
+                className: "h-4 w-4"
+            });
+    }
+}
+function getTypeLabel(type) {
+    switch(type){
+        case 'flow':
+            return 'Flow';
+        case 'bpmn':
+            return 'BPMN';
+        case 'case':
+            return 'Case Management';
+        case 'autopilot':
+            return 'Autopilot';
+    }
+}
+function getStatusVariant(status) {
+    switch(status){
+        case 'published':
+            return 'default';
+        case 'draft':
+            return 'secondary';
+        case 'archived':
+            return 'outline';
+        default:
+            return 'secondary';
+    }
+}
+function RecentProjectCard({ project, onSelect }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.Card, {
+        className: "group cursor-pointer transition-all duration-200 hover:border-primary/50 hover:shadow-sm",
+        onClick: onSelect,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(card_cjs_namespaceObject.CardContent, {
+            className: "p-4",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                gap: 3,
+                align: "start",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground",
+                        children: getTypeIcon(project.type)
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+                        gap: 1,
+                        flex: 1,
+                        className: "min-w-0",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                                justify: "between",
+                                align: "center",
+                                gap: 2,
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "truncate font-medium text-sm",
+                                        children: project.name
+                                    }),
+                                    project.status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
+                                        variant: getStatusVariant(project.status),
+                                        className: "shrink-0 text-[10px]",
+                                        children: project.status
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "text-xs text-muted-foreground",
+                                children: project.lastModified
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+}
+function SkeletonSection() {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+        gap: 4,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(skeleton_cjs_namespaceObject.Skeleton, {
+                className: "h-5 w-32"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+                gap: 3,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Row, {
+                        gap: 2,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(skeleton_cjs_namespaceObject.Skeleton, {
+                            className: "h-4 flex-1 max-w-[280px]"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Row, {
+                        gap: 2,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(skeleton_cjs_namespaceObject.Skeleton, {
+                            className: "h-4 flex-1 max-w-[240px]"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Row, {
+                        gap: 2,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(skeleton_cjs_namespaceObject.Skeleton, {
+                            className: "h-4 flex-1 max-w-[320px]"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Row, {
+                        gap: 2,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(skeleton_cjs_namespaceObject.Skeleton, {
+                            className: "h-4 flex-1 max-w-[200px]"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Row, {
+                        gap: 2,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(skeleton_cjs_namespaceObject.Skeleton, {
+                            className: "h-4 flex-1 max-w-[260px]"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function createProjectColumns(onProjectSelect) {
+    return [
+        {
+            accessorKey: 'name',
+            header: ({ column })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(data_table_cjs_namespaceObject.DataTableColumnHeader, {
+                    column: column,
+                    title: "Name"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                    gap: 2,
+                    align: "center",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground",
+                            children: getTypeIcon(row.original.type)
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "font-medium",
+                            children: row.original.name
+                        })
+                    ]
+                })
+        },
+        {
+            accessorKey: 'type',
+            header: ({ column })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(data_table_cjs_namespaceObject.DataTableColumnHeader, {
+                    column: column,
+                    title: "Type"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "text-muted-foreground",
+                    children: getTypeLabel(row.original.type)
+                })
+        },
+        {
+            accessorKey: 'status',
+            header: ({ column })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(data_table_cjs_namespaceObject.DataTableColumnHeader, {
+                    column: column,
+                    title: "Status"
+                }),
+            cell: ({ row })=>{
+                const status = row.original.status;
+                return status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
+                    variant: getStatusVariant(status),
+                    className: "capitalize",
+                    children: status
+                }) : null;
+            }
+        },
+        {
+            accessorKey: 'lastModified',
+            header: ({ column })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(data_table_cjs_namespaceObject.DataTableColumnHeader, {
+                    column: column,
+                    title: "Last Modified"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "text-muted-foreground",
+                    children: row.original.lastModified
+                })
+        },
+        {
+            id: 'actions',
+            cell: ({ row })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(dropdown_menu_cjs_namespaceObject.DropdownMenu, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                variant: "ghost",
+                                size: "icon",
+                                className: "h-8 w-8",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.MoreHorizontal, {
+                                    className: "h-4 w-4"
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
+                            align: "end",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                                    onClick: ()=>onProjectSelect?.(row.original.id),
+                                    children: "Open"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                                    children: "Duplicate"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                                    children: "Archive"
+                                })
+                            ]
+                        })
+                    ]
+                })
+        }
+    ];
+}
+function FlowStartExample({ className, title = 'BUILD YOUR FIRST AGENTIC PROCESS', subtitle = 'What would you like to start with?', processOptions = [], recentProjects = [], showSkeleton = false, defaultViewMode = 'cards', onOptionSelect, onProjectSelect }) {
+    const [selectedOption, setSelectedOption] = external_react_namespaceObject.useState(null);
+    const [viewMode, setViewMode] = external_react_namespaceObject.useState(defaultViewMode);
+    const handleOptionSelect = (optionId)=>{
+        setSelectedOption(optionId);
+        onOptionSelect?.(optionId);
+    };
+    const columns = external_react_namespaceObject.useMemo(()=>createProjectColumns(onProjectSelect), [
+        onProjectSelect
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+        minH: "screen",
+        className: className,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "bg-muted/40",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("header", {
+                        className: "border-b border-border/50 ",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                            justify: "between",
+                            align: "center",
+                            className: "h-14 px-6",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    className: "font-semibold text-lg",
+                                    children: "UiPath Maestro"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(skeleton_cjs_namespaceObject.Skeleton, {
+                                    className: "h-8 w-8 rounded-full"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+                        className: "px-8 py-16 md:px-16",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+                                gap: 3,
+                                align: "center",
+                                className: "mb-12 text-center",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h1", {
+                                        className: "text-3xl md:text-4xl font-bold tracking-tight uppercase",
+                                        children: title
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                        className: "text-muted-foreground text-lg",
+                                        children: subtitle
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Grid, {
+                                cols: 1,
+                                gap: 4,
+                                className: "sm:grid-cols-2 lg:grid-cols-4 max-w-6xl mx-auto w-full",
+                                children: processOptions.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessOptionCard, {
+                                        option: option,
+                                        isSelected: selectedOption === option.id,
+                                        onSelect: ()=>handleOptionSelect(option.id)
+                                    }, option.id))
+                            }),
+                            showSkeleton && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
+                                gap: 12,
+                                className: "max-w-6xl mx-auto w-full mt-16",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Grid, {
+                                    cols: 1,
+                                    gap: 8,
+                                    className: "lg:grid-cols-3",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SkeletonSection, {}),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SkeletonSection, {}),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SkeletonSection, {})
+                                    ]
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            recentProjects.length > 0 && !showSkeleton && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
+                flex: 1,
+                className: "px-8 py-12 md:px-16",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
+                    gap: 6,
+                    className: "max-w-6xl mx-auto w-full",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
+                            justify: "between",
+                            align: "center",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                                    className: "text-xl font-semibold",
+                                    children: "Recent Projects"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(button_group_cjs_namespaceObject.ButtonGroup, {
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                            variant: 'cards' === viewMode ? 'secondary' : 'outline',
+                                            size: "icon",
+                                            onClick: ()=>setViewMode('cards'),
+                                            "aria-label": "Card view",
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.LayoutGrid, {
+                                                className: "h-4 w-4"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
+                                            variant: 'table' === viewMode ? 'secondary' : 'outline',
+                                            size: "icon",
+                                            onClick: ()=>setViewMode('table'),
+                                            "aria-label": "Table view",
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.List, {
+                                                className: "h-4 w-4"
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        'cards' === viewMode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Grid, {
+                            cols: 1,
+                            gap: 4,
+                            className: "sm:grid-cols-2 lg:grid-cols-4",
+                            children: recentProjects.map((project)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(RecentProjectCard, {
+                                    project: project,
+                                    onSelect: ()=>onProjectSelect?.(project.id)
+                                }, project.id))
+                        }),
+                        'table' === viewMode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(data_table_cjs_namespaceObject.DataTable, {
+                            columns: columns,
+                            data: recentProjects,
+                            searchKey: "name",
+                            searchPlaceholder: "Search projects...",
+                            showColumnToggle: false,
+                            showPagination: recentProjects.length > 10,
+                            compact: true
+                        })
+                    ]
+                })
+            }),
+            showSkeleton && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "bg-background border-t flex-1",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Row, {
+                    justify: "center",
+                    className: "px-8 py-8",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(skeleton_cjs_namespaceObject.Skeleton, {
+                        className: "h-24 w-full max-w-4xl rounded-lg"
+                    })
+                })
+            })
+        ]
+    });
+}
+exports.FlowStartExample = __webpack_exports__.FlowStartExample;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FlowStartExample"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});