@onairos/react-native 1.0.0

package/src/components/Overlay.tsx

@@ -0,0 +1,272 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Platform,
+  Dimensions,
+} from 'react-native';
+import BottomSheet from '@gorhom/bottom-sheet';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS } from '../constants';
+
+interface OverlayProps {
+  visible: boolean;
+  onClose: () => void;
+  onAccept: () => void;
+  AppName: string;
+  requestData: Record<string, Record<string, string>>;
+  biometricType?: 'FaceID' | 'TouchID' | 'BiometricID';
+}
+
+const { height } = Dimensions.get('window');
+
+export const Overlay: React.FC<OverlayProps> = ({
+  visible,
+  onClose,
+  onAccept,
+  AppName,
+  requestData,
+  biometricType = Platform.OS === 'ios' ? 'FaceID' : 'BiometricID',
+}) => {
+  const bottomSheetRef = useRef<BottomSheet>(null);
+  const snapPoints = useMemo(() => ['85%'], []);
+
+  // Expand or collapse the bottom sheet based on visibility
+  useEffect(() => {
+    if (visible) {
+      bottomSheetRef.current?.expand();
+    } else {
+      bottomSheetRef.current?.close();
+    }
+  }, [visible]);
+
+  // Get the icon for the biometric type
+  const getBiometricIcon = useCallback(() => {
+    switch (biometricType) {
+      case 'FaceID':
+        return 'face';
+      case 'TouchID':
+        return 'fingerprint';
+      default:
+        return 'security';
+    }
+  }, [biometricType]);
+
+  // Render the requested data sections
+  const renderDataCategories = () => {
+    return Object.entries(requestData).map(([category, items]) => (
+      <View key={category} style={styles.categoryContainer}>
+        <Text style={styles.categoryTitle}>{category}</Text>
+        
+        {Object.entries(items).map(([item, description]) => (
+          <View key={item} style={styles.itemContainer}>
+            <Icon name="check-circle" size={20} color={COLORS.primary} />
+            <View style={styles.itemContent}>
+              <Text style={styles.itemTitle}>{item}</Text>
+              <Text style={styles.itemDescription}>{description}</Text>
+            </View>
+          </View>
+        ))}
+      </View>
+    ));
+  };
+
+  return (
+    <BottomSheet
+      ref={bottomSheetRef}
+      index={visible ? 0 : -1}
+      snapPoints={snapPoints}
+      enablePanDownToClose
+      onClose={onClose}
+      backdropComponent={({ animatedIndex }) => (
+        <View
+          style={[
+            styles.backdrop,
+            {
+              opacity: animatedIndex.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.5, 0],
+              }),
+            },
+          ]}
+        />
+      )}
+    >
+      <View style={styles.container}>
+        <View style={styles.header}>
+          <Icon name="shield" size={24} color={COLORS.primary} />
+          <Text style={styles.headerTitle}>Data Request</Text>
+          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+            <Icon name="close" size={24} color="#000" />
+          </TouchableOpacity>
+        </View>
+        
+        <ScrollView style={styles.content}>
+          <View style={styles.appInfoContainer}>
+            <Text style={styles.appName}>{AppName}</Text>
+            <Text style={styles.requestText}>
+              is requesting access to the following data:
+            </Text>
+          </View>
+          
+          {renderDataCategories()}
+          
+          <View style={styles.securityNotice}>
+            <Icon name="security" size={20} color="#666" />
+            <Text style={styles.securityText}>
+              Your data is securely processed and never shared with third parties.
+            </Text>
+          </View>
+        </ScrollView>
+        
+        <View style={styles.footer}>
+          <TouchableOpacity
+            style={styles.cancelButton}
+            onPress={onClose}
+          >
+            <Text style={styles.cancelButtonText}>Deny</Text>
+          </TouchableOpacity>
+          
+          <TouchableOpacity
+            style={styles.acceptButton}
+            onPress={onAccept}
+          >
+            <Text style={styles.acceptButtonText}>Accept</Text>
+            <Icon name={getBiometricIcon()} size={20} color="#fff" style={styles.buttonIcon} />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#000',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: COLORS.headerBg,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  headerTitle: {
+    flex: 1,
+    fontSize: 18,
+    fontWeight: '600',
+    marginLeft: 12,
+    color: '#000',
+  },
+  closeButton: {
+    padding: 8,
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  appInfoContainer: {
+    marginBottom: 24,
+  },
+  appName: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#000',
+    marginBottom: 4,
+  },
+  requestText: {
+    fontSize: 16,
+    color: '#666',
+  },
+  categoryContainer: {
+    marginBottom: 20,
+  },
+  categoryTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#000',
+    marginBottom: 12,
+  },
+  itemContainer: {
+    flexDirection: 'row',
+    marginBottom: 12,
+    paddingLeft: 8,
+  },
+  itemContent: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  itemTitle: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000',
+    marginBottom: 2,
+  },
+  itemDescription: {
+    fontSize: 14,
+    color: '#666',
+  },
+  securityNotice: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    backgroundColor: '#f5f5f5',
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 24,
+  },
+  securityText: {
+    flex: 1,
+    fontSize: 14,
+    color: '#666',
+    marginLeft: 8,
+  },
+  footer: {
+    flexDirection: 'row',
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+  },
+  cancelButton: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 25,
+    marginRight: 8,
+  },
+  cancelButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#666',
+  },
+  acceptButton: {
+    flex: 2,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 12,
+    backgroundColor: COLORS.primary,
+    borderRadius: 25,
+    marginLeft: 8,
+  },
+  acceptButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+    marginRight: 8,
+  },
+  buttonIcon: {
+    marginLeft: 4,
+  },
+});

