@digilogiclabs/create-saas-app 1.0.1

package/src/templates/web/ui-auth/template/tailwind.config.js

@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+    '../../node_modules/@digilogiclabs/saas-factory-ui/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [],
+}

package/src/templates/web/ui-auth/template/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "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"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/components/*": ["./src/components/*"],
+      "@/lib/*": ["./src/lib/*"],
+      "@/hooks/*": ["./src/hooks/*"],
+      "@/types/*": ["./src/types/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+

package/src/templates/web/ui-auth/template/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    globals: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})

package/src/templates/web/ui-auth/template.backup/.env.example

@@ -0,0 +1,15 @@
+# Auth Configuration
+NEXT_PUBLIC_AUTH_PROVIDER=supabase|firebase
+
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+
+# Firebase
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+
+# Payments
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+STRIPE_SECRET_KEY=

package/src/templates/web/ui-auth/template.backup.20250817/.env.example

@@ -0,0 +1,15 @@
+# Auth Configuration
+NEXT_PUBLIC_AUTH_PROVIDER=supabase|firebase
+
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+
+# Firebase
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+
+# Payments
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+STRIPE_SECRET_KEY=

package/src/templates/web/ui-auth-ai/template/.env.example

@@ -0,0 +1,18 @@
+# Supabase Configuration
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
+
+# AI Gateway Configuration  
+AI_GATEWAY_URL=http://localhost:3001
+{{#ai.enabled}}
+
+# AI Provider Configuration ({{ai.provider}})
+# Add your API key for the selected provider:
+# For OpenAI: OPENAI_API_KEY=your_openai_api_key
+# For Anthropic: ANTHROPIC_API_KEY=your_anthropic_api_key  
+# For Gemini: GOOGLE_API_KEY=your_google_api_key
+
+# Redis Configuration (for AI job processing)
+REDIS_URL=redis://localhost:6379
+{{/ai.enabled}}

package/src/templates/web/ui-auth-ai/template/README.md

@@ -0,0 +1,170 @@
+# {{titleCaseName}}
+
+{{description}}
+
+## Features
+
+{{#ai.enabled}}
+### AI Capabilities
+{{#ai.hasText}}
+- 🤖 **AI Chat**: Interactive AI assistant powered by {{ai.provider}}
+{{/ai.hasText}}
+{{#ai.hasAudio}}
+- 🎵 **Audio Generation**: Create custom audio with AI
+{{/ai.hasAudio}}
+{{#ai.hasVideo}}
+- 🎥 **Video Generation**: Generate videos with AI
+{{/ai.hasVideo}}
+
+### AI Provider: {{ai.provider}}
+This application is configured to use {{ai.provider}} as the AI provider.
+{{/ai.enabled}}
+
+### Authentication
+- 🔐 **Supabase Auth**: Secure authentication with email/password
+- 👤 **User Management**: Complete user registration and login flow
+
+### Tech Stack
+- **Framework**: Next.js 15 with App Router
+- **Styling**: Tailwind CSS
+- **Authentication**: Supabase
+- **Database**: Supabase (PostgreSQL)
+{{#ai.enabled}}
+- **AI SDK**: @digilogiclabs/saas-factory-ai
+{{/ai.enabled}}
+- **Language**: TypeScript
+
+## Getting Started
+
+### Prerequisites
+- Node.js 18+ 
+- npm or yarn
+- Supabase account
+{{#ai.enabled}}
+- {{ai.provider}} API key
+{{/ai.enabled}}
+
+### Installation
+
+1. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+2. **Set up environment variables**
+   ```bash
+   cp .env.example .env.local
+   ```
+   
+   Fill in your environment variables:
+   - `NEXT_PUBLIC_SUPABASE_URL`: Your Supabase project URL
+   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`: Your Supabase anon key
+   - `SUPABASE_SERVICE_ROLE_KEY`: Your Supabase service role key
+   {{#ai.enabled}}
+   - API key for your selected AI provider ({{ai.provider}})
+   - `AI_GATEWAY_URL`: URL of your AI gateway service
+   - `REDIS_URL`: Redis connection URL (for AI job processing)
+   {{/ai.enabled}}
+
+3. **Set up Supabase**
+   - Create a new Supabase project
+   - Run the database migrations (see `migrations/` folder)
+   - Enable authentication in your Supabase dashboard
+
+{{#ai.enabled}}
+4. **Set up AI Gateway** (Optional for development)
+   - Deploy the AI gateway service from `@digilogiclabs/saas-factory-ai-gateway`
+   - Or use the development gateway at `http://localhost:3001`
+{{/ai.enabled}}
+
+5. **Run the development server**
+   ```bash
+   npm run dev
+   ```
+
+6. **Open your browser**
+   Navigate to [http://localhost:3000](http://localhost:3000)
+
+## Project Structure
+
+```
+src/
+├── app/                    # Next.js app router
+│   ├── layout.tsx         # Root layout with providers
+│   ├── page.tsx           # Home page
+│   └── globals.css        # Global styles
+├── components/            
+│   ├── ui/                # Reusable UI components
+{{#ai.enabled}}
+│   ├── ai/                # AI-specific components
+{{/ai.enabled}}
+│   └── auth/              # Authentication components
+├── providers/             # React context providers
+├── hooks/                 # Custom React hooks
+└── lib/                   # Utility functions
+```
+
+{{#ai.enabled}}
+## AI Features Usage
+
+### Chat Interface
+The chat interface provides real-time streaming responses from {{ai.provider}}:
+```tsx
+import { ChatPanel } from '@digilogiclabs/saas-factory-ai/react'
+
+<ChatPanel 
+  placeholder="Ask me anything..."
+  onError={(error) => console.error('Chat error:', error)}
+/>
+```
+
+{{#ai.hasAudio}}
+### Audio Generation
+Generate custom audio with different styles:
+```tsx
+import { AudioGenerator } from '@/components/ai/audio-generator'
+
+<AudioGenerator />
+```
+{{/ai.hasAudio}}
+
+{{#ai.hasVideo}}
+### Video Generation  
+Create videos from text descriptions:
+```tsx
+import { VideoGenerator } from '@/components/ai/video-generator'
+
+<VideoGenerator />
+```
+{{/ai.hasVideo}}
+{{/ai.enabled}}
+
+## Deployment
+
+### Vercel (Recommended)
+1. Push your code to GitHub
+2. Connect your repo to Vercel
+3. Add your environment variables in Vercel dashboard
+4. Deploy!
+
+### Other Platforms
+This is a standard Next.js application and can be deployed to any platform that supports Node.js.
+
+## Learn More
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Supabase Documentation](https://supabase.com/docs)
+{{#ai.enabled}}
+- [SaaS Factory AI Documentation](https://docs.digilogiclabs.com/ai)
+{{/ai.enabled}}
+- [Tailwind CSS](https://tailwindcss.com/docs)
+
+## Support
+
+- 📚 [Documentation](https://docs.digilogiclabs.com)
+- 💬 [Discord Community](https://discord.gg/digilogiclabs)
+- 🐛 [Issue Tracker](https://github.com/DigiLogicLabs/saas-factory-ai/issues)
+
+---
+
+Generated with ❤️ by [Digi Logic Labs](https://digilogiclabs.com)

package/src/templates/web/ui-auth-ai/template/next.config.js

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    serverComponentsExternalPackages: ['@digilogiclabs/saas-factory-ai'],
+  },
+  env: {
+    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+    AI_GATEWAY_URL: process.env.AI_GATEWAY_URL || 'http://localhost:3001',
+  },
+}
+
+module.exports = nextConfig

package/src/templates/web/ui-auth-ai/template/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}}",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build", 
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-auth": "^1.0.3",
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@supabase/supabase-js": "^2.0.0",
+    "@supabase/ssr": "^0.1.0",
+    "clsx": "^2.0.0",
+    "tailwindcss": "^3.3.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",{{#ai.enabled}}
+    "@digilogiclabs/saas-factory-ai": "^4.0.2",
+    "@digilogiclabs/saas-factory-ai-types": "^4.0.2"{{/ai.enabled}}
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0", 
+    "@types/react-dom": "^18.0.0",
+    "eslint": "^8.0.0",
+    "prettier": "^3.0.0",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "author": "{{author}}",
+  "license": "MIT"
+}

package/src/templates/web/ui-auth-ai/template/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/templates/web/ui-auth-ai/template/src/app/globals.css

@@ -0,0 +1,40 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Import SaaS Factory UI styles */
+@import '@digilogiclabs/saas-factory-ui/dist/index.css';
+
+@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%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --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;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/templates/web/ui-auth-ai/template/src/app/layout.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+{{#ai.enabled}}
+import { AIProvider } from '@digilogiclabs/saas-factory-ai/react'
+{{/ai.enabled}}
+import { AuthProvider } from '@/providers/auth-provider'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{titleCaseName}}',
+  description: '{{description}}',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <AuthProvider>
+          {{#ai.enabled}}
+          <AIProvider 
+            config={{
+              gatewayUrl: process.env.NEXT_PUBLIC_AI_GATEWAY_URL || 'http://localhost:3001',
+            }}
+          >
+            {children}
+          </AIProvider>
+          {{/ai.enabled}}
+          {{^ai.enabled}}
+          {children}
+          {{/ai.enabled}}
+        </AuthProvider>
+      </body>
+    </html>
+  )
+}

package/src/templates/web/ui-auth-ai/template/src/app/page.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import { useState } from 'react'
+import { useAuth } from '@/hooks/useAuth'
+import { LoginForm } from '@/components/auth/login-form'
+import { Button } from '@/components/ui/button'
+{{#ai.enabled}}
+import { ChatPanel } from '@digilogiclabs/saas-factory-ai/react'
+{{#ai.hasAudio}}
+import { AudioGenerator } from '@/components/ai/audio-generator'
+{{/ai.hasAudio}}
+{{#ai.hasVideo}}
+import { VideoGenerator } from '@/components/ai/video-generator'
+{{/ai.hasVideo}}
+{{/ai.enabled}}
+
+export default function HomePage() {
+  const { user, signOut } = useAuth()
+  {{#ai.enabled}}
+  const [activeTab, setActiveTab] = useState<'chat' | 'audio' | 'video'>('chat')
+  {{/ai.enabled}}
+
+  if (!user) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="max-w-md w-full space-y-8">
+          <div className="text-center">
+            <h2 className="text-3xl font-extrabold text-gray-900">
+              Welcome to {{titleCaseName}}
+            </h2>
+            {{#ai.enabled}}
+            <p className="mt-2 text-sm text-gray-600">
+              AI-powered SaaS application with {{ai.capabilities.join(', ')}} capabilities
+            </p>
+            {{/ai.enabled}}
+            {{^ai.enabled}}
+            <p className="mt-2 text-sm text-gray-600">
+              Your modern SaaS application
+            </p>
+            {{/ai.enabled}}
+          </div>
+          <LoginForm />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <header className="bg-white shadow">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center py-6">
+            <div className="flex items-center">
+              <h1 className="text-3xl font-bold text-gray-900">
+                {{titleCaseName}}
+              </h1>
+              {{#ai.enabled}}
+              <span className="ml-3 px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
+                AI-Powered
+              </span>
+              {{/ai.enabled}}
+            </div>
+            <div className="flex items-center space-x-4">
+              <span className="text-sm text-gray-700">
+                Welcome, {user.email}
+              </span>
+              <Button onClick={() => signOut()}>
+                Sign Out
+              </Button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        {{#ai.enabled}}
+        {/* AI Capabilities Navigation */}
+        <div className="px-4 py-6 sm:px-0">
+          <div className="border-b border-gray-200">
+            <nav className="-mb-px flex space-x-8">
+              {{#ai.hasText}}
+              <button
+                onClick={() => setActiveTab('chat')}
+                className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                  activeTab === 'chat'
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                💬 AI Chat
+              </button>
+              {{/ai.hasText}}
+              {{#ai.hasAudio}}
+              <button
+                onClick={() => setActiveTab('audio')}
+                className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                  activeTab === 'audio'
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                🎵 Audio Generation
+              </button>
+              {{/ai.hasAudio}}
+              {{#ai.hasVideo}}
+              <button
+                onClick={() => setActiveTab('video')}
+                className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                  activeTab === 'video'
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                🎥 Video Generation
+              </button>
+              {{/ai.hasVideo}}
+            </nav>
+          </div>
+        </div>
+
+        {/* AI Content */}
+        <div className="px-4 py-6 sm:px-0">
+          {{#ai.hasText}}
+          {activeTab === 'chat' && (
+            <div className="bg-white shadow rounded-lg">
+              <div className="px-4 py-5 sm:p-6">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
+                  AI Assistant powered by {{ai.provider}}
+                </h3>
+                <ChatPanel 
+                  className="h-96"
+                  placeholder="Ask me anything..."
+                  onError={(error) => console.error('Chat error:', error)}
+                />
+              </div>
+            </div>
+          )}
+          {{/ai.hasText}}
+          
+          {{#ai.hasAudio}}
+          {activeTab === 'audio' && (
+            <div className="bg-white shadow rounded-lg">
+              <div className="px-4 py-5 sm:p-6">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
+                  AI Audio Generation
+                </h3>
+                <AudioGenerator />
+              </div>
+            </div>
+          )}
+          {{/ai.hasAudio}}
+          
+          {{#ai.hasVideo}}
+          {activeTab === 'video' && (
+            <div className="bg-white shadow rounded-lg">
+              <div className="px-4 py-5 sm:p-6">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
+                  AI Video Generation
+                </h3>
+                <VideoGenerator />
+              </div>
+            </div>
+          )}
+          {{/ai.hasVideo}}
+        </div>
+        {{/ai.enabled}}
+        
+        {{^ai.enabled}}
+        {/* Non-AI Content */}
+        <div className="px-4 py-6 sm:px-0">
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-5 sm:p-6">
+              <h3 className="text-lg leading-6 font-medium text-gray-900">
+                Welcome to your SaaS application
+              </h3>
+              <p className="mt-1 text-sm text-gray-600">
+                This is your dashboard. Start building your application features here.
+              </p>
+              <div className="mt-5">
+                <Button>
+                  Get Started
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+        {{/ai.enabled}}
+      </main>
+    </div>
+  )
+}