@rovula/ui 0.1.13 → 0.1.15

package/src/patterns/confirm-dialog/ConfirmDialog.stories.tsx

@@ -0,0 +1,193 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
+import { ConfirmDialog } from "./ConfirmDialog";
+import Button from "@/components/Button/Button";
+
+const meta = {
+  title: "Patterns/ConfirmDialog",
+  component: ConfirmDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    open: { control: "boolean" },
+    typeToConfirm: { control: "text" },
+    title: { control: "text" },
+    description: { control: "text" },
+    confirmLabel: { control: "text" },
+    cancelLabel: { control: "text" },
+  },
+} satisfies Meta<typeof ConfirmDialog>;
+
+export default meta;
+type Story = StoryObj<typeof ConfirmDialog>;
+
+export const Default: Story = {
+  args: {
+    open: false,
+    title: "Are you sure?",
+    description: "This action cannot be undone.",
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+  },
+  render: (args) => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <ConfirmDialog
+        {...args}
+        open={open}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        onConfirm={() => updateArgs({ open: false })}
+        onCancel={() => updateArgs({ open: false })}
+        trigger={
+          <Button fullwidth={false} onClick={() => updateArgs({ open: true })}>
+            Open
+          </Button>
+        }
+      />
+    );
+  },
+};
+
+export const WithoutDescription: Story = {
+  args: {
+    open: false,
+    title: "Delete item?",
+    confirmLabel: "Delete",
+    cancelLabel: "Cancel",
+  },
+  render: (args) => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <ConfirmDialog
+        {...args}
+        open={open}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        onConfirm={() => updateArgs({ open: false })}
+        onCancel={() => updateArgs({ open: false })}
+        trigger={
+          <Button
+            fullwidth={false}
+            color="error"
+            onClick={() => updateArgs({ open: true })}
+          >
+            Delete
+          </Button>
+        }
+      />
+    );
+  },
+};
+
+export const WithoutCancelButton: Story = {
+  args: {
+    open: false,
+    title: "Are you sure?",
+    description: "This action cannot be undone.",
+    confirmLabel: "Confirm",
+    hideCancelButton: true,
+  },
+  render: (args) => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <ConfirmDialog
+        {...args}
+        open={open}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        onConfirm={() => updateArgs({ open: false })}
+        onCancel={() => updateArgs({ open: false })}
+        trigger={
+          <Button
+            fullwidth={false}
+            color="error"
+            onClick={() => updateArgs({ open: true })}
+          >
+            Confirm
+          </Button>
+        }
+      />
+    );
+  },
+};
+
+export const RequireConfirmText: Story = {
+  args: {
+    open: false,
+    title: "Title",
+    description: "Subtitle description",
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+    typeToConfirm: "confirm",
+  },
+  render: (args) => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <ConfirmDialog
+        {...args}
+        open={open}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        onConfirm={() => updateArgs({ open: false })}
+        onCancel={() => updateArgs({ open: false })}
+        trigger={
+          <Button fullwidth={false} onClick={() => updateArgs({ open: true })}>
+            Open (require confirm)
+          </Button>
+        }
+      />
+    );
+  },
+};
+
+export const FigmaDefaultOpen: Story = {
+  args: {
+    open: false,
+    title: "Title",
+    description: "Subtitle description",
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+  },
+  render: (args) => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <ConfirmDialog
+        {...args}
+        open={open}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        onConfirm={() => updateArgs({ open: false })}
+        onCancel={() => updateArgs({ open: false })}
+      />
+    );
+  },
+};
+
+export const FigmaRequirePasswordDefaultOpen: Story = {
+  args: {
+    open: false,
+    title: "Title",
+    description: "Subtitle description",
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+    typeToConfirm: "confirm",
+  },
+  render: (args) => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <ConfirmDialog
+        {...args}
+        open={open}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        onConfirm={() => updateArgs({ open: false })}
+        onCancel={() => updateArgs({ open: false })}
+      />
+    );
+  },
+};

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import * as React from "react";
+import * as yup from "yup";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogTrigger,
+} from "@/components/AlertDialog/AlertDialog";
+import { useControlledForm, Field } from "@/components/Form";
+import { TextInput } from "@/components/TextInput/TextInput";
+
+export type ConfirmDialogProps = {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title: string;
+  description?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  /** Fires whenever the dialog closes, regardless of how (cancel button, overlay, Escape). */
+  onClose?: () => void;
+  trigger?: React.ReactNode;
+  /**
+   * When provided, the user must type this exact text before the confirm button is enabled.
+   * e.g. typeToConfirm="confirm" or typeToConfirm="delete"
+   */
+  typeToConfirm?: string;
+  /**
+   * When true, hides the cancel button — useful for info/error alerts that only need one action.
+   */
+  hideCancelButton?: boolean;
+};
+
+type ConfirmFormValues = { confirmInput: string };
+
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  onClose,
+  trigger,
+  typeToConfirm,
+  hideCancelButton = false,
+}) => {
+  const formId = React.useId();
+  const requiresInput = !!typeToConfirm;
+
+  const validationSchema = React.useMemo(
+    () =>
+      yup.object({
+        confirmInput: yup
+          .string()
+          .required("This field is required.")
+          .test(
+            "type-to-confirm",
+            `Please type '${typeToConfirm}' to proceed`,
+            (value) => value === typeToConfirm,
+          ),
+      }),
+    [typeToConfirm],
+  );
+
+  const { methods, FormRoot } = useControlledForm<ConfirmFormValues>({
+    defaultValues: { confirmInput: "" },
+    validationSchema,
+    mode: "onTouched",
+    reValidateMode: "onChange",
+  });
+
+  const isFormValid = methods.formState.isValid;
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen) {
+      methods.reset();
+      onClose?.();
+    }
+    onOpenChange?.(nextOpen);
+  };
+
+  const handleCancel = () => {
+    methods.reset();
+    onCancel?.();
+    onClose?.();
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={handleOpenChange}>
+      {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description && (
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          )}
+        </AlertDialogHeader>
+
+        {requiresInput && (
+          <FormRoot
+            id={formId}
+            className="flex flex-col gap-4 w-full"
+            onSubmit={() => onConfirm?.()}
+          >
+            <p className="typography-small1 text-text-contrast-max">
+              Type &ldquo;{typeToConfirm}&rdquo; to proceed.
+            </p>
+            <Field<ConfirmFormValues, "confirmInput">
+              name="confirmInput"
+              component={TextInput}
+              componentProps={{
+                label: "Type to confirm",
+                required: true,
+                hasClearIcon: true,
+                keepFooterSpace: true,
+                fullwidth: true,
+              }}
+            />
+          </FormRoot>
+        )}
+
+        <AlertDialogFooter>
+          {!hideCancelButton && (
+            <AlertDialogCancel onClick={handleCancel}>
+              {cancelLabel}
+            </AlertDialogCancel>
+          )}
+          <AlertDialogAction
+            type="submit"
+            form={requiresInput ? formId : undefined}
+            disabled={requiresInput && !isFormValid}
+            onClick={requiresInput ? undefined : () => onConfirm?.()}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+ConfirmDialog.displayName = "ConfirmDialog";