create-aron-app 0.1.5 → 0.1.7

package/templates/react-router/src/surfaces/todos/all_todos_surface.tsx

@@ -1,87 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { Trash2 } from "lucide-react";
-import { Link } from "react-router";
-
-import { api } from "@/api/_generated/api";
-import type { Id } from "@/api/_generated/dataModel";
-import { Button } from "@/ui/base/button";
-import { Checkbox } from "@/ui/base/checkbox";
-import { Spinner } from "@/ui/base/spinner";
-import { CreateTodoSheet } from "@/web/surfaces/todos/create_todo_sheet";
-
-export const AllTodosSurface = () => {
-  const { data: todos, isPending } = useQuery(convexQuery(api.todos.crud.listTodos, {}));
-
-  const { mutate: updateTodo } = useMutation({
-    mutationFn: useConvexMutation(api.todos.crud.updateTodo),
-  });
-
-  const { mutate: deleteTodo } = useMutation({
-    mutationFn: useConvexMutation(api.todos.crud.deleteTodo),
-  });
-
-  return (
-    <main className="flex flex-1 flex-col overflow-auto p-6">
-      <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-semibold">Todos</h1>
-        <CreateTodoSheet />
-      </div>
-
-      {isPending && (
-        <div className="flex flex-1 items-center justify-center">
-          <Spinner />
-        </div>
-      )}
-
-      {!isPending && todos?.length === 0 && (
-        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground">
-          <p>No todos yet.</p>
-          <CreateTodoSheet />
-        </div>
-      )}
-
-      {todos && todos.length > 0 && (
-        <ul className="flex flex-col gap-2 max-w-2xl">
-          {todos.map((todo) => (
-            <li
-              key={todo._id}
-              className="flex items-center gap-3 rounded-lg border bg-card px-4 py-3"
-            >
-              <Checkbox
-                checked={todo.isCompleted}
-                onCheckedChange={(checked) =>
-                  updateTodo({
-                    todoId: todo._id as Id<"todos">,
-                    isCompleted: !!checked,
-                  })
-                }
-              />
-              <Link
-                to={`/todos/${todo._id}`}
-                className="flex-1 truncate text-sm hover:underline"
-                style={{
-                  textDecoration: todo.isCompleted ? "line-through" : undefined,
-                }}
-              >
-                {todo.title}
-              </Link>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="size-7 shrink-0 text-muted-foreground hover:text-destructive"
-                onClick={() => deleteTodo({ todoId: todo._id as Id<"todos"> })}
-              >
-                <Trash2 className="size-4" />
-              </Button>
-            </li>
-          ))}
-        </ul>
-      )}
-    </main>
-  );
-};

package/templates/react-router/src/surfaces/todos/create_todo_sheet.tsx

@@ -1,102 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-import { useConvexMutation } from "@convex-dev/react-query";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { Plus } from "lucide-react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { api } from "@/api/_generated/api";
-import { Button } from "@/ui/base/button";
-import { DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/ui/base/dialog";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/base/form";
-import { Input } from "@/ui/base/input";
-import { Sheet, SheetContent, SheetTrigger } from "@/ui/base/sheet";
-import { TextArea } from "@/ui/base/text_area";
-
-const createTodoSchema = z.object({
-  title: z.string().min(1, "Title is required"),
-  description: z.string().optional(),
-});
-
-type CreateTodoSchema = z.infer<typeof createTodoSchema>;
-
-export const CreateTodoSheet = () => {
-  const form = useForm<CreateTodoSchema>({
-    resolver: zodResolver(createTodoSchema),
-    defaultValues: { title: "", description: "" },
-  });
-
-  const { mutate: createTodo, isPending } = useMutation({
-    mutationFn: useConvexMutation(api.todos.crud.createTodo),
-    onSuccess: () => form.reset(),
-  });
-
-  const handleSubmit = form.handleSubmit((values) => {
-    createTodo(values);
-  });
-
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button size="sm">
-          <Plus className="mr-2 size-4" />
-          New Todo
-        </Button>
-      </SheetTrigger>
-      <SheetContent className="sm:max-w-[480px]">
-        <DialogHeader>
-          <DialogTitle>New Todo</DialogTitle>
-          <DialogDescription>Add a new todo to your list.</DialogDescription>
-        </DialogHeader>
-        <Form {...form}>
-          <form
-            onSubmit={handleSubmit}
-            className="flex flex-col gap-4 pt-4"
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                handleSubmit();
-              }
-            }}
-          >
-            <FormField
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Title</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Buy groceries" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Description</FormLabel>
-                  <FormControl>
-                    <TextArea placeholder="Optional details..." rows={3} {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <DialogFooter>
-              <Button type="submit" disabled={isPending}>
-                {isPending ? "Creating…" : "Create Todo"}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </SheetContent>
-    </Sheet>
-  );
-};

package/templates/react-router/src/surfaces/todos/single_todo_surface.tsx

@@ -1,81 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { ArrowLeft } from "lucide-react";
-import { Link } from "react-router";
-
-import { api } from "@/api/_generated/api";
-import type { TodoId } from "@/api/todos/types";
-import { Badge } from "@/ui/base/badge";
-import { Button } from "@/ui/base/button";
-import { Checkbox } from "@/ui/base/checkbox";
-import { Spinner } from "@/ui/base/spinner";
-
-type SingleTodoSurfaceProps = {
-  todoId: TodoId;
-};
-
-export const SingleTodoSurface = ({ todoId }: SingleTodoSurfaceProps) => {
-  const { data: todo, isPending } = useQuery(convexQuery(api.todos.crud.getTodo, { todoId }));
-
-  const { mutate: updateTodo } = useMutation({
-    mutationFn: useConvexMutation(api.todos.crud.updateTodo),
-  });
-
-  if (isPending) {
-    return (
-      <main className="flex flex-1 items-center justify-center">
-        <Spinner />
-      </main>
-    );
-  }
-
-  if (!todo) {
-    return (
-      <main className="flex flex-1 flex-col items-center justify-center gap-4">
-        <p className="text-muted-foreground">Todo not found.</p>
-        <Button variant="outline" asChild>
-          <Link to="/todos">
-            <ArrowLeft className="mr-2 size-4" />
-            Back to todos
-          </Link>
-        </Button>
-      </main>
-    );
-  }
-
-  return (
-    <main className="flex flex-1 flex-col gap-6 overflow-auto p-6 max-w-2xl">
-      <Button variant="ghost" className="w-fit -ml-2 text-muted-foreground" asChild>
-        <Link to="/todos">
-          <ArrowLeft className="mr-2 size-4" />
-          Back
-        </Link>
-      </Button>
-
-      <div className="flex items-start gap-3">
-        <Checkbox
-          className="mt-1"
-          checked={todo.isCompleted}
-          onCheckedChange={(checked) => updateTodo({ todoId, isCompleted: !!checked })}
-        />
-        <div className="flex flex-col gap-2">
-          <h1
-            className="text-2xl font-semibold"
-            style={{ textDecoration: todo.isCompleted ? "line-through" : undefined }}
-          >
-            {todo.title}
-          </h1>
-          <Badge variant={todo.isCompleted ? "secondary" : "default"}>
-            {todo.isCompleted ? "Completed" : "In progress"}
-          </Badge>
-        </div>
-      </div>
-
-      {todo.description && <p className="text-muted-foreground">{todo.description}</p>}
-    </main>
-  );
-};