@digilogiclabs/create-saas-app 1.0.1

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

package/src/templates/web/ui-auth-payments-video/template/src/components/shared/header.tsx

@@ -0,0 +1,246 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { LogOut, CreditCard, User, Settings, Home, Video, Film, Play, Menu, X } from 'lucide-react';
+import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { 
+  ResponsiveHeader,
+  MobileNavigation,
+  HamburgerIcon,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
+
+export function Header() {
+  const { user, signOut } = useAuth();
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  
+  const projectName = "{{titleCaseName}}";
+  
+  const handleSignOut = async () => {
+    try {
+      await signOut();
+    } catch (error) {
+      console.error('Sign out error:', error);
+    }
+  };
+
+  const navigationItems = [
+    { 
+      label: 'Home', 
+      href: '/',
+      icon: Home,
+      protected: false 
+    },
+    { 
+      label: 'Video Library', 
+      href: '/videos',
+      icon: Video,
+      protected: true 
+    },
+    { 
+      label: 'Watch Later', 
+      href: '/watchlater',
+      icon: Film,
+      protected: true 
+    },
+    { 
+      label: 'Dashboard', 
+      href: '/dashboard',
+      icon: User,
+      protected: true 
+    },
+    { 
+      label: 'Billing', 
+      href: '/billing',
+      icon: CreditCard,
+      protected: true 
+    },
+    { 
+      label: 'Checkout', 
+      href: '/checkout',
+      icon: CreditCard,
+      protected: false 
+    },
+    { 
+      label: 'Settings', 
+      href: '/settings',
+      icon: Settings,
+      protected: true 
+    }
+  ];
+
+  const authActions = user ? [
+    {
+      label: 'Sign Out',
+      icon: LogOut,
+      onClick: handleSignOut,
+      variant: 'ghost' as const
+    }
+  ] : [
+    {
+      label: 'Login',
+      href: '/login',
+      variant: 'ghost' as const
+    },
+    {
+      label: 'Sign Up',
+      href: '/signup',
+      variant: 'default' as const
+    }
+  ];
+
+  // Filter navigation items based on user authentication
+  const visibleNavItems = navigationItems.filter(item => !item.protected || user);
+
+  return (
+    <>
+      {/* Network Status Banner */}
+      {!isOnline && (
+        <div className="bg-red-500 text-white text-center py-2 text-sm animate-pulse">
+          <span>📹 Offline - Cached videos only</span>
+        </div>
+      )}
+      
+      {/* Video Quality Banner */}
+      {isOnline && networkInfo?.effectiveType === '2g' && (
+        <div className="bg-yellow-500 text-white text-center py-2 text-sm">
+          <div className="animate-marquee whitespace-nowrap">
+            🐌 Slow connection - Video quality reduced to 360p • Buffering optimized • Download recommended for smooth playback
+          </div>
+        </div>
+      )}
+
+      {/* HD Video Quality Banner */}
+      {isOnline && (networkInfo?.effectiveType === '4g' || networkInfo?.effectiveType === '5g') && (
+        <div className="bg-green-500 text-white text-center py-2 text-sm">
+          <div className="animate-marquee whitespace-nowrap">
+            🎬 High-speed connection - HD/4K video quality enabled • Instant streaming • Auto-quality adjustment active
+          </div>
+        </div>
+      )}
+
+      {/* Responsive Header */}
+      <header className="bg-white dark:bg-gray-800 shadow-md border-b">
+        <div className="container mx-auto px-4">
+          <div className="flex justify-between items-center h-16">
+            {/* Logo */}
+            <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+              <Play className="w-6 h-6" />
+              {projectName}
+            </Link>
+
+            {/* Desktop Navigation */}
+            <nav className="hidden md:flex items-center gap-6">
+              {visibleNavItems.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                >
+                  <item.icon className="w-4 h-4" />
+                  {item.label}
+                </Link>
+              ))}
+              
+              {/* Auth Actions */}
+              <div className="flex items-center gap-2 ml-4 pl-4 border-l border-gray-200 dark:border-gray-600">
+                <ThemeToggle />
+                {user ? (
+                  <button
+                    onClick={handleSignOut}
+                    className="flex items-center gap-2 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                  >
+                    <LogOut className="w-4 h-4" />
+                    Sign Out
+                  </button>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <Link
+                      href="/login"
+                      className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                    >
+                      Login
+                    </Link>
+                    <Link
+                      href="/signup"
+                      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                    >
+                      Sign Up
+                    </Link>
+                  </div>
+                )}
+              </div>
+            </nav>
+
+            {/* Mobile Menu Button */}
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="md:hidden p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+            >
+              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+            </button>
+          </div>
+
+          {/* Mobile Menu */}
+          {mobileMenuOpen && (
+            <div className="md:hidden border-t border-gray-200 dark:border-gray-600 py-4">
+              <nav className="flex flex-col space-y-3">
+                {visibleNavItems.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setMobileMenuOpen(false)}
+                    className="flex items-center gap-3 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+                  >
+                    <item.icon className="w-4 h-4" />
+                    {item.label}
+                  </Link>
+                ))}
+                
+                {/* Mobile Auth Actions */}
+                <div className="flex items-center gap-3 px-3 pt-3 border-t border-gray-200 dark:border-gray-600">
+                  <ThemeToggle />
+                  {user ? (
+                    <button
+                      onClick={() => {
+                        handleSignOut();
+                        setMobileMenuOpen(false);
+                      }}
+                      className="flex items-center gap-2 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+                    >
+                      <LogOut className="w-4 h-4" />
+                      Sign Out
+                    </button>
+                  ) : (
+                    <div className="flex flex-col gap-2 w-full">
+                      <Link
+                        href="/login"
+                        onClick={() => setMobileMenuOpen(false)}
+                        className="text-center py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+                      >
+                        Login
+                      </Link>
+                      <Link
+                        href="/signup"
+                        onClick={() => setMobileMenuOpen(false)}
+                        className="text-center py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                      >
+                        Sign Up
+                      </Link>
+                    </div>
+                  )}
+                </div>
+              </nav>
+            </div>
+          )}
+        </div>
+      </header>
+    </>
+  );
+}
+

