create-better-t-stack 3.12.5 → 3.12.7-pr780.f6206a0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-better-t-stack",
-  "version": "3.12.5",
+  "version": "3.12.7-pr780.f6206a0",
   "description": "A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
   "keywords": [
     "better-auth",
@@ -67,7 +67,8 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@better-t-stack/types": "^3.12.5",
+    "@better-t-stack/types": "3.12.7-pr780.f6206a0",
+    "@clack/core": "^0.5.0",
     "@clack/prompts": "^1.0.0-alpha.8",
     "@orpc/server": "^1.13.0",
     "consola": "^3.4.2",

package/templates/api/orpc/web/react/base/src/utils/orpc.ts.hbs

@@ -11,7 +11,7 @@ import { appRouter } from "@{{projectName}}/api/routers/index";
 import { createContext } from "@{{projectName}}/api/context";
 {{else if (includes frontend "tanstack-start")}}
 import type { RouterClient } from "@orpc/server";
-import { appRouter } from "@{{projectName}}/api/routers/index";
+import type { AppRouter } from "@{{projectName}}/api/routers/index";
 import { env } from "@{{projectName}}/env/web";
 {{else}}
 import type { AppRouterClient } from "@{{projectName}}/api/routers/index";
@@ -73,10 +73,10 @@ const link = new RPCLink({
 });
 
 const getORPCClient = () => {
-	return createORPCClient(link) as RouterClient<typeof appRouter>;
+	return createORPCClient(link) as RouterClient<AppRouter>;
 };
 
-export const client: RouterClient<typeof appRouter> = getORPCClient();
+export const client: RouterClient<AppRouter> = getORPCClient();
 {{else}}
 export const link = new RPCLink({
 {{#if (and (eq backend "self") (includes frontend "next"))}}

package/templates/auth/better-auth/convex/native/uniwind/components/sign-in.tsx.hbs

@@ -1,13 +1,7 @@
 import { authClient } from "@/lib/auth-client";
 import { useState } from "react";
-import {
-  ActivityIndicator,
-  Text,
-  TextInput,
-  Pressable,
-  View,
-} from "react-native";
-import { Card, useThemeColor } from "heroui-native";
+import { Text, View } from "react-native";
+import { Button, ErrorView, Spinner, Surface, TextField } from "heroui-native";
 
 export function SignIn() {
   const [email, setEmail] = useState("");
@@ -15,11 +9,6 @@ export function SignIn() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const mutedColor = useThemeColor("muted");
-  const accentColor = useThemeColor("accent");
-  const foregroundColor = useThemeColor("foreground");
-  const dangerColor = useThemeColor("danger");
-
   const handleLogin = async () => {
     setIsLoading(true);
     setError(null);
@@ -46,46 +35,39 @@ export function SignIn() {
   };
 
   return (
-    <Card variant="secondary" className="mt-6 p-4">
-      <Card.Title className="mb-4">Sign In</Card.Title>
+    <Surface variant="secondary" className="p-4 rounded-lg">
+      <Text className="text-foreground font-medium mb-4">Sign In</Text>
 
-      {error && (
-        <View className="mb-4 p-3 bg-danger/10 rounded-lg">
-          <Text className="text-danger text-sm">{error}</Text>
-        </View>
-      )}
+      <ErrorView isInvalid={!!error} className="mb-3">
+        {error}
+      </ErrorView>
 
-      <TextInput
-        className="mb-3 py-3 px-4 rounded-lg bg-surface text-foreground border border-divider"
-        placeholder="Email"
-        value={email}
-        onChangeText={setEmail}
-        placeholderTextColor={mutedColor}
-        keyboardType="email-address"
-        autoCapitalize="none"
-      />
+      <View className="gap-3">
+        <TextField>
+          <TextField.Label>Email</TextField.Label>
+          <TextField.Input
+            value={email}
+            onChangeText={setEmail}
+            placeholder="email@example.com"
+            keyboardType="email-address"
+            autoCapitalize="none"
+          />
+        </TextField>
 
-      <TextInput
-        className="mb-4 py-3 px-4 rounded-lg bg-surface text-foreground border border-divider"
-        placeholder="Password"
-        value={password}
-        onChangeText={setPassword}
-        placeholderTextColor={mutedColor}
-        secureTextEntry
-      />
+        <TextField>
+          <TextField.Label>Password</TextField.Label>
+          <TextField.Input
+            value={password}
+            onChangeText={setPassword}
+            placeholder="••••••••"
+            secureTextEntry
+          />
+        </TextField>
 
-      <Pressable
-        onPress={handleLogin}
-        disabled={isLoading}
-        className="bg-accent p-4 rounded-lg flex-row justify-center items-center active:opacity-70"
-      >
-        {isLoading ? (
-          <ActivityIndicator size="small" color={foregroundColor} />
-        ) : (
-          <Text className="text-foreground font-medium">Sign In</Text>
-        )}
-      </Pressable>
-    </Card>
+        <Button onPress={handleLogin} isDisabled={isLoading} className="mt-1">
+          {isLoading ? <Spinner size="sm" color="default" /> : <Button.Label>Sign In</Button.Label>}
+        </Button>
+      </View>
+    </Surface>
   );
 }
-

package/templates/auth/better-auth/convex/native/uniwind/components/sign-up.tsx.hbs

@@ -1,13 +1,7 @@
 import { authClient } from "@/lib/auth-client";
 import { useState } from "react";
-import {
-  ActivityIndicator,
-  Text,
-  TextInput,
-  Pressable,
-  View,
-} from "react-native";
-import { Card, useThemeColor } from "heroui-native";
+import { Text, View } from "react-native";
+import { Button, ErrorView, Spinner, Surface, TextField } from "heroui-native";
 
 export function SignUp() {
   const [name, setName] = useState("");
@@ -16,11 +10,6 @@ export function SignUp() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const mutedColor = useThemeColor("muted");
-  const accentColor = useThemeColor("accent");
-  const foregroundColor = useThemeColor("foreground");
-  const dangerColor = useThemeColor("danger");
-
   const handleSignUp = async () => {
     setIsLoading(true);
     setError(null);
@@ -49,54 +38,48 @@ export function SignUp() {
   };
 
   return (
-    <Card variant="secondary" className="mt-6 p-4">
-      <Card.Title className="mb-4">Create Account</Card.Title>
+    <Surface variant="secondary" className="p-4 rounded-lg">
+      <Text className="text-foreground font-medium mb-4">Create Account</Text>
 
-      {error && (
-        <View className="mb-4 p-3 bg-danger/10 rounded-lg">
-          <Text className="text-danger text-sm">{error}</Text>
-        </View>
-      )}
+      <ErrorView isInvalid={!!error} className="mb-3">
+        {error}
+      </ErrorView>
 
-      <TextInput
-        className="mb-3 py-3 px-4 rounded-lg bg-surface text-foreground border border-divider"
-        placeholder="Name"
-        value={name}
-        onChangeText={setName}
-        placeholderTextColor={mutedColor}
-      />
+      <View className="gap-3">
+        <TextField>
+          <TextField.Label>Name</TextField.Label>
+          <TextField.Input value={name} onChangeText={setName} placeholder="John Doe" />
+        </TextField>
 
-      <TextInput
-        className="mb-3 py-3 px-4 rounded-lg bg-surface text-foreground border border-divider"
-        placeholder="Email"
-        value={email}
-        onChangeText={setEmail}
-        placeholderTextColor={mutedColor}
-        keyboardType="email-address"
-        autoCapitalize="none"
-      />
+        <TextField>
+          <TextField.Label>Email</TextField.Label>
+          <TextField.Input
+            value={email}
+            onChangeText={setEmail}
+            placeholder="email@example.com"
+            keyboardType="email-address"
+            autoCapitalize="none"
+          />
+        </TextField>
 
-      <TextInput
-        className="mb-4 py-3 px-4 rounded-lg bg-surface text-foreground border border-divider"
-        placeholder="Password"
-        value={password}
-        onChangeText={setPassword}
-        placeholderTextColor={mutedColor}
-        secureTextEntry
-      />
+        <TextField>
+          <TextField.Label>Password</TextField.Label>
+          <TextField.Input
+            value={password}
+            onChangeText={setPassword}
+            placeholder="••••••••"
+            secureTextEntry
+          />
+        </TextField>
 
-      <Pressable
-        onPress={handleSignUp}
-        disabled={isLoading}
-        className="bg-accent p-4 rounded-lg flex-row justify-center items-center active:opacity-70"
-      >
-        {isLoading ? (
-          <ActivityIndicator size="small" color={foregroundColor} />
-        ) : (
-          <Text className="text-foreground font-medium">Sign Up</Text>
-        )}
-      </Pressable>
-    </Card>
+        <Button onPress={handleSignUp} isDisabled={isLoading} className="mt-1">
+          {isLoading ? (
+            <Spinner size="sm" color="default" />
+          ) : (
+            <Button.Label>Create Account</Button.Label>
+          )}
+        </Button>
+      </View>
+    </Surface>
   );
 }
-

package/templates/auth/better-auth/native/uniwind/components/sign-in.tsx.hbs

@@ -6,14 +6,8 @@ import { queryClient } from "@/utils/trpc";
 import { queryClient } from "@/utils/orpc";
 {{/if}}
 import { useState } from "react";
-import {
-ActivityIndicator,
-Text,
-TextInput,
-Pressable,
-View,
-} from "react-native";
-import { Card, useThemeColor } from "heroui-native";
+import { Text, View } from "react-native";
+import { Button, ErrorView, Spinner, Surface, TextField } from "heroui-native";
 
 function SignIn() {
 const [email, setEmail] = useState("");
@@ -21,11 +15,6 @@ const [password, setPassword] = useState("");
 const [isLoading, setIsLoading] = useState(false);
 const [error, setError] = useState<string | null>(null);
 
-  const mutedColor = useThemeColor("muted");
-  const accentColor = useThemeColor("accent");
-  const foregroundColor = useThemeColor("foreground");
-  const dangerColor = useThemeColor("danger");
-
   async function handleLogin() {
   setIsLoading(true);
   setError(null);
@@ -58,32 +47,40 @@ const [error, setError] = useState<string | null>(null);
   }
 
   return (
-  <Card variant="secondary" className="mt-6 p-4">
-    <Card.Title className="mb-4">Sign In</Card.Title>
+  <Surface variant="secondary" className="p-4 rounded-lg">
+    <Text className="text-foreground font-medium mb-4">Sign In</Text>
 
-    {error ? (
-    <View className="mb-4 p-3 bg-danger/10 rounded-lg">
-      <Text className="text-danger text-sm">{error}</Text>
-    </View>
-    ) : null}
+    <ErrorView isInvalid={!!error} className="mb-3">
+      {error}
+    </ErrorView>
 
-    <TextInput className="mb-3 py-3 px-4 rounded-lg bg-surface text-foreground border border-divider"
-      placeholder="Email" value={email} onChangeText={setEmail} placeholderTextColor={mutedColor}
-      keyboardType="email-address" autoCapitalize="none" />
+    <View className="gap-3">
+      <TextField>
+        <TextField.Label>Email</TextField.Label>
+        <TextField.Input
+          value={email}
+          onChangeText={setEmail}
+          placeholder="email@example.com"
+          keyboardType="email-address"
+          autoCapitalize="none"
+        />
+      </TextField>
 
-    <TextInput className="mb-4 py-3 px-4 rounded-lg bg-surface text-foreground border border-divider"
-      placeholder="Password" value={password} onChangeText={setPassword} placeholderTextColor={mutedColor}
-      secureTextEntry />
+      <TextField>
+        <TextField.Label>Password</TextField.Label>
+        <TextField.Input
+          value={password}
+          onChangeText={setPassword}
+          placeholder="••••••••"
+          secureTextEntry
+        />
+      </TextField>
 
-    <Pressable onPress={handleLogin} disabled={isLoading}
-      className="bg-accent p-4 rounded-lg flex-row justify-center items-center active:opacity-70">
-      {isLoading ? (
-      <ActivityIndicator size="small" color={foregroundColor} />
-      ) : (
-      <Text className="text-foreground font-medium">Sign In</Text>
-      )}
-    </Pressable>
-  </Card>
+      <Button onPress={handleLogin} isDisabled={isLoading} className="mt-1">
+        {isLoading ? <Spinner size="sm" color="default" /> : <Button.Label>Sign In</Button.Label>}
+      </Button>
+    </View>
+  </Surface>
   );
   }
 

package/templates/auth/better-auth/native/uniwind/components/sign-up.tsx.hbs

@@ -6,14 +6,8 @@ import { queryClient } from "@/utils/trpc";
 import { queryClient } from "@/utils/orpc";
 {{/if}}
 import { useState } from "react";
-import {
-ActivityIndicator,
-Text,
-TextInput,
-Pressable,
-View,
-} from "react-native";
-import { Card, useThemeColor } from "heroui-native";
+import { Text, View } from "react-native";
+import { Button, ErrorView, Spinner, Surface, TextField } from "heroui-native";
 
 function signUpHandler({
 name,
@@ -24,6 +18,15 @@ setIsLoading,
 setName,
 setEmail,
 setPassword,
+}: {
+  name: string;
+  email: string;
+  password: string;
+  setError: (error: string | null) => void;
+  setIsLoading: (loading: boolean) => void;
+  setName: (name: string) => void;
+  setEmail: (email: string) => void;
+  setPassword: (password: string) => void;
 }) {
 setIsLoading(true);
 setError(null);
@@ -64,11 +67,6 @@ const [password, setPassword] = useState("");
 const [isLoading, setIsLoading] = useState(false);
 const [error, setError] = useState<string | null>(null);
 
-  const mutedColor = useThemeColor("muted");
-  const accentColor = useThemeColor("accent");
-  const foregroundColor = useThemeColor("foreground");
-  const dangerColor = useThemeColor("danger");
-
   function handlePress() {
   signUpHandler({
   name,
@@ -83,34 +81,48 @@ const [error, setError] = useState<string | null>(null);
   }
 
   return (
-  <Card variant="secondary" className="mt-6 p-4">
-    <Card.Title className="mb-4">Create Account</Card.Title>
+  <Surface variant="secondary" className="p-4 rounded-lg">
+    <Text className="text-foreground font-medium mb-4">Create Account</Text>
 
-    {error && (
-    <View className="mb-4 p-3 bg-danger/10 rounded-lg">
-      <Text className="text-danger text-sm">{error}</Text>
-    </View>
-    )}
+    <ErrorView isInvalid={!!error} className="mb-3">
+      {error}
+    </ErrorView>
 
-    <TextInput className="mb-3 py-3 px-4 rounded-lg bg-surface text-foreground border border-divider" placeholder="Name"
-      value={name} onChangeText={setName} placeholderTextColor={mutedColor} />
+    <View className="gap-3">
+      <TextField>
+        <TextField.Label>Name</TextField.Label>
+        <TextField.Input value={name} onChangeText={setName} placeholder="John Doe" />
+      </TextField>
 
-    <TextInput className="mb-3 py-3 px-4 rounded-lg bg-surface text-foreground border border-divider"
-      placeholder="Email" value={email} onChangeText={setEmail} placeholderTextColor={mutedColor}
-      keyboardType="email-address" autoCapitalize="none" />
+      <TextField>
+        <TextField.Label>Email</TextField.Label>
+        <TextField.Input
+          value={email}
+          onChangeText={setEmail}
+          placeholder="email@example.com"
+          keyboardType="email-address"
+          autoCapitalize="none"
+        />
+      </TextField>
 
-    <TextInput className="mb-4 py-3 px-4 rounded-lg bg-surface text-foreground border border-divider"
-      placeholder="Password" value={password} onChangeText={setPassword} placeholderTextColor={mutedColor}
-      secureTextEntry />
+      <TextField>
+        <TextField.Label>Password</TextField.Label>
+        <TextField.Input
+          value={password}
+          onChangeText={setPassword}
+          placeholder="••••••••"
+          secureTextEntry
+        />
+      </TextField>
 
-    <Pressable onPress={handlePress} disabled={isLoading}
-      className="bg-accent p-4 rounded-lg flex-row justify-center items-center active:opacity-70">
-      {isLoading ? (
-      <ActivityIndicator size="small" color={foregroundColor} />
-      ) : (
-      <Text className="text-foreground font-medium">Sign Up</Text>
-      )}
-    </Pressable>
-  </Card>
+      <Button onPress={handlePress} isDisabled={isLoading} className="mt-1">
+        {isLoading ? (
+          <Spinner size="sm" color="default" />
+        ) : (
+          <Button.Label>Create Account</Button.Label>
+        )}
+      </Button>
+    </View>
+  </Surface>
   );
   }

package/templates/auth/better-auth/web/nuxt/app/components/SignInForm.vue.hbs

@@ -1,13 +1,31 @@
 <script setup lang="ts">
-import z from 'zod'
-const {$authClient} = useNuxtApp()
-import type { FormSubmitEvent } from '#ui/types'
+import * as z from 'zod'
+import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
+
+const { $authClient } = useNuxtApp()
 
 const emit = defineEmits(['switchToSignUp'])
 
 const toast = useToast()
 const loading = ref(false)
 
+const fields: AuthFormField[] = [
+  {
+    name: 'email',
+    type: 'email',
+    label: 'Email',
+    placeholder: 'Enter your email',
+    required: true
+  },
+  {
+    name: 'password',
+    type: 'password',
+    label: 'Password',
+    placeholder: 'Enter your password',
+    required: true
+  }
+]
+
 const schema = z.object({
   email: z.email('Invalid email address'),
   password: z.string().min(8, 'Password must be at least 8 characters'),
@@ -15,12 +33,7 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 
-const state = reactive({
-  email: '',
-  password: '',
-})
-
-async function onSubmit (event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
   loading.value = true
   try {
     await $authClient.signIn.email(
@@ -39,7 +52,7 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
       },
     )
   } catch (error: any) {
-     toast.add({ title: 'An unexpected error occurred', description: error.message || 'Please try again.' })
+    toast.add({ title: 'An unexpected error occurred', description: error.message || 'Please try again.' })
   } finally {
     loading.value = false
   }
@@ -47,31 +60,23 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <div class="mx-auto w-full mt-10 max-w-md p-6">
-    <h1 class="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
-
-    <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
-      <UFormField label="Email" name="email">
-        <UInput v-model="state.email" type="email" class="w-full" />
-      </UFormField>
-
-      <UFormField label="Password" name="password">
-        <UInput v-model="state.password" type="password" class="w-full" />
-      </UFormField>
-
-      <UButton type="submit" block :loading="loading">
-        Sign In
-      </UButton>
-    </UForm>
-
-    <div class="mt-4 text-center">
-      <UButton
-        variant="link"
-        @click="$emit('switchToSignUp')"
-        class="text-primary hover:text-primary-dark"
+  <div class="flex flex-col items-center justify-center gap-4 p-4">
+    <UPageCard class="w-full max-w-md">
+      <UAuthForm
+        :schema="schema"
+        :fields="fields"
+        title="Welcome Back"
+        icon="i-lucide-log-in"
+        :submit="{ label: 'Sign In', loading }"
+        @submit="onSubmit"
       >
-        Need an account? Sign Up
-      </UButton>
-    </div>
+        <template #description>
+          Need an account?
+          <ULink class="text-primary font-medium" @click="$emit('switchToSignUp')">
+            Sign Up
+          </ULink>
+        </template>
+      </UAuthForm>
+    </UPageCard>
   </div>
 </template>