typing `withForm`

import { useAppForm, withForm } from "~/hooks/form";

const PersonalInfoSection = withForm({
  defaultValues: {
    firstName: "",
    lastName: "",
    email: "",
    address: {
      street: "",
      city: "",
      zipCode: "",
    },
  },
  render: ({ form }) => (
    <div class="section">
      <h3>Personal Information</h3>
      <form.AppField name="firstName">
        {(field) => <field.TextField label="First Name" />}
      </form.AppField>
      <form.AppField name="lastName">
        {(field) => <field.TextField label="Last Name" />}
      </form.AppField>
      <form.AppField name="email">
        {(field) => <field.TextField label="Email" />}
      </form.AppField>
    </div>
  ),
});

const AddressSection = withForm({
  render: ({ form }) => (
    <div class="section">
      <h3>Address</h3>
      <form.AppField name="address.street">
        {(field) => <field.TextField label="Street" />}
      </form.AppField>
      <form.AppField name="address.city">
        {(field) => <field.TextField label="City" />}
      </form.AppField>
      <form.AppField name="address.zipCode">
        {(field) => <field.TextField label="ZIP Code" />}
      </form.AppField>
    </div>
  ),
});

// Main form component
export function MainForm() {
  const form = useAppForm(() => ({
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      address: {
        street: "",
        city: "",
        zipCode: "",
      },
    },
    onSubmit: async ({ value }) => {
      console.log("Form submitted:", value);
    },
  }));

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
      }}
    >
      <PersonalInfoSection form={form} />
      <AddressSection form={form} />

      <form.AppForm>
        <form.SubmitButton label="Submit Form" />
      </form.AppForm>
    </form>
  );
}

import { useAppForm, withForm } from "~/hooks/form";

const PersonalInfoSection = withForm({
  defaultValues: {
    firstName: "",
    lastName: "",
    email: "",
    address: {
      street: "",
      city: "",
      zipCode: "",
    },
  },
  render: ({ form }) => (
    <div class="section">
      <h3>Personal Information</h3>
      <form.AppField name="firstName">
        {(field) => <field.TextField label="First Name" />}
      </form.AppField>
      <form.AppField name="lastName">
        {(field) => <field.TextField label="Last Name" />}
      </form.AppField>
      <form.AppField name="email">
        {(field) => <field.TextField label="Email" />}
      </form.AppField>
    </div>
  ),
});

const AddressSection = withForm({
  render: ({ form }) => (
    <div class="section">
      <h3>Address</h3>
      <form.AppField name="address.street">
        {(field) => <field.TextField label="Street" />}
      </form.AppField>
      <form.AppField name="address.city">
        {(field) => <field.TextField label="City" />}
      </form.AppField>
      <form.AppField name="address.zipCode">
        {(field) => <field.TextField label="ZIP Code" />}
      </form.AppField>
    </div>
  ),
});

// Main form component
export function MainForm() {
  const form = useAppForm(() => ({
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      address: {
        street: "",
        city: "",
        zipCode: "",
      },
    },
    onSubmit: async ({ value }) => {
      console.log("Form submitted:", value);
    },
  }));

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
      }}
    >
      <PersonalInfoSection form={form} />
      <AddressSection form={form} />

      <form.AppForm>
        <form.SubmitButton label="Submit Form" />
      </form.AppForm>
    </form>
  );
}