@digilogiclabs/create-saas-app 2.10.0 → 2.12.0

package/src/templates/web/ui-only/template/src/app/login/page.tsx

@@ -1,63 +1,69 @@
-'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>
-  );
-}
-
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    // TODO: [REAL_DATA] Replace with your auth provider's sign in
+    alert('Login submitted. Connect your auth provider to enable real authentication.');
+    console.log('Login:', { email, password });
+  };
+
+  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">Sign In</h1>
+          <p className="text-sm text-muted-foreground mb-6">Welcome back. Sign in to continue.</p>
+
+          <form onSubmit={handleLogin} 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
+              />
+            </div>
+            <button type="submit" className="w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+              Sign In
+            </button>
+            <button
+              type="button"
+              onClick={() => alert('OAuth requires an auth provider. See .env.example for options.')}
+              className="w-full rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-foreground hover:bg-muted transition-colors"
+            >
+              Sign in with Google
+            </button>
+          </form>
+
+          <p className="mt-6 text-center text-sm text-muted-foreground">
+            Don&apos;t have an account?{' '}
+            <Link href="/signup" className="text-primary hover:underline">Sign up</Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,91 +1,69 @@
-'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>
-  )
-}
+import { ArrowRight, Zap, Shield, Rocket } from 'lucide-react'
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-background">
+      {/* Hero */}
+      <section className="mx-auto max-w-5xl px-4 py-24 text-center">
+        <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl mb-4">
+          Welcome to{' '}
+          <span className="text-primary">{'{{titleCaseName}}'}</span>
+        </h1>
+        <p className="mx-auto max-w-2xl text-lg text-muted-foreground mb-8">
+          {'{{description}}'}. A lightweight Next.js starter with beautiful UI components
+          and dark mode support.
+        </p>
+        <div className="flex items-center justify-center gap-4">
+          <Link
+            href="/signup"
+            className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            Get Started <ArrowRight className="ml-2 h-4 w-4" />
+          </Link>
+          <Link
+            href="/login"
+            className="inline-flex items-center justify-center rounded-md border border-input bg-background px-8 py-3 text-sm font-medium text-foreground hover:bg-accent transition-colors"
+          >
+            Sign In
+          </Link>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="mx-auto max-w-5xl px-4 pb-24">
+        <div className="grid gap-6 md:grid-cols-3">
+          <div className="rounded-xl border border-border bg-card p-6 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/30">
+              <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-card-foreground mb-2">Lightning Fast</h3>
+            <p className="text-sm text-muted-foreground">
+              Built with Next.js 15 and Tailwind CSS 4 for blazing performance.
+            </p>
+          </div>
+
+          <div className="rounded-xl border border-border bg-card p-6 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
+              <Shield className="h-6 w-6 text-emerald-600 dark:text-emerald-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-card-foreground mb-2">Design System</h3>
+            <p className="text-sm text-muted-foreground">
+              Semantic tokens, dark mode, and consistent styling out of the box.
+            </p>
+          </div>
+
+          <div className="rounded-xl border border-border bg-card p-6 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900/30">
+              <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-card-foreground mb-2">Ready to Grow</h3>
+            <p className="text-sm text-muted-foreground">
+              Add auth, payments, and more when you need them. Start simple, scale up.
+            </p>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}

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

@@ -1,79 +1,94 @@
-'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>
-  );
-}
-
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+
+export default function SignupPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+    // TODO: [REAL_DATA] Replace with your auth provider's sign up
+    alert('Signup submitted. Connect your auth provider to enable real authentication.');
+    console.log('Signup:', { email, password });
+  };
+
+  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>
+
+          {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>
+            <div>
+              <label htmlFor="confirm-password" className="block text-sm font-medium text-foreground mb-1">Confirm Password</label>
+              <input
+                id="confirm-password"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(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 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+              Sign Up
+            </button>
+            <button
+              type="button"
+              onClick={() => alert('OAuth requires an auth provider. See .env.example for options.')}
+              className="w-full rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-foreground hover:bg-muted transition-colors"
+            >
+              Sign up with Google
+            </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/src/templates/web/ui-only/template/src/components/providers/app-providers.tsx

@@ -1,8 +1,6 @@
 'use client'
 
 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 +9,7 @@ interface AppProvidersProps {
 export function AppProviders({ children }: AppProvidersProps) {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-      <DLLProvider>
-        {children}
-        <Toaster />
-      </DLLProvider>
+      {children}
     </ThemeProvider>
   )
 }