@digilogiclabs/create-saas-app 1.14.0 → 1.17.0

package/dist/templates/web/ui-auth-payments-ai/template/src/components/client/signup-form.tsx

@@ -1,7 +1,15 @@
 'use client'
 
 import React, { useState, useActionState } from 'react'
-import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui'
+import { 
+  Button, 
+  Card, 
+  Input, 
+  Label,
+  SingleStepForm,
+  FormField,
+  FormProvider
+} from '@digilogiclabs/saas-factory-ui'
 import { useAuth } from '@digilogiclabs/saas-factory-auth'
 import { useRouter } from 'next/navigation'
 import { signUpAction } from '@/lib/actions/auth'
@@ -92,84 +100,92 @@ export function SignupForm() {
           </div>
         )}
 
-        <form action={handleServerAction} className="space-y-4">
-          <div>
-            <Label htmlFor="name">Name</Label>
-            <Input
-              id="name"
+        {/* Enhanced form with enterprise form system */}
+        <FormProvider>
+          <SingleStepForm
+            onSubmit={async (formData) => {
+              try {
+                const result = await formAction(formData)
+                if (result?.success) {
+                  const emailValue = formData.get('email') as string
+                  const passwordValue = formData.get('password') as string
+                  await signUp(emailValue, passwordValue)
+                  router.push('/')
+                }
+              } catch (err) {
+                console.error('Sign up error:', err)
+              }
+            }}
+            className="space-y-4"
+            submitButton={{
+              text: loading ? 'Signing Up...' : 'Sign Up',
+              disabled: loading,
+              className: 'w-full'
+            }}
+            realTimeValidation={true}
+            debounceMs={300}
+            crossFieldValidation={{
+              passwordMatch: {
+                fields: ['password', 'confirmPassword'],
+                validator: (values) => values.password === values.confirmPassword,
+                message: 'Passwords must match'
+              }
+            }}
+          >
+            <FormField
               name="name"
               type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Enter your name"
-              required
+              label="Name"
+              placeholder="Enter your full name"
+              validation={['required', 'minLength:2']}
               disabled={loading}
+              className="mb-4"
             />
-            {actionState?.fieldErrors?.name && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.name[0]}</p>
-            )}
-          </div>
-          <div>
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
+            
+            <FormField
               name="email"
               type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
+              label="Email"
               placeholder="Enter your email"
-              required
+              validation={['required', 'email']}
               disabled={loading}
+              className="mb-4"
             />
-            {actionState?.fieldErrors?.email && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.email[0]}</p>
-            )}
-          </div>
-          <div>
-            <Label htmlFor="password">Password</Label>
-            <Input
-              id="password"
+            
+            <FormField
               name="password"
               type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
+              label="Password"
               placeholder="Enter your password"
-              required
+              validation={['required', 'minLength:8', 'hasUppercase', 'hasLowercase', 'hasNumber']}
               disabled={loading}
+              className="mb-4"
+              showPasswordStrength={true}
+              helpText="Password must be at least 8 characters with uppercase, lowercase, and number"
             />
-            {actionState?.fieldErrors?.password && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.password[0]}</p>
-            )}
-          </div>
-          <div>
-            <Label htmlFor="confirmPassword">Confirm Password</Label>
-            <Input
-              id="confirmPassword"
+            
+            <FormField
               name="confirmPassword"
               type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
+              label="Confirm Password"
               placeholder="Confirm your password"
-              required
+              validation={['required']}
               disabled={loading}
+              className="mb-6"
             />
-            {actionState?.fieldErrors?.confirmPassword && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.confirmPassword[0]}</p>
-            )}
-          </div>
-          <Button type="submit" className="w-full" disabled={loading}>
-            {loading ? 'Signing Up...' : 'Sign Up'}
-          </Button>
-          <Button 
-            type="button" 
-            variant="outline" 
-            className="w-full"
-            onClick={handleGoogleSignUp}
-            disabled={loading}
-          >
-            Sign up with Google
-          </Button>
-        </form>
+          </SingleStepForm>
+        </FormProvider>
+
+        {/* Social Auth */}
+        <Button 
+          type="button" 
+          variant="outline" 
+          className="w-full mt-4"
+          onClick={handleGoogleSignUp}
+          disabled={loading}
+        >
+          Sign up with Google
+        </Button>
 
         <div className="mt-4 text-center">
           <p className="text-sm text-gray-600 dark:text-gray-300">

