create-stackkit-app 0.3.1 → 0.4.0

package/modules/auth/clerk-react/module.json

@@ -0,0 +1,18 @@
+{
+  "name": "clerk-react",
+  "description": "Clerk Authentication for React",
+  "category": "auth",
+  "framework": "react-vite",
+  "dependencies": {
+    "@clerk/clerk-react": "^5.19.2"
+  },
+  "env": {
+    "VITE_CLERK_PUBLISHABLE_KEY": "pk_test_your_key_here"
+  },
+  "files": [
+    {
+      "source": "files/lib/auth-provider.tsx",
+      "destination": "lib/auth-provider.tsx"
+    }
+  ]
+}

package/modules/auth/nextauth/files/app-router/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,6 @@
+import { authOptions } from '@/lib/auth';
+import NextAuth from 'next-auth';
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

package/modules/auth/nextauth/files/lib/auth.ts

@@ -0,0 +1,82 @@
+import { AuthOptions } from 'next-auth';
+import CredentialsProvider from 'next-auth/providers/credentials';
+
+/**
+ * NextAuth.js Configuration
+ *
+ * Configure authentication providers and options here.
+ * See: https://next-auth.js.org/configuration/options
+ */
+export const authOptions: AuthOptions = {
+  providers: [
+    // GitHub OAuth Provider
+    // Uncomment and add GITHUB_ID and GITHUB_SECRET to .env
+    // GithubProvider({
+    //   clientId: process.env.GITHUB_ID!,
+    //   clientSecret: process.env.GITHUB_SECRET!,
+    // }),
+
+    // Google OAuth Provider
+    // Uncomment and add GOOGLE_ID and GOOGLE_SECRET to .env
+    // GoogleProvider({
+    //   clientId: process.env.GOOGLE_ID!,
+    //   clientSecret: process.env.GOOGLE_SECRET!,
+    // }),
+
+    // Credentials Provider (email/password)
+    // Replace with your own authentication logic
+    CredentialsProvider({
+      name: 'Credentials',
+      credentials: {
+        email: { label: 'Email', type: 'email', placeholder: 'user@example.com' },
+        password: { label: 'Password', type: 'password' },
+      },
+      async authorize(credentials) {
+        // Add your own authentication logic here
+        // This is just a demo - DO NOT use in production
+        if (credentials?.email === 'demo@example.com' && credentials?.password === 'demo') {
+          return {
+            id: '1',
+            name: 'Demo User',
+            email: 'demo@example.com',
+          };
+        }
+        return null;
+      },
+    }),
+  ],
+
+  // Database adapter (optional)
+  // Uncomment to persist sessions in database
+  // adapter: PrismaAdapter(prisma),
+
+  session: {
+    strategy: 'jwt',
+  },
+
+  pages: {
+    signIn: '/auth/signin',
+    // signOut: '/auth/signout',
+    // error: '/auth/error',
+    // verifyRequest: '/auth/verify-request',
+    // newUser: '/auth/new-user'
+  },
+
+  callbacks: {
+    async jwt({ token, user }) {
+      if (user) {
+        token.id = user.id;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.id as string;
+      }
+      return session;
+    },
+  },
+
+  // Enable debug messages in development
+  debug: process.env.NODE_ENV === 'development',
+};

package/modules/auth/nextauth/files/pages-router/api/auth/[...nextauth].ts

@@ -0,0 +1,4 @@
+import { authOptions } from '@/lib/auth';
+import NextAuth from 'next-auth';
+
+export default NextAuth(authOptions);

package/modules/auth/nextauth/module.json

@@ -0,0 +1,50 @@
+{
+  "name": "auth",
+  "displayName": "NextAuth.js Authentication",
+  "description": "Add authentication with NextAuth.js (supports multiple providers)",
+  "category": "auth",
+  "supportedFrameworks": ["nextjs"],
+  "dependencies": {
+    "next-auth": "^4.24.5"
+  },
+  "envVars": [
+    {
+      "key": "NEXTAUTH_URL",
+      "value": "http://localhost:3000",
+      "description": "The URL of your application (change in production)",
+      "required": true
+    },
+    {
+      "key": "NEXTAUTH_SECRET",
+      "value": "",
+      "description": "Secret for encrypting tokens. Generate with: openssl rand -base64 32",
+      "required": true
+    }
+  ],
+  "patches": [
+    {
+      "type": "create-file",
+      "description": "Create NextAuth API route for App Router",
+      "source": "app-router/api/auth/[...nextauth]/route.ts",
+      "destination": "{{router}}/api/auth/[...nextauth]/route.ts",
+      "condition": {
+        "router": "app"
+      }
+    },
+    {
+      "type": "create-file",
+      "description": "Create NextAuth API route for Pages Router",
+      "source": "pages-router/api/auth/[...nextauth].ts",
+      "destination": "{{router}}/api/auth/[...nextauth].ts",
+      "condition": {
+        "router": "pages"
+      }
+    },
+    {
+      "type": "create-file",
+      "description": "Create auth configuration",
+      "source": "lib/auth.ts",
+      "destination": "{{lib}}/auth.ts"
+    }
+  ]
+}

