@digilogiclabs/create-saas-app 1.4.0 → 1.5.1

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

@@ -1,48 +1,58 @@
-{
-  "name": "{{packageName}}",
-  "version": "0.1.0",
-  "description": "{{description}}",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "type-check": "tsc --noEmit"
-  },
-  "dependencies": {
-    "next": "^14.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.7.2",
-    "@digilogiclabs/saas-factory-auth": "^0.4.3",
-    "@digilogiclabs/saas-factory-payments": "^0.2.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",
-    "@radix-ui/react-slot": "^1.0.2",
-    "tailwindcss-animate": "^1.0.7",
-    "lucide-react": "^0.292.0",
-    "firebase": "^10.0.0",
-    "@supabase/supabase-js": "^2.0.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.0.0",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "eslint": "^8.0.0",
-    "eslint-config-next": "^14.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"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  }
-}
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}}",
+  "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.7.2",
+    "@digilogiclabs/saas-factory-auth": "^0.4.3",
+    "@digilogiclabs/saas-factory-payments": "^0.2.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",
+    "@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/dist/templates/web/base/template/src/app/error.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
+import Link from 'next/link'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    // Log error to error reporting service
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">
+      <Card className="p-8 max-w-lg w-full">
+        <div className="flex flex-col items-center space-y-6 text-center">
+          {/* Error icon */}
+          <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          </div>
+          
+          {/* Error content */}
+          <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-4">
+              We encountered an unexpected error. This has been logged and our team will look into it.
+            </p>
+            
+            {/* Error details in development */}
+            {process.env.NODE_ENV === 'development' && (
+              <details className="mt-4 text-left">
+                <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                  Error details (development only)
+                </summary>
+                <div className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-700 dark:text-gray-300 overflow-auto max-h-40">
+                  <div className="mb-2">
+                    <strong>Message:</strong> {error.message}
+                  </div>
+                  {error.digest && (
+                    <div className="mb-2">
+                      <strong>Digest:</strong> {error.digest}
+                    </div>
+                  )}
+                  {error.stack && (
+                    <div>
+                      <strong>Stack:</strong>
+                      <pre className="whitespace-pre-wrap mt-1">{error.stack}</pre>
+                    </div>
+                  )}
+                </div>
+              </details>
+            )}
+          </div>
+          
+          {/* Action buttons */}
+          <div className="flex flex-col sm:flex-row gap-3 w-full">
+            <Button
+              onClick={reset}
+              className="flex-1"
+              size="lg"
+            >
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Try again
+            </Button>
+            
+            <Link href="/" className="flex-1">
+              <Button
+                variant="outline"
+                className="w-full"
+                size="lg"
+              >
+                <Home className="w-4 h-4 mr-2" />
+                Go home
+              </Button>
+            </Link>
+          </div>
+          
+          {/* Help text */}
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            If this problem persists, please{' '}
+            <Link href="/contact" className="text-blue-600 hover:underline dark:text-blue-400">
+              contact support
+            </Link>
+          </p>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/web/base/template/src/app/layout.tsx

@@ -3,6 +3,7 @@ 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'] })
 
@@ -20,8 +21,13 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <AppProviders>
-          <Header />
-          {children}
+          <div className="min-h-screen flex flex-col">
+            <Header />
+            <main className="flex-1">
+              {children}
+            </main>
+            <Footer />
+          </div>
         </AppProviders>
       </body>
     </html>

package/dist/templates/web/base/template/src/app/loading.tsx

@@ -0,0 +1,34 @@
+import { Card } from '@digilogiclabs/saas-factory-ui'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
+      <Card className="p-8 max-w-sm w-full mx-4">
+        <div className="flex flex-col items-center space-y-4">
+          {/* Animated spinner */}
+          <div className="relative">
+            <div className="w-12 h-12 border-4 border-gray-200 dark:border-gray-700 rounded-full animate-spin"></div>
+            <div className="absolute top-0 left-0 w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+          </div>
+          
+          {/* Loading text */}
+          <div className="text-center">
+            <h2 className="text-lg font-semibold 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 prepare your content
+            </p>
+          </div>
+          
+          {/* Pulsing dots */}
+          <div className="flex space-x-1">
+            <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse"></div>
+            <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style={{ animationDelay: '0.2s' }}></div>
+            <div className="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style={{ animationDelay: '0.4s' }}></div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/web/base/template/src/components/__tests__/example.test.tsx

@@ -0,0 +1,49 @@
+/**
+ * Example test file demonstrating testing patterns for SaaS Factory components
+ * 
+ * This is optional and serves as a reference for testing your components.
+ * You can delete this file if you don't need example tests.
+ */
+
+import { render, screen } from '@testing-library/react'
+import { Button } from '@digilogiclabs/saas-factory-ui'
+
+// Example: Testing UI components
+describe('UI Components', () => {
+  it('renders button with correct text', () => {
+    render(<Button>Click me</Button>)
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument()
+  })
+
+  it('button can be disabled', () => {
+    render(<Button disabled>Disabled button</Button>)
+    expect(screen.getByRole('button')).toBeDisabled()
+  })
+})
+
+// Example: Testing custom components
+function MockComponent({ title }: { title: string }) {
+  return <h1>{title}</h1>
+}
+
+describe('Custom Components', () => {
+  it('renders with correct title', () => {
+    render(<MockComponent title="Test Title" />)
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Test Title')
+  })
+})
+
+// Example: Testing utilities
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(amount)
+}
+
+describe('Utilities', () => {
+  it('formats currency correctly', () => {
+    expect(formatCurrency(1000)).toBe('$1,000.00')
+    expect(formatCurrency(0)).toBe('$0.00')
+  })
+})

