@onairos/react-native 3.0.9 → 3.0.11

package/src/components/OnairosButton.tsx

@@ -1,14 +1,13 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
 import { 
   TouchableOpacity, 
   Text, 
   StyleSheet, 
   View, 
   ViewStyle, 
-  TextStyle, 
-  Image,
+  TextStyle,
   ActivityIndicator,
-  Alert 
+  Image,
 } from 'react-native';
 import { UniversalOnboarding } from './UniversalOnboarding';
 import { Overlay } from './Overlay';
@@ -18,18 +17,23 @@ import { hasCredentials, getCredentials, deleteCredentials as clearCredentials }
 import { onairosApi } from '../api';
 import { Portal } from '../utils/Portal';
 
+export interface OnairosButtonRef {
+  trigger: () => Promise<void>;
+  reset: () => Promise<void>;
+}
+
 /**
  * OnairosButton Component - A sign-in button similar to Google/Apple sign-in
  */
-export const OnairosButton: React.FC<OnairosButtonProps> = ({
+export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
   returnLink,
   prefillUrl,
   AppName,
   buttonType = 'normal',
   requestData,
-  buttonWidth = 240,
+  buttonWidth = 180,
   buttonHeight = 48,
-  hasStroke = true,
+  hasStroke = false,
   enabled = true,
   buttonForm = 'default',
   onRejection,
@@ -38,15 +42,64 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
   color,
   swerv = false,
   debug = false,
+  darkMode = false,
   preferredPlatform,
   testMode = false,
-}) => {
+}, ref) => {
   const [showOnboarding, setShowOnboarding] = useState(false);
   const [showOverlay, setShowOverlay] = useState(false);
   const [storedCredentials, setStoredCredentials] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+
+  // Expose methods via ref
+  useImperativeHandle(ref, () => ({
+    trigger: async () => {
+      await handlePress();
+    },
+    reset: async () => {
+      await clearCredentials();
+    }
+  }));
+
+  // Compute button text based on buttonForm
+  const getButtonText = () => {
+    if (buttonForm === 'connect' || buttonForm === 'signup') {
+      return 'Connect with Onairos';
+    } else {
+      return 'Sign in with Onairos';
+    }
+  };
+
+  // Calculate background color based on props and state
+  const getBackgroundColor = (): string => {
+    if (!enabled) {
+      return darkMode ? '#3A3A3A' : '#e0e0e0';
+    }
+    
+    if (isPressed) {
+      return color ? 
+        (typeof color === 'string' ? `${color}80` : color) : 
+        (darkMode ? '#32323280' : '#f5f5f580');
+    }
+    
+    return color || (darkMode ? '#2A2A2A' : '#ffffff');
+  };
 
-  const isDarkMode = color === 'black' || (!color && !hasStroke);
+  // Calculate text color based on background luminance
+  const getTextColor = (): string => {
+    if (!enabled) {
+      return darkMode ? '#777777' : '#AAAAAA';
+    }
+    
+    if (darkMode) {
+      return '#FFFFFF';
+    }
+    
+    const bgColor = getBackgroundColor();
+    // Simple luminance check
+    return bgColor === '#ffffff' || bgColor === '#f5f5f580' || bgColor.includes('#f') ? '#000000' : '#FFFFFF';
+  };
   
   const handlePress = async () => {
     if (!enabled || isLoading) return;
@@ -79,7 +132,7 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
         }
         
         try {
-          // Validate credentials with server - catch errors here to prevent crashing
+          // Validate credentials with server
           const isValid = await onairosApi.validateCredentials(credentials.username);
           
           if (!isValid) {
@@ -132,20 +185,16 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
     hasStroke && styles.strokedButton,
     { 
       width: buttonWidth,
-      height: buttonHeight
+      height: buttonHeight,
+      backgroundColor: getBackgroundColor(),
+      borderColor: darkMode ? '#555555' : '#000000',
     },
-    color ? { backgroundColor: color } : null,
-    isDarkMode ? styles.darkButton : styles.lightButton,
     swerv && styles.swervButton,
     !enabled && styles.disabledButton
   ].filter(Boolean) as ViewStyle[];
 
-  // Calculate text styles based on props
-  const textStyle: TextStyle[] = [
-    styles.buttonText,
-    isDarkMode ? styles.lightText : styles.darkText,
-    !enabled && styles.disabledText
-  ].filter(Boolean) as TextStyle[];
+  // Calculate text color
+  const textColor = getTextColor();
 
   // Render components
   return (
@@ -155,17 +204,25 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
         onPress={handlePress}
         disabled={!enabled || isLoading}
         accessibilityLabel={`Sign in with Onairos`}
+        onPressIn={() => setIsPressed(true)}
+        onPressOut={() => setIsPressed(false)}
       >
         {isLoading ? (
           <ActivityIndicator 
             size="small" 
-            color={isDarkMode ? '#fff' : '#000'} 
+            color={textColor} 
           />
         ) : (
-          <>
-            {/* Optional Onairos logo could be added here */}
-            <Text style={textStyle}>Sign in with Onairos</Text>
-          </>
+          <View style={styles.buttonContent}>
+            <Image 
+              source={require('../assets/images/onairos_logo.png')} 
+              style={styles.logo} 
+              resizeMode="contain" 
+            />
+            <Text style={[styles.buttonText, { color: textColor }]}>
+              {getButtonText()}
+            </Text>
+          </View>
         )}
       </TouchableOpacity>
 
@@ -178,11 +235,12 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
             onRejection?.('User closed onboarding');
           }}
           AppName={AppName}
-          requestData={requestData}
-          returnLink={returnLink}
+          requestData={requestData as any}
+          returnLink={returnLink || ''}
           onComplete={handleOnboardingComplete}
           debug={debug}
           test={testMode}
+          preferredPlatform={preferredPlatform}
         />
       )}
       
