create-aron-app 0.1.6 → 0.1.7

package/templates/{_base/emails → emails}/project.json

@@ -1,5 +1,5 @@
 {
-  "name": "project:emails",
+  "name": "emails",
   "$schema": "../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "emails",
   "projectType": "library",

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

@@ -24,6 +24,17 @@
           "watchDepsName": "watch-deps"
         }
       }
+    },
+    {
+      "plugin": "@nx/next/plugin",
+      "options": {
+        "startTargetName": "start",
+        "buildTargetName": "build",
+        "devTargetName": "dev",
+        "serveStaticTargetName": "serve-static",
+        "buildDepsTargetName": "build-deps",
+        "watchDepsTargetName": "watch-deps"
+      }
     }
   ]
 }

package/templates/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@/source",
+  "version": "0.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {},
+  "dependencies": {
+    "@clerk/nextjs": "^6.33.7",
+    "@clerk/react-router": "^3.0.4",
+    "@convex-dev/react-query": "^0.0.0-alpha.8",
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-aspect-ratio": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-hover-card": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@react-router/node": "^7.13.1",
+    "@react-router/serve": "^7.13.1",
+    "@stepperize/react": "^5.1.5",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tanstack/react-query": "^5.66.0",
+    "@tanstack/react-store": "^0.7.0",
+    "@tanstack/react-table": "^8.20.6",
+    "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.0.4",
+    "convex": "^1.28.0",
+    "convex-ents": "^0.16.0",
+    "convex-helpers": "^0.1.114",
+    "dayjs": "^1.11.13",
+    "hono": "^4.12.9",
+    "isbot": "^5",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "^0.469.0",
+    "mobx": "^6.15.0",
+    "mobx-react": "^9.2.1",
+    "mobx-react-lite": "^4.1.1",
+    "nanoid": "^5.1.6",
+    "next": "~15.1.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-resizable-panels": "^4.7.2",
+    "react-router": "^7.5.0",
+    "sharp": "^0.33.5",
+    "sonner": "^2.0.1",
+    "ts-essentials": "^10.1.1",
+    "tw-animate-css": "^1.3.8",
+    "zod": "^3"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.2.3",
+    "@nx/js": "20.6.2",
+    "@nx/next": "20.6.2",
+    "@nx/workspace": "20.6.2",
+    "@react-router/dev": "^7.5.0",
+    "@swc-node/register": "~1.9.1",
+    "@swc/core": "~1.5.7",
+    "@swc/helpers": "~0.5.11",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/vite": "^4.1.11",
+    "@types/react": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@types/react-dom": "19.0.0",
+    "autoprefixer": "10.4.13",
+    "nx": "20.6.2",
+    "postcss": "8.4.38",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.1.13",
+    "tailwindcss-animate": "^1.0.7",
+    "tslib": "^2.3.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.3.2",
+    "vite-plugin-devtools-json": "^1.0.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "workspaces": [
+    "apps/*"
+  ]
+}

package/templates/{_base/tsconfig.base.json → tsconfig.base.json}

@@ -21,13 +21,16 @@
       "@/ui/*": ["./shared/ui/src/*"],
       "@/utils/*": ["./shared/utils/src/*"],
       "@/emails/*": ["./emails/*"],
-      "@/web/*": ["./apps/web/src/*"]
+      "@/web/*": ["./apps/web/src/*", "./apps/nextjs/src/*", "./apps/react-router/src/*"],
+      "@/router/*": ["./apps/react-router/.react-router/types/*"],
     }
   },
   "exclude": ["node_modules", "dist", "build", "public"],
   "include": [
     "./apps/api/src/**/*",
     "./apps/web/src/**/*",
+    "./apps/nextjs/src/**/*",
+    "./apps/react-router/src/**/*",
     "./shared/**/*",
     "./tsconfig.json"
   ]

package/templates/_base/.cursor/rules/frontend_rules.mdc

