create-aron-app 0.1.7 → 0.1.10

package/templates/apps/nextjs/src/surfaces/sidebar/user_menu/user_menu.tsx

@@ -1,42 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-"use client";
-
-import { UserButton } from "@clerk/nextjs";
-
-import { SidebarMenu, SidebarMenuItem } from "@/ui/base/side_bar";
-import { Skeleton } from "@/ui/base/skeleton";
-
-type UserMenuProps = {
-  isLoaded: boolean;
-  fullName: string | null | undefined;
-  email: string | null | undefined;
-};
-
-export const UserMenu = ({ isLoaded, fullName, email }: UserMenuProps) => {
-  if (!isLoaded) {
-    return (
-      <SidebarMenu>
-        <SidebarMenuItem className="w-full">
-          <Skeleton className="h-12 w-full rounded-lg border" />
-        </SidebarMenuItem>
-      </SidebarMenu>
-    );
-  }
-
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem className="w-full">
-        <div className="flex w-full items-start gap-2 rounded-md border px-2 py-2 shadow-sm">
-          <UserButton />
-          <div className="flex w-fit min-w-0 flex-col gap-0 text-left leading-tight">
-            <span className="truncate text-sm font-medium break-words">{fullName}</span>
-            <span className="truncate text-xs font-light">{email}</span>
-          </div>
-        </div>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  );
-};

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

@@ -1,29 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-"use client";
-
-import { useConvex } from "convex/react";
-import { useMemo, useRef } from "react";
-
-import type { AllTodosBootstrap } from "@/web/surfaces/todos/all_todos/bootstrap";
-import { installAllTodos } from "@/web/surfaces/todos/all_todos/install";
-import { createLayout } from "@/web/surfaces/todos/all_todos/layout";
-
-export type AllTodosProps = {
-  bootstrap: AllTodosBootstrap;
-};
-
-export const AllTodos = ({ bootstrap }: AllTodosProps) => {
-  const convex = useConvex();
-  const { layout, Layout } = useMemo(createLayout, []);
-  const installed = useRef(false);
-
-  if (!installed.current) {
-    installed.current = true;
-    installAllTodos({ layout, bootstrap, convex });
-  }
-
-  return <Layout />;
-};

package/templates/apps/nextjs/src/surfaces/todos/all_todos/all_todos_controller.ts

@@ -1,61 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-import type { ConvexReactClient } from "convex/react";
-import { action, makeObservable, observable, runInAction } from "mobx";
-
-import { api } from "@/api/_generated/api";
-import type { TodoId } from "@/api/todos/types";
-
-type AllTodosControllerOpts = {
-  convex: ConvexReactClient;
-};
-
-export class AllTodosController {
-  private readonly convex: ConvexReactClient;
-
-  public isPending = false;
-  public isNewTodoSheetOpen = false;
-
-  constructor({ convex }: AllTodosControllerOpts) {
-    this.convex = convex;
-
-    makeObservable(this, {
-      isPending: observable,
-      isNewTodoSheetOpen: observable,
-      openNewTodoSheet: action,
-      closeNewTodoSheet: action,
-      createTodo: action,
-    });
-  }
-
-  openNewTodoSheet() {
-    this.isNewTodoSheetOpen = true;
-  }
-
-  closeNewTodoSheet() {
-    this.isNewTodoSheetOpen = false;
-  }
-
-  async updateTodo(args: { todoId: TodoId; isCompleted: boolean }) {
-    await this.convex.mutation(api.todos.crud.updateTodo, args);
-  }
-
-  async deleteTodo(args: { todoId: TodoId }) {
-    await this.convex.mutation(api.todos.crud.deleteTodo, args);
-  }
-
-  async createTodo(args: { title: string; description?: string }) {
-    runInAction(() => {
-      this.isPending = true;
-    });
-    try {
-      await this.convex.mutation(api.todos.crud.createTodo, args);
-    } finally {
-      runInAction(() => {
-        this.isPending = false;
-      });
-    }
-  }
-}

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

@@ -1,21 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-"use server";
-
-import { fetchQuery } from "convex/nextjs";
-
-import { api } from "@/api/_generated/api";
-import type { Todo } from "@/api/todos/types";
-import { getAuthToken } from "@/web/utils/auth";
-
-export type AllTodosBootstrap = {
-  todos: Todo[];
-};
-
-export const bootstrapAllTodos = async (): Promise<AllTodosBootstrap> => {
-  const token = await getAuthToken();
-  const todos = await fetchQuery(api.todos.crud.listTodos, {}, { token });
-  return { todos };
-};

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

@@ -1,23 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-"use client";
-
-import { observer } from "mobx-react-lite";
-import type { ComponentType } from "react";
-
-export type CreateHeaderOpts = {
-  NewTodoSheet: ComponentType;
-};
-
-export const createHeader = ({ NewTodoSheet }: CreateHeaderOpts) => {
-  return observer(() => {
-    return (
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-semibold">Todos</h1>
-        <NewTodoSheet />
-      </div>
-    );
-  });
-};

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

@@ -1,23 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-import type { ConvexReactClient } from "convex/react";
-
-import { AllTodosController } from "@/web/surfaces/todos/all_todos/all_todos_controller";
-import type { AllTodosBootstrap } from "@/web/surfaces/todos/all_todos/bootstrap";
-import type { AllTodosLayoutController } from "@/web/surfaces/todos/all_todos/layout";
-
-export type InstallAllTodosOpts = {
-  layout: AllTodosLayoutController;
-  bootstrap: AllTodosBootstrap;
-  convex: ConvexReactClient;
-};
-
-export const installAllTodos = ({ layout, bootstrap, convex }: InstallAllTodosOpts) => {
-  const controller = new AllTodosController({ convex });
-
-  import("@/web/surfaces/todos/all_todos/main/create").then(({ createMain }) => {
-    layout.setMain(createMain({ controller, bootstrap }));
-  });
-};

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

