react-native-salespanda 0.1.1 → 0.3.0

package/src/SalespandaApp.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import DrawerNavigator from './navigation/DrawerNavigator';
+import BottomTabNavigator from './navigation/BottomTabNavigator';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+export interface SalespandaAppProps {
+  /**
+   * Custom navigation container ref for external navigation control
+   */
+  navigationRef?: React.RefObject<any>;
+
+  /**
+   * Optional theme configuration
+   */
+  theme?: {
+    primaryColor?: string;
+    backgroundColor?: string;
+  };
+
+  /**
+   * If true, the app will not render NavigationContainer
+   * (useful when embedding in an existing navigation structure)
+   */
+  standalone?: boolean;
+
+  /**
+   * Callback when app is ready
+   */
+  onReady?: () => void;
+
+  /**
+   * If true, uses drawer navigation (default), otherwise uses bottom tabs only
+   */
+  useDrawer?: boolean;
+
+  /**
+   * If false, will not wrap with GestureHandlerRootView
+   * Set to false if your app already has gesture handler imported at the entry point
+   * @default true
+   */
+  wrapWithGestureHandler?: boolean;
+}
+
+/**
+ * Main Salespanda App Component
+ * Can be used as a standalone app or embedded in another React Native app
+ */
+export default function SalespandaApp({
+  navigationRef,
+  theme,
+  standalone = false,
+  onReady,
+  useDrawer = true,
+  wrapWithGestureHandler = false,
+}: SalespandaAppProps = {}) {
+  // TODO: Apply theme to app (future enhancement)
+  // Currently theme is managed through SalespandaConfig
+  void theme;
+
+  // Use drawer navigation by default, or bottom tabs only if specified
+  const AppContent = () =>
+    useDrawer ? <DrawerNavigator /> : <BottomTabNavigator />;
+
+  // If standalone mode, don't wrap with NavigationContainer
+  // (parent app will provide it)
+  if (standalone) {
+    return <AppContent />;
+  }
+
+  // Navigation content with SafeAreaProvider
+  const NavigationContent = (
+    <NavigationContainer ref={navigationRef} onReady={onReady}>
+      <SafeAreaProvider>
+        <AppContent />
+      </SafeAreaProvider>
+    </NavigationContainer>
+  );
+
+  // Wrap with GestureHandlerRootView only if requested
+  // (default is false since most apps already have gesture handler imported)
+  if (wrapWithGestureHandler) {
+    return (
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        {NavigationContent}
+      </GestureHandlerRootView>
+    );
+  }
+
+  return NavigationContent;
+}

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,8 +1,45 @@
-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 screens
+// ============================================
+// 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';
+
+// ============================================
+// 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';
+export { default as ReportsScreen } from './screens/ReportsScreen';
+export { default as PremiumScreen } from './screens/PremiumScreen';

package/src/navigation/AppNavigator.tsx

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

package/src/navigation/BottomTabNavigator.tsx

