react-native-salespanda 0.2.0 → 0.3.0

package/src/config/SalespandaConfig.ts

@@ -0,0 +1,105 @@
+/**
+ * Salespanda SDK Configuration
+ */
+
+export interface SalespandaConfig {
+  /**
+   * Theme configuration
+   */
+  theme?: {
+    primaryColor?: string;
+    secondaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    accentColor?: string;
+  };
+
+  /**
+   * API configuration
+   */
+  api?: {
+    baseUrl?: string;
+    apiKey?: string;
+    timeout?: number;
+  };
+
+  /**
+   * Feature flags
+   */
+  features?: {
+    enablePremium?: boolean;
+    enableNotifications?: boolean;
+    enableReports?: boolean;
+    enableDrawer?: boolean;
+  };
+
+  /**
+   * Analytics configuration
+   */
+  analytics?: {
+    enabled?: boolean;
+    trackingId?: string;
+  };
+}
+
+let globalConfig: SalespandaConfig = {
+  theme: {
+    primaryColor: '#4a148c',
+    secondaryColor: '#25D366',
+    backgroundColor: '#fff',
+    textColor: '#333',
+    accentColor: '#999',
+  },
+  features: {
+    enablePremium: true,
+    enableNotifications: true,
+    enableReports: true,
+    enableDrawer: true,
+  },
+};
+
+/**
+ * Initialize Salespanda SDK with custom configuration
+ */
+export function initializeSalespanda(config: SalespandaConfig): void {
+  globalConfig = {
+    ...globalConfig,
+    ...config,
+    theme: {
+      ...globalConfig.theme,
+      ...config.theme,
+    },
+    features: {
+      ...globalConfig.features,
+      ...config.features,
+    },
+  };
+}
+
+/**
+ * Get current Salespanda configuration
+ */
+export function getSalespandaConfig(): SalespandaConfig {
+  return globalConfig;
+}
+
+/**
+ * Reset configuration to defaults
+ */
+export function resetSalespandaConfig(): void {
+  globalConfig = {
+    theme: {
+      primaryColor: '#4a148c',
+      secondaryColor: '#25D366',
+      backgroundColor: '#fff',
+      textColor: '#333',
+      accentColor: '#999',
+    },
+    features: {
+      enablePremium: true,
+      enableNotifications: true,
+      enableReports: true,
+      enableDrawer: true,
+    },
+  };
+}

package/src/index.tsx

@@ -1,15 +1,43 @@
-import Salespanda from './NativeSalespanda';
+/**
+ * Salespanda SDK
+ *
+ * This SDK can be used in two ways:
+ *
+ * 1. As a complete standalone app:
+ *    import SalespandaApp from 'react-native-salespanda';
+ *    <SalespandaApp />
+ *
+ * 2. As individual components/screens in your app:
+ *    import { HomeScreen, ProfileScreen } from 'react-native-salespanda';
+ */
 
-export function multiply(a: number, b: number): number {
-  return Salespanda.multiply(a, b);
-}
+// ============================================
+// MAIN APP EXPORT (Default)
+// ============================================
+export { default } from './SalespandaApp';
+export { default as SalespandaApp } from './SalespandaApp';
+export type { SalespandaAppProps } from './SalespandaApp';
 
-// Export navigation
+// ============================================
+// CONFIGURATION
+// ============================================
+export {
+  initializeSalespanda,
+  getSalespandaConfig,
+  resetSalespandaConfig,
+} from './config/SalespandaConfig';
+export type { SalespandaConfig } from './config/SalespandaConfig';
+
+// ============================================
+// NAVIGATION COMPONENTS
+// ============================================
 export { default as AppNavigator } from './navigation/AppNavigator';
 export { default as DrawerNavigator } from './navigation/DrawerNavigator';
 export { default as BottomTabNavigator } from './navigation/BottomTabNavigator';
 
-// Export screens
+// ============================================
+// SCREEN COMPONENTS (Library Mode)
+// ============================================
 export { default as HomeScreen } from './screens/HomeScreen';
 export { default as ProfileScreen } from './screens/ProfileScreen';
 export { default as NotificationsScreen } from './screens/NotificationsScreen';

package/src/navigation/AppNavigator.tsx

@@ -1,10 +1,13 @@
 import { NavigationContainer } from '@react-navigation/native';
