npm - @digilogiclabs/create-saas-app - Versions diffs - 1.5.1 → 1.5.2 - Mend

@digilogiclabs/create-saas-app 1.5.1 → 1.5.2

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 (289) hide show

package/dist/templates/web/ui-only/template/src/app/globals.css DELETED Viewed

@@ -1,42 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-/* Import SaaS Factory UI styles */
-@import '@digilogiclabs/saas-factory-ui/dist/index.css';
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222.2 84% 4.9%;
-    --border: 214.3 31.8% 91.4%;
-    --radius: 0.5rem;
-  }
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 84% 4.9%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-  }
-}
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/dist/templates/web/ui-only/template/src/app/layout.tsx DELETED Viewed

@@ -1,33 +0,0 @@
-import type { Metadata } from 'next'
-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'] })
-export const metadata: Metadata = {
-  title: '{{titleCaseName}}',
-  description: '{{description}}',
-}
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={`${inter.className} min-h-screen flex flex-col`}>
-        <AppProviders>
-          <Header />
-          <main className="flex-1">
-            {children}
-          </main>
-          <Footer />
-        </AppProviders>
-      </body>
-    </html>
-  )
-}

package/dist/templates/web/ui-only/template/src/app/loading.tsx DELETED Viewed

@@ -1,20 +0,0 @@
-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-only/template/src/app/login/page.tsx DELETED Viewed

@@ -1,63 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
-export default function LoginPage() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    alert('Login functionality requires @digilogiclabs/saas-factory-auth package');
-    console.log('Login values:', { email, password });
-  };
-  const handleGoogleLogin = async () => {
-    alert('Google login functionality requires @digilogiclabs/saas-factory-auth package');
-  };
-  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 In</h1>
-        <form onSubmit={handleLogin} 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
-            />
-          </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
-            />
-          </div>
-          <Button type="submit" className="w-full">
-            Sign In
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            className="w-full"
-            onClick={handleGoogleLogin}
-          >
-            Sign in with Google
-          </Button>
-        </form>
-      </Card>
-    </div>
-  );
-}

package/dist/templates/web/ui-only/template/src/app/page.tsx DELETED Viewed

@@ -1,91 +0,0 @@
-'use client'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { ArrowRight, Zap, Shield, Rocket, CheckCircle } from 'lucide-react'
-import Link from 'next/link'
-export default function Home() {
-  return (
-    <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
-      <div className="container mx-auto px-4 py-16">
-        {/* Hero Section */}
-        <div className="text-center mb-16">
-          <div className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 mb-6">
-            <CheckCircle className="w-4 h-4 mr-2" />
-            UI Package v0.7.3 Integrated Successfully
-          </div>
-          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
-            Welcome to{' '}
-            <span className="text-blue-600 dark:text-blue-400">{{titleCaseName}}</span>
-          </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
-            {{description}}. This template uses the stable SaaS Factory UI package v0.7.3.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button size="lg" className="text-lg px-8">
-              Get Started
-              <ArrowRight className="ml-2 h-5 w-5" />
-            </Button>
-            <Button variant="outline" size="lg" className="text-lg px-8">
-              Learn More
-            </Button>
-          </div>
-        </div>
-        {/* Component Showcase */}
-        <div className="grid md:grid-cols-3 gap-8 mb-16">
-          <Card className="text-center p-6">
-            <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
-              <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-            </div>
-            <h3 className="text-xl font-semibold mb-2">UI Package Components</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Button and Card components from @digilogiclabs/saas-factory-ui
-            </p>
-          </Card>
-          <Card className="text-center p-6">
-            <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
-              <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
-            </div>
-            <h3 className="text-xl font-semibold mb-2">Hybrid Architecture</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Clean web build with no React Native contamination
-            </p>
-          </Card>
-          <Card className="text-center p-6">
-            <div className="mx-auto w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
-              <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-            </div>
-            <h3 className="text-xl font-semibold mb-2">TypeScript Ready</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Full type safety with enhanced component definitions
-            </p>
-          </Card>
-        </div>
-        {/* Button Variants Showcase */}
-        <Card className="max-w-4xl mx-auto p-8">
-          <div className="text-center mb-6">
-            <h2 className="text-2xl font-bold mb-2">UI Package Component Showcase</h2>
-            <p className="text-gray-600 dark:text-gray-300">
-              Testing Button variants from the stable UI package
-            </p>
-          </div>
-          <div className="flex flex-wrap justify-center gap-4 mb-6">
-            <Button>Default Button</Button>
-            <Button variant="secondary">Secondary Button</Button>
-            <Button variant="outline">Outline Button</Button>
-            <Button disabled>Disabled Button</Button>
-          </div>
-          <div className="text-center">
-            <p className="text-sm text-gray-500">
-              All components imported from @digilogiclabs/saas-factory-ui v0.7.3
-            </p>
-          </div>
-        </Card>
-      </div>
-    </main>
-  )
-}

package/dist/templates/web/ui-only/template/src/app/signup/page.tsx DELETED Viewed

@@ -1,79 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
-export default function SignupPage() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const handleSignup = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (password !== confirmPassword) {
-      alert('Passwords do not match');
-      return;
-    }
-    alert('Signup functionality requires @digilogiclabs/saas-factory-auth package');
-    console.log('Signup values:', { email, password });
-  };
-  const handleGoogleSignup = async () => {
-    alert('Google signup functionality requires @digilogiclabs/saas-factory-auth package');
-  };
-  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>
-        <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
-            />
-          </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
-            />
-          </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
-            />
-          </div>
-          <Button type="submit" className="w-full">
-            Sign Up
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            className="w-full"
-            onClick={handleGoogleSignup}
-          >
-            Sign up with Google
-          </Button>
-        </form>
-      </Card>
-    </div>
-  );
-}

package/dist/templates/web/ui-only/template/src/components/__tests__/example.test.tsx DELETED Viewed

@@ -1,49 +0,0 @@
-/**
- * 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-only/template/src/components/providers/app-providers.tsx DELETED Viewed

@@ -1,26 +0,0 @@
-'use client'
-import React from 'react'
-import { ThemeProvider } from 'next-themes'
-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"
-    >
-      <AppThemeProvider themeColor="{{themeColor}}">
-        {children}
-      </AppThemeProvider>
-    </ThemeProvider>
-  )
-}

package/dist/templates/web/ui-only/template/src/components/providers/theme-provider.tsx DELETED Viewed

@@ -1,94 +0,0 @@
-'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-only/template/src/components/shared/footer.tsx DELETED Viewed

@@ -1,36 +0,0 @@
-'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}} • {{generatedDate}}
-            </span>
-          </div>
-        </div>
-      </div>
-    </footer>
-  )
-}

package/dist/templates/web/ui-only/template/src/components/shared/header.tsx DELETED Viewed

@@ -1,53 +0,0 @@
-'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-only/template/src/components/ui/badge.tsx DELETED Viewed

@@ -1,36 +0,0 @@
-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-only/template/src/components/ui/theme-toggle.tsx DELETED Viewed

@@ -1,34 +0,0 @@
-'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>
-  )
-}