create-croissant 0.1.8 → 0.1.10

package/template/apps/web/src/routes/client-orpc.tsx

@@ -2,115 +2,136 @@ import * as React from "react"
 import { createFileRoute } from "@tanstack/react-router"
 import { Check, Pencil, Plus, Trash2 } from "lucide-react"
 import { toast } from "sonner"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useForm } from "@tanstack/react-form"
+import { z } from "zod"
 
 import { Button } from "@workspace/ui/components/button"
 import { Input } from "@workspace/ui/components/input"
+import {
+  Field,
+  FieldError,
+  FieldLabel,
+} from "@workspace/ui/components/field"
 
-import { orpc } from "../lib/orpc"
+import type { router } from "@workspace/orpc/router"
+import type { InferRouterInputs, InferRouterOutputs } from "@orpc/server"
+import { orpc } from "@/lib/orpc"
+
+type Inputs = InferRouterInputs<typeof router>
+type Outputs = InferRouterOutputs<typeof router>
+type Planet = Outputs["planets"]["getPlanets"][number]
+
+const planetSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  description: z.string(),
+  distance: z.string().refine((val) => !isNaN(parseFloat(val)), "Must be a number"),
+  diameter: z.string().refine((val) => !isNaN(parseFloat(val)), "Must be a number"),
+})
 
 export const Route = createFileRoute("/client-orpc")({
   component: ClientORPC,
 })
 
 function ClientORPC() {
-  const [planets, setPlanets] = React.useState<Array<any>>([])
-  const [loading, setLoading] = React.useState(true)
+  const queryClient = useQueryClient()
   const [editingId, setEditingId] = React.useState<number | null>(null)
   
-  // Form states
-  const [name, setName] = React.useState("")
-  const [description, setDescription] = React.useState("")
-  const [distance, setDistance] = React.useState("0")
-  const [diameter, setDiameter] = React.useState("0")
-
-  const fetchPlanets = async () => {
-    try {
-      const res = await orpc.getPlanets()
-      setPlanets(res)
-    } catch (err) {
-      console.error(err)
-    } finally {
-      setLoading(false)
-    }
-  }
+  const { data: planets = [], isLoading } = useQuery({
+    queryKey: ["planets"],
+    queryFn: () => orpc.planets.getPlanets(),
+  })
 
-  React.useEffect(() => {
-    fetchPlanets()
-  }, [])
+  const form = useForm({
+     defaultValues: {
+        name: "",
+        description: "",
+        distance: "0",
+        diameter: "0",
+      },
+      validators: {
+        onChange: planetSchema,
+      },
+      onSubmit: async ({ value }) => {
+      if (editingId) {
+        await updateMutation.mutateAsync({
+          id: editingId,
+          name: value.name,
+          description: value.description,
+          distanceFromSun: parseFloat(value.distance),
+          diameter: parseFloat(value.diameter),
+          hasRings: false,
+        })
+      } else {
+        await createMutation.mutateAsync({
+          name: value.name,
+          description: value.description,
+          distanceFromSun: parseFloat(value.distance),
+          diameter: parseFloat(value.diameter),
+          hasRings: false,
+        })
+      }
+    },
+  })
 
   const resetForm = () => {
-    setName("")
-    setDescription("")
-    setDistance("0")
-    setDiameter("0")
+    form.reset()
     setEditingId(null)
   }
 
-  const handleAdd = async () => {
-    const toastId = toast.loading("Adding planet...")
-    try {
-      await orpc.createPlanet({
-        name,
-        description,
-        distanceFromSun: parseFloat(distance),
-        diameter: parseFloat(diameter),
-        hasRings: false,
-      })
-      await fetchPlanets()
+  const createMutation = useMutation({
+    mutationFn: (input: Inputs["planets"]["createPlanet"]) => orpc.planets.createPlanet(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["planets"] })
       resetForm()
-      toast.success("Planet added successfully", { id: toastId })
-    } catch (err: any) {
-      console.error(err)
-      toast.error(err.message || "Failed to add planet", { id: toastId })
-    }
-  }
+      toast.success("Planet added successfully")
+    },
+    onError: (err) => {
+      toast.error(err.message || "Failed to add planet")
+    },
+  })
 
