create-better-t-stack 3.2.21 → 3.2.23-canary.2b547ed5

package/templates/frontend/native/uniwind/global.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+@import 'uniwind';
+@import 'heroui-native/styles';
+
+@source './node_modules/heroui-native/lib';

package/templates/frontend/native/uniwind/metro.config.js.hbs

@@ -0,0 +1,13 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withUniwindConfig } = require("uniwind/metro");
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+const uniwindConfig = withUniwindConfig(config, {
+  cssEntryFile: "./global.css",
+  dtsFile: "./uniwind-types.d.ts",
+});
+
+module.exports = uniwindConfig;
+

package/templates/frontend/native/uniwind/package.json.hbs

@@ -0,0 +1,54 @@
+{
+  "name": "native",
+  "version": "1.0.0",
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "dev": "expo start --clear",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "prebuild": "expo prebuild",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~6.1.2",
+    "@expo/vector-icons": "^15.0.3",
+    "@gorhom/bottom-sheet": "^5",
+    "@react-navigation/drawer": "^7.3.9",
+    "@react-navigation/elements": "^2.8.1",
+    {{#if (includes examples "ai")}}
+    "@stardazed/streams-text-encoding": "^1.0.2",
+    "@ungap/structured-clone": "^1.3.0",
+    {{/if}}
+    "expo": "^54.0.23",
+    "expo-constants": "~18.0.10",
+    "expo-font": "~14.0.9",
+    "expo-haptics": "^15.0.7",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.14",
+    "expo-secure-store": "~15.0.7",
+    "expo-status-bar": "~3.0.8",
+    "heroui-native": "^1.0.0-beta.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-keyboard-controller": "1.18.5",
+    "react-native-reanimated": "~4.1.0",
+    "react-native-safe-area-context": "5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "15.12.1",
+    "react-native-web": "^0.21.0",
+    "react-native-worklets": "0.5.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.1.0",
+    "tailwindcss": "~4.1.16",
+    "uniwind": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.0",
+    "@types/react": "~19.1.0",
+    "typescript": "~5.9.2"
+  },
+  "private": true
+}

package/templates/frontend/native/{nativewind → uniwind}/tsconfig.json.hbs

@@ -2,17 +2,13 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "strict": true,
+    "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     }
   },
   "include": [
     "**/*.ts",
-    "**/*.tsx",
-    ".expo/types/**/*.ts",
-    "expo-env.d.ts",
-    "nativewind-env.d.ts"
+    "**/*.tsx"
   ]
-}
+}

package/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs

@@ -1,5 +1,4 @@
 import Header from "@/components/header";
