create-croissant 0.1.6 → 0.1.8

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Scaffold a new project using the Croissant Stack",
   "repository": {
     "type": "git",

package/template/apps/web/package.json

@@ -18,7 +18,9 @@
     "@noble/ciphers": "^2.2.0",
     "@orpc/client": "^1.14.0",
     "@orpc/server": "^1.14.0",
+    "@orpc/tanstack-query": "^1.14.0",
     "@tailwindcss/vite": "^4.2.4",
+    "@tanstack/react-query": "^5.99.2",
     "@tanstack/react-router": "^1.132.0",
     "@tanstack/react-start": "^1.132.0",
     "@tanstack/router-plugin": "^1.132.0",

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

@@ -1,5 +1,6 @@
 import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"
 import { SidebarProvider, SidebarTrigger } from "@workspace/ui/components/sidebar"
+import { Toaster } from "@workspace/ui/components/sonner"
 
 import appCss from "@workspace/ui/globals.css?url"
 import { AppSidebar } from "@/components/app-sidebar"
@@ -45,6 +46,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
               {children}
             </div>
           </main>
+          <Toaster />
         </SidebarProvider>
         <Scripts />
       </body>

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

@@ -1,5 +1,11 @@
 import * as React from "react"
 import { createFileRoute } from "@tanstack/react-router"
+import { Check, Pencil, Plus, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@workspace/ui/components/button"
+import { Input } from "@workspace/ui/components/input"
+
 import { orpc } from "../lib/orpc"
 
 export const Route = createFileRoute("/client-orpc")({
@@ -7,35 +13,179 @@ export const Route = createFileRoute("/client-orpc")({
 })
 
 function ClientORPC() {
-  const [data, setData] = React.useState<any>(null)
+  const [planets, setPlanets] = React.useState<Array<any>>([])
   const [loading, setLoading] = React.useState(true)
+  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")
 
-  React.useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const res = await orpc.hello({ name: "Client User" })
-        setData(res)
-      } catch (err) {
-        console.error(err)
-      } finally {
-        setLoading(false)
-      }
+  const fetchPlanets = async () => {
+    try {
+      const res = await orpc.getPlanets()
+      setPlanets(res)
+    } catch (err) {
+      console.error(err)
+    } finally {
+      setLoading(false)
     }
+  }
 
-    fetchData()
+  React.useEffect(() => {
+    fetchPlanets()
   }, [])
 
+  const resetForm = () => {
+    setName("")
+    setDescription("")
+    setDistance("0")
+    setDiameter("0")
+    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()
+      resetForm()
+      toast.success("Planet added successfully", { id: toastId })
+    } catch (err: any) {
+      console.error(err)
+      toast.error(err.message || "Failed to add planet", { id: toastId })
+    }
+  }
+
+  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()
+      resetForm()
+      toast.success("Planet updated successfully", { id: toastId })
+    } catch (err: any) {
+      console.error(err)
+      toast.error(err.message || "Failed to update planet", { id: toastId })
+    }
+  }
+
+  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 })
+    }
+  }
+
+  const startEdit = (planet: any) => {
+    setEditingId(planet.id)
+    setName(planet.name)
+    setDescription(planet.description || "")
+    setDistance(planet.distanceFromSun.toString())
+    setDiameter(planet.diameter.toString())
+  }
+
   return (
-    <div className="flex flex-col gap-4">
-      <h1 className="text-2xl font-bold">Client + oRPC Example</h1>
-      <p>This page fetches data on the client using the oRPC client.</p>
-      
-      <div className="rounded-lg border p-4">
-        <h2 className="font-semibold">Message from oRPC (Client-side):</h2>
+    <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>
+      </div>
+
+      <div className="rounded-lg border p-6 bg-muted/30">
+        <h2 className="font-semibold mb-4 flex items-center gap-2">
+          {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)} />
+          </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>
+        </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>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="font-semibold text-lg">Current Planets</h2>
         {loading ? (
-          <p>Loading...</p>
+          <p>Loading planets...</p>
+        ) : planets.length === 0 ? (
+          <p className="text-gray-500 italic">No planets found.</p>
         ) : (
-          <p>{data?.message}</p>
+          <div className="grid grid-cols-1 gap-3">
+            {planets.map((planet) => (
+              <div key={planet.id} className="flex items-center justify-between rounded-lg border p-4 bg-background shadow-sm hover:shadow-md transition-shadow">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-bold text-lg">{planet.name}</span>
+                    <span className="text-xs bg-muted px-2 py-0.5 rounded-full text-muted-foreground">ID: {planet.id}</span>
+                  </div>
+                  <p className="text-sm text-muted-foreground">{planet.description || "No description provided."}</p>
+                  <div className="mt-2 flex gap-4 text-xs text-muted-foreground font-mono">
+                    <span>Distance: {planet.distanceFromSun} M km</span>
+                    <span>Diameter: {planet.diameter} km</span>
+                  </div>
+                </div>
+                <div className="flex gap-2 ml-4">
+                  <Button variant="outline" size="icon" onClick={() => startEdit(planet)}>
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button variant="destructive" size="icon" onClick={() => handleDelete(planet.id)}>
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
         )}
       </div>
     </div>

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

@@ -1,29 +1,52 @@
 import { createFileRoute } from "@tanstack/react-router"
+import { orpc } from "../lib/orpc"
 
 export const Route = createFileRoute("/isr")({
-  loader: () => {
+  loader: async () => {
     // In a real ISR scenario, this would be cached on the server
-    // For this example, we'll just show the time it was "generated"
+    // For this example, we'll fetch planets via oRPC
+    const planets = await orpc.getPlanets()
+    
     return {
       generatedAt: new Date().toISOString(),
+      planets,
       message: "This page is an example of ISR. In a production build with proper configuration, this data would be cached and updated in the background.",
     }
   },
+  headers: () => ({
+    // Cache at CDN for 10 seconds, allow stale content for up to 1 minute
+    "Cache-Control": "public, max-age=10, s-maxage=10, stale-while-revalidate=60",
+  }),
   component: ISRExample,
 })
 
 function ISRExample() {
-  const { generatedAt, message } = Route.useLoaderData()
+  const { generatedAt, message, planets } = Route.useLoaderData()
 
   return (
     <div className="flex flex-col gap-4">
-      <h1 className="text-2xl font-bold">ISR Example</h1>
+      <h1 className="text-2xl font-bold">ISR Example + oRPC</h1>
       <p>{message}</p>
       
       <div className="rounded-lg border p-4">
-        <h2 className="font-semibold">Generated At:</h2>
+        <h2 className="font-semibold">Generated At (Server-side):</h2>
         <p className="font-mono">{generatedAt}</p>
       </div>
+
+      <div className="rounded-lg border p-4">
+        <h2 className="font-semibold mb-4">Planets (Fetched via oRPC):</h2>
+        {planets.length === 0 ? (
+          <p className="text-gray-500 italic">No planets found.</p>
+        ) : (
+          <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            {planets.map((planet) => (
+              <li key={planet.id} className="rounded-md border p-3 bg-muted/50">
+                <span className="font-bold">{planet.name}</span> - {planet.description}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
       
       <p className="text-sm text-muted-foreground">
         Refresh the page to see if the time updates. In a true ISR setup, it would only update after a certain interval.

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

@@ -1,35 +1,189 @@
-import { createFileRoute } from "@tanstack/react-router"
+import * as React from "react"
+import { createFileRoute, useRouter } from "@tanstack/react-router"
+import { Check, Pencil, Plus, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@workspace/ui/components/button"
+import { Input } from "@workspace/ui/components/input"
+
 import { orpc } from "../lib/orpc"
 
 export const Route = createFileRoute("/ssr-orpc")({
   loader: async () => {
-    const data = await orpc.hello({ name: "SSR User" })
     const planets = await orpc.getPlanets()
-    return { data, planets }
+    return { planets }
   },
   component: SSRORPC,
 })
 
 function SSRORPC() {
-  const { data, planets } = Route.useLoaderData()
+  const { planets } = Route.useLoaderData()
+  const router = useRouter()
+  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 [isSubmitting, setIsSubmitting] = React.useState(false)
+
+  const resetForm = () => {
+    setName("")
+    setDescription("")
+    setDistance("0")
+    setDiameter("0")
+    setEditingId(null)
+  }
+
+  const handleAdd = async () => {
+    setIsSubmitting(true)
+    const toastId = toast.loading("Adding planet...")
+    try {
+      await orpc.createPlanet({
+        name,
+        description,
+        distanceFromSun: parseFloat(distance),
+        diameter: parseFloat(diameter),
+        hasRings: false,
+      })
+      await router.invalidate()
+      resetForm()
+      toast.success("Planet added successfully", { id: toastId })
+    } catch (err: any) {
+      console.error(err)
+      toast.error(err.message || "Failed to add planet", { id: toastId })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleUpdate = async (id: number) => {
+    setIsSubmitting(true)
+    const toastId = toast.loading("Updating planet...")
+    try {
+      await orpc.updatePlanet({
+        id,
+        name,
+        description,
+        distanceFromSun: parseFloat(distance),
+        diameter: parseFloat(diameter),
+        hasRings: false,
+      })
+      await router.invalidate()
+      resetForm()
+      toast.success("Planet updated successfully", { id: toastId })
+    } catch (err: any) {
+      console.error(err)
+      toast.error(err.message || "Failed to update planet", { id: toastId })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleDelete = async (id: number) => {
+    if (!confirm("Are you sure you want to delete this planet?")) return
+    setIsSubmitting(true)
+    const toastId = toast.loading("Deleting planet...")
+    try {
+      await orpc.deletePlanet({ id })
+      await router.invalidate()
+      toast.success("Planet deleted successfully", { id: toastId })
+    } catch (err: any) {
+      console.error(err)
+      toast.error(err.message || "Failed to delete planet", { id: toastId })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const startEdit = (planet: any) => {
+    setEditingId(planet.id)
+    setName(planet.name)
+    setDescription(planet.description || "")
+    setDistance(planet.distanceFromSun.toString())
+    setDiameter(planet.diameter.toString())
+  }
 
   return (
-    <div className="flex flex-col gap-4">
-      <h1 className="text-2xl font-bold">SSR + oRPC Example</h1>
-      <p>This page fetches data on the server using oRPC in a loader.</p>
-      
-      <div className="rounded-lg border p-4">
-        <h2 className="font-semibold">Message from oRPC:</h2>
-        <p>{data.message}</p>
+    <div className="flex flex-col gap-8">
+      <div>
+        <h1 className="text-2xl font-bold mb-2">SSR + oRPC CRUD</h1>
+        <p className="text-muted-foreground">Manage planets using SSR loaders for fetching and oRPC mutations for actions.</p>
+      </div>
+
+      <div className="rounded-lg border p-6 bg-muted/30">
+        <h2 className="font-semibold mb-4 flex items-center gap-2">
+          {editingId ? <Pencil className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
+          {editingId ? "Edit Planet (SSR)" : "Add New Planet (SSR)"}
+        </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" disabled={isSubmitting} />
+          </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" disabled={isSubmitting} />
+          </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)} disabled={isSubmitting} />
+          </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)} disabled={isSubmitting} />
+          </div>
+        </div>
+        <div className="mt-6 flex gap-2">
+          {editingId ? (
+            <>
+              <Button onClick={() => handleUpdate(editingId)} className="flex items-center gap-2" disabled={isSubmitting}>
+                <Check className="h-4 w-4" /> {isSubmitting ? "Saving..." : "Save Changes"}
+              </Button>
+              <Button variant="outline" onClick={resetForm} disabled={isSubmitting}>
+                Cancel
+              </Button>
+            </>
+          ) : (
+            <Button onClick={handleAdd} className="flex items-center gap-2" disabled={isSubmitting}>
+              <Plus className="h-4 w-4" /> {isSubmitting ? "Adding..." : "Add Planet"}
+            </Button>
+          )}
+        </div>
       </div>
 
-      <div className="rounded-lg border p-4">
-        <h2 className="font-semibold">Planets from DB:</h2>
-        <ul className="list-disc ml-6">
-          {planets.map((planet) => (
-            <li key={planet.id}>{planet.name}</li>
-          ))}
-        </ul>
+      <div className="space-y-4">
+        <h2 className="font-semibold text-lg">Current Planets (SSR Fetched)</h2>
+        {planets.length === 0 ? (
+          <p className="text-gray-500 italic">No planets found in the database.</p>
+        ) : (
+          <div className="grid grid-cols-1 gap-3">
+            {planets.map((planet) => (
+              <div key={planet.id} className="flex items-center justify-between rounded-lg border p-4 bg-background shadow-sm hover:shadow-md transition-shadow">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-bold text-lg">{planet.name}</span>
+                    <span className="text-xs bg-muted px-2 py-0.5 rounded-full text-muted-foreground">ID: {planet.id}</span>
+                  </div>
+                  <p className="text-sm text-muted-foreground">{planet.description || "No description provided."}</p>
+                  <div className="mt-2 flex gap-4 text-xs text-muted-foreground font-mono">
+                    <span>Distance: {planet.distanceFromSun} M km</span>
+                    <span>Diameter: {planet.diameter} km</span>
+                  </div>
+                </div>
+                <div className="flex gap-2 ml-4">
+                  <Button variant="outline" size="icon" onClick={() => startEdit(planet)} disabled={isSubmitting}>
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button variant="destructive" size="icon" onClick={() => handleDelete(planet.id)} disabled={isSubmitting}>
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   )

package/template/apps/web/vite.config.ts

@@ -8,7 +8,11 @@ const config = defineConfig({
   plugins: [
     nitro(),
     tailwindcss(),
-    tanstackStart(),
+    tanstackStart({
+      prerender: {
+        filter: ({ path }) => path === "/isr",
+      },
+    }),
     viteReact(),
   ],
   resolve: {

package/template/packages/orpc/src/lib/router.ts

@@ -1,5 +1,6 @@
 import { ORPCError, os } from '@orpc/server'
 import { db, schema } from '@workspace/db'
+import { eq } from 'drizzle-orm'
 import { z } from 'zod'
 import type { Session } from '@workspace/auth/lib/auth'
 
@@ -47,6 +48,68 @@ export const router = o.router({
         email: context.session.user.email,
       }
     }),
+
+  createPlanet: o
+    .input(
+      z.object({
+        name: z.string().min(1),
+        description: z.string().optional(),
+        distanceFromSun: z.number(),
+        diameter: z.number(),
+        hasRings: z.boolean().default(false),
+        atmosphere: z.string().optional(),
+      }),
+    )
+    .handler(async ({ input }) => {
+      const [newPlanet] = await db.insert(planets).values(input).returning()
+      return newPlanet
+    }),
+
+  updatePlanet: o
+    .input(
+      z.object({
+        id: z.number(),
+        name: z.string().min(1),
+        description: z.string().optional(),
+        distanceFromSun: z.number(),
+        diameter: z.number(),
+        hasRings: z.boolean(),
+        atmosphere: z.string().optional(),
+      }),
+    )
+    .handler(async ({ input }) => {
+      const { id, ...data } = input
+      const results = await db
+        .update(planets)
+        .set({ ...data, updatedAt: new Date() })
+        .where(eq(planets.id, id))
+        .returning()
+      
+      if (results.length === 0) {
+        throw new ORPCError('NOT_FOUND')
+      }
+      
+      return results[0]
+    }),
+
+  deletePlanet: o
+    .input(
+      z.object({
+        id: z.number(),
+      }),
+    )
+    .handler(async ({ input }) => {
+      const results = await db
+        .delete(planets)
+        .where(eq(planets.id, input.id))
+        .returning()
+      
+      if (results.length === 0) {
+        throw new ORPCError('NOT_FOUND')
+      }
+      
+      return results[0]
+    }),
 })
 
 export type AppRouter = typeof router