@digilogiclabs/create-saas-app 1.17.0 → 1.18.0

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

@@ -0,0 +1,254 @@
+# {{titleCaseName}} - AI-Powered Mobile SaaS
+
+A complete mobile AI application built with React Native, Expo, and Digi Logic Labs packages. Features comprehensive AI generation capabilities including text, audio, and video generation.
+
+## 🚀 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
+```
+
+## 🤖 AI Features
+
+### Text Generation
+- **OpenAI GPT-4 Integration** - Advanced text generation
+- **Multiple Templates** - Blog posts, emails, social media, code docs
+- **Real-time Generation** - Stream responses as they're generated  
+- **Word Count Tracking** - Monitor generation length
+- **Export Options** - Save, copy, and share generated content
+
+### Audio Generation  
+- **ElevenLabs Integration** - High-quality voice synthesis
+- **Multiple Voices** - Choose from 6 different AI voices
+- **Format Support** - MP3, WAV, OGG output formats
+- **Waveform Display** - Visual audio representation
+- **Duration Control** - Up to 5 minutes of audio
+
+### Video Generation
+- **Replicate Integration** - AI-powered video creation
+- **Style Options** - Photorealistic, cartoon, anime, watercolor
+- **HD Output** - 1080p video generation
+- **Preview Support** - See previews before final generation
+- **Multiple Formats** - MP4, WebM support
+
+### AI Chat
+- **Interactive Chat** - Conversational AI interface
+- **Context Retention** - Maintains conversation history
+- **Typing Indicators** - Shows when AI is responding
+- **Message Management** - Up to 50 messages per session
+
+## 📱 Core Features
+
+- **✅ Authentication** - Secure user management with Supabase
+- **💳 Payments** - Stripe integration for subscriptions
+- **🎨 Modern UI** - 240+ components from @digilogiclabs/saas-factory-ui v0.22.0
+- **📱 Native Experience** - Optimized for iOS and Android
+- **🌓 Theme Support** - Light/dark modes with system preference
+- **🔄 Offline Support** - Cached AI responses and offline capabilities
+- **📊 Usage Analytics** - Track AI generation statistics
+- **🎯 Haptic Feedback** - Enhanced mobile interaction
+
+## 🏗️ 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 (v0.22.0)
+- **@digilogiclabs/saas-factory-auth** for authentication (v1.0.1)
+- **@digilogiclabs/saas-factory-payments** for payment processing (v1.1.0)
+- **@digilogiclabs/saas-factory-ai** for AI capabilities (v3.0.0)
+
+## 📦 Project Structure
+
+```
+├── app/                          # Expo Router pages
+│   ├── (tabs)/                  # Main app tabs
+│   │   ├── index.tsx            # Dashboard
+│   │   ├── ai.tsx               # AI Studio with generation tools
+│   │   ├── 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
+
+# AI Configuration
+EXPO_PUBLIC_OPENAI_API_KEY=your-openai-api-key
+EXPO_PUBLIC_ELEVENLABS_API_KEY=your-elevenlabs-api-key
+EXPO_PUBLIC_REPLICATE_API_TOKEN=your-replicate-api-token
+
+# 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)

package/src/templates/mobile/ui-auth-payments-ai/template/app/(tabs)/_layout.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Tabs } from 'expo-router';
+import { useAuth } from '@digilogiclabs/saas-factory-auth/native';
+import { Redirect } from 'expo-router';
+
+// UI Components - Updated for v0.22.0
+import { 
+  BottomTabBar,
+  PageTransition,
+  useTheme
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Icons
+import { 
+  Home, 
+  User, 
+  Settings, 
+  CreditCard, 
+  BarChart3,
+  ShoppingBag,
+  Sparkles
+} from 'react-native-heroicons/outline';
+import { 
+  Home as HomeSolid, 
+  User as UserSolid, 
+  Settings as SettingsSolid, 
+  CreditCard as CreditCardSolid,
+  BarChart3 as BarChart3Solid,
+  ShoppingBag as ShoppingBagSolid,
+  Sparkles as SparklesSolid
+} from 'react-native-heroicons/solid';
+
+// Tab configuration for BottomTabBar
+const tabConfig = [
+  {
+    id: 'index',
+    label: 'Home',
+    icon: Home,
+    activeIcon: HomeSolid,
+    route: '/dashboard'
+  },
+  {
+    id: 'ai',
+    label: 'AI Studio',
+    icon: Sparkles,
+    activeIcon: SparklesSolid,
+    route: '/ai',
+    badge: 'NEW'
+  },
+  {
+    id: 'orders',
+    label: 'Orders',
+    icon: ShoppingBag,
+    activeIcon: ShoppingBagSolid,
+    route: '/orders'
+  },
+  {
+    id: 'analytics',
+    label: 'Analytics',
+    icon: BarChart3,
+    activeIcon: BarChart3Solid,
+    route: '/analytics'
+  },
+  {
+    id: 'billing',
+    label: 'Billing',
+    icon: CreditCard,
+    activeIcon: CreditCardSolid,
+    route: '/billing'
+  },
+  {
+    id: 'profile',
+    label: 'Profile',
+    icon: User,
+    activeIcon: UserSolid,
+    route: '/profile'
+  }
+];
+
+export default function TabLayout() {
+  const { user, loading } = useAuth();
+  const { colors } = useTheme();
+
+  // Show loading state while checking authentication
+  if (loading) {
+    return null; // or a loading component
+  }
+
+  // Redirect to auth if user is not authenticated
+  if (!user) {
+    return <Redirect href="/auth/login" />;
+  }
+
+  return (
+    <PageTransition type="slide" direction="horizontal">
+      <View style={{ flex: 1 }}>
+        <Tabs
+          screenOptions={{
+            headerShown: false,
+            tabBarStyle: { display: 'none' } // Hide default tab bar since we use BottomTabBar
+          }}
+        >
+          <Tabs.Screen
+            name="index"
+            options={{
+              title: 'Dashboard',
+            }}
+          />
+          <Tabs.Screen
+            name="ai"
+            options={{
+              title: 'AI Studio',
+            }}
+          />
+          <Tabs.Screen
+            name="orders"
+            options={{
+              title: 'Orders',
+            }}
+          />
+          <Tabs.Screen
+            name="analytics"
+            options={{
+              title: 'Analytics',
+            }}
+          />
+          <Tabs.Screen
+            name="billing"
+            options={{
+              title: 'Billing',
+            }}
+          />
+          <Tabs.Screen
+            name="profile"
+            options={{
+              title: 'Profile',
+            }}
+          />
+        </Tabs>
+        
+        {/* Enhanced BottomTabBar from v0.22.0 */}
+        <BottomTabBar
+          tabs={tabConfig}
+          activeTabId="index" // This should be dynamic based on current route
+          onTabPress={(tabId) => {
+            // Handle tab navigation
+            console.log('Tab pressed:', tabId);
+          }}
+          style={{
+            position: 'absolute',
+            bottom: 16,
+            left: 16,
+            right: 16,
+            borderRadius: 24,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 8 },
+            shadowOpacity: 0.12,
+            shadowRadius: 24,
+            elevation: 12,
+          }}
+          variant="floating"
+          showLabels={true}
+          hapticFeedback={true}
+        />
+      </View>
+    </PageTransition>
+  );
+}