create-croissant 0.1.8 → 0.1.10

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

@@ -2,15 +2,34 @@ 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 { 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 { InferRouterOutputs } from "@orpc/server"
+import { orpc } from "@/lib/orpc"
+
+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("/ssr-orpc")({
   loader: async () => {
-    const planets = await orpc.getPlanets()
+    const planets = await orpc.planets.getPlanets()
     return { planets }
   },
   component: SSRORPC,
@@ -21,88 +40,72 @@ function SSRORPC() {
   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 form = useForm({
+    defaultValues: {
+      name: "",
+      description: "",
+      distance: "0",
+      diameter: "0",
+    },
+    validators: {
+      onChange: planetSchema,
+    },
+    onSubmit: async ({ value }) => {
+      const toastId = toast.loading(editingId ? "Updating planet..." : "Adding planet...")
+      try {
+        if (editingId) {
+          await orpc.planets.updatePlanet({
+            id: editingId,
+            name: value.name,
+            description: value.description,
+            distanceFromSun: parseFloat(value.distance),
+            diameter: parseFloat(value.diameter),
+            hasRings: false,
+          })
+          toast.success("Planet updated successfully", { id: toastId })
+        } else {
+          await orpc.planets.createPlanet({
+            name: value.name,
+            description: value.description,
+            distanceFromSun: parseFloat(value.distance),
+            diameter: parseFloat(value.diameter),
+            hasRings: false,
+          })
+          toast.success("Planet added successfully", { id: toastId })
+        }
+        await router.invalidate()
+        resetForm()
+      } catch (err: any) {
+        console.error(err)
+        toast.error(err.message || "Operation failed", { id: toastId })
+      }
+    },
+  })
 
   const resetForm = () => {
-    setName("")
-    setDescription("")
-    setDistance("0")
-    setDiameter("0")
+    form.reset()
     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 orpc.planets.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) => {
+  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 (
@@ -117,40 +120,115 @@ function SSRORPC() {
           {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} />
+        <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)} disabled={isSubmitting} />
+          <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}
+                      >
+                        <Check className="h-4 w-4" /> {isSubmitting ? "Saving..." : "Save Changes"}
+                      </Button>
+                      <Button variant="outline" type="button" onClick={resetForm} disabled={isSubmitting}>
+                        Cancel
+                      </Button>
+                    </>
+                  ) : (
+                    <Button 
+                      type="submit"
+                      className="flex items-center gap-2"
+                      disabled={!canSubmit || isSubmitting}
+                    >
+                      <Plus className="h-4 w-4" /> {isSubmitting ? "Adding..." : "Add Planet"}
+                    </Button>
+                  )}
+                </>
+              )}
+            />
           </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>
+        </form>
       </div>
 
       <div className="space-y-4">
@@ -173,10 +251,10 @@ function SSRORPC() {
                   </div>
                 </div>
                 <div className="flex gap-2 ml-4">
-                  <Button variant="outline" size="icon" onClick={() => startEdit(planet)} disabled={isSubmitting}>
+                  <Button variant="outline" size="icon" onClick={() => startEdit(planet)}>
                     <Pencil className="h-4 w-4" />
                   </Button>
-                  <Button variant="destructive" size="icon" onClick={() => handleDelete(planet.id)} disabled={isSubmitting}>
+                  <Button variant="destructive" size="icon" onClick={() => handleDelete(planet.id)}>
                     <Trash2 className="h-4 w-4" />
                   </Button>
                 </div>

package/template/package.json

@@ -14,6 +14,7 @@
     "update-deps": "npx npm-check-updates -u -w --root && npm install"
   },
   "devDependencies": {
+    "@better-auth/core": "^1.6.7",
     "@tanstack/eslint-config": "0.4.0",
     "eslint": "10.2.1",
     "prettier": "^3.8.1",
@@ -30,6 +31,7 @@
     "packages/*"
   ],
   "overrides": {
-    "@noble/ciphers": "2.2.0"
+    "@noble/ciphers": "2.2.0",
+    "@better-auth/core": "^1.6.7"
   }
 }

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

@@ -0,0 +1,79 @@
+import { ORPCError, os } from '@orpc/server'
+import { db, schema } from '@workspace/db'
+import { eq } from 'drizzle-orm'
+import { z } from 'zod'
+import type { RPCContext } from './router'
+
+const { planets } = schema
+
+const o = os.$context<RPCContext>()
+
+export const planetRouter = o.router({
+  getPlanets: o
+    .handler(async () => {
+      const allPlanets = await db.select().from(planets)
+      return allPlanets
+    }),
+
+  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]
+    }),
+})

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

@@ -1,18 +1,17 @@
 import { ORPCError, os } from '@orpc/server'
-import { db, schema } from '@workspace/db'
-import { eq } from 'drizzle-orm'
 import { z } from 'zod'
+import { planetRouter } from './planets'
 import type { Session } from '@workspace/auth/lib/auth'
 
 export type RPCContext = {
   session: Session | null
 }
 
-const { planets } = schema
-
 const o = os.$context<RPCContext>()
 
 export const router = o.router({
+  planets: planetRouter,
+
   hello: o
     .input(
       z.object({
@@ -25,12 +24,6 @@ export const router = o.router({
       }
     }),
 
-  getPlanets: o
-    .handler(async () => {
-      const allPlanets = await db.select().from(planets)
-      return allPlanets
-    }),
-
   getSecretData: o
     .use(async ({ context, next }) => {
       if (!context.session) {
@@ -48,68 +41,6 @@ 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

package/template/apps/web/node_modules/@better-auth/core/LICENSE.md

@@ -1,20 +0,0 @@
-The MIT License (MIT)
-Copyright (c) 2024 - present, Bereket Engida
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the “Software”), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
-ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
-DEALINGS IN THE SOFTWARE.

package/template/apps/web/node_modules/@better-auth/core/README.md

@@ -1,17 +0,0 @@
-# Better Auth Core
-
-Core utilities and types for [Better Auth](https://www.better-auth.com) — the most comprehensive authentication framework for TypeScript.
-
-## Installation
-
-```bash
-npm install @better-auth/core
-```
-
-## Documentation
-
-For full documentation, visit [better-auth.com](https://www.better-auth.com).
-
-## License
-
-MIT