create-aron-app 0.1.5 → 0.1.7

package/templates/apps/nextjs/src/surfaces/todos/all_todos/main/new_todo_sheet/new_todo_sheet.tsx

@@ -0,0 +1,99 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { PlusIcon } from "lucide-react";
+import { useFormContext } from "react-hook-form";
+
+import { Button } from "@/ui/base/button";
+import { DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/ui/base/dialog";
+import { 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";
+import type { NewTodoSchema } from "@/web/surfaces/todos/all_todos/main/new_todo_sheet/schema";
+
+type NewTodoSheetProps = {
+  isPending: boolean;
+  onSubmit: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export const NewTodoSheet = ({
+  isPending,
+  onSubmit,
+  open,
+  onOpenChange,
+}: NewTodoSheetProps) => {
+  const form = useFormContext<NewTodoSchema>();
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetTrigger asChild>
+        <Button type="button">
+          <PlusIcon className="mr-2 size-4" />
+          New Todo
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="sm:max-w-[440px]">
+        <DialogHeader>
+          <DialogTitle>Create Todo</DialogTitle>
+          <DialogDescription>Add a new item to your todo list.</DialogDescription>
+        </DialogHeader>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            onSubmit();
+          }}
+          className="flex flex-col gap-4 pt-4"
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              onSubmit();
+            }
+          }}
+        >
+          <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..."
+                    className="resize-none"
+                    rows={3}
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <DialogFooter>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? "Creating..." : "Create Todo"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </SheetContent>
+    </Sheet>
+  );
+};

package/templates/apps/nextjs/src/surfaces/todos/all_todos/main/new_todo_sheet/schema.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { z } from "zod";
+
+export type NewTodoSchema = z.infer<typeof newTodoSchema>;
+export const newTodoSchema = z.object({
+  title: z.string().min(1, "Title is required"),
+  description: z.string().optional(),
+});

package/templates/apps/nextjs/src/surfaces/todos/single_todo/bootstrap.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { fetchQuery } from "convex/nextjs";
+import { redirect } from "next/navigation";
+
+import { api } from "@/api/_generated/api";
+import type { Todo, TodoId } from "@/api/todos/types";
+import { getAuthToken } from "@/web/utils/auth";
+
+export type SingleTodoBootstrapArgs = {
+  todoId: TodoId;
+};
+
+export type SingleTodoBootstrap = {
+  todoId: TodoId;
+  todo: Todo;
+};
+
+export const bootstrapSingleTodo = async ({
+  todoId,
+}: SingleTodoBootstrapArgs): Promise<SingleTodoBootstrap> => {
+  try {
+    const token = await getAuthToken();
+    const todo = await fetchQuery(api.todos.crud.getTodo, { todoId }, { token });
+    return { todoId, todo };
+  } catch {
+    redirect("/todos");
+    throw new Error("Unreachable");
+  }
+};

