@onairos/react-native 3.1.18 → 3.2.1

package/src/components/HeadingGroup.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
-import { TEXT_STYLES } from '../theme';
-
-interface HeadingGroupProps {
-  kicker?: string;
-  title?: string;
-  style?: ViewStyle;
-}
-
-const HeadingGroup: React.FC<HeadingGroupProps> = ({
-  kicker = "Welcome to",
-  title = "Onairos",
-  style,
-}) => {
-  return (
-    <View style={[styles.container, style]}>
-      <Text style={styles.kicker}>{kicker}</Text>
-      <Text style={styles.title}>{title}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-  },
-  
-  kicker: {
-    ...TEXT_STYLES.kicker,
-    fontFamily: 'IBM Plex Sans',
-    fontWeight: '700', // Force bold weight
-    marginBottom: 4, // Small gap between kicker and title
-  },
-  
-  title: {
-    ...TEXT_STYLES.welcomeTitle,
-    fontFamily: 'IBM Plex Sans',
-    fontWeight: '700', // Force bold weight
-  },
-});
-
-export { HeadingGroup };
-export default HeadingGroup;

package/src/components/ModalHeader.tsx

@@ -1,125 +0,0 @@
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  Text,
-} from 'react-native';
-import { COLORS, SPACING } from '../theme';
-
-interface ModalHeaderProps {
-  onClose?: () => void;
-  onBack?: () => void;
-  showGrabber?: boolean;
-  showBackButton?: boolean;
-}
-
-const ModalHeader: React.FC<ModalHeaderProps> = ({
-  onClose,
-  onBack,
-  showGrabber = true,
-  showBackButton = false,
-}) => {
-  return (
-    <>
-      {/* Grabber at the very top */}
-      {showGrabber && (
-        <View style={styles.grabberContainer}>
-          <View style={styles.grabber} />
-        </View>
-      )}
-      
-                  {/* Header with close/back button */}
-            <View style={styles.container}>
-              {/* Close or Back Button - Left */}
-              {showBackButton ? (
-                <TouchableOpacity
-                  style={styles.closeButton}
-                  onPress={onBack}
-                  activeOpacity={0.7}
-                  accessibilityLabel="Go back"
-                  accessibilityRole="button"
-                >
-                  <Text style={styles.backText}>←</Text>
-                </TouchableOpacity>
-              ) : (
-                <TouchableOpacity
-                  style={styles.closeButton}
-                  onPress={onClose}
-                  activeOpacity={0.7}
-                  accessibilityLabel="Close"
-                  accessibilityRole="button"
-                >
-                  {/* Using text X as fallback since SVG might not load properly */}
-                  <Text style={styles.closeText}>✕</Text>
-                </TouchableOpacity>
-              )}
-
-              {/* Spacer - Center */}
-              <View style={styles.centerSpacer} />
-
-              {/* Spacer - Right */}
-              <View style={styles.spacer} />
-            </View>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  grabberContainer: {
-    width: '100%',
-    alignItems: 'center',
-    paddingTop: 12,
-    paddingBottom: 4,
-  },
-  
-  grabber: {
-    width: 100, // Made even longer (was 80)
-    height: 6,
-    backgroundColor: '#D0D0D0',
-    borderRadius: 3,
-  },
-  
-  container: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-    height: 44,
-    paddingTop: 0, // Keep X button high
-    paddingLeft: 4, // Move X button even further left
-    marginBottom: SPACING.md,
-  },
-  
-  closeButton: {
-    width: 36, // Slightly larger for better touch
-    height: 36,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 0, // Remove top margin to move X higher
-    // Remove background and border radius
-  },
-  
-  closeText: {
-    fontSize: 20,
-    color: COLORS.grey800,
-    fontWeight: '500',
-  },
-
-  backText: {
-    fontSize: 24,
-    color: COLORS.grey800,
-    fontWeight: '500',
-  },
-  
-  centerSpacer: {
-    flex: 1,
-  },
-  
-  spacer: {
-    width: 44,
-    height: 44,
-  },
-});
-
-export { ModalHeader };
-export default ModalHeader;

