create-aron-app 0.1.5 → 0.1.7

package/templates/nextjs/src/surfaces/todos/all_todos_surface.tsx

@@ -1,97 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-"use client";
-
-import { useUser } from "@clerk/nextjs";
-import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { Trash2 } from "lucide-react";
-import Link from "next/link";
-
-import { api } from "@/api/_generated/api";
-import type { Id } from "@/api/_generated/dataModel";
-import { Button } from "@/ui/base/button";
-import { Checkbox } from "@/ui/base/checkbox";
-import { Spinner } from "@/ui/base/spinner";
-import { CreateTodoSheet } from "@/web/surfaces/todos/create_todo_sheet";
-
-export const AllTodosSurface = () => {
-	const { user } = useUser();
-
-	const { data: todos, isPending } = useQuery(
-		convexQuery(
-			api.todos.crud.listTodos,
-			user?.id ? { userId: user.id } : "skip",
-		),
-	);
-
-	const { mutate: updateTodo } = useMutation({
-		mutationFn: useConvexMutation(api.todos.crud.updateTodo),
-	});
-
-	const { mutate: deleteTodo } = useMutation({
-		mutationFn: useConvexMutation(api.todos.crud.deleteTodo),
-	});
-
-	return (
-		<main className="flex flex-1 flex-col overflow-auto p-6">
-			<div className="flex items-center justify-between mb-6">
-				<h1 className="text-2xl font-semibold">Todos</h1>
-				<CreateTodoSheet />
-			</div>
-
-			{isPending && (
-				<div className="flex flex-1 items-center justify-center">
-					<Spinner />
-				</div>
-			)}
-
-			{!isPending && todos?.length === 0 && (
-				<div className="flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground">
-					<p>No todos yet.</p>
-					<CreateTodoSheet />
-				</div>
-			)}
-
-			{todos && todos.length > 0 && (
-				<ul className="flex flex-col gap-2 max-w-2xl">
-					{todos.map((todo) => (
-						<li
-							key={todo._id}
-							className="flex items-center gap-3 rounded-lg border bg-card px-4 py-3"
-						>
-							<Checkbox
-								checked={todo.isCompleted}
-								onCheckedChange={(checked) =>
-									updateTodo({
-										todoId: todo._id as Id<"todos">,
-										isCompleted: !!checked,
-									})
-								}
-							/>
-							<Link
-								href={`/todos/${todo._id}`}
-								className="flex-1 truncate text-sm hover:underline"
-								style={{
-									textDecoration: todo.isCompleted ? "line-through" : undefined,
-								}}
-							>
-								{todo.title}
-							</Link>
-							<Button
-								variant="ghost"
-								size="icon"
-								className="size-7 shrink-0 text-muted-foreground hover:text-destructive"
-								onClick={() => deleteTodo({ todoId: todo._id as Id<"todos"> })}
-							>
-								<Trash2 className="size-4" />
-							</Button>
-						</li>
-					))}
-				</ul>
-			)}
-		</main>
-	);
-};

package/templates/nextjs/src/surfaces/todos/create_todo_sheet.tsx

@@ -1,107 +0,0 @@
-"use client";
-
-import { useConvexMutation } from "@convex-dev/react-query";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { PlusIcon } from "lucide-react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { api } from "@/api/_generated/api";
-import { Button } from "@/ui/base/button";
-import { DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/ui/base/dialog";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/base/form";
-import { Input } from "@/ui/base/input";
-import { Sheet, SheetContent, SheetTrigger } from "@/ui/base/sheet";
-import { TextArea } from "@/ui/base/text_area";
-
-type CreateTodoSchema = z.infer<typeof createTodoSchema>;
-const createTodoSchema = z.object({
-  title: z.string().min(1, "Title is required"),
-  description: z.string().optional(),
-});
-
-export const CreateTodoSheet = () => {
-  const form = useForm<CreateTodoSchema>({
-    resolver: zodResolver(createTodoSchema),
-    defaultValues: {
-      title: "",
-      description: "",
-    },
-  });
-
-  const { mutate: createTodo, isPending } = useMutation({
-    mutationFn: useConvexMutation(api.todos.crud.createTodo),
-  });
-
-  const handleSubmit = form.handleSubmit(async (values) => {
-    createTodo(values);
-    form.reset();
-  });
-
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button>
-          <PlusIcon className="mr-2 size-4" />
-          New Todo
-        </Button>
-      </SheetTrigger>
-      <SheetContent className="sm:max-w-[440px]">
-        <DialogHeader>
-          <DialogTitle>Create Todo</DialogTitle>
-          <DialogDescription>Add a new item to your todo list.</DialogDescription>
-        </DialogHeader>
-        <Form {...form}>
-          <form
-            onSubmit={handleSubmit}
-            className="flex flex-col gap-4 pt-4"
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                handleSubmit();
-              }
-            }}
-          >
-            <FormField
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Title</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Buy groceries..." {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Description</FormLabel>
-                  <FormControl>
-                    <TextArea
-                      placeholder="Optional details..."
-                      className="resize-none"
-                      rows={3}
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <DialogFooter>
-              <Button type="submit" disabled={isPending}>
-                {isPending ? "Creating..." : "Create Todo"}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </SheetContent>
-    </Sheet>
-  );
-};

