@digilogiclabs/create-saas-app 1.0.1

package/dist/templates/mobile/base/template/App.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View, Button } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { AuthProvider, useAuth } from '@digilogiclabs/saas-factory-auth/native';
+import { PaymentsProvider } from '@digilogiclabs/saas-factory-payments/native';
+import { StripeProvider } from '@stripe/stripe-react-native';
+import { Link, Slot } from 'expo-router';
+import { 
+  NativePageTransition as PageTransition,
+  NativeMobileHero as MobileHero,
+  NativeMobileContainer as MobileContainer,
+  NativeNetworkAwareContent as NetworkAwareContent,
+  NativeOfflineWrapper as OfflineWrapper,
+  NativeToast as Toast,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui/native';
+
+function AppContent() {
+  const { user, signOut } = useAuth();
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
+
+  return (
+    <PageTransition type="fade" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="stale-while-revalidate"
+        showOfflineIndicator={true}
+      >
+        <MobileContainer style={styles.container}>
+          <NetworkAwareContent
+            showOnOffline={
+              <View style={styles.offlineContainer}>
+                <Text style={styles.offlineTitle}>You're offline</Text>
+                <Text style={styles.offlineText}>
+                  Some features may be limited while offline.
+                </Text>
+              </View>
+            }
+          >
+            {user ? (
+              <MobileHero
+                title={{
+                  text: "Welcome back!",
+                  size: "lg"
+                }}
+                description="You are signed in and ready to go."
+                actions={[
+                  {
+                    label: "Go to Checkout",
+                    href: "/checkout",
+                    variant: "default"
+                  },
+                  {
+                    label: "Sign Out",
+                    onPress: signOut,
+                    variant: "outline"
+                  }
+                ]}
+              />
+            ) : (
+              <MobileHero
+                title={{
+                  text: "Welcome to {{titleCaseName}}",
+                  size: "xl"
+                }}
+                description="{{description}}"
+                actions={[
+                  {
+                    label: "Get Started",
+                    href: "/signup",
+                    variant: "default"
+                  },
+                  {
+                    label: "Sign In",
+                    href: "/login", 
+                    variant: "outline"
+                  }
+                ]}
+              />
+            )}
+            
+            {/* Network Status Indicator */}
+            <View style={styles.statusContainer}>
+              <Text style={styles.statusText}>
+                Status: {isOnline ? '🟢 Online' : '🔴 Offline'}
+                {networkInfo?.type && ` • ${networkInfo.type}`}
+              </Text>
+            </View>
+          </NetworkAwareContent>
+        </MobileContainer>
+      </OfflineWrapper>
+      <Toast />
+      <StatusBar style="auto" />
+    </PageTransition>
+  );
+}
+
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <AuthProvider>
+        <PaymentsProvider
+          apiUrl={process.env.EXPO_PUBLIC_API_URL || 'http://localhost:3000'}
+        >
+          <StripeProvider
+            publishableKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
+            merchantIdentifier="merchant.com.{{packageName}}.app"
+          >
+            <AppContent />
+          </StripeProvider>
+        </PaymentsProvider>
+      </AuthProvider>
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 10,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 14,
+    color: '#999',
+    textAlign: 'center',
+  },
+  link: {
+    marginTop: 15,
+    paddingVertical: 15,
+    borderWidth: 1,
+    borderColor: '#DDD',
+    borderRadius: 5,
+    textAlign: 'center',
+    width: '80%',
+  },
+  offlineContainer: {
+    padding: 20,
+    alignItems: 'center',
+    backgroundColor: '#fff3cd',
+    borderRadius: 8,
+    margin: 20,
+  },
+  offlineTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#856404',
+    marginBottom: 8,
+  },
+  offlineText: {
+    fontSize: 14,
+    color: '#856404',
+    textAlign: 'center',
+  },
+  statusContainer: {
+    position: 'absolute',
+    bottom: 50,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  statusText: {
+    fontSize: 12,
+    color: '#666',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+  },
+});

package/dist/templates/mobile/base/template/app/(auth)/login.tsx

@@ -0,0 +1,44 @@
+import { LoginForm } from '@digilogiclabs/saas-factory-ui/native';
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth/native';
+import { createBrowserClient } from '@supabase/ssr';
+import React from 'react';
+import { View } from 'react-native';
+import * as WebBrowser from 'expo-web-browser';
+import { useOAuth } from '@clerk/clerk-expo';
+
+export default function LoginPage() {
+  const supabase = createBrowserClient(
+    process.env.EXPO_PUBLIC_SUPABASE_URL!,
+    process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!
+  );
+
+  const handleLogin = async (values: any) => {
+    await supabase.auth.signInWithPassword({
+      email: values.email,
+      password: values.password,
+    });
+  };
+
+  const handleGoogleLogin = async () => {
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: 'exp://localhost:8081/auth/callback',
+      },
+    });
+
+    if (data.url) {
+      await WebBrowser.openAuthSessionAsync(data.url);
+    }
+  };
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <LoginForm
+        onSubmit={handleLogin}
+        onGoogleSignIn={handleGoogleLogin}
+        authProvider={AuthProvider.SUPABASE}
+      />
+    </View>
+  );
+}

