create-croissant 0.1.8 → 0.1.10

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.8",
+  "version": "0.1.10",
   "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/app-sidebar.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { Link } from "@tanstack/react-router"
-import { LogOut, User } from "lucide-react"
+import { LogOut, Settings, User } from "lucide-react"
 
 import {
   Sidebar,
@@ -16,7 +16,7 @@ import {
   SidebarRail,
 } from "@workspace/ui/components/sidebar"
 import { Avatar, AvatarFallback, AvatarImage } from "@workspace/ui/components/avatar"
-import { authClient } from "../lib/auth-client"
+import { authClient } from "@/lib/auth-client"
 
 // This is sample data.
 const data = {
@@ -50,7 +50,7 @@ const data = {
 }
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const [user, setUser] = React.useState<any>(null)
+  const [user, setUser] = React.useState<typeof authClient.$Infer.Session.user | null>(null)
 
   React.useEffect(() => {
     const checkSession = async () => {
@@ -95,32 +95,47 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       <SidebarFooter>
         <SidebarMenu>
           <SidebarMenuItem>
-            {user ? (
-              <SidebarMenuButton
-                size="lg"
-                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-              >
-                <Avatar className="h-8 w-8 rounded-lg">
-                  <AvatarImage src={user.image || ""} alt={user.name} />
-                  <AvatarFallback className="rounded-lg">
-                    {user.name?.charAt(0) || "U"}
-                  </AvatarFallback>
-                </Avatar>
-                <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">{user.name}</span>
-                  <span className="truncate text-xs">{user.email}</span>
-                </div>
-                <button
-                  onClick={async () => {
-                    await authClient.signOut()
-                    window.location.reload()
-                  }}
-                  className="ml-auto"
+              {user ? (
+                <SidebarMenuButton
+                  size="lg"
+                  render={<div />}
+                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                 >
-                  <LogOut className="h-4 w-4" />
-                </button>
-              </SidebarMenuButton>
-            ) : (
+                  <div className="flex items-center gap-2 w-full">
+                    <Avatar className="h-8 w-8 rounded-lg">
+                      <AvatarImage src={user.image || ""} alt={user.name} />
+                      <AvatarFallback className="rounded-lg">
+                        {user.name.charAt(0) || "U"}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">{user.name}</span>
+                      <span className="truncate text-xs">{user.email}</span>
+                    </div>
+                    <div className="flex items-center gap-1 ml-auto">
+                      <Link
+                        to="/account"
+                        className="p-1 rounded hover:bg-sidebar-accent-foreground/10"
+                        title="Account Settings"
+                      >
+                        <Settings className="h-4 w-4" />
+                      </Link>
+                      <button
+                        onClick={async (e) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                          await authClient.signOut()
+                          window.location.reload()
+                        }}
+                        className="p-1 rounded hover:bg-sidebar-accent-foreground/10"
+                        title="Sign Out"
+                      >
+                        <LogOut className="h-4 w-4" />
+                      </button>
+                    </div>
+                  </div>
+                </SidebarMenuButton>
+              ) : (
               <SidebarMenuButton
                 render={
                   <Link to="/login" className="flex items-center gap-2" />

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 { authClient } from "../lib/auth-client"
+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 { authClient } from "../lib/auth-client"
+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/routeTree.gen.ts

@@ -17,6 +17,7 @@ import { Route as IsrRouteImport } from './routes/isr'
 import { Route as DashboardRouteImport } from './routes/dashboard'
 import { Route as ClientOrpcAuthRouteImport } from './routes/client-orpc-auth'
 import { Route as ClientOrpcRouteImport } from './routes/client-orpc'
+import { Route as AccountRouteImport } from './routes/account'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ApiRpcSplatRouteImport } from './routes/api/rpc.$'
 import { Route as ApiAuthSplatRouteImport } from './routes/api/auth/$'
@@ -61,6 +62,11 @@ const ClientOrpcRoute = ClientOrpcRouteImport.update({
   path: '/client-orpc',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AccountRoute = AccountRouteImport.update({
+  id: '/account',
+  path: '/account',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -79,6 +85,7 @@ const ApiAuthSplatRoute = ApiAuthSplatRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/account': typeof AccountRoute
   '/client-orpc': typeof ClientOrpcRoute
   '/client-orpc-auth': typeof ClientOrpcAuthRoute
   '/dashboard': typeof DashboardRoute
@@ -92,6 +99,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/account': typeof AccountRoute
   '/client-orpc': typeof ClientOrpcRoute
   '/client-orpc-auth': typeof ClientOrpcAuthRoute
   '/dashboard': typeof DashboardRoute
@@ -106,6 +114,7 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/account': typeof AccountRoute
   '/client-orpc': typeof ClientOrpcRoute
   '/client-orpc-auth': typeof ClientOrpcAuthRoute
   '/dashboard': typeof DashboardRoute
@@ -121,6 +130,7 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/account'
     | '/client-orpc'
     | '/client-orpc-auth'
     | '/dashboard'
@@ -134,6 +144,7 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/account'
     | '/client-orpc'
     | '/client-orpc-auth'
     | '/dashboard'
@@ -147,6 +158,7 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/'
+    | '/account'
     | '/client-orpc'
     | '/client-orpc-auth'
     | '/dashboard'
@@ -161,6 +173,7 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  AccountRoute: typeof AccountRoute
   ClientOrpcRoute: typeof ClientOrpcRoute
   ClientOrpcAuthRoute: typeof ClientOrpcAuthRoute
   DashboardRoute: typeof DashboardRoute
@@ -231,6 +244,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ClientOrpcRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/account': {
+      id: '/account'
+      path: '/account'
+      fullPath: '/account'
+      preLoaderRoute: typeof AccountRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -257,6 +277,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  AccountRoute: AccountRoute,
   ClientOrpcRoute: ClientOrpcRoute,
   ClientOrpcAuthRoute: ClientOrpcAuthRoute,
   DashboardRoute: DashboardRoute,