package/src/components/UniversalOnboarding.tsx

@@ -0,0 +1,184 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+  Dimensions,
+} from 'react-native';
+import BottomSheet from '@gorhom/bottom-sheet';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { PlatformList } from './PlatformList';
+import { PinInput } from './PinInput';
+import { TrainingModal } from './TrainingModal';
+import { useConnections } from '../hooks/useConnections';
+import { COLORS } from '../constants';
+import type { UniversalOnboardingProps, ConnectionStatus } from '../types';
+
+const { height } = Dimensions.get('window');
+
+export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
+  visible,
+  onClose,
+  AppName,
+  requestData,
+  returnLink,
+  onComplete,
+  embedd,
+  debug,
+  test,
+}) => {
+  const bottomSheetRef = useRef<BottomSheet>(null);
+  const [step, setStep] = useState<'connect' | 'pin' | 'training'>('connect');
+  const [connections, setConnections] = useState<ConnectionStatus>({});
+  const [pin, setPin] = useState<string>('');
+  const [training, setTraining] = useState<{
+    progress: number;
+    eta: string;
+  }>({ progress: 0, eta: '' });
+
+  const {
+    connectPlatform,
+    disconnectPlatform,
+    getConnectionStatus,
+    isConnecting,
+  } = useConnections();
+
+  const snapPoints = useMemo(() => ['90%'], []);
+
+  useEffect(() => {
+    if (visible) {
+      bottomSheetRef.current?.expand();
+      loadInitialStatus();
+    } else {
+      bottomSheetRef.current?.close();
+    }
+  }, [visible]);
+
+  const loadInitialStatus = useCallback(async () => {
+    const status = await getConnectionStatus();
+    setConnections(status);
+  }, [getConnectionStatus]);
+
+  const handlePlatformToggle = useCallback(async (platform: string, connect: boolean) => {
+    try {
+      if (connect) {
+        await connectPlatform(platform);
+      } else {
+        await disconnectPlatform(platform);
+      }
+      await loadInitialStatus();
+    } catch (error) {
+      console.error(`Error toggling ${platform}:`, error);
+    }
+  }, [connectPlatform, disconnectPlatform, loadInitialStatus]);
+
+  const handlePinSubmit = useCallback(async (userPin: string) => {
+    setPin(userPin);
+    setStep('training');
+    // Simulate training progress
+    let progress = 0;
+    const interval = setInterval(() => {
+      progress += 0.1;
+      setTraining({
+        progress,
+        eta: `${Math.round((1 - progress) * 100)} seconds remaining`,
+      });
+      if (progress >= 1) {
+        clearInterval(interval);
+        onComplete('https://api2.onairos.uk', 'dummy-token', {
+          pin: userPin,
+          connections,
+        });
+      }
+    }, 1000);
+  }, [connections, onComplete]);
+
+  const canProceedToPin = useMemo(() => {
+    const connectedPlatforms = Object.values(connections).filter(Boolean).length;
+    return connectedPlatforms >= 2;
+  }, [connections]);
+
+  const renderHeader = () => (
+    <View style={styles.header}>
+      <Icon name="auto_awesome" size={24} color={COLORS.primary} />
+      <Text style={styles.headerTitle}>Connect with Onairos</Text>
+      <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+        <Icon name="close" size={24} color="#000" />
+      </TouchableOpacity>
+    </View>
+  );
+
+  const renderContent = () => {
+    switch (step) {
+      case 'connect':
+        return (
+          <PlatformList
+            connections={connections}
+            onToggle={handlePlatformToggle}
+            isLoading={isConnecting}
+            canProceed={canProceedToPin}
+            onProceed={() => setStep('pin')}
+          />
+        );
+      case 'pin':
+        return (
+          <PinInput
+            onSubmit={handlePinSubmit}
+            minLength={8}
+            requireSpecialChar
+            requireNumber
+          />
+        );
+      case 'training':
+        return (
+          <TrainingModal
+            progress={training.progress}
+            eta={training.eta}
+            onCancel={onClose}
+          />
+        );
+    }
+  };
+
+  return (
+    <BottomSheet
+      ref={bottomSheetRef}
+      snapPoints={snapPoints}
+      enablePanDownToClose
+      onClose={onClose}
+      index={visible ? 0 : -1}
+    >
+      <View style={styles.container}>
+        {renderHeader()}
+        {renderContent()}
+      </View>
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: COLORS.headerBg,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  headerTitle: {
+    flex: 1,
+    fontSize: 18,
+    fontWeight: '600',
+    marginLeft: 12,
+    color: '#000',
+  },
+  closeButton: {
+    padding: 8,
+  },
+}); 