@@ -195,12 +253,13 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
             modelKey={storedCredentials.userPin || ''}
             onResolved={handleOverlayResolved}
             appName={AppName}
+            darkMode={darkMode}
           />
         </Portal>
       )}
     </>
   );
-};
+});
 
 const styles = StyleSheet.create({
   button: {
@@ -209,7 +268,22 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingVertical: 12,
     paddingHorizontal: 16,
-    borderRadius: 4,
+    borderRadius: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  buttonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    width: 24,
+    height: 24,
+    marginRight: 8,
   },
   pillButton: {
     borderRadius: 24,
@@ -217,19 +291,10 @@ const styles = StyleSheet.create({
   strokedButton: {
     backgroundColor: 'transparent',
     borderWidth: 1,
-    borderColor: '#000',
   },
   swervButton: {
     transform: [{ rotate: '-2deg' }],
   },
-  darkButton: {
-    backgroundColor: '#000',
-    borderColor: '#000',
-  },
-  lightButton: {
-    backgroundColor: '#fff',
-    borderColor: '#000',
-  },
   disabledButton: {
     opacity: 0.6,
   },
@@ -238,13 +303,4 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     textAlign: 'center',
   },
-  lightText: {
-    color: '#fff',
-  },
-  darkText: {
-    color: '#000',
-  },
-  disabledText: {
-    opacity: 0.7,
-  },
 }); 

package/src/components/UniversalOnboarding.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   View,
   Text,
@@ -7,8 +7,11 @@ import {
   ActivityIndicator,
   Dimensions,
   Platform,
+  Modal,
+  Animated,
+  SafeAreaView,
+  TouchableWithoutFeedback,
 } 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';
@@ -17,7 +20,7 @@ import { useConnections } from '../hooks/useConnections';
 import { COLORS } from '../constants';
 import type { UniversalOnboardingProps, ConnectionStatus } from '../types';
 
-const { height } = Dimensions.get('window');
+const { height, width } = Dimensions.get('window');
 
 export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   visible,
@@ -29,8 +32,8 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   embedd = false,
   debug = false,
   test = false,
+  preferredPlatform,
 }) => {
-  const bottomSheetRef = useRef<BottomSheet>(null);
   const [step, setStep] = useState<'connect' | 'pin' | 'training'>('connect');
   const [connections, setConnections] = useState<ConnectionStatus>({});
   const [pin, setPin] = useState<string>('');
@@ -39,6 +42,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     progress: number;
     eta: string;
   }>({ progress: 0, eta: '' });
+  const [slideAnim] = useState(new Animated.Value(height));
 
   const {
     connectPlatform,
@@ -47,12 +51,15 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     isConnecting,
   } = useConnections();
 
-  const snapPoints = useMemo(() => ['90%'], []);
-
   useEffect(() => {
     if (visible) {
-      bottomSheetRef.current?.expand();
       loadInitialStatus();
+      // Animate in
+      Animated.spring(slideAnim, {
+        toValue: 0,
+        useNativeDriver: true,
+        bounciness: 0,
+      }).start();
       
       // Debug mode for Expo Go
       if (debug || Platform.OS === 'web') {
@@ -65,10 +72,36 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
           });
         }
       }