-import DrawerNavigator from './DrawerNavigator';
+import BottomTabNavigator from './BottomTabNavigator';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function AppNavigator() {
   return (
     <NavigationContainer>
-      <DrawerNavigator />
+      <SafeAreaView style={{ flex: 1 }} edges={['bottom', 'top']}>
+        <BottomTabNavigator />
+      </SafeAreaView>
     </NavigationContainer>
   );
 }

package/src/navigation/BottomTabNavigator.tsx

@@ -4,61 +4,65 @@ import HomeScreen from '../screens/HomeScreen';
 import PremiumScreen from '../screens/PremiumScreen';
 import NotificationsScreen from '../screens/NotificationsScreen';
 import ReportsScreen from '../screens/ReportsScreen';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 const Tab = createBottomTabNavigator();
 
 export default function BottomTabNavigator() {
   return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-        tabBarActiveTintColor: '#4a148c',
-        tabBarInactiveTintColor: '#999',
-        tabBarStyle: {
-          borderTopWidth: 1,
-          borderTopColor: '#e0e0e0',
-          paddingBottom: 8,
-          paddingTop: 8,
-          height: 60,
-        },
-      }}
-    >
-      <Tab.Screen
-        name="Home"
-        component={HomeScreen}
-        options={{
-          tabBarIcon: ({ color, size }) => (
-            <Text style={{ fontSize: size, color }}>🏠</Text>
-          ),
+    <SafeAreaView style={{ flex: 1 }} edges={['bottom']}>
+      <Tab.Navigator
+        screenOptions={{
+          headerShown: false, // Hide headers as drawer provides them
+          tabBarActiveTintColor: '#4a148c',
+          tabBarInactiveTintColor: '#999',
+          tabBarStyle: {
+            borderTopWidth: 1,
+            borderTopColor: '#e0e0e0',
+            paddingBottom: 8,
+            paddingTop: 8,
+            height: 60,
+          },
         }}
-      />
-      <Tab.Screen
-        name="Premium"
-        component={PremiumScreen}
-        options={{
-          tabBarIcon: ({ color, size }) => (
-            <Text style={{ fontSize: size, color }}>💎</Text>
-          ),
-        }}
-      />
-      <Tab.Screen
-        name="Notifications"
-        component={NotificationsScreen}
-        options={{
-          tabBarIcon: ({ color, size }) => (
-            <Text style={{ fontSize: size, color }}>🔔</Text>
-          ),
-        }}
-      />
-      <Tab.Screen
-        name="Reports"
-        component={ReportsScreen}
-        options={{
-          tabBarIcon: ({ color, size }) => (
-            <Text style={{ fontSize: size, color }}>📊</Text>
-          ),
-        }}
-      />
-    </Tab.Navigator>
+      >
+        <Tab.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Text style={{ fontSize: size, color }}>🏠</Text>
+            ),
+            headerShown: false,
+          }}
+        />
+        <Tab.Screen
+          name="Premium"
+          component={PremiumScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Text style={{ fontSize: size, color }}>💎</Text>
+            ),
+          }}
+        />
+        <Tab.Screen
+          name="Notifications"
+          component={NotificationsScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Text style={{ fontSize: size, color }}>🔔</Text>
+            ),
+          }}
+        />
+        <Tab.Screen
+          name="Reports"
+          component={ReportsScreen}
+          options={{
+            tabBarIcon: ({ color, size }) => (
+              <Text style={{ fontSize: size, color }}>📊</Text>
+            ),
+          }}
+        />
+      </Tab.Navigator>
+    </SafeAreaView>
   );
 }

package/src/navigation/DrawerNavigator.tsx