package/templates/nextjs/src/surfaces/todos/single_todo_surface.tsx

@@ -1,90 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-"use client";
-
-import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { ArrowLeft } from "lucide-react";
-import Link from "next/link";
-
-import { api } from "@/api/_generated/api";
-import type { TodoId } from "@/api/todos/types";
-import { Badge } from "@/ui/base/badge";
-import { Button } from "@/ui/base/button";
-import { Checkbox } from "@/ui/base/checkbox";
-import { Spinner } from "@/ui/base/spinner";
-
-type SingleTodoSurfaceProps = {
-  todoId: TodoId;
-};
-
-export const SingleTodoSurface = ({ todoId }: SingleTodoSurfaceProps) => {
-  const { data: todo, isPending } = useQuery(convexQuery(api.todos.crud.getTodo, { todoId }));
-
-  const { mutate: updateTodo } = useMutation({
-    mutationFn: useConvexMutation(api.todos.crud.updateTodo),
-  });
-
-  if (isPending) {
-    return (
-      <main className="flex flex-1 items-center justify-center">
-        <Spinner />
-      </main>
-    );
-  }
-
-  if (!todo) {
-    return (
-      <main className="flex flex-1 flex-col items-center justify-center gap-4">
-        <p className="text-muted-foreground">Todo not found.</p>
-        <Button variant="outline" asChild>
-          <Link href="/todos">
-            <ArrowLeft className="mr-2 size-4" />
-            Back to todos
-          </Link>
-        </Button>
-      </main>
-    );
-  }
-
-  return (
-    <main className="flex flex-1 flex-col gap-6 overflow-auto p-6 max-w-2xl">
-      <Button variant="ghost" className="w-fit -ml-2 text-muted-foreground" asChild>
-        <Link href="/todos">
-          <ArrowLeft className="mr-2 size-4" />
-          Back
-        </Link>
-      </Button>
-
-      <div className="flex items-start gap-3">
-        <Checkbox
-          className="mt-1"
-          checked={todo.isCompleted}
-          onCheckedChange={(checked) =>
-            updateTodo({
-              todoId,
-              isCompleted: !!checked,
-            })
-          }
-        />
-        <div className="flex flex-col gap-2">
-          <h1
-            className="text-2xl font-semibold"
-            style={{
-              textDecoration: todo.isCompleted ? "line-through" : undefined,
-            }}
-          >
-            {todo.title}
-          </h1>
-          <Badge variant={todo.isCompleted ? "secondary" : "default"}>
-            {todo.isCompleted ? "Completed" : "In progress"}
-          </Badge>
-        </div>
-      </div>
-
-      {todo.description && <p className="text-muted-foreground">{todo.description}</p>}
-    </main>
-  );
-};

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

@@ -1,125 +0,0 @@
-/*
- * 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/react-router/.env.example

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

package/templates/react-router/src/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}";

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

@@ -1,76 +0,0 @@
-/*
- * 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_layout.tsx

@@ -1,22 +0,0 @@
-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/routes/index.tsx

@@ -1,9 +0,0 @@
-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

@@ -1,26 +0,0 @@
-/*
- * 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

@@ -1,22 +0,0 @@
-/*
- * 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

@@ -1,13 +0,0 @@
-/*
- * 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

@@ -1,12 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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>
-  );
-};