create-aron-app 0.1.6 → 0.1.7

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

@@ -0,0 +1,65 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../index.js")
+
+type Info = GetInfo<{
+  file: "./routes/(auth)/sign-in/index.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../../root.js");
+}, {
+  id: "routes/(auth)/layout";
+  module: typeof import("../../layout.js");
+}, {
+  id: "routes/(auth)/sign-in/index";
+  module: typeof import("../index.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/(dashboard)/+types/index.ts

@@ -0,0 +1,65 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../index.js")
+
+type Info = GetInfo<{
+  file: "./routes/(dashboard)/index.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../root.js");
+}, {
+  id: "routes/(dashboard)/layout";
+  module: typeof import("../layout.js");
+}, {
+  id: "routes/(dashboard)/index";
+  module: typeof import("../index.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/(dashboard)/+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/(dashboard)/layout.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../root.js");
+}, {
+  id: "routes/(dashboard)/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"];
+}

package/templates/apps/react-router/.react-router/types/src/routes/(dashboard)/todos/+types/[id].ts

@@ -0,0 +1,65 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../[id].js")
+
+type Info = GetInfo<{
+  file: "./routes/(dashboard)/todos/[id].tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../../root.js");
+}, {
+  id: "routes/(dashboard)/layout";
+  module: typeof import("../../layout.js");
+}, {
+  id: "routes/(dashboard)/todos/[id]";
+  module: typeof import("../[id].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/(dashboard)/todos/+types/index.ts

@@ -0,0 +1,65 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../index.js")
+
+type Info = GetInfo<{
+  file: "./routes/(dashboard)/todos/index.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../../../root.js");
+}, {
+  id: "routes/(dashboard)/layout";
+  module: typeof import("../../layout.js");
+}, {
+  id: "routes/(dashboard)/todos/index";
+  module: typeof import("../index.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/{react-router → apps/react-router}/project.json

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

package/templates/apps/react-router/src/app.css

@@ -0,0 +1,3 @@
+@import "../../../shared/assets/src/styles/global.css";
+@source "../../../shared/ui/src/**/*.{js,ts,jsx,tsx}";
+@source "../../../apps/web/src/**/*.{js,ts,jsx,tsx}";

package/templates/{react-router → apps/react-router}/src/components/error_boundary.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) SalesStar Limited 2026.
  */
 
-import type { Route } from "apps/web/.react-router/types/app/+types/root";
+import type { Route } from "../+types/root";
 import { isRouteErrorResponse } from "react-router";
 
 export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {

package/templates/{react-router → apps/react-router}/src/providers/api_auth_provider.tsx

@@ -23,6 +23,8 @@ const queryClient = new QueryClient({
 
 convexQueryClient.connect(queryClient);
 
+export { convex, queryClient };
+
 type ApiAuthProviderProps = {
   children: React.ReactNode;
 };

package/templates/{react-router/src/routes/auth → apps/react-router/src/routes/(auth)}/layout.tsx

@@ -6,7 +6,7 @@ import { Outlet } from "react-router";
 
 export default function AuthLayout() {
   return (
-    <div className="flex flex-1 items-center justify-center h-svh">
+    <div className="flex min-h-svh flex-1 items-center justify-center p-6">
       <Outlet />
     </div>
   );

package/templates/apps/react-router/src/routes/(dashboard)/index.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { Route } from "./+types/index";
+import { Home } from "../../surfaces/home/home";
+import { bootstrapHome } from "../../surfaces/home/bootstrap";
+
+export async function clientLoader(_args: Route.ClientLoaderArgs) {
+  return bootstrapHome();
+}
+
+export function meta({ loaderData: bootstrap }: Route.MetaArgs) {
+  return [{ title: "Home" }, { name: "description", content: "Home" }];
+}
+
+export default function HomePage({ loaderData: bootstrap }: Route.ComponentProps) {
+  return <Home bootstrap={bootstrap} />;
+}

package/templates/apps/react-router/src/routes/(dashboard)/layout.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { convexQuery } from "@convex-dev/react-query";
+import type { CSSProperties } from "react";
+import { Outlet, redirect } from "react-router";
+
+import { api } from "@/api/_generated/api";
+import { SidebarInset, SidebarProvider } from "@/ui/base/side_bar";
+import { queryClient } from "@/web/providers/api_auth_provider";
+import { Sidebar } from "@/web/surfaces/sidebar/sidebar";
+
+import type { Route } from "./+types/layout";
+
+export async function clientLoader(_args: Route.ClientLoaderArgs) {
+  try {
+    await queryClient.ensureQueryData(convexQuery(api.todos.crud.listTodos, {}));
+  } catch {
+    return redirect("/sign-in");
+  }
+  return null;
+}
+
+export default function DashboardLayout() {
+  return (
+    <SidebarProvider
+      style={{ "--sidebar-width": "265px" } as CSSProperties}
+      defaultOpen={true}
+    >
+      <Sidebar />
+      <SidebarInset>
+        <Outlet />
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/templates/apps/react-router/src/routes/(dashboard)/todos/[id].tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { Route } from "@/router/src/routes/(dashboard)/+types";
+import { bootstrapSingleTodo } from "@/web/surfaces/todos/single_todo/bootstrap";
+import { SingleTodo } from "@/web/surfaces/todos/single_todo/single_todo";
+
+export async function clientLoader({ params }: Route.ClientLoaderArgs) {
+  return bootstrapSingleTodo({ params });
+}
+
+export function meta({ loaderData: bootstrap }: Route.MetaArgs) {
+  return [{ title: bootstrap?.todo?.title ?? "Todo" }, { name: "description", content: "Todo" }];
+}
+
+export default function TodoPage({ loaderData: bootstrap }: Route.ComponentProps) {
+  return <SingleTodo bootstrap={bootstrap} />;
+}

package/templates/apps/react-router/src/routes/(dashboard)/todos/index.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { Route } from "./+types/index";
+import { AllTodos } from "../../../surfaces/todos/all_todos/all_todos";
+import { bootstrapAllTodos } from "../../../surfaces/todos/all_todos/bootstrap";
+
+export async function clientLoader(_args: Route.ClientLoaderArgs) {
+  return bootstrapAllTodos();
+}
+
+export function meta({ loaderData: bootstrap }: Route.MetaArgs) {
+  return [{ title: "Todos" }, { name: "description", content: "Todos" }];
+}
+
+export default function TodosPage({ loaderData: bootstrap }: Route.ComponentProps) {
+  return <AllTodos bootstrap={bootstrap} />;
+}

package/templates/apps/react-router/src/routes.ts

@@ -0,0 +1,12 @@
+import { index, layout, prefix, type RouteConfig, route } from "@react-router/dev/routes";
+
+export default [
+  layout("./routes/(auth)/layout.tsx", [route("/sign-in/*", "./routes/(auth)/sign-in/index.tsx")]),
+  layout("./routes/(dashboard)/layout.tsx", [
+    index("./routes/(dashboard)/index.tsx"),
+    ...prefix("todos", [
+      index("./routes/(dashboard)/todos/index.tsx"),
+      route(":id", "./routes/(dashboard)/todos/[id].tsx"),
+    ]),
+  ]),
+] satisfies RouteConfig;

package/templates/apps/react-router/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/react-router/src/surfaces/home/home.tsx

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

@@ -0,0 +1,35 @@
+/*
+ * 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 HomeLayoutController {
+  @observable.ref
+  accessor Main: ComponentType | undefined = undefined;
+
+  @action
+  setMain(Main: ComponentType) {
+    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/react-router/src/surfaces/home/main/create.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { useUser } from "@clerk/react-router";
+import { observer } from "mobx-react-lite";
+import { Link } from "react-router";
+
+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 to="/todos">View Todos</Link>
+        </Button>
+      </main>
+    );
+  });
+};

package/templates/apps/react-router/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());
+  });
+};