+      
+      // If there's a preferred platform, pre-connect
+      if (preferredPlatform && debug) {
+        setConnections(prev => ({
+          ...prev,
+          [preferredPlatform]: { userName: `${preferredPlatform}_user`, connected: true }
+        }));
+      }
     } else {
-      bottomSheetRef.current?.close();
+      // Animate out
+      Animated.timing(slideAnim, {
+        toValue: height,
+        duration: 250,
+        useNativeDriver: true,
+      }).start(() => {
+        // Reset state if needed
+      });
     }
-  }, [visible]);
+  }, [visible, preferredPlatform]);
+
+  const handleClose = () => {
+    // Animate out and then call onClose
+    Animated.timing(slideAnim, {
+      toValue: height,
+      duration: 250,
+      useNativeDriver: true,
+    }).start(() => {
+      onClose();
+    });
+  };
 
   const loadInitialStatus = useCallback(async () => {
     const status = await getConnectionStatus();
@@ -111,7 +144,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     }, 1000);
   }, [connections, onComplete, selectedTier, requestData]);
 
-  const canProceedToPin = useMemo(() => {
+  const canProceedToPin = useCallback(() => {
     const connectedPlatforms = Object.values(connections).filter(Boolean).length;
     return connectedPlatforms >= 2;
   }, [connections]);
@@ -119,8 +152,8 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   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}>
+      <Text style={styles.headerTitle}>Connect with {AppName}</Text>
+      <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
         <Icon name="close" size={24} color="#000" />
       </TouchableOpacity>
     </View>
@@ -134,7 +167,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
             connections={connections}
             onToggle={handlePlatformToggle}
             isLoading={isConnecting}
-            canProceed={canProceedToPin}
+            canProceed={canProceedToPin()}
             onProceed={() => setStep('pin')}
           />
         );
@@ -151,7 +184,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         return (
           <TrainingModal
             visible={step === 'training'}
-            onClose={onClose}
+            onClose={handleClose}
             onComplete={() => {
               onComplete('https://api2.onairos.uk', 'dummy-token', {
                 pin,
@@ -164,40 +197,84 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
             username="demo_user"
             progress={training.progress}
             eta={training.eta}
-            onCancel={onClose}
+            onCancel={handleClose}
           />
         );
     }
   };
 
+  if (!visible) return null;
+
   return (
-    <BottomSheet
-      ref={bottomSheetRef}
-      snapPoints={snapPoints}
-      enablePanDownToClose
-      onClose={onClose}
-      index={visible ? 0 : -1}
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={handleClose}
     >
-      <View style={styles.container}>
-        {renderHeader()}
-        {renderContent()}
-      </View>
-    </BottomSheet>
+      <TouchableWithoutFeedback onPress={handleClose}>
+        <View style={styles.modalOverlay}>
+          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
+            <Animated.View 
+              style={[
+                styles.bottomSheet,
+                {
+                  transform: [{ translateY: slideAnim }],
+                }
+              ]}
+            >
+              <SafeAreaView style={styles.container}>
+                <View style={styles.handleContainer}>
+                  <View style={styles.handle} />
+                </View>
+                {renderHeader()}
+                {renderContent()}
+              </SafeAreaView>
+            </Animated.View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
   );
 };
 
 const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  bottomSheet: {
+    backgroundColor: '#fff',
+    width: width,
+    height: height * 0.9,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    overflow: 'hidden',
+  },
   container: {
     flex: 1,
     backgroundColor: '#fff',
   },
+  handleContainer: {
+    width: '100%',
+    alignItems: 'center',
+    paddingTop: 12,
+    paddingBottom: 8,
+  },
+  handle: {
+    width: 40,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: '#E0E0E0',
+  },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
     padding: 16,
     backgroundColor: COLORS.headerBg,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
   },
   headerTitle: {
     flex: 1,

package/src/types.ts

@@ -44,13 +44,14 @@ export interface OnairosButtonProps {
   buttonHeight?: number;
   hasStroke?: boolean;
   enabled?: boolean;
-  buttonForm?: 'default' | 'login' | 'signup';
+  buttonForm?: 'default' | 'login' | 'signup' | 'connect';
   onRejection?: (error?: string) => void;
   onResolved?: (apiUrl: string, token: string, userData: any) => void;
   preCheck?: () => Promise<boolean>;
   color?: string;
   swerv?: boolean;
   debug?: boolean;
+  darkMode?: boolean;
   preferredPlatform?: string;
   testMode?: boolean;
 }