package/dist/templates/mobile/base/template/app/(auth)/signup.tsx

@@ -0,0 +1,43 @@
+import { SignupForm } from '@digilogiclabs/saas-factory-ui/native';
+import { AuthProvider } from '@digilogiclabs/saas-factory-auth/native';
+import { createBrowserClient } from '@supabase/ssr';
+import React from 'react';
+import { View } from 'react-native';
+import * as WebBrowser from 'expo-web-browser';
+
+export default function SignupPage() {
+  const supabase = createBrowserClient(
+    process.env.EXPO_PUBLIC_SUPABASE_URL!,
+    process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!
+  );
+
+  const handleSignup = async (values: any) => {
+    await supabase.auth.signUp({
+      email: values.email,
+      password: values.password,
+    });
+  };
+
+  const handleGoogleSignup = async () => {
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: 'exp://localhost:8081/auth/callback',
+      },
+    });
+
+    if (data.url) {
+      await WebBrowser.openAuthSessionAsync(data.url);
+    }
+  };
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <SignupForm
+        onSubmit={handleSignup}
+        onGoogleSignIn={handleGoogleSignup}
+        authProvider={AuthProvider.SUPABASE}
+      />
+    </View>
+  );
+}

package/dist/templates/mobile/base/template/app/checkout.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, Button } from 'react-native';
+import { useStripe } from '@digilogiclabs/saas-factory-payments/native';
+
+export default function CheckoutScreen() {
+  const { handleCheckout } = useStripe();
+
+  const onCheckout = async () => {
+    await handleCheckout({
+      priceId: 'price_12345', // Replace with your actual price ID
+      returnUrl: 'exp://localhost:8081/dashboard',
+    });
+  };
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Button title="Proceed to Checkout" onPress={onCheckout} />
+    </View>
+  );
+}

package/dist/templates/mobile/base/template/app.json

@@ -0,0 +1,44 @@
+{
+  "expo": {
+    "name": "{{titleCaseName}}",
+    "slug": "{{kebabCaseName}}",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.{{packageName}}.app",
+      "infoPlist": {
+        "NSCameraUsageDescription": "This app uses the camera to take photos",
+        "NSPhotoLibraryUsageDescription": "This app accesses the photo library to select images",
+        "NSLocationWhenInUseUsageDescription": "This app uses location to provide location-based features"
+      }
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.{{slugNameCamelCase}}.app"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png",
+      "bundler": "metro"
+    },
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

package/dist/templates/mobile/base/template/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package/dist/templates/mobile/base/template/eas.json

@@ -0,0 +1,19 @@
+{
+  "cli": {
+    "version": ">= 5.7.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "ios": {
+        "simulator": false
+      }
+    }
+  }
+}

package/dist/templates/mobile/base/template/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "{{packageName}}",
+  "version": "1.0.0",
+  "description": "{{description}}",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "build": "eas build",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "~54.0.11",
+    "react": "19.1.0",
+    "react-native": "0.72.10",
+    "@expo/vector-icons": "^13.0.0",
+    "@react-navigation/native": "^6.1.0",
+    "@react-navigation/stack": "^6.3.0",
+    "@react-navigation/bottom-tabs": "^6.5.0",
+    "react-native-screens": "~3.22.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-gesture-handler": "~2.12.0",
+    "@digilogiclabs/saas-factory-ui": "^0.27.1",
+    "@digilogiclabs/saas-factory-auth": "^1.0.5",
+    "@digilogiclabs/saas-factory-payments": "^1.2.7",
+    "firebase": "^10.0.0",
+    "@supabase/supabase-js": "^2.0.0",
+    "@react-native-community/netinfo": "^11.0.0",
+    "@stripe/stripe-react-native": "~0.28.0",
+    "expo-linear-gradient": "~12.3.0",
+    "@react-native-async-storage/async-storage": "1.18.2",
+    "expo-constants": "~16.0.2",
+    "expo-linking": "~6.3.1",
+    "expo-status-bar": "~1.12.1",
+    "react-native-web": "~0.19.10",
+    "react-dom": "19.1.0",
+    "@react-native/assets-registry": "^0.81.1",
+    "expo-haptics": "~12.4.0",
+    "expo-asset": "~8.10.1",
+    "metro": "~0.76.0",
+    "@expo/metro-runtime": "~3.1.0",
+    "@react-native-community/cli-server-api": "^12.0.0",
+    "metro-react-native-babel-transformer": "~0.76.0",
+    "metro-inspector-proxy": "~0.76.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.14",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

package/dist/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/dist/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)