@catalystsoftware/ui 1.0.11 → 1.0.14

package/dist/components/catalyst-ui/overlays/popconfirm.tsx

@@ -0,0 +1,721 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cva, type VariantProps } from "class-variance-authority";
+import { AlertTriangle, Info, CheckCircle, XCircle } from "lucide-react";
+import { Trash2, Edit, Download, LogOut, Settings, Heart } from "lucide-react";
+import { cn } from "~/components/catalyst-ui";
+import { Button } from "~/components/catalyst-ui";
+import { useState } from "react";
+import { Card, CardHeader, CardTitle, CardContent } from "~/components/catalyst-ui";
+import { Badge } from "~/components/catalyst-ui";
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const popconfirmVariants = cva(
+  "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  {
+    variants: {
+      variant: {
+        default: "",
+        warning: "border-yellow-200 bg-yellow-50 text-yellow-900 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-100",
+        danger: "border-red-200 bg-red-50 text-red-900 dark:border-red-800 dark:bg-red-950 dark:text-red-100",
+        info: "border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100",
+        success: "border-green-200 bg-green-50 text-green-900 dark:border-green-800 dark:bg-green-950 dark:text-green-100",
+      },
+      size: {
+        default: "w-72",
+        sm: "w-64",
+        lg: "w-80",
+        xl: "w-96",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
+    VariantProps<typeof popconfirmVariants>
+>(({ className, variant, size, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(popconfirmVariants({ variant, size }), className)}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+interface PopconfirmProps {
+  children: React.ReactNode;
+  title?: string;
+  description?: string;
+  okText?: string;
+  cancelText?: string;
+  variant?: "default" | "warning" | "danger" | "info" | "success";
+  size?: "default" | "sm" | "lg" | "xl";
+  placement?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
+  onConfirm?: () => void | Promise<void>;
+  onCancel?: () => void;
+  disabled?: boolean;
+  showIcon?: boolean;
+  icon?: React.ReactNode;
+  okButtonProps?: React.ComponentProps<typeof Button>;
+  cancelButtonProps?: React.ComponentProps<typeof Button>;
+  className?: string;
+  contentClassName?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: "click" | "hover" | "focus";
+}
+
+const getIcon = (variant: PopconfirmProps["variant"]) => {
+  switch (variant) {
+    case "warning":
+      return <AlertTriangle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />;
+    case "danger":
+      return <XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />;
+    case "info":
+      return <Info className="h-4 w-4 text-blue-600 dark:text-blue-400" />;
+    case "success":
+      return <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />;
+    default:
+      return <AlertTriangle className="h-4 w-4 text-muted-foreground" />;
+  }
+};
+
+export function Popconfirm({
+  children,
+  title = "Are you sure?",
+  description,
+  okText = "Yes",
+  cancelText = "No",
+  variant = "default",
+  size = "default",
+  placement = "top",
+  onConfirm,
+  onCancel,
+  disabled = false,
+  showIcon = true,
+  icon,
+  okButtonProps = {},
+  cancelButtonProps = {},
+  className,
+  contentClassName,
+  open,
+  onOpenChange,
+  trigger = "click",
+  ...props
+}: PopconfirmProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+
+  const isControlled = open !== undefined;
+  const openState = isControlled ? open : isOpen;
+  const setOpenState = isControlled ? onOpenChange : setIsOpen;
+
+  const handleConfirm = async () => {
+    if (onConfirm) {
+      try {
+        setLoading(true);
+        await onConfirm();
+        setOpenState?.(false);
+      } catch (error) {
+        console.error("Error in onConfirm:", error);
+      } finally {
+        setLoading(false);
+      }
+    } else {
+      setOpenState?.(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    }
+    setOpenState?.(false);
+  };
+
+  const sideMap = {
+    "top": "top",
+    "bottom": "bottom",
+    "left": "left",
+    "right": "right",
+    "top-start": "top",
+    "top-end": "top",
+    "bottom-start": "bottom",
+    "bottom-end": "bottom",
+    "left-start": "left",
+    "left-end": "left",
+    "right-start": "right",
+    "right-end": "right",
+  } as const;
+
+  const alignMap = {
+    "top": "center",
+    "bottom": "center",
+    "left": "center",
+    "right": "center",
+    "top-start": "start",
+    "top-end": "end",
+    "bottom-start": "start",
+    "bottom-end": "end",
+    "left-start": "start",
+    "left-end": "end",
+    "right-start": "start",
+    "right-end": "end",
+  } as const;
+
+  const triggerProps = React.useMemo(() => {
+    const props: any = {};
+    
+    if (trigger === "hover") {
+      props.onMouseEnter = () => setOpenState?.(true);
+      props.onMouseLeave = () => setOpenState?.(false);
+    } else if (trigger === "focus") {
+      props.onFocus = () => setOpenState?.(true);
+      props.onBlur = () => setOpenState?.(false);
+    }
+    
+    return props;
+  }, [trigger, setOpenState]);
+
+  const displayIcon = icon || (showIcon ? getIcon(variant) : null);
+  const okVariant = variant === "danger" ? "destructive" : "default";
+
+  return (
+    <Popover open={openState} onOpenChange={setOpenState}>
+      <PopoverTrigger asChild disabled={disabled} {...triggerProps}>
+        <span className={cn("cursor-pointer", disabled && "cursor-not-allowed opacity-50", className)}>
+          {children}
+        </span>
+      </PopoverTrigger>
+      <PopoverContent
+        variant={variant}
+        size={size}
+        side={sideMap[placement]}
+        align={alignMap[placement]}
+        className={contentClassName}
+      >
+        <div className="space-y-3">
+          <div className="flex items-start gap-3">
+            {displayIcon && (
+              <div className="flex-shrink-0 mt-0.5">
+                {displayIcon}
+              </div>
+            )}
+            <div className="space-y-1">
+              <div className="font-medium text-sm leading-5">
+                {title}
+              </div>
+              {description && (
+                <div className="text-sm text-muted-foreground leading-5">
+                  {description}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center justify-end gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleCancel}
+              disabled={loading}
+              {...cancelButtonProps}
+            >
+              {cancelText}
+            </Button>
+            <Button
+              variant={okVariant}
+              size="sm"
+              onClick={handleConfirm}
+              loading={loading}
+              {...okButtonProps}
+            >
+              {okText}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+Popconfirm.displayName = "Popconfirm";
+
+
+
+export function PopconfirmDemo() {
+  const [messages, setMessages] = useState<string[]>([]);
+
+  const addMessage = (message: string) => {
+    setMessages(prev => [...prev, message]);
+    setTimeout(() => {
+      setMessages(prev => prev.slice(1));
+    }, 3000);
+  };
+
+  const handleDelete = () => {
+    addMessage("Item deleted successfully!");
+  };
+
+  const handleEdit = () => {
+    addMessage("Edit confirmed!");
+  };
+
+  const handleDownload = () => {
+    addMessage("Download started!");
+  };
+
+  const handleLogout = () => {
+    addMessage("Logged out successfully!");
+  };
+
+  const handleAsyncAction = async () => {
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    addMessage("Async action completed!");
+  };
+
+  return (
+    <div className="space-y-8 p-6 max-w-6xl mx-auto">
+      <div className="text-center space-y-2">
+        <h1 className="text-3xl font-bold">Popconfirm Component Demo</h1>
+        <p className="text-muted-foreground">
+          Interactive confirmation dialogs with various styles and configurations
+        </p>
+      </div>
+
+      {messages.length > 0 && (
+        <div className="space-y-2">
+          {messages.map((message, index) => (
+            <div
+              key={index}
+              className="bg-green-50 border border-green-200 text-green-800 px-4 py-2 rounded-md dark:bg-green-950 dark:border-green-800 dark:text-green-200"
+            >
+              {message}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              Basic Examples
+              <Badge variant="secondary">Default</Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-3">
+              <div>
+                <Popconfirm
+                  title="Delete this item?"
+                  description="This action cannot be undone."
+                  onConfirm={handleDelete}
+                >
+                  <Button variant="destructive" size="sm">
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete Item
+                  </Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  title="Save changes?"
+                  onConfirm={handleEdit}
+                >
+                  <Button variant="outline" size="sm">
+                    <Edit className="h-4 w-4 mr-2" />
+                    Edit
+                  </Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  title="Download file?"
+                  description="File will be downloaded to your default location."
+                  okText="Download"
+                  cancelText="Cancel"
+                  onConfirm={handleDownload}
+                >
+                  <Button size="sm">
+                    <Download className="h-4 w-4 mr-2" />
+                    Download
+                  </Button>
+                </Popconfirm>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              Variants
+              <Badge variant="secondary">Colors</Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-3">
+              <div>
+                <Popconfirm
+                  variant="warning"
+                  title="Warning Action"
+                  description="This action requires your attention."
+                  onConfirm={() => addMessage("Warning action confirmed")}
+                >
+                  <Button variant="outline" size="sm">
+                    Warning Style
+                  </Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  variant="danger"
+                  title="Dangerous Action"
+                  description="This action is irreversible."
+                  okText="Delete"
+                  onConfirm={() => addMessage("Dangerous action confirmed")}
+                >
+                  <Button variant="destructive" size="sm">
+                    Danger Style
+                  </Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  variant="info"
+                  title="Information"
+                  description="This will update your settings."
+                  okText="Update"
+                  onConfirm={() => addMessage("Info action confirmed")}
+                >
+                  <Button variant="outline" size="sm">
+                    Info Style
+                  </Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  variant="success"
+                  title="Success Action"
+                  description="This will complete the process."
+                  okText="Complete"
+                  onConfirm={() => addMessage("Success action confirmed")}
+                >
+                  <Button size="sm">
+                    Success Style
+                  </Button>
+                </Popconfirm>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              Placements
+              <Badge variant="secondary">Positions</Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-2 gap-2 text-center">
+              <Popconfirm
+                title="Top placement"
+                placement="top"
+                onConfirm={() => addMessage("Top confirmed")}
+              >
+                <Button variant="outline" size="sm">Top</Button>
+              </Popconfirm>
+              
+              <Popconfirm
+                title="Bottom placement"
+                placement="bottom"
+                onConfirm={() => addMessage("Bottom confirmed")}
+              >
+                <Button variant="outline" size="sm">Bottom</Button>
+              </Popconfirm>
+              
+              <Popconfirm
+                title="Left placement"
+                placement="left"
+                onConfirm={() => addMessage("Left confirmed")}
+              >
+                <Button variant="outline" size="sm">Left</Button>
+              </Popconfirm>
+              
+              <Popconfirm
+                title="Right placement"
+                placement="right"
+                onConfirm={() => addMessage("Right confirmed")}
+              >
+                <Button variant="outline" size="sm">Right</Button>
+              </Popconfirm>
+            </div>
+            
+            <div className="grid grid-cols-2 gap-2 text-center">
+              <Popconfirm
+                title="Top Start"
+                placement="top-start"
+                onConfirm={() => addMessage("Top start confirmed")}
+              >
+                <Button variant="outline" size="sm">Top Start</Button>
+              </Popconfirm>
+              
+              <Popconfirm
+                title="Top End"
+                placement="top-end"
+                onConfirm={() => addMessage("Top end confirmed")}
+              >
+                <Button variant="outline" size="sm">Top End</Button>
+              </Popconfirm>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              Sizes
+              <Badge variant="secondary">Dimensions</Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-3">
+              <div>
+                <Popconfirm
+                  size="sm"
+                  title="Small size"
+                  description="This is a smaller popconfirm."
+                  onConfirm={() => addMessage("Small confirmed")}
+                >
+                  <Button variant="outline" size="sm">Small</Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  size="default"
+                  title="Default size"
+                  description="This is the default popconfirm size."
+                  onConfirm={() => addMessage("Default confirmed")}
+                >
+                  <Button variant="outline" size="sm">Default</Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  size="lg"
+                  title="Large size"
+                  description="This is a larger popconfirm with more space for content."
+                  onConfirm={() => addMessage("Large confirmed")}
+                >
+                  <Button variant="outline" size="sm">Large</Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  size="xl"
+                  title="Extra large size"
+                  description="This is an extra large popconfirm with even more space for longer descriptions and content."
+                  onConfirm={() => addMessage("XL confirmed")}
+                >
+                  <Button variant="outline" size="sm">Extra Large</Button>
+                </Popconfirm>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              Custom Features
+              <Badge variant="secondary">Advanced</Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-3">
+              <div>
+                <Popconfirm
+                  title="Custom Icon"
+                  description="This uses a custom heart icon."
+                  icon={<Heart className="h-4 w-4 text-red-500" />}
+                  onConfirm={() => addMessage("Custom icon confirmed")}
+                >
+                  <Button variant="outline" size="sm">
+                    <Heart className="h-4 w-4 mr-2" />
+                    Custom Icon
+                  </Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  title="No Icon"
+                  description="This popconfirm has no icon."
+                  showIcon={false}
+                  onConfirm={() => addMessage("No icon confirmed")}
+                >
+                  <Button variant="outline" size="sm">No Icon</Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  title="Async Action"
+                  description="This will take a few seconds to complete."
+                  onConfirm={handleAsyncAction}
+                  okText="Process"
+                >
+                  <Button size="sm">
+                    <Settings className="h-4 w-4 mr-2" />
+                    Async Action
+                  </Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  title="Custom Button Styles"
+                  description="Custom styled confirm and cancel buttons."
+                  okText="Proceed"
+                  cancelText="Abort"
+                  okButtonProps={{ 
+                    variant: "default",
+                    className: "bg-blue-600 hover:bg-blue-700" 
+                  }}
+                  cancelButtonProps={{ 
+                    variant: "outline",
+                    className: "border-red-200 text-red-600 hover:bg-red-50" 
+                  }}
+                  onConfirm={() => addMessage("Custom buttons confirmed")}
+                >
+                  <Button variant="outline" size="sm">Custom Buttons</Button>
+                </Popconfirm>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              Interactive Examples
+              <Badge variant="secondary">Real Use</Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-3">
+              <div>
+                <Popconfirm
+                  variant="danger"
+                  title="Sign out of your account?"
+                  description="You will need to sign in again to access your account."
+                  okText="Sign Out"
+                  cancelText="Stay"
+                  onConfirm={handleLogout}
+                >
+                  <Button variant="outline" size="sm" className="w-full">
+                    <LogOut className="h-4 w-4 mr-2" />
+                    Sign Out
+                  </Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  title="Delete selected items?"
+                  description="3 items will be permanently deleted."
+                  variant="warning"
+                  okText="Delete All"
+                  onConfirm={() => addMessage("3 items deleted")}
+                >
+                  <Button variant="destructive" size="sm" className="w-full">
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete Selected (3)
+                  </Button>
+                </Popconfirm>
+              </div>
+              
+              <div>
+                <Popconfirm
+                  title="Archive this conversation?"
+                  description="The conversation will be moved to your archive."
+                  variant="info"
+                  okText="Archive"
+                  onConfirm={() => addMessage("Conversation archived")}
+                >
+                  <Button variant="outline" size="sm" className="w-full">
+                    Archive Chat
+                  </Button>
+                </Popconfirm>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Usage Examples</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4 text-sm">
+            <div>
+              <h4 className="font-medium mb-2">Basic Usage:</h4>
+              <code className="block bg-muted p-3 rounded text-xs overflow-x-auto">
+{`<Popconfirm
+  title="Are you sure?"
+  description="This action cannot be undone."
+  onConfirm={handleConfirm}
+  onCancel={handleCancel}
+>
+  <Button>Delete</Button>
+</Popconfirm>`}
+              </code>
+            </div>
+            
+            <div>
+              <h4 className="font-medium mb-2">With Variants:</h4>
+              <code className="block bg-muted p-3 rounded text-xs overflow-x-auto">
+{`<Popconfirm
+  variant="danger"
+  title="Delete item?"
+  description="This will permanently delete the item."
+  okText="Delete"
+  cancelText="Keep"
+  placement="top-start"
+  size="lg"
+  onConfirm={handleDelete}
+>
+  <Button variant="destructive">Delete</Button>
+</Popconfirm>`}
+              </code>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}