@rovula/ui 0.1.14 → 0.1.16

package/src/patterns/form-dialog/FormDialog.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import * as React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+  DialogTrigger,
+} from "@/components/Dialog/Dialog";
+import Button from "@/components/Button/Button";
+import Loading from "@/components/Loading/Loading";
+
+export type FormDialogAction = {
+  label: string;
+  onClick?: () => void;
+  variant?: React.ComponentProps<typeof Button>["variant"];
+  color?: React.ComponentProps<typeof Button>["color"];
+  disabled?: boolean;
+  isLoading?: boolean;
+  type?: "button" | "submit" | "reset";
+};
+
+export type FormDialogProps = {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title: string;
+  description?: string;
+  children?: React.ReactNode;
+  trigger?: React.ReactNode;
+  /**
+   * Primary action (right side of footer).
+   */
+  confirmAction?: FormDialogAction;
+  /**
+   * Secondary cancel action (right side of footer, outline style).
+   */
+  cancelAction?: FormDialogAction;
+  /**
+   * Optional extra action placed on the left side of the footer.
+   */
+  extraAction?: FormDialogAction;
+  scrollable?: boolean;
+  className?: string;
+  /**
+   * When provided, the confirm button becomes type="submit" and is linked to this form id.
+   * Use together with a <Form id={formId} .../> inside children.
+   */
+  formId?: string;
+  testId?: string;
+};
+
+export const FormDialog: React.FC<FormDialogProps> = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  trigger,
+  confirmAction,
+  cancelAction,
+  extraAction,
+  scrollable = false,
+  className,
+  formId,
+  testId,
+}) => {
+  const hasFooter = confirmAction || cancelAction || extraAction;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+      <DialogContent className={className} data-testid={testId}>
+        <DialogHeader>
+          <DialogTitle data-testid={testId && `${testId}-title`}>{title}</DialogTitle>
+          {description && (
+            <DialogDescription data-testid={testId && `${testId}-description`}>
+              {description}
+            </DialogDescription>
+          )}
+        </DialogHeader>
+
+        {children && (
+          <DialogBody scrollable={scrollable}>{children}</DialogBody>
+        )}
+
+        {hasFooter && (
+          <DialogFooter className={extraAction ? "justify-between" : undefined}>
+            {extraAction && (
+              <Button
+                type={extraAction.type ?? "button"}
+                variant={extraAction.variant ?? "outline"}
+                color={extraAction.color ?? "secondary"}
+                fullwidth={false}
+                disabled={extraAction.disabled}
+                isLoading={extraAction.isLoading}
+                onClick={extraAction.onClick}
+                data-testid={testId && `${testId}-extra-button`}
+              >
+                {extraAction.label}
+              </Button>
+            )}
+            <div className="flex items-center gap-4">
+              {cancelAction && (
+                <Button
+                  type={cancelAction.type ?? "button"}
+                  variant={cancelAction.variant ?? "outline"}
+                  color={cancelAction.color ?? "primary"}
+                  fullwidth={false}
+                  disabled={cancelAction.disabled}
+                  isLoading={cancelAction.isLoading}
+                  onClick={cancelAction.onClick}
+                  data-testid={testId && `${testId}-cancel-button`}
+                >
+                  {cancelAction.label}
+                </Button>
+              )}
+              {confirmAction && (
+                <Button
+                  type={formId ? "submit" : confirmAction.type ?? "button"}
+                  form={formId}
+                  variant={confirmAction.variant ?? "solid"}
+                  color={confirmAction.color ?? "primary"}
+                  fullwidth={false}
+                  disabled={confirmAction.disabled}
+                  isLoading={confirmAction.isLoading}
+                  onClick={confirmAction.onClick}
+                  data-testid={testId && `${testId}-confirm-button`}
+                >
+                  {confirmAction.label}
+                </Button>
+              )}
+            </div>
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+FormDialog.displayName = "FormDialog";