-  const handleUpdate = async (id: number) => {
-    const toastId = toast.loading("Updating planet...")
-    try {
-      await orpc.updatePlanet({
-        id,
-        name,
-        description,
-        distanceFromSun: parseFloat(distance),
-        diameter: parseFloat(diameter),
-        hasRings: false,
-      })
-      await fetchPlanets()
+  const updateMutation = useMutation({
+    mutationFn: (input: Inputs["planets"]["updatePlanet"]) => orpc.planets.updatePlanet(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["planets"] })
       resetForm()
-      toast.success("Planet updated successfully", { id: toastId })
-    } catch (err: any) {
-      console.error(err)
-      toast.error(err.message || "Failed to update planet", { id: toastId })
-    }
-  }
+      toast.success("Planet updated successfully")
+    },
+    onError: (err) => {
+      toast.error(err.message || "Failed to update planet")
+    },
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (input: Inputs["planets"]["deletePlanet"]) => orpc.planets.deletePlanet(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["planets"] })
+      toast.success("Planet deleted successfully")
+    },
+    onError: (err) => {
+      toast.error(err.message || "Failed to delete planet")
+    },
+  })
 
   const handleDelete = async (id: number) => {
     if (!confirm("Are you sure you want to delete this planet?")) return
-    const toastId = toast.loading("Deleting planet...")
-    try {
-      await orpc.deletePlanet({ id })
-      await fetchPlanets()
-      toast.success("Planet deleted successfully", { id: toastId })
-    } catch (err: any) {
-      console.error(err)
-      toast.error(err.message || "Failed to delete planet", { id: toastId })
-    }
+    await deleteMutation.mutateAsync({ id })
   }
 
