@digilogiclabs/create-saas-app 1.10.0 → 1.10.2

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

@@ -0,0 +1,193 @@
+'use client'
+
+import { useState } from 'react'
+import { useAuth } from '@/hooks/useAuth'
+import { LoginForm } from '@/components/auth/login-form'
+import { Button } from '@/components/ui/button'
+{{#ai.enabled}}
+import { ChatPanel } from '@digilogiclabs/saas-factory-ai/react'
+{{#ai.hasAudio}}
+import { AudioGenerator } from '@/components/ai/audio-generator'
+{{/ai.hasAudio}}
+{{#ai.hasVideo}}
+import { VideoGenerator } from '@/components/ai/video-generator'
+{{/ai.hasVideo}}
+{{/ai.enabled}}
+
+export default function HomePage() {
+  const { user, signOut } = useAuth()
+  {{#ai.enabled}}
+  const [activeTab, setActiveTab] = useState<'chat' | 'audio' | 'video'>('chat')
+  {{/ai.enabled}}
+
+  if (!user) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="max-w-md w-full space-y-8">
+          <div className="text-center">
+            <h2 className="text-3xl font-extrabold text-gray-900">
+              Welcome to {{titleCaseName}}
+            </h2>
+            {{#ai.enabled}}
+            <p className="mt-2 text-sm text-gray-600">
+              AI-powered SaaS application with {{ai.capabilities.join(', ')}} capabilities
+            </p>
+            {{/ai.enabled}}
+            {{^ai.enabled}}
+            <p className="mt-2 text-sm text-gray-600">
+              Your modern SaaS application
+            </p>
+            {{/ai.enabled}}
+          </div>
+          <LoginForm />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <header className="bg-white shadow">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center py-6">
+            <div className="flex items-center">
+              <h1 className="text-3xl font-bold text-gray-900">
+                {{titleCaseName}}
+              </h1>
+              {{#ai.enabled}}
+              <span className="ml-3 px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
+                AI-Powered
+              </span>
+              {{/ai.enabled}}
+            </div>
+            <div className="flex items-center space-x-4">
+              <span className="text-sm text-gray-700">
+                Welcome, {user.email}
+              </span>
+              <Button onClick={() => signOut()}>
+                Sign Out
+              </Button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        {{#ai.enabled}}
+        {/* AI Capabilities Navigation */}
+        <div className="px-4 py-6 sm:px-0">
+          <div className="border-b border-gray-200">
+            <nav className="-mb-px flex space-x-8">
+              {{#ai.hasText}}
+              <button
+                onClick={() => setActiveTab('chat')}
+                className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                  activeTab === 'chat'
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                💬 AI Chat
+              </button>
+              {{/ai.hasText}}
+              {{#ai.hasAudio}}
+              <button
+                onClick={() => setActiveTab('audio')}
+                className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                  activeTab === 'audio'
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                🎵 Audio Generation
+              </button>
+              {{/ai.hasAudio}}
+              {{#ai.hasVideo}}
+              <button
+                onClick={() => setActiveTab('video')}
+                className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                  activeTab === 'video'
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                🎥 Video Generation
+              </button>
+              {{/ai.hasVideo}}
+            </nav>
+          </div>
+        </div>
+
+        {/* AI Content */}
+        <div className="px-4 py-6 sm:px-0">
+          {{#ai.hasText}}
+          {activeTab === 'chat' && (
+            <div className="bg-white shadow rounded-lg">
+              <div className="px-4 py-5 sm:p-6">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
+                  AI Assistant powered by {{ai.provider}}
+                </h3>
+                <ChatPanel 
+                  className="h-96"
+                  placeholder="Ask me anything..."
+                  onError={(error) => console.error('Chat error:', error)}
+                />
+              </div>
+            </div>
+          )}
+          {{/ai.hasText}}
+          
+          {{#ai.hasAudio}}
+          {activeTab === 'audio' && (
+            <div className="bg-white shadow rounded-lg">
+              <div className="px-4 py-5 sm:p-6">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
+                  AI Audio Generation
+                </h3>
+                <AudioGenerator />
+              </div>
+            </div>
+          )}
+          {{/ai.hasAudio}}
+          
+          {{#ai.hasVideo}}
+          {activeTab === 'video' && (
+            <div className="bg-white shadow rounded-lg">
+              <div className="px-4 py-5 sm:p-6">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
+                  AI Video Generation
+                </h3>
+                <VideoGenerator />
+              </div>
+            </div>
+          )}
+          {{/ai.hasVideo}}
+        </div>
+        {{/ai.enabled}}
+        
+        {{^ai.enabled}}
+        {/* Non-AI Content */}
+        <div className="px-4 py-6 sm:px-0">
+          <div className="bg-white shadow rounded-lg">
+            <div className="px-4 py-5 sm:p-6">
+              <h3 className="text-lg leading-6 font-medium text-gray-900">
+                Welcome to your SaaS application
+              </h3>
+              <p className="mt-1 text-sm text-gray-600">
+                This is your dashboard. Start building your application features here.
+              </p>
+              <div className="mt-5">
+                <Button>
+                  Get Started
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+        {{/ai.enabled}}
+      </main>
+    </div>
+  )
+}

package/dist/templates/web/ui-auth-ai/template/src/components/ai/audio-generator.tsx

@@ -0,0 +1,141 @@
+'use client'
+
+import { useState } from 'react'
+import { useGenerateAudio, useJobStatus } from '@digilogiclabs/saas-factory-ai/react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { JobProgress } from '@digilogiclabs/saas-factory-ai/react'
+
+export function AudioGenerator() {
+  const [prompt, setPrompt] = useState('')
+  const [style, setStyle] = useState('lofi')
+  const [duration, setDuration] = useState(30)
+  const [jobId, setJobId] = useState<string | null>(null)
+  const [audioUrl, setAudioUrl] = useState<string | null>(null)
+  
+  const { generate, loading, error } = useGenerateAudio()
+  const { status } = useJobStatus(jobId)
+
+  const handleGenerate = async () => {
+    if (!prompt.trim()) return
+    
+    try {
+      const result = await generate(prompt, {
+        style,
+        durationSec: duration,
+        format: 'mp3'
+      })
+      setJobId(result.jobId)
+      setAudioUrl(null)
+    } catch (err) {
+      console.error('Audio generation failed:', err)
+    }
+  }
+
+  const handleJobComplete = (result: any) => {
+    if (result.url) {
+      setAudioUrl(result.url)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4">
+        <div>
+          <Label htmlFor="prompt">Audio Description</Label>
+          <Input
+            id="prompt"
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Describe the audio you want to generate..."
+            className="mt-1"
+          />
+        </div>
+        
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <Label htmlFor="style">Style</Label>
+            <Select value={style} onValueChange={setStyle}>
+              <SelectTrigger className="mt-1">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="lofi">Lo-Fi</SelectItem>
+                <SelectItem value="jazz">Jazz</SelectItem>
+                <SelectItem value="classical">Classical</SelectItem>
+                <SelectItem value="electronic">Electronic</SelectItem>
+                <SelectItem value="ambient">Ambient</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          
+          <div>
+            <Label htmlFor="duration">Duration (seconds)</Label>
+            <Input
+              id="duration"
+              type="number"
+              value={duration}
+              onChange={(e) => setDuration(parseInt(e.target.value) || 30)}
+              min={10}
+              max={300}
+              className="mt-1"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-center">
+        <Button
+          onClick={handleGenerate}
+          disabled={loading || !prompt.trim() || !!jobId}
+          className="px-8"
+        >
+          {loading ? 'Starting Generation...' : 'Generate Audio'}
+        </Button>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-red-50 border border-red-200 rounded-md">
+          <p className="text-sm text-red-600">{error.message}</p>
+        </div>
+      )}
+
+      {jobId && (
+        <div className="space-y-4">
+          <JobProgress 
+            jobId={jobId}
+            onComplete={handleJobComplete}
+            className="p-4 bg-gray-50 rounded-md"
+          />
+        </div>
+      )}
+
+      {audioUrl && (
+        <div className="p-4 bg-green-50 border border-green-200 rounded-md">
+          <h4 className="font-medium text-green-800 mb-3">Generated Audio</h4>
+          <audio controls className="w-full">
+            <source src={audioUrl} type="audio/mpeg" />
+            Your browser does not support the audio element.
+          </audio>
+          <div className="mt-3">
+            <Button
+              variant="outline"
+              onClick={() => {
+                const link = document.createElement('a')
+                link.href = audioUrl
+                link.download = 'generated-audio.mp3'
+                document.body.appendChild(link)
+                link.click()
+                document.body.removeChild(link)
+              }}
+            >
+              Download Audio
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/dist/templates/web/ui-auth-ai/template/src/components/ai/video-generator.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import { useState } from 'react'
+import { useGenerateVideo, useJobStatus } from '@digilogiclabs/saas-factory-ai/react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { JobProgress } from '@digilogiclabs/saas-factory-ai/react'
+
+export function VideoGenerator() {
+  const [prompt, setPrompt] = useState('')
+  const [style, setStyle] = useState('realistic')
+  const [duration, setDuration] = useState(10)
+  const [resolution, setResolution] = useState('720p')
+  const [jobId, setJobId] = useState<string | null>(null)
+  const [videoUrl, setVideoUrl] = useState<string | null>(null)
+  
+  const { generate, loading, error } = useGenerateVideo()
+  const { status } = useJobStatus(jobId)
+
+  const handleGenerate = async () => {
+    if (!prompt.trim()) return
+    
+    try {
+      const result = await generate(prompt, {
+        style,
+        durationSec: duration,
+        resolution,
+        format: 'mp4'
+      })
+      setJobId(result.jobId)
+      setVideoUrl(null)
+    } catch (err) {
+      console.error('Video generation failed:', err)
+    }
+  }
+
+  const handleJobComplete = (result: any) => {
+    if (result.url) {
+      setVideoUrl(result.url)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4">
+        <div>
+          <Label htmlFor="video-prompt">Video Description</Label>
+          <Textarea
+            id="video-prompt"
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Describe the video you want to generate in detail..."
+            className="mt-1 min-h-[100px]"
+          />
+        </div>
+        
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            <Label htmlFor="video-style">Style</Label>
+            <Select value={style} onValueChange={setStyle}>
+              <SelectTrigger className="mt-1">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="realistic">Realistic</SelectItem>
+                <SelectItem value="animated">Animated</SelectItem>
+                <SelectItem value="cinematic">Cinematic</SelectItem>
+                <SelectItem value="artistic">Artistic</SelectItem>
+                <SelectItem value="documentary">Documentary</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          
+          <div>
+            <Label htmlFor="video-duration">Duration (seconds)</Label>
+            <Input
+              id="video-duration"
+              type="number"
+              value={duration}
+              onChange={(e) => setDuration(parseInt(e.target.value) || 10)}
+              min={5}
+              max={60}
+              className="mt-1"
+            />
+          </div>
+          
+          <div>
+            <Label htmlFor="video-resolution">Resolution</Label>
+            <Select value={resolution} onValueChange={setResolution}>
+              <SelectTrigger className="mt-1">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="480p">480p (SD)</SelectItem>
+                <SelectItem value="720p">720p (HD)</SelectItem>
+                <SelectItem value="1080p">1080p (Full HD)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-center">
+        <Button
+          onClick={handleGenerate}
+          disabled={loading || !prompt.trim() || !!jobId}
+          className="px-8"
+        >
+          {loading ? 'Starting Generation...' : 'Generate Video'}
+        </Button>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-red-50 border border-red-200 rounded-md">
+          <p className="text-sm text-red-600">{error.message}</p>
+        </div>
+      )}
+
+      {jobId && (
+        <div className="space-y-4">
+          <JobProgress 
+            jobId={jobId}
+            onComplete={handleJobComplete}
+            className="p-4 bg-gray-50 rounded-md"
+          />
+        </div>
+      )}
+
+      {videoUrl && (
+        <div className="p-4 bg-green-50 border border-green-200 rounded-md">
+          <h4 className="font-medium text-green-800 mb-3">Generated Video</h4>
+          <video controls className="w-full rounded-md" style={{ maxHeight: '400px' }}>
+            <source src={videoUrl} type="video/mp4" />
+            Your browser does not support the video element.
+          </video>
+          <div className="mt-3">
+            <Button
+              variant="outline"
+              onClick={() => {
+                const link = document.createElement('a')
+                link.href = videoUrl
+                link.download = 'generated-video.mp4'
+                document.body.appendChild(link)
+                link.click()
+                document.body.removeChild(link)
+              }}
+            >
+              Download Video
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/dist/templates/web/ui-auth-ai/template/src/components/auth/login-form.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import { useState } from 'react'
+import { createClient } from '@/lib/supabase'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+export function LoginForm() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [isSignUp, setIsSignUp] = useState(false)
+  const [message, setMessage] = useState('')
+  const supabase = createClient()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setMessage('')
+
+    try {
+      if (isSignUp) {
+        const { error } = await supabase.auth.signUp({
+          email,
+          password,
+        })
+        if (error) throw error
+        setMessage('Check your email for the confirmation link!')
+      } else {
+        const { error } = await supabase.auth.signInWithPassword({
+          email,
+          password,
+        })
+        if (error) throw error
+      }
+    } catch (error: any) {
+      setMessage(error.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="bg-white py-8 px-6 shadow rounded-lg">
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div>
+          <Label htmlFor="email">Email address</Label>
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="mt-1"
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete={isSignUp ? 'new-password' : 'current-password'}
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="mt-1"
+          />
+        </div>
+
+        {message && (
+          <div className={`text-sm ${message.includes('Check your email') ? 'text-green-600' : 'text-red-600'}`}>
+            {message}
+          </div>
+        )}
+
+        <div>
+          <Button
+            type="submit"
+            disabled={loading}
+            className="w-full"
+          >
+            {loading ? 'Loading...' : isSignUp ? 'Sign Up' : 'Sign In'}
+          </Button>
+        </div>
+
+        <div className="text-center">
+          <button
+            type="button"
+            onClick={() => {
+              setIsSignUp(!isSignUp)
+              setMessage('')
+            }}
+            className="text-sm text-blue-600 hover:text-blue-500"
+          >
+            {isSignUp ? 'Already have an account? Sign in' : "Don't have an account? Sign up"}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}

package/dist/templates/web/ui-auth-ai/template/src/components/ui/button.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'default', ...props }, ref) => {
+    const variants = {
+      default: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
+      destructive: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
+      outline: 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-blue-500',
+      secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
+      ghost: 'hover:bg-gray-100 text-gray-700 focus:ring-gray-500',
+      link: 'underline-offset-4 hover:underline text-blue-600'
+    }
+
+    const sizes = {
+      default: 'h-10 px-4 py-2',
+      sm: 'h-8 px-3 text-sm',
+      lg: 'h-12 px-8 text-lg',
+      icon: 'h-10 w-10'
+    }
+
+    return (
+      <button
+        className={cn(
+          'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none',
+          variants[variant],
+          sizes[size],
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button }

package/dist/templates/web/ui-auth-ai/template/src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/dist/templates/web/ui-auth-ai/template/src/components/ui/label.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Label.displayName = "Label"
+
+export { Label }