create-aron-app 0.1.0 → 0.1.1

package/templates/nextjs/src/ui/sidebar/sidebar.tsx

@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { UserButton, useUser } from "@clerk/nextjs";
+import {
+	CheckSquareIcon,
+	HomeIcon,
+	type LucideIcon,
+	SettingsIcon,
+} from "lucide-react";
+import Link from "next/link";
+
+import {
+	Sidebar as BaseSidebar,
+	SidebarHeader as BaseSidebarHeader,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarMenu,
+	SidebarMenuItem,
+} from "@/ui/base/side_bar";
+import { Skeleton } from "@/ui/base/skeleton";
+import { NavLink } from "@/web/ui/sidebar/nav_link";
+
+export type NavItem = {
+	id: string;
+	title: string;
+	url: string;
+	icon: LucideIcon;
+};
+
+export const nav: {
+	main: NavItem[];
+	secondary: NavItem[];
+} = {
+	main: [
+		{
+			id: "dashboard",
+			title: "Dashboard",
+			url: "/",
+			icon: HomeIcon,
+		},
+		{
+			id: "todos",
+			title: "Todos",
+			url: "/todos",
+			icon: CheckSquareIcon,
+		},
+	],
+	secondary: [
+		{
+			id: "settings",
+			title: "Settings",
+			url: "/settings",
+			icon: SettingsIcon,
+		},
+	],
+};
+
+export const Sidebar = ({
+	...props
+}: React.ComponentProps<typeof BaseSidebar>) => {
+	const user = useUser();
+
+	return (
+		<BaseSidebar collapsible="offcanvas" {...props}>
+			<BaseSidebarHeader>
+				<SidebarMenu>
+					<SidebarMenuItem>
+						<Link href="/" className="flex flex-row items-center gap-3 w-full">
+							<span className="truncate font-medium">App</span>
+						</Link>
+					</SidebarMenuItem>
+				</SidebarMenu>
+			</BaseSidebarHeader>
+			<SidebarContent>
+				<SidebarGroup className="pt-0">
+					<SidebarGroupContent className="flex flex-col gap-2">
+						<SidebarMenu>
+							{nav.main.map((item) => (
+								<NavLink key={item.id} item={item} />
+							))}
+						</SidebarMenu>
+					</SidebarGroupContent>
+				</SidebarGroup>
+			</SidebarContent>
+			<SidebarFooter className="gap-0 p-2">
+				<SidebarGroup>
+					<SidebarGroupContent>
+						<SidebarMenu>
+							{nav.secondary.map((item) => (
+								<NavLink key={item.id} item={item} />
+							))}
+						</SidebarMenu>
+					</SidebarGroupContent>
+				</SidebarGroup>
+				<SidebarMenu>
+					{user.isLoaded ? (
+						<SidebarMenuItem className="w-full">
+							<div className="flex items-start gap-2 border rounded-md shadow-sm px-2 py-2 w-full">
+								<UserButton />
+								<div className="flex flex-col gap-0 text-left leading-tight w-fit">
+									<span className="text-sm font-medium break-words truncate">
+										{user.user?.fullName}
+									</span>
+									<span className="truncate text-xs font-light">
+										{user.user?.emailAddresses[0].emailAddress}
+									</span>
+								</div>
+							</div>
+						</SidebarMenuItem>
+					) : (
+						<SidebarMenuItem className="w-full">
+							<Skeleton className="h-12 w-full rounded-lg border" />
+						</SidebarMenuItem>
+					)}
+				</SidebarMenu>
+			</SidebarFooter>
+		</BaseSidebar>
+	);
+};

package/templates/nextjs/src/utils/font.ts

@@ -0,0 +1,9 @@
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export const fontCn = `${inter.className}`;

package/templates/nextjs/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "noEmit": true,
+    "emitDeclarationOnly": false,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "plugins": [{"name": "next"}],
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo"
+  },
+  "include": [
+    ".next/types/**/*.ts",
+    "index.d.ts",
+    "next-env.d.ts",
+    "next-env.d.ts",
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "../../dist/apps/web/.next/types/**/*.ts",
+    "../../apps/web/dist/.next/types/**/*.ts"
+  ],
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "node_modules",
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    ".next",
+    "eslint.config.js",
+    "eslint.config.cjs",
+    "eslint.config.mjs"
+  ]
+}

