create-better-t-stack 3.13.2 → 3.14.0

package/templates/frontend/native/uniwind/app/(drawer)/(tabs)/index.tsx.hbs

@@ -1,15 +0,0 @@
-import { Container } from "@/components/container";
-import { Text, View } from "react-native";
-import { Card } from "heroui-native";
-
-export default function Home() {
-	return (
-		<Container className="p-6">
-			<View className="flex-1 justify-center items-center">
-				<Card variant="secondary" className="p-8 items-center">
-					<Card.Title className="text-3xl mb-2">Tab One</Card.Title>
-				</Card>
-			</View>
-		</Container>
-	);
-}

package/templates/frontend/native/uniwind/app/(drawer)/(tabs)/two.tsx.hbs

@@ -1,15 +0,0 @@
-import { Container } from "@/components/container";
-import { Text, View } from "react-native";
-import { Card } from "heroui-native";
-
-export default function TabTwo() {
-	return (
-		<Container className="p-6">
-			<View className="flex-1 justify-center items-center">
-				<Card variant="secondary" className="p-8 items-center">
-					<Card.Title className="text-3xl mb-2">TabTwo</Card.Title>
-				</Card>
-			</View>
-		</Container>
-	);
-}

package/templates/frontend/native/uniwind/app/(drawer)/_layout.tsx.hbs

