@uipath/apollo-wind 0.8.1 → 0.9.1

package/dist/examples/data-management-example.js

@@ -0,0 +1,550 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Download, Filter, MoreHorizontal, Plus, RefreshCw, Upload } from "lucide-react";
+import { Badge } from "../components/ui/badge.js";
+import { Button } from "../components/ui/button.js";
+import { DataTable, DataTableColumnHeader, DataTableSelectColumn } from "../components/ui/data-table.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../components/ui/dialog.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../components/ui/dropdown-menu.js";
+import { Input } from "../components/ui/input.js";
+import { Label } from "../components/ui/label.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select.js";
+import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs.js";
+import { Column, Grid, Row } from "../components/ui/layout/index.js";
+const products = [
+    {
+        id: '1',
+        name: 'Wireless Headphones',
+        sku: 'WH-001',
+        category: 'Electronics',
+        price: 99.99,
+        stock: 150,
+        status: 'active',
+        createdAt: '2024-01-10'
+    },
+    {
+        id: '2',
+        name: 'USB-C Cable',
+        sku: 'UC-002',
+        category: 'Accessories',
+        price: 12.99,
+        stock: 500,
+        status: 'active',
+        createdAt: '2024-01-09'
+    },
+    {
+        id: '3',
+        name: 'Laptop Stand',
+        sku: 'LS-003',
+        category: 'Accessories',
+        price: 49.99,
+        stock: 75,
+        status: 'active',
+        createdAt: '2024-01-08'
+    },
+    {
+        id: '4',
+        name: 'Mechanical Keyboard',
+        sku: 'MK-004',
+        category: 'Electronics',
+        price: 149.99,
+        stock: 0,
+        status: 'draft',
+        createdAt: '2024-01-07'
+    },
+    {
+        id: '5',
+        name: 'Monitor Light Bar',
+        sku: 'ML-005',
+        category: 'Electronics',
+        price: 59.99,
+        stock: 200,
+        status: 'active',
+        createdAt: '2024-01-06'
+    },
+    {
+        id: '6',
+        name: 'Webcam HD',
+        sku: 'WC-006',
+        category: 'Electronics',
+        price: 79.99,
+        stock: 45,
+        status: 'active',
+        createdAt: '2024-01-05'
+    },
+    {
+        id: '7',
+        name: 'Mouse Pad XL',
+        sku: 'MP-007',
+        category: 'Accessories',
+        price: 24.99,
+        stock: 300,
+        status: 'active',
+        createdAt: '2024-01-04'
+    },
+    {
+        id: '8',
+        name: 'Phone Holder',
+        sku: 'PH-008',
+        category: 'Accessories',
+        price: 19.99,
+        stock: 0,
+        status: 'archived',
+        createdAt: '2024-01-03'
+    },
+    {
+        id: '9',
+        name: 'Bluetooth Speaker',
+        sku: 'BS-009',
+        category: 'Electronics',
+        price: 39.99,
+        stock: 120,
+        status: 'active',
+        createdAt: '2024-01-02'
+    },
+    {
+        id: '10',
+        name: 'Screen Protector',
+        sku: 'SP-010',
+        category: 'Accessories',
+        price: 9.99,
+        stock: 1000,
+        status: 'active',
+        createdAt: '2024-01-01'
+    }
+];
+const columns = [
+    DataTableSelectColumn(),
+    {
+        accessorKey: 'name',
+        header: ({ column })=>/*#__PURE__*/ jsx(DataTableColumnHeader, {
+                column: column,
+                title: "Product"
+            }),
+        cell: ({ row })=>/*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "font-medium",
+                        children: row.original.name
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "text-xs text-muted-foreground",
+                        children: row.original.sku
+                    })
+                ]
+            })
+    },
+    {
+        accessorKey: 'category',
+        header: ({ column })=>/*#__PURE__*/ jsx(DataTableColumnHeader, {
+                column: column,
+                title: "Category"
+            })
+    },
+    {
+        accessorKey: 'price',
+        header: ({ column })=>/*#__PURE__*/ jsx(DataTableColumnHeader, {
+                column: column,
+                title: "Price"
+            }),
+        cell: ({ row })=>{
+            const price = parseFloat(row.getValue('price'));
+            return new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD'
+            }).format(price);
+        }
+    },
+    {
+        accessorKey: 'stock',
+        header: ({ column })=>/*#__PURE__*/ jsx(DataTableColumnHeader, {
+                column: column,
+                title: "Stock"
+            }),
+        cell: ({ row })=>{
+            const stock = row.getValue('stock');
+            return /*#__PURE__*/ jsx("span", {
+                className: 0 === stock ? 'text-destructive font-medium' : '',
+                children: 0 === stock ? 'Out of stock' : stock
+            });
+        }
+    },
+    {
+        accessorKey: 'status',
+        header: ({ column })=>/*#__PURE__*/ jsx(DataTableColumnHeader, {
+                column: column,
+                title: "Status"
+            }),
+        cell: ({ row })=>{
+            const status = row.getValue('status');
+            return /*#__PURE__*/ jsx(Badge, {
+                variant: 'active' === status ? 'default' : 'draft' === status ? 'secondary' : 'outline',
+                children: status
+            });
+        }
+    },
+    {
+        accessorKey: 'createdAt',
+        header: ({ column })=>/*#__PURE__*/ jsx(DataTableColumnHeader, {
+                column: column,
+                title: "Created"
+            })
+    },
+    {
+        id: 'actions',
+        cell: ()=>/*#__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, {
+                                children: "Edit"
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuItem, {
+                                children: "Duplicate"
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                            /*#__PURE__*/ jsx(DropdownMenuItem, {
+                                className: "text-destructive",
+                                children: "Delete"
+                            })
+                        ]
+                    })
+                ]
+            })
+    }
+];
+function DataManagementExample() {
+    const [activeTab, setActiveTab] = useState('all');
+    const [categoryFilter, setCategoryFilter] = useState('all');
+    const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+    const filteredProducts = useMemo(()=>{
+        let filtered = products;
+        if ('all' !== activeTab) filtered = filtered.filter((p)=>p.status === activeTab);
+        if ('all' !== categoryFilter) filtered = filtered.filter((p)=>p.category === categoryFilter);
+        return filtered;
+    }, [
+        activeTab,
+        categoryFilter
+    ]);
+    const categories = [
+        ...new Set(products.map((p)=>p.category))
+    ];
+    return /*#__PURE__*/ jsxs(Column, {
+        minH: "screen",
+        className: "bg-background",
+        children: [
+            /*#__PURE__*/ jsx("header", {
+                className: "border-b",
+                children: /*#__PURE__*/ jsxs(Row, {
+                    h: 14,
+                    justify: "between",
+                    align: "center",
+                    className: "container mx-auto px-4",
+                    children: [
+                        /*#__PURE__*/ jsx(Column, {
+                            gap: 0,
+                            children: /*#__PURE__*/ jsx("h1", {
+                                className: "text-lg font-semibold",
+                                children: "Products"
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(Row, {
+                            gap: 2,
+                            align: "center",
+                            children: [
+                                /*#__PURE__*/ jsxs(Button, {
+                                    variant: "outline",
+                                    size: "sm",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Upload, {
+                                            className: "mr-2 h-4 w-4"
+                                        }),
+                                        "Import"
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(Button, {
+                                    variant: "outline",
+                                    size: "sm",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Download, {
+                                            className: "mr-2 h-4 w-4"
+                                        }),
+                                        "Export"
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(Dialog, {
+                                    open: isCreateDialogOpen,
+                                    onOpenChange: setIsCreateDialogOpen,
+                                    children: [
+                                        /*#__PURE__*/ jsx(DialogTrigger, {
+                                            asChild: true,
+                                            children: /*#__PURE__*/ jsxs(Button, {
+                                                size: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ jsx(Plus, {
+                                                        className: "mr-2 h-4 w-4"
+                                                    }),
+                                                    "Add Product"
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxs(DialogContent, {
+                                            children: [
+                                                /*#__PURE__*/ jsxs(DialogHeader, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(DialogTitle, {
+                                                            children: "Add New Product"
+                                                        }),
+                                                        /*#__PURE__*/ jsx(DialogDescription, {
+                                                            children: "Enter the details for the new product."
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxs(Column, {
+                                                    gap: 4,
+                                                    className: "py-4",
+                                                    children: [
+                                                        /*#__PURE__*/ jsxs(Column, {
+                                                            gap: 2,
+                                                            children: [
+                                                                /*#__PURE__*/ jsx(Label, {
+                                                                    htmlFor: "productName",
+                                                                    children: "Product name"
+                                                                }),
+                                                                /*#__PURE__*/ jsx(Input, {
+                                                                    id: "productName",
+                                                                    placeholder: "Enter product name"
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsxs(Grid, {
+                                                            cols: 2,
+                                                            gap: 4,
+                                                            children: [
+                                                                /*#__PURE__*/ jsxs(Column, {
+                                                                    gap: 2,
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(Label, {
+                                                                            htmlFor: "sku",
+                                                                            children: "SKU"
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(Input, {
+                                                                            id: "sku",
+                                                                            placeholder: "XX-000"
+                                                                        })
+                                                                    ]
+                                                                }),
+                                                                /*#__PURE__*/ jsxs(Column, {
+                                                                    gap: 2,
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(Label, {
+                                                                            htmlFor: "price",
+                                                                            children: "Price"
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(Input, {
+                                                                            id: "price",
+                                                                            type: "number",
+                                                                            placeholder: "0.00"
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsxs(Column, {
+                                                            gap: 2,
+                                                            children: [
+                                                                /*#__PURE__*/ jsx(Label, {
+                                                                    htmlFor: "category",
+                                                                    children: "Category"
+                                                                }),
+                                                                /*#__PURE__*/ jsxs(Select, {
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(SelectTrigger, {
+                                                                            id: "category",
+                                                                            children: /*#__PURE__*/ jsx(SelectValue, {
+                                                                                placeholder: "Select category"
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(SelectContent, {
+                                                                            children: categories.map((cat)=>/*#__PURE__*/ jsx(SelectItem, {
+                                                                                    value: cat,
+                                                                                    children: cat
+                                                                                }, cat))
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsxs(Column, {
+                                                            gap: 2,
+                                                            children: [
+                                                                /*#__PURE__*/ jsx(Label, {
+                                                                    htmlFor: "stock",
+                                                                    children: "Initial stock"
+                                                                }),
+                                                                /*#__PURE__*/ jsx(Input, {
+                                                                    id: "stock",
+                                                                    type: "number",
+                                                                    placeholder: "0"
+                                                                })
+                                                            ]
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxs(DialogFooter, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(Button, {
+                                                            variant: "outline",
+                                                            onClick: ()=>setIsCreateDialogOpen(false),
+                                                            children: "Cancel"
+                                                        }),
+                                                        /*#__PURE__*/ jsx(Button, {
+                                                            onClick: ()=>setIsCreateDialogOpen(false),
+                                                            children: "Create product"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs("main", {
+                className: "container mx-auto p-4 md:p-6",
+                children: [
+                    /*#__PURE__*/ jsxs(Row, {
+                        gap: 4,
+                        justify: "between",
+                        align: "center",
+                        className: "mb-4 flex-col sm:flex-row sm:items-center",
+                        children: [
+                            /*#__PURE__*/ jsx(Tabs, {
+                                value: activeTab,
+                                onValueChange: setActiveTab,
+                                children: /*#__PURE__*/ jsxs(TabsList, {
+                                    children: [
+                                        /*#__PURE__*/ jsxs(TabsTrigger, {
+                                            value: "all",
+                                            children: [
+                                                "All",
+                                                ' ',
+                                                /*#__PURE__*/ jsx(Badge, {
+                                                    variant: "secondary",
+                                                    className: "ml-2",
+                                                    children: products.length
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs(TabsTrigger, {
+                                            value: "active",
+                                            children: [
+                                                "Active",
+                                                ' ',
+                                                /*#__PURE__*/ jsx(Badge, {
+                                                    variant: "secondary",
+                                                    className: "ml-2",
+                                                    children: products.filter((p)=>'active' === p.status).length
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs(TabsTrigger, {
+                                            value: "draft",
+                                            children: [
+                                                "Draft",
+                                                ' ',
+                                                /*#__PURE__*/ jsx(Badge, {
+                                                    variant: "secondary",
+                                                    className: "ml-2",
+                                                    children: products.filter((p)=>'draft' === p.status).length
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs(TabsTrigger, {
+                                            value: "archived",
+                                            children: [
+                                                "Archived",
+                                                ' ',
+                                                /*#__PURE__*/ jsx(Badge, {
+                                                    variant: "secondary",
+                                                    className: "ml-2",
+                                                    children: products.filter((p)=>'archived' === p.status).length
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs(Row, {
+                                gap: 2,
+                                align: "center",
+                                children: [
+                                    /*#__PURE__*/ jsxs(Select, {
+                                        value: categoryFilter,
+                                        onValueChange: setCategoryFilter,
+                                        children: [
+                                            /*#__PURE__*/ jsxs(SelectTrigger, {
+                                                className: "w-[150px]",
+                                                children: [
+                                                    /*#__PURE__*/ jsx(Filter, {
+                                                        className: "mr-2 h-4 w-4"
+                                                    }),
+                                                    /*#__PURE__*/ jsx(SelectValue, {
+                                                        placeholder: "Category"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsxs(SelectContent, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx(SelectItem, {
+                                                        value: "all",
+                                                        children: "All categories"
+                                                    }),
+                                                    categories.map((cat)=>/*#__PURE__*/ jsx(SelectItem, {
+                                                            value: cat,
+                                                            children: cat
+                                                        }, cat))
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        variant: "outline",
+                                        size: "icon",
+                                        children: /*#__PURE__*/ jsx(RefreshCw, {
+                                            className: "h-4 w-4"
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(DataTable, {
+                        columns: columns,
+                        data: filteredProducts,
+                        searchKey: "name",
+                        searchPlaceholder: "Search products...",
+                        resizable: true,
+                        compact: true
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { DataManagementExample };