create-aron-app 0.1.6 → 0.1.7

package/templates/apps/react-router/src/surfaces/todos/all_todos/main/new_todo_sheet/new_todo_sheet.tsx

@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+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/react-router/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/react-router/src/surfaces/todos/single_todo/bootstrap.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { convexQuery } from "@convex-dev/react-query";
+import { redirect } from "react-router";
+
+import { api } from "@/api/_generated/api";
+import type { Todo, TodoId } from "@/api/todos/types";
+import { queryClient } from "@/web/providers/api_auth_provider";
+
+export type SingleTodoBootstrapArgs = {
+  params: { id?: string };
+};
+
+export type SingleTodoBootstrap = {
+  todoId: TodoId;
+  todo: Todo;
+};
+
+export const bootstrapSingleTodo = async ({
+  params,
+}: SingleTodoBootstrapArgs): Promise<SingleTodoBootstrap> => {
+  if (!params.id) {
+    throw redirect("/todos");
+  }
+  const todoId = params.id as TodoId;
+  try {
+    const todo = await queryClient.ensureQueryData(
+      convexQuery(api.todos.crud.getTodo, { todoId }),
+    );
+    return { todoId, todo };
+  } catch {
+    throw redirect("/todos");
+  }
+};

package/templates/apps/react-router/src/surfaces/todos/single_todo/header/create.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { observer } from "mobx-react-lite";
+import type { ComponentType } from "react";
+import type { NavigateFunction } from "react-router";
+
+import { Header } from "@/web/surfaces/todos/single_todo/header/header";
+
+export type CreateHeaderOpts = {
+  navigate: NavigateFunction;
+};
+
+type HeaderProps = {
+  SomeComponent: ComponentType;
+};
+
+export const createHeader = ({ navigate }: CreateHeaderOpts) => {
+  return observer(({ SomeComponent }: HeaderProps) => {
+    return (
+      <div>
+        <SomeComponent />
+        <Header
+          onBack={() => {
+            navigate("/todos");
+          }}
+        />
+      </div>
+    );
+  });
+};

package/templates/apps/react-router/src/surfaces/todos/single_todo/header/header.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+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/react-router/src/surfaces/todos/single_todo/install.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { NavigateFunction } from "react-router";
+
+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;
+  navigate: NavigateFunction;
+};
+
+export const installSingleTodo = ({ layout, bootstrap, navigate }: InstallSingleTodoOpts) => {
+  const controller = new SingleTodoController();
+
+  import("@/web/surfaces/todos/single_todo/header/create").then(({ createHeader }) => {
+    layout.setHeader(createHeader({ navigate }));
+  });
+
+  import("@/web/surfaces/todos/single_todo/main/create").then(({ createMain }) => {
+    layout.setMain(createMain({ controller, bootstrap }));
+  });
+};

package/templates/apps/react-router/src/surfaces/todos/single_todo/layout.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { action, observable } from "mobx";
+import { observer } from "mobx-react-lite";
+import type { ComponentType } from "react";
+
+import { Skeleton } from "@/ui/base/skeleton";
+
+export class SingleTodoLayoutController {
+  @observable.ref
+  accessor Header: ComponentType | undefined = undefined;
+
+  @observable.ref
+  accessor Main: ComponentType | undefined = undefined;
+
+  @action
+  setHeader(Header: ComponentType) {
+    this.Header = Header;
+  }
+
+  @action
+  setMain(Main: ComponentType) {
+    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/react-router/src/surfaces/todos/single_todo/main/create.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+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/react-router/src/surfaces/todos/single_todo/main/main.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+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/react-router/src/surfaces/todos/single_todo/single_todo.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { useMemo, useRef } from "react";
+import { useNavigate } from "react-router";
+
+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 navigate = useNavigate();
+  const { layout, Layout } = useMemo(createLayout, []);
+  const installed = useRef(false);
+
+  if (!installed.current) {
+    installed.current = true;
+    installSingleTodo({ layout, bootstrap, navigate });
+  }
+
+  return <Layout />;
+};

package/templates/apps/react-router/src/surfaces/todos/single_todo/single_todo_controller.ts

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

package/templates/{react-router → apps/react-router}/vite.config.ts

@@ -1,12 +1,12 @@
 import path from "node:path";
 
+import { transformAsync } from "@babel/core";
 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, "../..");
+import { uuid } from "zod/v4";
 
 if (!process.env.VITE_CLERK_PUBLISHABLE_KEY) {
   throw new Error("VITE_CLERK_PUBLISHABLE_KEY is not set");
@@ -16,12 +16,36 @@ if (!process.env.CLERK_SECRET_KEY) {
   throw new Error("CLERK_SECRET_KEY is not set");
 }
 
+const workspaceRoot = path.resolve(__dirname, "../..");
+
+const appRoot = path.resolve(__dirname, "src");
+
 export default defineConfig({
+  build: {
+    outDir: "dist",
+  },
   plugins: [
     tailwindcss(),
+    {
+      name: "mobx-decorators",
+      enforce: "pre",
+      async transform(code, id) {
+        if (!id.startsWith(appRoot) || !/\.[jt]sx?$/.test(id)) return null;
+        const result = await transformAsync(code, {
+          filename: id,
+          configFile: false,
+          babelrc: false,
+          presets: [
+            ["@babel/preset-typescript", { allExtensions: true, isTSX: id.endsWith(".tsx") }],
+          ],
+          plugins: [["@babel/plugin-proposal-decorators", { version: "2023-05" }]],
+        });
+        return result ? { code: result.code!, map: result.map } : null;
+      },
+    } as PluginOption,
     reactRouter(),
     tsconfigPaths(),
-    devtoolsJson({ uuid: "my-app" }) as PluginOption,
+    devtoolsJson({ uuid: uuid().toString() }) as PluginOption,
   ],
   server: {
     fs: {

package/templates/{_base/biome.json → biome.json}

@@ -29,6 +29,9 @@
     "enabled": true
   },
   "css": {
+    "parser": {
+      "tailwindDirectives": true
+    },
     "formatter": {
       "enabled": true,
       "indentStyle": "space",
@@ -94,6 +97,10 @@
       "recommended": true,
       "style": {
         "noInferrableTypes": "error",
+        "useBlockStatements": {
+          "level": "error",
+          "fix": "safe"
+        },
         "noParameterAssign": "warn",
         "noUnusedTemplateLiteral": "error",
         "noUselessElse": "error",