@uipath/apollo-wind 0.8.0 → 0.9.0

package/dist/examples/admin-layout-example.js

@@ -0,0 +1,411 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { cn } from "../lib/index.js";
+import { Bell, ChevronsLeft, ChevronsRight, HelpCircle, Plus, Search } from "lucide-react";
+import { Button } from "../components/ui/button.js";
+import { ScrollArea } from "../components/ui/scroll-area.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select.js";
+import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../components/ui/breadcrumb.js";
+import { DataTable, DataTableColumnHeader, DataTableSelectColumn } from "../components/ui/data-table.js";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "../components/ui/pagination.js";
+import { Column, Row } from "../components/ui/layout/index.js";
+function AdminLayout({ className, children, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('flex h-[700px] w-full flex-col overflow-hidden rounded-lg border bg-background', className),
+        ...props,
+        children: children
+    });
+}
+function AdminHeader({ className, logo, title, children, ...props }) {
+    return /*#__PURE__*/ jsxs("header", {
+        className: cn('flex h-14 items-center justify-between border-b bg-background px-4', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs(Row, {
+                gap: 3,
+                align: "center",
+                children: [
+                    logo,
+                    title && /*#__PURE__*/ jsx("span", {
+                        className: "text-lg font-semibold",
+                        children: title
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Row, {
+                gap: 2,
+                align: "center",
+                children: children
+            })
+        ]
+    });
+}
+function AdminHeaderActions({ notifications, avatar }) {
+    return /*#__PURE__*/ jsxs(Row, {
+        gap: 1,
+        align: "center",
+        children: [
+            /*#__PURE__*/ jsxs(Button, {
+                variant: "ghost",
+                size: "icon",
+                className: "relative",
+                children: [
+                    /*#__PURE__*/ jsx(Bell, {
+                        className: "h-5 w-5"
+                    }),
+                    notifications && notifications > 0 && /*#__PURE__*/ jsx("span", {
+                        className: "absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-destructive text-[10px] text-destructive-foreground",
+                        children: notifications
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                variant: "ghost",
+                size: "icon",
+                children: /*#__PURE__*/ jsx(HelpCircle, {
+                    className: "h-5 w-5"
+                })
+            }),
+            avatar || /*#__PURE__*/ jsx("div", {
+                className: "ml-2 flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground",
+                children: "SN"
+            })
+        ]
+    });
+}
+function AdminContent({ className, children, ...props }) {
+    return /*#__PURE__*/ jsx(Row, {
+        flex: 1,
+        overflow: "hidden",
+        className: className,
+        ...props,
+        children: children
+    });
+}
+function AdminSidebar({ className, children, width = 280, ...props }) {
+    return /*#__PURE__*/ jsx(Column, {
+        className: cn('border-r bg-muted/30', className),
+        style: {
+            width
+        },
+        ...props,
+        children: children
+    });
+}
+function AdminSidebarHeader({ title, onSearch, onAdd }) {
+    return /*#__PURE__*/ jsxs(Row, {
+        justify: "between",
+        align: "center",
+        className: "border-b px-4 py-3",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "text-sm font-medium",
+                children: title
+            }),
+            /*#__PURE__*/ jsxs(Row, {
+                gap: 1,
+                align: "center",
+                children: [
+                    onSearch && /*#__PURE__*/ jsx(Button, {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-7 w-7",
+                        onClick: onSearch,
+                        children: /*#__PURE__*/ jsx(Search, {
+                            className: "h-4 w-4"
+                        })
+                    }),
+                    onAdd && /*#__PURE__*/ jsx(Button, {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-7 w-7",
+                        onClick: onAdd,
+                        children: /*#__PURE__*/ jsx(Plus, {
+                            className: "h-4 w-4"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function AdminSidebarNav({ items, selectedId, onSelect }) {
+    return /*#__PURE__*/ jsx(ScrollArea, {
+        className: "flex-1",
+        children: /*#__PURE__*/ jsx("nav", {
+            className: "p-2",
+            children: items.map((item)=>/*#__PURE__*/ jsxs(Row, {
+                    gap: 2,
+                    align: "center",
+                    className: cn('cursor-pointer rounded-md px-3 py-2 text-sm transition-colors', selectedId === item.id ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted hover:text-foreground'),
+                    onClick: ()=>onSelect?.(item.id),
+                    children: [
+                        item.icon,
+                        /*#__PURE__*/ jsx("span", {
+                            className: "flex-1 truncate",
+                            children: item.label
+                        }),
+                        item.badge
+                    ]
+                }, item.id))
+        })
+    });
+}
+function AdminMain({ className, children, ...props }) {
+    return /*#__PURE__*/ jsx(Column, {
+        flex: 1,
+        overflow: "hidden",
+        className: className,
+        ...props,
+        children: children
+    });
+}
+function AdminBreadcrumb({ items }) {
+    return /*#__PURE__*/ jsx(Breadcrumb, {
+        children: /*#__PURE__*/ jsx(BreadcrumbList, {
+            children: items.map((item, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        index > 0 && /*#__PURE__*/ jsx(BreadcrumbSeparator, {}),
+                        /*#__PURE__*/ jsx(BreadcrumbItem, {
+                            children: index === items.length - 1 ? /*#__PURE__*/ jsx(BreadcrumbPage, {
+                                children: item.label
+                            }) : /*#__PURE__*/ jsx(BreadcrumbLink, {
+                                href: item.href || '#',
+                                children: item.label
+                            })
+                        })
+                    ]
+                }, item.label))
+        })
+    });
+}
+function AdminPageHeader({ title, breadcrumb, actions, tabs, activeTab, onTabChange }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "border-b px-6 py-4",
+        children: [
+            breadcrumb && /*#__PURE__*/ jsx("div", {
+                className: "mb-2",
+                children: /*#__PURE__*/ jsx(AdminBreadcrumb, {
+                    items: breadcrumb
+                })
+            }),
+            /*#__PURE__*/ jsxs(Row, {
+                justify: "between",
+                align: "center",
+                children: [
+                    /*#__PURE__*/ jsx("h1", {
+                        className: "text-xl font-semibold",
+                        children: title
+                    }),
+                    actions && /*#__PURE__*/ jsx(Row, {
+                        gap: 2,
+                        align: "center",
+                        children: actions
+                    })
+                ]
+            }),
+            tabs && /*#__PURE__*/ jsx(Tabs, {
+                value: activeTab,
+                onValueChange: onTabChange,
+                className: "mt-4",
+                children: /*#__PURE__*/ jsx(TabsList, {
+                    className: "h-auto bg-transparent p-0",
+                    children: tabs.map((tab)=>/*#__PURE__*/ jsx(TabsTrigger, {
+                            value: tab.value,
+                            className: "rounded-none border-b-2 border-transparent px-4 pb-2 pt-1 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none",
+                            children: tab.label
+                        }, tab.value))
+                })
+            })
+        ]
+    });
+}
+function AdminToolbar({ children, actions }) {
+    return /*#__PURE__*/ jsxs(Row, {
+        justify: "between",
+        align: "center",
+        className: "border-b px-6 py-3",
+        children: [
+            /*#__PURE__*/ jsx(Row, {
+                gap: 3,
+                align: "center",
+                children: children
+            }),
+            /*#__PURE__*/ jsx(Row, {
+                gap: 2,
+                align: "center",
+                children: actions
+            })
+        ]
+    });
+}
+function AdminFilter({ label, value, options, onValueChange }) {
+    return /*#__PURE__*/ jsxs(Row, {
+        gap: 1.5,
+        align: "center",
+        className: "text-sm",
+        children: [
+            /*#__PURE__*/ jsxs("span", {
+                className: "text-muted-foreground",
+                children: [
+                    label,
+                    ":"
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Select, {
+                value: value,
+                onValueChange: onValueChange,
+                children: [
+                    /*#__PURE__*/ jsx(SelectTrigger, {
+                        className: "h-7 w-auto gap-1 border-0 bg-transparent px-1 font-medium shadow-none",
+                        children: /*#__PURE__*/ jsx(SelectValue, {})
+                    }),
+                    /*#__PURE__*/ jsx(SelectContent, {
+                        children: options.map((option)=>/*#__PURE__*/ jsx(SelectItem, {
+                                value: option.value,
+                                children: option.label
+                            }, option.value))
+                    })
+                ]
+            })
+        ]
+    });
+}
+function AdminPagination({ total, page, pageSize, onPageChange, onPageSizeChange }) {
+    const totalPages = Math.ceil(total / pageSize);
+    const start = (page - 1) * pageSize + 1;
+    const end = Math.min(page * pageSize, total);
+    const getPageNumbers = ()=>{
+        const pages = [];
+        const delta = 1;
+        for(let i = 1; i <= totalPages; i++)if (1 === i || i === totalPages || i >= page - delta && i <= page + delta) pages.push(i);
+        return pages;
+    };
+    const pageNumbers = getPageNumbers();
+    return /*#__PURE__*/ jsxs(Row, {
+        justify: "between",
+        align: "center",
+        className: "border-t px-6 py-3",
+        children: [
+            /*#__PURE__*/ jsxs("span", {
+                className: "text-sm text-muted-foreground",
+                children: [
+                    start,
+                    " - ",
+                    end,
+                    " / ",
+                    total
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Row, {
+                gap: 4,
+                align: "center",
+                children: [
+                    /*#__PURE__*/ jsx(Pagination, {
+                        children: /*#__PURE__*/ jsxs(PaginationContent, {
+                            children: [
+                                /*#__PURE__*/ jsx(PaginationItem, {
+                                    children: /*#__PURE__*/ jsx(Button, {
+                                        variant: "ghost",
+                                        size: "icon",
+                                        className: "h-8 w-8",
+                                        disabled: 1 === page,
+                                        onClick: ()=>onPageChange?.(1),
+                                        children: /*#__PURE__*/ jsx(ChevronsLeft, {
+                                            className: "h-4 w-4"
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(PaginationItem, {
+                                    children: /*#__PURE__*/ jsx(PaginationPrevious, {
+                                        onClick: ()=>page > 1 && onPageChange?.(page - 1),
+                                        className: cn(1 === page && 'pointer-events-none opacity-50')
+                                    })
+                                }),
+                                pageNumbers.map((pageNum, index)=>{
+                                    const prevPage = pageNumbers[index - 1];
+                                    const showEllipsis = prevPage && pageNum - prevPage > 1;
+                                    return /*#__PURE__*/ jsxs(Fragment, {
+                                        children: [
+                                            showEllipsis && /*#__PURE__*/ jsx(PaginationItem, {
+                                                children: /*#__PURE__*/ jsx(PaginationEllipsis, {})
+                                            }),
+                                            /*#__PURE__*/ jsx(PaginationItem, {
+                                                children: /*#__PURE__*/ jsx(PaginationLink, {
+                                                    onClick: ()=>onPageChange?.(pageNum),
+                                                    isActive: page === pageNum,
+                                                    children: pageNum
+                                                })
+                                            })
+                                        ]
+                                    }, pageNum);
+                                }),
+                                /*#__PURE__*/ jsx(PaginationItem, {
+                                    children: /*#__PURE__*/ jsx(PaginationNext, {
+                                        onClick: ()=>page < totalPages && onPageChange?.(page + 1),
+                                        className: cn(page === totalPages && 'pointer-events-none opacity-50')
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(PaginationItem, {
+                                    children: /*#__PURE__*/ jsx(Button, {
+                                        variant: "ghost",
+                                        size: "icon",
+                                        className: "h-8 w-8",
+                                        disabled: page === totalPages,
+                                        onClick: ()=>onPageChange?.(totalPages),
+                                        children: /*#__PURE__*/ jsx(ChevronsRight, {
+                                            className: "h-4 w-4"
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    onPageSizeChange && /*#__PURE__*/ jsxs(Row, {
+                        gap: 2,
+                        align: "center",
+                        className: "text-sm",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-muted-foreground",
+                                children: "Items"
+                            }),
+                            /*#__PURE__*/ jsxs(Select, {
+                                value: String(pageSize),
+                                onValueChange: (v)=>onPageSizeChange(Number(v)),
+                                children: [
+                                    /*#__PURE__*/ jsx(SelectTrigger, {
+                                        className: "h-8 w-16",
+                                        children: /*#__PURE__*/ jsx(SelectValue, {})
+                                    }),
+                                    /*#__PURE__*/ jsxs(SelectContent, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(SelectItem, {
+                                                value: "10",
+                                                children: "10"
+                                            }),
+                                            /*#__PURE__*/ jsx(SelectItem, {
+                                                value: "25",
+                                                children: "25"
+                                            }),
+                                            /*#__PURE__*/ jsx(SelectItem, {
+                                                value: "50",
+                                                children: "50"
+                                            }),
+                                            /*#__PURE__*/ jsx(SelectItem, {
+                                                value: "100",
+                                                children: "100"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { AdminBreadcrumb, AdminContent, AdminFilter, AdminHeader, AdminHeaderActions, AdminLayout, AdminMain, AdminPageHeader, AdminPagination, AdminSidebar, AdminSidebarHeader, AdminSidebarNav, DataTable as AdminTable, AdminToolbar, DataTableColumnHeader, DataTableSelectColumn };