package/src/templates/web/ui-auth-payments-video/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/ui-auth-payments-video/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/src/templates/web/ui-auth-payments-video/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/src/templates/web/ui-auth-payments-video/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
+  }
+}
+

package/src/templates/web/ui-auth-payments-video/template/src/test/setup.ts

@@ -0,0 +1,79 @@
+import '@testing-library/jest-dom'
+import { vi, beforeEach, afterAll } from 'vitest'
+
+// Mock Next.js router
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+  }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => '/',
+}))
+
+// Mock SaaS Factory Auth (optional - only if testing auth components)
+vi.mock('@digilogiclabs/saas-factory-auth', () => ({
+  useAuth: () => ({
+    user: null,
+    loading: false,
+    error: null,
+    signIn: vi.fn(),
+    signUp: vi.fn(),
+    signOut: vi.fn(),
+    signInWithOAuth: vi.fn(),
+  }),
+  AuthProvider: ({ children }: { children: React.ReactNode }) => children,
+}))
+
+// Mock SaaS Factory Payments (optional - only if testing payment components)
+vi.mock('@digilogiclabs/saas-factory-payments', () => ({
+  usePayments: () => ({
+    createCheckoutSession: vi.fn(),
+    createPortalSession: vi.fn(),
+    subscription: null,
+    loading: false,
+  }),
+  PaymentsProvider: ({ children }: { children: React.ReactNode }) => children,
+}))
+
+// Global test utilities
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Suppress console warnings in tests unless needed
+const originalConsoleError = console.error
+const originalConsoleWarn = console.warn
+
+beforeEach(() => {
+  console.error = (...args: any[]) => {
+    if (
+      typeof args[0] === 'string' &&
+      args[0].includes('Warning: ReactDOM.render is no longer supported')
+    ) {
+      return
+    }
+    originalConsoleError.call(console, ...args)
+  }
+
+  console.warn = (...args: any[]) => {
+    if (
+      typeof args[0] === 'string' &&
+      args[0].includes('useLayoutEffect does nothing on the server')
+    ) {
+      return
+    }
+    originalConsoleWarn.call(console, ...args)
+  }
+})
+
+afterAll(() => {
+  console.error = originalConsoleError
+  console.warn = originalConsoleWarn
+})

package/src/templates/web/ui-auth-payments-video/template/tailwind.config.js

@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+    '../../node_modules/@digilogiclabs/saas-factory-ui/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [],
+}