stackpatch 1.2.2 → 1.2.4

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "stackpatch",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Composable frontend features for modern React & Next.js apps - Add authentication, UI components, and more with zero configuration",
   "main": "dist/stackpatch.js",
   "bin": {
     "stackpatch": "dist/stackpatch.js",
     "create-stackpatch": "dist/stackpatch.js"
   },
+  "type": "module",
   "files": [
     "dist",
     "boilerplate",
@@ -14,7 +15,7 @@
   ],
   "scripts": {
     "install-deps": "pnpm install @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript @rollup/plugin-json rollup typescript -D",
-    "build": "rollup -c",
+    "build": "rollup -c rollup.config.cjs",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -55,10 +56,12 @@
   },
   "packageManager": "pnpm@10.28.0",
   "dependencies": {
-    "chalk": "^4.1.2",
+    "@inquirer/select": "^5.0.4",
+    "chalk": "^5.6.2",
     "fs-extra": "^11.3.3",
-    "inquirer": "^13.1.0",
-    "jimp": "^0.22.10"
+    "inquirer": "^13.2.0",
+    "jimp": "^0.22.10",
+    "tsx": "^4.19.2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.9",

package/boilerplate/auth/app/api/auth/[...nextauth]/route.ts

@@ -1,124 +0,0 @@
-import NextAuth from "next-auth";
-import type { NextAuthOptions } from "next-auth";
-import GoogleProvider from "next-auth/providers/google";
-import GitHubProvider from "next-auth/providers/github";
-import CredentialsProvider from "next-auth/providers/credentials";
-
-export const authOptions: NextAuthOptions = {
-  providers: [
-    CredentialsProvider({
-      name: "Credentials",
-      credentials: {
-        email: { label: "Email", type: "email" },
-        password: { label: "Password", type: "password" },
-      },
-      async authorize(credentials) {
-        // ⚠️ DEMO MODE: This is a placeholder implementation
-        //
-        // TO IMPLEMENT REAL AUTHENTICATION:
-        // 1. Set up a database (PostgreSQL, MongoDB, Prisma, etc.)
-        // 2. Install bcrypt: npm install bcryptjs @types/bcryptjs
-        // 3. Replace this function with database lookup:
-        //
-        // Example implementation:
-        // ```ts
-        // import bcrypt from "bcryptjs";
-        // import { db } from "@/lib/db"; // Your database connection
-        //
-        // async authorize(credentials) {
-        //   if (!credentials?.email || !credentials?.password) {
-        //     return null;
-        //   }
-        //
-        //   // Find user in database
-        //   const user = await db.user.findUnique({
-        //     where: { email: credentials.email },
-        //   });
-        //
-        //   if (!user) {
-        //     return null;
-        //   }
-        //
-        //   // Verify password
-        //   const isValid = await bcrypt.compare(
-        //     credentials.password,
-        //     user.password
-        //   );
-        //
-        //   if (!isValid) {
-        //     return null;
-        //   }
-        //
-        //   return {
-        //     id: user.id,
-        //     email: user.email,
-        //     name: user.name,
-        //   };
-        // }
-        // ```
-        //
-        // Current demo credentials (REMOVE IN PRODUCTION):
-        // Email: demo@example.com
-        // Password: demo123
-
-        if (!credentials?.email || !credentials?.password) {
-          return null;
-        }
-
-        // Demo check - REMOVE THIS IN PRODUCTION
-        if (
-          credentials.email === "demo@example.com" &&
-          credentials.password === "demo123"
-        ) {
-          return {
-            id: "1",
-            email: credentials.email,
-            name: "Demo User",
-          };
-        }
-
-        return null;
-      },
-    }),
-    GoogleProvider({
-      clientId: process.env.GOOGLE_CLIENT_ID!,
-      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
-    }),
-    GitHubProvider({
-      clientId: process.env.GITHUB_CLIENT_ID!,
-      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
-    }),
-  ],
-  pages: {
-    signIn: "/auth/login",
-    error: "/auth/error",
-  },
-  session: {
-    strategy: "jwt",
-  },
-  callbacks: {
-    async jwt({ token, user, account }) {
-      if (user) {
-        token.id = user.id;
-        token.email = user.email;
-        token.name = user.name;
-      }
-      if (account) {
-        token.accessToken = account.access_token;
-        token.provider = account.provider;
-      }
-      return token;
-    },
-    async session({ session, token }) {
-      if (session.user) {
-        session.user.id = token.id as string;
-        session.accessToken = token.accessToken as string;
-      }
-      return session;
-    },
-  },
-};
-
-const handler = NextAuth(authOptions);
-
-export { handler as GET, handler as POST };

package/boilerplate/auth/app/api/auth/signup/route.ts

@@ -1,45 +0,0 @@
-import { NextResponse } from "next/server";
-
-export async function POST(request: Request) {
-  try {
-    const { email, password, name } = await request.json();
-
-    // TODO: Replace with your actual signup logic
-    // This is a placeholder - you should:
-    // 1. Validate input
-    // 2. Check if user already exists
-    // 3. Hash password (use bcrypt or similar)
-    // 4. Save user to database
-    // 5. Return success or error
-
-    // Example validation
-    if (!email || !password || !name) {
-      return NextResponse.json(
-        { error: "Missing required fields" },
-        { status: 400 }
-      );
-    }
-
-    if (password.length < 6) {
-      return NextResponse.json(
-        { error: "Password must be at least 6 characters" },
-        { status: 400 }
-      );
-    }
-
-    // Placeholder: In production, save to database here
-    // const hashedPassword = await bcrypt.hash(password, 10);
-    // const user = await db.user.create({ email, password: hashedPassword, name });
-
-    return NextResponse.json(
-      { message: "Account created successfully" },
-      { status: 201 }
-    );
-  } catch (error) {
-    console.error("Signup error:", error);
-    return NextResponse.json(
-      { error: "Failed to create account" },
-      { status: 500 }
-    );
-  }
-}

package/boilerplate/auth/app/dashboard/page.tsx

@@ -1,82 +0,0 @@
-"use client";
-
-import React from "react";
-import { useSession } from "next-auth/react";
-import { ProtectedRoute } from "@/components/protected-route";
-import { AuthNavbar } from "@/components/auth-navbar";
-
-/**
- * Dashboard Page Example
- *
- * This is an example protected dashboard page.
- *
- * To use this:
- * 1. Copy this file to your app/dashboard/page.tsx
- * 2. The page is automatically protected using ProtectedRoute
- * 3. The AuthNavbar shows session status and sign out button
- *
- * You can customize this page to show your dashboard content.
- * If you have an existing navbar, replace AuthNavbar with your own.
- */
-export default function DashboardPage() {
-  const { data: session } = useSession();
-
-  return (
-    <ProtectedRoute>
-      <div className="min-h-screen bg-zinc-50 dark:bg-black">
-        <AuthNavbar />
-        <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-          <div className="rounded-lg bg-white p-8 shadow dark:bg-zinc-900">
-            <h1 className="text-3xl font-bold text-zinc-900 dark:text-zinc-50">
-              Dashboard
-            </h1>
-            <p className="mt-2 text-zinc-600 dark:text-zinc-400">
-              Welcome to your protected dashboard!
-            </p>
-
-            {session && (
-              <div className="mt-6 rounded-md bg-zinc-100 p-4 dark:bg-zinc-800">
-                <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
-                  Session Information
-                </h2>
-                <div className="mt-2 space-y-1 text-sm text-zinc-600 dark:text-zinc-400">
-                  <p>
-                    <span className="font-medium">Name:</span>{" "}
-                    {session.user?.name || "Not provided"}
-                  </p>
-                  <p>
-                    <span className="font-medium">Email:</span>{" "}
-                    {session.user?.email || "Not provided"}
-                  </p>
-                  {session.user?.image && (
-                    <p>
-                      <span className="font-medium">Image:</span>{" "}
-                      <img
-                        src={session.user.image}
-                        alt={session.user.name || "User"}
-                        className="mt-2 h-16 w-16 rounded-full"
-                      />
-                    </p>
-                  )}
-                </div>
-              </div>
-            )}
-
-            <div className="mt-8">
-              <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-50">
-                Getting Started
-              </h2>
-              <p className="mt-2 text-zinc-600 dark:text-zinc-400">
-                This is a protected page. Only authenticated users can see this
-                content.
-              </p>
-              <p className="mt-2 text-zinc-600 dark:text-zinc-400">
-                Customize this page to add your dashboard features.
-              </p>
-            </div>
-          </div>
-        </main>
-      </div>
-    </ProtectedRoute>
-  );
-}

package/boilerplate/auth/app/login/page.tsx

@@ -1,136 +0,0 @@
-"use client";
-
-import { signIn } from "next-auth/react";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-
-export default function LoginPage() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-    setLoading(true);
-
-    try {
-      const result = await signIn("credentials", {
-        email,
-        password,
-        redirect: false,
-      });
-
-      if (result?.error) {
-        setError("Invalid email or password");
-      } else {
-        router.push("/");
-        router.refresh();
-      }
-    } catch (err) {
-      setError("Something went wrong. Please try again.");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 py-12 dark:bg-black sm:px-6 lg:px-8">
-      <div className="w-full max-w-md space-y-8">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
-            Sign in to your account
-          </h2>
-          <p className="mt-2 text-center text-sm text-zinc-600 dark:text-zinc-400">
-            Or{" "}
-            <a
-              href="/auth/signup"
-              className="font-medium text-zinc-950 hover:text-zinc-700 dark:text-zinc-50 dark:hover:text-zinc-300"
-            >
-              create a new account
-            </a>
-          </p>
-        </div>
-        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-          {error && (
-            <div className="rounded-md bg-red-50 p-4 dark:bg-red-900/20">
-              <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
-            </div>
-          )}
-          <div className="-space-y-px rounded-md shadow-sm">
-            <div>
-              <label htmlFor="email" className="sr-only">
-                Email address
-              </label>
-              <input
-                id="email"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="relative block w-full rounded-t-md border-0 px-3 py-2 text-zinc-900 ring-1 ring-inset ring-zinc-300 placeholder:text-zinc-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-zinc-600 dark:bg-zinc-800 dark:text-zinc-50 dark:ring-zinc-700 dark:placeholder:text-zinc-500 dark:focus:ring-zinc-400 sm:text-sm sm:leading-6"
-                placeholder="Email address"
-              />
-            </div>
-            <div>
-              <label htmlFor="password" className="sr-only">
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                required
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="relative block w-full rounded-b-md border-0 px-3 py-2 text-zinc-900 ring-1 ring-inset ring-zinc-300 placeholder:text-zinc-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-zinc-600 dark:bg-zinc-800 dark:text-zinc-50 dark:ring-zinc-700 dark:placeholder:text-zinc-500 dark:focus:ring-zinc-400 sm:text-sm sm:leading-6"
-                placeholder="Password"
-              />
-            </div>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div className="flex items-center">
-              <input
-                id="remember-me"
-                name="remember-me"
-                type="checkbox"
-                className="h-4 w-4 rounded border-zinc-300 text-zinc-600 focus:ring-zinc-600 dark:border-zinc-700 dark:bg-zinc-800"
-              />
-              <label
-                htmlFor="remember-me"
-                className="ml-2 block text-sm text-zinc-900 dark:text-zinc-50"
-              >
-                Remember me
-              </label>
-            </div>
-
-            <div className="text-sm">
-              <a
-                href="/auth/forgot-password"
-                className="font-medium text-zinc-600 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
-              >
-                Forgot your password?
-              </a>
-            </div>
-          </div>
-
-          <div>
-            <button
-              type="submit"
-              disabled={loading}
-              className="group relative flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-white hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 disabled:opacity-50 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
-            >
-              {loading ? "Signing in..." : "Sign in"}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}

package/boilerplate/auth/app/page.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import React from "react";
-import { AuthNavbar } from "@/components/auth-navbar";
-import Link from "next/link";
-
-/**
- * Landing Page Example
- *
- * This is an example landing page with auth navbar.
- *
- * To use this:
- * 1. This replaces your existing app/page.tsx (only if it's the default Next.js page)
- * 2. The AuthNavbar automatically shows sign in/out based on session
- * 3. Customize this page with your content
- * 4. If you have an existing navbar, you can use AuthNavbar as reference or integrate its features
- */
-export default function HomePage() {
-  return (
-    <div className="min-h-screen bg-zinc-50 dark:bg-black">
-      <AuthNavbar />
-      <main className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
-        <div className="text-center">
-          <h1 className="text-4xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50 sm:text-6xl">
-            Welcome to Your App
-          </h1>
-          <p className="mt-6 text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Get started by exploring the features below.
-          </p>
-          <div className="mt-10 flex items-center justify-center gap-x-6">
-            <Link
-              href="/dashboard"
-              className="rounded-md bg-zinc-900 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
-            >
-              Go to Dashboard
-            </Link>
-            <Link
-              href="/auth/login"
-              className="text-sm font-semibold leading-6 text-zinc-900 dark:text-zinc-50"
-            >
-              Sign In <span aria-hidden="true">→</span>
-            </Link>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}

package/boilerplate/auth/components/auth-button.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import { signIn, signOut, useSession } from "next-auth/react";
-
-export function AuthButton() {
-  const { data: session, status } = useSession();
-
-  if (status === "loading") {
-    return (
-      <button
-        disabled
-        className="rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50"
-      >
-        Loading...
-      </button>
-    );
-  }
-
-  if (session) {
-    return (
-      <div className="flex items-center gap-4">
-        <span className="text-sm text-zinc-600 dark:text-zinc-400">
-          {session.user?.email}
-        </span>
-        <button
-          onClick={() => signOut()}
-          className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
-        >
-          Sign out
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <button
-      onClick={() => signIn()}
-      className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
-    >
-      Sign in
-    </button>
-  );
-}

package/boilerplate/auth/components/auth-navbar.tsx

@@ -1,118 +0,0 @@
-"use client";
-
-import React from "react";
-import { useSession, signOut } from "next-auth/react";
-import Link from "next/link";
-
-/**
- * Auth Navbar Component (Demo/Example)
- *
- * Displays a navigation bar with session status and sign in/out button.
- * This is a demo component - rename or customize it to fit your needs.
- *
- * Usage:
- * ```tsx
- * import { AuthNavbar } from "@/components/auth-navbar";
- *
- * export default function Layout({ children }) {
- *   return (
- *     <>
- *       <AuthNavbar />
- *       {children}
- *     </>
- *   );
- * }
- * ```
- */
-export function AuthNavbar() {
-  const { data: session, status } = useSession();
-
-  const handleSignOut = async () => {
-    await signOut({ callbackUrl: "/" });
-  };
-
-  return (
-    <nav className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="flex h-16 items-center justify-between">
-          {/* Logo/Brand */}
-          <div className="flex items-center">
-            <Link
-              href="/"
-              className="text-xl font-bold text-zinc-900 hover:text-zinc-700 dark:text-zinc-50 dark:hover:text-zinc-200"
-            >
-              Your App
-            </Link>
-          </div>
-
-          {/* Navigation Links */}
-          <div className="hidden md:flex md:items-center md:space-x-6">
-            <Link
-              href="/"
-              className="text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
-            >
-              Home
-            </Link>
-            {session && (
-              <Link
-                href="/dashboard"
-                className="text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
-              >
-                Dashboard
-              </Link>
-            )}
-          </div>
-
-          {/* Auth Section */}
-          <div className="flex items-center space-x-4">
-            {status === "loading" ? (
-              <div className="h-8 w-8 animate-spin rounded-full border-2 border-zinc-300 border-t-zinc-600 dark:border-zinc-700 dark:border-t-zinc-400"></div>
-            ) : session ? (
-              <div className="flex items-center space-x-4">
-                {/* User Info */}
-                <div className="hidden sm:flex sm:flex-col sm:items-end">
-                  <span className="text-sm font-medium text-zinc-900 dark:text-zinc-50">
-                    {session.user?.name || session.user?.email}
-                  </span>
-                  <span className="text-xs text-zinc-500 dark:text-zinc-400">
-                    {session.user?.email}
-                  </span>
-                </div>
-
-                {/* User Avatar */}
-                {session.user?.image ? (
-                  <img
-                    src={session.user.image}
-                    alt={session.user.name || "User"}
-                    className="h-8 w-8 rounded-full"
-                  />
-                ) : (
-                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-600 text-sm font-medium text-white dark:bg-zinc-700">
-                    {session.user?.name?.charAt(0).toUpperCase() ||
-                      session.user?.email?.charAt(0).toUpperCase() ||
-                      "U"}
-                  </div>
-                )}
-
-                {/* Sign Out Button */}
-                <button
-                  onClick={handleSignOut}
-                  className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-semibold text-white hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
-                >
-                  Sign Out
-                </button>
-              </div>
-            ) : (
-              <Link
-                href="/auth/login"
-                className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-semibold text-white hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200"
-              >
-                Sign In
-              </Link>
-            )}
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-}