+
+
+
+ );
+}
diff --git a/examples/tanstack-form/src/EditOrder.tsx b/examples/tanstack-form/src/EditOrder.tsx
new file mode 100644
index 0000000000..edf4b4d45e
--- /dev/null
+++ b/examples/tanstack-form/src/EditOrder.tsx
@@ -0,0 +1,59 @@
+import { CoPlainText, Loaded } from "jazz-tools";
+import { useCoState } from "jazz-tools/react";
+import { LinkToHome } from "./LinkToHome.tsx";
+import { OrderForm, OrderFormData } from "./OrderForm.tsx";
+import { OrderThumbnail } from "./OrderThumbnail.tsx";
+import { BubbleTeaOrder } from "./schema.ts";
+
+export type LoadedBubbleTeaOrder = Loaded<
+ typeof BubbleTeaOrder,
+ { addOns: { $each: true }; instructions: true }
+>;
+
+export function EditOrder(props: { id: string }) {
+ const order = useCoState(BubbleTeaOrder, props.id, {
+ resolve: { addOns: true, instructions: true },
+ });
+
+ if (!order) return;
+
+ const onSubmit = (updatedOrder: OrderFormData) => {
+ // Apply changes to the original Jazz order
+ order.baseTea = updatedOrder.baseTea;
+ order.deliveryDate = updatedOrder.deliveryDate;
+ order.withMilk = updatedOrder.withMilk;
+ order.addOns.applyDiff(updatedOrder.addOns);
+
+ // `applyDiff` requires nested objects to be CoValues as well
+ order.instructions ??= CoPlainText.create("");
+ if (updatedOrder.instructions) {
+ order.instructions.applyDiff(updatedOrder.instructions);
+ }
+ };
+
+ const originalOrder: OrderFormData = order.toJSON();
+ // Convert timestamp to Date
+ originalOrder.deliveryDate = new Date(originalOrder.deliveryDate);
+
+ return (
+ <>
+
+
+
+
Saved order:
+
+
+
+
+
+ Edit your bubble tea order 🧋
+
+
+
+
+ );
+}
diff --git a/examples/tanstack-form/src/LinkToHome.tsx b/examples/tanstack-form/src/LinkToHome.tsx
new file mode 100644
index 0000000000..fc6c69a4b7
--- /dev/null
+++ b/examples/tanstack-form/src/LinkToHome.tsx
@@ -0,0 +1,7 @@
+export function LinkToHome() {
+ return (
+
+ < Back to all orders
+
+ );
+}
diff --git a/examples/tanstack-form/src/OrderForm.tsx b/examples/tanstack-form/src/OrderForm.tsx
new file mode 100644
index 0000000000..2722bac195
--- /dev/null
+++ b/examples/tanstack-form/src/OrderForm.tsx
@@ -0,0 +1,210 @@
+import { useForm } from "@tanstack/react-form";
+import { z } from "jazz-tools";
+import { OrderThumbnail } from "./OrderThumbnail.tsx";
+import {
+ BubbleTeaAddOnTypes,
+ BubbleTeaBaseTeaTypes,
+ BubbleTeaOrder,
+} from "./schema.ts";
+
+// TanStack Form can leverage Jazz's Zod schema to validate the form
+const orderZodSchemaShape = BubbleTeaOrder.getZodSchema().shape;
+const orderFormSchema = z.object({
+ ...orderZodSchemaShape,
+ baseTea: orderZodSchemaShape.baseTea.refine((value) => value, {
+ error: "Please select your preferred base tea.",
+ }),
+ deliveryDate: z.date("Plese select a delivery date."),
+ // TanStack Form doesn't support CoList fields, so we need to convert them to arrays
+ addOns: z
+ .array(z.enum(BubbleTeaAddOnTypes))
+ .min(1, "Please select at least one add-on."),
+ // TanStack Form doesn't support CoPlainText fields, so we need to convert them to strings
+ instructions: z.string().optional(),
+});
+
+export type OrderFormData = z.infer;
+
+export function OrderForm({
+ order: originalOrder,
+ onSubmit,
+ validateOn,
+}: {
+ order: Partial;
+ onSubmit: (order: OrderFormData) => void;
+ validateOn: "submit" | "change";
+}) {
+ const form = useForm({
+ defaultValues: originalOrder,
+ validators: {
+ onSubmit: validateOn === "submit" ? orderFormSchema : undefined,
+ onChange: validateOn === "change" ? orderFormSchema : undefined,
+ },
+ onSubmit: ({ value }) => {
+ // If the form is not valid according to orderFormSchema, the value will not be submitted
+ onSubmit(value as OrderFormData);
+ },
+ });
+
+ return (
+