@rovula/ui 0.1.14 → 0.1.15

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 })}
+        />
+      </>
+    );
+  },
+};

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

@@ -0,0 +1,137 @@
+"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;
+};
+
+export const FormDialog: React.FC<FormDialogProps> = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  trigger,
+  confirmAction,
+  cancelAction,
+  extraAction,
+  scrollable = false,
+  className,
+  formId,
+}) => {
+  const hasFooter = confirmAction || cancelAction || extraAction;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+      <DialogContent className={className}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && (
+            <DialogDescription>{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}
+              >
+                {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}
+                >
+                  {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}
+                >
+                  {confirmAction.label}
+                </Button>
+              )}
+            </div>
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+FormDialog.displayName = "FormDialog";