@onairos/react-native 3.4.1 → 3.6.0

package/src/components/onboarding/PlatformConnector.tsx

@@ -1,302 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  ScrollView,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS } from '../../constants';
-import { OAuthWebView } from './OAuthWebView';
-import type { ConnectionStatus, PlatformConfig } from '../../types';
-
-interface PlatformConnectorProps {
-  connections: ConnectionStatus;
-  onConnect: (platform: string) => Promise<void>;
-  onDisconnect: (platform: string) => Promise<void>;
-  isLoading: boolean;
-  canProceed: boolean;
-  onProceed: () => void;
-}
-
-// Platform definitions
-const PLATFORMS: Record<string, PlatformConfig> = {
-  instagram: {
-    name: 'Instagram',
-    icon: 'photo-camera',
-    color: '#E1306C',
-    description: 'Connect to share and analyze your Instagram content',
-  },
-  youtube: {
-    name: 'YouTube',
-    icon: 'smart-display',
-    color: '#FF0000',
-    description: 'Connect for YouTube video recommendations and analysis',
-  },
-  pinterest: {
-    name: 'Pinterest',
-    icon: 'push-pin',
-    color: '#E60023',
-    description: 'Connect to enhance Pinterest board recommendations',
-  },
-  reddit: {
-    name: 'Reddit',
-    icon: 'forum',
-    color: '#FF4500',
-    description: 'Connect to personalize Reddit content insights',
-  },
-};
-
-export const PlatformConnector: React.FC<PlatformConnectorProps> = ({
-  connections,
-  onConnect,
-  onDisconnect,
-  isLoading,
-  canProceed,
-  onProceed,
-}) => {
-  const [activeWebview, setActiveWebview] = useState<string | null>(null);
-
-  const handleConnectPress = async (platform: string) => {
-    setActiveWebview(platform);
-  };
-
-  const handleWebViewComplete = () => {
-    setActiveWebview(null);
-  };
-
-  const handleWebViewClose = () => {
-    setActiveWebview(null);
-  };
-
-  const handleDisconnectPress = async (platform: string) => {
-    await onDisconnect(platform);
-  };
-
-  const getPlatformStatus = (platform: string) => {
-    const platformKey = platform as keyof ConnectionStatus;
-    return connections[platformKey] ? true : false;
-  };
-
-  const getConnectedCount = () => {
-    return Object.values(connections).filter(Boolean).length;
-  };
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Connect Your Platforms</Text>
-      <Text style={styles.subtitle}>
-        Connect at least 2 platforms to create your Onairos account
-      </Text>
-
-      <ScrollView style={styles.platformList}>
-        {Object.keys(PLATFORMS).map((platform) => {
-          const platformInfo = PLATFORMS[platform];
-          const isConnected = getPlatformStatus(platform);
-          const userName = isConnected 
-            ? connections[platform as keyof ConnectionStatus]?.userName 
-            : null;
-
-          return (
-            <View key={platform} style={styles.platformItem}>
-              <View style={styles.platformInfo}>
-                <View
-                  style={[
-                    styles.platformIcon,
-                    { backgroundColor: platformInfo.color },
-                  ]}
-                >
-                  <Icon name={platformInfo.icon} size={24} color="#fff" />
-                </View>
-                <View style={styles.platformText}>
-                  <Text style={styles.platformName}>{platformInfo.name}</Text>
-                  <Text style={styles.platformDescription}>
-                    {isConnected
-                      ? `Connected as ${userName}`
-                      : platformInfo.description}
-                  </Text>
-                </View>
-              </View>
-
-              <TouchableOpacity
-                style={[
-                  styles.platformButton,
-                  isConnected ? styles.disconnectButton : styles.connectButton,
-                ]}
-                onPress={() =>
-                  isConnected
-                    ? handleDisconnectPress(platform)
-                    : handleConnectPress(platform)
-                }
-                disabled={isLoading}
-              >
-                {isLoading ? (
-                  <ActivityIndicator size="small" color="#fff" />
-                ) : (
-                  <Text style={styles.buttonText}>
-                    {isConnected ? 'Disconnect' : 'Connect'}
-                  </Text>
-                )}
-              </TouchableOpacity>
-            </View>
-          );
-        })}
-      </ScrollView>
-
-      <View style={styles.footer}>
-        <Text style={styles.connectionStatus}>
-          {getConnectedCount()} of {Object.keys(PLATFORMS).length} platforms connected
-        </Text>
-        <TouchableOpacity
-          style={[
-            styles.proceedButton,
-            canProceed ? styles.proceedActive : styles.proceedInactive,
-          ]}
-          onPress={onProceed}
-          disabled={!canProceed}
-        >
-          <Text
-            style={[
-              styles.proceedText,
-              canProceed ? styles.proceedTextActive : styles.proceedTextInactive,
-            ]}
-          >
-            Continue
-          </Text>
-          <Icon
-            name="arrow-forward"
-            size={20}
-            color={canProceed ? '#fff' : '#999'}
-          />
-        </TouchableOpacity>
-      </View>
-
-      {activeWebview && (
-        <OAuthWebView
-          url={`https://oauth.example.com/${activeWebview}`} // This would be replaced with actual OAuth URL
-          platform={activeWebview}
-          onComplete={handleWebViewComplete}
-          onClose={handleWebViewClose}
-          onSuccess={(code) => {
-            console.log(`Received authorization code for ${activeWebview}: ${code}`);
-            // In a real implementation, we'd pass this code to our API service
-            handleWebViewComplete();
-          }}
-        />
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 8,
-    color: '#000',
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#666',
-    marginBottom: 24,
-  },
-  platformList: {
-    flex: 1,
-  },
-  platformItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 16,
-    padding: 12,
-    backgroundColor: '#f8f8f8',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#eee',
-  },
-  platformInfo: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  platformIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12,
-  },
-  platformText: {
-    flex: 1,
-  },
-  platformName: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 4,
-    color: '#000',
-  },
-  platformDescription: {
-    fontSize: 14,
-    color: '#666',
-  },
-  platformButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-    minWidth: 100,
-  },
-  connectButton: {
-    backgroundColor: COLORS.primary,
-  },
-  disconnectButton: {
-    backgroundColor: '#f44336',
-  },
-  buttonText: {
-    color: '#fff',
-    fontWeight: '600',
-  },
-  footer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingTop: 16,
-    borderTopWidth: 1,
-    borderTopColor: '#eee',
-    marginTop: 16,
-  },
-  connectionStatus: {
-    fontSize: 14,
-    color: '#666',
-  },
-  proceedButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 24,
-  },
-  proceedActive: {
-    backgroundColor: COLORS.primary,
-  },
-  proceedInactive: {
-    backgroundColor: '#eee',
-  },
-  proceedText: {
-    fontWeight: '600',
-    marginRight: 8,
-  },
-  proceedTextActive: {
-    color: '#fff',
-  },
-  proceedTextInactive: {
-    color: '#999',
-  },
-});

