@godxjp/ui 5.0.2 → 6.0.0

package/src/components/feedback/alert.tsx

@@ -0,0 +1,167 @@
+import * as React from "react";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Info,
+  RefreshCw,
+  TriangleAlert,
+  X,
+  type LucideIcon,
+} from "lucide-react";
+
+import { useTranslation } from "../../i18n/use-translation";
+import { humanError } from "../../lib/format";
+import { cn } from "../../lib/utils";
+import { Inline } from "../layout/inline";
+import { Button } from "../general/button";
+import type { AlertVariantProp } from "../../props/vocabulary";
+import type {
+  AlertActionsProp,
+  AlertContentProp,
+  AlertDescriptionProp,
+  AlertProp,
+  AlertQueryErrorProp,
+  AlertTitleProp,
+} from "../../props/components/feedback.prop";
+
+export type {
+  AlertProp,
+  AlertProp as AlertProps,
+  AlertTitleProp,
+  AlertTitleProp as AlertTitleProps,
+  AlertContentProp,
+  AlertContentProp as AlertContentProps,
+  AlertDescriptionProp,
+  AlertDescriptionProp as AlertDescriptionProps,
+  AlertActionsProp,
+  AlertActionsProp as AlertActionsProps,
+  AlertQueryErrorProp,
+  AlertQueryErrorProp as AlertQueryErrorProps,
+} from "../../props/components/feedback.prop";
+
+const AlertContext = React.createContext<AlertVariantProp>("default");
+
+const DEFAULT_ICONS: Record<AlertVariantProp, LucideIcon> = {
+  default: Info,
+  destructive: AlertCircle,
+  warning: TriangleAlert,
+  success: CheckCircle2,
+};
+
+const AlertBase = React.forwardRef<HTMLDivElement, AlertProp>(
+  ({ variant = "default", icon, onDismiss, className, children, ...props }, ref) => {
+    const IconComponent = icon === false ? null : (icon ?? DEFAULT_ICONS[variant]);
+
+    return (
+      <AlertContext.Provider value={variant}>
+        <div
+          ref={ref}
+          role="alert"
+          data-slot="alert"
+          data-variant={variant}
+          data-dismissible={onDismiss ? "" : undefined}
+          className={className}
+          {...props}
+        >
+          {IconComponent && (
+            <IconComponent data-slot="alert-icon" data-variant={variant} aria-hidden="true" />
+          )}
+          <div data-slot="alert-body">{children}</div>
+          {onDismiss && (
+            <button
+              type="button"
+              onClick={() => {
+                void onDismiss();
+              }}
+              data-slot="alert-dismiss"
+              className="ring-offset-background focus-visible:ring-ring transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+              aria-label="Dismiss"
+            >
+              <X className="size-4" aria-hidden="true" />
+            </button>
+          )}
+        </div>
+      </AlertContext.Provider>
+    );
+  },
+);
+AlertBase.displayName = "Alert";
+
+export const AlertTitle = React.forwardRef<HTMLParagraphElement, AlertTitleProp>(
+  ({ className, ...props }, ref) => {
+    const variant = React.useContext(AlertContext);
+    return (
+      <p
+        ref={ref}
+        data-slot="alert-title"
+        data-variant={variant}
+        className={className}
+        {...props}
+      />
+    );
+  },
+);
+AlertTitle.displayName = "AlertTitle";
+
+export const AlertContent = React.forwardRef<HTMLDivElement, AlertContentProp>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="alert-content"
+      className={cn("min-w-0 flex-1", className)}
+      {...props}
+    />
+  ),
+);
+AlertContent.displayName = "AlertContent";
+
+export const AlertDescription = React.forwardRef<HTMLParagraphElement, AlertDescriptionProp>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} data-slot="alert-description" className={className} {...props} />
+  ),
+);
+AlertDescription.displayName = "AlertDescription";
+
+export const AlertActions = React.forwardRef<HTMLDivElement, AlertActionsProp>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-slot="alert-actions" className={className} {...props} />
+  ),
+);
+AlertActions.displayName = "AlertActions";
+
+/** TanStack Query / API failure preset — same visual as `Alert variant="destructive"`. Used by `DataState` (@godxjp/ui/query). */
+export function AlertQueryError({ error, onRetry, className }: AlertQueryErrorProp) {
+  const { t } = useTranslation();
+  return (
+    <Alert variant="destructive" className={className}>
+      <AlertTitle>{t("common.error")}</AlertTitle>
+      <AlertDescription>{humanError(error)}</AlertDescription>
+      {onRetry && (
+        <AlertActions>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              void onRetry();
+            }}
+          >
+            <Inline gap="xs">
+              <RefreshCw className="size-4" aria-hidden="true" />
+              {t("common.retry")}
+            </Inline>
+          </Button>
+        </AlertActions>
+      )}
+    </Alert>
+  );
+}
+
+export const Alert = Object.assign(AlertBase, {
+  Title: AlertTitle,
+  Content: AlertContent,
+  Description: AlertDescription,
+  Actions: AlertActions,
+  QueryError: AlertQueryError,
+});
+
+export { AlertBase };

