create-croissant 0.1.8 → 0.1.9

package/package.json

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

package/template/apps/web/package.json

@@ -20,10 +20,12 @@
     "@orpc/server": "^1.14.0",
     "@orpc/tanstack-query": "^1.14.0",
     "@tailwindcss/vite": "^4.2.4",
+    "@tanstack/react-form": "^1.29.1",
     "@tanstack/react-query": "^5.99.2",
     "@tanstack/react-router": "^1.132.0",
     "@tanstack/react-start": "^1.132.0",
     "@tanstack/router-plugin": "^1.132.0",
+    "@tanstack/zod-form-adapter": "^0.42.1",
     "@workspace/auth": "*",
     "@workspace/orpc": "*",
     "@workspace/ui": "*",

package/template/apps/web/src/components/login-form.tsx

@@ -10,37 +10,51 @@ import {
 import {
   Field,
   FieldDescription,
+  FieldError,
   FieldGroup,
   FieldLabel,
 } from "@workspace/ui/components/field"
 import { Input } from "@workspace/ui/components/input"
 import { useState } from "react"
 import { Link } from "@tanstack/react-router"
+import { useForm } from "@tanstack/react-form"
+import { z } from "zod"
 import { authClient } from "../lib/auth-client"
 
+const loginSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(1, "Password is required"),
+})
+
 export function LoginForm({
   className,
   ...props
 }: React.ComponentProps<"div">) {
-  const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setLoading(true)
-    setError(null)
-    const { error: signInError } = await authClient.signIn.email({
-      email,
-      password,
-      callbackURL: "/dashboard",
-    })
-    if (signInError) {
-      setError(signInError.message || "Failed to sign in")
-    }
-    setLoading(false)
-  }
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+    validators: {
+      onChange: loginSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setLoading(true)
+      setError(null)
+      const { error: signInError } = await authClient.signIn.email({
+        email: value.email,
+        password: value.password,
+        callbackURL: "/dashboard",
+      })
+      if (signInError) {
+        setError(signInError.message || "Failed to sign in")
+      }
+      setLoading(false)
+    },
+  })
 
   return (
     <div className={cn("flex flex-col gap-6", className)} {...props}>
@@ -52,46 +66,79 @@ export function LoginForm({
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <form onSubmit={handleSubmit}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              form.handleSubmit()
+            }}
+          >
             <FieldGroup>
               {error && (
                 <div className="rounded bg-red-100 p-2 text-sm text-red-600">
                   {error}
                 </div>
               )}
+              <form.Field
+                name="email"
+                children={(field) => {
+                  const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0
+                  return (
+                    <Field data-invalid={isInvalid}>
+                      <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+                      <Input
+                        id={field.name}
+                        name={field.name}
+                        type="email"
+                        placeholder="m@example.com"
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        required
+                      />
+                      {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                    </Field>
+                  )
+                }}
+              />
+              <form.Field
+                name="password"
+                children={(field) => {
+                  const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0
+                  return (
+                    <Field data-invalid={isInvalid}>
+                      <div className="flex items-center">
+                        <FieldLabel htmlFor={field.name}>Password</FieldLabel>
+                        <a
+                          href="#"
+                          className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                        >
+                          Forgot your password?
+                        </a>
+                      </div>
+                      <Input
+                        id={field.name}
+                        name={field.name}
+                        type="password"
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        required
+                      />
+                      {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                    </Field>
+                  )
+                }}
+              />
               <Field>
-                <FieldLabel htmlFor="email">Email</FieldLabel>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="m@example.com"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                />
-              </Field>
-              <Field>
-                <div className="flex items-center">
-                  <FieldLabel htmlFor="password">Password</FieldLabel>
-                  <a
-                    href="#"
-                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
-                  >
-                    Forgot your password?
-                  </a>
-                </div>
-                <Input
-                  id="password"
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
+                <form.Subscribe
+                  selector={(state) => [state.canSubmit, state.isSubmitting]}
+                  children={([canSubmit, isSubmitting]) => (
+                    <Button type="submit" disabled={!canSubmit || isSubmitting || loading}>
+                      {isSubmitting || loading ? "Logging in..." : "Login"}
+                    </Button>
+                  )}
                 />
-              </Field>
-              <Field>
-                <Button type="submit" disabled={loading}>
-                  {loading ? "Logging in..." : "Login"}
-                </Button>
                 <Button variant="outline" type="button" disabled={loading}>
                   Login with Google
                 </Button>

package/template/apps/web/src/components/signup-form.tsx

@@ -9,41 +9,56 @@ import {
 import {
   Field,
   FieldDescription,
+  FieldError,
   FieldGroup,
   FieldLabel,
 } from "@workspace/ui/components/field"
 import { Input } from "@workspace/ui/components/input"
 import { useState } from "react"
 import { Link } from "@tanstack/react-router"
+import { useForm } from "@tanstack/react-form"
+import { z } from "zod"
 import { authClient } from "../lib/auth-client"
 
+const signupSchema = z.object({
+  name: z.string().min(1, "Full name is required"),
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters long"),
+  confirmPassword: z.string().min(1, "Please confirm your password"),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords do not match",
+  path: ["confirmPassword"],
+})
+
 export function SignupForm({ ...props }: React.ComponentProps<typeof Card>) {
-  const [name, setName] = useState("")
-  const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
-  const [confirmPassword, setConfirmPassword] = useState("")
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (password !== confirmPassword) {
-      setError("Passwords do not match")
-      return
-    }
-    setLoading(true)
-    setError(null)
-    const { error: signUpError } = await authClient.signUp.email({
-      email,
-      password,
-      name,
-      callbackURL: "/dashboard",
-    })
-    if (signUpError) {
-      setError(signUpError.message || "Failed to sign up")
-    }
-    setLoading(false)
-  }
+  const form = useForm({
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+      confirmPassword: "",
+    },
+    validators: {
+      onChange: signupSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setLoading(true)
+      setError(null)
+      const { error: signUpError } = await authClient.signUp.email({
+        email: value.email,
+        password: value.password,
+        name: value.name,
+        callbackURL: "/dashboard",
+      })
+      if (signUpError) {
+        setError(signUpError.message || "Failed to sign up")
+      }
+      setLoading(false)
+    },
+  })
 
   return (
     <Card {...props}>
@@ -54,70 +69,125 @@ export function SignupForm({ ...props }: React.ComponentProps<typeof Card>) {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <form onSubmit={handleSubmit}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            form.handleSubmit()
+          }}
+        >
           <FieldGroup>
             {error && (
               <div className="rounded bg-red-100 p-2 text-sm text-red-600">
                 {error}
               </div>
             )}
-            <Field>
-              <FieldLabel htmlFor="name">Full Name</FieldLabel>
-              <Input
-                id="name"
-                type="text"
-                placeholder="John Doe"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                required
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="email">Email</FieldLabel>
-              <Input
-                id="email"
-                type="email"
-                placeholder="m@example.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
-              <FieldDescription>
-                We&apos;ll use this to contact you. We will not share your email
-                with anyone else.
-              </FieldDescription>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="password">Password</FieldLabel>
-              <Input
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-              />
-              <FieldDescription>
-                Must be at least 8 characters long.
-              </FieldDescription>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="confirm-password">
-                Confirm Password
-              </FieldLabel>
-              <Input
-                id="confirm-password"
-                type="password"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                required
-              />
-              <FieldDescription>Please confirm your password.</FieldDescription>
-            </Field>
+            <form.Field
+              name="name"
+              children={(field) => {
+                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Full Name</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      type="text"
+                      placeholder="John Doe"
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      required
+                    />
+                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                  </Field>
+                )
+              }}
+            />
+            <form.Field
+              name="email"
+              children={(field) => {
+                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      type="email"
+                      placeholder="m@example.com"
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      required
+                    />
+                    <FieldDescription>
+                      We&apos;ll use this to contact you. We will not share your email
+                      with anyone else.
+                    </FieldDescription>
+                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                  </Field>
+                )
+              }}
+            />
+            <form.Field
+              name="password"
+              children={(field) => {
+                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Password</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      type="password"
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      required
+                    />
+                    <FieldDescription>
+                      Must be at least 8 characters long.
+                    </FieldDescription>
+                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                  </Field>
+                )
+              }}
+            />
+            <form.Field
+              name="confirmPassword"
+              children={(field) => {
+                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>
+                      Confirm Password
+                    </FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      type="password"
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      required
+                    />
+                    <FieldDescription>Please confirm your password.</FieldDescription>
+                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                  </Field>
+                )
+              }}
+            />
             <FieldGroup>
               <Field>
