@digilogiclabs/create-saas-app 1.5.3 → 1.6.0

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

@@ -2,12 +2,21 @@
 
 import React from 'react';
 import Link from 'next/link';
-import { LogOut, CreditCard } from 'lucide-react';
+import { LogOut, CreditCard, User, Settings, Home, Video, Film, Play } from 'lucide-react';
 import { useAuth } from '@digilogiclabs/saas-factory-auth';
-import { ThemeToggle } from '../ui/theme-toggle';
+import { 
+  ResponsiveHeader,
+  MobileNavigation,
+  HamburgerIcon,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
 
 export function Header() {
   const { user, signOut } = useAuth();
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
   
   const handleSignOut = async () => {
     try {
@@ -17,46 +26,129 @@ export function Header() {
     }
   };
 
+  const navigationItems = [
+    { 
+      label: 'Home', 
+      href: '/',
+      icon: Home,
+      protected: false 
+    },
+    { 
+      label: 'Video Library', 
+      href: '/videos',
+      icon: Video,
+      protected: true 
+    },
+    { 
+      label: 'Watch Later', 
+      href: '/watchlater',
+      icon: Film,
+      protected: true 
+    },
+    { 
+      label: 'Dashboard', 
+      href: '/dashboard',
+      icon: User,
+      protected: true 
+    },
+    { 
+      label: 'Billing', 
+      href: '/billing',
+      icon: CreditCard,
+      protected: true 
+    },
+    { 
+      label: 'Checkout', 
+      href: '/checkout',
+      icon: CreditCard,
+      protected: false 
+    },
+    { 
+      label: 'Settings', 
+      href: '/settings',
+      icon: Settings,
+      protected: true 
+    }
+  ];
+
+  const authActions = user ? [
+    {
+      label: 'Sign Out',
+      icon: LogOut,
+      onClick: handleSignOut,
+      variant: 'ghost' as const
+    }
+  ] : [
+    {
+      label: 'Login',
+      href: '/login',
+      variant: 'ghost' as const
+    },
+    {
+      label: 'Sign Up',
+      href: '/signup',
+      variant: 'default' as const
+    }
+  ];
+
   return (
-    <header className="bg-white dark:bg-gray-800 shadow-md">
-      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-        <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white">
-          {{titleCaseName}}
-        </Link>
-        <nav className="flex items-center gap-4">
-          <ThemeToggle />
-          {user ? (
-            <>
-              <Link href="/dashboard" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                Dashboard
-              </Link>
-              <Link href="/billing" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                <CreditCard className="h-4 w-4" />
-                Billing
-              </Link>
-              <button 
-                onClick={handleSignOut}
-                className="p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
-              >
-                <LogOut className="h-5 w-5" />
-              </button>
-            </>
-          ) : (
-            <>
-              <Link href="/login" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                Login
-              </Link>
-              <Link 
-                href="/signup"
-                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-              >
-                Sign Up
-              </Link>
-            </>
-          )}
-        </nav>
-      </div>
-    </header>
+    <>
+      {/* Network Status Banner */}
+      {!isOnline && (
+        <div className="bg-red-500 text-white text-center py-2 text-sm animate-pulse">
+          <span>📹 Offline - Cached videos only</span>
+        </div>
+      )}
+      
+      {/* Video Quality Banner */}
+      {isOnline && networkInfo?.effectiveType === '2g' && (
+        <div className="bg-yellow-500 text-white text-center py-2 text-sm">
+          <div className="animate-marquee whitespace-nowrap">
+            🐌 Slow connection - Video quality reduced to 360p • Buffering optimized • Download recommended for smooth playback
+          </div>
+        </div>
+      )}
+
+      {/* HD Video Quality Banner */}
+      {isOnline && (networkInfo?.effectiveType === '4g' || networkInfo?.effectiveType === '5g') && (
+        <div className="bg-green-500 text-white text-center py-2 text-sm">
+          <div className="animate-marquee whitespace-nowrap">
+            🎬 High-speed connection - HD/4K video quality enabled • Instant streaming • Auto-quality adjustment active
+          </div>
+        </div>
+      )}
+
+      <ResponsiveHeader
+        logo={{
+          text: '{{titleCaseName}}',
+          href: '/',
+          className: 'text-2xl font-bold flex items-center gap-2',
+          icon: <Play className="w-6 h-6" />
+        }}
+        navigationItems={navigationItems}
+        actions={authActions}
+        showThemeToggle={true}
+        user={user}
+        mobileBreakpoint="md"
+        className="bg-white dark:bg-gray-800 shadow-md"
+        hamburgerIcon={
+          <HamburgerIcon 
+            className="w-6 h-6 text-gray-600 dark:text-gray-300"
+            animated={true}
+            hapticFeedback={true}
+          />
+        }
+        networkStatus={{
+          isOnline,
+          connectionType: networkInfo?.effectiveType,
+          showIndicator: true,
+          customLabels: {
+            online: 'Streaming Ready',
+            offline: 'Offline Mode'
+          }
+        }}
+      />
+    </>
   );
 }
 

package/dist/templates/web/ui-only/template/package.json

@@ -4,7 +4,7 @@
   "description": "{{description}} (with UI Package v0.11.1)",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

package/package.json

@@ -1,106 +1,106 @@
-{
-  "name": "@digilogiclabs/create-saas-app",
-  "version": "1.5.3",
-  "description": "Create modern SaaS applications with Digi Logic Labs packages",
-  "main": "dist/index.js",
-  "bin": {
-    "create-saas-app": "bin/index.js"
-  },
-  "scripts": {
-    "build": "tsc --project tsconfig.build.json && npm run copy-templates",
-    "copy-templates": "node -e \"require('fs-extra').copySync('src/templates', 'dist/templates')\"",
-    "dev": "tsup --watch",
-    "test": "jest",
-    "test:templates": "tsx scripts/test-all-templates.ts",
-    "lint": "eslint src",
-    "lint:fix": "eslint src --fix",
-    "type-check": "tsc --noEmit --skipLibCheck",
-    "validate": "tsx scripts/validate-templates.ts",
-    "changeset": "changeset",
-    "version": "changeset version",
-    "release": "npm run build && changeset publish",
-    "prepublishOnly": "npm run build && npm run lint && npm run type-check"
-  },
-  "keywords": [
-    "cli",
-    "saas",
-    "template",
-    "nextjs",
-    "react-native",
-    "expo",
-    "typescript",
-    "tailwind",
-    "firebase",
-    "supabase",
-    "digilogiclabs"
-  ],
-  "author": "Digi Logic Labs",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/DigiLogicLabs/create-saas-app.git"
-  },
-  "bugs": {
-    "url": "https://github.com/DigiLogicLabs/create-saas-app/issues"
-  },
-  "homepage": "https://github.com/DigiLogicLabs/create-saas-app#readme",
-  "files": [
-    "dist",
-    "bin",
-    "src/templates",
-    "README.md",
-    "CHANGELOG.md",
-    "LICENSE"
-  ],
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "dependencies": {
-    "chalk": "^4.1.2",
-    "commander": "^11.1.0",
-    "cosmiconfig": "^8.3.6",
-    "execa": "^5.1.1",
-    "fs-extra": "^11.1.1",
-    "glob": "^10.3.10",
-    "inquirer": "^9.2.12",
-    "listr2": "^7.0.2",
-    "mustache": "^4.2.0",
-    "ora": "^5.4.1",
-    "semver": "^7.5.4",
-    "validate-npm-package-name": "^5.0.0",
-    "zod": "^3.22.4"
-  },
-  "devDependencies": {
-    "@changesets/cli": "^2.26.2",
-    "@supabase/supabase-js": "^2.39.2",
-    "@types/fs-extra": "^11.0.4",
-    "@types/inquirer": "^9.0.7",
-    "@types/jest": "^29.5.6",
-    "@types/mustache": "^4.2.5",
-    "@types/node": "^20.8.7",
-    "@types/semver": "^7.5.4",
-    "@types/validate-npm-package-name": "^4.0.2",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.2",
-    "eslint-plugin-prettier": "^5.5.4",
-    "firebase": "^10.7.1",
-    "globals": "^16.3.0",
-    "jest": "^29.7.0",
-    "prettier": "^3.0.3",
-    "ts-jest": "^29.1.1",
-    "tsup": "^7.2.0",
-    "tsx": "^3.14.0",
-    "typescript": "^5.2.2",
-    "typescript-eslint": "^8.40.0"
-  },
-  "peerDependencies": {
-    "typescript": ">=4.9.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "directories": {
-    "doc": "docs",
-    "test": "tests"
-  }
-}
+{
+  "name": "@digilogiclabs/create-saas-app",
+  "version": "1.6.0",
+  "description": "Create modern SaaS applications with Digi Logic Labs packages",
+  "main": "dist/cli/index.js",
+  "bin": {
+    "create-saas-app": "bin/index.js"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json && npm run copy-templates",
+    "copy-templates": "node -e \"require('fs-extra').copySync('src/templates', 'dist/templates')\"",
+    "dev": "tsup --watch",
+    "test": "jest",
+    "test:templates": "tsx scripts/test-all-templates.ts",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "type-check": "tsc --noEmit --skipLibCheck",
+    "validate": "tsx scripts/validate-templates.ts",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "npm run build && changeset publish",
+    "prepublishOnly": "npm run build && npm run lint && npm run type-check"
+  },
+  "keywords": [
+    "cli",
+    "saas",
+    "template",
+    "nextjs",
+    "react-native",
+    "expo",
+    "typescript",
+    "tailwind",
+    "firebase",
+    "supabase",
+    "digilogiclabs"
+  ],
+  "author": "Digi Logic Labs",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DigiLogicLabs/create-saas-app.git"
+  },
+  "bugs": {
+    "url": "https://github.com/DigiLogicLabs/create-saas-app/issues"
+  },
+  "homepage": "https://github.com/DigiLogicLabs/create-saas-app#readme",
+  "files": [
+    "dist",
+    "bin",
+    "src/templates",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "commander": "^11.1.0",
+    "cosmiconfig": "^8.3.6",
+    "execa": "^5.1.1",
+    "fs-extra": "^11.1.1",
+    "glob": "^10.3.10",
+    "inquirer": "^9.2.12",
+    "listr2": "^7.0.2",
+    "mustache": "^4.2.0",
+    "ora": "^5.4.1",
+    "semver": "^7.5.4",
+    "validate-npm-package-name": "^5.0.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.26.2",
+    "@supabase/supabase-js": "^2.39.2",
+    "@types/fs-extra": "^11.0.4",
+    "@types/inquirer": "^9.0.7",
+    "@types/jest": "^29.5.6",
+    "@types/mustache": "^4.2.5",
+    "@types/node": "^20.8.7",
+    "@types/semver": "^7.5.4",
+    "@types/validate-npm-package-name": "^4.0.2",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-prettier": "^5.5.4",
+    "firebase": "^10.7.1",
+    "globals": "^16.3.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "ts-jest": "^29.1.1",
+    "tsup": "^7.2.0",
+    "tsx": "^3.14.0",
+    "typescript": "^5.2.2",
+    "typescript-eslint": "^8.40.0"
+  },
+  "peerDependencies": {
+    "typescript": ">=4.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "directories": {
+    "doc": "docs",
+    "test": "tests"
+  }
+}

package/src/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/src/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/src/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",