@@ -1,268 +0,0 @@
----
-description: Frontend coding standards for the Next.js web app. Covers TanStack Query + Convex data fetching, component structure, form handling, and UI patterns.
-globs: apps/web/**/*.tsx,apps/web/**/*.ts
----
-
-# Frontend Rules
-
-## Surfaces & File Structure
-
-### Surfaces as Route Entry Points
-
-Every route must have a corresponding **surface** — the single entry point for that page. Surfaces are isolated vertical slices: they own their data fetching and pass data strictly downward to child components. Pages are thin wrappers that simply render the surface.
-
-```
-app/(dashboard)/todos/page.tsx         → renders <AllTodosSurface />
-app/(dashboard)/todos/[id]/page.tsx    → renders <SingleTodoSurface />
-```
-
-```typescript
-// app/(dashboard)/todos/page.tsx
-import { AllTodosSurface } from "@/surfaces/todos/all_todos_surface";
-
-export default function TodosPage() {
-  return <AllTodosSurface />;
-}
-```
-
-### Naming Convention
-
-All file names must be **snake_case** (e.g. `all_todos_surface.tsx`, `create_todo_sheet.tsx`).
-
-Use **`All`** for list pages and **`Single`** for id-specific pages — both in the surface name and the file name:
-
-| Route | Surface component | File |
-|---|---|---|
-| `/todos` | `AllTodosSurface` | `surfaces/todos/all_todos_surface.tsx` |
-| `/todos/[id]` | `SingleTodoSurface` | `surfaces/todos/single_todo_surface.tsx` |
-
-### Component Placement
-
-| What | Where |
-|---|---|
-| Shared components (used across surfaces) | `src/ui/` |
-| Components scoped to one surface | inside that surface's folder |
-| Multiple shared components within a surface | `src/surfaces/<feature>/ui/` subfolder |
-| Providers | `src/providers/` |
-
-```
-src/
-  surfaces/
-    todos/
-      all_todos_surface.tsx
-      single_todo_surface.tsx
-      ui/                        ← shared components for this surface only
-        todo_card.tsx
-        todo_filters.tsx
-  ui/                            ← truly shared across the app
-    sidebar/
-      sidebar.tsx
-  providers/
-    convex_provider.tsx
-```
-
-
-
-
-
-## Data Fetching with TanStack Query
-
-**ALWAYS use TanStack Query for Convex queries and mutations**, never the direct Convex hooks.
-
-### Queries
-
-```typescript
-import { useQuery } from "@tanstack/react-query";
-import { convexQuery } from "@convex-dev/react-query";
-import { api } from "@/api/_generated/api";
-
-// Basic query
-const { data: todos } = useQuery(
-  convexQuery(api.todos.crud.listTodos, { userId: user.id }),
-);
-
-// Conditional / skipped query
-const { data: todos } = useQuery(
-  convexQuery(
-    api.todos.crud.listTodos,
-    user?.id ? { userId: user.id } : "skip"
-  ),
-);
-```
-
-### Mutations
-
-```typescript
-import { useMutation } from "@tanstack/react-query";
-import { useConvexMutation } from "@convex-dev/react-query";
-import { api } from "@/api/_generated/api";
-
-const { mutate, isPending } = useMutation({
-  mutationFn: useConvexMutation(api.todos.crud.createTodo),
-});
-
-const handleButtonClick = () => {
-  mutate({ title, userId });
-}
-
-```
-
-## Component Structure
-
-### Declaration
-
-Always export components as **const arrow functions**:
-
-```typescript
-// Good
-export const ComponentName = ({ prop1, prop2 }: ComponentNameProps) => {
-  return <div />;
-};
-
-// Bad
-export function ComponentName({ prop1, prop2 }: ComponentNameProps) {
-  return <div />;
-}
-```
-
-### Props Types
-
-Always define props as a **separate named type** above the component:
-
-```typescript
-type ComponentNameProps = {
-  entityId: Id<"entities">;
-  onComplete: () => void;
-};
-
-export const ComponentName = ({ entityId, onComplete }: ComponentNameProps) => {
-  // ...
-};
-```
-
-## Form Handling
-
-Use `react-hook-form` + `zod` + TanStack `useMutation`. Standard pattern:
-
-```typescript
-export const CreateEntityForm = ({ onSuccess }: CreateEntityFormProps) => {
-  const form = useForm<FormSchema>({
-    resolver: zodResolver(formSchema),
-    defaultValues: { title: "" },
-  });
-
-  const { mutate: createEntity, isPending } = useMutation({
-    mutationFn: useConvexMutation(api.entities.crud.createEntity),
-    onSuccess,
-  });
-
-  const handleSubmit = form.handleSubmit((values) => {
-    createEntity(values);
-  });
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={handleSubmit}
-        className="space-y-4"
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            handleSubmit();
-          }
-        }}
-      >
-        <FormField
-          control={form.control}
-          name="title"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Title</FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit" disabled={isPending}>
-          {isPending ? "Saving..." : "Save"}
-        </Button>
-      </form>
-    </Form>
-  );
-};
-```
-
-Key rules:
-- Store `form.handleSubmit(...)` in a `handleSubmit` const
-- Include `onKeyDown` to prevent implicit form submission on Enter
-- Use `isPending` for loading states
-
-## Sheet / Dialog Components
-
-```typescript
-export const CreateEntitySheet = ({ entityId }: CreateEntitySheetProps) => {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button>
-          <PlusIcon className="mr-2 h-4 w-4" />
-          Add Entity
-        </Button>
-      </SheetTrigger>
-      <SheetContent className="sm:max-w-[500px]">
-        <DialogHeader>
-          <DialogTitle>Add Entity</DialogTitle>
-          <DialogDescription>Fill in the details below.</DialogDescription>
-        </DialogHeader>
-        {/* form content */}
-        <DialogFooter>
-          <Button type="submit">Save</Button>
-        </DialogFooter>
-      </SheetContent>
-    </Sheet>
-  );
-};
-```
-
-- Use `SheetContent` with `DialogHeader` / `DialogTitle` / `DialogDescription` for consistent styling
-- Use `DialogFooter` for action buttons
-
-## Import Aliases
-
-Always use alias-based imports — never relative paths outside the same directory:
-
-```typescript
-import { api } from "@/api/_generated/api";
-import { Button } from "@/ui/base/button";
-import { SomeUtil } from "@/utils/some_util";
-```
-
-
-## Routing
-
-The app uses Next.js App Router:
-
-| Path | Description |
-|---|---|
-| `(auth)/sign-in` | Clerk sign-in (public) |
-| `(dashboard)/` | Authenticated area — wrapped in sidebar layout |
-
-Add new authenticated pages inside `apps/web/src/app/(dashboard)/`.
-
-## Sidebar Navigation
-
-To add a nav item, update `apps/web/src/components/sidebar/sidebar.tsx`:
-
-```typescript
-export const nav = {
-  main: [
-    { id: "dashboard", title: "Dashboard", url: "/", icon: HomeIcon },
-    { id: "my-feature", title: "My Feature", url: "/my-feature", icon: SomeIcon },
-  ],
-  secondary: [
-    { id: "settings", title: "Settings", url: "/settings", icon: SettingsIcon },
-  ],
-};
-```