package/modules/database/drizzle-postgresql/files/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'drizzle-kit';
+
+export default defineConfig({
+  schema: './lib/schema.ts',
+  out: './drizzle',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+});

package/modules/database/drizzle-postgresql/files/lib/db.ts

@@ -0,0 +1,7 @@
+import { drizzle } from 'drizzle-orm/postgres-js';
+import postgres from 'postgres';
+
+const connectionString = process.env.DATABASE_URL!;
+
+export const client = postgres(connectionString, { prepare: false });
+export const db = drizzle(client);

package/modules/database/drizzle-postgresql/files/lib/schema.ts

@@ -0,0 +1,8 @@
+import { pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core';
+
+export const users = pgTable('users', {
+  id: serial('id').primaryKey(),
+  name: text('name').notNull(),
+  email: text('email').notNull().unique(),
+  createdAt: timestamp('created_at').defaultNow(),
+});

package/modules/database/drizzle-postgresql/module.json

@@ -0,0 +1,34 @@
+{
+  "name": "drizzle-postgresql",
+  "description": "Drizzle ORM with PostgreSQL",
+  "category": "database",
+  "dependencies": {
+    "drizzle-orm": "^0.36.4",
+    "postgres": "^3.4.5"
+  },
+  "devDependencies": {
+    "drizzle-kit": "^0.28.1"
+  },
+  "scripts": {
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "db:studio": "drizzle-kit studio"
+  },
+  "env": {
+    "DATABASE_URL": "postgresql://postgres:password@localhost:5432/myapp"
+  },
+  "files": [
+    {
+      "source": "files/lib/db.ts",
+      "destination": "lib/db.ts"
+    },
+    {
+      "source": "files/lib/schema.ts",
+      "destination": "lib/schema.ts"
+    },
+    {
+      "source": "files/drizzle.config.ts",
+      "destination": "drizzle.config.ts"
+    }
+  ]
+}

package/modules/database/mongoose-mongodb/files/lib/db.ts

@@ -0,0 +1,40 @@
+import mongoose from 'mongoose';
+
+const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost:27017/myapp';
+
+if (!MONGODB_URI) {
+  throw new Error('Please define the MONGODB_URI environment variable');
+}
+
+let cached = global.mongoose;
+
+if (!cached) {
+  cached = global.mongoose = { conn: null, promise: null };
+}
+
+async function connectDB() {
+  if (cached.conn) {
+    return cached.conn;
+  }
+
+  if (!cached.promise) {
+    const opts = {
+      bufferCommands: false,
+    };
+
+    cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
+      return mongoose;
+    });
+  }
+
+  try {
+    cached.conn = await cached.promise;
+  } catch (e) {
+    cached.promise = null;
+    throw e;
+  }
+
+  return cached.conn;
+}
+
+export default connectDB;

package/modules/database/mongoose-mongodb/module.json

@@ -0,0 +1,17 @@
+{
+  "name": "mongoose-mongodb",
+  "description": "Mongoose ODM for MongoDB",
+  "category": "database",
+  "dependencies": {
+    "mongoose": "^8.8.4"
+  },
+  "env": {
+    "MONGODB_URI": "mongodb://localhost:27017/myapp"
+  },
+  "files": [
+    {
+      "source": "files/lib/db.ts",
+      "destination": "lib/db.ts"
+    }
+  ]
+}

package/{templates/databases/prisma-postgresql → modules/database/prisma-mongodb/files}/lib/db.ts

@@ -4,10 +4,6 @@ const globalForPrisma = globalThis as unknown as {
   prisma: PrismaClient | undefined;
 };
 
-export const prisma =
-  globalForPrisma.prisma ??
-  new PrismaClient({
-    log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
-  });
+export const db = globalForPrisma.prisma ?? new PrismaClient();
 
-if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db;

package/{templates/databases/prisma-mongodb → modules/database/prisma-mongodb/files}/prisma/schema.prisma

@@ -7,6 +7,7 @@ datasource db {
     url      = env("DATABASE_URL")
 }
 
