index.tsx

import { createFileRoute } from "@tanstack/react-router"
import { FieldInfo, useAppForm } from "@/lib/form-context"
import { z } from "zod"
import { Button } from "@/components/ui/button"
import { toast } from "sonner"

export const Route = createFileRoute("/")({
  component: App,
})

const wishlistItemSchema = z.object({ name: z.string() })

const userSchema = z.object({
  firstName: z
    .string({ message: "First name is required" })
    .min(3, "First name must be at least 3 characters"),
  lastName: z.string(),
  wishlistItems: wishlistItemSchema
    .array()
    .min(1, "At least one wishlist item is required"),
})

type WishlistItemSchema = z.infer<typeof wishlistItemSchema>
type UserSchema = z.infer<typeof userSchema>

function App() {
  const form = useAppForm({
    defaultValues: {
      firstName: "",
      lastName: "",
      wishlistItems: [],
    } as UserSchema,
    onSubmit: async ({ value }) => {
      console.log(value)
      toast.success("Submitted!")
    },
    validators: {
      onChange: userSchema,
    },
  })

  const wishlistForm = useAppForm({
    defaultValues: {
      name: "",
    } as WishlistItemSchema,
    validators: {
      onChange: wishlistItemSchema,
    },
  })

  return (
    <div className="space-y-4 p-4 bg-slate-50 rounded shadow">
      <h1 className="text-xl font-bold">Simple Form Example</h1>
      <form
        className="space-y-4"
        onSubmit={(e) => {
          e.preventDefault()
          e.stopPropagation()
          form.handleSubmit()
        }}
      >
        <form.AppField
          name="firstName"
          children={(field) => <field.InputField label="First Name" />}
        />
        <form.AppField
          name="lastName"
          children={(field) => <field.InputField label="Last Name" />}
        />
        <div className="flex gap-4 items-end">
          <wishlistForm.AppField
            name="name"
            children={(field) => <field.InputField label="Wishlist Name" />}
          />
          <Button
            type="button"
            variant="outline"
            onClick={() => {
              form.pushFieldValue("wishlistItems", {
                name: wishlistForm.getFieldValue("name"),
              })
              wishlistForm.reset()
            }}
          >
            Add Wishlist Item
          </Button>
        </div>
        <form.Field
          name="wishlistItems"
          mode="array"
          children={(wishlistFields) => {
            return (
              <div className="space-y-4">
                <h2>Wishlist Items</h2>
                {!wishlistFields.state.value.length ? (
                  <p>No items</p>
                ) : (
                  wishlistFields.state.value.map((_, i) => (
                    <div key={i} className="flex gap-2 items-end">
                      <form.AppField
                        name={`wishlistItems[${i}].name`}
                        children={(field) => {
                          return (
                            <field.InputField
                              className="w-full flex-h"
                              label="Item Name"
                            />
                          )
                        }}
                      />
                      <Button
                        type="button"
                        variant="destructive"
                        onClick={() => wishlistFields.removeValue(i)}
                      >
                        Remove
                      </Button>
                    </div>
                  ))
                )}
                <FieldInfo field={wishlistFields} />
              </div>
            )
          }}
        />
        <form.AppForm>
          <form.SubmitButton label="Submit" />
        </form.AppForm>
      </form>

      <form.Subscribe selector={(state) => state.values}>
        {(values) => <pre>{JSON.stringify(values, null, 2)}</pre>}
      </form.Subscribe>
    </div>
  )
}