@@ -144,7 +144,11 @@ export default function DrawerNavigator() {
       drawerContent={(props) => <CustomDrawerContent {...props} />}
       screenOptions={{
         headerShown: true,
-        drawerType: 'front',
+        drawerType: 'slide', // Changed from 'front' for better UX
+        swipeEdgeWidth: 100, // Width from edge to start swipe
+        drawerStyle: {
+          width: 280,
+        },
         headerStyle: {
           backgroundColor: '#4a148c',
         },

package/src/screens/HomeScreen.tsx

@@ -5,8 +5,6 @@ import {
   StyleSheet,
   TouchableOpacity,
   ScrollView,
-  Image,
-  SafeAreaView,
 } from 'react-native';
 
 interface MenuItemProps {
@@ -28,101 +26,57 @@ const MenuItem: React.FC<MenuItemProps> = ({ title, icon, onPress }) => {
 
 export default function HomeScreen() {
   return (
-    <SafeAreaView style={styles.container}>
-      {/* Header */}
-      <View style={styles.header}>
-        <TouchableOpacity style={styles.menuButton}>
-          <Text style={styles.menuIcon}>☰</Text>
-        </TouchableOpacity>
-        <Text style={styles.headerTitle}>Home Page</Text>
-        <Image
-          source={{ uri: 'https://via.placeholder.com/40x40' }}
-          style={styles.logo}
-        />
-      </View>
-
-      <ScrollView style={styles.scrollView}>
-        {/* WhatsApp Banner */}
-        <View style={styles.banner}>
-          <View style={styles.bannerContent}>
-            <Text style={styles.bannerText}>
-              Build strong relationships,{'\n'}
-              improve relations & productivity{'\n'}
-              by having conversations on{'\n'}
-              WhatsAppppppppp.
-            </Text>
-            <TouchableOpacity style={styles.startButton}>
-              <Text style={styles.startButtonText}>Start Sharing →</Text>
-            </TouchableOpacity>
-          </View>
-          <View style={styles.whatsappIconContainer}>
-            <View style={styles.whatsappIcon}>
-              <Text style={styles.whatsappText}>📱</Text>
-            </View>
+    <ScrollView style={styles.scrollView}>
+      {/* WhatsApp Banner */}
+      <View style={styles.banner}>
+        <View style={styles.bannerContent}>
+          <Text style={styles.bannerText}>
+            Build strong relationships,{'\n'}
+            improve relations & productivity{'\n'}
+            by having conversations on{'\n'}
+            WhatsAppppppppp.
+          </Text>
+          <TouchableOpacity style={styles.startButton}>
+            <Text style={styles.startButtonText}>Start Sharing →</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.whatsappIconContainer}>
+          <View style={styles.whatsappIcon}>
+            <Text style={styles.whatsappText}>📱</Text>
           </View>
         </View>
+      </View>
 
-        {/* Carousel Indicators */}
-        <View style={styles.carouselIndicators}>
-          <View style={[styles.indicator, styles.activeIndicator]} />
-          <View style={styles.indicator} />
-          <View style={styles.indicator} />
-        </View>
+      {/* Carousel Indicators */}
+      <View style={styles.carouselIndicators}>
+        <View style={[styles.indicator, styles.activeIndicator]} />
+        <View style={styles.indicator} />
+        <View style={styles.indicator} />
+      </View>
 
-        {/* Menu Grid */}
-        <View style={styles.menuGrid}>
-          {/* <MenuItem title="Content Library" icon="📚" />
-          <MenuItem title="Buy Now" icon="🛒" />
-          <MenuItem title="Quiz & Calculator" icon="🧮" />
-           */}
-          <MenuItem title="Social Setup" icon="📢" />
-          <MenuItem title="Microsite Setup" icon="⚙️" />
-          <MenuItem title="Proposal" icon="📋" />
+      {/* Menu Grid */}
+      <View style={styles.menuGrid}>
+        <MenuItem title="Content Library" icon="📚" />
+        <MenuItem title="Buy Now" icon="🛒" />
+        <MenuItem title="Quiz & Calculator" icon="🧮" />
 
-          <MenuItem title="Email Campaign" icon="📧" />
-          <MenuItem title="View Microsite" icon="🎵" />
-          <MenuItem title="Import Contact" icon="📄" />
+        <MenuItem title="Social Setup" icon="📢" />
+        <MenuItem title="Microsite Setup" icon="⚙️" />
+        <MenuItem title="Proposal" icon="📋" />
 
-          <MenuItem title="Poster Of The Week" icon="🖼️" />
-          <MenuItem title="DigiCard" icon="👤" />
-          <MenuItem title="Help Videos" icon="❓" />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+        <MenuItem title="Email Campaign" icon="📧" />
+        <MenuItem title="View Microsite" icon="🎵" />
+        <MenuItem title="Import Contact" icon="📄" />
+
+        <MenuItem title="Poster Of The Week" icon="🖼️" />
+        <MenuItem title="DigiCard" icon="👤" />
+        <MenuItem title="Help Videos" icon="❓" />
+      </View>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 16,
-    backgroundColor: '#fff',
-    borderBottomWidth: 1,
-    borderBottomColor: '#e0e0e0',
-  },
-  menuButton: {
-    padding: 4,
-  },
-  menuIcon: {
-    fontSize: 24,
-    color: '#333',
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
-  },
-  logo: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-  },
   scrollView: {
     flex: 1,
   },