+// Example model - customize as needed
 model User {
     id        String   @id @default(auto()) @map("_id") @db.ObjectId
     email     String   @unique

package/modules/database/prisma-mongodb/module.json

@@ -0,0 +1,36 @@
+{
+  "name": "database",
+  "displayName": "Prisma + MongoDB",
+  "description": "Add Prisma ORM with MongoDB database",
+  "category": "database",
+  "supportedFrameworks": ["nextjs", "express"],
+  "dependencies": {
+    "@prisma/client": "^6.1.0"
+  },
+  "devDependencies": {
+    "prisma": "^6.1.0"
+  },
+  "envVars": [
+    {
+      "key": "DATABASE_URL",
+      "value": "mongodb://localhost:27017/mydb",
+      "description": "MongoDB connection URL",
+      "required": true
+    }
+  ],
+  "patches": [
+    {
+      "type": "create-file",
+      "description": "Create Prisma schema for MongoDB",
+      "source": "prisma/schema.prisma",
+      "destination": "prisma/schema.prisma"
+    },
+    {
+      "type": "create-file",
+      "description": "Create Prisma client singleton",
+      "source": "lib/db.ts",
+      "destination": "{{lib}}/db.ts"
+    }
+  ],
+  "postInstall": ["npx prisma generate"]
+}

package/{templates/databases/prisma-mongodb → modules/database/prisma-postgresql/files}/lib/db.ts

@@ -4,10 +4,6 @@ const globalForPrisma = globalThis as unknown as {
   prisma: PrismaClient | undefined;
 };
 
-export const prisma =
-  globalForPrisma.prisma ??
-  new PrismaClient({
-    log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
-  });
+export const db = globalForPrisma.prisma ?? new PrismaClient();
 
-if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db;

package/{templates/databases/prisma-postgresql → modules/database/prisma-postgresql/files}/prisma/schema.prisma

@@ -7,6 +7,7 @@ datasource db {
     url      = env("DATABASE_URL")
 }
 
+// Example model - customize as needed
 model User {
     id        String   @id @default(cuid())
     email     String   @unique

package/modules/database/prisma-postgresql/module.json

@@ -0,0 +1,36 @@
+{
+  "name": "database",
+  "displayName": "Prisma + PostgreSQL",
+  "description": "Add Prisma ORM with PostgreSQL database",
+  "category": "database",
+  "supportedFrameworks": ["nextjs", "express"],
+  "dependencies": {
+    "@prisma/client": "^6.1.0"
+  },
+  "devDependencies": {
+    "prisma": "^6.1.0"
+  },
+  "envVars": [
+    {
+      "key": "DATABASE_URL",
+      "value": "postgresql://user:password@localhost:5432/mydb?schema=public",
+      "description": "PostgreSQL database connection URL",
+      "required": true
+    }
+  ],
+  "patches": [
+    {
+      "type": "create-file",
+      "description": "Create Prisma schema",
+      "source": "prisma/schema.prisma",
+      "destination": "prisma/schema.prisma"
+    },
+    {
+      "type": "create-file",
+      "description": "Create Prisma client singleton",
+      "source": "lib/db.ts",
+      "destination": "{{lib}}/db.ts"
+    }
+  ],
+  "postInstall": ["npx prisma generate"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-stackkit-app",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Create a new StackKit project with modular composition",
   "main": "dist/index.js",
   "bin": {
@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "bin",
-    "templates"
+    "templates",
+    "modules"
   ],
   "repository": {
     "type": "git",
@@ -23,10 +24,11 @@
   },
   "scripts": {
     "dev": "tsc --watch",
-    "build": "tsc",
-    "clean": "rm -rf dist",
+    "build": "npm run clean && tsc && npm run copy-assets",
+    "copy-assets": "cp -r ../../templates . && cp -r ../../modules .",
+    "clean": "rm -rf dist templates modules",
     "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build && cp -r ../../templates ."
+    "prepublishOnly": "npm run build"
   },
   "keywords": [
     "create",
@@ -51,4 +53,4 @@
     "@types/validate-npm-package-name": "^4.0.2",
     "typescript": "^5.3.3"
   }
-}
+}

package/templates/bases/nextjs-base/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/templates/bases/nextjs-base/app/globals.css

@@ -1,3 +1,26 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

package/templates/bases/nextjs-base/app/layout.tsx

@@ -1,19 +1,34 @@
-import type { Metadata } from 'next';
-import './globals.css';
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
-  title: 'StackKit App',
-  description: 'Generated by create-stackkit-app',
+  title: "Create Next App",
+  description: "Generated by create next app",
 };
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.Node;
+  children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
     </html>
   );
 }

package/templates/bases/nextjs-base/app/page.tsx

@@ -1,8 +1,65 @@
+import Image from "next/image";
+
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-24">
-      <h1 className="text-4xl font-bold">Welcome to StackKit</h1>
-      <p className="mt-4 text-xl">Your project is ready to go!</p>
-    </main>
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={100}
+          height={20}
+          priority
+        />
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            To get started, edit the page.tsx file.
+          </h1>
+          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            Looking for a starting point or more instructions? Head over to{" "}
+            <a
+              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Templates
+            </a>{" "}
+            or the{" "}
+            <a
+              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Learning
+            </a>{" "}
+            center.
+          </p>
+        </div>
+        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          <a
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={16}
+              height={16}
+            />
+            Deploy Now
+          </a>
+          <a
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Documentation
+          </a>
+        </div>
+      </main>
+    </div>
   );
 }

package/templates/bases/nextjs-base/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/templates/bases/nextjs-base/next.config.ts

@@ -1,5 +1,7 @@
-import type { NextConfig } from 'next';
+import type { NextConfig } from "next";
 
-const nextConfig: NextConfig = {};
+const nextConfig: NextConfig = {
+  /* config options here */
+};
 
 export default nextConfig;