@@ -1,44 +0,0 @@
-/*
- * 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 AllTodosLayoutController {
-  Main: ComponentType | undefined = undefined;
-
-  constructor() {
-    makeObservable(this, {
-      Main: observable.ref,
-      setMain: action,
-    });
-  }
-
-  setMain(Main: ComponentType) {
-    runInAction(() => {
-      this.Main = Main;
-    });
-  }
-}
-
-export const createLayout = () => {
-  const layout = new AllTodosLayoutController();
-  return {
-    layout,
-    Layout: observer(() => {
-      const Main = layout.Main;
-
-      return (
-        <div className="flex w-full flex-1 flex-col">
-          {Main ? <Main /> : <Skeleton className="h-64 w-full rounded-md" />}
-        </div>
-      );
-    }),
-  };
-};

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

@@ -1,49 +0,0 @@
-/*
- * 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 { AllTodosController } from "@/web/surfaces/todos/all_todos/all_todos_controller";
-import type { AllTodosBootstrap } from "@/web/surfaces/todos/all_todos/bootstrap";
-import { createHeader } from "@/web/surfaces/todos/all_todos/header/create";
-import { Main } from "@/web/surfaces/todos/all_todos/main/main";
-import { createNewTodoSheet } from "@/web/surfaces/todos/all_todos/main/new_todo_sheet/create";
-
-export type CreateMainOpts = {
-  controller: AllTodosController;
-  bootstrap: AllTodosBootstrap;
-};
-
-export const createMain = ({ controller, bootstrap }: CreateMainOpts) => {
-  const NewTodoSheet = createNewTodoSheet({ controller });
-  const Header = createHeader({ NewTodoSheet });
-
-  return observer(() => {
-    const { data: todos, isPending } = useQuery({
-      ...convexQuery(api.todos.crud.listTodos, {}),
-      initialData: bootstrap.todos as never,
-    });
-
-    return (
-      <main className="flex flex-1 flex-col overflow-auto p-6">
-        <Header />
-        <Main
-          todos={todos}
-          isPending={isPending}
-          onToggle={(todoId, isCompleted) => {
-            void controller.updateTodo({ todoId, isCompleted });
-          }}
-          onDelete={(todoId) => {
-            void controller.deleteTodo({ todoId });
-          }}
-        />
-      </main>
-    );
-  });
-};

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

@@ -1,70 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-"use client";
-
-import { Trash2 } from "lucide-react";
-import Link from "next/link";
-
-import type { Todo, TodoId } from "@/api/todos/types";
-import { Button } from "@/ui/base/button";
-import { Checkbox } from "@/ui/base/checkbox";
-import { Spinner } from "@/ui/base/spinner";
-
-type MainProps = {
-  todos: Todo[] | undefined;
-  isPending: boolean;
-  onToggle: (todoId: TodoId, isCompleted: boolean) => void;
-  onDelete: (todoId: TodoId) => void;
-};
-
-export const Main = ({ todos, isPending, onToggle, onDelete }: MainProps) => {
-  if (isPending) {
-    return (
-      <div className="flex flex-1 items-center justify-center">
-        <Spinner />
-      </div>
-    );
-  }
-
-  if (!todos?.length) {
-    return (
-      <div className="flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground">
-        <p>No todos yet.</p>
-        <p className="text-sm">Use New Todo above to add one.</p>
-      </div>
-    );
-  }
-
-  return (
-    <ul className="flex max-w-2xl flex-col gap-2">
-      {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) => onToggle(todo._id, !!checked)}
-          />
-          <Link
-            href={`/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"
-            type="button"
-            onClick={() => onDelete(todo._id)}
-          >
-            <Trash2 className="size-4" />
-          </Button>
-        </li>
-      ))}
-    </ul>
-  );
-};

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

@@ -1,56 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { observer } from "mobx-react-lite";
-import { FormProvider, useForm } from "react-hook-form";
-
-import type { AllTodosController } from "@/web/surfaces/todos/all_todos/all_todos_controller";
-import { NewTodoSheet } from "@/web/surfaces/todos/all_todos/main/new_todo_sheet/new_todo_sheet";
-import { type NewTodoSchema, newTodoSchema } from "@/web/surfaces/todos/all_todos/main/new_todo_sheet/schema";
-
-export type CreateNewTodoSheetOpts = {
-  controller: AllTodosController;
-};
-
-export const createNewTodoSheet = ({ controller }: CreateNewTodoSheetOpts) => {
-  return observer(() => {
-    const form = useForm<NewTodoSchema>({
-      resolver: zodResolver(newTodoSchema),
-      defaultValues: {
-        title: "",
-        description: "",
-      },
-    });
-
-    const handleSubmit = form.handleSubmit(async (values) => {
-      await controller.createTodo({
-        title: values.title.trim(),
-        description: values.description?.trim() || undefined,
-      });
-
-      form.reset();
-      controller.closeNewTodoSheet();
-    });
-
-    return (
-      <FormProvider {...form}>
-        <NewTodoSheet
-          isPending={controller.createTodoPending}
-          onSubmit={handleSubmit}
-          open={controller.isNewTodoSheetOpen}
-          onOpenChange={(open) => {
-            if (open) {
-              controller.openNewTodoSheet();
-            } else {
-              controller.closeNewTodoSheet();
-            }
-          }}
-        />
-      </FormProvider>
-    );
-  });
-};

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

@@ -1,99 +0,0 @@
-/*
- * 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/single_todo/bootstrap.ts

@@ -1,32 +0,0 @@
-/*
- * 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/header.tsx

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

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

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