@digilogiclabs/saas-factory-ui 0.18.3 → 0.21.0

package/README.md

@@ -241,6 +241,142 @@ export default function App() {
 - `SafeContainer` - Safe area aware container
 - `TouchableCard` - Pressable card component
 
+## 🆕 NEW v0.21.0: Layout & Navigation System
+
+### Complete Application Structure
+A comprehensive system providing everything needed for modern SaaS applications:
+
+#### 🏗️ App Shell Components
+
+| Component | Web | Native | Description |
+|-----------|-----|--------|-------------|
+| `AppShell` | ✅ | ✅ | Complete application layout orchestration |
+| `Header` | ✅ | ✅ | Top navigation with user menu and actions |
+| `Sidebar` | ✅ | - | Collapsible navigation sidebar (web) |
+| `Drawer` | - | ✅ | Slide-out navigation drawer (mobile) |
+| `Breadcrumbs` | ✅ | - | Hierarchical navigation breadcrumbs |
+
+#### 🧭 Navigation Components
+
+| Component | Web | Native | Description |
+|-----------|-----|--------|-------------|
+| `Tabs` | ✅ | ✅ | Feature-rich tabbed navigation |
+| `BottomTabBar` | - | ✅ | Mobile-optimized bottom tab navigation |
+| `Stepper` | ✅ | ✅ | Step-by-step process visualization |
+| `Pagination` | ✅ | ✅ | Data navigation with page controls |
+| `CommandPalette` | ✅ | - | Keyboard-driven command palette (Cmd+K) |
+
+#### 🎯 Tour & Onboarding
+
+| Component | Web | Native | Description |
+|-----------|-----|--------|-------------|
+| `Tour` | ✅ | ✅ | Interactive guided tours with spotlights |
+| `Onboarding` | ✅ | ✅ | Multi-step onboarding with progress tracking |
+| `Tooltip` | ✅ | ✅ | Contextual feature highlights |
+| `WelcomeModal` | ✅ | ✅ | Welcome screens with feature showcase |
+| `FeatureHighlight` | ✅ | - | Animated feature callouts with pulse effects |
+
+#### 📋 Layout Templates
+
+| Template | Web | Native | Description |
+|----------|-----|--------|-------------|
+| `DashboardLayout` | ✅ | ✅ | Complete dashboard with navigation |
+| `AuthLayout` | ✅ | ✅ | Authentication pages with features showcase |
+| `SettingsLayout` | ✅ | ✅ | Settings pages with tabbed navigation |
+
+### Usage Examples
+
+#### Web Dashboard with Command Palette
+```tsx
+import { 
+  DashboardLayout, 
+  CommandPalette, 
+  useCommandPalette 
+} from '@digilogiclabs/saas-factory-ui';
+
+export default function Dashboard() {
+  const commands = [
+    {
+      id: 'nav',
+      label: 'Navigation',
+      items: [
+        { id: 'dashboard', label: 'Go to Dashboard', action: () => router.push('/') },
+        { id: 'settings', label: 'Open Settings', action: () => router.push('/settings') },
+      ]
+    }
+  ];
+
+  const { isOpen, toggle } = useCommandPalette({
+    commands,
+    keyboardShortcut: 'cmd+k'
+  });
+
+  return (
+    <DashboardLayout>
+      <div className="p-6">
+        <h1>Dashboard Content</h1>
+        <p>Press Cmd+K to open command palette</p>
+      </div>
+      
+      <CommandPalette
+        open={isOpen}
+        onOpenChange={toggle}
+        commands={commands}
+      />
+    </DashboardLayout>
+  );
+}
+```
+
+#### Native App with Bottom Tabs
+```tsx
+import { 
+  DashboardLayout, 
+  Tour,
+  useTour 
+} from '@digilogiclabs/saas-factory-ui/native';
+
+export default function MobileApp() {
+  const tourSteps = [
+    {
+      id: 'welcome',
+      title: 'Welcome!',
+      content: 'Let me show you around',
+      target: '#main-content'
+    }
+  ];
+
+  const { isOpen, start } = useTour({ 
+    steps: tourSteps,
+    localStorage: { key: 'app-tour' }
+  });
+
+  return (
+    <DashboardLayout
+      showBottomTabs={true}
+      bottomTabs={[
+        { id: 'home', label: 'Home', icon: '🏠' },
+        { id: 'search', label: 'Search', icon: '🔍' },
+        { id: 'profile', label: 'Profile', icon: '👤' },
+      ]}
+    >
+      <ScrollView>
+        <Text style={styles.title}>Mobile Dashboard</Text>
+        <TouchableOpacity onPress={start}>
+          <Text>Start Tour</Text>
+        </TouchableOpacity>
+      </ScrollView>
+
+      <Tour
+        steps={tourSteps}
+        isOpen={isOpen}
+        onRequestClose={() => {}}
+      />
+    </DashboardLayout>
+  );
+}
+```
+
 ### 🔧 Available Hooks
 
 #### Cross-Platform Hooks
@@ -248,10 +384,14 @@ export default function App() {
 - `useNetworkInfo` - **NEW** Network connection monitoring
 - `useOfflineState` - **NEW** Online/offline status detection
 - `useCache` - **NEW** Persistent caching utilities
+- `useTour` - **NEW** Tour state management with localStorage persistence
+- `useOnboarding` - **NEW** Multi-step onboarding flow management
 
 #### Web-Only Hooks
 - `useMediaQuery` - Responsive breakpoint detection
 - `useLockBody` - Body scroll lock for modals
+- `useCommandPalette` - **NEW** Command palette state management
+- `useResponsive` - **NEW** Advanced responsive breakpoint detection
 
 #### Native-Only Hooks
 - `useDimensions` - Screen dimensions and orientation