create-aron-app 0.1.6 → 0.1.8

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/providers/api_auth_provider.tsx

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

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

package/templates/react-router/src/surfaces/todos/all_todos_surface.tsx

@@ -1,87 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { Trash2 } from "lucide-react";
-import { Link } from "react-router";
-
-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 { data: todos, isPending } = useQuery(convexQuery(api.todos.crud.listTodos, {}));
-
-  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
-                to={`/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/react-router/src/surfaces/todos/create_todo_sheet.tsx

@@ -1,102 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-import { useConvexMutation } from "@convex-dev/react-query";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { Plus } 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";
-
-const createTodoSchema = z.object({
-  title: z.string().min(1, "Title is required"),
-  description: z.string().optional(),
-});
-
-type CreateTodoSchema = z.infer<typeof createTodoSchema>;
-
-export const CreateTodoSheet = () => {
-  const form = useForm<CreateTodoSchema>({
-    resolver: zodResolver(createTodoSchema),
-    defaultValues: { title: "", description: "" },
-  });
-
-  const { mutate: createTodo, isPending } = useMutation({
-    mutationFn: useConvexMutation(api.todos.crud.createTodo),
-    onSuccess: () => form.reset(),
-  });
-
-  const handleSubmit = form.handleSubmit((values) => {
-    createTodo(values);
-  });
-
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button size="sm">
-          <Plus className="mr-2 size-4" />
-          New Todo
-        </Button>
-      </SheetTrigger>
-      <SheetContent className="sm:max-w-[480px]">
-        <DialogHeader>
-          <DialogTitle>New Todo</DialogTitle>
-          <DialogDescription>Add a new todo to your list.</DialogDescription>
-        </DialogHeader>
-        <Form {...form}>
-          <form
-            onSubmit={handleSubmit}
-            className="flex flex-col gap-4 pt-4"
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && !e.shiftKey) {
-                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..." rows={3} {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <DialogFooter>
-              <Button type="submit" disabled={isPending}>
-                {isPending ? "Creating…" : "Create Todo"}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </SheetContent>
-    </Sheet>
-  );
-};

package/templates/react-router/src/surfaces/todos/single_todo_surface.tsx

@@ -1,81 +0,0 @@
-/*
- * Copyright (c) Aron Weston 2026.
- */
-
-import { convexQuery, useConvexMutation } from "@convex-dev/react-query";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { ArrowLeft } from "lucide-react";
-import { Link } from "react-router";
-
-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 to="/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 to="/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>
-  );
-};