package/src/components/ModalSheet.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
-// Temporarily remove safe area hook to fix RCTEventEmitter error
-// import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { COLORS, BORDER_RADIUS, SPACING } from '../theme';
-
-interface ModalSheetProps {
-  children: React.ReactNode;
-  topPadding?: number;
-  onClose?: () => void;
-  showGrabber?: boolean;
-  style?: ViewStyle;
-}
-
-const ModalSheet: React.FC<ModalSheetProps> = ({
-  children,
-  topPadding = SPACING.modalTopPadding,
-  onClose,
-  showGrabber = true,
-  style,
-}) => {
-  // Use fallback values instead of safe area hook to avoid RCTEventEmitter error
-  const insets = { bottom: 20 }; // Fallback safe area
-
-  return (
-    <View 
-      style={[
-        styles.container,
-        { 
-          paddingTop: topPadding,
-          paddingBottom: insets.bottom || SPACING.lg,
-        },
-        style
-      ]}
-    >
-      {children}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: COLORS.surface,
-    borderTopLeftRadius: BORDER_RADIUS.modalTop,
-    borderTopRightRadius: BORDER_RADIUS.modalTop,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    paddingHorizontal: SPACING.modalHorizontal,
-    flex: 1,
-    minHeight: '80%', // Ensure modal takes substantial screen space
-  },
-});
-
-export { ModalSheet };
-export default ModalSheet;

package/src/components/OnairosSignInButton.tsx

@@ -1,132 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { TouchableOpacity, Text, StyleSheet, View, Image } from 'react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import WelcomeScreen from './WelcomeScreen';
-import { triggerHaptic, HapticType } from '../utils/haptics';
-
-export interface OnairosSignInButtonProps {
-  AppName: string;
-  buttonWidth?: number;
-  buttonHeight?: number;
-  color?: string;
-  textColor?: string;
-  onResolved?: (token: string, email?: string) => void;
-  onRejection?: (error: any) => void;
-  autoFocusEmailInput?: boolean;
-}
-
-export const OnairosSignInButton: React.FC<OnairosSignInButtonProps> = ({
-  AppName,
-  buttonWidth = 280,
-  buttonHeight = 44,
-  color = '#D4A536',
-  textColor = '#000',
-  onResolved,
-  onRejection,
-  autoFocusEmailInput = true,
-}) => {
-  const [showWelcomeScreen, setShowWelcomeScreen] = useState(false);
-  const [userEmail, setUserEmail] = useState<string>('');
-
-  const handleWelcomeComplete = useCallback((token: string, email?: string) => {
-    console.log('🔍 OnairosSignInButton: handleWelcomeComplete called with:', { token, email });
-    
-    // Check if we received a JWT token (real authentication) or just a placeholder token
-    const isJWTToken = token && token.includes('.') && token.split('.').length === 3;
-    
-    console.log('🔍 OnairosSignInButton: Is JWT token?', isJWTToken);
-    
-    // Close the welcome screen
-    setShowWelcomeScreen(false);
-    
-    if (onResolved) {
-      // For JWT tokens, use the provided email or get from storage
-      if (isJWTToken) {
-        console.log('🔑 Received JWT token from WelcomeScreen, completing sign-in');
-        AsyncStorage.getItem('user_email').then((storedEmail: string | null) => {
-          const emailToUse = email || storedEmail || userEmail;
-          console.log('🔑 OnairosSignInButton: Returning JWT token with email:', emailToUse);
-          onResolved(token, emailToUse);
-        });
-      } else {
-        // For placeholder tokens, still complete the flow with the provided email
-        console.log('🔑 Received placeholder token from WelcomeScreen, completing sign-in');
-        const emailToUse = email || userEmail;
-        console.log('🔑 OnairosSignInButton: Returning token with email:', emailToUse);
-        onResolved(token, emailToUse);
-      }
-    }
-  }, [onResolved, userEmail]);
-
-  const handleWelcomeCancel = useCallback(() => {
-    setShowWelcomeScreen(false);
-    if (onRejection) {
-      onRejection('User closed welcome screen');
-    }
-  }, [onRejection]);
-
-  return (
-    <View style={styles.container}>
-      <TouchableOpacity
-        style={[
-          styles.button,
-          { width: buttonWidth, height: buttonHeight, backgroundColor: color },
-        ]}
-        onPress={() => {
-          console.log('🔘 OnairosSignInButton pressed, showing WelcomeScreen');
-          triggerHaptic(HapticType.BUTTON_PRESS);
-          setShowWelcomeScreen(true);
-          console.log('🔘 showWelcomeScreen state set to true');
-        }}
-        activeOpacity={0.85}
-      >
-        <View style={styles.contentRow}>
-          <Image
-            source={require('../assets/images/onairos_logo.png')}
-            style={styles.logo}
-            resizeMode="contain"
-            accessibilityLabel="Onairos logo"
-          />
-          <Text style={[styles.buttonText, { color: textColor }]}>Sign in with Onairos</Text>
-        </View>
-      </TouchableOpacity>
-      <WelcomeScreen
-        visible={showWelcomeScreen}
-        onClose={handleWelcomeCancel}
-        onComplete={handleWelcomeComplete}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    borderRadius: 24,
-    justifyContent: 'center',
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 2,
-    marginVertical: 8,
-  },
-  contentRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  logo: {
-    width: 26,
-    height: 26,
-    marginRight: 10,
-  },
-  buttonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  container: {
-    // Add any necessary styles for the container
-  },
-});

