@digilogiclabs/create-saas-app 1.0.1

package/src/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/src/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/src/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/src/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/src/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/src/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 }

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

@@ -0,0 +1,37 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface SelectProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        className={cn(
+          "flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+    )
+  }
+)
+Select.displayName = "Select"
+
+// Simplified Select components for the template
+const SelectTrigger = Select
+const SelectValue = ({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span {...props}>{children}</span>
+)
+const SelectContent = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div {...props}>{children}</div>
+)
+const SelectItem = ({ value, children, ...props }: React.OptionHTMLAttributes<HTMLOptionElement>) => (
+  <option value={value} {...props}>{children}</option>
+)
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem }

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

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm 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}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/templates/web/ui-auth-ai/template/src/hooks/useAuth.ts

@@ -0,0 +1 @@
+export { useAuth } from '@/providers/auth-provider'

package/src/templates/web/ui-auth-ai/template/src/lib/supabase.ts

@@ -0,0 +1,8 @@
+import { createBrowserClient } from '@supabase/ssr'
+
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+}

package/src/templates/web/ui-auth-ai/template/src/lib/utils.ts

@@ -0,0 +1,5 @@
+import { type ClassValue, clsx } from "clsx"
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs)
+}

package/src/templates/web/ui-auth-ai/template/src/providers/auth-provider.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState } from 'react'
+import { createClient } from '@/lib/supabase'
+import type { User } from '@supabase/supabase-js'
+
+interface AuthContextType {
+  user: User | null
+  loading: boolean
+  signOut: () => Promise<void>
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [loading, setLoading] = useState(true)
+  const supabase = createClient()
+
+  useEffect(() => {
+    // Get initial session
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setUser(session?.user ?? null)
+      setLoading(false)
+    })
+
+    // Listen for auth changes
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setUser(session?.user ?? null)
+      setLoading(false)
+    })
+
+    return () => subscription.unsubscribe()
+  }, [supabase.auth])
+
+  const signOut = async () => {
+    await supabase.auth.signOut()
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, loading, signOut }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}

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

@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+        },
+      },
+    },
+  },
+  plugins: [],
+}

package/src/templates/web/ui-auth-ai/template/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}