first commit

common/resources/client/ui/forms/form.tsx

@@ -0,0 +1,44 @@
+import {
+  FieldValues,
+  FormProvider,
+  SubmitHandler,
+  UseFormReturn,
+} from 'react-hook-form';
+import {FocusEventHandler, ReactNode} from 'react';
+
+interface Props<T extends FieldValues> {
+  children: ReactNode;
+  form: UseFormReturn<T>;
+  className?: string;
+  onSubmit: SubmitHandler<T>;
+  onBeforeSubmit?: () => void;
+  onBlur?: FocusEventHandler<HTMLFormElement>;
+  id?: string;
+}
+export function Form<T extends FieldValues>({
+  children,
+  onBeforeSubmit,
+  onSubmit,
+  form,
+  className,
+  id,
+  onBlur,
+}: Props<T>) {
+  return (
+    <FormProvider {...form}>
+      <form
+        id={id}
+        onBlur={onBlur}
+        className={className}
+        onSubmit={e => {
+          // prevent parent forms from submitting, if nested
+          e.stopPropagation();
+          onBeforeSubmit?.();
+          form.handleSubmit(onSubmit)(e);
+        }}
+      >
+        {children}
+      </form>
+    </FormProvider>
+  );
+}