create-solostack 1.0.0

package/src/generators/base.js

@@ -0,0 +1,592 @@
+import path from 'path';
+import { writeFile, renderTemplateToFile, getTemplatePath, ensureDir } from '../utils/files.js';
+import { PACKAGE_VERSIONS } from '../constants.js';
+
+/**
+ * Generates the base Next.js 15 project structure
+ * @param {string} projectPath - Path where the project should be generated
+ * @param {string} projectName - Name of the project
+ * @param {object} config - Project configuration
+ */
+export async function generateBase(projectPath, projectName, config) {
+  // Create directory structure
+  await ensureDir(path.join(projectPath, 'src/app'));
+  await ensureDir(path.join(projectPath, 'src/components'));
+  await ensureDir(path.join(projectPath, 'src/lib'));
+  await ensureDir(path.join(projectPath, 'public'));
+
+  //Generate package.json
+  const packageJson = {
+    name: projectName,
+    version: '0.1.0',
+    private: true,
+    scripts: {
+      dev: 'next dev',
+      build: 'next build',
+      start: 'next start',
+      lint: 'next lint',
+      'db:push': 'prisma db push',
+      'db:seed': 'tsx prisma/seed.ts',
+      'db:studio': 'prisma studio',
+    },
+    dependencies: {
+      next: PACKAGE_VERSIONS.next,
+      react: PACKAGE_VERSIONS.react,
+      'react-dom': PACKAGE_VERSIONS.reactDom,
+      '@prisma/client': PACKAGE_VERSIONS['@prisma/client'],
+      'next-auth': PACKAGE_VERSIONS['next-auth'],
+      bcryptjs: PACKAGE_VERSIONS.bcryptjs,
+      stripe: PACKAGE_VERSIONS.stripe,
+      resend: PACKAGE_VERSIONS.resend,
+      '@react-email/components': PACKAGE_VERSIONS['@react-email/components'],
+      zod: PACKAGE_VERSIONS.zod,
+      'react-hook-form': PACKAGE_VERSIONS['react-hook-form'],
+      '@hookform/resolvers': PACKAGE_VERSIONS['@hookform/resolvers'],
+      'class-variance-authority': PACKAGE_VERSIONS['class-variance-authority'],
+      clsx: PACKAGE_VERSIONS.clsx,
+      'tailwind-merge': PACKAGE_VERSIONS['tailwind-merge'],
+      'tailwindcss-animate': PACKAGE_VERSIONS['tailwindcss-animate'],
+      'lucide-react': PACKAGE_VERSIONS['lucide-react'],
+      '@radix-ui/react-dropdown-menu': PACKAGE_VERSIONS['@radix-ui/react-dropdown-menu'],
+      '@radix-ui/react-slot': PACKAGE_VERSIONS['@radix-ui/react-slot'],
+      '@radix-ui/react-toast': PACKAGE_VERSIONS['@radix-ui/react-toast'],
+      '@radix-ui/react-dialog': PACKAGE_VERSIONS['@radix-ui/react-dialog'],
+      '@radix-ui/react-label': PACKAGE_VERSIONS['@radix-ui/react-label'],
+      '@auth/prisma-adapter': PACKAGE_VERSIONS['@auth/prisma-adapter'],
+    },
+    devDependencies: {
+      typescript: PACKAGE_VERSIONS.typescript,
+      '@types/node': PACKAGE_VERSIONS['@types/node'],
+      '@types/react': PACKAGE_VERSIONS['@types/react'],
+      '@types/react-dom': PACKAGE_VERSIONS['@types/react-dom'],
+      '@types/bcryptjs': PACKAGE_VERSIONS['@types/bcryptjs'],
+      tailwindcss: PACKAGE_VERSIONS.tailwindcss,
+      postcss: PACKAGE_VERSIONS.postcss,
+      autoprefixer: PACKAGE_VERSIONS.autoprefixer,
+      prisma: PACKAGE_VERSIONS.prisma,
+      tsx: '^4.19.2',
+      eslint: '^9',
+      'eslint-config-next': '^15.1.6',
+    },
+  };
+
+  await writeFile(
+    path.join(projectPath, 'package.json'),
+    JSON.stringify(packageJson, null, 2)
+  );
+
+  // Generate tsconfig.json
+  const tsConfig = {
+    compilerOptions: {
+      target: 'ES2017',
+      lib: ['dom', 'dom.iterable', 'esnext'],
+      allowJs: true,
+      skipLibCheck: true,
+      strict: true,
+      noEmit: true,
+      esModuleInterop: true,
+      module: 'esnext',
+      moduleResolution: 'bundler',
+      resolveJsonModule: true,
+      isolatedModules: true,
+      jsx: 'preserve',
+      incremental: true,
+      plugins: [
+        {
+          name: 'next',
+        },
+      ],
+      paths: {
+        '@/*': ['./src/*'],
+      },
+    },
+    include: ['next-env.d.ts', '**/*.ts', '**/*.tsx', '.next/types/**/*.ts'],
+    exclude: ['node_modules'],
+  };
+
+  await writeFile(
+    path.join(projectPath, 'tsconfig.json'),
+    JSON.stringify(tsConfig, null, 2)
+  );
+
+  // Generate next.config.js
+  const nextConfig = `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    serverActions: {
+      bodySizeLimit: '2mb',
+    },
+  },
+};
+
+export default nextConfig;
+`;
+
+  await writeFile(path.join(projectPath, 'next.config.js'), nextConfig);
+
+  // Generate tailwind.config.ts
+  const tailwindConfig = `import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default config;
+`;
+
+  await writeFile(path.join(projectPath, 'tailwind.config.ts'), tailwindConfig);
+
+  // Generate postcss.config.mjs
+  const postcssConfig = `/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;
+`;
+
+  await writeFile(path.join(projectPath, 'postcss.config.mjs'), postcssConfig);
+
+  // Generate app/globals.css
+  const globalsCss = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/globals.css'), globalsCss);
+
+  // Generate app/layout.tsx
+  const layoutTsx = `import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "${projectName}",
+  description: "Built with SoloStack - The complete SaaS boilerplate",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/layout.tsx'), layoutTsx);
+
+  // Generate app/page.tsx
+  const pageTsx = `export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-24">
+      <div className="z-10 max-w-5xl w-full items-center justify-center font-mono text-sm">
+        <h1 className="text-4xl font-bold text-center mb-4">
+          Welcome to ${projectName}
+        </h1>
+        <p className="text-center text-muted-foreground">
+          Built with SoloStack - Your Next.js SaaS boilerplate
+        </p>
+        <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="p-6 border rounded-lg">
+            <h2 className="text-xl font-semibold mb-2">✅ Authentication</h2>
+            <p className="text-sm text-muted-foreground">
+              NextAuth.js configured with email and OAuth providers
+            </p>
+          </div>
+          <div className="p-6 border rounded-lg">
+            <h2 className="text-xl font-semibold mb-2">✅ Database</h2>
+            <p className="text-sm text-muted-foreground">
+              Prisma + PostgreSQL ready to use
+            </p>
+          </div>
+          <div className="p-6 border rounded-lg">
+            <h2 className="text-xl font-semibold mb-2">✅ Payments</h2>
+            <p className="text-sm text-muted-foreground">
+              Stripe integration for subscriptions
+            </p>
+          </div>
+          <div className="p-6 border rounded-lg">
+            <h2 className="text-xl font-semibold mb-2">✅ Emails</h2>
+            <p className="text-sm text-muted-foreground">
+              Resend configured for transactional emails
+            </p>
+          </div>
+        </div>
+        <div className="mt-8 text-center">
+          <p className="text-sm text-muted-foreground">
+            Get started by editing <code className="font-mono bg-muted px-2 py-1 rounded">src/app/page.tsx</code>
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/page.tsx'), pageTsx);
+
+  // Generate .env.example
+  const envExample = `# Database
+DATABASE_URL="postgresql://user:password@localhost:5432/dbname"
+# For cloud databases, add ?sslmode=require to the connection string
+
+# NextAuth
+NEXTAUTH_SECRET="" # Generate with: openssl rand -base64 32
+NEXTAUTH_URL="http://localhost:3000"
+# In production, set to your domain: https://yourdomain.com
+
+# Stripe
+STRIPE_SECRET_KEY="sk_test_..."
+STRIPE_WEBHOOK_SECRET="whsec_..."
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."
+# Create price IDs in Stripe Dashboard -> Products
+STRIPE_PRO_PRICE_ID="price_..." # Monthly Pro plan price ID
+STRIPE_ENTERPRISE_PRICE_ID="price_..." # Monthly Enterprise plan price ID
+
+# Resend
+RESEND_API_KEY="re_..."
+FROM_EMAIL="onboarding@resend.dev" # Use your verified domain
+
+# OAuth Providers (Optional)
+# Google: https://console.cloud.google.com/apis/credentials
+GOOGLE_CLIENT_ID=""
+GOOGLE_CLIENT_SECRET=""
+# GitHub: https://github.com/settings/developers
+GITHUB_CLIENT_ID=""
+GITHUB_CLIENT_SECRET=""
+`;
+
+  await writeFile(path.join(projectPath, '.env.example'), envExample);
+
+  // Generate README.md
+  const readme = `# ${projectName}
+
+Built with [SoloStack](https://github.com/yourusername/create-solostack) - The complete SaaS boilerplate for indie hackers.
+
+## Features
+
+- ✅ **Next.js 15** with App Router
+- ✅ **TypeScript** for type safety
+- ✅ **Tailwind CSS** for styling
+- ✅ **Prisma** + PostgreSQL for database
+- ✅ **NextAuth.js** for authentication
+- ✅ **Stripe** for payments
+- ✅ **Resend** for emails
+- ✅ **shadcn/ui** components
+
+## Getting Started
+
+### 1. Install dependencies
+
+\`\`\`bash
+npm install
+\`\`\`
+
+### 2. Set up environment variables
+
+\`\`\`bash
+cp .env.example .env
+\`\`\`
+
+Edit \`.env\` and add your own values.
+
+### 3. Set up the database
+
+\`\`\`bash
+npm run db:push
+npm run db:seed
+\`\`\`
+
+### 4. Run the development server
+
+\`\`\`bash
+npm run dev
+\`\`\`
+
+Open [http://localhost:3000](http://localhost:3000) with your browser.
+
+## Project Structure
+
+\`\`\`
+${projectName}/
+├── prisma/              # Database schema and migrations
+├── public/              # Static assets
+├── src/
+│   ├── app/            # Next.js app directory
+│   │   ├── api/        # API routes
+│   │   ├── (auth)/     # Auth pages
+│   │   └── dashboard/  # Protected pages
+│   ├── components/     # React components
+│   └── lib/            # Utilities and configurations
+└── package.json
+\`\`\`
+
+## Available Scripts
+
+- \`npm run dev\` - Start development server
+- \`npm run build\` - Build for production
+- \`npm run start\` - Start production server
+- \`npm run lint\` - Run ESLint
+- \`npm run db:push\` - Push schema changes to database
+- \`npm run db:seed\` - Seed database with sample data
+- \`npm run db:studio\` - Open Prisma Studio
+
+## Learn More
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [NextAuth.js Documentation](https://next-auth.js.org)
+- [Prisma Documentation](https://www.prisma.io/docs)
+- [Stripe Documentation](https://stripe.com/docs)
+- [Resend Documentation](https://resend.com/docs)
+
+## License
+
+MIT
+`;
+
+  await writeFile(path.join(projectPath, 'README.md'), readme);
+
+  // Create lib/utils.ts for cn helper
+  const utilsTs = `import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/lib/utils.ts'), utilsTs);
+
+  // Create next-auth.d.ts for type definitions
+  const nextAuthTypes = `import { DefaultSession } from "next-auth";
+
+declare module "next-auth" {
+  interface Session {
+    user: {
+      id: string;
+      role: string;
+    } & DefaultSession["user"];
+  }
+}
+
+declare module "next-auth/jwt" {
+  interface JWT {
+    id: string;
+    role: string;
+  }
+}
+`;
+
+  await writeFile(path.join(projectPath, 'next-auth.d.ts'), nextAuthTypes);
+
+  // Create global error boundary
+  const errorPage = `'use client';
+
+import { useEffect } from 'react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error('Application error:', error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 px-4">
+      <div className="w-full max-w-md text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">Something went wrong!</h1>
+        <p className="text-gray-600 mb-8">
+          We're sorry, but something unexpected happened. Please try again.
+        </p>
+        <button
+          onClick={() => reset()}
+          className="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500"
+        >
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/error.tsx'), errorPage);
+
+  // Create not-found page
+  const notFoundPage = `import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 px-4">
+      <div className="w-full max-w-md text-center">
+        <h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
+        <h2 className="text-2xl font-semibold text-gray-700 mb-4">Page Not Found</h2>
+        <p className="text-gray-600 mb-8">
+          The page you're looking for doesn't exist or has been moved.
+        </p>
+        <Link
+          href="/"
+          className="inline-block rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500"
+        >
+          Go Home
+        </Link>
+      </div>
+    </div>
+  );
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/not-found.tsx'), notFoundPage);
+
+  // Create root loading state
+  const loadingPage = `export default function Loading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50">
+      <div className="text-center">
+        <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-indigo-600 border-r-transparent"></div>
+        <p className="mt-4 text-sm text-gray-600">Loading...</p>
+      </div>
+    </div>
+  );
+}
+`;
+
+  await writeFile(path.join(projectPath, 'src/app/loading.tsx'), loadingPage);
+}