@digilogiclabs/create-saas-app 1.0.1

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

@@ -0,0 +1,35 @@
+'use client'
+
+import React from 'react'
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
+import { ThemeProvider } from 'next-themes'
+import { StripeProvider } 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 (
+    <AuthProvider provider="supabase">
+      <StripeProvider
+        stripeKey={process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="{{defaultTheme}}"
+          enableSystem
+          disableTransitionOnChange
+          storageKey="{{packageName}}-theme"
+        >
+          <AppThemeProvider themeColor="{{themeColor}}">
+            {children}
+            <Toaster />
+          </AppThemeProvider>
+        </ThemeProvider>
+      </StripeProvider>
+    </AuthProvider>
+  )
+}

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

@@ -0,0 +1,63 @@
+'use client';
+
+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 { ResponsiveHeader, MobileNavigation } from '@digilogiclabs/saas-factory-ui';
+import { LogOut, Menu, User, Settings } from 'lucide-react';
+
+export function Header() {
+  const { user, signOut } = useAuth();
+
+  const navigationItems = [
+    { 
+      label: 'Dashboard', 
+      href: '/dashboard',
+      icon: User,
+      protected: true 
+    },
+    { 
+      label: 'Settings', 
+      href: '/settings',
+      icon: Settings,
+      protected: true 
+    }
+  ];
+
+  const authActions = user ? [
+    {
+      label: 'Sign Out',
+      icon: LogOut,
+      onClick: signOut,
+      variant: 'ghost' as const
+    }
+  ] : [
+    {
+      label: 'Login',
+      href: '/login',
+      variant: 'ghost' as const
+    },
+    {
+      label: 'Sign Up',
+      href: '/signup',
+      variant: 'default' as const
+    }
+  ];
+
+  return (
+    <ResponsiveHeader
+      logo={{
+        text: '{{titleCaseName}}',
+        href: '/'
+      }}
+      navigationItems={navigationItems}
+      actions={authActions}
+      showThemeToggle={true}
+      user={user}
+      mobileBreakpoint="md"
+      className="bg-white dark:bg-gray-800 shadow-md"
+    />
+  );
+}

package/src/templates/web/base/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/src/templates/web/base/template/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
+

package/src/templates/web/base/template/src/components/ui/card.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+

package/src/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>
+  )
+}

package/src/templates/web/base/template/src/lib/auth-server.ts

@@ -0,0 +1,177 @@
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+// Server-side auth utilities that work with @digilogiclabs/saas-factory-auth
+// These functions provide server-side access to auth state
+
+export type User = {
+  id: string
+  email: string
+  name?: string
+  avatar?: string
+  [key: string]: any
+}
+
+/**
+ * Get the current user from server-side cookies
+ * This function should be called in Server Components, Server Actions, or Route Handlers
+ */
+export async function getCurrentUser(): Promise<User | null> {
+  try {
+    const cookieStore = await cookies()
+    
+    // Check for auth token in cookies set by @digilogiclabs/saas-factory-auth
+    const authToken = cookieStore.get('saas-factory-auth-token')?.value
+    const userCookie = cookieStore.get('saas-factory-auth-user')?.value
+    
+    if (!authToken || !userCookie) {
+      return null
+    }
+    
+    // Parse user data from cookie
+    try {
+      const userData = JSON.parse(userCookie)
+      return userData
+    } catch {
+      return null
+    }
+  } catch (error) {
+    console.error('Error getting current user:', error)
+    return null
+  }
+}
+
+/**
+ * Require authentication - redirects to login if not authenticated
+ * Use this in Server Components that require authentication
+ */
+export async function requireAuth(): Promise<User> {
+  const user = await getCurrentUser()
+  
+  if (!user) {
+    redirect('/login')
+  }
+  
+  return user
+}
+
+/**
+ * Check if user is authenticated (without redirecting)
+ * Returns boolean for conditional rendering
+ */
+export async function isAuthenticated(): Promise<boolean> {
+  const user = await getCurrentUser()
+  return !!user
+}
+
+/**
+ * Redirect if already authenticated
+ * Use this on login/signup pages
+ */
+export async function redirectIfAuthenticated(redirectTo: string = '/') {
+  const user = await getCurrentUser()
+  
+  if (user) {
+    redirect(redirectTo)
+  }
+}
+
+/**
+ * Get user session data for server components
+ * Returns both user and loading state info
+ */
+export async function getServerSession() {
+  const user = await getCurrentUser()
+  
+  return {
+    user,
+    isAuthenticated: !!user,
+    isLoading: false, // Server-side is never loading
+  }
+}
+
+/**
+ * Server-side auth check for API routes
+ */
+export async function getAuthFromRequest(request?: Request): Promise<User | null> {
+  try {
+    // If request is provided, extract cookies from it
+    if (request) {
+      const cookie = request.headers.get('cookie')
+      if (!cookie) return null
+      
+      // Parse cookies manually from request
+      const cookies = cookie.split(';').reduce((acc, cookie) => {
+        const [key, value] = cookie.trim().split('=')
+        acc[key] = value
+        return acc
+      }, {} as Record<string, string>)
+      
+      const authToken = cookies['saas-factory-auth-token']
+      const userCookie = cookies['saas-factory-auth-user']
+      
+      if (!authToken || !userCookie) {
+        return null
+      }
+      
+      try {
+        const userData = JSON.parse(decodeURIComponent(userCookie))
+        return userData
+      } catch {
+        return null
+      }
+    }
+    
+    // Fallback to cookies() API
+    return await getCurrentUser()
+  } catch (error) {
+    console.error('Error getting auth from request:', error)
+    return null
+  }
+}
+
+/**
+ * Create server action wrapper that requires authentication
+ */
+export function withAuth<T extends any[], R>(
+  action: (user: User, ...args: T) => Promise<R>
+) {
+  return async (...args: T): Promise<R> => {
+    const user = await requireAuth()
+    return action(user, ...args)
+  }
+}
+
+/**
+ * Server-side utility to check specific roles/permissions
+ * Extend this based on your user data structure
+ */
+export async function hasRole(role: string): Promise<boolean> {
+  const user = await getCurrentUser()
+  
+  if (!user) return false
+  
+  // Assuming role is stored in user.role or user.roles
+  if (Array.isArray(user.roles)) {
+    return user.roles.includes(role)
+  }
+  
+  return user.role === role
+}
+
+/**
+ * Server-side utility to require specific roles
+ */
+export async function requireRole(role: string): Promise<User> {
+  const user = await requireAuth()
+  
+  const hasRequiredRole = Array.isArray(user.roles) 
+    ? user.roles.includes(role)
+    : user.role === role
+  
+  if (!hasRequiredRole) {
+    redirect('/unauthorized')
+  }
+  
+  return user
+}