create-aron-app 0.1.6 → 0.1.7

package/templates/apps/api/_generated/server.d.ts

@@ -0,0 +1,143 @@
+/* eslint-disable */
+/**
+ * Generated utilities for implementing server-side Convex query and mutation functions.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import {
+  ActionBuilder,
+  HttpActionBuilder,
+  MutationBuilder,
+  QueryBuilder,
+  GenericActionCtx,
+  GenericMutationCtx,
+  GenericQueryCtx,
+  GenericDatabaseReader,
+  GenericDatabaseWriter,
+} from "convex/server";
+import type { DataModel } from "./dataModel.js";
+
+/**
+ * Define a query in this Convex app's public API.
+ *
+ * This function will be allowed to read your Convex database and will be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export declare const query: QueryBuilder<DataModel, "public">;
+
+/**
+ * Define a query that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to read from your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export declare const internalQuery: QueryBuilder<DataModel, "internal">;
+
+/**
+ * Define a mutation in this Convex app's public API.
+ *
+ * This function will be allowed to modify your Convex database and will be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export declare const mutation: MutationBuilder<DataModel, "public">;
+
+/**
+ * Define a mutation that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to modify your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export declare const internalMutation: MutationBuilder<DataModel, "internal">;
+
+/**
+ * Define an action in this Convex app's public API.
+ *
+ * An action is a function which can execute any JavaScript code, including non-deterministic
+ * code and code with side-effects, like calling third-party services.
+ * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
+ * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
+ *
+ * @param func - The action. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
+ */
+export declare const action: ActionBuilder<DataModel, "public">;
+
+/**
+ * Define an action that is only accessible from other Convex functions (but not from the client).
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
+ */
+export declare const internalAction: ActionBuilder<DataModel, "internal">;
+
+/**
+ * Define an HTTP action.
+ *
+ * The wrapped function will be used to respond to HTTP requests received
+ * by a Convex deployment if the requests matches the path and method where
+ * this action is routed. Be sure to route your httpAction in `convex/http.js`.
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument
+ * and a Fetch API `Request` object as its second.
+ * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up.
+ */
+export declare const httpAction: HttpActionBuilder;
+
+/**
+ * A set of services for use within Convex query functions.
+ *
+ * The query context is passed as the first argument to any Convex query
+ * function run on the server.
+ *
+ * This differs from the {@link MutationCtx} because all of the services are
+ * read-only.
+ */
+export type QueryCtx = GenericQueryCtx<DataModel>;
+
+/**
+ * A set of services for use within Convex mutation functions.
+ *
+ * The mutation context is passed as the first argument to any Convex mutation
+ * function run on the server.
+ */
+export type MutationCtx = GenericMutationCtx<DataModel>;
+
+/**
+ * A set of services for use within Convex action functions.
+ *
+ * The action context is passed as the first argument to any Convex action
+ * function run on the server.
+ */
+export type ActionCtx = GenericActionCtx<DataModel>;
+
+/**
+ * An interface to read from the database within Convex query functions.
+ *
+ * The two entry points are {@link DatabaseReader.get}, which fetches a single
+ * document by its {@link Id}, or {@link DatabaseReader.query}, which starts
+ * building a query.
+ */
+export type DatabaseReader = GenericDatabaseReader<DataModel>;
+
+/**
+ * An interface to read from and write to the database within Convex mutation
+ * functions.
+ *
+ * Convex guarantees that all writes within a single mutation are
+ * executed atomically, so you never have to worry about partial writes leaving
+ * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control)
+ * for the guarantees Convex provides your functions.
+ */
+export type DatabaseWriter = GenericDatabaseWriter<DataModel>;

package/templates/apps/api/_generated/server.js