package/dist/templates/web/base/template/src/components/providers/app-providers.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { ThemeProvider } from 'next-themes'
 import { StripeProvider } from '@digilogiclabs/saas-factory-payments'
+import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
   children: React.ReactNode
@@ -17,11 +18,14 @@ export function AppProviders({ children }: AppProvidersProps) {
       >
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
+          defaultTheme="{{defaultTheme}}"
           enableSystem
           disableTransitionOnChange
+          storageKey="{{packageName}}-theme"
         >
-          {children}
+          <AppThemeProvider themeColor="{{themeColor}}">
+            {children}
+          </AppThemeProvider>
         </ThemeProvider>
       </StripeProvider>
     </AuthProvider>

package/dist/templates/web/base/template/src/components/providers/theme-provider.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import React, { createContext, useContext, useEffect } from 'react'
+
+interface ThemeContextType {
+  themeColor: string
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+interface AppThemeProviderProps {
+  children: React.ReactNode
+  themeColor: string
+}
+
+const THEME_COLORS = {
+  blue: {
+    primary: '221.2 83.2% 53.3%',
+    primaryForeground: '210 40% 98%',
+    secondary: '210 40% 96%',
+    accent: '210 40% 96%',
+    ring: '221.2 83.2% 53.3%',
+  },
+  green: {
+    primary: '142.1 76.2% 36.3%',
+    primaryForeground: '355.7 100% 97.3%',
+    secondary: '138.5 76.2% 96.7%',
+    accent: '138.5 76.2% 96.7%',
+    ring: '142.1 76.2% 36.3%',
+  },
+  purple: {
+    primary: '262.1 83.3% 57.8%',
+    primaryForeground: '210 40% 98%',
+    secondary: '270 3.18% 96.5%',
+    accent: '270 3.18% 96.5%',
+    ring: '262.1 83.3% 57.8%',
+  },
+  orange: {
+    primary: '24.6 95% 53.1%',
+    primaryForeground: '60 9.1% 97.8%',
+    secondary: '60 4.8% 95.9%',
+    accent: '60 4.8% 95.9%',
+    ring: '24.6 95% 53.1%',
+  },
+  red: {
+    primary: '0 72.2% 50.6%',
+    primaryForeground: '0 85.7% 97.3%',
+    secondary: '0 0% 96.3%',
+    accent: '0 0% 96.3%',
+    ring: '0 72.2% 50.6%',
+  },
+  slate: {
+    primary: '215 27.9% 16.9%',
+    primaryForeground: '0 0% 98%',
+    secondary: '210 40% 96%',
+    accent: '210 40% 96%',
+    ring: '215 27.9% 16.9%',
+  },
+}
+
+export function AppThemeProvider({ children, themeColor }: AppThemeProviderProps) {
+  useEffect(() => {
+    const colorScheme = THEME_COLORS[themeColor as keyof typeof THEME_COLORS] || THEME_COLORS.blue
+    
+    // Apply theme colors to CSS custom properties
+    const root = document.documentElement
+    root.style.setProperty('--primary', colorScheme.primary)
+    root.style.setProperty('--primary-foreground', colorScheme.primaryForeground)
+    root.style.setProperty('--secondary', colorScheme.secondary)
+    root.style.setProperty('--accent', colorScheme.accent)
+    root.style.setProperty('--ring', colorScheme.ring)
+    
+    // Store theme color preference
+    localStorage.setItem('{{packageName}}-theme-color', themeColor)
+  }, [themeColor])
+
+  const contextValue: ThemeContextType = {
+    themeColor,
+  }
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useAppTheme() {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useAppTheme must be used within a AppThemeProvider')
+  }
+  return context
+}

package/dist/templates/web/base/template/src/components/shared/footer.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React from 'react'
+
+interface FooterProps {
+  className?: string
+}
+
+export function Footer({ className = '' }: FooterProps) {
+  return (
+    <footer className={`border-t bg-background py-4 ${className}`}>
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <span>&copy; {new Date().getFullYear()} {{titleCaseName}}</span>
+          </div>
+          
+          <div className="flex items-center gap-2 text-xs">
+            <span>Generated with</span>
+            <a 
+              href="https://docs.digilogiclabs.com" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="hover:text-foreground transition-colors"
+            >
+              Digi Logic Labs
+            </a>
+            <span className="text-muted-foreground/60">
+              • UI v{{uiVersion}} • Auth v{{authVersion}} • {{generatedDate}}
+            </span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/dist/templates/web/base/template/src/components/shared/header.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import Link from 'next/link';
 import { useAuth } from '@digilogiclabs/saas-factory-auth';
 import { Button } from '@/components/ui/button';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
 import { LogOut } from 'lucide-react';
 
 export function Header() {
@@ -16,6 +17,7 @@ export function Header() {
           {{titleCaseName}}
         </Link>
         <nav className="flex items-center gap-4">
+          <ThemeToggle />
           {user ? (
             <>
               <Link href="/dashboard" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">

package/dist/templates/web/base/template/src/components/ui/theme-toggle.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  const toggleTheme = () => {
+    if (theme === 'light') {
+      setTheme('dark')
+    } else if (theme === 'dark') {
+      setTheme('system')
+    } else {
+      setTheme('light')
+    }
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={toggleTheme}
+      className="h-9 w-9"
+    >
+      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}