@digilogiclabs/create-saas-app 1.5.2 → 1.5.3

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

@@ -0,0 +1,128 @@
+'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 SignupPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const { signUp, signInWithOAuth, loading, error, user } = useAuth();
+  const router = useRouter();
+
+  // Redirect if already logged in
+  React.useEffect(() => {
+    if (user) {
+      router.push('/');
+    }
+  }, [user, router]);
+
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (password !== confirmPassword) {
+      alert('Passwords do not match');
+      return;
+    }
+
+    try {
+      await signUp(email, password);
+      router.push('/');
+    } catch (err) {
+      console.error('Signup error:', err);
+    }
+  };
+
+  const handleGoogleSignup = async () => {
+    try {
+      await signInWithOAuth('google', window.location.origin);
+    } catch (err) {
+      console.error('Google signup 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 Up</h1>
+        
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {error.message}
+          </div>
+        )}
+
+        <form onSubmit={handleSignup} 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>
+          <div>
+            <Label htmlFor="confirmPassword">Confirm Password</Label>
+            <Input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Confirm your password"
+              required
+              disabled={loading}
+            />
+          </div>
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Signing Up...' : 'Sign Up'}
+          </Button>
+          <Button 
+            type="button" 
+            variant="outline" 
+            className="w-full"
+            onClick={handleGoogleSignup}
+            disabled={loading}
+          >
+            Sign up with Google
+          </Button>
+        </form>
+
+        <div className="mt-4 text-center">
+          <p className="text-sm text-gray-600">
+            Already have an account?{' '}
+            <a href="/login" className="text-blue-600 hover:underline">
+              Sign in
+            </a>
+          </p>
+        </div>
+      </Card>
+    </div>
+  );
+}
+

package/dist/templates/web/ui-auth/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/ui-auth/template/src/components/providers/app-providers.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import React from 'react'
+import { ThemeProvider } from 'next-themes'
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
+import { AppThemeProvider } from './theme-provider'
+
+interface AppProvidersProps {
+  children: React.ReactNode
+}
+
+export function AppProviders({ children }: AppProvidersProps) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="{{defaultTheme}}"
+      enableSystem
+      disableTransitionOnChange
+      storageKey="{{packageName}}-theme"
+    >
+      <AuthProvider>
+        <AppThemeProvider themeColor="{{themeColor}}">
+          {children}
+        </AppThemeProvider>
+      </AuthProvider>
+    </ThemeProvider>
+  )
+}
+

package/dist/templates/web/ui-auth/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/ui-auth/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/ui-auth/template/src/components/shared/header.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { LogOut } from 'lucide-react';
+import { ThemeToggle } from '../ui/theme-toggle';
+
+export function Header() {
+  const user = null; // Placeholder for auth state
+  
+  const handleSignOut = () => {
+    alert('Sign out functionality requires @digilogiclabs/saas-factory-auth package');
+  };
+
+  return (
+    <header className="bg-white dark:bg-gray-800 shadow-md">
+      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
+        <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white">
+          {{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">
+                Dashboard
+              </Link>
+              <button 
+                onClick={handleSignOut}
+                className="p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+              >
+                <LogOut className="h-5 w-5" />
+              </button>
+            </>
+          ) : (
+            <>
+              <Link href="/login" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
+                Login
+              </Link>
+              <Link 
+                href="/signup"
+                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+              >
+                Sign Up
+              </Link>
+            </>
+          )}
+        </nav>
+      </div>
+    </header>
+  );
+}
+

package/dist/templates/web/ui-auth/template/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
+

package/dist/templates/web/ui-auth/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 "@digilogiclabs/saas-factory-ui"
+
+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>
+  )
+}

package/dist/templates/web/ui-auth/template/src/lib/env.ts

