@digilogiclabs/create-saas-app 1.0.1

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

@@ -0,0 +1,67 @@
+'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>
+  )
+}

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

@@ -0,0 +1,95 @@
+@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%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom animations for enhanced visual effects */
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.6s ease-out;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-marquee {
+  animation: marquee 20s linear infinite;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}

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

@@ -0,0 +1,33 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { AppProviders } from '@/components/providers/app-providers'
+import { Header } from '@/components/shared/header'
+import { Footer } from '@/components/shared/footer'
+
+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" suppressHydrationWarning>
+      <body className={`${inter.className} min-h-screen flex flex-col`}>
+        <AppProviders>
+          <Header />
+          <main className="flex-1">
+            {children}
+          </main>
+          <Footer />
+        </AppProviders>
+      </body>
+    </html>
+  )
+}

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

@@ -0,0 +1,38 @@
+import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui'
+import { Loader2 } from 'lucide-react'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="container mx-auto px-4 py-8">
+        {/* Header skeleton */}
+        <div className="mb-8">
+          <SkeletonText className="h-8 w-64 mb-4" />
+          <SkeletonText className="h-4 w-96" />
+        </div>
+
+        {/* Cards grid skeleton */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
+
+        {/* Centered loading spinner */}
+        <div className="flex justify-center">
+          <Card className="w-full max-w-md p-8 text-center">
+            <div className="flex flex-col items-center">
+              <Loader2 className="h-8 w-8 animate-spin text-blue-600 dark:text-blue-400 mb-4" />
+              <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                Loading
+              </h2>
+              <p className="text-sm text-gray-600 dark:text-gray-300">
+                Please wait while we load your content...
+              </p>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,109 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
+import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { useRouter } from 'next/navigation';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const { signIn, signInWithOAuth, loading, error, user } = useAuth();
+  const router = useRouter();
+
+  // Redirect if already logged in
+  React.useEffect(() => {
+    if (user) {
+      router.push('/');
+    }
+  }, [user, router]);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await signIn(email, password);
+      router.push('/');
+    } catch (err) {
+      console.error('Login error:', err);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await signInWithOAuth('google', window.location.origin);
+    } catch (err) {
+      console.error('Google login error:', err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-100">
+        <div>Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <Card className="w-full max-w-md p-8">
+        <h1 className="text-2xl font-bold text-center mb-6">Sign In</h1>
+        
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {error.message}
+          </div>
+        )}
+
+        <form onSubmit={handleLogin} className="space-y-4">
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+              disabled={loading}
+            />
+          </div>
+          <div>
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+              disabled={loading}
+            />
+          </div>
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Signing In...' : 'Sign In'}
+          </Button>
+          <Button 
+            type="button" 
+            variant="outline" 
+            className="w-full"
+            onClick={handleGoogleLogin}
+            disabled={loading}
+          >
+            Sign in with Google
+          </Button>
+        </form>
+
+        <div className="mt-4 text-center">
+          <p className="text-sm text-gray-600">
+            Don&apos;t have an account?{' '}
+            <a href="/signup" className="text-blue-600 hover:underline">
+              Sign up
+            </a>
+          </p>
+        </div>
+      </Card>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,305 @@
+'use client'
+
+import { 
+  Button, 
+  Card,
+  PageTransition,
+  MobileContainer,
+  MobileHero,
+  ResponsiveGrid,
+  NetworkAwareContent,
+  OfflineWrapper,
+  SwipeableCard,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui'
+import { ArrowRight, Zap, Shield, Rocket, CheckCircle, LogOut, User, Wifi, WifiOff, Smartphone } from 'lucide-react'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import Link from 'next/link'
+
+export default function Home() {
+  const { user, signOut, loading } = useAuth()
+  const networkInfo = useNetworkInfo()
+  const isOnline = useOfflineState()
+
+  const projectName = "{{titleCaseName}}"
+  const projectDescription = "{{description}}"
+  
+  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: { base: 2 },
+    columns_2_md3: { base: 2, md: 3 },
+    columns_2_2: { base: 2 },
+    columns_2_md4: { base: 2, md: 4 }
+  }
+  
+  const heroConfig = {
+    badge: {
+      text: "🔒 Secure & Modern",
+      variant: "secondary" as const,
+      icon: CheckCircle
+    },
+    title: {
+      text: `Welcome to ${projectName}`,
+      highlight: projectName,
+      size: "xl" as const
+    },
+    description: `${projectDescription}. Built with modern authentication, responsive design, and seamless user experience across all devices.`
+  }
+
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+    } catch (err) {
+      console.error('Sign out error:', err)
+    }
+  }
+
+  return (
+    <PageTransition type="fade" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="stale-while-revalidate"
+        showOfflineIndicator={true}
+        backgroundSync={true}
+      >
+        <main className="min-h-screen relative overflow-hidden bg-background">
+          {/* Theme-aware gradient background for authentication-focused app */}
+          <div className="absolute inset-0 bg-gradient-to-br from-primary/8 via-background to-secondary/8 dark:from-primary/15 dark:via-background dark:to-secondary/15" />
+          <div className="absolute inset-0 bg-gradient-to-tl from-accent/4 via-transparent to-primary/4 dark:from-accent/8 dark:via-transparent dark:to-primary/8" />
+          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-primary/12 via-transparent to-transparent dark:from-primary/20 dark:via-transparent dark:to-transparent" />
+          {/* Animated auth-themed particles */}
+          <div className="absolute inset-0 opacity-20 dark:opacity-12">
+            <div className="absolute top-1/6 left-1/6 w-56 h-56 bg-primary/40 rounded-full mix-blend-multiply filter blur-3xl animate-pulse dark:bg-primary/60"></div>
+            <div className="absolute bottom-1/5 right-1/4 w-72 h-72 bg-secondary/40 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-2000 dark:bg-secondary/60"></div>
+            <div className="absolute top-1/2 right-1/6 w-48 h-48 bg-accent/40 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-4000 dark:bg-accent/60"></div>
+          </div>
+          {/* Minimal depth overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-transparent via-background/1 to-background/3" />
+          <div className="relative z-10">
+          <MobileContainer className="py-16">
+        {/* Auth Status Bar with Network Info */}
+        <div className="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">
+          <div className="flex items-center gap-2 text-sm">
+            {isOnline ? (
+              <div className="flex items-center gap-2 text-green-600">
+                <Wifi className="w-4 h-4" />
+                <span>Connected</span>
+                {networkInfo?.effectiveType && (
+                  <span className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
+                    {networkInfo.effectiveType.toUpperCase()}
+                  </span>
+                )}
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 text-red-600">
+                <WifiOff className="w-4 h-4" />
+                <span>Offline Mode</span>
+              </div>
+            )}
+          </div>
+
+          {loading ? (
+            <div className="text-sm text-gray-600">Loading auth...</div>
+          ) : user ? (
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+                <User className="w-4 h-4" />
+                Welcome, {user.email}
+              </div>
+              <Button variant="outline" size="sm" onClick={handleSignOut}>
+                <LogOut className="w-4 h-4 mr-2" />
+                Sign Out
+              </Button>
+            </div>
+          ) : (
+            <div className="flex gap-2">
+              <Link href="/login">
+                <Button variant="outline" size="sm">Sign In</Button>
+              </Link>
+              <Link href="/signup">
+                <Button size="sm">Sign Up</Button>
+              </Link>
+            </div>
+          )}
+        </div>
+
+        {/* Hero Section */}
+        <MobileHero
+          badge={heroConfig.badge}
+          title={heroConfig.title}
+          description={heroConfig.description}
+          actions={[
+            {
+              label: "Get Started",
+              icon: ArrowRight,
+              variant: "default",
+              size: "lg"
+            },
+            {
+              label: "Learn More",
+              variant: "outline",
+              size: "lg"
+            }
+          ]}
+          className="text-center mb-16"
+        />
+
+        {/* Component Showcase */}
+        <NetworkAwareContent
+          showOnSlow={
+            <ResponsiveGrid columns={gridConfig.columns_1_sm2} gap="lg" className="mb-16">
+              <SwipeableCard
+                rightActions={[
+                  { 
+                    id: 'explore', 
+                    label: 'Explore', 
+                    onAction: () => console.log('Exploring mobile features'),
+                    color: 'blue'
+                  }
+                ]}
+                threshold={60}
+                hapticFeedback={true}
+                showActionLabels={true}
+              >
+                <Card className="text-center p-6">
+                  <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
+                    <Smartphone className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">Mobile-First UI</h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    Touch-optimized components from @digilogiclabs/saas-factory-ui v0.13.3
+                  </p>
+                </Card>
+              </SwipeableCard>
+              
+              <SwipeableCard
+                rightActions={[
+                  { 
+                    id: 'secure', 
+                    label: 'Secure', 
+                    onAction: () => console.log('Exploring auth features'),
+                    color: 'green'
+                  }
+                ]}
+                threshold={60}
+                hapticFeedback={true}
+                showActionLabels={true}
+              >
+                <Card className="text-center p-6">
+                  <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
+                    <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">Cross-Device Auth</h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    Seamless authentication across web and mobile devices
+                  </p>
+                </Card>
+              </SwipeableCard>
+            </ResponsiveGrid>
+          }
+        >
+          <ResponsiveGrid columns={gridConfig.columns_1_sm2_md3} gap="lg" className="mb-16">
+            <SwipeableCard
+              rightActions={[
+                { 
+                  id: 'demo', 
+                  label: 'Try Demo', 
+                  onAction: () => console.log('Demo UI components'),
+                  color: 'blue'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <Card className="text-center p-6">
+                <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
+                  <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">Touch UI Components</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Mobile-first buttons, cards, and gestures from @digilogiclabs/saas-factory-ui v0.13.3
+                </p>
+              </Card>
+            </SwipeableCard>
+
+            <SwipeableCard
+              rightActions={[
+                { 
+                  id: 'auth', 
+                  label: 'Auth Demo', 
+                  onAction: () => console.log('Demo auth flow'),
+                  color: 'green'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <Card className="text-center p-6">
+                <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
+                  <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">Cross-Device Security</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Secure authentication that works seamlessly across all devices
+                </p>
+              </Card>
+            </SwipeableCard>
+
+            <SwipeableCard
+              rightActions={[
+                { 
+                  id: 'performance', 
+                  label: 'See Speed', 
+                  onAction: () => console.log('Performance demo'),
+                  color: 'purple'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <Card className="text-center p-6">
+                <div className="mx-auto w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+                  <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">Performance First</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Network-aware components with offline support and lazy loading
+                </p>
+              </Card>
+            </SwipeableCard>
+          </ResponsiveGrid>
+        </NetworkAwareContent>
+
+        {/* Button Variants Showcase */}
+        <Card className="max-w-4xl mx-auto p-8">
+          <div className="text-center mb-6">
+            <h2 className="text-2xl font-bold mb-2">UI Package Component Showcase</h2>
+            <p className="text-gray-600 dark:text-gray-300">
+              Testing Button variants from the stable UI package
+            </p>
+          </div>
+          <div className="flex flex-wrap justify-center gap-4 mb-6">
+            <Button>Default Button</Button>
+            <Button variant="secondary">Secondary Button</Button>
+            <Button variant="outline">Outline Button</Button>
+            <Button disabled>Disabled Button</Button>
+          </div>
+          <div className="text-center">
+            <p className="text-sm text-gray-500">
+              All mobile-optimized components from @digilogiclabs/saas-factory-ui v0.13.3 + auth v1.0.0
+            </p>
+          </div>
+        </Card>
+          </MobileContainer>
+        </main>
+      </OfflineWrapper>
+    </PageTransition>
+  )
+}