@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/feedback/context-menu.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Dot } from "lucide-react";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+export function ContextMenu({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+export function ContextMenuTrigger({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  );
+}
+
+export function ContextMenuGroup({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  );
+}
+
+export function ContextMenuPortal({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  );
+}
+
+export function ContextMenuSub({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+export function ContextMenuRadioGroup({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+type ContextMenuSubTriggerProps = ComponentProps<
+  typeof ContextMenuPrimitive.SubTrigger
+> & {
+  inset?: boolean;
+};
+
+export function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuSubTriggerProps) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      className={cn(
+        "flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        inset && "ps-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className="ml-auto h-4 w-4" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+export function ContextMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+type ContextMenuItemProps = ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+};
+
+export function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ContextMenuItemProps) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <Check className="h-4 w-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+export function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <Dot className="h-4 w-4 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+type ContextMenuLabelProps = ComponentProps<
+  typeof ContextMenuPrimitive.Label
+> & {
+  inset?: boolean;
+};
+
+export function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuLabelProps) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      className={cn(
+        "px-2 py-1.5 text-sm font-semibold text-foreground",
+        inset && "ps-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuShortcut({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ms-auto text-sm tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/ui/feedback/drawer.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+export function Drawer({
+  shouldScaleBackground = true,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Root>) {
+  return (
+    <DrawerPrimitive.Root
+      data-slot="drawer"
+      shouldScaleBackground={shouldScaleBackground}
+      {...props}
+    />
+  );
+}
+
+export function DrawerTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return (
+    <DrawerPrimitive.Trigger
+      data-slot="drawer-trigger"
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  );
+}
+
+export function DrawerPortal({
+  children,
+  ...props
+}: Omit<ComponentProps<typeof DrawerPrimitive.Portal>, "children"> & { children?: React.ReactNode }) {
+  const Portal = DrawerPrimitive.Portal as any;
+  return <Portal data-slot="drawer-portal" {...props}>{children as any}</Portal>;
+}
+
+export function DrawerClose({
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+export function DrawerOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn("fixed inset-0 z-50 bg-black/80", className)}
+      {...props}
+    />
+  );
+}
+
+export function DrawerContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+          className,
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+export function DrawerHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)}
+      {...props}
+    />
+  );
+}
+
+export function DrawerFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+export function DrawerTitle({
+  className,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DrawerDescription({
+  className,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}

package/src/ui/feedback/error-dialog.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from "react";
+import type { ReactNode } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  Button,
+  ScrollArea,
+} from "../primitives";
+import { AlertTriangle, Check, ChevronDown, ChevronRight, ClipboardCopy, Copy } from "lucide-react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface ErrorDialogData {
+  title?: string;
+  description?: ReactNode;
+  trace?: string;
+  code?: string;
+}
+
+interface ErrorDialogContextType {
+  showError: (data: ErrorDialogData | string | Error) => void;
+  dismiss: () => void;
+}
+
+// ============================================================================
+// Event Emitter for Global Access
+// ============================================================================
+
+type ErrorEventListener = (data: ErrorDialogData) => void;
+
+class GlobalErrorEmitter {
+  private listeners: ErrorEventListener[] = [];
+
+  subscribe(listener: ErrorEventListener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  }
+
+  emit(data: ErrorDialogData) {
+    this.listeners.forEach((listener) => listener(data));
+  }
+}
+
+export const globalError = new GlobalErrorEmitter();
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const ErrorDialogContext = createContext<ErrorDialogContextType | null>(null);
+
+export function useErrorDialog() {
+  const context = useContext(ErrorDialogContext);
+  if (!context) {
+    throw new Error("useErrorDialog must be used within ErrorDialogProvider");
+  }
+  return context;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function ErrorDialogProvider({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const [data, setData] = useState<ErrorDialogData>({});
+  const [expanded, setExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  // Subscribe to global events
+  useEffect(() => {
+    const unsubscribe = globalError.subscribe((errorData) => {
+      setData(errorData);
+      setOpen(true);
+      setExpanded(false);
+      setCopied(false);
+    });
+    return unsubscribe;
+  }, []);
+
+  const showError = useCallback((input: ErrorDialogData | string | Error) => {
+    let errorData: ErrorDialogData = {};
+
+    if (input instanceof Error) {
+      errorData = {
+        title: input.name || "Error",
+        description: input.message,
+        trace: input.stack,
+      };
+    } else if (typeof input === "string") {
+      errorData = {
+        title: "Error",
+        description: input,
+      };
+    } else {
+      errorData = input;
+    }
+
+    setData(errorData);
+    setOpen(true);
+    setExpanded(false);
+    setCopied(false);
+  }, []);
+
+  const dismiss = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  /** Build full diagnostic text for copy */
+  const buildFullDiagnostic = useCallback(() => {
+    // If trace already contains formatted diagnostic, use it directly
+    if (data.trace && data.trace.startsWith("=== Thông tin lỗi")) {
+      return data.trace;
+    }
+
+    // Otherwise build from available fields
+    const parts: string[] = [
+      `=== Thông tin lỗi ===`,
+    ];
+
+    if (data.code) parts.push(`Mã lỗi: ${data.code}`);
+
+    parts.push(`Thời gian: ${new Date().toLocaleString("vi-VN", {
+      timeZone: "Asia/Ho_Chi_Minh",
+      day: "2-digit", month: "2-digit", year: "numeric",
+      hour: "2-digit", minute: "2-digit", second: "2-digit",
+    })}`);
+
+    if (data.title) parts.push(`Lỗi: ${data.title}`);
+
+    if (data.description && typeof data.description === "string") {
+      parts.push(`Mô tả: ${data.description}`);
+    }
+
+    if (data.trace) {
+      parts.push(`\nChi tiết:\n${data.trace}`);
+    }
+
+    return parts.join("\n");
+  }, [data]);
+
+  const copyAll = useCallback(async () => {
+    const text = buildFullDiagnostic();
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback for older browsers
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [buildFullDiagnostic]);
+
+  const copyTrace = () => {
+    if (data.trace) {
+      navigator.clipboard.writeText(data.trace);
+    }
+  };
+
+  return (
+    <ErrorDialogContext.Provider value={{ showError, dismiss }}>
+      {children}
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-md md:max-w-xl sm:max-w-lg border-destructive/20">
+          <DialogHeader>
+            <div className="flex items-center gap-2 text-destructive">
+              <div className="p-2 bg-destructive/10 rounded-full">
+                <AlertTriangle className="h-6 w-6" />
+              </div>
+              <DialogTitle className="text-xl">
+                {data.title || "Đã xảy ra lỗi"}
+              </DialogTitle>
+            </div>
+            <DialogDescription className="text-base pt-2 text-foreground font-medium">
+              {data.description}
+            </DialogDescription>
+            {data.code && (
+              <p className="text-xs text-muted-foreground font-mono mt-1">
+                Mã lỗi: {data.code}
+              </p>
+            )}
+          </DialogHeader>
+
+          {data.trace && (
+            <div className="mt-2 border rounded-md bg-muted/30 overflow-hidden">
+              <button
+                onClick={() => setExpanded(!expanded)}
+                className="w-full flex items-center justify-between p-2 text-sm font-medium hover:bg-muted/50 transition-colors"
+              >
+                <div className="flex items-center gap-1">
+                  {expanded ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )}
+                  <span>Chi tiết lỗi & Trace Log</span>
+                </div>
+              </button>
+
+              {expanded && (
+                <div className="relative border-t bg-muted/50">
+                  <ScrollArea className="h-[200px] w-full p-4">
+                    <pre className="text-xs font-mono whitespace-pre-wrap break-all text-muted-foreground">
+                      {data.trace}
+                    </pre>
+                  </ScrollArea>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="absolute top-2 right-2 h-6 w-6"
+                    onClick={copyTrace}
+                    title="Copy Trace Log"
+                  >
+                    <Copy className="h-3 w-3" />
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+
+          <DialogFooter className="flex-row gap-2 sm:justify-between">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={copyAll}
+              className="gap-1.5 text-xs"
+            >
+              {copied ? (
+                <>
+                  <Check className="h-3.5 w-3.5 text-green-600" />
+                  Đã sao chép
+                </>
+              ) : (
+                <>
+                  <ClipboardCopy className="h-3.5 w-3.5" />
+                  Sao chép thông tin lỗi
+                </>
+              )}
+            </Button>
+            <Button variant="outline" onClick={dismiss}>
+              Đóng
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </ErrorDialogContext.Provider>
+  );
+}