create-better-t-stack 3.13.1 → 3.13.2-dev.6c6cffb

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

@@ -1,234 +0,0 @@
-import { View, Text, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { Container } from "@/components/container";
-import { useColorScheme } from "@/lib/use-color-scheme";
-import { NAV_THEME } from "@/lib/constants";
-{{#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}}
-
-export default function Home() {
-const { colorScheme } = useColorScheme();
-const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
-{{#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}}
-
-return (
-<Container>
-  <ScrollView style={styles.scrollView}>
-    <View style={styles.content}>
-      <Text style={[styles.title, { color: theme.text }]}>
-        BETTER T STACK
-      </Text>
-
-      {{#unless (and (eq backend "convex") (eq auth "better-auth"))}}
-      <View style={[styles.card, { backgroundColor: theme.card, borderColor: theme.border }]}>
-        {{#if (eq backend "convex")}}
-        <View style={styles.statusRow}>
-          <View style={[styles.statusIndicator, { backgroundColor: healthCheck ? "#10b981" : "#f59e0b" }]} />
-          <View style={styles.statusContent}>
-            <Text style={[styles.statusTitle, { color: theme.text }]}>
-              Convex
-            </Text>
-            <Text style={[styles.statusText, { color: theme.text, opacity: 0.7 }]}>
-              {healthCheck === undefined
-              ? "Checking..."
-              : healthCheck === "OK"
-              ? "Connected to API"
-              : "API Disconnected"}
-            </Text>
-          </View>
-        </View>
-        {{else}}
-        {{#unless (eq api "none")}}
-        <View style={styles.statusRow}>
-          <View style={[styles.statusIndicator, { backgroundColor: healthCheck.data ? "#10b981" : "#f59e0b" }]} />
-          <View style={styles.statusContent}>
-            <Text style={[styles.statusTitle, { color: theme.text }]}>
-              {{#if (eq api "orpc")}}ORPC{{else}}TRPC{{/if}}
-            </Text>
-            <Text style={[styles.statusText, { color: theme.text, opacity: 0.7 }]}>
-              {healthCheck.isLoading
-              ? "Checking connection..."
-              : healthCheck.data
-              ? "All systems operational"
-              : "Service unavailable"}
-            </Text>
-          </View>
-        </View>
-        {{/unless}}
-        {{/if}}
-      </View>
-      {{/unless}}
-
-      {{#if (and (eq backend "convex") (eq auth "clerk"))}}
-      <Authenticated>
-        <Text style=\{{ color: theme.text }}>Hello {user?.emailAddresses[0].emailAddress}</Text>
-        <Text style=\{{ color: theme.text }}>Private Data: {privateData?.message}</Text>
-        <SignOutButton />
-      </Authenticated>
-      <Unauthenticated>
-        <Link href="/(auth)/sign-in">
-        <Text style=\{{ color: theme.primary }}>Sign in</Text>
-        </Link>
-        <Link href="/(auth)/sign-up">
-        <Text style=\{{ color: theme.primary }}>Sign up</Text>
-        </Link>
-      </Unauthenticated>
-      <AuthLoading>
-        <Text style=\{{ color: theme.text }}>Loading...</Text>
-      </AuthLoading>
-      {{/if}}
-
-      {{#if (and (eq backend "convex") (eq auth "better-auth"))}}
-      {user ? (
-      <View style={[styles.userCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
-        <View style={styles.userHeader}>
-          <Text style={[styles.userText, { color: theme.text }]}>
-            Welcome, <Text style={styles.userName}>{user.name}</Text>
-          </Text>
-        </View>
-        <Text style={[styles.userEmail, { color: theme.text, opacity: 0.7 }]}>
-          {user.email}
-        </Text>
-        <TouchableOpacity style={[styles.signOutButton, { backgroundColor: theme.notification }]} onPress={()=> {
-          authClient.signOut();
-          }}
-          >
-          <Text style={styles.signOutText}>Sign Out</Text>
-        </TouchableOpacity>
-      </View>
-      ) : null}
-      <View style={[styles.statusCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
-        <Text style={[styles.statusCardTitle, { color: theme.text }]}>
-          API Status
-        </Text>
-        <View style={styles.statusRow}>
-          <View style={[styles.statusIndicator, { backgroundColor: healthCheck ? "#10b981" : "#ef4444" }]} />
-          <Text style={[styles.statusText, { color: theme.text, opacity: 0.7 }]}>
-            {healthCheck === undefined
-            ? "Checking..."
-            : healthCheck === "OK"
-            ? "Connected to API"
-            : "API Disconnected"}
-          </Text>
-        </View>
-      </View>
-      {!user && (
-      <>
-        <SignIn />
-        <SignUp />
-      </>
-      )}
-      {{/if}}
-    </View>
-  </ScrollView>
-</Container>
-);
-}
-
-const styles = StyleSheet.create({
-scrollView: {
-flex: 1,
-},
-content: {
-padding: 16,
-},
-title: {
-fontSize: 24,
-fontWeight: "bold",
-marginBottom: 16,
-},
-card: {
-padding: 16,
-marginBottom: 16,
-borderWidth: 1,
-},
-statusRow: {
-flexDirection: "row",
-alignItems: "center",
-gap: 8,
-},
-statusIndicator: {
-height: 8,
-width: 8,
-},
-statusContent: {
-flex: 1,
-},
-statusTitle: {
-fontSize: 14,
-fontWeight: "bold",
-},
-statusText: {
-fontSize: 12,
-},
-userCard: {
-marginBottom: 16,
-padding: 16,
-borderWidth: 1,
-},
-userHeader: {
-marginBottom: 8,
-},
-userText: {
-fontSize: 16,
-},
-userName: {
-fontWeight: "bold",
-},
-userEmail: {
-fontSize: 14,
-marginBottom: 12,
-},
-signOutButton: {
-padding: 12,
-},
-signOutText: {
-color: "#ffffff",
-},
-statusCard: {
-marginBottom: 16,
-padding: 16,
-borderWidth: 1,
-},
-statusCardTitle: {
-marginBottom: 8,
-fontWeight: "bold",
-},
-});

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

@@ -1,65 +0,0 @@
-import { Container } from "@/components/container";
-import { Link, Stack } from "expo-router";
-import { Text, View, StyleSheet } from "react-native";
-import { useColorScheme } from "@/lib/use-color-scheme";
-import { NAV_THEME } from "@/lib/constants";
-
-export default function NotFoundScreen() {
-  const { colorScheme } = useColorScheme();
-  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
-
-  return (
-    <>
-      <Stack.Screen options=\{{ title: "Oops!" }} />
-      <Container>
-        <View style={styles.container}>
-          <View style={styles.content}>
-            <Text style={styles.emoji}>🤔</Text>
-            <Text style={[styles.title, { color: theme.text }]}>
-              Page Not Found
-            </Text>
-            <Text style={[styles.subtitle, { color: theme.text, opacity: 0.7 }]}>
-              Sorry, the page you're looking for doesn't exist.
-            </Text>
-            <Link href="/" asChild>
-              <Text style={[styles.link, { color: theme.primary, backgroundColor: `${theme.primary}1a` }]}>
-                Go to Home
-              </Text>
-            </Link>
-          </View>
-        </View>
-      </Container>
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 16,
-  },
-  content: {
-    alignItems: "center",
-  },
-  emoji: {
-    fontSize: 48,
-    marginBottom: 16,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: "bold",
-    marginBottom: 8,
-    textAlign: "center",
-  },
-  subtitle: {
-    fontSize: 14,
-    textAlign: "center",
-    marginBottom: 24,
-  },
-  link: {
-    padding: 12,
-  },
-});
-

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

@@ -1,165 +0,0 @@
-{{#if (includes examples "ai")}}
-import "@/polyfills";
-{{/if}}
-
-{{#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 {
-  DarkTheme,
-  DefaultTheme,
-  type Theme,
-  ThemeProvider,
-} from "@react-navigation/native";
-import { StatusBar } from "expo-status-bar";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-{{#if (eq api "trpc")}}
-import { queryClient } from "@/utils/trpc";
-{{/if}}
-{{#if (eq api "orpc")}}
-import { queryClient } from "@/utils/orpc";
-{{/if}}
-import { NAV_THEME } from "@/lib/constants";
-import React, { useRef } from "react";
-import { useColorScheme } from "@/lib/use-color-scheme";
-import { Platform, StyleSheet } from "react-native";
-import { setAndroidNavigationBar } from "@/lib/android-navigation-bar";
-
-const LIGHT_THEME: Theme = {
-  ...DefaultTheme,
-  colors: NAV_THEME.light,
-};
-const DARK_THEME: Theme = {
-  ...DarkTheme,
-  colors: NAV_THEME.dark,
-};
-
-export const unstable_settings = {
-  initialRouteName: "(drawer)",
-};
-
-{{#if (eq backend "convex")}}
-const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL, {
-  unsavedChangesWarning: false,
-});
-{{/if}}
-
-const useIsomorphicLayoutEffect =
-  Platform.OS === "web" && typeof window === "undefined"
-    ? React.useEffect
-    : React.useLayoutEffect;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
-export default function RootLayout() {
-  const hasMounted = useRef(false);
-  const { colorScheme, isDarkColorScheme } = useColorScheme();
-  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
-
-  useIsomorphicLayoutEffect(() => {
-    if (hasMounted.current) {
-      return;
-    }
-    setAndroidNavigationBar(colorScheme);
-    setIsColorSchemeLoaded(true);
-    hasMounted.current = true;
-  }, []);
-
-  if (!isColorSchemeLoaded) {
-    return null;
-  }
-
-  return (
-    <>
-      {{#if (eq backend "convex")}}
-        {{#if (eq auth "clerk")}}
-          <ClerkProvider tokenCache={tokenCache} publishableKey={env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
-            <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
-              <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-                <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-                <GestureHandlerRootView style={styles.container}>
-                  <Stack>
-                    <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-                    <Stack.Screen name="(auth)" options=\{{ headerShown: false }} />
-                    <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
-                  </Stack>
-                </GestureHandlerRootView>
-              </ThemeProvider>
-            </ConvexProviderWithClerk>
-          </ClerkProvider>
-        {{else if (eq auth "better-auth")}}
-          <ConvexBetterAuthProvider client={convex} authClient={authClient}>
-            <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-              <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-              <GestureHandlerRootView style={styles.container}>
-                <Stack>
-                  <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-                  <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
-                </Stack>
-              </GestureHandlerRootView>
-            </ThemeProvider>
-          </ConvexBetterAuthProvider>
-        {{else}}
-          <ConvexProvider client={convex}>
-            <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-              <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-              <GestureHandlerRootView style={styles.container}>
-                <Stack>
-                  <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-                  <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
-                </Stack>
-              </GestureHandlerRootView>
-            </ThemeProvider>
-          </ConvexProvider>
-        {{/if}}
-      {{else}}
-        {{#unless (eq api "none")}}
-          <QueryClientProvider client={queryClient}>
-            <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-              <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-              <GestureHandlerRootView style={styles.container}>
-                <Stack>
-                  <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-                  <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
-                </Stack>
-              </GestureHandlerRootView>
-            </ThemeProvider>
-          </QueryClientProvider>
-        {{else}}
-          <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-            <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-            <GestureHandlerRootView style={styles.container}>
-              <Stack>
-                <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-                <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
-              </Stack>
-            </GestureHandlerRootView>
-          </ThemeProvider>
-        {{/unless}}
-      {{/if}}
-    </>
-  );
-}

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

@@ -1,34 +0,0 @@
-import { Container } from "@/components/container";
-import { Text, View, StyleSheet } from "react-native";
-import { useColorScheme } from "@/lib/use-color-scheme";
-import { NAV_THEME } from "@/lib/constants";
-
-export default function Modal() {
-  const { colorScheme } = useColorScheme();
-  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
-
-  return (
-    <Container>
-      <View style={styles.container}>
-        <View style={styles.header}>
-          <Text style={[styles.title, { color: theme.text }]}>Modal</Text>
-        </View>
-      </View>
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-  },
-  header: {
-    marginBottom: 16,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: "bold",
-  },
-});
-

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

@@ -1,50 +0,0 @@
-{
-	"expo": {
-		"name": "{{projectName}}",
-		"slug": "{{projectName}}",
-		"version": "1.0.0",
-		"orientation": "portrait",
-		"icon": "./assets/images/icon.png",
-		"scheme": "mybettertapp",
-		"userInterfaceStyle": "automatic",
-		"newArchEnabled": true,
-		"ios": {
-			"supportsTablet": true
-		},
-		"android": {
-			"adaptiveIcon": {
-				"backgroundColor": "#E6F4FE",
-				"foregroundImage": "./assets/images/android-icon-foreground.png",
-				"backgroundImage": "./assets/images/android-icon-background.png",
-				"monochromeImage": "./assets/images/android-icon-monochrome.png"
-			},
-			"edgeToEdgeEnabled": true,
-			"predictiveBackGestureEnabled": false,
-			"package": "com.anonymous.mybettertapp"
-		},
-		"web": {
-			"output": "static",
-			"favicon": "./assets/images/favicon.png"
-		},
-		"plugins": [
-			"expo-router",
-			[
-				"expo-splash-screen",
-				{
-					"image": "./assets/images/splash-icon.png",
-					"imageWidth": 200,
-					"resizeMode": "contain",
-					"backgroundColor": "#ffffff",
-					"dark": {
-						"backgroundColor": "#000000"
-					}
-				}
-			]
-		],
-		"experiments": {
-			"typedRoutes": true,
-			"reactCompiler": true
-		}
-	}
-}
-

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

@@ -1,25 +0,0 @@
-import React from "react";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { useColorScheme } from "@/lib/use-color-scheme";
-import { NAV_THEME } from "@/lib/constants";
-import { StyleSheet } from "react-native";
-
-export function Container({ children }: { children: React.ReactNode }) {
-  const { colorScheme } = useColorScheme();
-  const backgroundColor = colorScheme === "dark" 
-    ? NAV_THEME.dark.background 
-    : NAV_THEME.light.background;
-
-  return (
-    <SafeAreaView style={[styles.container, { backgroundColor }]}>
-      {children}
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-

package/templates/frontend/native/bare/components/header-button.tsx.hbs

@@ -1,47 +0,0 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
-import { forwardRef } from "react";
-import { Pressable, StyleSheet, View } from "react-native";
-import { useColorScheme } from "@/lib/use-color-scheme";
-import { NAV_THEME } from "@/lib/constants";
-
-export const HeaderButton = forwardRef<
-  View,
-  { onPress?: () => void }
->(({ onPress }, ref) => {
-  const { colorScheme } = useColorScheme();
-  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
-
-  return (
-    <Pressable
-      ref={ref}
-      onPress={onPress}
-      style={({ pressed }) => [
-        styles.button,
-        {
-          backgroundColor: pressed 
-            ? theme.background 
-            : theme.card,
-        },
-      ]}
-    >
-      {({ pressed }) => (
-        <FontAwesome
-          name="info-circle"
-          size={20}
-          color={theme.text}
-          style=\{{
-            opacity: pressed ? 0.7 : 1,
-          }}
-        />
-      )}
-    </Pressable>
-  );
-});
-
-const styles = StyleSheet.create({
-  button: {
-    padding: 8,
-    marginRight: 8,
-  },
-});
-

package/templates/frontend/native/bare/components/tabbar-icon.tsx.hbs

@@ -1,9 +0,0 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
-
-export const TabBarIcon = (props: {
-  name: React.ComponentProps<typeof FontAwesome>["name"];
-  color: string;
-}) => {
-  return <FontAwesome size={24} style=\{{ marginBottom: -3 }} {...props} />;
-};
-

package/templates/frontend/native/bare/lib/android-navigation-bar.tsx.hbs

@@ -1,12 +0,0 @@
-import * as NavigationBar from "expo-navigation-bar";
-import { Platform } from "react-native";
-import { NAV_THEME } from "@/lib/constants";
-
-export async function setAndroidNavigationBar(theme: "light" | "dark") {
-  if (Platform.OS !== "android") return;
-  await NavigationBar.setButtonStyleAsync(theme === "dark" ? "light" : "dark");
-  await NavigationBar.setBackgroundColorAsync(
-    theme === "dark" ? NAV_THEME.dark.background : NAV_THEME.light.background,
-  );
-}
-

package/templates/frontend/native/bare/lib/constants.ts.hbs

@@ -1,19 +0,0 @@
-export const NAV_THEME = {
-  light: {
-    background: "hsl(0 0% 100%)",
-    border: "hsl(220 13% 91%)",
-    card: "hsl(0 0% 100%)",
-    notification: "hsl(0 84.2% 60.2%)",
-    primary: "hsl(221.2 83.2% 53.3%)",
-    text: "hsl(222.2 84% 4.9%)",
-  },
-  dark: {
-    background: "hsl(222.2 84% 4.9%)",
-    border: "hsl(217.2 32.6% 17.5%)",
-    card: "hsl(222.2 84% 4.9%)",
-    notification: "hsl(0 72% 51%)",
-    primary: "hsl(217.2 91.2% 59.8%)",
-    text: "hsl(210 40% 98%)",
-  },
-};
-

package/templates/frontend/native/bare/lib/use-color-scheme.ts.hbs

@@ -1,20 +0,0 @@
-import { useColorScheme as useRNColorScheme } from "react-native";
-
-export function useColorScheme() {
-  const systemColorScheme = useRNColorScheme();
-  const colorScheme = systemColorScheme ?? "light";
-  
-  return {
-    colorScheme: colorScheme as "light" | "dark",
-    isDarkColorScheme: colorScheme === "dark",
-    setColorScheme: () => {
-      // Color scheme is managed by the system in bare mode
-      console.warn("setColorScheme is not available in bare mode. Color scheme is managed by the system.");
-    },
-    toggleColorScheme: () => {
-      // Color scheme is managed by the system in bare mode
-      console.warn("toggleColorScheme is not available in bare mode. Color scheme is managed by the system.");
-    },
-  };
-}
-