@@ -0,0 +1,49 @@
+/**
+ * Optional Environment Configuration with Zod validation
+ * 
+ * This provides type-safe environment variable validation.
+ * Usage is optional - existing templates will continue to work without this.
+ * 
+ * To use: import { env } from '@/lib/env' instead of process.env
+ */
+
+import { z } from 'zod'
+
+const envSchema = z.object({
+  // Next.js built-in
+  NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
+  
+  // App configuration
+  NEXT_PUBLIC_APP_URL: z.string().url().optional(),
+  NEXT_PUBLIC_APP_NAME: z.string().default('{{titleCaseName}}'),
+  
+  // Auth configuration (if using server-side auth)
+  SUPABASE_URL: z.string().url().optional(),
+  SUPABASE_ANON_KEY: z.string().optional(),
+  SUPABASE_SERVICE_ROLE_KEY: z.string().optional(),
+  
+  // Payment configuration
+  STRIPE_SECRET_KEY: z.string().optional(),
+  STRIPE_WEBHOOK_SECRET: z.string().optional(),
+  
+  // Optional analytics
+  ANALYTICS_ID: z.string().optional(),
+})
+
+// Parse with fallback to process.env for backward compatibility
+function parseEnv() {
+  try {
+    return envSchema.parse(process.env)
+  } catch (error) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('Environment validation failed. Using process.env fallback:', error)
+    }
+    // Fallback to process.env for backward compatibility
+    return process.env as any
+  }
+}
+
+export const env = parseEnv()
+
+// Type helper for environment variables
+export type Env = z.infer<typeof envSchema>

package/dist/templates/web/ui-auth/template/src/lib/utils.ts

@@ -0,0 +1,140 @@
+/**
+ * Enhanced utility functions for {{titleCaseName}}
+ * 
+ * This extends the basic utils with additional functionality while
+ * maintaining compatibility with existing templates.
+ */
+
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+// Core utility function (keeps existing functionality)
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+// Additional utilities for enhanced templates
+
+/**
+ * Format currency with proper locale support
+ */
+export function formatCurrency(
+  amount: number,
+  currency: string = 'USD',
+  locale: string = 'en-US'
+): string {
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+  }).format(amount)
+}
+
+/**
+ * Format date with relative time support
+ */
+export function formatDate(
+  date: Date | string,
+  options?: Intl.DateTimeFormatOptions
+): string {
+  const dateObj = typeof date === 'string' ? new Date(date) : date
+  
+  const defaultOptions: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }
+  
+  return new Intl.DateTimeFormat('en-US', options || defaultOptions).format(dateObj)
+}
+
+/**
+ * Get relative time string (e.g., "2 hours ago")
+ */
+export function getRelativeTime(date: Date | string): string {
+  const dateObj = typeof date === 'string' ? new Date(date) : date
+  const now = new Date()
+  const diffInMs = now.getTime() - dateObj.getTime()
+  const diffInSeconds = Math.floor(diffInMs / 1000)
+  const diffInMinutes = Math.floor(diffInSeconds / 60)
+  const diffInHours = Math.floor(diffInMinutes / 60)
+  const diffInDays = Math.floor(diffInHours / 24)
+
+  if (diffInSeconds < 60) return 'just now'
+  if (diffInMinutes < 60) return `${diffInMinutes} minute${diffInMinutes > 1 ? 's' : ''} ago`
+  if (diffInHours < 24) return `${diffInHours} hour${diffInHours > 1 ? 's' : ''} ago`
+  if (diffInDays < 7) return `${diffInDays} day${diffInDays > 1 ? 's' : ''} ago`
+  
+  return formatDate(dateObj)
+}
+
+/**
+ * Truncate text to specified length with ellipsis
+ */
+export function truncate(text: string, length: number = 50): string {
+  if (text.length <= length) return text
+  return text.slice(0, length).trim() + '...'
+}
+
+/**
+ * Generate initials from a name
+ */
+export function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase())
+    .slice(0, 2)
+    .join('')
+}
+
+/**
+ * Validate email format
+ */
+export function isValidEmail(email: string): boolean {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+/**
+ * Generate a random ID
+ */
+export function generateId(prefix: string = ''): string {
+  const timestamp = Date.now().toString(36)
+  const randomString = Math.random().toString(36).substring(2)
+  return prefix ? `${prefix}-${timestamp}-${randomString}` : `${timestamp}-${randomString}`
+}
+
+/**
+ * Debounce function
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout | null = null
+  
+  return (...args: Parameters<T>) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId)
+    }
+    timeoutId = setTimeout(() => func(...args), delay)
+  }
+}
+
+/**
+ * Sleep/delay function for async operations
+ */
+export function sleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * Safe JSON parse with fallback
+ */
+export function safeJsonParse<T>(json: string, fallback: T): T {
+  try {
+    return JSON.parse(json)
+  } catch {
+    return fallback
+  }
+}
+