package/src/components/feedback/dialog.tsx

@@ -0,0 +1,325 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "../general/button";
+import { useTranslation } from "../../i18n/use-translation";
+import { Button } from "../general/button";
+import { Input } from "../data-entry/input";
+import { Label } from "../data-entry/label";
+import type { DialogConfirmProp } from "../../props/components/feedback.prop";
+
+export type {
+  DialogConfirmProp,
+  DialogConfirmProp as DialogConfirmProps,
+} from "../../props/components/feedback.prop";
+
+/** form = nhập liệu / wizard (role=dialog, có nút X). confirm = quyết định (role=alertdialog, không X). */
+export type DialogMode = "form" | "confirm";
+
+const DialogModeContext = React.createContext<DialogMode>("form");
+
+function useDialogMode(): DialogMode {
+  return React.useContext(DialogModeContext);
+}
+
+type DialogRootProps = React.ComponentProps<typeof DialogPrimitive.Root> & {
+  mode?: DialogMode;
+};
+
+function DialogRoot({ mode = "form", ...props }: DialogRootProps) {
+  if (mode === "confirm") {
+    return (
+      <DialogModeContext.Provider value="confirm">
+        <AlertDialogPrimitive.Root data-slot="dialog" {...props} />
+      </DialogModeContext.Provider>
+    );
+  }
+  return (
+    <DialogModeContext.Provider value="form">
+      <DialogPrimitive.Root data-slot="dialog" {...props} />
+    </DialogModeContext.Provider>
+  );
+}
+
+function DialogTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  const mode = useDialogMode();
+  if (mode === "confirm") {
+    return <AlertDialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+  }
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+const DialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-slot="dialog-overlay"
+    className={cn(
+      "ui-dialog-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showClose?: boolean;
+    showCloseButton?: boolean;
+  }
+>(({ className, children, showClose, showCloseButton: showCloseButtonProp, ...props }, ref) => {
+  const mode = useDialogMode();
+
+  if (mode === "confirm") {
+    return (
+      <AlertDialogPrimitive.Portal>
+        <AlertDialogPrimitive.Overlay
+          data-slot="dialog-overlay"
+          className="ui-dialog-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        />
+        <AlertDialogPrimitive.Content
+          ref={ref}
+          data-slot="dialog-content"
+          className={cn(
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </AlertDialogPrimitive.Content>
+      </AlertDialogPrimitive.Portal>
+    );
+  }
+
+  const showCloseButton = showCloseButtonProp ?? showClose ?? true;
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        data-slot="dialog-content"
+        className={cn(
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring transition-opacity focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+          >
+            <X className="size-4" aria-hidden="true" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        ) : null}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
+DialogContent.displayName = "DialogContent";
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div data-slot="dialog-header" className={className} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div data-slot="dialog-footer" className={className} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => {
+  const mode = useDialogMode();
+  const cls = cn(className);
+  if (mode === "confirm") {
+    return (
+      <AlertDialogPrimitive.Title ref={ref} data-slot="dialog-title" className={cls} {...props} />
+    );
+  }
+  return <DialogPrimitive.Title ref={ref} data-slot="dialog-title" className={cls} {...props} />;
+});
+DialogTitle.displayName = "DialogTitle";
+
+const DialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => {
+  const mode = useDialogMode();
+  const cls = cn(className);
+  if (mode === "confirm") {
+    return (
+      <AlertDialogPrimitive.Description
+        ref={ref}
+        data-slot="dialog-description"
+        className={cls}
+        {...props}
+      />
+    );
+  }
+  return (
+    <DialogPrimitive.Description
+      ref={ref}
+      data-slot="dialog-description"
+      className={cls}
+      {...props}
+    />
+  );
+});
+DialogDescription.displayName = "DialogDescription";
+
+/** Confirm mode — primary action (maps to Radix AlertDialogAction). */
+const DialogAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+DialogAction.displayName = "DialogAction";
+
+/** Confirm mode — dismiss without action (maps to Radix AlertDialogCancel). */
+const DialogCancel = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), className)}
+    {...props}
+  />
+));
+DialogCancel.displayName = "DialogCancel";
+
+/** Preset: confirm / destructive / type-to-confirm — use case `mode="confirm"` without compound markup. */
+function DialogConfirm({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  variant = "default",
+  confirmPhrase,
+  onConfirm,
+  keepOpenOnConfirm = false,
+  pending = false,
+}: DialogConfirmProp) {
+  const { t } = useTranslation();
+  const [typed, setTyped] = React.useState("");
+  const inputId = React.useId();
+
+  const needsPhrase = confirmPhrase != null && confirmPhrase.length > 0;
+  const phraseMatches = !needsPhrase || typed === confirmPhrase;
+  const effectiveVariant = needsPhrase ? "destructive" : variant;
+  const resolvedConfirm = confirmLabel ?? (needsPhrase ? t("common.delete") : t("common.continue"));
+  const resolvedCancel = cancelLabel ?? t("common.cancel");
+
+  const handleOpenChange = (next: boolean) => {
+    setTyped("");
+    onOpenChange(next);
+  };
+
+  const handleConfirm = () => {
+    if (!phraseMatches) return;
+    void (async () => {
+      await onConfirm();
+      if (!keepOpenOnConfirm) onOpenChange(false);
+    })();
+  };
+
+  return (
+    <DialogRoot mode="confirm" open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description ? <DialogDescription>{description}</DialogDescription> : null}
+        </DialogHeader>
+
+        {needsPhrase && (
+          <div className="ui-stack-xs">
+            <Label htmlFor={inputId} className="text-sm">
+              {t("common.typeToConfirm", { phrase: confirmPhrase })}
+            </Label>
+            <Input
+              id={inputId}
+              value={typed}
+              onChange={(e) => {
+                setTyped(e.target.value);
+              }}
+              autoComplete="off"
+              spellCheck={false}
+              placeholder={confirmPhrase}
+              aria-required="true"
+            />
+          </div>
+        )}
+
+        <DialogFooter>
+          <DialogCancel asChild>
+            <Button variant="ghost" disabled={pending}>
+              {resolvedCancel}
+            </Button>
+          </DialogCancel>
+          <Button
+            variant={effectiveVariant === "destructive" ? "destructive" : "default"}
+            onClick={handleConfirm}
+            disabled={pending || !phraseMatches}
+          >
+            {pending ? t("common.working") : resolvedConfirm}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export const Dialog = Object.assign(DialogRoot, {
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Footer: DialogFooter,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose,
+  Action: DialogAction,
+  Cancel: DialogCancel,
+  Confirm: DialogConfirm,
+});
+
+export {
+  DialogRoot,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+  DialogAction,
+  DialogCancel,
+  DialogConfirm,
+};

package/src/components/feedback/index.ts

@@ -0,0 +1,53 @@
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  DialogAction,
+  DialogCancel,
+  DialogConfirm,
+} from "./dialog";
+export type { DialogMode, DialogConfirmProp, DialogConfirmProps } from "./dialog";
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+export { Toaster } from "./sonner";
+export { toast, useToast, type LegacyToastOptions } from "./use-toast";
+export { SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonCard } from "./skeleton";
+export {
+  Alert,
+  AlertTitle,
+  AlertContent,
+  AlertDescription,
+  AlertActions,
+  AlertQueryError,
+} from "./alert";
+export type {
+  AlertProp,
+  AlertProps,
+  AlertTitleProp,
+  AlertTitleProps,
+  AlertContentProp,
+  AlertContentProps,
+  AlertDescriptionProp,
+  AlertDescriptionProps,
+  AlertActionsProp,
+  AlertActionsProps,
+  AlertQueryErrorProp,
+  AlertQueryErrorProps,
+} from "./alert";

package/src/components/feedback/sheet.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+export function Sheet(props: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+export function SheetTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+export function SheetClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+export function SheetPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+export const SheetOverlay = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-slot="sheet-overlay"
+    className={cn(
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 flex flex-col gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md",
+        top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+      },
+    },
+    defaultVariants: { side: "right" },
+  },
+);
+
+interface SheetContentProps
+  extends
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {
+  showCloseButton?: boolean;
+}
+
+export const SheetContent = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, showCloseButton = true, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      data-slot="sheet-content"
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      {showCloseButton ? (
+        <DialogPrimitive.Close
+          data-slot="sheet-close"
+          className="ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+        >
+          <X className="size-4" aria-hidden="true" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      ) : null}
+    </DialogPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+
+export const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    data-slot="sheet-header"
+    className={cn("flex flex-col gap-1.5 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+
+export const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    data-slot="sheet-footer"
+    className={cn("mt-auto flex flex-col gap-2", className)}
+    {...props}
+  />
+);
+
+export const SheetTitle = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    data-slot="sheet-title"
+    className={cn("text-foreground text-lg font-semibold", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+
+export const SheetDescription = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    data-slot="sheet-description"
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = DialogPrimitive.Description.displayName;