@@ -0,0 +1,93 @@
+/* eslint-disable */
+/**
+ * Generated utilities for implementing server-side Convex query and mutation functions.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import {
+  actionGeneric,
+  httpActionGeneric,
+  queryGeneric,
+  mutationGeneric,
+  internalActionGeneric,
+  internalMutationGeneric,
+  internalQueryGeneric,
+} from "convex/server";
+
+/**
+ * Define a query in this Convex app's public API.
+ *
+ * This function will be allowed to read your Convex database and will be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export const query = queryGeneric;
+
+/**
+ * Define a query that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to read from your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export const internalQuery = internalQueryGeneric;
+
+/**
+ * Define a mutation in this Convex app's public API.
+ *
+ * This function will be allowed to modify your Convex database and will be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export const mutation = mutationGeneric;
+
+/**
+ * Define a mutation that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to modify your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export const internalMutation = internalMutationGeneric;
+
+/**
+ * Define an action in this Convex app's public API.
+ *
+ * An action is a function which can execute any JavaScript code, including non-deterministic
+ * code and code with side-effects, like calling third-party services.
+ * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
+ * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
+ *
+ * @param func - The action. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
+ */
+export const action = actionGeneric;
+
+/**
+ * Define an action that is only accessible from other Convex functions (but not from the client).
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
+ */
+export const internalAction = internalActionGeneric;
+
+/**
+ * Define an HTTP action.
+ *
+ * The wrapped function will be used to respond to HTTP requests received
+ * by a Convex deployment if the requests matches the path and method where
+ * this action is routed. Be sure to route your httpAction in `convex/http.js`.
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument
+ * and a Fetch API `Request` object as its second.
+ * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up.
+ */
+export const httpAction = httpActionGeneric;

package/templates/apps/api/http.ts

@@ -0,0 +1,16 @@
+import { type HonoWithConvex, HttpRouterWithHono } from "convex-helpers/server/hono";
+import { Hono } from "hono";
+
+import type { ActionCtx } from "./_generated/server";
+
+const app: HonoWithConvex<ActionCtx> = new Hono();
+
+app.get("/", (c) => {
+  return c.json({ message: "Hello, world!" });
+});
+
+app.get("/health", (c) => {
+  return c.json({ message: "OK" });
+});
+
+export default new HttpRouterWithHono(app);

package/templates/apps/nextjs/.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
+NEXT_PUBLIC_CONVEX_URL=
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=

package/templates/{nextjs → apps/nextjs}/project.json

@@ -1,21 +1,21 @@
 {
-  "name": "my-app:web",
+  "name": "nextjs",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "./apps/web",
+  "sourceRoot": "apps/nextjs",
   "projectType": "application",
   "tags": [],
   "targets": {
     "dev": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "bunx next dev apps/web --port 5001"
+        "command": "bunx next dev apps/nextjs --port 5001"
       }
     },
     "build": {
       "executor": "@nx/next:build",
       "options": {
-        "root": "apps/web",
-        "outputPath": "dist/apps/web"
+        "root": "apps/nextjs",
+        "outputPath": "dist/apps/nextjs"
       }
     }
   }

package/templates/{nextjs → apps/nextjs}/src/app/(auth)/not-allowed/page.tsx

@@ -2,6 +2,7 @@
  * Copyright (c) Aron Weston 2025.
  */
 
+import type { Metadata } from "next";
 import Link from "next/link";
 
 export const metadata: Metadata = {

package/templates/apps/nextjs/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { SidebarInset, SidebarProvider } from "@/ui/base/side_bar";
+import { Sidebar } from "@/web/surfaces/sidebar/sidebar";
+
+type DashboardLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
+  return (
+    <SidebarProvider
+      style={{ "--sidebar-width": "265px" } as React.CSSProperties}
+      defaultOpen={true}
+    >
+      <Sidebar />
+      <SidebarInset>{children}</SidebarInset>
+    </SidebarProvider>
+  );
+}

package/templates/apps/nextjs/src/app/(dashboard)/page.tsx

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { bootstrapHome } from "@/web/surfaces/home/bootstrap";
+import { Home } from "@/web/surfaces/home/home";
+
+export default async function HomePage() {
+  const bootstrap = await bootstrapHome();
+
+  return <Home bootstrap={bootstrap} />;
+}

package/templates/{nextjs → apps/nextjs}/src/app/(dashboard)/todos/[id]/page.tsx

@@ -5,7 +5,8 @@
 import type { Metadata } from "next";
 
 import type { TodoId } from "@/api/todos/types";
