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

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

@@ -1,295 +0,0 @@
-import { useState } from "react";
-import {
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  ScrollView,
-  ActivityIndicator,
-  Alert,
-} 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}}
-
-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);
-
-  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 }),
-      },
-    ]);
-  };
-  {{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}}
-
-  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 }),
-      },
-    ]);
-  };
-  {{/if}}
-
-  return (
-    <Container>
-      <ScrollView className="flex-1">
-        <View className="px-4 py-6">
-          <View className="mb-6 rounded-lg border border-border p-4 bg-card">
-            <Text className="text-foreground text-2xl font-bold mb-2">
-              Todo List
-            </Text>
-            <Text className="text-muted-foreground mb-4">
-              Manage your tasks efficiently
-            </Text>
-
-            <View className="mb-6">
-              <View className="flex-row items-center space-x-2 mb-2">
-                <TextInput
-                  value={newTodoText}
-                  onChangeText={setNewTodoText}
-                  placeholder="Add a new task..."
-                  placeholderTextColor="#6b7280"
-                  {{#if (eq backend "convex")}}
-                  {{else}}
-                  editable={!createMutation.isPending}
-                  {{/if}}
-                  className="flex-1 border border-border rounded-md px-3 py-2 text-foreground bg-background"
-                  onSubmitEditing={handleAddTodo}
-                  returnKeyType="done"
-                />
-                <TouchableOpacity
-                  onPress={handleAddTodo}
-                  {{#if (eq backend "convex")}}
-                  disabled={!newTodoText.trim()}
-                  {{else}}
-                  disabled={createMutation.isPending || !newTodoText.trim()}
-                  {{/if}}
-                  className={`px-4 py-2 rounded-md ${
-                    {{#if (eq backend "convex")}}
-                    !newTodoText.trim()
-                    {{else}}
-                    createMutation.isPending || !newTodoText.trim()
-                    {{/if}}
-                      ? "bg-muted"
-                      : "bg-primary"
-                  }`}
-                >
-                  {{#if (eq backend "convex")}}
-                  <Text className="text-white font-medium">Add</Text>
-                  {{else}}
-                  {createMutation.isPending ? (
-                    <ActivityIndicator size="small" color="white" />
-                  ) : (
-                    <Text className="text-white font-medium">Add</Text>
-                  )}
-                  {{/if}}
-                </TouchableOpacity>
-              </View>
-            </View>
-
-            {{#if (eq backend "convex")}}
-            {todos === undefined ? (
-              <View className="flex justify-center py-8">
-                <ActivityIndicator size="large" color="#3b82f6" />
-              </View>
-            ) : todos.length === 0 ? (
-              <Text className="py-8 text-center text-muted-foreground">
-                No todos yet. Add one above!
-              </Text>
-            ) : (
-              <View className="space-y-2">
-                {todos.map((todo) => (
-                  <View
-                    key={todo._id}
-                    className="flex-row items-center justify-between rounded-md border border-border p-3 bg-background"
-                  >
-                    <View className="flex-row items-center flex-1">
-                      <TouchableOpacity
-                        onPress={() =>
-                          handleToggleTodo(todo._id, todo.completed)
-                        }
-                        className="mr-3"
-                      >
-                        <Ionicons
-                          name={todo.completed ? "checkbox" : "square-outline"}
-                          size={24}
-                          color={todo.completed ? "#22c55e" : "#6b7280"}
-                        />
-                      </TouchableOpacity>
-                      <Text
-                        className={`flex-1 ${
-                          todo.completed
-                            ? "line-through text-muted-foreground"
-                            : "text-foreground"
-                        }`}
-                      >
-                        {todo.text}
-                      </Text>
-                    </View>
-                    <TouchableOpacity
-                      onPress={() => handleDeleteTodo(todo._id)}
-                      className="ml-2 p-1"
-                    >
-                      <Ionicons
-                        name="trash-outline"
-                        size={20}
-                        color="#ef4444"
-                      />
-                    </TouchableOpacity>
-                  </View>
-                ))}
-              </View>
-            )}
-            {{else}}
-            {todos.isLoading ? (
-              <View className="flex justify-center py-8">
-                <ActivityIndicator size="large" color="#3b82f6" />
-              </View>
-            ) : todos.data?.length === 0 ? (
-              <Text className="py-8 text-center text-muted-foreground">
-                No todos yet. Add one above!
-              </Text>
-            ) : (
-              <View className="space-y-2">
-                {todos.data?.map((todo) => (
-                  <View
-                    key={todo.id}
-                    className="flex-row items-center justify-between rounded-md border border-border p-3 bg-background"
-                  >
-                    <View className="flex-row items-center flex-1">
-                      <TouchableOpacity
-                        onPress={() =>
-                          handleToggleTodo(todo.id, todo.completed)
-                        }
-                        className="mr-3"
-                      >
-                        <Ionicons
-                          name={todo.completed ? "checkbox" : "square-outline"}
-                          size={24}
-                          color={todo.completed ? "#22c55e" : "#6b7280"}
-                        />
-                      </TouchableOpacity>
-                      <Text
-                        className={`flex-1 ${
-                          todo.completed
-                            ? "line-through text-muted-foreground"
-                            : "text-foreground"
-                        }`}
-                      >
-                        {todo.text}
-                      </Text>
-                    </View>
-                    <TouchableOpacity
-                      onPress={() => handleDeleteTodo(todo.id)}
-                      className="ml-2 p-1"
-                    >
-                      <Ionicons
-                        name="trash-outline"
-                        size={20}
-                        color="#ef4444"
-                      />
-                    </TouchableOpacity>
-                  </View>
-                ))}
-              </View>
-            )}
-            {{/if}}
-          </View>
-        </View>
-      </ScrollView>
-    </Container>
-  );
-}

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

@@ -1,19 +0,0 @@
-import { Container } from "@/components/container";
-import { ScrollView, Text, View } from "react-native";
-
-export default function TabOne() {
-  return (
-    <Container>
-      <ScrollView className="flex-1 p-6">
-        <View className="py-8">
-          <Text className="text-3xl font-bold text-foreground mb-2">
-            Tab One
-          </Text>
-          <Text className="text-lg text-muted-foreground">
-            Explore the first section of your app
-          </Text>
-        </View>
-      </ScrollView>
-    </Container>
-  );
-}

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

@@ -1,19 +0,0 @@
-import { Container } from "@/components/container";
-import { ScrollView, Text, View } from "react-native";
-
-export default function TabTwo() {
-  return (
-    <Container>
-      <ScrollView className="flex-1 p-6">
-        <View className="py-8">
-          <Text className="text-3xl font-bold text-foreground mb-2">
-            Tab Two
-          </Text>
-          <Text className="text-lg text-muted-foreground">
-            Discover more features and content
-          </Text>
-        </View>
-      </ScrollView>
-    </Container>
-  );
-}

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

@@ -1,178 +0,0 @@
-import { View, Text, ScrollView, TouchableOpacity } 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}}
-
-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 className="flex-1">
-        <View className="px-4">
-          <Text className="font-mono text-foreground text-3xl font-bold mb-4">
-            BETTER T STACK
-          </Text>
-
-          {{#unless (and (eq backend "convex") (eq auth "better-auth"))}}
-          <View className="bg-card border border-border rounded-xl p-6 mb-6 shadow-sm">
-            {{#if (eq backend "convex")}}
-            <View className="flex-row items-center gap-3">
-              <View
-                className={`h-3 w-3 rounded-full ${
-                  healthCheck ? "bg-green-500" : "bg-orange-500"
-                }`}
-              />
-              <View className="flex-1">
-                <Text className="text-sm font-medium text-card-foreground">
-                  Convex
-                </Text>
-                <Text className="text-muted-foreground">
-                  {
-                    healthCheck === undefined
-                      ? "Checking..."
-                      : healthCheck === "OK"
-                      ? "Connected to API"
-                      : "API Disconnected"
-                  }
-                </Text>
-              </View>
-            </View>
-            {{else}}
-            {{#unless (eq api "none")}}
-            <View className="flex-row items-center gap-3">
-              <View
-                className={`h-3 w-3 rounded-full ${
-                  healthCheck.data ? "bg-green-500" : "bg-orange-500"
-                }`}
-              />
-            <View className="flex-1">
-              <Text className="text-sm font-medium text-card-foreground">
-                {{#if (eq api "orpc")}}ORPC{{else}}TRPC{{/if}}
-              </Text>
-              <Text className="text-xs text-muted-foreground">
-                {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>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 className="mb-6 p-4 bg-card rounded-lg border border-border">
-              <View className="flex-row justify-between items-center mb-2">
-                <Text className="text-foreground text-base">
-                  Welcome,{" "}
-                  <Text className="font-medium">{user.name}</Text>
-                </Text>
-              </View>
-              <Text className="text-muted-foreground text-sm mb-4">
-                {user.email}
-              </Text>
-              <TouchableOpacity
-                className="bg-destructive py-2 px-4 rounded-md self-start"
-                onPress={() => {
-                  authClient.signOut();
-                }}
-              >
-                <Text className="text-white font-medium">Sign Out</Text>
-              </TouchableOpacity>
-            </View>
-          ) : null}
-          <View className="mb-6 rounded-lg border border-border p-4">
-            <Text className="mb-3 font-medium text-foreground">
-              API Status
-            </Text>
-            <View className="flex-row items-center gap-2">
-              <View
-                className={`h-3 w-3 rounded-full ${
-                  healthCheck ? "bg-green-500" : "bg-red-500"
-                }`}
-              />
-              <Text className="text-muted-foreground">
-                {
-                  healthCheck === undefined
-                    ? "Checking..."
-                    : healthCheck === "OK"
-                    ? "Connected to API"
-                    : "API Disconnected"
-                }
-              </Text>
-            </View>
-          </View>
-          {!user && (
-            <>
-              <SignIn />
-              <SignUp />
-            </>
-          )}
-          {{/if}}
-        </View>
-      </ScrollView>
-    </Container>
-  );
-}

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

@@ -1,29 +0,0 @@
-import { Container } from "@/components/container";
-import { Link, Stack } from "expo-router";
-import { Text, View } from "react-native";
-
-export default function NotFoundScreen() {
-  return (
-    <>
-      <Stack.Screen options=\{{ title: "Oops!" }} />
-      <Container>
-        <View className="flex-1 justify-center items-center p-6">
-          <View className="items-center">
-            <Text className="text-6xl mb-4">🤔</Text>
-            <Text className="text-2xl font-bold text-foreground mb-2 text-center">
-              Page Not Found
-            </Text>
-            <Text className="text-muted-foreground text-center mb-8 max-w-sm">
-              Sorry, the page you're looking for doesn't exist.
-            </Text>
-            <Link href="/" asChild>
-              <Text className="text-primary font-medium bg-primary/10 px-6 py-3 rounded-lg">
-                Go to Home
-              </Text>
-            </Link>
-          </View>
-        </View>
-      </Container>
-    </>
-  );
-}