npm - create-aron-app - Versions diffs - 0.1.6 → 0.1.8 - Mend

create-aron-app 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (234) hide show

package/templates/apps/web/src/root.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+import "./app.css";
+import { clerkMiddleware, rootAuthLoader } from "@clerk/react-router/server";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+import { Toaster } from "sonner";
+import { protectedRoute } from "@/web/libs/server/protected";
+import { ApiAuthProvider } from "@/web/providers/api_auth_provider";
+import { GlobalProvider } from "@/web/providers/global_provider";
+import { NavigationLoadingBarProvider } from "@/web/providers/navigation_loading_bar_provider";
+import type { Route } from "./+types/root";
+export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware(), protectedRoute];
+export const loader = (args: Route.LoaderArgs) => rootAuthLoader(args);
+export const links: Route.LinksFunction = () => {
+  return [
+    {
+      rel: "preconnect",
+      href: "https://fonts.googleapis.com",
+    },
+    {
+      rel: "preconnect",
+      href: "https://fonts.gstatic.com",
+      crossOrigin: "anonymous",
+    },
+    {
+      rel: "stylesheet",
+      href: "https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap",
+    },
+  ];
+};
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+export default function App({ loaderData }: Route.ComponentProps) {
+  return (
+    <NavigationLoadingBarProvider>
+      <ApiAuthProvider loaderData={loaderData}>
+        <GlobalProvider>
+          <Outlet />
+          <Toaster richColors position="top-center" />
+        </GlobalProvider>
+      </ApiAuthProvider>
+    </NavigationLoadingBarProvider>
+  );
+}

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

@@ -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/web/src/routes/(dashboard)/(todos)/[id].tsx ADDED Viewed

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+import { createConvexClient } from "@/web/libs/server/auth";
+import { bootstrapSingleTodo } from "@/web/surfaces/todos/single_todo/bootstrap";
+import { SingleTodo } from "@/web/surfaces/todos/single_todo/single_todo";
+import type { Route } from "./+types/[id]";
+export async function loader(args: Route.LoaderArgs) {
+  const client = await createConvexClient(args);
+  return bootstrapSingleTodo({ params: args.params, client });
+}
+export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
+  return serverLoader();
+}
+export function meta({ loaderData: bootstrap }: Route.MetaArgs) {
+  if (!bootstrap) {
+    return [{ title: "Todo" }];
+  }
+  return [
+    { title: `${bootstrap.todo.title} - Todos` },
+    { name: "description", content: bootstrap.todo.description ?? "Todo details" },
+  ];
+}
+export default function TodoPage({ loaderData: bootstrap }: Route.ComponentProps) {
+  return <SingleTodo bootstrap={bootstrap} />;
+}

package/templates/apps/web/src/routes/(dashboard)/(todos)/index.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+import { createConvexClient } from "@/web/libs/server/auth";
+import { AllTodos } from "@/web/surfaces/todos/all_todos/all_todos";
+import { bootstrapAllTodos } from "@/web/surfaces/todos/all_todos/bootstrap";
+import type { Route } from "./+types/index";
+export async function loader(args: Route.LoaderArgs) {
+  const client = await createConvexClient(args);
+  return bootstrapAllTodos({ client });
+}
+export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
+  return serverLoader();
+}
+export function meta(_args: Route.MetaArgs) {
+  return [{ title: "Todos" }, { name: "description", content: "Manage your todos" }];
+}
+export default function TodosPage({ loaderData: bootstrap }: Route.ComponentProps) {
+  return <AllTodos bootstrap={bootstrap} />;
+}

package/templates/apps/web/src/routes/(dashboard)/(todos)/layout.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+import { Outlet } from "react-router";
+export default function TodosLayout() {
+  return <Outlet />;
+}

package/templates/apps/web/src/routes/(dashboard)/index.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+import { bootstrapHome } from "@/web/surfaces/home/bootstrap";
+import { Home } from "@/web/surfaces/home/home";
+import type { Route } from "./+types/index";
+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/web/src/routes/(dashboard)/layout.tsx ADDED Viewed

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

