create-better-t-stack 3.13.2 → 3.14.1

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

@@ -1,340 +0,0 @@
-import { useState } from "react";
-import {
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  ScrollView,
-  ActivityIndicator,
-  Alert,
-} from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
-
-{{#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("");
-  const { theme } = useUnistyles();
-
-  {{#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}}
-
-  const isLoading = {{#if (eq backend "convex")}}!todos{{else}}todos.isLoading{{/if}};
-  const isCreating = {{#if (eq backend "convex")}}false{{else}}createMutation.isPending{{/if}};
-  const primaryButtonTextColor = theme.colors.background;
-
-  return (
-    <Container>
-      <ScrollView style={styles.scrollView}>
-        <View style={styles.headerContainer}>
-          <Text style={styles.headerTitle}>Todo List</Text>
-          <Text style={styles.headerSubtitle}>
-            Manage your tasks efficiently
-          </Text>
-
-          <View style={styles.inputContainer}>
-            <TextInput
-              value={newTodoText}
-              onChangeText={setNewTodoText}
-              placeholder="Add a new task..."
-              placeholderTextColor={theme.colors.border}
-              editable={!isCreating}
-              style={styles.textInput}
-              onSubmitEditing={handleAddTodo}
-              returnKeyType="done"
-            />
-            <TouchableOpacity
-              onPress={handleAddTodo}
-              disabled={isCreating || !newTodoText.trim()}
-              style={[
-                styles.addButton,
-                (isCreating || !newTodoText.trim()) && styles.addButtonDisabled,
-              ]}
-            >
-              {isCreating ? (
-                <ActivityIndicator size="small" color={primaryButtonTextColor} />
-              ) : (
-                <Ionicons
-                  name="add"
-                  size={24}
-                  color={primaryButtonTextColor}
-                />
-              )}
-            </TouchableOpacity>
-          </View>
-        </View>
-
-        {isLoading && (
-          <View style={styles.loadingContainer}>
-            <ActivityIndicator size="large" color={theme.colors.primary} />
-            <Text style={styles.loadingText}>Loading todos...</Text>
-          </View>
-        )}
-
-        {{#if (eq backend "convex")}}
-          {todos && todos.length === 0 && !isLoading && (
-            <Text style={styles.emptyText}>No todos yet. Add one!</Text>
-          )}
-          {todos?.map((todo) => (
-            <View key={todo._id} style={styles.todoItem}>
-              <TouchableOpacity
-                onPress={() => handleToggleTodo(todo._id, todo.completed)}
-                style={styles.todoContent}
-              >
-                <Ionicons
-                  name={todo.completed ? "checkbox" : "square-outline"}
-                  size={24}
-                  color={todo.completed ? theme.colors.primary : theme.colors.typography}
-                  style={styles.checkbox}
-                />
-                <Text
-                  style={[
-                    styles.todoText,
-                    todo.completed && styles.todoTextCompleted,
-                  ]}
-                >
-                  {todo.text}
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity onPress={() => handleDeleteTodo(todo._id)}>
-                <Ionicons name="trash-outline" size={24} color={theme.colors.destructive} />
-              </TouchableOpacity>
-            </View>
-          ))}
-        {{else}}
-          {todos.data && todos.data.length === 0 && !isLoading && (
-             <Text style={styles.emptyText}>No todos yet. Add one!</Text>
-          )}
-          {todos.data?.map((todo: { id: number; text: string; completed: boolean }) => (
-            <View key={todo.id} style={styles.todoItem}>
-              <TouchableOpacity
-                onPress={() => handleToggleTodo(todo.id, todo.completed)}
-                style={styles.todoContent}
-              >
-                <Ionicons
-                  name={todo.completed ? "checkbox" : "square-outline"}
-                  size={24}
-                  color={todo.completed ? theme.colors.primary : theme.colors.typography}
-                  style={styles.checkbox}
-                />
-                <Text
-                  style={[
-                    styles.todoText,
-                    todo.completed && styles.todoTextCompleted,
-                  ]}
-                >
-                  {todo.text}
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity onPress={() => handleDeleteTodo(todo.id)}>
-                <Ionicons name="trash-outline" size={24} color={theme.colors.destructive} />
-              </TouchableOpacity>
-            </View>
-          ))}
-        {{/if}}
-      </ScrollView>
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create((theme) => ({
-  scrollView: {
-    flex: 1,
-  },
-  headerContainer: {
-    paddingHorizontal: theme.spacing.md,
-    paddingVertical: theme.spacing.lg,
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors.border,
-    backgroundColor: theme.colors.background,
-  },
-  headerTitle: {
-    fontSize: 28,
-    fontWeight: "bold",
-    color: theme.colors.typography,
-    marginBottom: theme.spacing.sm,
-  },
-  headerSubtitle: {
-    fontSize: 16,
-    color: theme.colors.typography,
-    marginBottom: theme.spacing.md,
-  },
-  inputContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: theme.spacing.md,
-  },
-  textInput: {
-    flex: 1,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    borderRadius: 8,
-    paddingHorizontal: theme.spacing.md,
-    paddingVertical: theme.spacing.sm,
-    color: theme.colors.typography,
-    backgroundColor: theme.colors.background,
-    marginRight: theme.spacing.sm,
-    fontSize: 16,
-  },
-  addButton: {
-    backgroundColor: theme.colors.primary,
-    padding: theme.spacing.sm,
-    borderRadius: 8,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  addButtonDisabled: {
-    backgroundColor: theme.colors.border,
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: theme.spacing.lg,
-  },
-  loadingText: {
-    marginTop: theme.spacing.sm,
-    fontSize: 16,
-    color: theme.colors.typography,
-  },
-  emptyText: {
-    textAlign: "center",
-    marginTop: theme.spacing.xl,
-    fontSize: 16,
-    color: theme.colors.typography,
-  },
-  todoItem: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingVertical: theme.spacing.md,
-    paddingHorizontal: theme.spacing.md,
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors.border,
-    backgroundColor: theme.colors.background,
-  },
-  todoContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-  },
-  checkbox: {
-    marginRight: theme.spacing.md,
-  },
-  todoText: {
-    fontSize: 16,
-    color: theme.colors.typography,
-    flex: 1,
-  },
-  todoTextCompleted: {
-    textDecorationLine: "line-through",
-    color: theme.colors.border,
-  },
-}));

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

@@ -1,282 +0,0 @@
-import { useState } from "react";
-import { View, Text, ScrollView, 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}}
-import { Button, Checkbox, Chip, Spinner, Surface, TextField, useThemeColor } 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 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-4">
-        <View className="py-4 mb-4">
-          <View className="flex-row items-center justify-between">
-            <Text className="text-2xl font-semibold text-foreground tracking-tight">Tasks</Text>
-            {totalCount > 0 && (
-              <Chip variant="secondary" color="accent" size="sm">
-                <Chip.Label>
-                  {completedCount}/{totalCount}
-                </Chip.Label>
-              </Chip>
-            )}
-          </View>
-        </View>
-
-        <Surface variant="secondary" className="mb-4 p-3 rounded-lg">
-          <View className="flex-row items-center gap-2">
-            <View className="flex-1">
-              <TextField>
-                <TextField.Input
-                  value={newTodoText}
-                  onChangeText={setNewTodoText}
-                  placeholder="Add a new task..."
-                  {{#unless (eq backend "convex")}}
-                    editable={!createMutation.isPending}
-                  {{/unless}}
-                  onSubmitEditing={handleAddTodo}
-                  returnKeyType="done"
-                />
-              </TextField>
-            </View>
-            <Button
-              isIconOnly
-              {{#if (eq backend "convex")}}
-                variant={!newTodoText.trim() ? "secondary" : "primary"}
-                isDisabled={!newTodoText.trim()}
-              {{else}}
-                variant={createMutation.isPending || !newTodoText.trim() ? "secondary" : "primary"}
-                isDisabled={createMutation.isPending || !newTodoText.trim()}
-              {{/if}}
-              onPress={handleAddTodo}
-              size="sm"
-            >
-              {{#if (eq backend "convex")}}
-                <Ionicons
-                  name="add"
-                  size={20}
-                  color={newTodoText.trim() ? foregroundColor : mutedColor}
-                />
-              {{else}}
-                {createMutation.isPending ? (
-                  <Spinner size="sm" color="default" />
-                ) : (
-                  <Ionicons
-                    name="add"
-                    size={20}
-                    color={(createMutation.isPending || !newTodoText.trim()) ? mutedColor : foregroundColor}
-                  />
-                )}
-              {{/if}}
-            </Button>
-          </View>
-        </Surface>
-
-        {{#if (eq backend "convex")}}
-          {isLoading && (
-            <View className="items-center justify-center py-12">
-              <Spinner size="lg" />
-              <Text className="text-muted text-sm mt-3">Loading tasks...</Text>
-            </View>
-          )}
-
-          {todos && todos.length === 0 && !isLoading && (
-            <Surface variant="secondary" className="items-center justify-center py-10 rounded-lg">
-              <Ionicons name="checkbox-outline" size={40} color={mutedColor} />
-              <Text className="text-foreground font-medium mt-3">No tasks yet</Text>
-              <Text className="text-muted text-xs mt-1">Add your first task to get started</Text>
-            </Surface>
-          )}
-
-          {todos && todos.length > 0 && (
-            <View className="gap-2">
-              {todos.map((todo) => (
-                <Surface key={todo._id} variant="secondary" className="p-3 rounded-lg">
-                  <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-sm ${todo.completed ? "text-muted line-through" : "text-foreground"}`}>
-                        {todo.text}
-                      </Text>
-                    </View>
-                    <Button
-                      isIconOnly
-                      variant="ghost"
-                      onPress={() => handleDeleteTodo(todo._id)}
-                      size="sm"
-                    >
-                      <Ionicons name="trash-outline" size={16} color={dangerColor} />
-                    </Button>
-                  </View>
-                </Surface>
-              ))}
-            </View>
-          )}
-        {{else}}
-          {isLoading && (
-            <View className="items-center justify-center py-12">
-              <Spinner size="lg" />
-              <Text className="text-muted text-sm mt-3">Loading tasks...</Text>
-            </View>
-          )}
-
-          {todos?.data && todos.data.length === 0 && !isLoading && (
-            <Surface variant="secondary" className="items-center justify-center py-10 rounded-lg">
-              <Ionicons name="checkbox-outline" size={40} color={mutedColor} />
-              <Text className="text-foreground font-medium mt-3">No tasks yet</Text>
-              <Text className="text-muted text-xs mt-1">Add your first task to get started</Text>
-            </Surface>
-          )}
-
-          {todos?.data && todos.data.length > 0 && (
-            <View className="gap-2">
-              {todos.data.map((todo) => (
-                <Surface key={todo.id} variant="secondary" className="p-3 rounded-lg">
-                  <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-sm ${todo.completed ? "text-muted line-through" : "text-foreground"}`}>
-                        {todo.text}
-                      </Text>
-                    </View>
-                    <Button
-                      isIconOnly
-                      variant="ghost"
-                      onPress={() => handleDeleteTodo(todo.id)}
-                      size="sm"
-                    >
-                      <Ionicons name="trash-outline" size={16} color={dangerColor} />
-                    </Button>
-                  </View>
-                </Surface>
-              ))}
-            </View>
-          )}
-        {{/if}}
-      </ScrollView>
-    </Container>
-  );
-}

package/templates/examples/todo/server/drizzle/base/src/routers/todo.ts.hbs

@@ -1,75 +0,0 @@
-{{#if (eq api "orpc")}}
-import { eq } from "drizzle-orm";
-import z from "zod";
-import { db } from "@{{projectName}}/db";
-import { todo } from "@{{projectName}}/db/schema/todo";
-import { publicProcedure } from "../index";
-
-export const todoRouter = {
-  getAll: publicProcedure.handler(async () => {
-    return await db.select().from(todo);
-  }),
-
-  create: publicProcedure
-    .input(z.object({ text: z.string().min(1) }))
-    .handler(async ({ input }) => {
-      return await db
-        .insert(todo)
-        .values({
-          text: input.text,
-        });
-    }),
-
-  toggle: publicProcedure
-    .input(z.object({ id: z.number(), completed: z.boolean() }))
-    .handler(async ({ input }) => {
-      return await db
-        .update(todo)
-        .set({ completed: input.completed })
-        .where(eq(todo.id, input.id));
-    }),
-
-  delete: publicProcedure
-    .input(z.object({ id: z.number() }))
-    .handler(async ({ input }) => {
-      return await db.delete(todo).where(eq(todo.id, input.id));
-    }),
-};
-{{/if}}
-
-{{#if (eq api "trpc")}}
-import z from "zod";
-import { router, publicProcedure } from "../index";
-import { todo } from "@{{projectName}}/db/schema/todo";
-import { eq } from "drizzle-orm";
-import { db } from "@{{projectName}}/db";
-
-export const todoRouter = router({
-  getAll: publicProcedure.query(async () => {
-    return await db.select().from(todo);
-  }),
-
-  create: publicProcedure
-    .input(z.object({ text: z.string().min(1) }))
-    .mutation(async ({ input }) => {
-      return await db.insert(todo).values({
-        text: input.text,
-      });
-    }),
-
-  toggle: publicProcedure
-    .input(z.object({ id: z.number(), completed: z.boolean() }))
-    .mutation(async ({ input }) => {
-      return await db
-        .update(todo)
-        .set({ completed: input.completed })
-        .where(eq(todo.id, input.id));
-    }),
-
-  delete: publicProcedure
-    .input(z.object({ id: z.number() }))
-    .mutation(async ({ input }) => {
-      return await db.delete(todo).where(eq(todo.id, input.id));
-    }),
-});
-{{/if}}

package/templates/examples/todo/server/drizzle/mysql/src/schema/todo.ts

@@ -1,7 +0,0 @@
-import { mysqlTable, varchar, int, boolean } from "drizzle-orm/mysql-core";
-
-export const todo = mysqlTable("todo", {
-  id: int("id").primaryKey().autoincrement(),
-  text: varchar("text", { length: 255 }).notNull(),
-  completed: boolean("completed").default(false).notNull(),
-});