package/src/components/screens/ConnectorScreen.tsx

@@ -1,153 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { View, StyleSheet, SafeAreaView } from 'react-native';
-import { OnboardingHeader } from '../onboarding/OnboardingHeader';
-import { PlatformConnector } from '../onboarding/PlatformConnector';
-import { connectPlatform, disconnectPlatform } from '../../services/oauthService';
-import { getCredentials, updateCredentials } from '../../utils/secureStorage';
-import type { ConnectionStatus } from '../../types';
-
-interface ConnectorScreenProps {
-  onComplete: () => void;
-  onClose: () => void;
-  AppName: string;
-}
-
-export const ConnectorScreen: React.FC<ConnectorScreenProps> = ({
-  onComplete,
-  onClose,
-  AppName,
-}) => {
-  const [connections, setConnections] = useState<ConnectionStatus>({});
-  const [isConnecting, setIsConnecting] = useState(false);
-
-  // Load initial connection status
-  useEffect(() => {
-    loadConnectionStatus();
-  }, []);
-
-  // Load connection status from secure storage
-  const loadConnectionStatus = useCallback(async () => {
-    try {
-      const credentials = await getCredentials();
-      
-      if (credentials?.platforms) {
-        const connectionStatus: ConnectionStatus = {};
-        
-        // Transform platforms data to connection status format
-        Object.entries(credentials.platforms).forEach(([platform, data]) => {
-          if (data && 'username' in data) {
-            connectionStatus[platform] = {
-              userName: data.username,
-              connected: true
-            };
-          }
-        });
-        
-        setConnections(connectionStatus);
-      }
-    } catch (error) {
-      console.error('Error loading connection status:', error);
-    }
-  }, []);
-
-  // Handle platform connection
-  const handleConnect = useCallback(async (platform: string) => {
-    try {
-      setIsConnecting(true);
-      
-      // Start OAuth flow
-      const connectionData = await connectPlatform(platform);
-      
-      // Get current credentials
-      const credentials = await getCredentials();
-      
-      if (!credentials) {
-        throw new Error('No credentials found');
-      }
-      
-      // Update platforms in credentials
-      const updatedPlatforms = {
-        ...credentials.platforms,
-        [platform]: {
-          token: connectionData.token,
-          username: connectionData.username,
-          userId: connectionData.userId,
-        },
-      };
-      
-      // Update stored credentials
-      await updateCredentials({
-        platforms: updatedPlatforms,
-      });
-      
-      // Refresh connection status
-      await loadConnectionStatus();
-    } catch (error) {
-      console.error(`Error connecting to ${platform}:`, error);
-    } finally {
-      setIsConnecting(false);
-    }
-  }, [loadConnectionStatus]);
-
-  // Handle platform disconnection
-  const handleDisconnect = useCallback(async (platform: string) => {
-    try {
-      setIsConnecting(true);
-      
-      // Get current credentials
-      const credentials = await getCredentials();
-      
-      if (!credentials || !credentials.platforms) {
-        throw new Error('No credentials or platforms found');
-      }
-      
-      // Create updated platforms object without the disconnected platform
-      const updatedPlatforms = { ...credentials.platforms };
-      delete updatedPlatforms[platform as keyof typeof updatedPlatforms];
-      
-      // Update stored credentials
-      await updateCredentials({
-        platforms: updatedPlatforms,
-      });
-      
-      // Refresh connection status
-      await loadConnectionStatus();
-    } catch (error) {
-      console.error(`Error disconnecting from ${platform}:`, error);
-    } finally {
-      setIsConnecting(false);
-    }
-  }, [loadConnectionStatus]);
-
-  // Check if user can proceed to next step
-  const canProceed = useCallback(() => {
-    const connectedPlatforms = Object.values(connections).filter(conn => conn.connected).length;
-    return connectedPlatforms >= 2;
-  }, [connections]);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <OnboardingHeader
-        title="Connect Your Platforms"
-        subtitle={`Connecting to ${AppName}`}
-        onClose={onClose}
-      />
-      
-      <PlatformConnector
-        connections={connections}
-        onConnect={handleConnect}
-        onDisconnect={handleDisconnect}
-        isLoading={isConnecting}
-        canProceed={canProceed()}
-        onProceed={onComplete}
-      />
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-});

