Merge pull request #100 from watershed-climate/sterling-04-03-fix_sub…

…mit_types

fix submit types

src/__tests__/createSchemaForm.test.tsx

@@ -37,12 +37,14 @@ const testIds = {
   booleanField: "_boolean-field",
 };
 
+function assertNever(_thing: never) {}
+
 describe("createSchemaForm", () => {
   it("should render a text field and a boolean field based on the mapping and schema", () => {
     const testSchema = z.object({
       textField: z.string(),
       textFieldTwo: z.string(),
-      booleanField: z.string(),
+      booleanField: z.boolean(),
       t: z.string(),
       t2: z.string(),
       t3: z.string(),
@@ -72,6 +74,44 @@ describe("createSchemaForm", () => {
     expect(screen.queryByTestId(testIds.textFieldTwo)).toBeTruthy();
     expect(screen.queryByTestId(testIds.booleanField)).toBeTruthy();
   });
+  it("should type the onSubmit properly", () => {
+    const testSchema = z.object({
+      textField: z.string(),
+      numberField: z.number(),
+      booleanField: z.boolean(),
+    });
+
+    render(
+      <TestForm
+        onSubmit={(v) => {
+          if (typeof v.textField !== "string") {
+            assertNever(v.textField);
+          }
+          if (typeof v.numberField !== "number") {
+            assertNever(v.numberField);
+          }
+          if (typeof v.booleanField !== "boolean") {
+            assertNever(v.booleanField);
+          }
+        }}
+        schema={testSchema}
+        props={{
+          textField: {
+            testId: testIds.textField,
+          },
+          numberField: {
+            testId: "number-field",
+          },
+          booleanField: {
+            testId: testIds.booleanField,
+          },
+        }}
+      />
+    );
+
+    // this test is just about types
+    expect(true).toBe(true);
+  });
   it("should render a text field and a boolean field based on the mapping and schema into slots in a custom form", () => {
     const testSchema = z.object({
       textField: z.string(),

src/__tests__/utils/testForm.tsx

@@ -40,6 +40,14 @@ function BooleanField(props: {
   return <input data-testid={props.testId} />;
 }
 
+function NumberField(props: {
+  control: Control<any>;
+  name: string;
+  testId: string;
+}) {
+  return <input data-testid={props.testId} />;
+}
+
 export const customFieldTestId = "custom";
 
 function CustomTextField(props: {
@@ -81,6 +89,7 @@ export const TestCustomFieldSchema = createUniqueFieldSchema(z.string(), "id");
 const mapping = [
   [z.string(), TextField] as const,
   [z.boolean(), BooleanField] as const,
+  [z.number(), NumberField] as const,
   [TestCustomFieldSchema, CustomTextField] as const,
   [z.enum(enumFieldValues), EnumField] as const,
 ] as const;

src/createSchemaForm.tsx

@@ -252,7 +252,7 @@ export type RTFFormProps<
   /**
    * A callback function that will be called with the data once the form has been submitted and validated successfully.
    */
-  onSubmit: RTFFormSubmitFn<RTFFormSchemaType>;
+  onSubmit: RTFFormSubmitFn<SchemaType>;
   /**
    * Initializes your form with default values. Is a deep partial, so all properties and nested properties are optional.
    */
@@ -584,7 +584,7 @@ function useSubmitter<SchemaType extends RTFFormSchemaType>({
   setError,
 }: {
   resolver: ReturnType<typeof zodResolver>;
-  onSubmit: RTFFormSubmitFn<RTFFormSchemaType>;
+  onSubmit: RTFFormSubmitFn<SchemaType>;
   setError: ReturnType<typeof useForm>["setError"];
 }) {
   const coerceUndefinedFieldsRef = useRef<Set<string>>(new Set());