@digilogiclabs/create-saas-app 1.5.3 → 1.6.0

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

@@ -5,35 +5,92 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { AuthProvider, useAuth } from '@digilogiclabs/saas-factory-auth/native';
 import { StripeProvider } from '@digilogiclabs/saas-factory-payments/native';
 import { Link, Slot } from 'expo-router';
+import { 
+  NativePageTransition as PageTransition,
+  NativeMobileHero as MobileHero,
+  NativeMobileContainer as MobileContainer,
+  NativeNetworkAwareContent as NetworkAwareContent,
+  NativeOfflineWrapper as OfflineWrapper,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui/native';
 
 function AppContent() {
   const { user, signOut } = useAuth();
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
 
   return (
-    <View style={styles.container}>
-      {user ? (
-        <>
-          <Text style={styles.title}>Welcome back!</Text>
-          <Text style={styles.subtitle}>You are signed in.</Text>
-          <Link href="/checkout" style={styles.link}>
-            <Text>Checkout</Text>
-          </Link>
-          <Button title="Sign Out" onPress={signOut} />
-        </>
-      ) : (
-        <>
-          <Text style={styles.title}>Welcome to {{titleCaseName}}</Text>
-          <Text style={styles.subtitle}>{{description}}</Text>
-          <Link href="/login" style={styles.link}>
-            <Text>Login</Text>
-          </Link>
-          <Link href="/signup" style={styles.link}>
-            <Text>Sign Up</Text>
-          </Link>
-        </>
-      )}
+    <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>
       <StatusBar style="auto" />
-    </View>
+    </PageTransition>
   );
 }
 
@@ -85,4 +142,37 @@ const styles = StyleSheet.create({
     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/package.json

@@ -1,38 +1,41 @@
-{
-  "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": "~49.0.0",
-    "react": "18.2.0",
-    "react-native": "0.72.6",
-    "@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.7.2",
-    "@digilogiclabs/saas-factory-auth": "^0.4.3",
-    "@digilogiclabs/saas-factory-payments": "^0.2.0",
-    "firebase": "^10.0.0",
-    "@supabase/supabase-js": "^2.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@types/react": "~18.2.14",
-    "@types/react-native": "~0.72.2",
-    "typescript": "^5.1.3"
-  },
-  "private": true
-}
+{
+  "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": "~49.0.0",
+    "react": "18.2.0",
+    "react-native": "0.72.6",
+    "@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.13.0",
+    "@digilogiclabs/saas-factory-auth": "^0.4.3",
+    "@digilogiclabs/saas-factory-payments": "^0.2.0",
+    "firebase": "^10.0.0",
+    "@supabase/supabase-js": "^2.0.0",
+    "@react-native-community/netinfo": "^11.0.0",
+    "@react-native-async-storage/async-storage": "^1.19.0",
+    "expo-haptics": "~12.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.14",
+    "@types/react-native": "~0.72.2",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

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

@@ -4,7 +4,7 @@
   "description": "{{description}}",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.7.2",
+    "@digilogiclabs/saas-factory-ui": "^0.13.0",
     "@digilogiclabs/saas-factory-auth": "^0.4.3",
     "@digilogiclabs/saas-factory-payments": "^0.2.0",
     "tailwindcss": "^3.3.0",

package/dist/templates/web/base/template/src/app/checkout/page.tsx

@@ -3,9 +3,20 @@
 import React from 'react';
 import { useStripe } from '@digilogiclabs/saas-factory-payments';
 import { Button } from '@/components/ui/button';
+import { 
+  PageTransition,
+  MobileContainer,
+  TouchInput,
+  MobileForm,
+  SwipeableCard,
+  NetworkAwareContent,
+  useNetworkInfo
+} from '@digilogiclabs/saas-factory-ui';
+import { CreditCard, Zap } from 'lucide-react';
 
 export default function CheckoutPage() {
   const { handleCheckout } = useStripe();
+  const networkInfo = useNetworkInfo();
 
   const onCheckout = async () => {
     await handleCheckout({
@@ -15,14 +26,94 @@ export default function CheckoutPage() {
   };
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="p-8 bg-white rounded-lg shadow-md">
-        <h1 className="text-2xl font-bold mb-4">Checkout</h1>
-        <p className="mb-6">Click the button below to proceed to payment.</p>
-        <Button onClick={onCheckout}>
-          Proceed to Checkout
-        </Button>
+    <PageTransition type="slide" direction="up" duration={350}>
+      <div className="flex items-center justify-center min-h-screen bg-gray-100">
+        <MobileContainer className="w-full max-w-md">
+          <NetworkAwareContent
+            showOnSlow={
+              <div className="p-6 bg-white rounded-lg shadow-md">
+                <div className="flex items-center gap-2 mb-4">
+                  <CreditCard className="h-6 w-6 text-blue-600" />
+                  <h1 className="text-xl font-bold">Checkout</h1>
+                </div>
+                <p className="mb-6 text-gray-600">
+                  Simplified checkout for slower connections.
+                </p>
+                <Button 
+                  onClick={onCheckout} 
+                  className="w-full"
+                  size="lg"
+                >
+                  Proceed to Checkout
+                </Button>
+              </div>
+            }
+          >
+            <SwipeableCard
+              leftActions={[
+                { 
+                  id: 'back', 
+                  label: 'Back', 
+                  onAction: () => window.history.back(),
+                  color: 'gray'
+                }
+              ]}
+              rightActions={[
+                { 
+                  id: 'proceed', 
+                  label: 'Pay Now', 
+                  onAction: onCheckout,
+                  color: 'green'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <div className="p-8 bg-white rounded-lg shadow-md">
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="p-3 bg-blue-100 rounded-full">
+                    <Zap className="h-6 w-6 text-blue-600" />
+                  </div>
+                  <div>
+                    <h1 className="text-2xl font-bold">Premium Checkout</h1>
+                    <p className="text-sm text-gray-500">
+                      {networkInfo?.effectiveType && `${networkInfo.effectiveType.toUpperCase()} connection`}
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="space-y-4 mb-6">
+                  <div className="p-4 bg-blue-50 rounded-lg">
+                    <h3 className="font-semibold text-blue-900">Pro Plan</h3>
+                    <p className="text-blue-700">$29/month • All features included</p>
+                  </div>
+                  
+                  <div className="text-sm text-gray-600">
+                    <p>✓ Touch-optimized checkout experience</p>
+                    <p>✓ Network-aware performance</p>
+                    <p>✓ Secure payment processing</p>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <Button 
+                    onClick={onCheckout} 
+                    className="w-full"
+                    size="lg"
+                  >
+                    Proceed to Checkout
+                  </Button>
+                  
+                  <p className="text-xs text-center text-gray-500">
+                    Swipe left to go back • Swipe right to pay now
+                  </p>
+                </div>
+              </div>
+            </SwipeableCard>
+          </NetworkAwareContent>
+        </MobileContainer>
       </div>
-    </div>
+    </PageTransition>
   );
 }