@digilogiclabs/create-saas-app 1.0.1

package/src/templates/web/ui-auth-payments/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/src/templates/web/ui-auth-payments/template/src/components/client/auth-status.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { Button } from '@digilogiclabs/saas-factory-ui'
+import { LogOut, User } from 'lucide-react'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import Link from 'next/link'
+
+export function AuthStatus() {
+  const { user, signOut, loading } = useAuth()
+
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+    } catch (err) {
+      console.error('Sign out error:', err)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="text-sm text-gray-600 dark:text-gray-300">
+        Loading...
+      </div>
+    )
+  }
+
+  if (user) {
+    return (
+      <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>
+    )
+  }
+
+  return (
+    <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>
+  )
+}

package/src/templates/web/ui-auth-payments/template/src/components/client/login-form.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import React, { useState, useActionState } from 'react'
+import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { useRouter } from 'next/navigation'
+import { signInAction } from '@/lib/actions/auth'
+
+export function LoginForm() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const { signIn, signInWithOAuth, loading, error, user } = useAuth()
+  const [actionState, formAction] = useActionState(signInAction, { success: false })
+  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)
+    }
+  }
+
+  // Enhanced form action that uses both server action validation and client auth
+  const handleServerAction = async (formData: FormData) => {
+    const result = await formAction(formData)
+    
+    if (result?.success) {
+      // If server validation passes, proceed with client auth
+      const emailValue = formData.get('email') as string
+      const passwordValue = formData.get('password') as string
+      
+      try {
+        await signIn(emailValue, passwordValue)
+        router.push('/')
+      } catch (err) {
+        console.error('Login error:', err)
+      }
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+        <div>Loading...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+      <Card className="w-full max-w-md p-8">
+        <h1 className="text-2xl font-bold text-center mb-6">Sign In</h1>
+        
+        {/* Server action errors */}
+        {actionState?.error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {actionState.error}
+          </div>
+        )}
+        
+        {/* Client auth errors */}
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {error.message}
+          </div>
+        )}
+
+        <form action={handleServerAction} className="space-y-4">
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.email && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.email[0]}</p>
+            )}
+          </div>
+          <div>
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              name="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.password && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.password[0]}</p>
+            )}
+          </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 dark:text-gray-300">
+            Don&apos;t have an account?{' '}
+            <a href="/signup" className="text-blue-600 hover:underline dark:text-blue-400">
+              Sign up
+            </a>
+          </p>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/src/templates/web/ui-auth-payments/template/src/components/client/newsletter-signup.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { useState, useActionState } from 'react'
+import { Button, Input, Label } from '@digilogiclabs/saas-factory-ui'
+import { subscribeToNewsletter } from '@/lib/actions'
+
+export function NewsletterSignup() {
+  const [email, setEmail] = useState('')
+  const [state, formAction, isPending] = useActionState(subscribeToNewsletter, null)
+
+  const handleSubmit = async (formData: FormData) => {
+    await formAction(formData)
+    if (state?.success) {
+      setEmail('') // Clear form on success
+    }
+  }
+
+  return (
+    <div className="bg-blue-600 dark:bg-blue-800 rounded-lg p-6 text-white">
+      <h3 className="text-lg font-semibold mb-2">Stay Updated</h3>
+      <p className="text-blue-100 dark:text-blue-200 mb-4 text-sm">
+        Get the latest updates and features delivered to your inbox
+      </p>
+      
+      {state?.success && (
+        <div className="mb-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded">
+          {state.data?.message}
+        </div>
+      )}
+      
+      {state?.error && (
+        <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+          {state.error}
+        </div>
+      )}
+
+      <form action={handleSubmit} className="flex gap-2">
+        <div className="flex-1">
+          <Label htmlFor="newsletter-email" className="sr-only">
+            Email address
+          </Label>
+          <Input
+            id="newsletter-email"
+            name="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Enter your email"
+            required
+            disabled={isPending}
+            className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+          />
+        </div>
+        <Button 
+          type="submit" 
+          variant="secondary" 
+          disabled={isPending}
+        >
+          {isPending ? 'Subscribing...' : 'Subscribe'}
+        </Button>
+      </form>
+      
+      <p className="text-xs text-blue-200 dark:text-blue-300 mt-2">
+        We respect your privacy. Unsubscribe at any time.
+      </p>
+    </div>
+  )
+}

package/src/templates/web/ui-auth-payments/template/src/components/client/signup-form.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import React, { useState, useActionState } from 'react'
+import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { useRouter } from 'next/navigation'
+import { signUpAction } from '@/lib/actions/auth'
+
+export function SignupForm() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const { signUp, signInWithOAuth, loading, error, user } = useAuth()
+  const [actionState, formAction] = useActionState(signUpAction, { success: false })
+  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) {
+      console.error('Passwords do not match')
+      return
+    }
+
+    try {
+      await signUp(email, password)
+      router.push('/')
+    } catch (err) {
+      console.error('Sign up error:', err)
+    }
+  }
+
+  const handleGoogleSignUp = async () => {
+    try {
+      await signInWithOAuth('google', window.location.origin)
+    } catch (err) {
+      console.error('Google sign up error:', err)
+    }
+  }
+
+  // Enhanced form action that uses both server action validation and client auth
+  const handleServerAction = async (formData: FormData) => {
+    const result = await formAction(formData)
+    
+    if (result?.success) {
+      // If server validation passes, proceed with client auth
+      const emailValue = formData.get('email') as string
+      const passwordValue = formData.get('password') as string
+      const nameValue = formData.get('name') as string
+      
+      try {
+        await signUp(emailValue, passwordValue)
+        router.push('/')
+      } catch (err) {
+        console.error('Sign up error:', err)
+      }
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+        <div>Loading...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+      <Card className="w-full max-w-md p-8">
+        <h1 className="text-2xl font-bold text-center mb-6">Sign Up</h1>
+        
+        {/* Server action errors */}
+        {actionState?.error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {actionState.error}
+          </div>
+        )}
+        
+        {/* Client auth errors */}
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {error.message}
+          </div>
+        )}
+
+        <form action={handleServerAction} className="space-y-4">
+          <div>
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              name="name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter your name"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.name && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.name[0]}</p>
+            )}
+          </div>
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.email && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.email[0]}</p>
+            )}
+          </div>
+          <div>
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              name="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.password && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.password[0]}</p>
+            )}
+          </div>
+          <div>
+            <Label htmlFor="confirmPassword">Confirm Password</Label>
+            <Input
+              id="confirmPassword"
+              name="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Confirm your password"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.confirmPassword && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.confirmPassword[0]}</p>
+            )}
+          </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 dark:text-gray-300">
+            Already have an account?{' '}
+            <a href="/login" className="text-blue-600 hover:underline dark:text-blue-400">
+              Sign in
+            </a>
+          </p>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/src/templates/web/ui-auth-payments/template/src/components/providers/app-providers.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import React from 'react'
+import { ThemeProvider } from 'next-themes'
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
+import { PaymentsProvider } from '@digilogiclabs/saas-factory-payments'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
+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>
+        <PaymentsProvider>
+          <AppThemeProvider themeColor="{{themeColor}}">
+            {children}
+            <Toaster />
+          </AppThemeProvider>
+        </PaymentsProvider>
+      </AuthProvider>
+    </ThemeProvider>
+  )
+}
+

package/src/templates/web/ui-auth-payments/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/src/templates/web/ui-auth-payments/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}} • Payments v{{paymentsVersion}} • {{generatedDate}}
+            </span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}