@uipath/apollo-wind 0.8.0 → 0.9.0

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

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