@better-t-stack/template-generator 3.13.2-dev.6c6cffb

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,191 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,132 @@
+{{#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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,19 @@
+{
+  "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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,62 @@
+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

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