package/src/components/onboarding/OAuthWebView.tsx

@@ -0,0 +1,134 @@
+import React, { useCallback, useState } from 'react';
+import { View, StyleSheet, ActivityIndicator, SafeAreaView, TouchableOpacity } from 'react-native';
+import { WebView, WebViewNavigation } from 'react-native-webview';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS } from '../../constants';
+import type { OAuthWebViewProps } from '../../types';
+
+export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
+  url,
+  platform,
+  onComplete,
+  onClose,
+}) => {
+  const [loading, setLoading] = useState(true);
+
+  const handleNavigationStateChange = useCallback(
+    (navState: WebViewNavigation) => {
+      // Check if the URL includes our redirect URI
+      if (navState.url.startsWith('onairosreact://auth/')) {
+        // OAuth flow is complete - callback will be handled by the deep link handler
+        onComplete();
+        return;
+      }
+    },
+    [onComplete]
+  );
+
+  const handleLoadEnd = useCallback(() => {
+    setLoading(false);
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+          <Icon name="close" size={24} color="#000" />
+        </TouchableOpacity>
+        <View style={styles.titleContainer}>
+          <Icon 
+            name={getPlatformIcon(platform)} 
+            size={20} 
+            color={getPlatformColor(platform)} 
+          />
+        </View>
+      </View>
+
+      <WebView
+        source={{ uri: url }}
+        onNavigationStateChange={handleNavigationStateChange}
+        onLoadEnd={handleLoadEnd}
+        startInLoadingState={true}
+        renderLoading={() => null} // We'll handle our own loading UI
+        style={styles.webView}
+      />
+
+      {loading && (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color={COLORS.primary} />
+        </View>
+      )}
+    </SafeAreaView>
+  );
+};
+
+/**
+ * Get platform-specific icon
+ */
+const getPlatformIcon = (platform: string): string => {
+  switch (platform) {
+    case 'instagram':
+      return 'photo-camera';
+    case 'youtube':
+      return 'smart-display';
+    case 'pinterest':
+      return 'push-pin';
+    case 'reddit':
+      return 'forum';
+    default:
+      return 'link';
+  }
+};
+
+/**
+ * Get platform-specific color
+ */
+const getPlatformColor = (platform: string): string => {
+  switch (platform) {
+    case 'instagram':
+      return '#E1306C';
+    case 'youtube':
+      return '#FF0000';
+    case 'pinterest':
+      return '#E60023';
+    case 'reddit':
+      return '#FF4500';
+    default:
+      return COLORS.primary;
+  }
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 56,
+    backgroundColor: '#f8f8f8',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+    paddingHorizontal: 16,
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  closeButton: {
+    padding: 8,
+    position: 'absolute',
+    left: 16,
+    zIndex: 10,
+  },
+  webView: {
+    flex: 1,
+  },
+  loadingContainer: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/onboarding/OnboardingHeader.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS } from '../../constants';
+
+interface OnboardingHeaderProps {
+  title: string;
+  subtitle?: string;
+  showBackButton?: boolean;
+  onBack?: () => void;
+  onClose: () => void;
+}
+
+export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
+  title,
+  subtitle,
+  showBackButton = false,
+  onBack,
+  onClose,
+}) => {
+  return (
+    <View style={styles.header}>
+      {showBackButton && (
+        <TouchableOpacity style={styles.backButton} onPress={onBack}>
+          <Icon name="arrow-back" size={24} color="#000" />
+        </TouchableOpacity>
+      )}
+      
+      <View style={styles.titleContainer}>
+        <Text style={styles.title}>{title}</Text>
+        {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+      </View>
+      
+      <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+        <Icon name="close" size={24} color="#000" />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: COLORS.headerBg,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  backButton: {
+    padding: 8,
+    marginRight: 8,
+  },
+  titleContainer: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#000',
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 4,
+  },
+  closeButton: {
+    padding: 8,
+  },
+});