@douglasneuroinformatics/libui 3.7.6 → 3.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "3.7.6",
+  "version": "3.8.0",
   "packageManager": "pnpm@9.14.2",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",

package/src/components/Form/Form.stories.tsx

@@ -18,20 +18,24 @@ const $ExampleFormData = z.object({
   booleanCheck: z.boolean().optional(),
   booleanRadio: z.boolean().optional(),
   recordArray: z.array(
-    z.object({
-      recordArrayStringInput: z.string(),
-      showRecordArrayDynamicField: z.boolean(),
-      recordArrayDynamicField: z.string().optional()
-    })
+    z
+      .object({
+        recordArrayStringInput: z.string(),
+        showRecordArrayDynamicField: z.boolean(),
+        recordArrayDynamicField: z.string()
+      })
+      .partial()
   ),
   date: z.date().optional(),
   numberInput: z.number().optional(),
   numberSlider: z.number().optional(),
-  numberRecord: z.object({
-    q1: z.number(),
-    q2: z.number(),
-    q3: z.number()
-  }),
+  numberRecord: z
+    .object({
+      q1: z.number(),
+      q2: z.number(),
+      q3: z.number()
+    })
+    .partial(),
   numberRadio: z.number().min(1).max(5).int().optional(),
   numberSelect: z.number().min(1).max(5).int().optional(),
   stringSelect: z.enum(['a', 'b', 'c']).optional(),

package/src/components/Form/Form.tsx

@@ -13,6 +13,7 @@ import type { Promisable } from 'type-fest';
 import { z } from 'zod';
 
 import { useTranslation } from '@/hooks';
+import { cn } from '@/utils';
 
 import { Button } from '../Button';
 import { Heading } from '../Heading';
@@ -40,6 +41,7 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
   resetBtn?: boolean;
   revalidateOnBlur?: boolean;
   submitBtnLabel?: string;
+  suspendWhileSubmitting?: boolean;
   validationSchema: z.ZodType<TData>;
 };
 
@@ -58,6 +60,7 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
   resetBtn,
   revalidateOnBlur,
   submitBtnLabel,
+  suspendWhileSubmitting,
   validationSchema,
   ...props
 }: FormProps<TSchema, TData>) => {
@@ -67,6 +70,7 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
   const [values, setValues] = useState<PartialFormDataType<TData>>(
     initialValues ? getInitialValues(initialValues) : {}
   );
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleError = (error: z.ZodError<TData>) => {
     const fieldErrors: FormErrors<TData> = {};
@@ -97,14 +101,21 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
   };
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const result = await validationSchema.safeParseAsync(values);
-    if (result.success) {
-      reset();
-      await onSubmit(result.data);
-    } else {
-      console.error(result.error.issues);
-      handleError(result.error);
+    const minSubmitTime = new Promise((resolve) => setTimeout(resolve, 500));
+    try {
+      setIsSubmitting(true);
+      event.preventDefault();
+      const result = await validationSchema.safeParseAsync(values);
+      if (result.success) {
+        reset();
+        await onSubmit(result.data);
+      } else {
+        console.error(result.error.issues);
+        handleError(result.error);
+      }
+    } finally {
+      await minSubmitTime;
+      setIsSubmitting(false);
     }
   };
 
@@ -128,6 +139,8 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
     revalidate();
   }, [resolvedLanguage]);
 
+  const isSuspended = Boolean(suspendWhileSubmitting && isSubmitting);
+
   return (
     <form
       autoComplete="off"
@@ -176,8 +189,28 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
       <div className="flex w-full gap-3">
         {additionalButtons?.left}
         {/** Note - aria-label is used for testing in downstream packages */}
-        <Button aria-label="Submit" className="block w-full" disabled={readOnly} type="submit" variant="primary">
+        <Button
+          aria-label="Submit"
+          className="flex w-32 items-center justify-center gap-2"
+          disabled={readOnly || isSuspended}
+          type="submit"
+          variant="primary"
+        >
           {submitBtnLabel ?? t('form.submit')}
+          <svg
+            className={cn('hidden h-4 w-4 animate-spin', isSuspended && 'block')}
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
         </Button>
         {resetBtn && (
           <Button