package/templates/react-router/.env.example

@@ -0,0 +1,8 @@
+# Convex
+CONVEX_DEPLOYMENT=
+CONVEX_DEPLOYMENT_URL=
+VITE_CONVEX_URL=
+
+# Authentication
+CLERK_SECRET_KEY=
+VITE_CLERK_PUBLISHABLE_KEY=

package/templates/react-router/postcss.config.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) Sales Star Limited 2026.
+ */
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    autoprefixer: {},
+  },
+};

package/templates/react-router/project.json

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

package/templates/react-router/react-router.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  appDirectory: "src",
+  ssr: false,
+  future: {
+    v8_middleware: true,
+  },
+} satisfies Config;

package/templates/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/src/components/error_boundary.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) SalesStar Limited 2026.
+ */
+
+import type { Route } from "apps/web/.react-router/types/app/+types/root";
+import { isRouteErrorResponse } from "react-router";
+
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404 ? "The requested page could not be found." : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+};

package/templates/react-router/src/layouts/sidebar/sidebar_aside/sidebar_aside.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { CheckSquare, Home } from "lucide-react";
+import { Link, useLocation } from "react-router";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/ui/base/side_bar";
+import { cn } from "@/ui/base/utils";
+import { UserMenu } from "@/web/layouts/sidebar/sidebar_aside/user_menu";
+
+type SidebarAsideProps = React.ComponentProps<typeof Sidebar>;
+
+const NAV_ITEMS = [
+  { to: "/", label: "Home", icon: Home, exact: true },
+  { to: "/todos", label: "Todos", icon: CheckSquare, exact: false },
+];
+
+export const SidebarAside = ({ className, ...props }: SidebarAsideProps) => {
+  const { setOpenMobile } = useSidebar();
+  const location = useLocation();
+
+  return (
+    <Sidebar
+      data-slot="app-sidebar"
+      className={cn("border-r border-sidebar-border", className)}
+      collapsible="offcanvas"
+      {...props}
+    >
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <Link to="/" onClick={() => setOpenMobile(false)}>
+                <div className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground text-sm font-bold">
+                  A
+                </div>
+                <span className="font-semibold">My App</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent className="px-2">
+        <SidebarMenu>
+          {NAV_ITEMS.map(({ to, label, icon: Icon, exact }) => {
+            const isActive = exact ? location.pathname === to : location.pathname.startsWith(to);
+            return (
+              <SidebarMenuItem key={to}>
+                <SidebarMenuButton isActive={isActive} asChild onClick={() => setOpenMobile(false)}>
+                  <Link to={to}>
+                    <Icon className="size-4" />
+                    <span>{label}</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            );
+          })}
+        </SidebarMenu>
+      </SidebarContent>
+      <SidebarFooter>
+        <UserMenu />
+      </SidebarFooter>
+    </Sidebar>
+  );
+};

package/templates/react-router/src/layouts/sidebar/sidebar_aside/user_menu.tsx

@@ -0,0 +1,36 @@
+import { UserButton, useUser } 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();
+
+  if (!isLoaded) {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem className="w-full">
+          <Skeleton className="h-12 w-full rounded-lg" />
+        </SidebarMenuItem>
+      </SidebarMenu>
+    );
+  }
+
+  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>
+          </div>
+        </div>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};

package/templates/react-router/src/layouts/sidebar/sidebar_layout.tsx

@@ -0,0 +1,22 @@
+import { SidebarInset, SidebarProvider } from "@/ui/base/side_bar";
+import { SidebarAside } from "@/web/layouts/sidebar/sidebar_aside/sidebar_aside";
+
+type SideBarLayoutProps = {
+  children: React.ReactNode;
+};
+
+export const SideBarLayout = ({ children }: SideBarLayoutProps) => {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 45)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties
+      }
+    >
+      <SidebarAside variant="inset" />
+      <SidebarInset>{children}</SidebarInset>
+    </SidebarProvider>
+  );
+};

