create-aron-app 0.1.6 → 0.1.8

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/.github/workflows/ci.yml

@@ -1,29 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-permissions:
-  actions: read
-  contents: read
-
-jobs:
-  main:
-    name:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: latest
-
-      #      - run: bun install --no-cache
-      #      - uses: nrwl/nx-set-shas@v4
-
-      # - run: bun nx affected -t build

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/_base/shared/utils/src/convex.ts

@@ -1,3 +0,0 @@
-import { ConvexClient } from "convex/browser";
-
-export const convex = new ConvexClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

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/index.d.ts

@@ -1,6 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-declare module '*.svg' {
-  const content: any;
-  export const ReactComponent: any;
-  export default content;
-}

package/templates/nextjs/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextjs/next.config.js

@@ -1,22 +0,0 @@
-//@ts-check
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { composePlugins, withNx } = require("@nx/next");
-
-/**
- * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
- **/
-const nextConfig = {
-  nx: {
-    // Set this to true if you would like to use SVGR
-    // See: https://github.com/gregberge/svgr
-    svgr: false,
-  },
-};
-
-const plugins = [
-  // Add more Next.js plugins to this list if needed.
-  withNx,
-];
-
-module.exports = composePlugins(...plugins)(nextConfig);

package/templates/nextjs/postcss.config.js

@@ -1,17 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2025.
- */
-
-const { join } = require("node:path");
-
-// 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
-
-module.exports = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-    autoprefixer: {},
-  },
-};

package/templates/nextjs/project.json

@@ -1,22 +0,0 @@
-{
-  "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": {
-        "command": "bunx next dev apps/web --port 5001"
-      }
-    },
-    "build": {
-      "executor": "@nx/next:build",
-      "options": {
-        "root": "apps/web",
-        "outputPath": "dist/apps/web"
-      }
-    }
-  }
-}

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

@@ -1,21 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2025.
- */
-
-import "../app.css";
-
-import { Toaster } from "sonner";
-
-
-type RootLayoutProps = {
-  children: React.ReactNode;
-};
-
-export default function AuthLayout({ children }: RootLayoutProps) {
-  return (
-    <main className="flex min-h-screen flex-col justify-center items-center overflow-hidden">
-      {children}
-      <Toaster />
-    </main>
-  );
-}

package/templates/nextjs/src/app/(auth)/not-allowed/page.tsx

@@ -1,22 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2025.
- */
-
-import Link from "next/link";
-
-export const metadata: Metadata = {
-  title: "Not Allowed",
-  description: "You are not allowed to access this page.",
-};
-
-export default async function NotAllowed() {
-  return (
-    <div className="flex flex-col items-center justify-center h-screen">
-      <h1 className="text-2xl font-bold">Not Allowed</h1>
-      <p className="text-sm text-gray-500">You are not allowed to access this page.</p>
-      <Link href="/sign-in" className="text-blue-500">
-        Continue to login page
-      </Link>
-    </div>
-  );
-}

package/templates/nextjs/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -1,15 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2025.
- */
-
-import { SignIn } from "@clerk/nextjs";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Sign In",
-  description: "Sign In to your account",
-};
-
-export default function LoginPage() {
-  return <SignIn withSignUp={true} />;
-}

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/[id]/page.tsx

@@ -1,23 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-import type { Metadata } from "next";
-
-import type { TodoId } from "@/api/todos/types";
-import { SingleTodoSurface } from "@/web/surfaces/todos/single_todo_surface";
-
-type SingleTodoPageProps = {
-  params: Promise<{ id: TodoId }>;
-};
-
-export const metadata: Metadata = {
-  title: "Todo",
-  description: "Todo",
-};
-
-export default async function SingleTodoPage({ params }: SingleTodoPageProps) {
-  const { id } = await params;
-
-  return <SingleTodoSurface todoId={id} />;
-}

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/app/app.css

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