@rovula/ui 0.1.14 → 0.1.16

package/dist/patterns/form-dialog/FormDialog.stories.js

@@ -0,0 +1,223 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from "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) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        open: { control: "boolean" },
+        title: { control: "text" },
+        description: { control: "text" },
+        scrollable: { control: "boolean" },
+    },
+};
+export default meta;
+const ContentArea = () => (_jsx("div", { className: "flex items-center justify-center bg-ramps-secondary-150 h-[200px] w-full rounded-sm", children: _jsx("p", { className: "typography-body3 text-text-contrast-max", children: "Content - Form Area" }) }));
+export const Default = {
+    args: {
+        open: false,
+        title: "Title",
+        description: "Subtitle description",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(FormDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), cancelAction: {
+                label: "Cancel",
+                onClick: () => updateArgs({ open: false }),
+            }, confirmAction: { label: "Confirm", disabled: true }, trigger: _jsx(Button, { fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Open" }), children: _jsx(ContentArea, {}) })));
+    },
+};
+export const WithExtraAction = {
+    args: {
+        open: false,
+        title: "Title",
+        description: "Subtitle description",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(FormDialog, Object.assign({}, 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: _jsx(Button, { fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Open (with extra action)" }), children: _jsx(ContentArea, {}) })));
+    },
+};
+export const WithForm = {
+    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 (_jsx(FormDialog, Object.assign({}, 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: _jsx(Button, { variant: "outline", fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Edit profile" }), children: _jsx("div", { className: "flex flex-col gap-4", children: _jsx(TextInput, { label: "Display name", required: true, value: name, onChange: (e) => setName(e.target.value), fullwidth: true }) }) })));
+    },
+};
+export const FigmaFormDefaultOpen = {
+    args: {
+        open: true,
+        title: "Title",
+        description: "Subtitle description",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(FormDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), cancelAction: {
+                label: "Cancel",
+                onClick: () => updateArgs({ open: false }),
+            }, confirmAction: { label: "Confirm", disabled: true }, trigger: _jsx(Button, { fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Open" }), children: _jsx(ContentArea, {}) })));
+    },
+};
+export const FigmaFormWithActionDefaultOpen = {
+    args: {
+        open: true,
+        title: "Title",
+        description: "Subtitle description",
+    },
+    render: (args) => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsx(FormDialog, Object.assign({}, args, { open: open, onOpenChange: (next) => updateArgs({ open: next }), extraAction: { label: "Medium" }, cancelAction: {
+                label: "Cancel",
+                onClick: () => updateArgs({ open: false }),
+            }, confirmAction: { label: "Confirm", disabled: true }, trigger: _jsx(Button, { fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Open" }), children: _jsx(ContentArea, {}) })));
+    },
+};
+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."),
+});
+const EditProfileDialog = ({ open, onOpenChange }) => {
+    const formId = React.useId();
+    const { methods, FormRoot } = useControlledForm({
+        defaultValues: { displayName: "", email: "" },
+        validationSchema: editProfileSchema,
+        mode: "onTouched",
+        reValidateMode: "onChange",
+    });
+    const isValid = methods.formState.isValid;
+    const handleClose = () => {
+        methods.reset();
+        onOpenChange(false);
+    };
+    const handleSubmit = (values) => {
+        console.log("submitted:", values);
+        handleClose();
+    };
+    return (_jsx(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 }, children: _jsxs(FormRoot, { id: formId, onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsx(Field, { name: "displayName", component: TextInput, componentProps: {
+                        label: "Display name",
+                        required: true,
+                        fullwidth: true,
+                    } }), _jsx(Field, { name: "email", component: TextInput, componentProps: { label: "Email", required: true, fullwidth: true } })] }) }));
+};
+const EditProfileDialogWithLoading = ({ open, onOpenChange, }) => {
+    const formId = React.useId();
+    const [isLoading, setIsLoading] = useState(false);
+    const { methods, FormRoot } = useControlledForm({
+        defaultValues: { displayName: "", email: "" },
+        validationSchema: editProfileSchema,
+        mode: "onTouched",
+        reValidateMode: "onChange",
+    });
+    const isValid = methods.formState.isValid;
+    const handleClose = () => {
+        methods.reset();
+        onOpenChange(false);
+    };
+    const handleSubmit = async (values) => {
+        setIsLoading(true);
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 2000));
+            console.log("saved:", values);
+            handleClose();
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return (_jsx(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,
+        }, children: _jsxs(FormRoot, { id: formId, onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsx(Field, { name: "displayName", component: TextInput, componentProps: {
+                        label: "Display name",
+                        required: true,
+                        fullwidth: true,
+                    } }), _jsx(Field, { name: "email", component: TextInput, componentProps: { label: "Email", required: true, fullwidth: true } })] }) }));
+};
+/**
+ * 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 = {
+    args: { open: false },
+    render: () => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Edit profile" }), _jsx(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 = {
+    args: { open: false },
+    render: () => {
+        const [{ open }, updateArgs] = useArgs();
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", fullwidth: false, onClick: () => updateArgs({ open: true }), children: "Edit profile (with loading)" }), _jsx(EditProfileDialogWithLoading, { open: open, onOpenChange: (next) => updateArgs({ open: next }) })] }));
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/AlertDialog/AlertDialog.tsx

@@ -19,7 +19,7 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 bg-modal-overlay z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
     ref={ref}
@@ -37,8 +37,8 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-32px)] max-w-[460px] translate-x-[-50%] translate-y-[-50%] gap-6 rounded-md bg-modal-surface px-6 py-8 text-text-contrast-max 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%]",
-        className
+        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-32px)] max-w-[460px] translate-x-[-50%] translate-y-[-50%] gap-6 rounded-md bg-modal-surface px-6 py-8 text-text-contrast-max 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}
     />
@@ -51,10 +51,7 @@ const AlertDialogHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col items-center gap-2 text-center",
-      className
-    )}
+    className={cn("flex flex-col items-center gap-2 text-center", className)}
     {...props}
   />
 );
@@ -65,10 +62,7 @@ const AlertDialogFooter = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-row items-center justify-center gap-4",
-      className
-    )}
+    className={cn("flex flex-row items-center justify-center gap-4", className)}
     {...props}
   />
 );
@@ -105,7 +99,11 @@ const AlertDialogAction = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Action
     ref={ref}
-    className={cn(buttonVariants({ fullwidth: false }), "w-[100px] justify-center", className)}
+    className={cn(
+      buttonVariants({ fullwidth: false }),
+      "w-[100px] justify-center",
+      className,
+    )}
     {...props}
   />
 ));
@@ -120,7 +118,7 @@ const AlertDialogCancel = React.forwardRef<
     className={cn(
       buttonVariants({ fullwidth: false, variant: "outline" }),
       "w-[100px] justify-center",
-      className
+      className,
     )}
     {...props}
   />

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/index.ts

@@ -52,6 +52,10 @@ export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
 export * from "./components/Form";
 
+// Patterns
+export * from "./patterns/confirm-dialog/ConfirmDialog";
+export * from "./patterns/form-dialog/FormDialog";
+
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";

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