package/src/components/PersonaImage.tsx

@@ -1,79 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import {
-  View,
-  Image,
-  Animated,
-  StyleSheet,
-} from 'react-native';
-
-interface PersonaImageProps {
-  level: number; // 1-5 based on connected platforms
-  style?: any;
-}
-
-const PersonaImage: React.FC<PersonaImageProps> = ({
-  level,
-  style,
-}) => {
-  const fadeAnims = useRef([
-    new Animated.Value(1), // persona1
-    new Animated.Value(0), // persona2  
-    new Animated.Value(0), // persona3
-    new Animated.Value(0), // persona4
-    new Animated.Value(0), // persona5
-  ]).current;
-
-  const personaImages = [
-    require('../assets/images/persona1.png'),
-    require('../assets/images/persona2.png'), 
-    require('../assets/images/persona3.png'),
-    require('../assets/images/persona4.png'),
-    require('../assets/images/persona5.png'),
-  ];
-
-  useEffect(() => {
-    // Animate to show the correct persona level
-    fadeAnims.forEach((anim, index) => {
-      Animated.timing(anim, {
-        toValue: index === level - 1 ? 1 : 0,
-        duration: 400,
-        useNativeDriver: true,
-      }).start();
-    });
-  }, [level, fadeAnims]);
-
-  return (
-    <View style={[styles.container, style]}>
-      {personaImages.map((image, index) => (
-        <Animated.Image
-          key={index}
-          source={image}
-          style={[
-            styles.personaImage,
-            {
-              opacity: fadeAnims[index],
-              position: index === 0 ? 'relative' : 'absolute',
-            },
-          ]}
-          resizeMode="contain"
-        />
-      ))}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    width: 200,
-    height: 200,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  
-  personaImage: {
-    width: '100%',
-    height: '100%',
-  },
-});
-
-export default PersonaImage;

package/src/components/PersonaLoadingScreen.tsx

