nextjs-hackathon-stack 0.1.19 → 0.1.20

package/dist/index.js

@@ -165,7 +165,7 @@ async function scaffold(projectName, skipInstall) {
   console.log(`  ${pc2.yellow("Edita .env.local y completa tus credenciales:")}`);
   console.log(`    ${pc2.dim("NEXT_PUBLIC_SUPABASE_URL")}       \u2014 supabase.com > Project Settings > API`);
   console.log(`    ${pc2.dim("NEXT_PUBLIC_SUPABASE_ANON_KEY")}  \u2014 supabase.com > Project Settings > API`);
-  console.log(`    ${pc2.dim("DATABASE_URL")}                   \u2014 supabase.com > Project Settings > Database`);
+  console.log(`    ${pc2.dim("DATABASE_URL")}                   \u2014 supabase.com > Project Settings > Database > Connection string (Session mode)`);
   console.log(`  ${pc2.cyan("pnpm db:migrate")}    ${pc2.dim("\u2014 aplica las migraciones a la base de datos")}`);
   console.log(`  ${pc2.cyan("pnpm dev")}
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-hackathon-stack",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Scaffold a full-stack Next.js hackathon starter",
   "type": "module",
   "bin": {

package/template/README.md

@@ -27,7 +27,7 @@ Full-stack Next.js 15 hackathon starter.
 # Supabase — https://supabase.com > Project Settings > API
 NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
-DATABASE_URL=postgresql://postgres:[password]@db.your-project-id.supabase.co:5432/postgres
+DATABASE_URL=postgresql://postgres.your-project-id:[password]@aws-0-[region].pooler.supabase.com:6543/postgres
 
 # AI — Vercel AI Gateway (default: MiniMax M2.1)
 # Create gateway at: https://vercel.com > AI > Gateways
@@ -67,7 +67,7 @@ pnpm db:migrate      # Apply migrations
 |---|---|
 | `NEXT_PUBLIC_SUPABASE_URL` | Supabase > Project Settings > API |
 | `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Supabase > Project Settings > API |
-| `DATABASE_URL` | Supabase > Project Settings > Database > URI |
+| `DATABASE_URL` | Supabase > Project Settings > Database > Connection string > Session mode |
 | `AI_GATEWAY_URL` | Vercel > AI > Gateways |
 | `AI_API_KEY` | Your AI provider API key |
 | `NEXT_PUBLIC_APP_URL` | Your deployment URL (default: `http://localhost:3000`) |

package/template/_env.example

@@ -6,8 +6,8 @@
 NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
 
-# Supabase DB — https://supabase.com > Project Settings > Database > Connection string (URI)
-DATABASE_URL=postgresql://postgres:[password]@db.your-project-id.supabase.co:5432/postgres
+# Supabase DB — https://supabase.com > Project Settings > Database > Connection string > Session mode (URI)
+DATABASE_URL=postgresql://postgres.your-project-id:[password]@aws-0-[region].pooler.supabase.com:6543/postgres
 
 # =============================================================================
 # OPTIONAL

package/template/package.json.tmpl

@@ -36,7 +36,8 @@
     "tailwind-merge": "^2",
     "class-variance-authority": "^0.7",
     "@radix-ui/react-slot": "^1",
-    "@radix-ui/react-label": "^2"
+    "@radix-ui/react-label": "^2",
+    "lucide-react": "^0.475"
   },
   "devDependencies": {
     "typescript": "^5",

package/template/src/features/auth/components/login-form.tsx

@@ -80,8 +80,8 @@ export function LoginForm() {
             )}
           </div>
 
-          <Button type="submit" className="w-full" disabled={isPending}>
-            {isPending ? "Iniciando sesión…" : "Iniciar sesión"}
+          <Button type="submit" className="w-full" loading={isPending}>
+            Iniciar sesión
           </Button>
         </form>
       </CardContent>

package/template/src/features/todos/components/add-todo-form.tsx

@@ -2,6 +2,7 @@
 
 import { useRef, useTransition } from "react";
 import { addTodoAction } from "../actions/todos.action";
+import { Button } from "@/shared/components/ui/button";
 
 export function AddTodoForm() {
   const [isPending, startTransition] = useTransition();
@@ -28,13 +29,9 @@ export function AddTodoForm() {
         className="flex-1 rounded border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400"
         aria-label="Nueva tarea"
       />
-      <button
-        type="submit"
-        disabled={isPending}
-        className="rounded bg-black px-4 py-2 text-sm text-white hover:bg-gray-800 disabled:opacity-50"
-      >
-        {isPending ? "Agregando…" : "Agregar"}
-      </button>
+      <Button type="submit" loading={isPending}>
+        Agregar
+      </Button>
     </form>
   );
 }

package/template/src/features/todos/components/todo-list.tsx

@@ -3,6 +3,7 @@
 import { useTransition } from "react";
 import { toggleTodoAction, deleteTodoAction } from "../actions/todos.action";
 import type { SelectTodo } from "@/shared/db/schema";
+import { Spinner } from "@/shared/components/ui/spinner";
 
 interface TodoListProps {
   items: SelectTodo[];
@@ -39,6 +40,7 @@ export function TodoList({ items }: TodoListProps) {
             <span className={todo.completed ? "line-through text-gray-400" : ""}>
               {todo.title}
             </span>
+            {isPending && <Spinner className="size-4 text-gray-400" />}
           </label>
           <button
             type="button"

package/template/src/shared/__tests__/ui-button.test.tsx

@@ -49,4 +49,31 @@ describe("Button", () => {
     expect(btn).toBeInTheDocument();
     expect(btn.className).toContain("destructive");
   });
+
+  it("is disabled and renders spinner SVG when loading is true", () => {
+    // Arrange + Act
+    render(<Button loading>Save</Button>);
+
+    // Assert
+    const btn = screen.getByRole("button");
+    expect(btn).toBeDisabled();
+    expect(btn.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("renders children alongside spinner when loading is true", () => {
+    // Arrange + Act
+    render(<Button loading>Save</Button>);
+
+    // Assert
+    expect(screen.getByText("Save")).toBeInTheDocument();
+  });
+
+  it("does not render spinner when loading is false", () => {
+    // Arrange + Act
+    render(<Button>Save</Button>);
+
+    // Assert
+    const btn = screen.getByRole("button");
+    expect(btn.querySelector("svg")).not.toBeInTheDocument();
+  });
 });

package/template/src/shared/__tests__/ui-spinner.test.tsx

@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+
+import { Spinner } from "../components/ui/spinner";
+
+describe("Spinner", () => {
+  it("renders with animate-spin class", () => {
+    // Arrange + Act
+    const { container } = render(<Spinner />);
+
+    // Assert
+    expect(container.firstChild).toHaveClass("animate-spin");
+  });
+
+  it("applies custom className alongside animate-spin", () => {
+    // Arrange + Act
+    const { container } = render(<Spinner className="size-4" />);
+
+    // Assert
+    expect(container.firstChild).toHaveClass("animate-spin", "size-4");
+  });
+});

package/template/src/shared/components/ui/button.tsx

@@ -3,6 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import * as React from "react"
 
 import { cn } from "@/shared/lib/utils"
+import { Spinner } from "./spinner"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -40,10 +41,14 @@ function Button({
   variant,
   size,
   asChild = false,
+  loading = false,
+  children,
+  disabled,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
+    loading?: boolean
   }) {
   const Comp = asChild ? Slot : "button"
 
@@ -51,8 +56,11 @@ function Button({
     <Comp
       data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
+      disabled={disabled ?? loading}
       {...props}
-    />
+    >
+      {asChild ? children : <>{loading && <Spinner className="size-4" />}{children}</>}
+    </Comp>
   )
 }
 

package/template/src/shared/components/ui/spinner.tsx

@@ -0,0 +1,6 @@
+import { LoaderCircle } from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+
+export function Spinner({ className }: { className?: string }) {
+  return <LoaderCircle className={cn("animate-spin", className)} />;
+}