@digilogiclabs/create-saas-app 1.5.4 → 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

@@ -22,11 +22,14 @@
     "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-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"
+    "@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",

package/dist/templates/web/base/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.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>
   );
 }

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

@@ -0,0 +1,309 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { 
+  PageTransition,
+  MobileContainer,
+  ResponsiveGrid,
+  PullToRefresh,
+  LazyImage,
+  VirtualScrollList,
+  SwipeableCard,
+  NetworkAwareContent,
+  OfflineWrapper,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui';
+import { 
+  BarChart3, 
+  Users, 
+  DollarSign, 
+  TrendingUp, 
+  Settings, 
+  Archive,
+  Star,
+  Trash2,
+  Wifi,
+  WifiOff 
+} from 'lucide-react';
+
+// Mock data for demonstration
+const mockActivityData = Array.from({ length: 50 }, (_, i) => ({
+  id: i + 1,
+  title: `Activity ${i + 1}`,
+  description: `This is a sample activity item #${i + 1}`,
+  timestamp: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString(),
+  type: ['user', 'sale', 'system'][Math.floor(Math.random() * 3)],
+  avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`
+}));
+
+export default function DashboardPage() {
+  const { user } = useAuth();
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
+  const [activityData, setActivityData] = useState(mockActivityData);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    setIsRefreshing(false);
+  };
+
+  const handleArchive = (id: number) => {
+    setActivityData(prev => prev.filter(item => item.id !== id));
+  };
+
+  const handleStar = (id: number) => {
+    console.log('Starred item:', id);
+  };
+
+  const handleDelete = (id: number) => {
+    setActivityData(prev => prev.filter(item => item.id !== id));
+  };
+
+  const stats = [
+    {
+      title: 'Total Users',
+      value: '2,543',
+      change: '+12%',
+      icon: Users,
+      color: 'blue'
+    },
+    {
+      title: 'Revenue',
+      value: '$12,456',
+      change: '+8%',
+      icon: DollarSign,
+      color: 'green'
+    },
+    {
+      title: 'Growth',
+      value: '23.5%',
+      change: '+2.1%',
+      icon: TrendingUp,
+      color: 'purple'
+    },
+    {
+      title: 'Analytics',
+      value: '1,234',
+      change: '+5%',
+      icon: BarChart3,
+      color: 'orange'
+    }
+  ];
+
+  return (
+    <PageTransition type="slide" direction="horizontal" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="stale-while-revalidate"
+        showOfflineIndicator={true}
+        backgroundSync={true}
+      >
+        <PullToRefresh 
+          onRefresh={handleRefresh}
+          threshold={80}
+          loadingIndicator="spinner"
+          hapticOnTrigger={true}
+          networkAware={true}
+        >
+          <div className="min-h-screen bg-gray-50">
+            <MobileContainer className="py-6">
+              {/* Header */}
+              <div className="mb-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h1 className="text-2xl font-bold text-gray-900">
+                      Welcome back, {user?.email?.split('@')[0]}
+                    </h1>
+                    <p className="text-gray-600 flex items-center gap-2">
+                      {isOnline ? (
+                        <>
+                          <Wifi className="h-4 w-4 text-green-600" />
+                          <span>Online</span>
+                        </>
+                      ) : (
+                        <>
+                          <WifiOff className="h-4 w-4 text-red-600" />
+                          <span>Offline</span>
+                        </>
+                      )}
+                      {networkInfo?.effectiveType && (
+                        <span className="text-xs bg-gray-200 px-2 py-1 rounded">
+                          {networkInfo.effectiveType.toUpperCase()}
+                        </span>
+                      )}
+                    </p>
+                  </div>
+                  <Button variant="outline" size="icon">
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Stats Grid */}
+              <NetworkAwareContent
+                showOnSlow={
+                  <ResponsiveGrid columns={{ base: 2, md: 2 }} gap="sm" className="mb-6">
+                    {stats.slice(0, 2).map((stat, index) => (
+                      <Card key={index}>
+                        <CardContent className="p-4">
+                          <div className="flex items-center gap-2">
+                            <stat.icon className={`h-5 w-5 text-${stat.color}-600`} />
+                            <div>
+                              <p className="text-sm font-medium text-gray-600">{stat.title}</p>
+                              <p className="text-lg font-bold">{stat.value}</p>
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </ResponsiveGrid>
+                }
+              >
+                <ResponsiveGrid columns={{ base: 2, md: 4 }} gap="md" className="mb-6">
+                  {stats.map((stat, index) => (
+                    <Card key={index}>
+                      <CardContent className="p-4">
+                        <div className="flex items-center justify-between mb-2">
+                          <stat.icon className={`h-5 w-5 text-${stat.color}-600`} />
+                          <span className="text-sm text-green-600 font-medium">
+                            {stat.change}
+                          </span>
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium text-gray-600">{stat.title}</p>
+                          <p className="text-2xl font-bold">{stat.value}</p>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </ResponsiveGrid>
+              </NetworkAwareContent>
+
+              {/* Activity Feed */}
+              <Card className="mb-6">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <BarChart3 className="h-5 w-5" />
+                    Recent Activity
+                  </CardTitle>
+                  <CardDescription>
+                    Swipe left on items to archive or star them
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="p-0">
+                  <VirtualScrollList
+                    items={activityData}
+                    itemHeight={80}
+                    containerHeight={400}
+                    bufferSize={5}
+                    renderItem={(item) => (
+                      <SwipeableCard
+                        key={item.id}
+                        leftActions={[
+                          {
+                            id: 'archive',
+                            label: 'Archive',
+                            onAction: () => handleArchive(item.id),
+                            color: 'blue',
+                            icon: Archive
+                          },
+                          {
+                            id: 'star',
+                            label: 'Star',
+                            onAction: () => handleStar(item.id),
+                            color: 'yellow',
+                            icon: Star
+                          }
+                        ]}
+                        rightActions={[
+                          {
+                            id: 'delete',
+                            label: 'Delete',
+                            onAction: () => handleDelete(item.id),
+                            color: 'red',
+                            icon: Trash2
+                          }
+                        ]}
+                        threshold={50}
+                        hapticFeedback={true}
+                        showActionLabels={true}
+                      >
+                        <div className="flex items-center gap-3 p-4 border-b">
+                          <LazyImage
+                            src={item.avatar}
+                            alt={`Activity ${item.id}`}
+                            className="w-10 h-10 rounded-full"
+                            placeholder="skeleton"
+                            webpSupport={true}
+                            mobileOptimization={{
+                              quality: 80,
+                              format: "webp"
+                            }}
+                          />
+                          <div className="flex-1 min-w-0">
+                            <h4 className="font-medium text-gray-900 truncate">
+                              {item.title}
+                            </h4>
+                            <p className="text-sm text-gray-600 truncate">
+                              {item.description}
+                            </p>
+                            <p className="text-xs text-gray-400">
+                              {new Date(item.timestamp).toLocaleDateString()}
+                            </p>
+                          </div>
+                          <div className={`px-2 py-1 rounded-full text-xs ${
+                            item.type === 'user' ? 'bg-blue-100 text-blue-800' :
+                            item.type === 'sale' ? 'bg-green-100 text-green-800' :
+                            'bg-gray-100 text-gray-800'
+                          }`}>
+                            {item.type}
+                          </div>
+                        </div>
+                      </SwipeableCard>
+                    )}
+                    onEndReached={() => {
+                      console.log('Loading more items...');
+                    }}
+                    mobileOptimized={true}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Quick Actions */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Quick Actions</CardTitle>
+                  <CardDescription>
+                    Common tasks and shortcuts
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <ResponsiveGrid columns={{ base: 2, md: 3 }} gap="sm">
+                    <Button variant="outline" className="h-20 flex flex-col gap-2">
+                      <Users className="h-5 w-5" />
+                      <span className="text-xs">Manage Users</span>
+                    </Button>
+                    <Button variant="outline" className="h-20 flex flex-col gap-2">
+                      <DollarSign className="h-5 w-5" />
+                      <span className="text-xs">View Revenue</span>
+                    </Button>
+                    <Button variant="outline" className="h-20 flex flex-col gap-2">
+                      <BarChart3 className="h-5 w-5" />
+                      <span className="text-xs">Analytics</span>
+                    </Button>
+                  </ResponsiveGrid>
+                </CardContent>
+              </Card>
+            </MobileContainer>
+          </div>
+        </PullToRefresh>
+      </OfflineWrapper>
+    </PageTransition>
+  );
+}