package/templates/apps/nextjs/src/surfaces/todos/single_todo/header/create.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { observer } from "mobx-react-lite";
+import type { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+
+import { Header } from "@/web/surfaces/todos/single_todo/header/header";
+
+export type CreateHeaderOpts = {
+  router: AppRouterInstance;
+};
+
+export const createHeader = ({ router }: CreateHeaderOpts) => {
+  return observer(() => {
+    return (
+      <Header
+        onBack={() => {
+          router.push("/todos");
+        }}
+      />
+    );
+  });
+};

package/templates/apps/nextjs/src/surfaces/todos/single_todo/header/header.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { ArrowLeft } from "lucide-react";
+
+import { Button } from "@/ui/base/button";
+
+type HeaderProps = {
+  onBack: () => void;
+};
+
+export const Header = ({ onBack }: HeaderProps) => {
+  return (
+    <Button variant="ghost" className="-ml-2 w-fit text-muted-foreground" type="button" onClick={onBack}>
+      <ArrowLeft className="mr-2 size-4" />
+      Back
+    </Button>
+  );
+};

package/templates/apps/nextjs/src/surfaces/todos/single_todo/install.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+
+import type { SingleTodoBootstrap } from "@/web/surfaces/todos/single_todo/bootstrap";
+import type { SingleTodoLayoutController } from "@/web/surfaces/todos/single_todo/layout";
+import { SingleTodoController } from "@/web/surfaces/todos/single_todo/single_todo_controller";
+
+export type InstallSingleTodoOpts = {
+  layout: SingleTodoLayoutController;
+  bootstrap: SingleTodoBootstrap;
+  router: AppRouterInstance;
+};
+
+export const installSingleTodo = ({ layout, bootstrap, router }: InstallSingleTodoOpts) => {
+  const controller = new SingleTodoController();
+
+  import("@/web/surfaces/todos/single_todo/header/create").then(({ createHeader }) => {
+    layout.setHeader(createHeader({ router }));
+  });
+
+  import("@/web/surfaces/todos/single_todo/main/create").then(({ createMain }) => {
+    layout.setMain(createMain({ controller, bootstrap }));
+  });
+};

package/templates/apps/nextjs/src/surfaces/todos/single_todo/layout.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { makeObservable, observable, action, runInAction } from "mobx";
+import { observer } from "mobx-react-lite";
+import type { ComponentType } from "react";
+
+import { Skeleton } from "@/ui/base/skeleton";
+
+export class SingleTodoLayoutController {
+  Header: ComponentType | undefined = undefined;
+  Main: ComponentType | undefined = undefined;
+
+  constructor() {
+    makeObservable(this, {
+      Header: observable.ref,
+      Main: observable.ref,
+      setHeader: action,
+      setMain: action,
+    });
+  }
+
+  setHeader(Header: ComponentType) {
+    runInAction(() => {
+      this.Header = Header;
+    });
+  }
+
+  setMain(Main: ComponentType) {
+    runInAction(() => {
+      this.Main = Main;
+    });
+  }
+}
+
+export const createLayout = () => {
+  const layout = new SingleTodoLayoutController();
+  return {
+    layout,
+    Layout: observer(() => {
+      const Header = layout.Header;
+      const Main = layout.Main;
+
+      return (
+        <div className="flex w-full flex-1 flex-col gap-4">
+          {Header ? <Header /> : <Skeleton className="h-10 w-48 rounded-md" />}
+          {Main ? <Main /> : <Skeleton className="h-64 w-full max-w-2xl rounded-md" />}
+        </div>
+      );
+    }),
+  };
+};

package/templates/apps/nextjs/src/surfaces/todos/single_todo/main/create.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { convexQuery } from "@convex-dev/react-query";
+import { useQuery } from "@tanstack/react-query";
+import { observer } from "mobx-react-lite";
+
+import { api } from "@/api/_generated/api";
+
+import type { SingleTodoBootstrap } from "@/web/surfaces/todos/single_todo/bootstrap";
+import type { SingleTodoController } from "@/web/surfaces/todos/single_todo/single_todo_controller";
+import { Main } from "@/web/surfaces/todos/single_todo/main/main";
+
+export type CreateMainOpts = {
+  controller: SingleTodoController;
+  bootstrap: SingleTodoBootstrap;
+};
+
+export const createMain = ({ controller, bootstrap }: CreateMainOpts) => {
+  return observer(() => {
+    const { data: todo } = useQuery({
+      ...convexQuery(api.todos.crud.getTodo, { todoId: bootstrap.todoId }),
+      initialData: bootstrap.todo as never,
+    });
+
+    return (
+      <Main
+        todo={todo}
+        onToggle={(todoId, isCompleted) => {
+          void controller.updateTodo({ todoId, isCompleted });
+        }}
+      />
+    );
+  });
+};

package/templates/apps/nextjs/src/surfaces/todos/single_todo/main/main.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import type { Todo, TodoId } from "@/api/todos/types";
+import { Badge } from "@/ui/base/badge";
+import { Checkbox } from "@/ui/base/checkbox";
+
+type MainProps = {
+  todo: Todo | undefined;
+  onToggle: (todoId: TodoId, isCompleted: boolean) => void;
+};
+
+export const Main = ({ todo, onToggle }: MainProps) => {
+  if (!todo) {
+    return null;
+  }
+
+  return (
+    <main className="flex max-w-2xl flex-1 flex-col gap-6 overflow-auto p-6">
+      <div className="flex items-start gap-3">
+        <Checkbox
+          className="mt-1"
+          checked={todo.isCompleted}
+          onCheckedChange={(checked) =>
+            onToggle(todo._id, !!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> : null}
+    </main>
+  );
+};

package/templates/apps/nextjs/src/surfaces/todos/single_todo/single_todo.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useMemo, useRef } from "react";
+
+import type { SingleTodoBootstrap } from "@/web/surfaces/todos/single_todo/bootstrap";
+import { installSingleTodo } from "@/web/surfaces/todos/single_todo/install";
+import { createLayout } from "@/web/surfaces/todos/single_todo/layout";
+
+export type SingleTodoProps = {
+  bootstrap: SingleTodoBootstrap;
+};
+
+export const SingleTodo = ({ bootstrap }: SingleTodoProps) => {
+  const router = useRouter();
+  const { layout, Layout } = useMemo(() => createLayout(), []);
+  const installed = useRef(false);
+
+  if (!installed.current) {
+    installed.current = true;
+    installSingleTodo({ layout, bootstrap, router });
+  }
+
+  return <Layout />;
+};

package/templates/apps/nextjs/src/surfaces/todos/single_todo/single_todo_controller.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { api } from "@/api/_generated/api";
+import type { TodoId } from "@/api/todos/types";
+import { convex } from "@/web/utils/convex";
+
+export class SingleTodoController {
+  async updateTodo(args: { todoId: TodoId; isCompleted: boolean }) {
+    await convex.mutation(api.todos.crud.updateTodo, args);
+  }
+}

package/templates/apps/nextjs/src/utils/auth.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+// "use server";
+
+import { auth } from "@clerk/nextjs/server";
+import { redirect } from "next/navigation";
+
+export const getAuthToken = async () => {
+  const token = await (await auth()).getToken({ template: "convex" });
+
+  if (!token) {
+    return redirect("/sign-in");
+  }
+
+  return token;
+};

package/templates/apps/react-router/.env.example

@@ -0,0 +1,10 @@
+# Backend
+CONVEX_DEPLOYMENT=
+CLERK_SECRET_KEY=
+CONVEX_SITE_URL= # HTTPS URL
+CLERK_JWT_ISSUER_DOMAIN=
+RESEND_API_KEY=
+
+# Frontend
+VITE_CONVEX_URL=
+VITE_CLERK_PUBLISHABLE_KEY=

package/templates/apps/react-router/.react-router/types/+future.ts

@@ -0,0 +1,9 @@
+// Generated by React Router
+
+import "react-router";
+
+declare module "react-router" {
+  interface Future {
+    v8_middleware: true
+  }
+}

package/templates/apps/react-router/.react-router/types/+routes.ts

@@ -0,0 +1,71 @@
+// Generated by React Router
+
+import "react-router"
+
+declare module "react-router" {
+  interface Register {
+    pages: Pages
+    routeFiles: RouteFiles
+    routeModules: RouteModules
+  }
+}
+
+type Pages = {
+  "/": {
+    params: {};
+  };
+  "/sign-in/*": {
+    params: {
+      "*": string;
+    };
+  };
+  "/todos": {
+    params: {};
+  };
+  "/todos/:id": {
+    params: {
+      "id": string;
+    };
+  };
+};
+
+type RouteFiles = {
+  "root.tsx": {
+    id: "root";
+    page: "/" | "/sign-in/*" | "/todos" | "/todos/:id";
+  };
+  "./routes/(auth)/layout.tsx": {
+    id: "routes/(auth)/layout";
+    page: "/sign-in/*";
+  };
+  "./routes/(auth)/sign-in/index.tsx": {
+    id: "routes/(auth)/sign-in/index";
+    page: "/sign-in/*";
+  };
+  "./routes/(dashboard)/layout.tsx": {
+    id: "routes/(dashboard)/layout";
+    page: "/" | "/todos" | "/todos/:id";
+  };
+  "./routes/(dashboard)/index.tsx": {
+    id: "routes/(dashboard)/index";
+    page: "/";
+  };
+  "./routes/(dashboard)/todos/index.tsx": {
+    id: "routes/(dashboard)/todos/index";
+    page: "/todos";
+  };
+  "./routes/(dashboard)/todos/[id].tsx": {
+    id: "routes/(dashboard)/todos/[id]";
+    page: "/todos/:id";
+  };
+};
+
+type RouteModules = {
+  "root": typeof import("./src/root.tsx");
+  "routes/(auth)/layout": typeof import("./src/./routes/(auth)/layout.tsx");
+  "routes/(auth)/sign-in/index": typeof import("./src/./routes/(auth)/sign-in/index.tsx");
+  "routes/(dashboard)/layout": typeof import("./src/./routes/(dashboard)/layout.tsx");
+  "routes/(dashboard)/index": typeof import("./src/./routes/(dashboard)/index.tsx");
+  "routes/(dashboard)/todos/index": typeof import("./src/./routes/(dashboard)/todos/index.tsx");
+  "routes/(dashboard)/todos/[id]": typeof import("./src/./routes/(dashboard)/todos/[id].tsx");
+};

package/templates/apps/react-router/.react-router/types/+server-build.d.ts

@@ -0,0 +1,18 @@
+// Generated by React Router
+
+declare module "virtual:react-router/server-build" {
+  import { ServerBuild } from "react-router";
+  export const assets: ServerBuild["assets"];
+  export const assetsBuildDirectory: ServerBuild["assetsBuildDirectory"];
+  export const basename: ServerBuild["basename"];
+  export const entry: ServerBuild["entry"];
+  export const future: ServerBuild["future"];
+  export const isSpaMode: ServerBuild["isSpaMode"];
+  export const prerender: ServerBuild["prerender"];
+  export const publicPath: ServerBuild["publicPath"];
+  export const routeDiscovery: ServerBuild["routeDiscovery"];
+  export const routes: ServerBuild["routes"];
+  export const ssr: ServerBuild["ssr"];
+  export const allowedActionOrigins: ServerBuild["allowedActionOrigins"];
+  export const unstable_getCriticalCss: ServerBuild["unstable_getCriticalCss"];
+}

package/templates/apps/react-router/.react-router/types/src/+types/root.ts

@@ -0,0 +1,59 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../root.js")
+
+type Info = GetInfo<{
+  file: "root.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../root.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // middleware
+  export type MiddlewareFunction = Annotations["MiddlewareFunction"];
+
+  // clientMiddleware
+  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

package/templates/apps/react-router/.react-router/types/src/routes/(auth)/+types/layout.ts

@@ -0,0 +1,62 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../layout.js")
+
+type Info = GetInfo<{
+  file: "./routes/(auth)/layout.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../root.js");
+}, {
+  id: "routes/(auth)/layout";
+  module: typeof import("../layout.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // middleware
+  export type MiddlewareFunction = Annotations["MiddlewareFunction"];
+
+  // clientMiddleware
+  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}