@digilogiclabs/create-saas-app 1.5.0 → 1.5.2

package/dist/templates/web/ui-auth-payments/template/.env.example

@@ -1,15 +0,0 @@
-# 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/dist/templates/web/ui-auth-payments/template/README.md

@@ -1,165 +0,0 @@
-# {{titleCaseName}}
-
-{{description}}
-
-This is a Next.js 15 project created with the **UI + Auth + Payments** template from `@digilogiclabs/create-saas-app`. It includes:
-
-- 🎨 **UI Components** - @digilogiclabs/saas-factory-ui v0.7.3
-- 🔐 **Authentication** - @digilogiclabs/saas-factory-auth v0.4.4  
-- 💳 **Payments** - @digilogiclabs/saas-factory-payments v0.3.0
-- ⚡ **Next.js 15** - Latest React framework
-- 🎯 **TypeScript** - Full type safety
-- 🎨 **Tailwind CSS** - Utility-first styling
-- 🌙 **Dark Mode** - Built-in theme support
-
-## Features
-
-### Authentication
-- User registration and login
-- Protected routes
-- Session management
-- Sign out functionality
-
-### Payments Integration
-- Subscription plans display
-- Payment form with Stripe integration
-- Billing history
-- Payment method management
-- Subscription management
-
-### UI Components
-- Modern, accessible components
-- Dark/light theme support
-- Responsive design
-- TypeScript definitions
-
-## Getting Started
-
-### Prerequisites
-- Node.js 18+ 
-- npm, yarn, or pnpm
-
-### Installation
-
-1. Install dependencies:
-```bash
-npm install
-# or
-yarn install
-# or
-pnpm install
-```
-
-2. Set up environment variables:
-```bash
-cp .env.example .env.local
-```
-
-Edit `.env.local` with your configuration:
-```env
-# Authentication (choose one)
-NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
-NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
-NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
-
-# OR
-
-NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
-NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
-
-# Payments
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
-STRIPE_SECRET_KEY=your_stripe_secret_key
-```
-
-3. Run the development server:
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-## Available Pages
-
-- `/` - Home page with feature showcase
-- `/login` - User authentication
-- `/signup` - User registration  
-- `/checkout` - Subscription plans and payment
-- `/billing` - Subscription and billing management
-
-## Package Integration
-
-### UI Package (@digilogiclabs/saas-factory-ui)
-```tsx
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-
-<Button variant="primary">Click me</Button>
-<Card>Content here</Card>
-```
-
-### Auth Package (@digilogiclabs/saas-factory-auth)
-```tsx
-import { useAuth } from '@digilogiclabs/saas-factory-auth'
-
-const { user, signIn, signOut, loading } = useAuth()
-```
-
-### Payments Package (@digilogiclabs/saas-factory-payments)
-```tsx
-import { 
-  PaymentForm, 
-  SubscriptionPlans, 
-  SubscriptionManager 
-} from '@digilogiclabs/saas-factory-payments'
-
-<SubscriptionPlans onPlanSelect={handlePlanSelect} />
-<PaymentForm onSuccess={handleSuccess} onError={handleError} />
-<SubscriptionManager onSubscriptionChange={handleChange} />
-```
-
-## Project Structure
-
-```
-src/
-├── app/                    # Next.js 15 app directory
-│   ├── billing/           # Billing and subscription management
-│   ├── checkout/          # Payment and subscription selection
-│   ├── login/             # Authentication pages
-│   ├── signup/            
-│   └── layout.tsx         # Root layout with providers
-├── components/
-│   ├── providers/         # App-wide providers (Auth, Payments, Theme)
-│   ├── shared/            # Shared components (Header, etc.)
-│   └── ui/                # UI components
-└── lib/                   # Utilities and configurations
-```
-
-## Deployment
-
-### Vercel (Recommended)
-1. Push your code to GitHub
-2. Connect your repository to Vercel
-3. Add 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)
-- [Digi Logic Labs Documentation](https://docs.digilogiclabs.com)
-- [SaaS Factory UI Components](https://ui.digilogiclabs.com)
-- [SaaS Factory Auth Guide](https://auth.digilogiclabs.com)
-- [SaaS Factory Payments Guide](https://payments.digilogiclabs.com)
-
-## Support
-
-- 📚 [Documentation](https://docs.digilogiclabs.com)
-- 💬 [Discord Community](https://discord.gg/digilogiclabs)
-- 🐛 [Report Issues](https://github.com/DigiLogicLabs/create-saas-app/issues)
-

package/dist/templates/web/ui-auth-payments/template/next.config.js

@@ -1,12 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  images: {
-    domains: ['localhost'],
-  },
-  env: {
-    CUSTOM_KEY: process.env.CUSTOM_KEY,
-  },
-}
-
-module.exports = nextConfig
-

package/dist/templates/web/ui-auth-payments/template/package.json

@@ -1,52 +0,0 @@
-{
-  "name": "{{packageName}}",
-  "version": "0.1.0",
-  "description": "{{description}} (with UI Package v0.11.1 + Auth v1.0.0 + Payments)",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --turbo",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "type-check": "tsc --noEmit",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:run": "vitest run"
-  },
-  "dependencies": {
-    "next": "^15.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.11.1",
-    "@digilogiclabs/saas-factory-auth": "^1.0.0",
-    "@digilogiclabs/saas-factory-payments": "^1.0.0",
-    "stripe": "^14.0.0",
-    "tailwindcss": "^3.3.0",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31",
-    "clsx": "^2.0.0",
-    "class-variance-authority": "^0.7.0",
-    "tailwind-merge": "^2.0.0",
-    "next-themes": "^0.2.1",
-    "lucide-react": "^0.542.0",
-    "zod": "^3.22.4"
-  },
-  "devDependencies": {
-    "typescript": "^5.0.0",
-    "@types/node": "^20.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "eslint": "^8.0.0",
-    "eslint-config-next": "^15.0.0",
-    "prettier": "^3.0.0",
-    "vitest": "^1.0.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/user-event": "^14.0.0",
-    "jsdom": "^24.0.0"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  }
-}

package/dist/templates/web/ui-auth-payments/template/postcss.config.js

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

package/dist/templates/web/ui-auth-payments/template/src/app/auth/callback/route.ts

@@ -1,12 +0,0 @@
-import { NextResponse } from 'next/server';
-import type { NextRequest } from 'next/server';
-
-export async function GET(request: NextRequest) {
-  const requestUrl = new URL(request.url);
-  
-  // Placeholder auth callback - requires @digilogiclabs/saas-factory-auth package
-  console.log('Auth callback triggered - requires auth package for full functionality');
-  
-  // URL to redirect to after sign in process completes
-  return NextResponse.redirect(requestUrl.origin);
-}

package/dist/templates/web/ui-auth-payments/template/src/app/billing/page.tsx

@@ -1,211 +0,0 @@
-'use client';
-
-import React from 'react';
-import { usePayments, formatCurrency, formatDate } from '@digilogiclabs/saas-factory-payments';
-import { Button, Card } from '@digilogiclabs/saas-factory-ui';
-
-export default function BillingPage() {
-  const { loading } = usePayments();
-
-  const handleSubscriptionChange = () => {
-    console.log('Subscription change requested');
-    // Handle subscription changes (upgrade, downgrade, cancel, resume)
-  };
-
-  const handlePaymentMethodUpdate = () => {
-    console.log('Payment method update requested');
-    // Handle payment method updates (add, edit, delete, set default)
-  };
-
-  const handleInvoiceDownload = (invoiceId: string) => {
-    console.log('Download invoice:', invoiceId);
-    // Handle invoice download
-  };
-
-  // Mock current subscription data - in real app this would come from your backend
-  const currentSubscription = {
-    plan: 'Pro Plan',
-    price: 1999,
-    interval: 'month',
-    status: 'active',
-    nextBilling: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000)
-  };
-
-  // Mock payment methods - in real app this would come from your backend
-  const paymentMethods = [
-    {
-      id: 'pm_123',
-      type: 'card',
-      last4: '4242',
-      brand: 'visa',
-      expiryMonth: 12,
-      expiryYear: 2025,
-      isDefault: true
-    },
-    {
-      id: 'pm_456',
-      type: 'card',
-      last4: '0005',
-      brand: 'mastercard',
-      expiryMonth: 8,
-      expiryYear: 2026,
-      isDefault: false
-    }
-  ];
-
-  // Mock billing history - in real app this would come from your backend
-  const invoices = [
-    {
-      id: 'inv_123',
-      amount: 1999,
-      currency: 'usd',
-      status: 'paid',
-      date: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
-      description: 'Pro Plan - Monthly'
-    },
-    {
-      id: 'inv_456',
-      amount: 1999,
-      currency: 'usd',
-      status: 'paid',
-      date: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000),
-      description: 'Pro Plan - Monthly'
-    },
-    {
-      id: 'inv_789',
-      amount: 999,
-      currency: 'usd',
-      status: 'paid',
-      date: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000),
-      description: 'Basic Plan - Monthly'
-    }
-  ];
-
-  return (
-    <div className="min-h-screen bg-gray-100 py-8">
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="mb-8">
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">Billing & Subscription</h1>
-          <p className="text-xl text-gray-600">Manage your subscription and billing information</p>
-        </div>
-        
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
-          {/* Current Subscription */}
-          <Card className="p-6">
-            <h2 className="text-2xl font-bold mb-6">Current Subscription</h2>
-            <div className="space-y-4">
-              <div>
-                <h3 className="font-semibold">{currentSubscription.plan}</h3>
-                <p className="text-2xl font-bold">
-                  {formatCurrency(currentSubscription.price)}
-                  <span className="text-sm font-normal">/{currentSubscription.interval}</span>
-                </p>
-              </div>
-              <div>
-                <p className="text-sm text-gray-600">Status</p>
-                <span className="inline-block px-2 py-1 bg-green-100 text-green-800 rounded text-sm">
-                  {currentSubscription.status}
-                </span>
-              </div>
-              <div>
-                <p className="text-sm text-gray-600">Next billing date</p>
-                <p>{formatDate(currentSubscription.nextBilling)}</p>
-              </div>
-              <Button 
-                onClick={handleSubscriptionChange}
-                disabled={loading}
-                variant="outline"
-                className="w-full"
-              >
-                Change Plan
-              </Button>
-            </div>
-          </Card>
-
-          {/* Payment Methods */}
-          <Card className="p-6">
-            <h2 className="text-2xl font-bold mb-6">Payment Methods</h2>
-            <div className="space-y-4">
-              {paymentMethods.map((method) => (
-                <div key={method.id} className="flex items-center justify-between p-3 border rounded-lg">
-                  <div className="flex items-center">
-                    <div className="w-8 h-8 bg-blue-100 rounded flex items-center justify-center mr-3">
-                      💳
-                    </div>
-                    <div>
-                      <p className="font-medium">
-                        {method.brand.toUpperCase()} •••• {method.last4}
-                      </p>
-                      <p className="text-sm text-gray-600">
-                        Expires {method.expiryMonth}/{method.expiryYear}
-                        {method.isDefault && <span className="ml-2 text-blue-600">(Default)</span>}
-                      </p>
-                    </div>
-                  </div>
-                  <Button 
-                    onClick={handlePaymentMethodUpdate}
-                    disabled={loading}
-                    variant="outline"
-                    size="sm"
-                  >
-                    Edit
-                  </Button>
-                </div>
-              ))}
-              <Button 
-                onClick={handlePaymentMethodUpdate}
-                disabled={loading}
-                variant="outline"
-                className="w-full"
-              >
-                Add Payment Method
-              </Button>
-            </div>
-          </Card>
-        </div>
-
-        {/* Billing History */}
-        <Card className="p-6">
-          <h2 className="text-2xl font-bold mb-6">Billing History</h2>
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b">
-                  <th className="text-left py-2">Date</th>
-                  <th className="text-left py-2">Description</th>
-                  <th className="text-left py-2">Amount</th>
-                  <th className="text-left py-2">Status</th>
-                  <th className="text-left py-2">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {invoices.map((invoice) => (
-                  <tr key={invoice.id} className="border-b">
-                    <td className="py-3">{formatDate(invoice.date)}</td>
-                    <td className="py-3">{invoice.description}</td>
-                    <td className="py-3">{formatCurrency(invoice.amount)}</td>
-                    <td className="py-3">
-                      <span className="inline-block px-2 py-1 bg-green-100 text-green-800 rounded text-sm">
-                        {invoice.status}
-                      </span>
-                    </td>
-                    <td className="py-3">
-                      <Button
-                        onClick={() => handleInvoiceDownload(invoice.id)}
-                        variant="outline"
-                        size="sm"
-                      >
-                        Download
-                      </Button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </Card>
-      </div>
-    </div>
-  );
-}
-

package/dist/templates/web/ui-auth-payments/template/src/app/checkout/page.tsx

@@ -1,142 +0,0 @@
-'use client';
-
-import React from 'react';
-import { usePayments, formatCurrency } from '@digilogiclabs/saas-factory-payments';
-import { Button, Card } from '@digilogiclabs/saas-factory-ui';
-
-export default function CheckoutPage() {
-  const { loading } = usePayments();
-
-  const handlePlanSelect = (planId: string) => {
-    console.log('Plan selected:', planId);
-    // Handle plan selection - redirect to payment processing
-  };
-
-  const handlePayment = () => {
-    console.log('Processing payment...');
-    // Handle payment processing
-  };
-
-  // Example pricing plans - in real app these would come from your backend/Stripe
-  const plans = [
-    {
-      id: 'basic',
-      name: 'Basic Plan',
-      price: 999, // in cents
-      interval: 'month',
-      features: ['Feature 1', 'Feature 2', 'Feature 3'],
-      stripePriceId: 'price_basic_monthly'
-    },
-    {
-      id: 'pro',
-      name: 'Pro Plan', 
-      price: 1999, // in cents
-      interval: 'month',
-      features: ['All Basic features', 'Feature 4', 'Feature 5', 'Priority support'],
-      popular: true,
-      stripePriceId: 'price_pro_monthly'
-    },
-    {
-      id: 'enterprise',
-      name: 'Enterprise Plan',
-      price: 4999, // in cents
-      interval: 'month',
-      features: ['All Pro features', 'Custom integrations', 'Dedicated support', 'SLA guarantee'],
-      stripePriceId: 'price_enterprise_monthly'
-    }
-  ];
-
-  return (
-    <div className="min-h-screen bg-gray-100 py-8">
-      <div className="max-w-6xl mx-auto px-4">
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">Choose Your Plan</h1>
-          <p className="text-xl text-gray-600">Select the perfect plan for your needs</p>
-        </div>
-        
-        {/* Subscription Plans */}
-        <div className="grid md:grid-cols-3 gap-6 mb-8">
-          {plans.map((plan) => (
-            <Card key={plan.id} className={`p-6 relative ${plan.popular ? 'ring-2 ring-blue-500' : ''}`}>
-              {plan.popular && (
-                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
-                  <span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium">
-                    Most Popular
-                  </span>
-                </div>
-              )}
-              <h3 className="text-xl font-bold mb-2">{plan.name}</h3>
-              <div className="text-3xl font-bold mb-4">
-                {formatCurrency(plan.price)} 
-                <span className="text-sm font-normal">/{plan.interval}</span>
-              </div>
-              <ul className="mb-6 space-y-2">
-                {plan.features.map((feature, index) => (
-                  <li key={index} className="flex items-center">
-                    <span className="text-green-500 mr-2">✓</span>
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-              <Button 
-                onClick={() => handlePlanSelect(plan.id)}
-                disabled={loading}
-                className="w-full"
-                variant={plan.popular ? "default" : "outline"}
-              >
-                {loading ? 'Processing...' : 'Select Plan'}
-              </Button>
-            </Card>
-          ))}
-        </div>
-
-        {/* Payment Form */}
-        <Card className="p-6 max-w-md mx-auto">
-          <h2 className="text-2xl font-bold mb-6">Payment Details</h2>
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium mb-2">Card Number</label>
-              <input 
-                type="text" 
-                placeholder="1234 5678 9012 3456"
-                className="w-full p-3 border rounded-lg"
-                disabled
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium mb-2">Expiry Date</label>
-                <input 
-                  type="text" 
-                  placeholder="MM/YY"
-                  className="w-full p-3 border rounded-lg"
-                  disabled
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-2">CVC</label>
-                <input 
-                  type="text" 
-                  placeholder="123"
-                  className="w-full p-3 border rounded-lg"
-                  disabled
-                />
-              </div>
-            </div>
-            <Button 
-              onClick={handlePayment}
-              disabled={loading}
-              className="w-full"
-            >
-              {loading ? 'Processing...' : 'Complete Payment'}
-            </Button>
-            <p className="text-sm text-gray-600 text-center">
-              This is a demo. Payment processing requires Stripe integration.
-            </p>
-          </div>
-        </Card>
-      </div>
-    </div>
-  );
-}
-

package/dist/templates/web/ui-auth-payments/template/src/app/error.tsx

@@ -1,67 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { RefreshCw, Home, AlertCircle } from 'lucide-react'
-
-interface ErrorProps {
-  error: Error & { digest?: string }
-  reset: () => void
-}
-
-export default function Error({ error, reset }: ErrorProps) {
-  useEffect(() => {
-    // Log the error to an error reporting service
-    console.error('Application error:', error)
-  }, [error])
-
-  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
-      <Card className="w-full max-w-md p-8 text-center">
-        <div className="mb-6">
-          <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mb-4">
-            <AlertCircle className="h-8 w-8 text-red-600 dark:text-red-400" />
-          </div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-            Something went wrong
-          </h1>
-          <p className="text-gray-600 dark:text-gray-300 mb-6">
-            We apologize for the inconvenience. Please try again or return to the home page.
-          </p>
-        </div>
-
-        <div className="space-y-3">
-          <Button
-            onClick={reset}
-            className="w-full"
-            variant="default"
-          >
-            <RefreshCw className="w-4 h-4 mr-2" />
-            Try Again
-          </Button>
-          
-          <Button
-            onClick={() => window.location.href = '/'}
-            variant="outline"
-            className="w-full"
-          >
-            <Home className="w-4 h-4 mr-2" />
-            Go Home
-          </Button>
-        </div>
-
-        {process.env.NODE_ENV === 'development' && (
-          <details className="mt-6 text-left">
-            <summary className="text-sm font-medium text-gray-500 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300">
-              Error Details (Development)
-            </summary>
-            <pre className="mt-2 text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded-md overflow-auto">
-              {error.message}
-              {error.stack}
-            </pre>
-          </details>
-        )}
-      </Card>
-    </div>
-  )
-}