@digilogiclabs/create-saas-app 1.0.1

package/src/templates/web/base/template/README.md

@@ -0,0 +1,68 @@
+# {{titleCaseName}}
+
+{{description}}
+
+## Getting Started
+
+First, 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.
+
+## Features
+
+- ⚡ **Next.js 14** - React framework with App Router
+- 🎨 **Tailwind CSS** - Utility-first CSS framework
+- 🔒 **{{#auth}}{{#firebase}}Firebase{{/firebase}}{{#supabase}}Supabase{{/supabase}}{{/auth}} Auth** - Authentication ready
+- 📱 **Responsive Design** - Mobile-first approach
+- 🌙 **Dark Mode** - Built-in theme switching
+- 📦 **TypeScript** - Type-safe development
+- 🎯 **ESLint & Prettier** - Code quality tools
+
+## Project Structure
+
+```
+src/
+├── app/                 # Next.js App Router
+│   ├── globals.css     # Global styles
+│   ├── layout.tsx      # Root layout
+│   └── page.tsx        # Home page
+├── components/         # React components
+│   ├── ui/            # UI components
+│   └── providers/     # Context providers
+├── lib/               # Utility functions
+├── hooks/             # Custom React hooks
+└── types/             # TypeScript definitions
+```
+
+## Environment Variables
+
+Copy `.env.example` to `.env.local` and fill in your configuration:
+
+```bash
+cp .env.example .env.local
+```
+
+## Deployment
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new).
+
+Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+## Learn More
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [{{#auth}}{{#firebase}}Firebase Documentation{{/firebase}}{{#supabase}}Supabase Documentation{{/supabase}}{{/auth}}]({{#auth}}{{#firebase}}https://firebase.google.com/docs{{/firebase}}{{#supabase}}https://supabase.com/docs{{/supabase}}{{/auth}})
+
+## Support
+
+For support, email support@digilogiclabs.com or join our Discord community.
+

package/src/templates/web/base/template/next.config.js

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

package/src/templates/web/base/template/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}} (with Platform Core + UI + Auth + Payments)",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "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/platform-core": "^0.1.0",
+    "@digilogiclabs/saas-factory-ui": "^0.27.3",
+    "@digilogiclabs/saas-factory-auth": "^1.0.6",
+    "@digilogiclabs/saas-factory-payments": "^1.2.8",
+    "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",
+    "@radix-ui/react-slot": "^1.0.2",
+    "tailwindcss-animate": "^1.0.7",
+    "lucide-react": "^0.542.0",
+    "zod": "^3.22.4",
+    "firebase": "^10.0.0",
+    "@supabase/supabase-js": "^2.0.0"
+  },
+  "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",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.5.0",
+    "vitest": "^1.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@testing-library/react": "^16.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/src/templates/web/base/template/postcss.config.js

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

package/src/templates/web/base/template/src/app/auth/callback/route.ts

@@ -0,0 +1,18 @@
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+import type { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get('code');
+
+  if (code) {
+    const supabase = createRouteHandlerClient({ cookies });
+    await supabase.auth.exchangeCodeForSession(code);
+  }
+
+  // URL to redirect to after sign in process completes
+  return NextResponse.redirect(requestUrl.origin);
+}

package/src/templates/web/base/template/src/app/checkout/page.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import React from 'react';
+import { useStripe } from '@digilogiclabs/saas-factory-payments';
+import { Button } from '@/components/ui/button';
+import { 
+  PageTransition,
+  MobileContainer,
+  TouchInput,
+  MobileForm,
+  SwipeableCard,
+  NetworkAwareContent,
+  useNetworkInfo
+} from '@digilogiclabs/saas-factory-ui';
+import { CreditCard, Zap } from 'lucide-react';
+
+export default function CheckoutPage() {
+  const { handleCheckout } = useStripe();
+  const networkInfo = useNetworkInfo();
+
+  const onCheckout = async () => {
+    await handleCheckout({
+      priceId: 'price_12345', // Replace with your actual price ID
+      returnUrl: `${window.location.origin}/dashboard`,
+    });
+  };
+
+  return (
+    <PageTransition type="slide" direction="up" duration={350}>
+      <div className="flex items-center justify-center min-h-screen bg-gray-100">
+        <MobileContainer className="w-full max-w-md">
+          <NetworkAwareContent
+            showOnSlow={
+              <div className="p-6 bg-white rounded-lg shadow-md">
+                <div className="flex items-center gap-2 mb-4">
+                  <CreditCard className="h-6 w-6 text-blue-600" />
+                  <h1 className="text-xl font-bold">Checkout</h1>
+                </div>
+                <p className="mb-6 text-gray-600">
+                  Simplified checkout for slower connections.
+                </p>
+                <Button 
+                  onClick={onCheckout} 
+                  className="w-full"
+                  size="lg"
+                >
+                  Proceed to Checkout
+                </Button>
+              </div>
+            }
+          >
+            <SwipeableCard
+              leftActions={[
+                { 
+                  id: 'back', 
+                  label: 'Back', 
+                  onAction: () => window.history.back(),
+                  color: 'gray'
+                }
+              ]}
+              rightActions={[
+                { 
+                  id: 'proceed', 
+                  label: 'Pay Now', 
+                  onAction: onCheckout,
+                  color: 'green'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <div className="p-8 bg-white rounded-lg shadow-md">
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="p-3 bg-blue-100 rounded-full">
+                    <Zap className="h-6 w-6 text-blue-600" />
+                  </div>
+                  <div>
+                    <h1 className="text-2xl font-bold">Premium Checkout</h1>
+                    <p className="text-sm text-gray-500">
+                      {networkInfo?.effectiveType && `${networkInfo.effectiveType.toUpperCase()} connection`}
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="space-y-4 mb-6">
+                  <div className="p-4 bg-blue-50 rounded-lg">
+                    <h3 className="font-semibold text-blue-900">Pro Plan</h3>
+                    <p className="text-blue-700">$29/month • All features included</p>
+                  </div>
+                  
+                  <div className="text-sm text-gray-600">
+                    <p>✓ Touch-optimized checkout experience</p>
+                    <p>✓ Network-aware performance</p>
+                    <p>✓ Secure payment processing</p>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <Button 
+                    onClick={onCheckout} 
+                    className="w-full"
+                    size="lg"
+                  >
+                    Proceed to Checkout
+                  </Button>
+                  
+                  <p className="text-xs text-center text-gray-500">
+                    Swipe left to go back • Swipe right to pay now
+                  </p>
+                </div>
+              </div>
+            </SwipeableCard>
+          </NetworkAwareContent>
+        </MobileContainer>
+      </div>
+    </PageTransition>
+  );
+}

package/src/templates/web/base/template/src/app/dashboard/page.tsx

@@ -0,0 +1,366 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { 
+  PageTransition,
+  MobileContainer,
+  ResponsiveGrid,
+  PullToRefresh,
+  LazyImage,
+  VirtualScrollList,
+  SwipeableCard,
+  NetworkAwareContent,
+  OfflineWrapper,
+  useNetworkInfo,
+  useOfflineState,
+  DashboardLayout,
+  CommandPalette,
+  Tour
+} from '@digilogiclabs/saas-factory-ui';
+import { 
+  BarChart3, 
+  Users, 
+  DollarSign, 
+  TrendingUp, 
+  Settings, 
+  Archive,
+  Star,
+  Trash2,
+  Wifi,
+  WifiOff,
+  Home,
+  FileText,
+  Activity 
+} from 'lucide-react';
+
+// Mock data for demonstration
+const mockActivityData = Array.from({ length: 50 }, (_, i) => ({
+  id: i + 1,
+  title: `Activity ${i + 1}`,
+  description: `This is a sample activity item #${i + 1}`,
+  timestamp: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString(),
+  type: ['user', 'sale', 'system'][Math.floor(Math.random() * 3)],
+  avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`
+}));
+
+export default function DashboardPage() {
+  const { user } = useAuth();
+  
+  const sidebarNavigation = [
+    { name: 'Dashboard', href: '/dashboard', icon: Home, current: true },
+    { name: 'Analytics', href: '/dashboard/analytics', icon: BarChart3 },
+    { name: 'Reports', href: '/dashboard/reports', icon: FileText },
+    { name: 'Activity', href: '/dashboard/activity', icon: Activity },
+    { name: 'Settings', href: '/settings', icon: Settings }
+  ]
+
+  const tourSteps = [
+    {
+      target: '[data-tour="overview"]',
+      title: 'Mobile-First Dashboard',
+      content: 'This dashboard is optimized for mobile devices with offline support and responsive design.'
+    },
+    {
+      target: '[data-tour="stats"]',
+      title: 'Network-Aware Stats',
+      content: 'Statistics automatically adapt based on your network connection speed.'
+    },
+    {
+      target: '[data-tour="activity"]',
+      title: 'Interactive Activity Feed',
+      content: 'Swipe left or right on activity items to archive, star, or delete them.'
+    }
+  ]
+  
+  const lazyImageConfig = {
+    mobileOptimization: {
+      quality: 80,
+      format: "webp"
+    }
+  };
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
+  const [activityData, setActivityData] = useState(mockActivityData);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    setIsRefreshing(false);
+  };
+
+  const handleArchive = (id: number) => {
+    setActivityData(prev => prev.filter(item => item.id !== id));
+  };
+
+  const handleStar = (id: number) => {
+    console.log('Starred item:', id);
+  };
+
+  const handleDelete = (id: number) => {
+    setActivityData(prev => prev.filter(item => item.id !== id));
+  };
+
+  const stats = [
+    {
+      title: 'Total Users',
+      value: '2,543',
+      change: '+12%',
+      icon: Users,
+      color: 'blue'
+    },
+    {
+      title: 'Revenue',
+      value: '$12,456',
+      change: '+8%',
+      icon: DollarSign,
+      color: 'green'
+    },
+    {
+      title: 'Growth',
+      value: '23.5%',
+      change: '+2.1%',
+      icon: TrendingUp,
+      color: 'purple'
+    },
+    {
+      title: 'Analytics',
+      value: '1,234',
+      change: '+5%',
+      icon: BarChart3,
+      color: 'orange'
+    }
+  ];
+  const gridConfig = {
+    columns_1_2: { base: 1, md: 2 },
+    columns_1_3: { base: 1, md: 3 },
+    columns_1_sm2: { base: 1, sm: 2 },
+    columns_1_sm2_md3: { base: 1, sm: 2, md: 3 },
+    columns_1_sm2_md4: { base: 1, sm: 2, md: 4 },
+    columns_2_2: { base: 2, md: 2 },
+    columns_2_md3: { base: 2, md: 3 },
+    columns_2_md4: { base: 2, md: 4 }
+  };
+
+
+  return (
+    <DashboardLayout
+      navigation={sidebarNavigation}
+      headerActions={[
+        <CommandPalette key="command-palette" />,
+        <Tour key="tour" steps={tourSteps} />
+      ]}
+    >
+      <PageTransition type="slide" direction="horizontal" duration={300}>
+        <OfflineWrapper
+          cacheStrategy="stale-while-revalidate"
+          showOfflineIndicator={true}
+          backgroundSync={true}
+        >
+          <PullToRefresh 
+            onRefresh={handleRefresh}
+            threshold={80}
+            loadingIndicator="spinner"
+            hapticOnTrigger={true}
+            networkAware={true}
+          >
+            <div className="min-h-screen bg-gray-50">
+              <MobileContainer className="py-6">
+                {/* Header */}
+                <div className="mb-6" data-tour="overview">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h1 className="text-2xl font-bold text-gray-900">
+                      Welcome back, {user?.email?.split('@')[0]}
+                    </h1>
+                    <p className="text-gray-600 flex items-center gap-2">
+                      {isOnline ? (
+                        <>
+                          <Wifi className="h-4 w-4 text-green-600" />
+                          <span>Online</span>
+                        </>
+                      ) : (
+                        <>
+                          <WifiOff className="h-4 w-4 text-red-600" />
+                          <span>Offline</span>
+                        </>
+                      )}
+                      {networkInfo?.effectiveType && (
+                        <span className="text-xs bg-gray-200 px-2 py-1 rounded">
+                          {networkInfo.effectiveType.toUpperCase()}
+                        </span>
+                      )}
+                    </p>
+                  </div>
+                  <Button variant="outline" size="icon">
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Stats Grid */}
+              <div data-tour="stats">
+                <NetworkAwareContent
+                showOnSlow={
+                  <ResponsiveGrid columns={gridConfig.columns_2_2} gap="sm" className="mb-6">
+                    {stats.slice(0, 2).map((stat, index) => (
+                      <Card key={index}>
+                        <CardContent className="p-4">
+                          <div className="flex items-center gap-2">
+                            <stat.icon className={`h-5 w-5 text-${stat.color}-600`} />
+                            <div>
+                              <p className="text-sm font-medium text-gray-600">{stat.title}</p>
+                              <p className="text-lg font-bold">{stat.value}</p>
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </ResponsiveGrid>
+                }
+              >
+                <ResponsiveGrid columns={gridConfig.columns_2_md4} gap="md" className="mb-6">
+                  {stats.map((stat, index) => (
+                    <Card key={index}>
+                      <CardContent className="p-4">
+                        <div className="flex items-center justify-between mb-2">
+                          <stat.icon className={`h-5 w-5 text-${stat.color}-600`} />
+                          <span className="text-sm text-green-600 font-medium">
+                            {stat.change}
+                          </span>
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium text-gray-600">{stat.title}</p>
+                          <p className="text-2xl font-bold">{stat.value}</p>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </ResponsiveGrid>
+              </NetworkAwareContent>
+              </div>
+
+              {/* Activity Feed */}
+              <Card className="mb-6" data-tour="activity">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <BarChart3 className="h-5 w-5" />
+                    Recent Activity
+                  </CardTitle>
+                  <CardDescription>
+                    Swipe left on items to archive or star them
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="p-0">
+                  <VirtualScrollList
+                    items={activityData}
+                    itemHeight={80}
+                    containerHeight={400}
+                    bufferSize={5}
+                    renderItem={(item) => (
+                      <SwipeableCard
+                        key={item.id}
+                        leftActions={[
+                          {
+                            id: 'archive',
+                            label: 'Archive',
+                            onAction: () => handleArchive(item.id),
+                            color: 'blue',
+                            icon: Archive
+                          },
+                          {
+                            id: 'star',
+                            label: 'Star',
+                            onAction: () => handleStar(item.id),
+                            color: 'yellow',
+                            icon: Star
+                          }
+                        ]}
+                        rightActions={[
+                          {
+                            id: 'delete',
+                            label: 'Delete',
+                            onAction: () => handleDelete(item.id),
+                            color: 'red',
+                            icon: Trash2
+                          }
+                        ]}
+                        threshold={50}
+                        hapticFeedback={true}
+                        showActionLabels={true}
+                      >
+                        <div className="flex items-center gap-3 p-4 border-b">
+                          <LazyImage
+                            src={item.avatar}
+                            alt={`Activity ${item.id}`}
+                            className="w-10 h-10 rounded-full"
+                            placeholder="skeleton"
+                            webpSupport={true}
+                            mobileOptimization={lazyImageConfig.mobileOptimization}
+                          />
+                          <div className="flex-1 min-w-0">
+                            <h4 className="font-medium text-gray-900 truncate">
+                              {item.title}
+                            </h4>
+                            <p className="text-sm text-gray-600 truncate">
+                              {item.description}
+                            </p>
+                            <p className="text-xs text-gray-400">
+                              {new Date(item.timestamp).toLocaleDateString()}
+                            </p>
+                          </div>
+                          <div className={`px-2 py-1 rounded-full text-xs ${
+                            item.type === 'user' ? 'bg-blue-100 text-blue-800' :
+                            item.type === 'sale' ? 'bg-green-100 text-green-800' :
+                            'bg-gray-100 text-gray-800'
+                          }`}>
+                            {item.type}
+                          </div>
+                        </div>
+                      </SwipeableCard>
+                    )}
+                    onEndReached={() => {
+                      console.log('Loading more items...');
+                    }}
+                    mobileOptimized={true}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Quick Actions */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Quick Actions</CardTitle>
+                  <CardDescription>
+                    Common tasks and shortcuts
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <ResponsiveGrid columns={gridConfig.columns_2_md3} gap="sm">
+                    <Button variant="outline" className="h-20 flex flex-col gap-2">
+                      <Users className="h-5 w-5" />
+                      <span className="text-xs">Manage Users</span>
+                    </Button>
+                    <Button variant="outline" className="h-20 flex flex-col gap-2">
+                      <DollarSign className="h-5 w-5" />
+                      <span className="text-xs">View Revenue</span>
+                    </Button>
+                    <Button variant="outline" className="h-20 flex flex-col gap-2">
+                      <BarChart3 className="h-5 w-5" />
+                      <span className="text-xs">Analytics</span>
+                    </Button>
+                  </ResponsiveGrid>
+                </CardContent>
+              </Card>
+            </MobileContainer>
+          </div>
+        </PullToRefresh>
+      </OfflineWrapper>
+    </PageTransition>
+    </DashboardLayout>
+  );
+}