@digilogiclabs/create-saas-app 1.10.0 → 1.10.2

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"]
+}

package/src/templates/web/ui-auth-payments-audio/template/src/app/page.tsx

@@ -224,7 +224,7 @@ export default function Home() {
           {/* Main Content */}
           <div className="lg:col-span-3 space-y-8">
             {/* Now Playing Card with Enhanced Glassmorphism */}
-            <div className="${glass.card} ${glass.border} rounded-3xl p-6 mb-8 ${animations.hover.lift} ${animations.transition.smooth}">
+            <div className={`${glass.card} ${glass.border} rounded-3xl p-6 mb-8 ${animations.hover.lift} ${animations.transition.smooth}">
               <NowPlayingCard
                 track={currentTrack || demoPlaylist[0]}
                 isPlaying={isPlaying}
@@ -236,7 +236,7 @@ export default function Home() {
 
             {/* Featured Playlists with Staggered Animation */}
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-              <div className="${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}">
+              <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}">
                 <PlaylistCard
                   title="Today's Top Hits"
                   description="The most played songs today"
@@ -246,7 +246,7 @@ export default function Home() {
                   className="bg-transparent border-none"
                 />
               </div>
-              <div className="${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}">
+              <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}">
                 <PlaylistCard
                   title="Chill Vibes"
                   description="Relaxing music for focus and creativity"
@@ -256,7 +256,7 @@ export default function Home() {
                   className="bg-transparent border-none"
                 />
               </div>
-              <div className="${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}">
+              <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}">
                 <PlaylistCard
                   title="Electronic Pulse"
                   description="High-energy electronic and dance music"
@@ -269,7 +269,7 @@ export default function Home() {
             </div>
 
             {/* Track List with Glassmorphism */}
-            <div className="${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.transition.smooth}">
+            <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.transition.smooth}">
               <TrackList
                 tracks={demoPlaylist}
                 currentTrackId={currentTrack?.id}
@@ -288,7 +288,7 @@ export default function Home() {
 
           {/* Sidebar with Glassmorphism */}
           <div className="lg:col-span-1">
-            <div className="${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.lift} ${animations.transition.smooth}">
+            <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.lift} ${animations.transition.smooth}">
               <PlaylistSidebar
                 playlists={[
                   { id: '1', name: 'Liked Songs', trackCount: 47 },
@@ -306,8 +306,8 @@ export default function Home() {
 
         {/* Features Overview with Enhanced Glassmorphism */}
         <ResponsiveGrid columns={gridConfig.columns_1_sm2_md4} gap="lg" className="mb-16">
-          <div className="${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}">
-            <div className="mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}">
+          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}">
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
               <Zap className="h-6 w-6 text-blue-400" />
             </div>
             <h3 className="text-lg font-semibold mb-2">High-Quality Streaming</h3>
@@ -316,8 +316,8 @@ export default function Home() {
             </p>
           </div>
 
-          <div className="${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}">
-            <div className="mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}">
+          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}">
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
               <Shield className="h-6 w-6 text-green-400" />
             </div>
             <h3 className="text-lg font-semibold mb-2">Secure & Private</h3>
@@ -326,8 +326,8 @@ export default function Home() {
             </p>
           </div>
 
-          <div className="${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}">
-            <div className="mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}">
+          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}">
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
               <Rocket className="h-6 w-6 text-purple-400" />
             </div>
             <h3 className="text-lg font-semibold mb-2">Offline Support</h3>
@@ -336,8 +336,8 @@ export default function Home() {
             </p>
           </div>
 
-          <div className="${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.extra}">
-            <div className="mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}">
+          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.extra}">
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
               <svg className="h-6 w-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
               </svg>
@@ -355,7 +355,7 @@ export default function Home() {
       </OfflineWrapper>
 
       {/* Fixed Audio Player Bar with Enhanced Glassmorphism */}
-      <div className="fixed bottom-0 left-0 right-0 z-50 ${glass.card} ${glass.border} border-t backdrop-blur-xl">
+      <div className={`fixed bottom-0 left-0 right-0 z-50 ${glass.card} ${glass.border} border-t backdrop-blur-xl`}>
         <FixedAudioBar
           track={currentTrack || demoPlaylist[0]}
           isPlaying={isPlaying}