-  const startEdit = (planet: any) => {
+  const startEdit = (planet: Planet) => {
     setEditingId(planet.id)
-    setName(planet.name)
-    setDescription(planet.description || "")
-    setDistance(planet.distanceFromSun.toString())
-    setDiameter(planet.diameter.toString())
+    form.setFieldValue("name", planet.name)
+    form.setFieldValue("description", planet.description || "")
+    form.setFieldValue("distance", planet.distanceFromSun.toString())
+    form.setFieldValue("diameter", planet.diameter.toString())
   }
 
   return (
     <div className="flex flex-col gap-8">
       <div>
         <h1 className="text-2xl font-bold mb-2">Client + oRPC CRUD</h1>
-        <p className="text-muted-foreground">Manage planets directly from the client using oRPC mutations.</p>
+        <p className="text-muted-foreground">Manage planets directly from the client using TanStack Query, TanStack Form and oRPC.</p>
       </div>
 
       <div className="rounded-lg border p-6 bg-muted/30">
@@ -118,45 +139,120 @@ function ClientORPC() {
           {editingId ? <Pencil className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
           {editingId ? "Edit Planet" : "Add New Planet"}
         </h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Name</label>
-            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Mars" />
-          </div>
-          <div className="space-y-2">
-            <label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Description</label>
-            <Input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="The red planet" />
-          </div>
-          <div className="space-y-2">
-            <label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Distance (M km)</label>
-            <Input type="number" value={distance} onChange={(e) => setDistance(e.target.value)} />
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            form.handleSubmit()
+          }}
+        >
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <form.Field
+              name="name"
+              children={(field) => (
+                <Field data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
+                  <FieldLabel htmlFor={field.name}>Name</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="Mars"
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="description"
+              children={(field) => (
+                <Field data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
+                  <FieldLabel htmlFor={field.name}>Description</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="The red planet"
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="distance"
+              children={(field) => (
+                <Field data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
+                  <FieldLabel htmlFor={field.name}>Distance (M km)</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    type="number"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="diameter"
+              children={(field) => (
+                <Field data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
+                  <FieldLabel htmlFor={field.name}>Diameter (km)</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    type="number"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
           </div>
-          <div className="space-y-2">
-            <label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Diameter (km)</label>
-            <Input type="number" value={diameter} onChange={(e) => setDiameter(e.target.value)} />
+          <div className="mt-6 flex gap-2">
+            <form.Subscribe
+              selector={(state) => [state.canSubmit, state.isSubmitting]}
+              children={([canSubmit, isSubmitting]) => (
+                <>
+                  {editingId ? (
+                    <>
+                      <Button 
+                        type="submit"
+                        className="flex items-center gap-2"
+                        disabled={!canSubmit || isSubmitting || updateMutation.isPending}
+                      >
+                        <Check className="h-4 w-4" /> {isSubmitting || updateMutation.isPending ? "Saving..." : "Save Changes"}
+                      </Button>
+                      <Button variant="outline" type="button" onClick={resetForm} disabled={isSubmitting || updateMutation.isPending}>
+                        Cancel
+                      </Button>
+                    </>
+                  ) : (
+                    <Button 
+                      type="submit"
+                      className="flex items-center gap-2"
+                      disabled={!canSubmit || isSubmitting || createMutation.isPending}
+                    >
+                      <Plus className="h-4 w-4" /> {isSubmitting || createMutation.isPending ? "Adding..." : "Add Planet"}
+                    </Button>
+                  )}
+                </>
+              )}
+            />
           </div>
-        </div>
-        <div className="mt-6 flex gap-2">
-          {editingId ? (
-            <>
-              <Button onClick={() => handleUpdate(editingId)} className="flex items-center gap-2">
-                <Check className="h-4 w-4" /> Save Changes
-              </Button>
-              <Button variant="outline" onClick={resetForm}>
-                Cancel
-              </Button>
-            </>
-          ) : (
-            <Button onClick={handleAdd} className="flex items-center gap-2">
-              <Plus className="h-4 w-4" /> Add Planet
-            </Button>
-          )}
-        </div>
+        </form>
       </div>
 
       <div className="space-y-4">
         <h2 className="font-semibold text-lg">Current Planets</h2>
-        {loading ? (
+        {isLoading ? (
           <p>Loading planets...</p>
         ) : planets.length === 0 ? (
           <p className="text-gray-500 italic">No planets found.</p>
@@ -179,7 +275,12 @@ function ClientORPC() {
                   <Button variant="outline" size="icon" onClick={() => startEdit(planet)}>
                     <Pencil className="h-4 w-4" />
                   </Button>
-                  <Button variant="destructive" size="icon" onClick={() => handleDelete(planet.id)}>
+                  <Button 
+                    variant="destructive" 
+                    size="icon" 
+                    onClick={() => handleDelete(planet.id)}
+                    disabled={deleteMutation.isPending}
+                  >
                     <Trash2 className="h-4 w-4" />
                   </Button>
                 </div>

package/template/apps/web/src/routes/dashboard.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute, redirect } from "@tanstack/react-router"
-import { getSessionFn } from "../lib/auth-utils"
-import { authClient } from "../lib/auth-client"
-import { orpc } from "../lib/orpc"
+import { getSessionFn } from "@/lib/auth-utils"
+import { authClient } from "@/lib/auth-client"
+import { orpc } from "@/lib/orpc"
 
 export const Route = createFileRoute("/dashboard")({
   beforeLoad: async () => {

package/template/apps/web/src/routes/index.tsx

@@ -1,12 +1,17 @@
 import { Link, createFileRoute } from "@tanstack/react-router"
 import { Button } from "@workspace/ui/components/button"
-import { orpc } from "../lib/orpc"
+import type { router } from "@workspace/orpc/router"
+import type { InferRouterOutputs } from "@orpc/server"
+import { orpc } from "@/lib/orpc"
+
+type Outputs = InferRouterOutputs<typeof router>
+type Planet = Outputs["planets"]["getPlanets"][number]
 
 export const Route = createFileRoute("/")({
   loader: async () => {
     const [helloRes, planets] = await Promise.all([
       orpc.hello({ name: "TanStack Start" }),
-      orpc.getPlanets(),
+      orpc.planets.getPlanets(),
     ])
     return { 
       message: helloRes.message,
@@ -32,7 +37,7 @@ function App() {
               <p className="text-gray-500 italic">No planets found in the database. Run `db:push` and seed data if needed.</p>
             ) : (
               <ul className="grid grid-cols-1 gap-2">
-                {planets.map((planet) => (
+                {planets.map((planet: Planet) => (
                   <li key={planet.id} className="rounded-md border p-3 bg-white shadow-sm">
                     <span className="font-bold">{planet.name}</span> - {planet.description}
                   </li>

package/template/apps/web/src/routes/isr.tsx

@@ -1,11 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router"
-import { orpc } from "../lib/orpc"
+import { orpc } from "@/lib/orpc"
 
 export const Route = createFileRoute("/isr")({
   loader: async () => {
     // In a real ISR scenario, this would be cached on the server
     // For this example, we'll fetch planets via oRPC
-    const planets = await orpc.getPlanets()
+    const planets = await orpc.planets.getPlanets()
     
     return {
       generatedAt: new Date().toISOString(),

package/template/apps/web/src/routes/login.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router"
-import { LoginForm } from "../components/login-form"
+import { LoginForm } from "@/components/login-form"
 
 export const Route = createFileRoute("/login")({
   component: Login,

package/template/apps/web/src/routes/signup.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router"
-import { SignupForm } from "../components/signup-form"
+import { SignupForm } from "@/components/signup-form"
 
 export const Route = createFileRoute("/signup")({
   component: Signup,

package/template/apps/web/src/routes/ssr-orpc-auth.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, redirect } from "@tanstack/react-router"
-import { getSessionFn } from "../lib/auth-utils"
-import { orpc } from "../lib/orpc"
+import { getSessionFn } from "@/lib/auth-utils"
+import { orpc } from "@/lib/orpc"
 
 export const Route = createFileRoute("/ssr-orpc-auth")({
   beforeLoad: async () => {