@@ -1,201 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Animated,
-  Easing,
-} from 'react-native';
-import { COLORS, SPACING } from '../theme';
-import PrimaryButton from './PrimaryButton';
-
-interface PersonaLoadingScreenProps {
-  visible: boolean;
-  onComplete: () => void;
-  progress: number; // 0-100
-  status: string;
-}
-
-const PersonaLoadingScreen: React.FC<PersonaLoadingScreenProps> = ({
-  visible,
-  onComplete,
-  progress,
-  status,
-}) => {
-  const [dotsAnimation] = useState(new Animated.Value(0));
-  const [showCompleteButton, setShowCompleteButton] = useState(false);
-
-  // Animate dots
-  useEffect(() => {
-    if (visible && progress < 100) {
-      const animation = Animated.loop(
-        Animated.timing(dotsAnimation, {
-          toValue: 1,
-          duration: 1500,
-          easing: Easing.linear,
-          useNativeDriver: false,
-        })
-      );
-      animation.start();
-      
-      return () => animation.stop();
-    }
-  }, [visible, progress, dotsAnimation]);
-
-  // Show complete button when progress reaches 100
-  useEffect(() => {
-    if (progress >= 100) {
-      setShowCompleteButton(true);
-    }
-  }, [progress]);
-
-  const getDots = () => {
-    // const animatedValue = dotsAnimation._value; // _value is deprecated
-    const animatedValue = Math.random(); // Use random for animation effect
-    if (animatedValue < 0.33) return '.';
-    if (animatedValue < 0.66) return '..';
-    return '...';
-  };
-
-  const getStatusMessage = (progress: number) => {
-    if (progress === 0) return 'Initializing';
-    if (progress < 25) return 'Connecting to your data';
-    if (progress < 50) return 'Training your persona';
-    if (progress < 75) return 'Running test inference';
-    if (progress < 100) return 'Finalizing your profile';
-    return 'Complete!';
-  };
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.content}>
-        {/* Header */}
-        <View style={styles.header}>
-          <Text style={styles.title}>Building your persona</Text>
-          <Text style={styles.subtitle}>
-            {progress < 100 
-              ? 'This will only take a moment. We\'re personalizing your experience.'
-              : 'Your persona is ready!'
-            }
-          </Text>
-        </View>
-
-        {/* Progress Bar */}
-        <View style={styles.progressContainer}>
-          <View style={styles.progressBar}>
-            <View 
-              style={[
-                styles.progressFill, 
-                { width: `${progress}%` }
-              ]} 
-            />
-          </View>
-          <Text style={styles.progressText}>{Math.round(progress)}%</Text>
-          {!showCompleteButton && (
-            <Text style={styles.statusText}>
-              {status || getStatusMessage(progress)}
-              {progress < 100 && (
-                <Animated.Text>
-                  {getDots()}
-                </Animated.Text>
-              )}
-            </Text>
-          )}
-        </View>
-
-        {/* Complete Button */}
-        {showCompleteButton && (
-          <View style={styles.completeContainer}>
-            <PrimaryButton
-              label="Continue"
-              onPress={onComplete}
-            />
-          </View>
-        )}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: COLORS.surface,
-    justifyContent: 'center',
-    paddingHorizontal: 24,
-  },
-  
-  content: {
-    alignItems: 'center',
-  },
-  
-  header: {
-    alignItems: 'center',
-    marginBottom: 48,
-  },
-  
-  title: {
-    fontSize: 24,
-    fontFamily: 'IBM Plex Sans',
-    fontWeight: '700',
-    color: COLORS.grey800,
-    textAlign: 'center',
-    marginBottom: 12,
-  },
-  
-  subtitle: {
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    color: COLORS.grey600,
-    textAlign: 'center',
-    lineHeight: 24,
-  },
-  
-  progressContainer: {
-    width: '100%',
-    alignItems: 'center',
-    marginBottom: 48,
-  },
-  
-  progressBar: {
-    width: '100%',
-    height: 8,
-    backgroundColor: '#F5F5F5',
-    borderRadius: 4,
-    overflow: 'hidden',
-    marginBottom: 16,
-  },
-  
-  progressFill: {
-    height: '100%',
-    backgroundColor: '#1BA9D4',
-    borderRadius: 4,
-  },
-  
-  progressText: {
-    fontSize: 18,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    color: COLORS.grey800,
-    marginBottom: 8,
-  },
-  
-  statusText: {
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    color: COLORS.grey600,
-    textAlign: 'center',
-  },
-  
-  completeContainer: {
-    width: '100%',
-  },
-});
-
-export default PersonaLoadingScreen;