@rovula/ui 0.1.14 → 0.1.16

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

@@ -0,0 +1,164 @@
+"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;
+  testId?: string;
+};
+
+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,
+  testId,
+}) => {
+  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 data-testid={testId}>
+        <AlertDialogHeader>
+          <AlertDialogTitle data-testid={testId && `${testId}-title`}>
+            {title}
+          </AlertDialogTitle>
+          {description && (
+            <AlertDialogDescription data-testid={testId && `${testId}-description`}>
+              {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,
+                testId: testId && `${testId}-type-to-confirm-input`,
+              }}
+            />
+          </FormRoot>
+        )}
+
+        <AlertDialogFooter>
+          {!hideCancelButton && (
+            <AlertDialogCancel
+              data-testid={testId && `${testId}-cancel-button`}
+              onClick={handleCancel}
+            >
+              {cancelLabel}
+            </AlertDialogCancel>
+          )}
+          <AlertDialogAction
+            type="submit"
+            form={requiresInput ? formId : undefined}
+            disabled={requiresInput && !isFormValid}
+            onClick={requiresInput ? undefined : () => onConfirm?.()}
+            data-testid={testId && `${testId}-confirm-button`}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+ConfirmDialog.displayName = "ConfirmDialog";

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

@@ -0,0 +1,437 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
+import { FormDialog } from "./FormDialog";
+import Button from "@/components/Button/Button";
+import { TextInput } from "@/components/TextInput/TextInput";
+import { useControlledForm, Field } from "@/components/Form";
+import * as yup from "yup";
+
+const meta = {
+  title: "Patterns/FormDialog",
+  component: FormDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    open: { control: "boolean" },
+    title: { control: "text" },
+    description: { control: "text" },
+    scrollable: { control: "boolean" },
+  },
+} satisfies Meta<typeof FormDialog>;
+
+export default meta;
+type Story = StoryObj<typeof FormDialog>;
+
+const ContentArea = () => (
+  <div className="flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm">
+    <p className="typography-body3 text-text-contrast-max">
+      Content - Form Area
+    </p>
+  </div>
+);
+
+export const Default: Story = {
+  args: {
+    open: false,
+    title: "Title",
+    description: "Subtitle description",
+  },
+  render: (args) => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <FormDialog
+        {...args}
+        open={open}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        cancelAction={{
+          label: "Cancel",
+          onClick: () => updateArgs({ open: false }),
+        }}
+        confirmAction={{ label: "Confirm", disabled: true }}
+        trigger={
+          <Button fullwidth={false} onClick={() => updateArgs({ open: true })}>
+            Open
+          </Button>
+        }
+      >
+        <ContentArea />
+      </FormDialog>
+    );
+  },
+};
+
+export const WithExtraAction: Story = {
+  args: {
+    open: false,
+    title: "Title",
+    description: "Subtitle description",
+  },
+  render: (args) => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <FormDialog
+        {...args}
+        open={open}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        extraAction={{
+          label: "Medium",
+          onClick: () => console.log("extra action"),
+        }}
+        cancelAction={{
+          label: "Cancel",
+          onClick: () => updateArgs({ open: false }),
+        }}
+        confirmAction={{ label: "Confirm", disabled: true }}
+        trigger={
+          <Button fullwidth={false} onClick={() => updateArgs({ open: true })}>
+            Open (with extra action)
+          </Button>
+        }
+      >
+        <ContentArea />
+      </FormDialog>
+    );
+  },
+};
+
+export const WithForm: Story = {
+  args: {
+    open: false,
+    title: "Edit profile",
+    description: "Make changes to your profile here.",
+  },
+  render: (args) => {
+    const [{ open }, updateArgs] = useArgs();
+    const [name, setName] = useState("");
+    const isValid = name.trim().length > 0;
+    return (
+      <FormDialog
+        {...args}
+        open={open}
+        onOpenChange={(next) => {
+          if (!next) setName("");
+          updateArgs({ open: next });
+        }}
+        cancelAction={{
+          label: "Cancel",
+          onClick: () => {
+            setName("");
+            updateArgs({ open: false });
+          },
+        }}
+        confirmAction={{
+          label: "Save changes",
+          disabled: !isValid,
+          onClick: () => {
+            console.log("save:", name);
+            updateArgs({ open: false });
+          },
+        }}
+        trigger={
+          <Button
+            variant="outline"
+            fullwidth={false}
+            onClick={() => updateArgs({ open: true })}
+          >
+            Edit profile
+          </Button>
+        }
+      >
+        <div className="flex flex-col gap-4">
+          <TextInput
+            label="Display name"
+            required
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            fullwidth
+          />
+        </div>
+      </FormDialog>
+    );
+  },
+};
+
+export const FigmaFormDefaultOpen: Story = {
+  args: {
+    open: true,
+    title: "Title",
+    description: "Subtitle description",
+  },
+  render: (args) => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <FormDialog
+        {...args}
+        open={open}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        cancelAction={{
+          label: "Cancel",
+          onClick: () => updateArgs({ open: false }),
+        }}
+        confirmAction={{ label: "Confirm", disabled: true }}
+        trigger={
+          <Button fullwidth={false} onClick={() => updateArgs({ open: true })}>
+            Open
+          </Button>
+        }
+      >
+        <ContentArea />
+      </FormDialog>
+    );
+  },
+};
+
+export const FigmaFormWithActionDefaultOpen: Story = {
+  args: {
+    open: true,
+    title: "Title",
+    description: "Subtitle description",
+  },
+  render: (args) => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <FormDialog
+        {...args}
+        open={open}
+        onOpenChange={(next) => updateArgs({ open: next })}
+        extraAction={{ label: "Medium" }}
+        cancelAction={{
+          label: "Cancel",
+          onClick: () => updateArgs({ open: false }),
+        }}
+        confirmAction={{ label: "Confirm", disabled: true }}
+        trigger={
+          <Button fullwidth={false} onClick={() => updateArgs({ open: true })}>
+            Open
+          </Button>
+        }
+      >
+        <ContentArea />
+      </FormDialog>
+    );
+  },
+};
+
+// ─── Real Form integration ────────────────────────────────────────────────────
+
+type EditProfileValues = {
+  displayName: string;
+  email: string;
+};
+
+const editProfileSchema = yup.object({
+  displayName: yup.string().required("Display name is required."),
+  email: yup
+    .string()
+    .required("Email is required.")
+    .email("Must be a valid email."),
+});
+
+type EditProfileDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+const EditProfileDialog = ({ open, onOpenChange }: EditProfileDialogProps) => {
+  const formId = React.useId();
+
+  const { methods, FormRoot } = useControlledForm<EditProfileValues>({
+    defaultValues: { displayName: "", email: "" },
+    validationSchema: editProfileSchema,
+    mode: "onTouched",
+    reValidateMode: "onChange",
+  });
+
+  const isValid = methods.formState.isValid;
+
+  const handleClose = () => {
+    methods.reset();
+    onOpenChange(false);
+  };
+
+  const handleSubmit = (values: EditProfileValues) => {
+    console.log("submitted:", values);
+    handleClose();
+  };
+
+  return (
+    <FormDialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) handleClose();
+        else onOpenChange(next);
+      }}
+      title="Edit profile"
+      description="Make changes to your profile here."
+      formId={formId}
+      cancelAction={{ label: "Cancel", onClick: handleClose }}
+      confirmAction={{ label: "Save changes", disabled: !isValid }}
+    >
+      <FormRoot
+        id={formId}
+        onSubmit={handleSubmit}
+        className="flex flex-col gap-4"
+      >
+        <Field<EditProfileValues, "displayName">
+          name="displayName"
+          component={TextInput}
+          componentProps={{
+            label: "Display name",
+            required: true,
+            fullwidth: true,
+          }}
+        />
+        <Field<EditProfileValues, "email">
+          name="email"
+          component={TextInput}
+          componentProps={{ label: "Email", required: true, fullwidth: true }}
+        />
+      </FormRoot>
+    </FormDialog>
+  );
+};
+
+const EditProfileDialogWithLoading = ({
+  open,
+  onOpenChange,
+}: EditProfileDialogProps) => {
+  const formId = React.useId();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { methods, FormRoot } = useControlledForm<EditProfileValues>({
+    defaultValues: { displayName: "", email: "" },
+    validationSchema: editProfileSchema,
+    mode: "onTouched",
+    reValidateMode: "onChange",
+  });
+
+  const isValid = methods.formState.isValid;
+
+  const handleClose = () => {
+    methods.reset();
+    onOpenChange(false);
+  };
+
+  const handleSubmit = async (values: EditProfileValues) => {
+    setIsLoading(true);
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      console.log("saved:", values);
+      handleClose();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <FormDialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next && !isLoading) handleClose();
+        else if (next) onOpenChange(next);
+      }}
+      title="Edit profile"
+      description="Make changes to your profile here."
+      formId={formId}
+      cancelAction={{
+        label: "Cancel",
+        onClick: handleClose,
+        disabled: isLoading,
+      }}
+      confirmAction={{
+        label: "Save changes",
+        disabled: !isValid || isLoading,
+        isLoading,
+      }}
+    >
+      <FormRoot
+        id={formId}
+        onSubmit={handleSubmit}
+        className="flex flex-col gap-4"
+      >
+        <Field<EditProfileValues, "displayName">
+          name="displayName"
+          component={TextInput}
+          componentProps={{
+            label: "Display name",
+            required: true,
+            fullwidth: true,
+          }}
+        />
+        <Field<EditProfileValues, "email">
+          name="email"
+          component={TextInput}
+          componentProps={{ label: "Email", required: true, fullwidth: true }}
+        />
+      </FormRoot>
+    </FormDialog>
+  );
+};
+
+/**
+ * Pattern A: useControlledForm
+ *
+ * Use when you need to:
+ * - access formState (isValid, isDirty) to control the confirm button
+ * - reset the form on close
+ * - trigger validation outside the form element
+ */
+export const WithRovulaForm: Story = {
+  args: { open: false },
+  render: () => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <>
+        <Button
+          variant="outline"
+          fullwidth={false}
+          onClick={() => updateArgs({ open: true })}
+        >
+          Edit profile
+        </Button>
+        <EditProfileDialog
+          open={open}
+          onOpenChange={(next) => updateArgs({ open: next })}
+        />
+      </>
+    );
+  },
+};
+
+/**
+ * Pattern B: useControlledForm + async API call + loading state
+ *
+ * Use when the confirm action calls an API.
+ * isLoading disables + shows spinner on the confirm button while the request is in flight.
+ */
+export const WithRovulaFormAndApiLoading: Story = {
+  args: { open: false },
+  render: () => {
+    const [{ open }, updateArgs] = useArgs();
+    return (
+      <>
+        <Button
+          variant="outline"
+          fullwidth={false}
+          onClick={() => updateArgs({ open: true })}
+        >
+          Edit profile (with loading)
+        </Button>
+        <EditProfileDialogWithLoading
+          open={open}
+          onOpenChange={(next) => updateArgs({ open: next })}
+        />
+      </>
+    );
+  },
+};