-import { SingleTodoSurface } from "@/web/surfaces/todos/single_todo_surface";
+import { bootstrapSingleTodo } from "@/web/surfaces/todos/single_todo/bootstrap";
+import { SingleTodo } from "@/web/surfaces/todos/single_todo/single_todo";
 
 type SingleTodoPageProps = {
   params: Promise<{ id: TodoId }>;
@@ -19,5 +20,7 @@ export const metadata: Metadata = {
 export default async function SingleTodoPage({ params }: SingleTodoPageProps) {
   const { id } = await params;
 
-  return <SingleTodoSurface todoId={id} />;
+  const bootstrap = await bootstrapSingleTodo({ todoId: id });
+
+  return <SingleTodo bootstrap={bootstrap} />;
 }

package/templates/apps/nextjs/src/app/(dashboard)/todos/page.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { Metadata } from "next";
+
+import { AllTodos } from "@/web/surfaces/todos/all_todos/all_todos";
+import { bootstrapAllTodos } from "@/web/surfaces/todos/all_todos/bootstrap";
+
+export const metadata: Metadata = {
+  title: "Todos",
+  description: "Todos",
+};
+
+export default async function AllTodosPage() {
+  const bootstrap = await bootstrapAllTodos();
+
+  return <AllTodos bootstrap={bootstrap} />;
+}

package/templates/apps/nextjs/src/middleware.ts

@@ -0,0 +1,18 @@
+import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
+
+const isPublicRoute = createRouteMatcher(["/sign-in(.*)"]);
+
+export default clerkMiddleware(async (auth, req) => {
+  if (!isPublicRoute(req)) {
+    await auth.protect();
+  }
+});
+
+export const config = {
+  matcher: [
+    // Skip Next.js internals and all static files, unless found in search params
+    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
+    // Always run for API routes
+    "/(api|trpc)(.*)",
+  ],
+};

package/templates/apps/nextjs/src/surfaces/home/bootstrap.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+export type HomeBootstrap = Record<string, never>;
+
+export const bootstrapHome = async (): Promise<HomeBootstrap> => {
+  return {};
+};

package/templates/apps/nextjs/src/surfaces/home/home.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { useMemo, useRef } from "react";
+
+import type { HomeBootstrap } from "@/web/surfaces/home/bootstrap";
+import { installHome } from "@/web/surfaces/home/install";
+import { createLayout } from "@/web/surfaces/home/layout";
+
+export type HomeProps = {
+  bootstrap: HomeBootstrap;
+};
+
+export const Home = ({ bootstrap }: HomeProps) => {
+  const { layout, Layout } = useMemo(() => createLayout(), []);
+  const installed = useRef(false);
+
+  if (!installed.current) {
+    installed.current = true;
+    installHome({ layout, bootstrap });
+  }
+
+  return <Layout />;
+};

package/templates/apps/nextjs/src/surfaces/home/install.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { HomeBootstrap } from "@/web/surfaces/home/bootstrap";
+import type { HomeLayoutController } from "@/web/surfaces/home/layout";
+
+export type InstallHomeOpts = {
+  layout: HomeLayoutController;
+  bootstrap: HomeBootstrap;
+};
+
+export const installHome = ({ layout, bootstrap }: InstallHomeOpts) => {
+  import("@/web/surfaces/home/main/create").then(({ createMain }) => {
+    layout.setMain(createMain({ bootstrap }));
+  });
+};

package/templates/apps/nextjs/src/surfaces/home/layout.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 HomeLayoutController {
+  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 HomeLayoutController();
+  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/home/main/create.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { useUser } from "@clerk/nextjs";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+
+import { Button } from "@/ui/base/button";
+import type { HomeBootstrap } from "@/web/surfaces/home/bootstrap";
+
+export type CreateHomeMainOpts = {
+  bootstrap: HomeBootstrap;
+};
+
+export const createMain = ({ bootstrap: _bootstrap }: CreateHomeMainOpts) => {
+  return observer(() => {
+    const { user } = useUser();
+
+    return (
+      <main className="flex flex-1 flex-col items-center justify-center gap-4 p-8">
+        <h1 className="text-3xl font-bold">
+          Welcome{user?.firstName ? `, ${user.firstName}` : ""}
+        </h1>
+        <p className="text-muted-foreground">Get started by managing your todos.</p>
+        <Button asChild>
+          <Link href="/todos">View Todos</Link>
+        </Button>
+      </main>
+    );
+  });
+};

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

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { SidebarLayoutController } from "@/web/surfaces/sidebar/layout";
+
+type InstallSidebarOpts = {
+  layout: SidebarLayoutController;
+};
+
+export const installSidebar = ({ layout }: InstallSidebarOpts) => {
+  import("@/web/surfaces/sidebar/nav_main/create").then(({ createNavMain }) => {
+    layout.setNavMain(createNavMain());
+  });
+
+  import("@/web/surfaces/sidebar/nav_secondary/create").then(({ createNavSecondary }) => {
+    layout.setNavSecondary(createNavSecondary());
+  });
+
+  import("@/web/surfaces/sidebar/user_menu/create").then(({ createUserMenu }) => {
+    layout.setUserMenu(createUserMenu());
+  });
+};

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

@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { action, makeObservable, observable, runInAction } from "mobx";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import type { ComponentType } from "react";
+
+import {
+  Sidebar as BaseSidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/ui/base/side_bar";
+import { Skeleton } from "@/ui/base/skeleton";
+
+export class SidebarLayoutController {
+  NavMain: ComponentType | undefined = undefined;
+  NavSecondary: ComponentType | undefined = undefined;
+  UserMenu: ComponentType | undefined = undefined;
+
+  constructor() {
+    makeObservable(this, {
+      NavMain: observable.ref,
+      NavSecondary: observable.ref,
+      UserMenu: observable.ref,
+      setNavMain: action,
+      setNavSecondary: action,
+      setUserMenu: action,
+    });
+  }
+
+  setNavMain(NavMain: ComponentType) {
+    runInAction(() => {
+      this.NavMain = NavMain;
+    });
+  }
+
+  setNavSecondary(NavSecondary: ComponentType) {
+    runInAction(() => {
+      this.NavSecondary = NavSecondary;
+    });
+  }
+
+  setUserMenu(UserMenu: ComponentType) {
+    runInAction(() => {
+      this.UserMenu = UserMenu;
+    });
+  }
+}
+
+const BrandLink = () => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          className="h-auto flex-col items-start gap-0.5 p-0"
+          asChild
+        >
+          <Link
+            href="/"
+            className="flex flex-row w-full items-center gap-3 px-2 py-2 transition-opacity hover:opacity-80 active:opacity-70 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:[&>div:last-child]:hidden"
+          >
+            <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-sidebar-brand text-sm text-white font-semibold group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:text-xs">
+              A
+            </div>
+            <div className="flex min-w-0 flex-col">
+              <span className="truncate text-base font-bold text-sidebar-foreground">
+                App
+              </span>
+              <span className="truncate text-xs text-sidebar-muted-foreground">
+                Template
+              </span>
+            </div>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+export const createSidebarLayout = () => {
+  const layout = new SidebarLayoutController();
+  return {
+    layout,
+    Layout: observer(() => {
+      const NavMain = layout.NavMain;
+      const NavSecondary = layout.NavSecondary;
+      const UserMenu = layout.UserMenu;
+
+      return (
+        <BaseSidebar
+          data-slot="app-sidebar"
+          className="shadow-sm"
+          collapsible="icon"
+        >
+          <SidebarHeader>
+            <BrandLink />
+          </SidebarHeader>
+          <SidebarContent className="flex flex-1 flex-col gap-4 overflow-hidden px-2">
+            {NavMain ? <NavMain /> : <Skeleton className="h-24 bg-sidebar-accent" />}
+          </SidebarContent>
+          <SidebarFooter className="gap-2">
+            {NavSecondary ? <NavSecondary /> : <Skeleton className="h-10 bg-sidebar-accent" />}
+            {UserMenu ? <UserMenu /> : <Skeleton className="h-12 bg-sidebar-accent" />}
+          </SidebarFooter>
+        </BaseSidebar>
+      );
+    }),
+  };
+};