package/templates/_base/.env.convex.example

@@ -1,3 +0,0 @@
-CLERK_SECRET_KEY=
-CLERK_JWT_ISSUER_DOMAIN=
-RESEND_API_KEY=

package/templates/_base/_gitignore

@@ -1,58 +0,0 @@
-# See https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
-
-# compiled output
-dist
-tmp
-out-tsc
-
-# dependencies
-node_modules
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-
-# misc
-.dist
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-testem.log
-/typings
-
-# environment variables
-.env
-.env.local
-.env.convex
-
-# System Files
-.DS_Store
-Thumbs.db
-
-.nx/cache
-.nx/workspace-data
-
-# Next.js
-.next
-out
-
-.cursor/rules/nx-rules.mdc
-.github/instructions/nx.instructions.md
-
-# clerk configuration (can include secrets)
-/.clerk/

package/templates/_base/package.json

@@ -1,73 +0,0 @@
-{
-	"name": "@/source",
-	"version": "0.0.0",
-	"license": "MIT",
-	"private": true,
-	"scripts": {},
-	"dependencies": {
-		"@convex-dev/react-query": "^0.0.0-alpha.8",
-		"@hookform/resolvers": "^3.9.1",
-		"@radix-ui/react-accordion": "^1.2.2",
-		"@radix-ui/react-alert-dialog": "^1.1.4",
-		"@radix-ui/react-aspect-ratio": "^1.1.1",
-		"@radix-ui/react-checkbox": "^1.1.3",
-		"@radix-ui/react-collapsible": "^1.1.2",
-		"@radix-ui/react-dropdown-menu": "^2.1.4",
-		"@radix-ui/react-hover-card": "^1.1.4",
-		"@radix-ui/react-label": "^2.1.1",
-		"@radix-ui/react-popover": "^1.1.4",
-		"@radix-ui/react-progress": "^1.1.1",
-		"@radix-ui/react-radio-group": "^1.2.2",
-		"@radix-ui/react-scroll-area": "^1.2.2",
-		"@radix-ui/react-select": "^2.1.4",
-		"@radix-ui/react-separator": "^1.1.1",
-		"@radix-ui/react-slider": "^1.2.2",
-		"@radix-ui/react-switch": "^1.1.2",
-		"@radix-ui/react-tabs": "^1.1.2",
-		"@radix-ui/react-tooltip": "^1.1.6",
-		"@stepperize/react": "^5.1.5",
-		"@tailwindcss/typography": "^0.5.16",
-		"@tanstack/react-query": "^5.66.0",
-		"@tanstack/react-store": "^0.7.0",
-		"@tanstack/react-table": "^8.20.6",
-		"class-variance-authority": "^0.7.1",
-		"cmdk": "^1.0.4",
-		"convex": "^1.28.0",
-		"convex-ents": "^0.16.0",
-		"convex-helpers": "^0.1.104",
-		"dayjs": "^1.11.13",
-		"lodash-es": "^4.17.21",
-		"lucide-react": "^0.469.0",
-		"nanoid": "^5.1.6",
-		"react": "19.0.0",
-		"react-dom": "19.0.0",
-		"react-hook-form": "^7.54.2",
-		"react-resizable-panels": "^4.7.2",
-		"sonner": "^2.0.1",
-		"ts-essentials": "^10.1.1",
-		"tw-animate-css": "^1.3.8",
-		"zod": "^3"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "^2.2.3",
-		"@nx/js": "20.6.2",
-		"@nx/workspace": "20.6.2",
-		"@swc-node/register": "~1.9.1",
-		"@swc/core": "~1.5.7",
-		"@swc/helpers": "~0.5.11",
-		"@tailwindcss/postcss": "^4.1.11",
-		"@types/react": "19.0.0",
-		"@types/react-dom": "19.0.0",
-		"autoprefixer": "10.4.13",
-		"nx": "20.6.2",
-		"postcss": "8.4.38",
-		"tailwind-merge": "^3.0.2",
-		"tailwindcss": "^4.1.13",
-		"tailwindcss-animate": "^1.0.7",
-		"tslib": "^2.3.0",
-		"typescript": "~5.7.2"
-	},
-	"workspaces": [
-		"apps/*"
-	]
-}