@@ -0,0 +1,68 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Text } from 'react-native';
+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 (
+    <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="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

@@ -0,0 +1,242 @@
+import * as React from 'react';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+} from 'react-native';
+import BottomTabNavigator from './BottomTabNavigator';
+import ProfileScreen from '../screens/ProfileScreen';
+
+const Drawer = createDrawerNavigator();
+
+interface DrawerItemProps {
+  label: string;
+  icon: string;
+  onPress: () => void;
+  active?: boolean;
+}
+
+const DrawerItem: React.FC<DrawerItemProps> = ({
+  label,
+  icon,
+  onPress,
+  active = false,
+}) => {
+  return (
+    <TouchableOpacity
+      style={[styles.drawerItem, active && styles.activeDrawerItem]}
+      onPress={onPress}
+    >
+      <Text style={styles.drawerIcon}>{icon}</Text>
+      <Text style={[styles.drawerLabel, active && styles.activeDrawerLabel]}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+function CustomDrawerContent(props: any) {
+  const { navigation, state } = props;
+  const currentRoute = state.routes[state.index].name;
+
+  return (
+    <View style={styles.drawerContainer}>
+      <View style={styles.drawerHeader}>
+        <Image
+          source={{ uri: 'https://via.placeholder.com/80x80' }}
+          style={styles.drawerAvatar}
+        />
+        <Text style={styles.drawerName}>John Doe</Text>
+        <Text style={styles.drawerEmail}>john.doe@example.com</Text>
+      </View>
+
+      <ScrollView style={styles.drawerContent}>
+        <DrawerItem
+          label="Home"
+          icon="🏠"
+          active={currentRoute === 'HomeTabs'}
+          onPress={() => navigation.navigate('HomeTabs')}
+        />
+        <DrawerItem
+          label="Profile"
+          icon="👤"
+          active={currentRoute === 'Profile'}
+          onPress={() => navigation.navigate('Profile')}
+        />
+        <DrawerItem
+          label="Social Setup"
+          icon="📢"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Microsite Setup"
+          icon="⚙️"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Proposal"
+          icon="📋"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Email Campaign"
+          icon="📧"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="View Microsite"
+          icon="🎵"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Import Contact"
+          icon="📄"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+
+        <View style={styles.drawerDivider} />
+
+        <DrawerItem
+          label="Settings"
+          icon="⚙️"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Help & Support"
+          icon="❓"
+          onPress={() => {
+            /* Add navigation */
+          }}
+        />
+        <DrawerItem
+          label="Logout"
+          icon="🚪"
+          onPress={() => {
+            /* Add logout logic */
+          }}
+        />
+      </ScrollView>
+    </View>
+  );
+}
+
+export default function DrawerNavigator() {
+  return (
+    <Drawer.Navigator
+      drawerContent={(props) => <CustomDrawerContent {...props} />}
+      screenOptions={{
+        headerShown: true,
+        drawerType: 'slide', // Changed from 'front' for better UX
+        swipeEdgeWidth: 100, // Width from edge to start swipe
+        drawerStyle: {
+          width: 280,
+        },
+        headerStyle: {
+          backgroundColor: '#4a148c',
+        },
+        headerTintColor: '#fff',
+        headerTitleStyle: {
+          fontWeight: '600',
+        },
+      }}
+    >
+      <Drawer.Screen
+        name="HomeTabs"
+        component={BottomTabNavigator}
+        options={{
+          title: 'Salespanda',
+        }}
+      />
+      <Drawer.Screen
+        name="Profile"
+        component={ProfileScreen}
+        options={{
+          title: 'Profile',
+        }}
+      />
+    </Drawer.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  drawerContainer: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  drawerHeader: {
+    backgroundColor: '#4a148c',
+    padding: 20,
+    paddingTop: 50,
+    alignItems: 'center',
+  },
+  drawerAvatar: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    marginBottom: 12,
+    borderWidth: 3,
+    borderColor: '#fff',
+  },
+  drawerName: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#fff',
+    marginBottom: 4,
+  },
+  drawerEmail: {
+    fontSize: 14,
+    color: '#fff',
+    opacity: 0.8,
+  },
+  drawerContent: {
+    flex: 1,
+    paddingTop: 8,
+  },
+  drawerItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    paddingHorizontal: 20,
+  },
+  activeDrawerItem: {
+    backgroundColor: '#f5f5f5',
+    borderLeftWidth: 4,
+    borderLeftColor: '#4a148c',
+  },
+  drawerIcon: {
+    fontSize: 20,
+    marginRight: 16,
+    width: 24,
+  },
+  drawerLabel: {
+    fontSize: 16,
+    color: '#333',
+  },
+  activeDrawerLabel: {
+    fontWeight: '600',
+    color: '#4a148c',
+  },
+  drawerDivider: {
+    height: 1,
+    backgroundColor: '#e0e0e0',
+    marginVertical: 8,
+  },
+});