package/dist/templates/web/ui-auth-payments-ai/template/src/components/shared/header.tsx

@@ -144,7 +144,7 @@ export function Header() {
                   key={item.href}
                   href={item.href}
                   className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 relative px-3 py-2 rounded-lg hover:bg-gradient-to-r hover:from-primary/10 hover:to-secondary/10 animate-fade-in-up"
-                  style={{ animationDelay: `${index * 100}ms` }}
+                  style={{ animationDelay: (index * 100) + 'ms' }}
                 >
                   <item.icon className="w-4 h-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3" />
                   <span className="relative">

package/dist/templates/web/ui-auth-payments-audio/template/package.json

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.18.4",
+    "@digilogiclabs/saas-factory-ui": "^0.21.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.1",
     "@digilogiclabs/saas-factory-payments": "^1.1.0",
     "stripe": "^14.0.0",

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

@@ -1,6 +1,22 @@
 import { Suspense } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { User, Settings, CreditCard, Activity } from 'lucide-react'
+import { 
+  Button, 
+  Card, 
+  DashboardLayout,
+  CommandPalette,
+  Tour 
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  User, 
+  Settings, 
+  CreditCard, 
+  Activity,
+  Home,
+  Music,
+  Headphones,
+  Mic,
+  BarChart
+} from 'lucide-react'
 import { requireAuth } from '@/lib/auth-server'
 import Link from 'next/link'
 
@@ -90,26 +106,63 @@ export default async function DashboardPage() {
   // Server-side authentication requirement
   const user = await requireAuth()
 
+  const sidebarNavigation = [
+    { name: 'Overview', href: '/dashboard', icon: Home, current: true },
+    { name: 'Audio Library', href: '/dashboard/library', icon: Music },
+    { name: 'Recording Studio', href: '/dashboard/studio', icon: Mic },
+    { name: 'Playback', href: '/dashboard/player', icon: Headphones },
+    { name: 'Analytics', href: '/dashboard/analytics', icon: BarChart },
+    { name: 'Settings', href: '/settings', icon: Settings },
+    { name: 'Billing', href: '/billing', icon: CreditCard }
+  ]
+
+  const tourSteps = [
+    {
+      target: '[data-tour="overview"]',
+      title: 'Audio Dashboard',
+      content: 'Welcome to your audio production dashboard. Manage your tracks and recordings here.'
+    },
+    {
+      target: '[data-tour="stats"]',
+      title: 'Audio Statistics',
+      content: 'View your audio production metrics and usage statistics.'
+    },
+    {
+      target: '[data-tour="actions"]',
+      title: 'Audio Tools',
+      content: 'Quick access to recording, mixing, and audio management tools.'
+    }
+  ]
+
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Header */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-            Welcome back, {user.name || user.email}!
-          </h1>
-          <p className="text-gray-600 dark:text-gray-300 mt-2">
-            Here's what's happening with your account today.
-          </p>
-        </div>
+    <DashboardLayout
+      navigation={sidebarNavigation}
+      headerActions={[
+        <CommandPalette key="command-palette" />,
+        <Tour key="tour" steps={tourSteps} />
+      ]}
+    >
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          {/* Header */}
+          <div className="mb-8" data-tour="overview">
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              Welcome back, {user.name || user.email}!
+            </h1>
+            <p className="text-gray-600 dark:text-gray-300 mt-2">
+              Here's what's happening with your audio projects today.
+            </p>
+          </div>
 
         {/* Stats - Streaming with Suspense */}
-        <Suspense fallback={<UserStatsSkeleton />}>
-          <UserStats userId={user.id} />
-        </Suspense>
+        <div data-tour="stats">
+          <Suspense fallback={<UserStatsSkeleton />}>
+            <UserStats userId={user.id} />
+          </Suspense>
+        </div>
 
         {/* Quick Actions */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8" data-tour="actions">
           <Card className="p-6">
             <div className="flex items-center mb-4">
               <User className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
@@ -179,5 +232,6 @@ export default async function DashboardPage() {
         </Card>
       </div>
     </div>
+    </DashboardLayout>
   )
 }

package/dist/templates/web/ui-auth-payments-audio/template/src/components/shared/header.tsx

@@ -144,7 +144,7 @@ export function Header() {
                   key={item.href}
                   href={item.href}
                   className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 relative px-3 py-2 rounded-lg hover:bg-gradient-to-r hover:from-primary/10 hover:to-accent/10 animate-fade-in-up"
-                  style={{ animationDelay: `${index * 100}ms` }}
+                  style={{ animationDelay: (index * 100) + 'ms' }}
                 >
                   <item.icon className="w-4 h-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3" />
                   <span className="relative">

package/dist/templates/web/ui-auth-payments-video/template/package.json

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.18.4",
+    "@digilogiclabs/saas-factory-ui": "^0.21.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.1",
     "@digilogiclabs/saas-factory-payments": "^1.1.0",
     "stripe": "^14.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digilogiclabs/create-saas-app",
-  "version": "1.14.0",
+  "version": "1.17.0",
   "description": "Create modern SaaS applications with Digi Logic Labs packages",
   "main": "dist/cli/index.js",
   "bin": {

package/src/templates/mobile/ui-auth-payments/template/.env.example

@@ -0,0 +1,20 @@
+# Supabase Configuration
+EXPO_PUBLIC_SUPABASE_URL=your-supabase-url
+EXPO_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
+
+# Stripe Configuration  
+EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key
+
+# App Configuration
+EXPO_PUBLIC_APP_NAME={{titleCaseName}}
+EXPO_PUBLIC_APP_VERSION=1.0.0
+
+# Development
+EXPO_PUBLIC_API_URL=http://localhost:3000/api
+EXPO_PUBLIC_DEBUG=true
+
+# EAS Build Configuration (for CI/CD)
+EAS_PROJECT_ID=your-eas-project-id
+APPLE_ID=your-apple-id
+ASC_APP_ID=your-app-store-connect-app-id
+APPLE_TEAM_ID=your-apple-team-id

package/src/templates/mobile/ui-auth-payments/template/README.md

@@ -0,0 +1,218 @@
+# {{titleCaseName}} - Mobile App
+
+A React Native mobile application built with Expo, featuring authentication, payments, and a comprehensive dashboard.
+
+## 🚀 Quick Start
+
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+
+# Run on iOS simulator
+npm run ios
+
+# Run on Android emulator
+npm run android
+
+# Run on web
+npm run web
+```
+
+## 📱 Features
+
+- **Authentication**: Complete sign up, sign in, and user management
+- **Payments**: Stripe integration with payment methods and subscriptions
+- **Dashboard**: Real-time analytics and order management
+- **Native Navigation**: Bottom tabs with Expo Router
+- **Offline Support**: Network-aware components and offline caching
+- **Push Notifications**: Order updates and promotional messages
+- **Camera Integration**: Profile photos and QR code scanning
+- **Location Services**: Delivery tracking and location-based features
+
+## 🏗️ Tech Stack
+
+- **React Native** 0.73+ with Expo 50+
+- **TypeScript** for type safety
+- **Expo Router** for navigation
+- **Stripe** for payments
+- **Supabase** for backend services
+- **React Hook Form** + Zod for form validation
+- **@digilogiclabs/saas-factory-ui** for UI components
+- **@digilogiclabs/saas-factory-auth** for authentication
+- **@digilogiclabs/saas-factory-payments** for payment processing
+
+## 📦 Project Structure
+
+```
+├── app/                          # Expo Router pages
+│   ├── (tabs)/                  # Main app tabs
+│   │   ├── index.tsx            # Dashboard
+│   │   ├── orders.tsx           # Orders list
+│   │   ├── analytics.tsx        # Analytics dashboard
+│   │   ├── billing.tsx          # Payments & billing
+│   │   └── profile.tsx          # User profile
+│   ├── auth/                    # Authentication screens
+│   │   ├── login.tsx            # Sign in
+│   │   └── signup.tsx           # Sign up
+│   └── _layout.tsx              # Root layout with providers
+├── components/                  # Reusable components
+├── hooks/                       # Custom hooks
+├── utils/                       # Utility functions
+├── types/                       # TypeScript types
+└── constants/                   # App constants
+```
+
+## 🔧 Configuration
+
+### Environment Variables
+
+Copy `.env.example` to `.env` and update the values:
+
+```bash
+# Supabase
+EXPO_PUBLIC_SUPABASE_URL=your-supabase-url
+EXPO_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
+
+# Stripe
+EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key
+
+# App Configuration
+EXPO_PUBLIC_APP_NAME={{titleCaseName}}
+```
+
+### EAS Configuration
+
+For building and deploying with EAS Build:
+
+1. Install EAS CLI: `npm install -g eas-cli`
+2. Login: `eas login`
+3. Configure: `eas build:configure`
+4. Build: `eas build --platform all`
+
+## 🔒 Permissions
+
+The app requests the following permissions:
+
+- **Camera**: Profile photos and QR code scanning
+- **Location**: Delivery tracking and location services
+- **Notifications**: Order updates and push notifications
+- **Storage**: Offline caching and data storage
+
+## 🎨 UI Components
+
+This app uses the **@digilogiclabs/saas-factory-ui** library for native components:
+
+- **Native Cards**: Styled containers with shadows
+- **Native Buttons**: Various styles and states
+- **Native Forms**: Validated input fields
+- **Native Charts**: Data visualization
+- **Native Navigation**: Tab bars and navigation
+- **Native Modals**: Overlay components
+
+## 💳 Payments Integration
+
+Stripe integration includes:
+
+- **Payment Methods**: Add/remove credit cards
+- **Subscriptions**: Manage recurring payments
+- **Invoices**: View billing history
+- **Apple Pay**: iOS native payment method
+- **Google Pay**: Android native payment method
+
+## 📊 Analytics
+
+Built-in analytics dashboard with:
+
+- **Revenue Tracking**: Daily, weekly, monthly views
+- **Order Analytics**: Sales and conversion metrics
+- **Customer Insights**: User behavior and trends
+- **Real-time Data**: Live updates and notifications
+
+## 🧪 Testing
+
+```bash
+# Run tests
+npm test
+
+# Run tests with coverage
+npm run test:coverage
+
+# Run tests in watch mode
+npm run test:watch
+```
+
+## 🚀 Deployment
+
+### Development Build
+
+```bash
+# Create development build
+eas build --profile development
+
+# Install on device
+eas install
+```
+
+### Production Build
+
+```bash
+# Build for App Store/Play Store
+eas build --profile production
+
+# Submit to stores
+eas submit --platform all
+```
+
+## 📱 Platform Support
+
+- **iOS**: 13.0+
+- **Android**: API 21+ (Android 5.0)
+- **Web**: Modern browsers (for development)
+
+## 🔄 Updates
+
+The app supports over-the-air updates with Expo Updates:
+
+```bash
+# Publish update
+eas update --branch production
+```
+
+## 🆘 Troubleshooting
+
+### Common Issues
+
+1. **Metro bundler issues**: Clear cache with `expo start -c`
+2. **Build failures**: Check EAS build logs in the dashboard
+3. **Permission errors**: Verify permissions in app.json
+4. **Stripe setup**: Ensure proper API keys and webhook endpoints
+
+### Debug Mode
+
+```bash
+# Enable debug mode
+EXPO_PUBLIC_DEBUG=true npm run dev
+```
+
+## 📄 License
+
+This project is licensed under the MIT License. See LICENSE file for details.
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/new-feature`
+3. Commit changes: `git commit -am 'Add new feature'`
+4. Push to branch: `git push origin feature/new-feature`
+5. Submit a pull request
+
+## 📞 Support
+
+For support and questions:
+
+- Email: support@{{packageName}}.com
+- Documentation: [docs.{{packageName}}.com](https://docs.{{packageName}}.com)
+- Issues: [GitHub Issues](https://github.com/{{githubRepo}}/issues)