package/templates/nextjs/.env.example

@@ -1,8 +0,0 @@
-# Convex
-CONVEX_DEPLOYMENT=
-CONVEX_DEPLOYMENT_URL=
-NEXT_PUBLIC_CONVEX_URL=
-
-# Authentication
-CLERK_SECRET_KEY=
-NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=

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

@@ -1,27 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2025.
- */
-
-import { SidebarInset, SidebarProvider } from "@/ui/base/side_bar";
-import { Sidebar as AppSidebar } from "@/web/ui/sidebar/sidebar";
-
-type DashboardLayoutProps = {
-  children: React.ReactNode;
-  modal: React.ReactNode;
-};
-
-export default function DashboardLayout({ children }: DashboardLayoutProps) {
-  return (
-    <SidebarProvider
-      style={
-        {
-          "--sidebar-width": "calc(var(--spacing) * 45)",
-          "--header-height": "calc(var(--spacing) * 12)",
-        } as React.CSSProperties
-      }
-    >
-      <AppSidebar variant="inset" />
-      <SidebarInset>{children}</SidebarInset>
-    </SidebarProvider>
-  );
-}

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

@@ -1,5 +0,0 @@
-import { HomeSurface } from "@/web/surfaces/home_surface";
-
-export default function HomePage() {
-  return <HomeSurface />;
-}

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

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

package/templates/nextjs/src/middleware.ts

@@ -1,18 +0,0 @@
-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/nextjs/src/surfaces/home_surface.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import { useUser } from "@clerk/nextjs";
-import Link from "next/link";
-
-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 href="/todos">View Todos</Link>
-      </Button>
-    </main>
-  );
-};