package/src/components/screens/LoadingScreen.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  ActivityIndicator,
-  SafeAreaView,
-} from 'react-native';
-import { COLORS } from '../../constants';
-
-interface LoadingScreenProps {
-  message: string;
-  progress?: number;
-  eta?: string;
-}
-
-export const LoadingScreen: React.FC<LoadingScreenProps> = ({
-  message,
-  progress,
-  eta,
-}) => {
-  // Calculate progress percentage for display
-  const progressPercent = progress ? Math.round(progress * 100) : undefined;
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.content}>
-        <ActivityIndicator size="large" color={COLORS.primary} style={styles.spinner} />
-        
-        <Text style={styles.message}>{message}</Text>
-        
-        {progressPercent !== undefined && (
-          <View style={styles.progressContainer}>
-            <View style={styles.progressBarBackground}>
-              <View 
-                style={[
-                  styles.progressBar,
-                  { width: `${progressPercent}%` }
-                ]} 
-              />
-            </View>
-            
-            <Text style={styles.progressText}>{progressPercent}%</Text>
-          </View>
-        )}
-        
-        {eta && <Text style={styles.etaText}>{eta}</Text>}
-      </View>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  content: {
-    width: '80%',
-    alignItems: 'center',
-    padding: 24,
-  },
-  spinner: {
-    marginBottom: 24,
-  },
-  message: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 24,
-  },
-  progressContainer: {
-    width: '100%',
-    marginBottom: 8,
-  },
-  progressBarBackground: {
-    height: 8,
-    backgroundColor: '#eee',
-    borderRadius: 4,
-    overflow: 'hidden',
-    marginBottom: 8,
-  },
-  progressBar: {
-    height: '100%',
-    backgroundColor: COLORS.primary,
-  },
-  progressText: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'right',
-  },
-  etaText: {
-    fontSize: 14,
-    color: '#666',
-    marginTop: 8,
-  },
-});

