first commit

calcom/packages/ui/components/form/inputs/Form.tsx

@@ -0,0 +1,42 @@
+import type { ReactElement, Ref } from "react";
+import React, { forwardRef } from "react";
+import type { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { FormProvider } from "react-hook-form";
+
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
+import { showToast } from "../../..";
+
+type FormProps<T extends object> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
+  JSX.IntrinsicElements["form"],
+  "onSubmit"
+>;
+
+const PlainForm = <T extends FieldValues>(props: FormProps<T>, ref: Ref<HTMLFormElement>) => {
+  const { form, handleSubmit, ...passThrough } = props;
+
+  return (
+    <FormProvider {...form}>
+      <form
+        ref={ref}
+        onSubmit={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+
+          form
+            .handleSubmit(handleSubmit)(event)
+            .catch((err) => {
+              // FIXME: Booking Pages don't have toast, so this error is never shown
+              showToast(`${getErrorFromUnknown(err).message}`, "error");
+            });
+        }}
+        {...passThrough}>
+        {props.children}
+      </form>
+    </FormProvider>
+  );
+};
+
+export const Form = forwardRef(PlainForm) as <T extends FieldValues>(
+  p: FormProps<T> & { ref?: Ref<HTMLFormElement> }
+) => ReactElement;