npm - @digilogiclabs/create-saas-app - Versions diffs - 1.3.0 → 1.5.0 - Mend

@digilogiclabs/create-saas-app 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (200) hide show

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

@@ -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'] })
@@ -18,10 +19,13 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body className={`${inter.className} min-h-screen flex flex-col`}>
         <AppProviders>
           <Header />
-          {children}
+          <main className="flex-1">
+            {children}
+          </main>
+          <Footer />
         </AppProviders>
       </body>
     </html>

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

@@ -0,0 +1,20 @@
+import { Card } 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 flex items-center justify-center p-4">
+      <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>
+  )
+}

package/dist/templates/web/ui-auth-payments/template/src/app/login/loading.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import { Card } from '@digilogiclabs/saas-factory-ui'
+export default function LoginLoading() {
+  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">
+        <div className="animate-pulse space-y-6">
+          {/* Title skeleton */}
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded-md mx-auto w-32"></div>
+          {/* Form skeleton */}
+          <div className="space-y-4">
+            {/* Email field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            {/* Password field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            {/* Sign in button */}
+            <div className="h-10 bg-blue-200 dark:bg-blue-800 rounded"></div>
+            {/* OAuth button */}
+            <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+          </div>
+          {/* Sign up link */}
+          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-48 mx-auto"></div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/web/ui-auth-payments/template/src/app/signup/loading.tsx ADDED Viewed

@@ -0,0 +1,50 @@
+import { Card } from '@digilogiclabs/saas-factory-ui'
+export default function SignupLoading() {
+  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">
+        <div className="animate-pulse space-y-6">
+          {/* Title skeleton */}
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded-md mx-auto w-32"></div>
+          {/* Form skeleton */}
+          <div className="space-y-4">
+            {/* Name field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-12 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            {/* Email field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            {/* Password field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            {/* Confirm password field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            {/* Sign up button */}
+            <div className="h-10 bg-blue-200 dark:bg-blue-800 rounded"></div>
+            {/* OAuth button */}
+            <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+          </div>
+          {/* Sign in link */}
+          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-44 mx-auto"></div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/web/ui-auth-payments/template/src/components/__tests__/example.test.tsx ADDED Viewed

@@ -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-payments/template/src/components/client/auth-status.tsx ADDED Viewed

@@ -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/dist/templates/web/ui-auth-payments/template/src/components/client/login-form.tsx ADDED Viewed

@@ -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, null)
+  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/dist/templates/web/ui-auth-payments/template/src/components/client/newsletter-signup.tsx ADDED Viewed

@@ -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/dist/templates/web/ui-auth-payments/template/src/components/client/signup-form.tsx ADDED Viewed

@@ -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, null)
+  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, { name })
+      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, { name: nameValue })
+        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/dist/templates/web/ui-auth-payments/template/src/components/providers/app-providers.tsx CHANGED Viewed

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