package/src/components/screens/PinCreationScreen.tsx

@@ -1,67 +0,0 @@
-import React, { useCallback } from 'react';
-import { View, StyleSheet, SafeAreaView } from 'react-native';
-import { OnboardingHeader } from '../onboarding/OnboardingHeader';
-import { PinInput } from '../onboarding/PinInput';
-import { updateCredentials, getCredentials } from '../../utils/secureStorage';
-
-interface PinCreationScreenProps {
-  onComplete: () => void;
-  onBack: () => void;
-  onClose: () => void;
-  AppName: string;
-}
-
-export const PinCreationScreen: React.FC<PinCreationScreenProps> = ({
-  onComplete,
-  onBack,
-  onClose,
-  AppName,
-}) => {
-  // Handle PIN submission
-  const handlePinSubmit = useCallback(async (pin: string) => {
-    try {
-      // Get current credentials
-      const credentials = await getCredentials();
-      
-      if (!credentials) {
-        throw new Error('No credentials found');
-      }
-      
-      // Update credentials with PIN
-      await updateCredentials({
-        userPin: pin,
-      });
-      
-      // Move to next step
-      onComplete();
-    } catch (error) {
-      console.error('Error saving PIN:', error);
-    }
-  }, [onComplete]);
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <OnboardingHeader
-        title="Create a PIN"
-        subtitle={`Secure your ${AppName} account`}
-        showBackButton
-        onBack={onBack}
-        onClose={onClose}
-      />
-      
-      <PinInput
-        onSubmit={handlePinSubmit}
-        minLength={8}
-        requireSpecialChar
-        requireNumber
-      />
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-});

package/src/constants/index.ts

@@ -1,83 +0,0 @@
-import type { PlatformConfig } from '../types';
-
-export const COLORS = {
-  primary: '#1BA9D4',
-  headerBg: '#F8F9FA',
-  text: {
-    primary: '#000000',
-    secondary: '#666666',
-  },
-  border: '#E5E5E5',
-  success: '#34C759',
-  error: '#FF3B30',
-  instagram: '#E1306C',
-  pinterest: '#E60023',
-  reddit: '#FF4500',
-  youtube: '#FF0000',
-  white: '#FFFFFF',
-  black: '#000000',
-  gray: '#666666',
-  lightGray: '#E5E5E5',
-};
-
-export const PLATFORMS: Record<string, PlatformConfig> = {
-  instagram: {
-    name: 'Instagram',
-    icon: 'instagram',
-    color: COLORS.instagram,
-    description: 'Connect your Instagram account to train your AI model',
-  },
-  pinterest: {
-    name: 'Pinterest',
-    icon: 'pinterest',
-    color: COLORS.pinterest,
-    description: 'Use your Pinterest boards for AI training',
-  },
-  reddit: {
-    name: 'Reddit',
-    icon: 'reddit',
-    color: COLORS.reddit,
-    description: 'Connect Reddit to enhance your AI model',
-  },
-  youtube: {
-    name: 'YouTube',
-    icon: 'youtube',
-    color: COLORS.youtube,
-    description: 'Use YouTube data to improve AI recommendations',
-  },
-};
-
-export const API_ENDPOINTS = {
-  base: 'https://api2.onairos.uk',
-  oauth: {
-    instagram: '/instagram/auth',
-    pinterest: '/pinterest/auth',
-    reddit: '/reddit/auth',
-    youtube: '/youtube/auth',
-  },
-  callback: {
-    instagram: '/instagram/callback',
-    pinterest: '/pinterest/callback',
-    reddit: '/reddit/callback',
-    youtube: '/youtube/callback',
-  },
-};
-
-export const STORAGE_KEYS = {
-  credentials: 'onairos_credentials',
-  connections: 'onairos_connections',
-};
-
-export const PIN_REQUIREMENTS = {
-  minLength: 8,
-  requireUppercase: true,
-  requireLowercase: true,
-  requireNumber: true,
-  requireSpecialChar: true,
-};
-
-export const DEEP_LINK_CONFIG = {
-  scheme: 'onairosanime',
-  host: 'authenticate',
-  redirectUri: 'onairosanime://auth/',
-};