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

package/templates/examples/todo/native/uniwind/app/(drawer)/todos.tsx.hbs

@@ -0,0 +1,295 @@
+import { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  ScrollView,
+  ActivityIndicator,
+  Alert,
+  Pressable,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+{{#if (eq backend "convex")}}
+import { useMutation, useQuery } from "convex/react";
+import { api } from "@{{projectName}}/backend/convex/_generated/api";
+import type { Id } from "@{{projectName}}/backend/convex/_generated/dataModel";
+{{else}}
+import { useMutation, useQuery } from "@tanstack/react-query";
+{{/if}}
+import { Container } from "@/components/container";
+{{#unless (eq backend "convex")}}
+  {{#if (eq api "orpc")}}
+    import { orpc } from "@/utils/orpc";
+  {{/if}}
+  {{#if (eq api "trpc")}}
+    import { trpc } from "@/utils/trpc";
+  {{/if}}
+{{/unless}}
+import { Card, Checkbox, useThemeColor, Chip } from "heroui-native";
+
+export default function TodosScreen() {
+  const [newTodoText, setNewTodoText] = useState("");
+  {{#if (eq backend "convex")}}
+    const todos = useQuery(api.todos.getAll);
+    const createTodoMutation = useMutation(api.todos.create);
+    const toggleTodoMutation = useMutation(api.todos.toggle);
+    const deleteTodoMutation = useMutation(api.todos.deleteTodo);
+  {{else}}
+    {{#if (eq api "orpc")}}
+      const todos = useQuery(orpc.todo.getAll.queryOptions());
+      const createMutation = useMutation(orpc.todo.create.mutationOptions({
+        onSuccess: () => {
+          todos.refetch();
+          setNewTodoText("");
+        },
+      }));
+      const toggleMutation = useMutation(orpc.todo.toggle.mutationOptions({
+        onSuccess: () => {
+          todos.refetch();
+        },
+      }));
+      const deleteMutation = useMutation(orpc.todo.delete.mutationOptions({
+        onSuccess: () => {
+          todos.refetch();
+        },
+      }));
+    {{/if}}
+    {{#if (eq api "trpc")}}
+      const todos = useQuery(trpc.todo.getAll.queryOptions());
+      const createMutation = useMutation(trpc.todo.create.mutationOptions({
+        onSuccess: () => {
+          todos.refetch();
+          setNewTodoText("");
+        },
+      }));
+      const toggleMutation = useMutation(trpc.todo.toggle.mutationOptions({
+        onSuccess: () => {
+          todos.refetch();
+        },
+      }));
+      const deleteMutation = useMutation(trpc.todo.delete.mutationOptions({
+        onSuccess: () => {
+          todos.refetch();
+        },
+      }));
+    {{/if}}
+  {{/if}}
+
+  const mutedColor = useThemeColor("muted");
+  const accentColor = useThemeColor("accent");
+  const dangerColor = useThemeColor("danger");
+  const foregroundColor = useThemeColor("foreground");
+
+  {{#if (eq backend "convex")}}
+    const handleAddTodo = async () => {
+      const text = newTodoText.trim();
+      if (!text) return;
+      await createTodoMutation({ text });
+      setNewTodoText("");
+    };
+
+    const handleToggleTodo = (id: Id<"todos">, currentCompleted: boolean) => {
+      toggleTodoMutation({ id, completed: !currentCompleted });
+    };
+
+    const handleDeleteTodo = (id: Id<"todos">) => {
+      Alert.alert("Delete Todo", "Are you sure you want to delete this todo?", [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Delete",
+          style: "destructive",
+          onPress: () => deleteTodoMutation({ id }),
+        },
+      ]);
+    };
+
+    const isLoading = !todos;
+    const completedCount = todos?.filter((t) => t.completed).length || 0;
+    const totalCount = todos?.length || 0;
+  {{else}}
+    const handleAddTodo = () => {
+      if (newTodoText.trim()) {
+        createMutation.mutate({ text: newTodoText });
+      }
+    };
+
+    const handleToggleTodo = (id: number, completed: boolean) => {
+      toggleMutation.mutate({ id, completed: !completed });
+    };
+
+    const handleDeleteTodo = (id: number) => {
+      Alert.alert("Delete Todo", "Are you sure you want to delete this todo?", [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Delete",
+          style: "destructive",
+          onPress: () => deleteMutation.mutate({ id }),
+        },
+      ]);
+    };
+
+    const isLoading = todos?.isLoading;
+    const completedCount = todos?.data?.filter((t) => t.completed).length || 0;
+    const totalCount = todos?.data?.length || 0;
+  {{/if}}
+
+  return (
+    <Container>
+      <ScrollView className="flex-1" contentContainerClassName="p-6">
+        <View className="mb-6">
+          <View className="flex-row items-center justify-between mb-2">
+            <Text className="text-3xl font-bold text-foreground">
+              Todo List
+            </Text>
+            {totalCount > 0 && (
+              <Chip variant="secondary" color="accent" size="sm">
+                <Chip.Label>
+                  {completedCount}/{totalCount}
+                </Chip.Label>
+              </Chip>
+            )}
+          </View>
+        </View>
+
+        <Card variant="secondary" className="mb-6 p-4">
+          <View className="flex-row items-center gap-3">
+            <View className="flex-1">
+              <TextInput
+                value={newTodoText}
+                onChangeText={setNewTodoText}
+                placeholder="Add a new task..."
+                placeholderTextColor={mutedColor}
+                {{#unless (eq backend "convex")}}
+                  editable={!createMutation.isPending}
+                {{/unless}}
+                onSubmitEditing={handleAddTodo}
+                returnKeyType="done"
+                className="text-foreground text-base py-3 px-4 border border-divider rounded-lg bg-surface"
+              />
+            </View>
+            <Pressable
+              onPress={handleAddTodo}
+              {{#if (eq backend "convex")}}
+                disabled={!newTodoText.trim()}
+                className={`p-3 rounded-lg active:opacity-70 ${newTodoText.trim() ? "bg-accent" : "bg-surface"}`}
+              {{else}}
+                disabled={createMutation.isPending || !newTodoText.trim()}
+                className={`p-3 rounded-lg active:opacity-70 ${(createMutation.isPending || !newTodoText.trim()) ? "bg-surface" : "bg-accent"}`}
+              {{/if}}
+            >
+              {{#if (eq backend "convex")}}
+                <Ionicons
+                  name="add"
+                  size={24}
+                  color={newTodoText.trim() ? foregroundColor : mutedColor}
+                />
+              {{else}}
+                {createMutation.isPending ? (
+                  <ActivityIndicator size="small" color={foregroundColor} />
+                ) : (
+                  <Ionicons
+                    name="add"
+                    size={24}
+                    color={(createMutation.isPending || !newTodoText.trim()) ? mutedColor : foregroundColor}
+                  />
+                )}
+              {{/if}}
+            </Pressable>
+          </View>
+        </Card>
+
+        {{#if (eq backend "convex")}}
+          {isLoading && (
+            <View className="items-center justify-center py-12">
+              <ActivityIndicator size="large" color={accentColor} />
+              <Text className="text-muted mt-4">Loading todos...</Text>
+            </View>
+          )}
+
+          {todos && todos.length === 0 && !isLoading && (
+            <Card className="items-center justify-center py-12">
+              <Ionicons name="checkbox-outline" size={64} color={mutedColor} style=\{{ marginBottom: 16 }} />
+              <Text className="text-foreground text-lg font-semibold mb-2">
+                No todos yet
+              </Text>
+              <Text className="text-muted text-center">
+                Add your first task to get started!
+              </Text>
+            </Card>
+          )}
+
+          {todos && todos.length > 0 && (
+            <View className="gap-3">
+              {todos.map((todo) => (
+                <Card key={todo._id} variant="secondary" className="p-4">
+                  <View className="flex-row items-center gap-3">
+                    <Checkbox
+                      isSelected={todo.completed}
+                      onSelectedChange={() => handleToggleTodo(todo._id, todo.completed)}
+                    />
+                    <View className="flex-1">
+                      <Text className={`text-base ${todo.completed ? "text-muted line-through" : "text-foreground"}`}>
+                        {todo.text}
+                      </Text>
+                    </View>
+                    <Pressable
+                      onPress={() => handleDeleteTodo(todo._id)}
+                      className="p-2 rounded-lg active:opacity-70"
+                    >
+                      <Ionicons name="trash-outline" size={24} color={dangerColor} />
+                    </Pressable>
+                  </View>
+                </Card>
+              ))}
+            </View>
+          )}
+        {{else}}
+          {isLoading && (
+            <View className="items-center justify-center py-12">
+              <ActivityIndicator size="large" color={accentColor} />
+              <Text className="text-muted mt-4">Loading todos...</Text>
+            </View>
+          )}
+
+          {todos?.data && todos.data.length === 0 && !isLoading && (
+            <Card className="items-center justify-center py-12">
+              <Ionicons name="checkbox-outline" size={64} color={mutedColor} style=\{{ marginBottom: 16 }} />
+              <Text className="text-foreground text-lg font-semibold mb-2">
+                No todos yet
+              </Text>
+              <Text className="text-muted text-center">
+                Add your first task to get started!
+              </Text>
+            </Card>
+          )}
+
+          {todos?.data && todos.data.length > 0 && (
+            <View className="gap-3">
+              {todos.data.map((todo) => (
+                <Card key={todo.id} variant="secondary" className="p-4">
+                  <View className="flex-row items-center gap-3">
+                    <Checkbox
+                      isSelected={todo.completed}
+                      onSelectedChange={() => handleToggleTodo(todo.id, todo.completed)}
+                    />
+                    <View className="flex-1">
+                      <Text className={`text-base ${todo.completed ? "text-muted line-through" : "text-foreground"}`}>
+                        {todo.text}
+                      </Text>
+                    </View>
+                    <Pressable
+                      onPress={() => handleDeleteTodo(todo.id)}
+                      className="p-2 rounded-lg active:opacity-70"
+                    >
+                      <Ionicons name="trash-outline" size={24} color={dangerColor} />
+                    </Pressable>
+                  </View>
+                </Card>
+              ))}
+            </View>
+          )}
+        {{/if}}
+      </ScrollView>
+    </Container>
+  );
+}

package/templates/extras/bunfig.toml.hbs

@@ -1,6 +1,6 @@
 [install]
-{{#if (or (includes frontend "nuxt") (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
-linker = "hoisted"  # having issues with Nuxt and NativeWind/Unistyles when linker is isolated
+{{#if (or (includes frontend "nuxt"))}}
+linker = "hoisted" # having issues with Nuxt when linker is isolated
 {{else}}
 linker = "isolated"
-{{/if}}
+{{/if}}

package/templates/frontend/native/bare/_gitignore

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

package/templates/frontend/native/{nativewind → bare}/app/(drawer)/(tabs)/_layout.tsx.hbs

@@ -1,27 +1,21 @@
 import { TabBarIcon } from "@/components/tabbar-icon";
 import { useColorScheme } from "@/lib/use-color-scheme";
 import { Tabs } from "expo-router";
+import { NAV_THEME } from "@/lib/constants";
 
 export default function TabLayout() {
   const { isDarkColorScheme } = useColorScheme();
+  const theme = isDarkColorScheme ? NAV_THEME.dark : NAV_THEME.light;
 
   return (
     <Tabs
       screenOptions=\{{
         headerShown: false,
-        tabBarActiveTintColor: isDarkColorScheme
-          ? "hsl(217.2 91.2% 59.8%)"
-          : "hsl(221.2 83.2% 53.3%)",
-        tabBarInactiveTintColor: isDarkColorScheme
-          ? "hsl(215 20.2% 65.1%)"
-          : "hsl(215.4 16.3% 46.9%)",
+        tabBarActiveTintColor: theme.primary,
+        tabBarInactiveTintColor: theme.text,
         tabBarStyle: {
-          backgroundColor: isDarkColorScheme
-            ? "hsl(222.2 84% 4.9%)"
-            : "hsl(0 0% 100%)",
-          borderTopColor: isDarkColorScheme
-            ? "hsl(217.2 32.6% 17.5%)"
-            : "hsl(214.3 31.8% 91.4%)",
+          backgroundColor: theme.background,
+          borderTopColor: theme.border,
         },
       }}
     >
@@ -44,3 +38,4 @@ export default function TabLayout() {
     </Tabs>
   );
 }
+

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

@@ -0,0 +1,43 @@
+import { Container } from "@/components/container";
+import { ScrollView, Text, View, StyleSheet } from "react-native";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { NAV_THEME } from "@/lib/constants";
+
+export default function TabOne() {
+  const { colorScheme } = useColorScheme();
+  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
+
+  return (
+    <Container>
+      <ScrollView style={styles.scrollView}>
+        <View style={styles.content}>
+          <Text style={[styles.title, { color: theme.text }]}>
+            Tab One
+          </Text>
+          <Text style={[styles.subtitle, { color: theme.text, opacity: 0.7 }]}>
+            Explore the first section of your app
+          </Text>
+        </View>
+      </ScrollView>
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+    padding: 16,
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+  },
+});
+

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

@@ -0,0 +1,43 @@
+import { Container } from "@/components/container";
+import { ScrollView, Text, View, StyleSheet } from "react-native";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { NAV_THEME } from "@/lib/constants";
+
+export default function TabTwo() {
+  const { colorScheme } = useColorScheme();
+  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
+
+  return (
+    <Container>
+      <ScrollView style={styles.scrollView}>
+        <View style={styles.content}>
+          <Text style={[styles.title, { color: theme.text }]}>
+            Tab Two
+          </Text>
+          <Text style={[styles.subtitle, { color: theme.text, opacity: 0.7 }]}>
+            Discover more features and content
+          </Text>
+        </View>
+      </ScrollView>
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+    padding: 16,
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+  },
+});
+

package/templates/frontend/native/{nativewind → bare}/app/(drawer)/_layout.tsx.hbs

@@ -1,12 +1,34 @@
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import { Link } from "expo-router";
 import { Drawer } from "expo-router/drawer";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { NAV_THEME } from "@/lib/constants";
 
 import { HeaderButton } from "@/components/header-button";
 
 const DrawerLayout = () => {
+  const { colorScheme } = useColorScheme();
+  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
+
   return (
-    <Drawer>
+    <Drawer
+      screenOptions=\{{
+        headerStyle: {
+          backgroundColor: theme.background,
+        },
+        headerTitleStyle: {
+          color: theme.text,
+        },
+        headerTintColor: theme.text,
+        drawerStyle: {
+          backgroundColor: theme.background,
+        },
+        drawerLabelStyle: {
+          color: theme.text,
+        },
+        drawerInactiveTintColor: theme.text,
+      }}
+    >
       <Drawer.Screen
         name="index"
         options=\{{
@@ -65,3 +87,4 @@ const DrawerLayout = () => {
 };
 
 export default DrawerLayout;
+