@@ -1,91 +0,0 @@
-import React, { useCallback } from "react";
-import { Ionicons, MaterialIcons } from "@expo/vector-icons";
-import { Link } from "expo-router";
-import { Drawer } from "expo-router/drawer";
-import { useThemeColor } from "heroui-native";
-import { Pressable, Text } from "react-native";
-import { ThemeToggle } from "@/components/theme-toggle";
-
-function DrawerLayout() {
-  const themeColorForeground = useThemeColor("foreground");
-  const themeColorBackground = useThemeColor("background");
-
-  const renderThemeToggle = useCallback(() => <ThemeToggle />, []);
-
-  return (
-    <Drawer
-      screenOptions=\{{
-        headerTintColor: themeColorForeground,
-        headerStyle: { backgroundColor: themeColorBackground },
-        headerTitleStyle: {
-          fontWeight: "600",
-          color: themeColorForeground,
-        },
-        headerRight: renderThemeToggle,
-        drawerStyle: { backgroundColor: themeColorBackground },
-      }}
-    >
-      <Drawer.Screen
-        name="index"
-        options=\{{
-          headerTitle: "Home",
-          drawerLabel: ({ color, focused }) => (
-            <Text style=\{{ color: focused ? color : themeColorForeground }}>Home</Text>
-          ),
-          drawerIcon: ({ size, color, focused }) => (
-            <Ionicons name="home-outline" size={size} color={focused ? color : themeColorForeground} />
-          ),
-        }}
-      />
-      <Drawer.Screen
-        name="(tabs)"
-        options=\{{
-          headerTitle: "Tabs",
-          drawerLabel: ({ color, focused }) => (
-            <Text style=\{{ color: focused ? color : themeColorForeground }}>Tabs</Text>
-          ),
-          drawerIcon: ({ size, color, focused }) => (
-            <MaterialIcons name="border-bottom" size={size} color={focused ? color : themeColorForeground} />
-          ),
-          headerRight: () => (
-            <Link href="/modal" asChild>
-              <Pressable className="mr-4">
-                <Ionicons name="add-outline" size={24} color={themeColorForeground} />
-              </Pressable>
-            </Link>
-          ),
-        }}
-      />
-      {{#if (includes examples "todo")}}
-      <Drawer.Screen
-        name="todos"
-        options=\{{
-          headerTitle: "Todos",
-          drawerLabel: ({ color, focused }) => (
-            <Text style=\{{ color: focused ? color : themeColorForeground }}>Todos</Text>
-          ),
-          drawerIcon: ({ size, color, focused }) => (
-            <Ionicons name="checkbox-outline" size={size} color={focused ? color : themeColorForeground} />
-          ),
-        }}
-      />
-      {{/if}}
-      {{#if (includes examples "ai")}}
-      <Drawer.Screen
-        name="ai"
-        options=\{{
-          headerTitle: "AI",
-          drawerLabel: ({ color, focused }) => (
-            <Text style=\{{ color: focused ? color : themeColorForeground }}>AI</Text>
-          ),
-          drawerIcon: ({ size, color, focused }) => (
-            <Ionicons name="chatbubble-ellipses-outline" size={size} color={focused ? color : themeColorForeground} />
-          ),
-        }}
-      />
-      {{/if}}
-    </Drawer>
-  );
-}
-
-export default DrawerLayout;

package/templates/frontend/native/uniwind/app/(drawer)/index.tsx.hbs

@@ -1,191 +0,0 @@
-import { Text, View } from "react-native";
-import { Container } from "@/components/container";
-{{#if (eq api "orpc")}}
-import { useQuery } from "@tanstack/react-query";
-import { orpc } from "@/utils/orpc";
-{{/if}}
-{{#if (eq api "trpc")}}
-import { useQuery } from "@tanstack/react-query";
-import { trpc } from "@/utils/trpc";
-{{/if}}
-{{#if (and (eq backend "convex") (eq auth "clerk"))}}
-import { Link } from "expo-router";
-import { Authenticated, AuthLoading, Unauthenticated, useQuery } from "convex/react";
-import { api } from "@{{projectName}}/backend/convex/_generated/api";
-import { useUser } from "@clerk/clerk-expo";
-import { SignOutButton } from "@/components/sign-out-button";
-{{else if (and (eq backend "convex") (eq auth "better-auth"))}}
-import { useConvexAuth, useQuery } from "convex/react";
-import { api } from "@{{projectName}}/backend/convex/_generated/api";
-import { authClient } from "@/lib/auth-client";
-import { SignIn } from "@/components/sign-in";
-import { SignUp } from "@/components/sign-up";
-{{else if (eq backend "convex")}}
-import { useQuery } from "convex/react";
-import { api } from "@{{projectName}}/backend/convex/_generated/api";
-{{/if}}
-{{#unless (or (eq backend "none") (and (eq backend "convex") (eq auth "better-auth")))}}
-import { Ionicons } from "@expo/vector-icons";
-{{/unless}}
-import { Button, Chip, Divider, Spinner, Surface, useThemeColor } from "heroui-native";
-
-export default function Home() {
-{{#if (eq api "orpc")}}
-const healthCheck = useQuery(orpc.healthCheck.queryOptions());
-{{/if}}
-{{#if (eq api "trpc")}}
-const healthCheck = useQuery(trpc.healthCheck.queryOptions());
-{{/if}}
-{{#if (and (eq backend "convex") (eq auth "clerk"))}}
-const { user } = useUser();
-const healthCheck = useQuery(api.healthCheck.get);
-const privateData = useQuery(api.privateData.get);
-{{else if (and (eq backend "convex") (eq auth "better-auth"))}}
-const healthCheck = useQuery(api.healthCheck.get);
-const { isAuthenticated } = useConvexAuth();
-const user = useQuery(api.auth.getCurrentUser, isAuthenticated ? {} : "skip");
-{{else if (eq backend "convex")}}
-const healthCheck = useQuery(api.healthCheck.get);
-{{/if}}
-{{#unless (eq backend "none")}}
-const successColor = useThemeColor("success");
-const dangerColor = useThemeColor("danger");
-
-{{#if (eq backend "convex")}}
-const isConnected = healthCheck === "OK";
-const isLoading = healthCheck === undefined;
-{{else}}
-{{#unless (eq api "none")}}
-const isConnected = healthCheck?.data === "OK";
-const isLoading = healthCheck?.isLoading;
-{{/unless}}
-{{/if}}
-{{/unless}}
-
-return (
-<Container className="p-4">
-  <View className="py-6 mb-4">
-    <Text className="text-3xl font-semibold text-foreground tracking-tight">
-      Better T Stack
-    </Text>
-    <Text className="text-muted text-sm mt-1">Full-stack TypeScript starter</Text>
-  </View>
-
-  {{#unless (or (eq backend "none") (and (eq backend "convex") (eq auth "better-auth")))}}
-  <Surface variant="secondary" className="p-4 rounded-lg">
-    <View className="flex-row items-center justify-between mb-3">
-      <Text className="text-foreground font-medium">System Status</Text>
-      <Chip variant="secondary" color={isConnected ? "success" : "danger" } size="sm">
-        <Chip.Label>
-          {isConnected ? "LIVE" : "OFFLINE"}
-        </Chip.Label>
-      </Chip>
-    </View>
-
-    <Divider className="mb-3" />
-
-    <Surface variant="tertiary" className="p-3 rounded-md">
-      <View className="flex-row items-center">
-        <View className={`w-2 h-2 rounded-full mr-3 ${ isConnected ? "bg-success" : "bg-muted" }`} />
-        <View className="flex-1">
-          <Text className="text-foreground text-sm font-medium">
-            {{#if (eq backend "convex")}}
-            Convex Backend
-            {{else}}
-            {{#unless (eq api "none")}}
-            {{#if (eq api "orpc")}}ORPC{{else}}TRPC{{/if}} Backend
-            {{/unless}}
-            {{/if}}
-          </Text>
-          <Text className="text-muted text-xs mt-0.5">
-            {isLoading
-            ? "Checking connection..."
-            : isConnected
-            ? "Connected to API"
-            : "API Disconnected"}
-          </Text>
-        </View>
-        {isLoading && <Spinner size="sm" />}
-        {!isLoading && isConnected && (
-        <Ionicons name="checkmark-circle" size={18} color={successColor} />
-        )}
-        {!isLoading && !isConnected && (
-        <Ionicons name="close-circle" size={18} color={dangerColor} />
-        )}
-      </View>
-    </Surface>
-  </Surface>
-  {{/unless}}
-
-  {{#if (and (eq backend "convex") (eq auth "clerk"))}}
-  <Authenticated>
-    <Surface variant="secondary" className="mt-4 p-4 rounded-lg">
-      <View className="flex-row items-center justify-between">
-        <View className="flex-1">
-          <Text className="text-foreground font-medium">{user?.emailAddresses[0].emailAddress}</Text>
-          <Text className="text-muted text-xs mt-0.5">Private: {privateData?.message}</Text>
-        </View>
-        <SignOutButton />
-      </View>
-    </Surface>
-  </Authenticated>
-  <Unauthenticated>
-    <View className="mt-4 gap-3">
-      <Link href="/(auth)/sign-in" asChild>
-        <Button variant="secondary"><Button.Label>Sign In</Button.Label></Button>
-      </Link>
-      <Link href="/(auth)/sign-up" asChild>
-        <Button variant="ghost"><Button.Label>Sign Up</Button.Label></Button>
-      </Link>
-    </View>
-  </Unauthenticated>
-  <AuthLoading>
-    <View className="mt-4 items-center">
-      <Spinner size="sm" />
-    </View>
-  </AuthLoading>
-  {{/if}}
-
-  {{#if (and (eq backend "convex") (eq auth "better-auth"))}}
-  {user ? (
-  <Surface variant="secondary" className="mb-4 p-4 rounded-lg">
-    <View className="flex-row items-center justify-between">
-      <View className="flex-1">
-        <Text className="text-foreground font-medium">{user.name}</Text>
-        <Text className="text-muted text-xs mt-0.5">{user.email}</Text>
-      </View>
-      <Button
-        variant="destructive"
-        size="sm"
-        onPress={() => {
-          authClient.signOut();
-        }}
-      >
-        Sign Out
-      </Button>
-    </View>
-  </Surface>
-  ) : null}
-  <Surface variant="secondary" className="p-4 rounded-lg">
-    <Text className="text-foreground font-medium mb-2">API Status</Text>
-    <View className="flex-row items-center gap-2">
-      <View className={`w-2 h-2 rounded-full ${healthCheck==="OK" ? "bg-success" : "bg-danger" }`} />
-      <Text className="text-muted text-xs">
-        {healthCheck === undefined
-        ? "Checking..."
-        : healthCheck === "OK"
-        ? "Connected to API"
-        : "API Disconnected"}
-      </Text>
-    </View>
-  </Surface>
-  {!user && (
-  <View className="mt-4 gap-4">
-    <SignIn />
-    <SignUp />
-  </View>
-  )}
-  {{/if}}
-</Container>
-);
-}

package/templates/frontend/native/uniwind/app/+not-found.tsx.hbs

@@ -1,27 +0,0 @@
-import { Link, Stack } from "expo-router";
-import { Button, Surface } from "heroui-native";
-import { Text, View } from "react-native";
-
-import { Container } from "@/components/container";
-
-export default function NotFoundScreen() {
-	return (
-		<>
-			<Stack.Screen options=\{{ title: "Not Found" }} />
-			<Container>
-				<View className="flex-1 justify-center items-center p-4">
-					<Surface variant="secondary" className="items-center p-6 max-w-sm rounded-lg">
-						<Text className="text-4xl mb-3">🤔</Text>
-						<Text className="text-foreground font-medium text-lg mb-1">Page Not Found</Text>
-						<Text className="text-muted text-sm text-center mb-4">
-							The page you're looking for doesn't exist.
-						</Text>
-						<Link href="/" asChild>
-							<Button size="sm">Go Home</Button>
-						</Link>
-					</Surface>
-				</View>
-			</Container>
-		</>
-	);
-}

package/templates/frontend/native/uniwind/app/_layout.tsx.hbs

@@ -1,132 +0,0 @@
-{{#if (includes examples "ai")}}
-import "@/polyfills";
-{{/if}}
-
-import "@/global.css";
-
-{{#if (eq backend "convex")}}
-  {{#if (eq auth "better-auth")}}
-    import { ConvexReactClient } from "convex/react";
-    import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
-    import { authClient } from "@/lib/auth-client";
-    import { env } from "@{{projectName}}/env/native";
-  {{else}}
-    import { ConvexProvider, ConvexReactClient } from "convex/react";
-    import { env } from "@{{projectName}}/env/native";
-  {{/if}}
-
-  {{#if (eq auth "clerk")}}
-    import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
-    import { ConvexProviderWithClerk } from "convex/react-clerk";
-    import { tokenCache } from "@clerk/clerk-expo/token-cache";
-  {{/if}}
-{{else}}
-  {{#unless (eq api "none")}}
-    import { QueryClientProvider } from "@tanstack/react-query";
-  {{/unless}}
-{{/if}}
-
-import { Stack } from "expo-router";
-import { HeroUINativeProvider } from "heroui-native";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { KeyboardProvider } from "react-native-keyboard-controller";
-import { AppThemeProvider } from "@/contexts/app-theme-context";
-
-{{#if (eq api "trpc")}}
-  import { queryClient } from "@/utils/trpc";
-{{/if}}
-{{#if (eq api "orpc")}}
-  import { queryClient } from "@/utils/orpc";
-{{/if}}
-
-export const unstable_settings = {
-  initialRouteName: "(drawer)",
-};
-
-{{#if (eq backend "convex")}}
-  const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL, {
-    unsavedChangesWarning: false,
-  });
-{{/if}}
-
-function StackLayout() {
-  return (
-    <Stack screenOptions=\{{}}>
-      <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-      {{#if (eq auth "clerk")}}
-        <Stack.Screen name="(auth)" options=\{{ headerShown: false }} />
-      {{/if}}
-      <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
-    </Stack>
-  );
-}
-
-export default function Layout() {
-  return (
-    {{#if (eq backend "convex")}}
-      {{#if (eq auth "clerk")}}
-        <ClerkProvider tokenCache={tokenCache} publishableKey={env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
-          <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
-            <GestureHandlerRootView style=\{{ flex: 1 }}>
-              <KeyboardProvider>
-                <AppThemeProvider>
-                  <HeroUINativeProvider>
-                    <StackLayout />
-                  </HeroUINativeProvider>
-                </AppThemeProvider>
-              </KeyboardProvider>
-            </GestureHandlerRootView>
-          </ConvexProviderWithClerk>
-        </ClerkProvider>
-      {{else if (eq auth "better-auth")}}
-        <ConvexBetterAuthProvider client={convex} authClient={authClient}>
-          <GestureHandlerRootView style=\{{ flex: 1 }}>
-            <KeyboardProvider>
-              <AppThemeProvider>
-                <HeroUINativeProvider>
-                  <StackLayout />
-                </HeroUINativeProvider>
-              </AppThemeProvider>
-            </KeyboardProvider>
-          </GestureHandlerRootView>
-        </ConvexBetterAuthProvider>
-      {{else}}
-        <ConvexProvider client={convex}>
-          <GestureHandlerRootView style=\{{ flex: 1 }}>
-            <KeyboardProvider>
-              <AppThemeProvider>
-                <HeroUINativeProvider>
-                  <StackLayout />
-                </HeroUINativeProvider>
-              </AppThemeProvider>
-            </KeyboardProvider>
-          </GestureHandlerRootView>
-        </ConvexProvider>
-      {{/if}}
-    {{else}}
-      {{#unless (eq api "none")}}
-        <QueryClientProvider client={queryClient}>
-          <GestureHandlerRootView style=\{{ flex: 1 }}>
-            <KeyboardProvider>
-              <AppThemeProvider>
-                <HeroUINativeProvider>
-                  <StackLayout />
-                </HeroUINativeProvider>
-              </AppThemeProvider>
-            </KeyboardProvider>
-          </GestureHandlerRootView>
-        </QueryClientProvider>
-      {{else}}
-        <GestureHandlerRootView style=\{{ flex: 1 }}>
-          <KeyboardProvider>
-            <AppThemeProvider>
-              <HeroUINativeProvider>
-                <StackLayout />
-              </HeroUINativeProvider>
-            </AppThemeProvider>
-          </KeyboardProvider>
-        </GestureHandlerRootView>
-      {{/unless}}
-    {{/if}}
-  );
-}

package/templates/frontend/native/uniwind/app/modal.tsx.hbs

@@ -1,37 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { router } from "expo-router";
-import { Button, Surface, useThemeColor } from "heroui-native";
-import { Text, View } from "react-native";
-
-import { Container } from "@/components/container";
-
-function Modal() {
-	const accentForegroundColor = useThemeColor("accent-foreground");
-
-	function handleClose() {
-		router.back();
-	}
-
-	return (
-		<Container>
-			<View className="flex-1 justify-center items-center p-4">
-				<Surface variant="secondary" className="p-5 w-full max-w-sm rounded-lg">
-					<View className="items-center">
-						<View className="w-12 h-12 bg-accent rounded-lg items-center justify-center mb-3">
-							<Ionicons name="checkmark" size={24} color={accentForegroundColor} />
-						</View>
-						<Text className="text-foreground font-medium text-lg mb-1">Modal Screen</Text>
-						<Text className="text-muted text-sm text-center mb-4">
-							This is an example modal screen for dialogs and confirmations.
-						</Text>
-					</View>
-					<Button onPress={handleClose} className="w-full" size="sm">
-						<Button.Label>Close</Button.Label>
-					</Button>
-				</Surface>
-			</View>
-		</Container>
-	);
-}
-
-export default Modal;

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

@@ -1,19 +0,0 @@
-{
-  "expo": {
-    "scheme": "{{projectName}}",
-    "userInterfaceStyle": "automatic",
-    "orientation": "default",
-    "web": {
-      "bundler": "metro"
-    },
-    "name": "{{projectName}}",
-    "slug": "{{projectName}}",
-    "plugins": [
-      "expo-font"
-    ],
-    "experiments": {
-      "typedRoutes": true,
-      "reactCompiler": true
-    }
-  }
-}

package/templates/frontend/native/uniwind/components/container.tsx.hbs

@@ -1,33 +0,0 @@
-import { cn } from "heroui-native";
-import { type PropsWithChildren } from "react";
-import { ScrollView, View, type ViewProps } from "react-native";
-import Animated, { type AnimatedProps } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-const AnimatedView = Animated.createAnimatedComponent(View);
-
-type Props = AnimatedProps<ViewProps> & {
-	className?: string;
-};
-
-export function Container({
-	children,
-	className,
-	...props
-}: PropsWithChildren<Props>) {
-	const insets = useSafeAreaInsets();
-
-	return (
-		<AnimatedView
-			className={cn("flex-1 bg-background", className)}
-			style=\{{
-				paddingBottom: insets.bottom,
-			}}
-			{...props}
-		>
-			<ScrollView contentContainerStyle=\{{ flexGrow: 1 }}>
-				{children}
-			</ScrollView>
-		</AnimatedView>
-	);
-}

package/templates/frontend/native/uniwind/components/theme-toggle.tsx.hbs

@@ -1,35 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import * as Haptics from 'expo-haptics';
-import { Platform, Pressable } from 'react-native';
-import Animated, { FadeOut, ZoomIn } from 'react-native-reanimated';
-import { withUniwind } from 'uniwind';
-import { useAppTheme } from '@/contexts/app-theme-context';
-
-const StyledIonicons = withUniwind(Ionicons);
-
-export function ThemeToggle() {
-	const { toggleTheme, isLight } = useAppTheme();
-
-	return (
-		<Pressable
-			onPress={() => {
-				if (Platform.OS === 'ios') {
-					Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-				}
-				toggleTheme();
-			}}
-			className="px-2.5"
-		>
-			{isLight ? (
-				<Animated.View key="moon" entering={ZoomIn} exiting={FadeOut}>
-					<StyledIonicons name="moon" size={20} className="text-foreground" />
-				</Animated.View>
-			) : (
-				<Animated.View key="sun" entering={ZoomIn} exiting={FadeOut}>
-					<StyledIonicons name="sunny" size={20} className="text-foreground" />
-				</Animated.View>
-			)}
-		</Pressable>
-	);
-}
-

package/templates/frontend/native/uniwind/contexts/app-theme-context.tsx.hbs

@@ -1,62 +0,0 @@
-import React, { createContext, useCallback, useContext, useMemo } from 'react';
-import { Uniwind, useUniwind } from 'uniwind';
-
-type ThemeName = 'light' | 'dark';
-
-type AppThemeContextType = {
-    currentTheme: string;
-    isLight: boolean;
-    isDark: boolean;
-    setTheme: (theme: ThemeName) => void;
-    toggleTheme: () => void;
-}
-
-const AppThemeContext = createContext<AppThemeContextType | undefined>(
-    undefined
-);
-
-export const AppThemeProvider = ({ children }: { children: React.ReactNode }) => {
-    const { theme } = useUniwind();
-
-    const isLight = useMemo(() => {
-        return theme === 'light';
-    }, [theme]);
-
-    const isDark = useMemo(() => {
-        return theme === 'dark';
-    }, [theme]);
-
-    const setTheme = useCallback((newTheme: ThemeName) => {
-        Uniwind.setTheme(newTheme);
-    }, []);
-
-    const toggleTheme = useCallback(() => {
-        Uniwind.setTheme(theme === 'light' ? 'dark' : 'light');
-    }, [theme]);
-
-    const value = useMemo(
-        () => ({
-            currentTheme: theme,
-            isLight,
-            isDark,
-            setTheme,
-            toggleTheme,
-        }),
-        [theme, isLight, isDark, setTheme, toggleTheme]
-    );
-
-    return (
-        <AppThemeContext.Provider value={value}>
-            {children}
-        </AppThemeContext.Provider>
-    );
-};
-
-export function useAppTheme() {
-    const context = useContext(AppThemeContext);
-    if (!context) {
-        throw new Error('useAppTheme must be used within AppThemeProvider');
-    }
-    return context;
-}
-

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

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