package/templates/react-router/src/providers/api_auth_provider.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { ClerkProvider, useAuth } from "@clerk/react-router";
+import { ConvexQueryClient } from "@convex-dev/react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConvexReactClient } from "convex/react";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+
+const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
+const convexQueryClient = new ConvexQueryClient(convex);
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      queryFn: convexQueryClient.queryFn(),
+      gcTime: 0,
+      staleTime: 0,
+    },
+  },
+});
+
+convexQueryClient.connect(queryClient);
+
+type ApiAuthProviderProps = {
+  children: React.ReactNode;
+};
+
+export const ApiAuthProvider = ({ children }: ApiAuthProviderProps) => {
+  return (
+    <ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY as string}>
+      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      </ConvexProviderWithClerk>
+    </ClerkProvider>
+  );
+};

package/templates/react-router/src/root.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import "./app.css";
+
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+import { Toaster } from "sonner";
+
+import { ApiAuthProvider } from "@/web/providers/api_auth_provider";
+
+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() {
+  return (
+    <ApiAuthProvider>
+      <Outlet />
+      <Toaster richColors position="top-center" />
+    </ApiAuthProvider>
+  );
+}

package/templates/react-router/src/routes/auth/layout.tsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { Outlet } from "react-router";
+
+export default function AuthLayout() {
+  return (
+    <div className="flex flex-1 items-center justify-center h-svh">
+      <Outlet />
+    </div>
+  );
+}

package/templates/react-router/src/routes/auth/sign-in.tsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { SignIn } from "@clerk/react-router";
+
+export function meta() {
+  return [{ title: "Sign In", description: "Sign In to your account" }];
+}
+
+export default function SignInPage() {
+  return <SignIn routing="path" path="/sign-in" />;
+}

package/templates/react-router/src/routes/index.tsx

@@ -0,0 +1,9 @@
+import { HomeSurface } from "@/web/surfaces/home_surface";
+
+export function meta() {
+  return [{ title: "Home" }, { name: "description", content: "Home" }];
+}
+
+export default function Home() {
+  return <HomeSurface />;
+}

package/templates/react-router/src/routes/layout.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) SalesStar Limited 2026.
+ */
+
+import { useAuth } from "@clerk/react-router";
+import { Navigate, Outlet } from "react-router";
+
+import { SideBarLayout } from "@/web/layouts/sidebar/sidebar_layout";
+
+export default function Layout() {
+  const { isLoaded, isSignedIn } = useAuth();
+
+  if (!isLoaded) {
+    return null;
+  }
+
+  if (!isSignedIn) {
+    return <Navigate to="/sign-in" replace />;
+  }
+
+  return (
+    <SideBarLayout>
+      <Outlet />
+    </SideBarLayout>
+  );
+}

package/templates/react-router/src/routes/todos/[id].tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { useParams } from "react-router";
+
+import type { TodoId } from "@/api/todos/types";
+import { SingleTodoSurface } from "@/web/surfaces/todos/single_todo_surface";
+
+export function meta() {
+  return [{ title: "Todo" }, { name: "description", content: "Todo" }];
+}
+
+export default function TodoPage() {
+  const { id } = useParams<{ id: TodoId }>();
+
+  if (!id) {
+    return <div>Todo not found</div>;
+  }
+
+  return <SingleTodoSurface todoId={id} />;
+}

package/templates/react-router/src/routes/todos/index.tsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { AllTodosSurface } from "@/web/surfaces/todos/all_todos_surface";
+
+export function meta() {
+  return [{ title: "Todos" }, { name: "description", content: "Todos" }];
+}
+
+export default function TodosPage() {
+  return <AllTodosSurface />;
+}

package/templates/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.tsx")]),
+  layout("./routes/layout.tsx", [
+    index("./routes/index.tsx"),
+    ...prefix("todos", [
+      index("./routes/todos/index.tsx"),
+      route(":id", "./routes/todos/[id].tsx"),
+    ]),
+  ]),
+] satisfies RouteConfig;

package/templates/react-router/src/surfaces/home_surface.tsx

@@ -0,0 +1,20 @@
+import { useUser } from "@clerk/react-router";
+import { Link } from "react-router";
+
+import { Button } from "@/ui/base/button";
+
+export const HomeSurface = () => {
+  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>
+  );
+};