@rovula/ui 0.1.14 → 0.1.15

package/src/components/Dialog/Dialog.tsx

@@ -51,7 +51,7 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-32px)] max-w-[650px] translate-x-[-50%] translate-y-[-50%] flex-col gap-6 rounded-md bg-modal-surface p-8 text-text-g-contrast-medium shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 focus:outline-none focus-visible: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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          "fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-32px)] max-w-[650px] translate-x-[-50%] translate-y-[-50%] flex-col gap-6 rounded-md bg-modal-surface p-8 text-text-g-contrast-medium shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 focus:outline-none focus-visible:outline-none 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
           className,
         )}
         {...props}
@@ -103,10 +103,7 @@ const DialogFooter = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-row items-center justify-end gap-4",
-      className,
-    )}
+    className={cn("flex flex-row items-center justify-end gap-4", className)}
     {...props}
   />
 );
@@ -133,10 +130,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn(
-      "typography-body3 text-text-contrast-max",
-      className,
-    )}
+    className={cn("typography-body3 text-text-contrast-max", className)}
     {...props}
   />
 ));

package/src/components/Form/Form.tsx

@@ -110,11 +110,26 @@ export const useControlledForm = <TFieldValues extends FieldValues>({
     reValidateMode,
   });
 
-  return createControlledForm<TFieldValues>({
+  // Keep FormRoot component reference stable across re-renders.
+  // createControlledForm creates a new component type (via forwardRef) on every call —
+  // if FormRoot changes reference, React unmounts + remounts the entire form tree,
+  // causing inputs to lose focus whenever parent state changes (e.g. isValid).
+  const stableRef = React.useRef<ReturnType<
+    typeof createControlledForm<TFieldValues>
+  > | null>(null);
+
+  if (!stableRef.current) {
+    stableRef.current = createControlledForm<TFieldValues>({
+      methods,
+      defaultValues,
+      controllerRef,
+    });
+  }
+
+  return {
     methods,
-    defaultValues,
-    controllerRef,
-  });
+    FormRoot: stableRef.current.FormRoot,
+  };
 };
 
 const FormInner = <TFieldValues extends FieldValues>(

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";