create-better-t-stack 3.13.2 → 3.14.0

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

@@ -1,9 +0,0 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require("expo/metro-config");
-
-const config = getDefaultConfig(__dirname);
-
-config.resolver.unstable_enablePackageExports = true;
-
-module.exports = config;
-

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

@@ -1,51 +0,0 @@
-{
-  "name": "native",
-  "version": "1.0.0",
-  "main": "expo-router/entry",
-  "scripts": {
-    "dev": "expo start --clear",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
-    "prebuild": "expo prebuild",
-    "web": "expo start --web"
-  },
-  "dependencies": {
-    "@expo/vector-icons": "^15.0.2",
-    "@react-navigation/bottom-tabs": "^7.2.0",
-    "@react-navigation/drawer": "^7.1.1",
-    "@react-navigation/native": "^7.0.14",
-    "@tanstack/react-form": "^1.0.5",
-    "@tanstack/react-query": "^5.85.5",
-    {{#if (includes examples "ai")}}
-    "@stardazed/streams-text-encoding": "^1.0.2",
-    "@ungap/structured-clone": "^1.3.0",
-    {{/if}}
-		"expo": "^54.0.1",
-    "expo-constants": "~18.0.8",
-    "expo-crypto": "~15.0.6",
-    "expo-linking": "~8.0.7",
-    "expo-navigation-bar": "~5.0.8",
-    "expo-network": "~8.0.7",
-    "expo-router": "~6.0.0",
-    "expo-secure-store": "~15.0.6",
-    "expo-splash-screen": "~31.0.8",
-    "expo-status-bar": "~3.0.7",
-    "expo-system-ui": "~6.0.7",
-    "expo-web-browser": "~15.0.6",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.4",
-    "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~4.1.0",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0",
-    "react-native-web": "^0.21.0",
-    "react-native-worklets": "^0.5.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@types/react": "~19.1.10"
-  },
-  "private": true
-}
-

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

@@ -1,11 +0,0 @@
-{
-	"extends": "expo/tsconfig.base",
-	"compilerOptions": {
-		"strict": true,
-		"paths": {
-			"@/*": ["./*"]
-		}
-	},
-	"include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
-}
-

package/templates/frontend/native/unistyles/_gitignore

@@ -1,24 +0,0 @@
-node_modules/
-.expo/
-dist/
-npm-debug.*
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-*.orig.*
-web-build/
-# expo router
-expo-env.d.ts
-
-.env
-
-ios
-android
-
-# macOS
-.DS_Store
-
-# Temporary files created by Metro to check the health of the file watcher
-.metro-health-check*

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

@@ -1,39 +0,0 @@
-import { Tabs } from "expo-router";
-import { useUnistyles } from "react-native-unistyles";
-
-import { TabBarIcon } from "@/components/tabbar-icon";
-
-export default function TabLayout() {
-  const { theme } = useUnistyles();
-
-  return (
-    <Tabs
-      screenOptions=\{{
-        headerShown: false,
-        tabBarActiveTintColor: theme.colors.primary,
-        tabBarInactiveTintColor: theme.colors.mutedForeground,
-        tabBarStyle: {
-          backgroundColor: theme.colors.background,
-          borderTopColor: theme.colors.border,
-        },
-      }}
-    >
-      <Tabs.Screen
-        name="index"
-        options=\{{
-          title: "Home",
-          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="two"
-        options=\{{
-          title: "Explore",
-          tabBarIcon: ({ color }) => (
-            <TabBarIcon name="compass" color={color} />
-          ),
-        }}
-      />
-    </Tabs>
-  );
-}

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

@@ -1,37 +0,0 @@
-import { Container } from "@/components/container";
-import { ScrollView, Text, View } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
-
-export default function Home() {
-  return (
-    <Container>
-      <ScrollView contentContainerStyle={styles.container}>
-        <View style={styles.headerSection}>
-          <Text style={styles.title}>Tab One</Text>
-          <Text style={styles.subtitle}>
-            Explore the first section of your app
-          </Text>
-        </View>
-      </ScrollView>
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create((theme) => ({
-  container: {
-    padding: theme.spacing.lg,
-  },
-  headerSection: {
-    paddingVertical: theme.spacing.xl,
-  },
-  title: {
-    fontSize: theme.fontSize["3xl"],
-    fontWeight: "bold",
-    color: theme.colors.foreground,
-    marginBottom: theme.spacing.sm,
-  },
-  subtitle: {
-    fontSize: theme.fontSize.lg,
-    color: theme.colors.mutedForeground,
-  },
-}));

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

@@ -1,37 +0,0 @@
-import { Container } from "@/components/container";
-import { ScrollView, Text, View } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
-
-export default function TabTwo() {
-  return (
-    <Container>
-      <ScrollView contentContainerStyle={styles.container}>
-        <View style={styles.headerSection}>
-          <Text style={styles.title}>Tab Two</Text>
-          <Text style={styles.subtitle}>
-            Discover more features and content
-          </Text>
-        </View>
-      </ScrollView>
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create((theme) => ({
-  container: {
-    padding: theme.spacing.lg,
-  },
-  headerSection: {
-    paddingVertical: theme.spacing.xl,
-  },
-  title: {
-    fontSize: theme.fontSize["3xl"],
-    fontWeight: "bold",
-    color: theme.colors.foreground,
-    marginBottom: theme.spacing.sm,
-  },
-  subtitle: {
-    fontSize: theme.fontSize.lg,
-    color: theme.colors.mutedForeground,
-  },
-}));

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

@@ -1,87 +0,0 @@
-import { Ionicons, MaterialIcons } from "@expo/vector-icons";
-import { Link } from "expo-router";
-import { Drawer } from "expo-router/drawer";
-import { useUnistyles } from "react-native-unistyles";
-
-import { HeaderButton } from "../../components/header-button";
-
-const DrawerLayout = () => {
-  const { theme } = useUnistyles();
-
-  return (
-    <Drawer
-      screenOptions=\{{
-        headerStyle: {
-          backgroundColor: theme.colors.background,
-        },
-        headerTitleStyle: {
-          color: theme.colors.foreground,
-        },
-        headerTintColor: theme.colors.foreground,
-        drawerStyle: {
-          backgroundColor: theme.colors.background,
-        },
-        drawerLabelStyle: {
-          color: theme.colors.foreground,
-        },
-        drawerInactiveTintColor: theme.colors.mutedForeground,
-      }}
-    >
-      <Drawer.Screen
-        name="index"
-        options=\{{
-          headerTitle: "Home",
-          drawerLabel: "Home",
-          drawerIcon: ({ size, color }) => (
-            <Ionicons name="home-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      <Drawer.Screen
-        name="(tabs)"
-        options=\{{
-          headerTitle: "Tabs",
-          drawerLabel: "Tabs",
-          drawerIcon: ({ size, color }) => (
-            <MaterialIcons name="border-bottom" size={size} color={color} />
-          ),
-          headerRight: () => (
-            <Link href="/modal" asChild>
-              <HeaderButton />
-            </Link>
-          ),
-        }}
-      />
-      {{#if (includes examples "todo")}}
-      <Drawer.Screen
-        name="todos"
-        options=\{{
-          headerTitle: "Todos",
-          drawerLabel: "Todos",
-          drawerIcon: ({ size, color }) => (
-            <Ionicons name="checkbox-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      {{/if}}
-      {{#if (includes examples "ai")}}
-      <Drawer.Screen
-        name="ai"
-        options=\{{
-          headerTitle: "AI",
-          drawerLabel: "AI",
-          drawerIcon: ({ size, color }) => (
-            <Ionicons
-              name="chatbubble-ellipses-outline"
-              size={size}
-              color={color}
-            />
-          ),
-        }}
-      />
-      {{/if}}
-    </Drawer>
-  );
-};
-
-export default DrawerLayout;

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

@@ -1,333 +0,0 @@
-import { ScrollView, Text, View, TouchableOpacity } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
-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}}
-
-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}}
-
-  return (
-    <Container>
-      <ScrollView
-        contentContainerStyle={styles.container}
-        showsVerticalScrollIndicator={false}
-      >
-        <Text style={styles.heroTitle}>
-          BETTER T STACK
-        </Text>
-
-        {{#unless (and (eq backend "convex") (eq auth "better-auth"))}}
-        <View style={styles.statusCard}>
-          <View style={styles.statusHeader}>
-            <Text style={styles.statusTitle}>System Status</Text>
-            <View style={styles.statusBadge}>
-              <Text style={styles.statusBadgeText}>LIVE</Text>
-            </View>
-          </View>
-          {{#if (eq backend "convex")}}
-            {{#unless (eq auth "better-auth")}}
-            <View style={styles.statusRow}>
-              <View
-                style={[
-                  styles.statusDot,
-                  healthCheck === "OK"
-                    ? styles.statusDotSuccess
-                    : styles.statusDotWarning,
-                ]}
-              />
-              <View style={styles.statusContent}>
-                <Text style={styles.statusLabel}>Convex</Text>
-                <Text style={styles.statusDescription}>
-                  {healthCheck === undefined
-                    ? "Checking connection..."
-                    : healthCheck === "OK"
-                    ? "Connected to API"
-                    : "API Disconnected"}
-                </Text>
-              </View>
-            </View>
-            {{/unless}}
-          {{else}}
-            {{#unless (eq api "none")}}
-            <View style={styles.statusRow}>
-              <View
-                style={[
-                  styles.statusDot,
-                  healthCheck.data
-                    ? styles.statusDotSuccess
-                    : styles.statusDotWarning,
-                ]}
-              />
-              <View style={styles.statusContent}>
-                <Text style={styles.statusLabel}>
-                  {{#if (eq api "orpc")}}ORPC{{/if}}
-                  {{#if (eq api "trpc")}}TRPC{{/if}}
-                </Text>
-                <Text style={styles.statusDescription}>
-                  {healthCheck.isLoading
-                    ? "Checking connection..."
-                    : healthCheck.data
-                    ? "Connected to API"
-                    : "API Disconnected"}
-                </Text>
-              </View>
-            </View>
-            {{/unless}}
-          {{/if}}
-        </View>
-        {{/unless}}
-
-        {{#if (and (eq backend "convex") (eq auth "clerk"))}}
-        <Authenticated>
-          <Text>
-            Hello {user?.emailAddresses[0].emailAddress}
-          </Text>
-          <Text>
-            Private Data: {privateData?.message}
-          </Text>
-          <SignOutButton />
-        </Authenticated>
-        <Unauthenticated>
-          <Link href="/(auth)/sign-in">
-            <Text>Sign in</Text>
-          </Link>
-          <Link href="/(auth)/sign-up">
-            <Text>Sign up</Text>
-          </Link>
-        </Unauthenticated>
-        <AuthLoading>
-          <Text>Loading...</Text>
-        </AuthLoading>
-        {{/if}}
-
-        {{#if (and (eq backend "convex") (eq auth "better-auth"))}}
-        {user ? (
-          <View style={styles.userCard}>
-            <View style={styles.userHeader}>
-              <Text style={styles.userWelcome}>
-                Welcome,{" "}
-                <Text style={styles.userName}>{user.name}</Text>
-              </Text>
-            </View>
-            <Text style={styles.userEmail}>{user.email}</Text>
-            <TouchableOpacity
-              style={styles.signOutButton}
-              onPress={() => {
-                authClient.signOut();
-              }}
-            >
-              <Text style={styles.signOutText}>Sign Out</Text>
-            </TouchableOpacity>
-          </View>
-        ) : null}
-        <View style={styles.apiStatusCard}>
-          <Text style={styles.apiStatusTitle}>API Status</Text>
-          <View style={styles.apiStatusRow}>
-            <View
-              style={[
-                styles.statusDot,
-                healthCheck === "OK"
-                  ? styles.statusDotSuccess
-                  : styles.statusDotWarning,
-              ]}
-            />
-            <Text style={styles.apiStatusText}>
-              {healthCheck === undefined
-                ? "Checking..."
-                : healthCheck === "OK"
-                ? "Connected to API"
-                : "API Disconnected"}
-            </Text>
-          </View>
-        </View>
-        {!user && (
-          <>
-            <SignIn />
-            <SignUp />
-          </>
-        )}
-        {{/if}}
-      </ScrollView>
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create((theme) => ({
-  container: {
-    paddingHorizontal: theme.spacing.md,
-  },
-  heroSection: {
-    paddingVertical: theme.spacing.xl,
-  },
-  heroTitle: {
-    fontSize: theme.fontSize["4xl"],
-    fontWeight: "bold",
-    color: theme.colors.foreground,
-    marginBottom: theme.spacing.sm,
-  },
-  heroSubtitle: {
-    fontSize: theme.fontSize.lg,
-    color: theme.colors.mutedForeground,
-    lineHeight: 28,
-  },
-  statusCard: {
-    backgroundColor: theme.colors.card,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    borderRadius: theme.borderRadius.xl,
-    padding: theme.spacing.lg,
-    marginBottom: theme.spacing.lg,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 3,
-    elevation: 2,
-  },
-  statusHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: theme.spacing.md,
-  },
-  statusTitle: {
-    fontSize: theme.fontSize.lg,
-    fontWeight: "600",
-    color: theme.colors.cardForeground,
-  },
-  statusBadge: {
-    backgroundColor: theme.colors.secondary,
-    paddingHorizontal: theme.spacing.sm + 4,
-    paddingVertical: theme.spacing.xs,
-    borderRadius: 9999,
-  },
-  statusBadgeText: {
-    fontSize: theme.fontSize.xs,
-    fontWeight: "500",
-    color: theme.colors.secondaryForeground,
-  },
-  statusRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing.sm + 4,
-  },
-  statusDot: {
-    height: 12,
-    width: 12,
-    borderRadius: 6,
-  },
-  statusDotSuccess: {
-    backgroundColor: theme.colors.success,
-  },
-  statusDotWarning: {
-    backgroundColor: "#F59E0B",
-  },
-  statusContent: {
-    flex: 1,
-  },
-  statusLabel: {
-    fontSize: theme.fontSize.sm,
-    fontWeight: "500",
-    color: theme.colors.cardForeground,
-  },
-  statusDescription: {
-    fontSize: theme.fontSize.xs,
-    color: theme.colors.mutedForeground,
-  },
-  userCard: {
-    backgroundColor: theme.colors.card,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    borderRadius: theme.borderRadius.lg,
-    padding: theme.spacing.md,
-    marginBottom: theme.spacing.md,
-  },
-  userHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: theme.spacing.xs,
-  },
-  userWelcome: {
-    fontSize: theme.fontSize.base,
-    color: theme.colors.foreground,
-  },
-  userName: {
-    fontWeight: "500",
-  },
-  userEmail: {
-    fontSize: theme.fontSize.sm,
-    color: theme.colors.mutedForeground,
-    marginBottom: theme.spacing.md,
-  },
-  signOutButton: {
-    backgroundColor: theme.colors.destructive,
-    paddingVertical: theme.spacing.sm,
-    paddingHorizontal: theme.spacing.md,
-    borderRadius: theme.borderRadius.md,
-    alignSelf: "flex-start",
-  },
-  signOutText: {
-    color: theme.colors.destructiveForeground,
-    fontWeight: "500",
-  },
-  apiStatusCard: {
-    marginBottom: theme.spacing.md,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    padding: theme.spacing.md,
-  },
-  apiStatusTitle: {
-    marginBottom: theme.spacing.sm,
-    fontWeight: "500",
-    color: theme.colors.foreground,
-  },
-  apiStatusRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing.xs,
-  },
-  apiStatusText: {
-    color: theme.colors.mutedForeground,
-  },
-}));