create-aron-app 0.1.0 → 0.1.1

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

@@ -0,0 +1,87 @@
+/*
+ * 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

@@ -0,0 +1,102 @@
+/*
+ * 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

@@ -0,0 +1,81 @@
+/*
+ * 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>
+  );
+};

package/templates/react-router/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
+  "exclude": ["node_modules", "dist", "build", "public"]
+}

package/templates/react-router/vite.config.ts

@@ -0,0 +1,40 @@
+import path from "node:path";
+
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig, type PluginOption } from "vite";
+import devtoolsJson from "vite-plugin-devtools-json";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+const workspaceRoot = path.resolve(__dirname, "../..");
+
+if (!process.env.VITE_CLERK_PUBLISHABLE_KEY) {
+  throw new Error("VITE_CLERK_PUBLISHABLE_KEY is not set");
+}
+
+if (!process.env.CLERK_SECRET_KEY) {
+  throw new Error("CLERK_SECRET_KEY is not set");
+}
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    reactRouter(),
+    tsconfigPaths(),
+    devtoolsJson({ uuid: "my-app" }) as PluginOption,
+  ],
+  server: {
+    fs: {
+      allow: [workspaceRoot],
+    },
+  },
+  resolve: {
+    alias: {
+      "@/api": path.resolve(__dirname, "../../apps/api"),
+      "@/assets": path.resolve(__dirname, "../../shared/assets/src"),
+      "@/ui": path.resolve(__dirname, "../../shared/ui/src"),
+      "@/utils": path.resolve(__dirname, "../../shared/utils/src"),
+      "@/web": path.resolve(__dirname, "src"),
+    },
+  },
+});