package/templates/apps/web/src/routes.ts ADDED Viewed

@@ -0,0 +1,14 @@
+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", [
+      layout("./routes/(dashboard)/(todos)/layout.tsx", [
+        index("./routes/(dashboard)/(todos)/index.tsx"),
+        route(":id", "./routes/(dashboard)/(todos)/[id].tsx"),
+      ]),
+    ]),
+  ]),
+] satisfies RouteConfig;

package/templates/apps/web/src/surfaces/home/bootstrap.ts ADDED Viewed

@@ -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/web/src/surfaces/home/home.tsx ADDED Viewed

@@ -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/web/src/surfaces/home/install.tsx ADDED Viewed

@@ -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/web/src/surfaces/home/layout.tsx ADDED Viewed

@@ -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/web/src/surfaces/home/main/create.tsx ADDED Viewed

@@ -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/web/src/surfaces/sidebar/install.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+/*
+ * 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.setNavLinks(createNavMain());
+  });
+  import("@/web/surfaces/sidebar/user_menu/create").then(({ createUserMenu }) => {
+    layout.setUserMenu(createUserMenu());
+  });
+};

package/templates/apps/web/src/surfaces/sidebar/layout.tsx ADDED Viewed

@@ -0,0 +1,119 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+import { Plus } from "lucide-react";
+import { action, observable } from "mobx";
+import { observer } from "mobx-react-lite";
+import type { ComponentType } from "react";
+import { Link } from "react-router";
+import {
+  Sidebar as BaseSidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/ui/base/side_bar";
+import { Skeleton } from "@/ui/base/skeleton";
+export class SidebarLayoutController {
+  @observable.ref
+  accessor NavLinks: ComponentType | undefined = undefined;
+  @observable.ref
+  accessor UserMenu: ComponentType | undefined = undefined;
+  @action
+  setNavLinks(NavLinks: ComponentType) {
+    this.NavLinks = NavLinks;
+  }
+  @action
+  setUserMenu(UserMenu: ComponentType) {
+    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
+            to="/"
+            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 NavLinks = layout.NavLinks;
+      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">
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  size="sm"
+                  tooltip="Create a new todo"
+                  className="bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90 active:bg-sidebar-primary/80 justify-center font-semibold shadow-sm"
+                  asChild
+                >
+                  <Link
+                    to="/todos"
+                    className="flex items-center gap-2"
+                  >
+                    <Plus className="size-4" />
+                    <span>New Todo</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarContent>
+          <SidebarFooter className="gap-2">
+            {NavLinks ? <NavLinks /> : <Skeleton className="h-10 bg-sidebar-accent" />}
+            {UserMenu ? <UserMenu /> : <Skeleton className="h-12 bg-sidebar-accent" />}
+          </SidebarFooter>
+        </BaseSidebar>
+      );
+    }),
+  };
+};
+export type SidebarLayoutControllerType = SidebarLayoutController;

package/templates/apps/web/src/surfaces/sidebar/nav_main/create.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+import { CheckSquare, Home } from "lucide-react";
+import { observer } from "mobx-react-lite";
+import { useLocation } from "react-router";
+import { useSidebar } from "@/ui/base/side_bar";
+import { NavMain } from "@/web/surfaces/sidebar/nav_main/nav_main";
+const NAV_ITEMS = [
+  { to: "/", label: "Home", icon: Home, exact: true },
+  { to: "/todos", label: "Todos", icon: CheckSquare, exact: false },
+] as const;
+export const createNavMain = () => {
+  return observer(() => {
+    const location = useLocation();
+    const { setOpenMobile } = useSidebar();
+    return (
+      <NavMain
+        items={[...NAV_ITEMS]}
+        pathname={location.pathname}
+        onNavigate={() => setOpenMobile(false)}
+      />
+    );
+  });
+};

package/templates/apps/web/src/surfaces/sidebar/nav_main/nav_main.tsx ADDED Viewed

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+import type { LucideIcon } from "lucide-react";
+import { Link } from "react-router";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/ui/base/side_bar";
+export type NavMainItem = {
+  to: string;
+  label: string;
+  icon: LucideIcon;
+  exact: boolean;
+};
+type NavMainProps = {
+  items: NavMainItem[];
+  pathname: string;
+  onNavigate: () => void;
+};
+export const NavMain = ({ items, pathname, onNavigate }: NavMainProps) => {
+  return (
+    <SidebarMenu>
+      {items.map(({ to, label, icon: Icon, exact }) => {
+        const isActive = exact ? pathname === to : pathname.startsWith(to);
+        return (
+          <SidebarMenuItem key={to}>
+            <SidebarMenuButton isActive={isActive} asChild onClick={onNavigate}>
+              <Link to={to}>
+                <Icon className="size-4" />
+                <span>{label}</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        );
+      })}
+    </SidebarMenu>
+  );
+};

package/templates/apps/web/src/surfaces/sidebar/sidebar.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+import { useEffect, useMemo } from "react";
+import { installSidebar } from "@/web/surfaces/sidebar/install";
+import { createSidebarLayout } from "@/web/surfaces/sidebar/layout";
+export const Sidebar = () => {
+  const { layout, Layout } = useMemo(() => createSidebarLayout(), []);
+  useEffect(() => {
+    installSidebar({ layout });
+  }, [layout]);
+  return <Layout />;
+};

package/templates/apps/web/src/surfaces/sidebar/user_menu/create.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+import { useUser } from "@clerk/react-router";
+import { observer } from "mobx-react-lite";
+import { UserMenu } from "@/web/surfaces/sidebar/user_menu/user_menu";
+export const createUserMenu = () => {
+  return observer(() => {
+    const { user, isLoaded } = useUser();
+    if (isLoaded && !user) {
+      return null;
+    }
+    return (
+      <UserMenu
+        isLoaded={isLoaded}
+        fullName={user?.fullName}
+        email={user?.primaryEmailAddress?.emailAddress}
+      />
+    );
+  });
+};

package/templates/{react-router/src/layouts/sidebar/sidebar_aside → apps/web/src/surfaces/sidebar/user_menu}/user_menu.tsx RENAMED Viewed

@@ -1,11 +1,19 @@
-import { UserButton, useUser } from "@clerk/react-router";
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+import { UserButton } from "@clerk/react-router";
 import { SidebarMenu, SidebarMenuItem } from "@/ui/base/side_bar";
 import { Skeleton } from "@/ui/base/skeleton";
-export const UserMenu = () => {
-  const { user, isLoaded } = useUser();
+type UserMenuProps = {
+  isLoaded: boolean;
+  fullName: string | null | undefined;
+  email: string | null | undefined;
+};
+export const UserMenu = ({ isLoaded, fullName, email }: UserMenuProps) => {
   if (!isLoaded) {
     return (
       <SidebarMenu>
@@ -16,18 +24,14 @@ export const UserMenu = () => {
     );
   }
-  if (!user) return null;
   return (
     <SidebarMenu>
       <SidebarMenuItem className="w-full">
         <div className="flex w-full items-center gap-2 rounded-md border px-2 py-2">
           <UserButton />
           <div className="flex min-w-0 flex-col">
-            <span className="truncate text-sm font-medium">{user.fullName}</span>
-            <span className="truncate text-xs text-muted-foreground">
-              {user.primaryEmailAddress?.emailAddress}
-            </span>
+            <span className="truncate text-sm font-medium">{fullName}</span>
+            <span className="truncate text-xs text-muted-foreground">{email}</span>
           </div>
         </div>
       </SidebarMenuItem>

package/templates/apps/web/src/surfaces/todos/all_todos/all_todos.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+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 { layout, Layout } = useMemo(createLayout, []);
+  const installed = useRef(false);
+  if (!installed.current) {
+    installed.current = true;
+    installAllTodos({ layout, bootstrap });
+  }
+  return <Layout />;
+};