@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

package/dist/templates/web/base/template/src/app/signup/page.tsx

@@ -1,66 +1,117 @@
-'use client';
-
-import { 
-  SignupForm,
-  PageTransition,
-  MobileContainer,
-  NetworkAwareContent,
-  OfflineWrapper
-} from '@digilogiclabs/saas-factory-ui';
-import { createBrowserClient } from '@supabase/ssr';
-import React from 'react';
-
-export default function SignupPage() {
-  const supabase = createBrowserClient(
-    process.env.NEXT_PUBLIC_SUPABASE_URL!,
-    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
-  );
-
-  const handleSignup = async (values: any) => {
-    await supabase.auth.signUp({
-      email: values.email,
-      password: values.password,
-    });
-  };
-
-  const handleGoogleSignup = async () => {
-    await supabase.auth.signInWithOAuth({
-      provider: 'google',
-      options: {
-        redirectTo: `${location.origin}/auth/callback`,
-      },
-    });
-  };
-
-  return (
-    <PageTransition type="slide" direction="horizontal" duration={300}>
-      <OfflineWrapper
-        cacheStrategy="network-first"
-        showOfflineIndicator={true}
-      >
-        <NetworkAwareContent
-          showOnOffline={
-            <div className="flex items-center justify-center min-h-screen bg-gray-100">
-              <div className="text-center p-6">
-                <h2 className="text-xl font-semibold mb-2">You're offline</h2>
-                <p className="text-gray-600">Please check your connection to sign up.</p>
-              </div>
-            </div>
-          }
-        >
-          <div className="flex items-center justify-center min-h-screen bg-gray-100">
-            <MobileContainer className="w-full max-w-md">
-              <SignupForm
-                onSubmit={handleSignup}
-                onGoogleSignIn={handleGoogleSignup}
-                authProvider="supabase"
-                mobileOptimized={true}
-                touchFriendly={true}
-              />
-            </MobileContainer>
-          </div>
-        </NetworkAwareContent>
-      </OfflineWrapper>
-    </PageTransition>
-  );
-}
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { useMockAuth } from '@/components/mock-auth-provider';
+import { MOCK_MODE } from '@/lib/mock';
+
+export default function SignupPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { signIn, isAuthenticated } = useMockAuth();
+  const router = useRouter();
+
+  // Redirect if already signed in
+  useEffect(() => {
+    if (isAuthenticated) router.push('/dashboard');
+  }, [isAuthenticated, router]);
+
+  if (isAuthenticated) return null;
+
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    if (MOCK_MODE) {
+      // Mock mode: sign in immediately (simulates successful signup + auto-login)
+      signIn(email, password);
+      router.push('/dashboard');
+      return;
+    }
+
+    // TODO: [REAL_DATA] Replace with your auth provider's sign up
+    // Example (Supabase):
+    //   const { error } = await supabase.auth.signUp({ email, password });
+    // Example (NextAuth):
+    //   const result = await fetch('/api/auth/register', { ... });
+    try {
+      const res = await fetch('/api/auth/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error || 'Sign up failed');
+        return;
+      }
+      router.push('/dashboard');
+    } catch {
+      setError('An unexpected error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-background px-4">
+      <div className="w-full max-w-sm">
+        <div className="rounded-xl border border-border bg-card p-8 shadow-sm">
+          <h1 className="text-2xl font-bold text-card-foreground mb-1">Create Account</h1>
+          <p className="text-sm text-muted-foreground mb-6">Get started with your free account.</p>
+
+          {MOCK_MODE && (
+            <div className="mb-4 rounded-lg bg-primary/10 p-3 text-xs text-primary">
+              <strong>Mock Mode:</strong> Any email/password will work. Click Sign Up to continue.
+            </div>
+          )}
+
+          {error && (
+            <div className="mb-4 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">{error}</div>
+          )}
+
+          <form onSubmit={handleSignup} className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">Email</label>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                placeholder="you@example.com"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">Password</label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                placeholder="••••••••"
+                required
+                minLength={8}
+              />
+            </div>
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? 'Creating account...' : 'Sign Up'}
+            </Button>
+          </form>
+
+          <p className="mt-6 text-center text-sm text-muted-foreground">
+            Already have an account?{' '}
+            <Link href="/login" className="text-primary hover:underline">Sign in</Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/web/base/template/src/components/providers/app-providers.tsx

@@ -2,7 +2,12 @@
 
 import { ThemeProvider } from 'next-themes'
 import { Toaster } from '@digilogiclabs/saas-factory-ui'
-import { DLLProvider } from '@digilogiclabs/app-sdk'
+import { MockAuthProvider } from '@/components/mock-auth-provider'
+
+// TODO: [REAL_DATA] Replace MockAuthProvider with your auth provider:
+//   Supabase:  import { AuthProvider } from '@/providers/auth-provider'
+//   NextAuth:  import { SessionProvider } from 'next-auth/react'
+//   Keycloak:  import { KeycloakProvider } from '@/providers/keycloak'
 
 interface AppProvidersProps {
   children: React.ReactNode
@@ -11,10 +16,10 @@ interface AppProvidersProps {
 export function AppProviders({ children }: AppProvidersProps) {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-      <DLLProvider>
+      <MockAuthProvider>
         {children}
         <Toaster />
-      </DLLProvider>
+      </MockAuthProvider>
     </ThemeProvider>
   )
 }

package/dist/templates/web/base/template/src/components/shared/header.tsx

@@ -1,63 +1,229 @@
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { useAuth } from '@digilogiclabs/app-sdk';
-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"
-    />
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
+import { useMockAuth } from '@/components/mock-auth-provider';
+import { MOCK_MODE } from '@/lib/mock';
+import {
+  User, LogOut, ChevronDown, Menu, X, MoreHorizontal,
+  LayoutDashboard, Settings, CreditCard,
+} from 'lucide-react';
+
+/**
+ * Navigation links config.
+ * - `auth`: if true, only shown when user is authenticated
+ * - Links are shown in order; on desktop, the first MAX_DESKTOP_NAV
+ *   are in the top bar and extras overflow into the user dropdown.
+ */
+const NAV_LINKS = [
+  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard, auth: true },
+  { href: '/settings', label: 'Settings', icon: Settings, auth: true },
+  { href: '/checkout', label: 'Billing', icon: CreditCard, auth: true },
+  // Add more links here — extras automatically overflow to dropdown/mobile
+];
+
+/** Max nav links shown in the desktop top bar before overflow */
+const MAX_DESKTOP_NAV = 3;
+
+export function Header() {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const { user, signOut, isAuthenticated } = useMockAuth();
+  const pathname = usePathname();
+
+  const handleSignOut = () => {
+    signOut();
+    setDropdownOpen(false);
+    setMobileOpen(false);
+  };
+
+  // Filter links based on auth state
+  const visibleLinks = NAV_LINKS.filter((link) => !link.auth || isAuthenticated);
+  const desktopLinks = visibleLinks.slice(0, MAX_DESKTOP_NAV);
+  const overflowLinks = visibleLinks.slice(MAX_DESKTOP_NAV);
+
+  const isActive = (href: string) =>
+    pathname === href || (href !== '/' && pathname.startsWith(href));
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="mx-auto flex h-14 max-w-6xl items-center px-4">
+        {/* Logo — left */}
+        <Link href="/" className="mr-auto text-lg font-bold text-foreground">
+          {'{{titleCaseName}}'}
+        </Link>
+
+        {/* ═══ Desktop (md+) ═══ */}
+        <div className="hidden items-center gap-1 md:flex">
+          {/* Primary nav links */}
+          {desktopLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={`rounded-md px-3 py-2 text-sm transition-colors ${
+                isActive(link.href)
+                  ? 'bg-primary/10 text-primary font-medium'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+              }`}
+            >
+              {link.label}
+            </Link>
+          ))}
+
+          <div className="ml-2 flex items-center gap-2">
+            <ThemeToggle />
+
+            {isAuthenticated && user ? (
+              <div className="relative">
+                <button
+                  onClick={() => setDropdownOpen(!dropdownOpen)}
+                  className="flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-1.5 text-sm hover:bg-muted transition-colors"
+                >
+                  <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10">
+                    <User className="h-3.5 w-3.5 text-primary" />
+                  </div>
+                  <span className="text-foreground">{user.name}</span>
+                  {MOCK_MODE && (
+                    <span className="rounded bg-primary/10 px-1 py-0.5 text-[10px] text-primary font-medium">Mock</span>
+                  )}
+                  <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
+                </button>
+
+                {dropdownOpen && (
+                  <>
+                    <div className="fixed inset-0 z-40" onClick={() => setDropdownOpen(false)} />
+                    <div className="absolute right-0 top-full z-50 mt-1 w-56 rounded-lg border border-border bg-card shadow-lg">
+                      {/* User info */}
+                      <div className="border-b border-border px-4 py-3">
+                        <p className="text-sm font-medium text-foreground">{user.name}</p>
+                        <p className="text-xs text-muted-foreground">{user.email}</p>
+                      </div>
+
+                      {/* Overflow nav links (4th+ links go here) */}
+                      {overflowLinks.length > 0 && (
+                        <div className="border-b border-border py-1">
+                          {overflowLinks.map((link) => (
+                            <Link
+                              key={link.href}
+                              href={link.href}
+                              onClick={() => setDropdownOpen(false)}
+                              className={`flex items-center gap-2 px-4 py-2 text-sm transition-colors ${
+                                isActive(link.href)
+                                  ? 'text-primary bg-primary/5'
+                                  : 'text-foreground hover:bg-muted'
+                              }`}
+                            >
+                              <link.icon className="h-4 w-4 text-muted-foreground" />
+                              {link.label}
+                            </Link>
+                          ))}
+                        </div>
+                      )}
+
+                      {/* Sign out */}
+                      <div className="py-1">
+                        <button
+                          onClick={handleSignOut}
+                          className="flex w-full items-center gap-2 px-4 py-2 text-sm text-destructive hover:bg-muted transition-colors"
+                        >
+                          <LogOut className="h-4 w-4" /> Sign Out
+                        </button>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            ) : (
+              <>
+                <Link href="/login" className="rounded-md px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors">
+                  Sign In
+                </Link>
+                <Link href="/signup" className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+                  Sign Up
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* ═══ Mobile (<md) ═══ */}
+        <div className="flex items-center gap-2 md:hidden">
+          <ThemeToggle />
+          <button
+            className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-muted"
+            onClick={() => { setMobileOpen(!mobileOpen); setDropdownOpen(false); }}
+            aria-label="Toggle menu"
+          >
+            {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+        </div>
+      </div>
+
+      {/* ═══ Mobile overlay panel ═══ */}
+      {mobileOpen && (
+        <>
+          <div className="fixed inset-0 top-14 z-40 bg-background/80 backdrop-blur-sm md:hidden" onClick={() => setMobileOpen(false)} />
+          <div className="fixed inset-x-0 top-14 z-50 border-b border-border bg-background shadow-lg md:hidden">
+            {/* Nav links — filtered by auth */}
+            {visibleLinks.length > 0 && (
+              <nav className="px-4 py-2">
+                {visibleLinks.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    onClick={() => setMobileOpen(false)}
+                    className={`flex items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors ${
+                      isActive(link.href)
+                        ? 'bg-primary/10 text-primary font-medium'
+                        : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                    }`}
+                  >
+                    <link.icon className="h-4 w-4" />
+                    {link.label}
+                  </Link>
+                ))}
+              </nav>
+            )}
+
+            {/* User section */}
+            <div className="border-t border-border px-4 py-3">
+              {isAuthenticated && user ? (
+                <>
+                  <div className="flex items-center gap-3 px-3 py-2">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
+                      <User className="h-4 w-4 text-primary" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm font-medium text-foreground truncate">{user.name}</p>
+                      <p className="text-xs text-muted-foreground truncate">{user.email}</p>
+                    </div>
+                    {MOCK_MODE && (
+                      <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] text-primary font-medium">Mock</span>
+                    )}
+                  </div>
+                  <button
+                    onClick={handleSignOut}
+                    className="mt-1 flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-destructive hover:bg-muted transition-colors"
+                  >
+                    <LogOut className="h-4 w-4" /> Sign Out
+                  </button>
+                </>
+              ) : (
+                <div className="flex gap-2">
+                  <Link href="/login" onClick={() => setMobileOpen(false)} className="flex-1 text-center rounded-md border border-border px-3 py-2.5 text-sm text-foreground hover:bg-muted transition-colors">
+                    Sign In
+                  </Link>
+                  <Link href="/signup" onClick={() => setMobileOpen(false)} className="flex-1 text-center rounded-md bg-primary px-3 py-2.5 text-sm text-primary-foreground hover:bg-primary/90 transition-colors">
+                    Sign Up
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </header>
+  );
+}

package/dist/templates/web/iot-dashboard/template/package.json

@@ -15,7 +15,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "@digilogiclabs/platform-core": "^1.14.0",
-    "@digilogiclabs/app-sdk": "^1.1.0",
     "@digilogiclabs/saas-factory-ui": "^1.8.1",
     "tailwindcss": "^4.1.0",
     "@tailwindcss/postcss": "^4.1.0",

package/dist/templates/web/iot-dashboard/template/src/components/providers/app-providers.tsx

@@ -2,7 +2,6 @@
 
 import { ThemeProvider } from 'next-themes'
 import { Toaster } from '@digilogiclabs/saas-factory-ui'
-import { DLLProvider } from '@digilogiclabs/app-sdk'
 
 interface AppProvidersProps {
   children: React.ReactNode
@@ -11,10 +10,8 @@ interface AppProvidersProps {
 export function AppProviders({ children }: AppProvidersProps) {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-      <DLLProvider>
-        {children}
-        <Toaster />
-      </DLLProvider>
+      {children}
+      <Toaster />
     </ThemeProvider>
   )
 }

package/dist/templates/web/marketplace/template/package.json

@@ -15,7 +15,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "@digilogiclabs/platform-core": "^1.14.0",
-    "@digilogiclabs/app-sdk": "^1.1.0",
     "@digilogiclabs/saas-factory-ui": "^1.8.1",
     "tailwindcss": "^4.1.0",
     "@tailwindcss/postcss": "^4.1.0",

package/dist/templates/web/marketplace/template/src/components/providers/app-providers.tsx

@@ -2,7 +2,6 @@
 
 import { ThemeProvider } from 'next-themes'
 import { Toaster } from '@digilogiclabs/saas-factory-ui'
-import { DLLProvider } from '@digilogiclabs/app-sdk'
 
 interface AppProvidersProps {
   children: React.ReactNode
@@ -11,10 +10,8 @@ interface AppProvidersProps {
 export function AppProviders({ children }: AppProvidersProps) {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-      <DLLProvider>
-        {children}
-        <Toaster />
-      </DLLProvider>
+      {children}
+      <Toaster />
     </ThemeProvider>
   )
 }

package/dist/templates/web/micro-saas/template/package.json

@@ -15,7 +15,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "@digilogiclabs/platform-core": "^1.14.0",
-    "@digilogiclabs/app-sdk": "^1.1.0",
     "@digilogiclabs/saas-factory-ui": "^1.8.1",
     "tailwindcss": "^4.1.0",
     "@tailwindcss/postcss": "^4.1.0",

package/dist/templates/web/micro-saas/template/src/components/providers/app-providers.tsx

@@ -2,7 +2,6 @@
 
 import { ThemeProvider } from 'next-themes'
 import { Toaster } from '@digilogiclabs/saas-factory-ui'
-import { DLLProvider } from '@digilogiclabs/app-sdk'
 
 interface AppProvidersProps {
   children: React.ReactNode
@@ -11,10 +10,8 @@ interface AppProvidersProps {
 export function AppProviders({ children }: AppProvidersProps) {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-      <DLLProvider>
-        {children}
-        <Toaster />
-      </DLLProvider>
+      {children}
+      <Toaster />
     </ThemeProvider>
   )
 }

package/dist/templates/web/ui-auth/template/eslint.config.mjs

@@ -0,0 +1,14 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [...compat.extends('next/core-web-vitals')];
+
+export default eslintConfig;

package/dist/templates/web/ui-auth/template/src/app/checkout/page.tsx

@@ -8,13 +8,13 @@ export default function CheckoutPage() {
   };
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="p-8 bg-white rounded-lg shadow-md">
+    <div className="flex items-center justify-center min-h-screen bg-muted">
+      <div className="p-8 bg-card rounded-lg shadow-md border border-border">
         <h1 className="text-2xl font-bold mb-4">Checkout</h1>
         <p className="mb-6">Click the button below to proceed to payment.</p>
         <button 
           onClick={onCheckout}
-          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          className="px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90"
         >
           Proceed to Checkout
         </button>