-                <Button type="submit" disabled={loading}>
-                  {loading ? "Creating..." : "Create Account"}
-                </Button>
+                <form.Subscribe
+                  selector={(state) => [state.canSubmit, state.isSubmitting]}
+                  children={([canSubmit, isSubmitting]) => (
+                    <Button type="submit" disabled={!canSubmit || isSubmitting || loading}>
+                      {isSubmitting || loading ? "Creating..." : "Create Account"}
+                    </Button>
+                  )}
+                />
                 <Button variant="outline" type="button" disabled={loading}>
                   Sign up with Google
                 </Button>

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

@@ -1,10 +1,13 @@
 import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 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"
 
+const queryClient = new QueryClient()
+
 export const Route = createRootRoute({
   head: () => ({
     meta: [
@@ -36,18 +39,20 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         <HeadContent />
       </head>
       <body>
-        <SidebarProvider>
-          <AppSidebar />
-          <main className="flex flex-1 flex-col overflow-hidden">
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-              <SidebarTrigger />
-            </header>
-            <div className="flex-1 overflow-auto p-4">
-              {children}
-            </div>
-          </main>
-          <Toaster />
-        </SidebarProvider>
+        <QueryClientProvider client={queryClient}>
+          <SidebarProvider>
+            <AppSidebar />
+            <main className="flex flex-1 flex-col overflow-hidden">
+              <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+                <SidebarTrigger />
+              </header>
+              <div className="flex-1 overflow-auto p-4">
+                {children}
+              </div>
+            </main>
+            <Toaster />
+          </SidebarProvider>
+        </QueryClientProvider>
         <Scripts />
       </body>
     </html>

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

@@ -1,5 +1,5 @@
-import * as React from "react"
 import { createFileRoute, redirect } from "@tanstack/react-router"
+import { useQuery } from "@tanstack/react-query"
 import { getSessionFn } from "../lib/auth-utils"
 import { orpc } from "../lib/orpc"
 
@@ -21,28 +21,16 @@ export const Route = createFileRoute("/client-orpc-auth")({
 
 function ClientORPCAuth() {
   const { session } = Route.useRouteContext()
-  const [data, setData] = React.useState<any>(null)
-  const [loading, setLoading] = React.useState(true)
-
-  React.useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const res = await orpc.getSecretData()
-        setData(res)
-      } catch (err) {
-        console.error(err)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchData()
-  }, [])
+  
+  const { data, isLoading } = useQuery({
+    queryKey: ["secret-data"],
+    queryFn: () => orpc.getSecretData(),
+  })
 
   return (
     <div className="flex flex-col gap-4">
       <h1 className="text-2xl font-bold">Client + oRPC (Authenticated)</h1>
-      <p>This page is protected and fetches secret data on the client.</p>
+      <p>This page is protected and fetches secret data on the client using TanStack Query.</p>
       
       <div className="rounded-lg border p-4">
         <h2 className="font-semibold">User Session:</h2>
@@ -51,7 +39,7 @@ function ClientORPCAuth() {
 
       <div className="rounded-lg border p-4">
         <h2 className="font-semibold">Secret Data (Client-side):</h2>
-        {loading ? (
+        {isLoading ? (
           <p>Loading...</p>
         ) : (
           <pre className="text-xs bg-muted p-2 rounded">{JSON.stringify(data, null, 2)}</pre>