-import Loader from "@/components/loader";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 {{#if (eq api "orpc")}}
@@ -20,7 +19,6 @@ import {
   HeadContent,
   Outlet,
   createRootRouteWithContext,
-  useRouterState,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import "../index.css";
@@ -61,10 +59,6 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
 });
 
 function RootComponent() {
-  const isFetching = useRouterState({
-    select: (s) => s.isLoading,
-  });
-
   {{#if (eq api "orpc")}}
   const [client] = useState<AppRouterClient>(() => createORPCClient(link));
   const [orpcUtils] = useState(() => createTanstackQueryUtils(client));
@@ -82,7 +76,7 @@ function RootComponent() {
         >
           <div className="grid grid-rows-[auto_1fr] h-svh">
             <Header />
-            {isFetching ? <Loader /> : <Outlet />}
+            <Outlet />
           </div>
           <Toaster richColors />
         </ThemeProvider>
@@ -95,7 +89,7 @@ function RootComponent() {
       >
         <div className="grid grid-rows-[auto_1fr] h-svh">
           <Header />
-          {isFetching ? <Loader /> : <Outlet />}
+          <Outlet />
         </div>
         <Toaster richColors />
       </ThemeProvider>

package/templates/frontend/react/tanstack-start/src/routes/__root.tsx.hbs

@@ -7,7 +7,6 @@ import {
   Outlet,
   Scripts,
   createRootRouteWithContext,
-  useRouterState,
 {{#if (and (eq backend "convex") (or (eq auth "clerk") (eq auth "better-auth")))}}
   useRouteContext,
 {{/if}}
@@ -24,7 +23,6 @@ import type { ConvexReactClient } from "convex/react";
 import type { QueryClient } from "@tanstack/react-query";
 {{/if}}
 {{/if}}
-import Loader from "@/components/loader";
 
 {{#if (and (eq backend "convex") (eq auth "clerk"))}}
 import { ClerkProvider, useAuth } from "@clerk/tanstack-react-start";
@@ -125,7 +123,6 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
 });
 
 function RootDocument() {
-  const isFetching = useRouterState({ select: (s) => s.isLoading });
   {{#if (and (eq backend "convex") (eq auth "clerk"))}}
   const context = useRouteContext({ from: Route.id });
   return (
@@ -138,7 +135,7 @@ function RootDocument() {
           <body>
             <div className="grid h-svh grid-rows-[auto_1fr]">
               <Header />
-              {isFetching ? <Loader /> : <Outlet />}
+              <Outlet />
             </div>
             <Toaster richColors />
             <TanStackRouterDevtools position="bottom-left" />
@@ -159,7 +156,7 @@ function RootDocument() {
         <body>
           <div className="grid h-svh grid-rows-[auto_1fr]">
             <Header />
-            {isFetching ? <Loader /> : <Outlet />}
+            <Outlet />
           </div>
           <Toaster richColors />
           <TanStackRouterDevtools position="bottom-left" />
@@ -177,7 +174,7 @@ function RootDocument() {
       <body>
         <div className="grid h-svh grid-rows-[auto_1fr]">
           <Header />
-          {isFetching ? <Loader /> : <Outlet />}
+          <Outlet />
         </div>
         <Toaster richColors />
         <TanStackRouterDevtools position="bottom-left" />

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

@@ -1,86 +0,0 @@
-import { authClient } from "@/lib/auth-client";
-import { useState } from "react";
-import {
-	ActivityIndicator,
-	Text,
-	TextInput,
-	TouchableOpacity,
-	View,
-} from "react-native";
-
-export function SignIn() {
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-
-	const handleLogin = async () => {
-		setIsLoading(true);
-		setError(null);
-
-		await authClient.signIn.email(
-			{
-				email,
-				password,
-			},
-			{
-				onError: (error) => {
-					setError(error.error?.message || "Failed to sign in");
-					setIsLoading(false);
-				},
-				onSuccess: () => {
-					setEmail("");
-					setPassword("");
-				},
-				onFinished: () => {
-					setIsLoading(false);
-				},
-			},
-		);
-	};
-
-	return (
-		<View className="mt-6 p-4 bg-card rounded-lg border border-border">
-			<Text className="text-lg font-semibold text-foreground mb-4">
-				Sign In
-			</Text>
-
-			{error && (
-				<View className="mb-4 p-3 bg-destructive/10 rounded-md">
-					<Text className="text-destructive text-sm">{error}</Text>
-				</View>
-			)}
-
-			<TextInput
-				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Email"
-				value={email}
-				onChangeText={setEmail}
-				placeholderTextColor="#9CA3AF"
-				keyboardType="email-address"
-				autoCapitalize="none"
-			/>
-
-			<TextInput
-				className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Password"
-				value={password}
-				onChangeText={setPassword}
-				placeholderTextColor="#9CA3AF"
-				secureTextEntry
-			/>
-
-			<TouchableOpacity
-				onPress={handleLogin}
-				disabled={isLoading}
-				className="bg-primary p-4 rounded-md flex-row justify-center items-center"
-			>
-				{isLoading ? (
-					<ActivityIndicator size="small" color="#fff" />
-				) : (
-					<Text className="text-primary-foreground font-medium">Sign In</Text>
-				)}
-			</TouchableOpacity>
-		</View>
-	);
-}

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

@@ -1,97 +0,0 @@
-import { authClient } from "@/lib/auth-client";
-import { useState } from "react";
-import {
-	ActivityIndicator,
-	Text,
-	TextInput,
-	TouchableOpacity,
-	View,
-} from "react-native";
-
-export function SignUp() {
-	const [name, setName] = useState("");
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-
-	const handleSignUp = async () => {
-		setIsLoading(true);
-		setError(null);
-
-		await authClient.signUp.email(
-			{
-				name,
-				email,
-				password,
-			},
-			{
-				onError: (error) => {
-					setError(error.error?.message || "Failed to sign up");
-					setIsLoading(false);
-				},
-				onSuccess: () => {
-					setName("");
-					setEmail("");
-					setPassword("");
-				},
-				onFinished: () => {
-					setIsLoading(false);
-				},
-			},
-		);
-	};
-
-	return (
-		<View className="mt-6 p-4 bg-card rounded-lg border border-border">
-			<Text className="text-lg font-semibold text-foreground mb-4">
-				Create Account
-			</Text>
-
-			{error && (
-				<View className="mb-4 p-3 bg-destructive/10 rounded-md">
-					<Text className="text-destructive text-sm">{error}</Text>
-				</View>
-			)}
-
-			<TextInput
-				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Name"
-				value={name}
-				onChangeText={setName}
-				placeholderTextColor="#9CA3AF"
-			/>
-
-			<TextInput
-				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Email"
-				value={email}
-				onChangeText={setEmail}
-				placeholderTextColor="#9CA3AF"
-				keyboardType="email-address"
-				autoCapitalize="none"
-			/>
-
-			<TextInput
-				className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Password"
-				value={password}
-				onChangeText={setPassword}
-				placeholderTextColor="#9CA3AF"
-				secureTextEntry
-			/>
-
-			<TouchableOpacity
-				onPress={handleSignUp}
-				disabled={isLoading}
-				className="bg-primary p-4 rounded-md flex-row justify-center items-center"
-			>
-				{isLoading ? (
-					<ActivityIndicator size="small" color="#fff" />
-				) : (
-					<Text className="text-primary-foreground font-medium">Sign Up</Text>
-				)}
-			</TouchableOpacity>
-		</View>
-	);
-}

package/templates/auth/better-auth/native/nativewind/app/(drawer)/index.tsx.hbs

@@ -1,95 +0,0 @@
-import { authClient } from "@/lib/auth-client";
-import { useQuery } from "@tanstack/react-query";
-import { ScrollView, Text, TouchableOpacity, View } from "react-native";
-
-import { Container } from "@/components/container";
-import { SignIn } from "@/components/sign-in";
-import { SignUp } from "@/components/sign-up";
-{{#if (eq api "orpc")}}
-import { queryClient, orpc } from "@/utils/orpc";
-{{/if}}
-{{#if (eq api "trpc")}}
-import { queryClient, trpc } from "@/utils/trpc";
-{{/if}}
-
-export default function Home() {
-	{{#if (eq api "orpc")}}
-	const healthCheck = useQuery(orpc.healthCheck.queryOptions());
-	const privateData = useQuery(orpc.privateData.queryOptions());
-	{{/if}}
-	{{#if (eq api "trpc")}}
-	const healthCheck = useQuery(trpc.healthCheck.queryOptions());
-	const privateData = useQuery(trpc.privateData.queryOptions());
-	{{/if}}
-	const { data: session } = authClient.useSession();
-
-	return (
-		<Container>
-			<ScrollView className="flex-1">
-				<View className="px-4">
-					<Text className="font-mono text-foreground text-3xl font-bold mb-4">
-						BETTER T STACK
-					</Text>
-					{session?.user ? (
-						<View className="mb-6 p-4 bg-card rounded-lg border border-border">
-							<View className="flex-row justify-between items-center mb-2">
-								<Text className="text-foreground text-base">
-									Welcome,{" "}
-									<Text className="font-medium">{session.user.name}</Text>
-								</Text>
-							</View>
-							<Text className="text-muted-foreground text-sm mb-4">
-								{session.user.email}
-							</Text>
-
-							<TouchableOpacity
-								className="bg-destructive py-2 px-4 rounded-md self-start"
-								onPress={() => {
-									authClient.signOut();
-									queryClient.invalidateQueries();
-								}}
-							>
-								<Text className="text-white font-medium">Sign Out</Text>
-							</TouchableOpacity>
-						</View>
-					) : null}
-					<View className="mb-6 rounded-lg border border-border p-4">
-						<Text className="mb-3 font-medium text-foreground">API Status</Text>
-						<View className="flex-row items-center gap-2">
-							<View
-								className={`h-3 w-3 rounded-full ${
-									healthCheck.data ? "bg-green-500" : "bg-red-500"
-								}`}
-							/>
-							<Text className="text-muted-foreground">
-								{healthCheck.isLoading
-									? "Checking..."
-									: healthCheck.data
-										? "Connected to API"
-										: "API Disconnected"}
-							</Text>
-						</View>
-					</View>
-					<View className="mb-6 rounded-lg border border-border p-4">
-						<Text className="mb-3 font-medium text-foreground">
-							Private Data
-						</Text>
-						{privateData && (
-							<View>
-								<Text className="text-muted-foreground">
-									{privateData.data?.message}
-								</Text>
-							</View>
-						)}
-					</View>
-					{!session?.user && (
-						<>
-							<SignIn />
-							<SignUp />
-						</>
-					)}
-				</View>
-			</ScrollView>
-		</Container>
-	);
-}

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

@@ -1,93 +0,0 @@
-import { authClient } from "@/lib/auth-client";
-{{#if (eq api "trpc")}}
-import { queryClient } from "@/utils/trpc";
-{{/if}}
-{{#if (eq api "orpc")}}
-import { queryClient } from "@/utils/orpc";
-{{/if}}
-import { useState } from "react";
-import {
-	ActivityIndicator,
-	Text,
-	TextInput,
-	TouchableOpacity,
-	View,
-} from "react-native";
-
-export function SignIn() {
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-
-	const handleLogin = async () => {
-		setIsLoading(true);
-		setError(null);
-
-		await authClient.signIn.email(
-			{
-				email,
-				password,
-			},
-			{
-				onError: (error) => {
-					setError(error.error?.message || "Failed to sign in");
-					setIsLoading(false);
-				},
-				onSuccess: () => {
-					setEmail("");
-					setPassword("");
-					queryClient.refetchQueries();
-				},
-				onFinished: () => {
-					setIsLoading(false);
-				},
-			},
-		);
-	};
-
-	return (
-		<View className="mt-6 p-4 bg-card rounded-lg border border-border">
-			<Text className="text-lg font-semibold text-foreground mb-4">
-				Sign In
-			</Text>
-
-			{error && (
-				<View className="mb-4 p-3 bg-destructive/10 rounded-md">
-					<Text className="text-destructive text-sm">{error}</Text>
-				</View>
-			)}
-
-			<TextInput
-				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Email"
-				value={email}
-				onChangeText={setEmail}
-				placeholderTextColor="#9CA3AF"
-				keyboardType="email-address"
-				autoCapitalize="none"
-			/>
-
-			<TextInput
-				className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Password"
-				value={password}
-				onChangeText={setPassword}
-				placeholderTextColor="#9CA3AF"
-				secureTextEntry
-			/>
-
-			<TouchableOpacity
-				onPress={handleLogin}
-				disabled={isLoading}
-				className="bg-primary p-4 rounded-md flex-row justify-center items-center"
-			>
-				{isLoading ? (
-					<ActivityIndicator size="small" color="#fff" />
-				) : (
-					<Text className="text-primary-foreground font-medium">Sign In</Text>
-				)}
-			</TouchableOpacity>
-		</View>
-	);
-}

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

@@ -1,104 +0,0 @@
-import { authClient } from "@/lib/auth-client";
-{{#if (eq api "trpc")}}
-import { queryClient } from "@/utils/trpc";
-{{/if}}
-{{#if (eq api "orpc")}}
-import { queryClient } from "@/utils/orpc";
-{{/if}}
-import { useState } from "react";
-import {
-	ActivityIndicator,
-	Text,
-	TextInput,
-	TouchableOpacity,
-	View,
-} from "react-native";
-
-export function SignUp() {
-	const [name, setName] = useState("");
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-
-	const handleSignUp = async () => {
-		setIsLoading(true);
-		setError(null);
-
-		await authClient.signUp.email(
-			{
-				name,
-				email,
-				password,
-			},
-			{
-				onError: (error) => {
-					setError(error.error?.message || "Failed to sign up");
-					setIsLoading(false);
-				},
-				onSuccess: () => {
-					setName("");
-					setEmail("");
-					setPassword("");
-					queryClient.refetchQueries();
-				},
-				onFinished: () => {
-					setIsLoading(false);
-				},
-			},
-		);
-	};
-
-	return (
-		<View className="mt-6 p-4 bg-card rounded-lg border border-border">
-			<Text className="text-lg font-semibold text-foreground mb-4">
-				Create Account
-			</Text>
-
-			{error && (
-				<View className="mb-4 p-3 bg-destructive/10 rounded-md">
-					<Text className="text-destructive text-sm">{error}</Text>
-				</View>
-			)}
-
-			<TextInput
-				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Name"
-				value={name}
-				onChangeText={setName}
-				placeholderTextColor="#9CA3AF"
-			/>
-
-			<TextInput
-				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Email"
-				value={email}
-				onChangeText={setEmail}
-				placeholderTextColor="#9CA3AF"
-				keyboardType="email-address"
-				autoCapitalize="none"
-			/>
-
-			<TextInput
-				className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Password"
-				value={password}
-				onChangeText={setPassword}
-				placeholderTextColor="#9CA3AF"
-				secureTextEntry
-			/>
-
-			<TouchableOpacity
-				onPress={handleSignUp}
-				disabled={isLoading}
-				className="bg-primary p-4 rounded-md flex-row justify-center items-center"
-			>
-				{isLoading ? (
-					<ActivityIndicator size="small" color="#fff" />
-				) : (
-					<Text className="text-primary-foreground font-medium">Sign Up</Text>
-				)}
-			</TouchableOpacity>
-		</View>
-	);
-}