@onairos/react-native 3.0.9 → 3.0.10

package/src/components/OnairosButton.tsx

@@ -1,15 +1,14 @@
-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 
 } from 'react-native';
+import { SvgXml } from 'react-native-svg';
 import { UniversalOnboarding } from './UniversalOnboarding';
 import { Overlay } from './Overlay';
 import { COLORS } from '../constants';
@@ -18,18 +17,31 @@ import { hasCredentials, getCredentials, deleteCredentials as clearCredentials }
 import { onairosApi } from '../api';
 import { Portal } from '../utils/Portal';
 
+// Import the Onairos logo SVG
+const onairosLogoSvg = `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="40" height="40" rx="8" fill="currentColor"/>
+  <path d="M20 10C14.48 10 10 14.48 10 20C10 25.52 14.48 30 20 30C25.52 30 30 25.52 30 20C30 14.48 25.52 10 20 10ZM20 28C15.59 28 12 24.41 12 20C12 15.59 15.59 12 20 12C24.41 12 28 15.59 28 20C28 24.41 24.41 28 20 28Z" fill="white"/>
+  <path d="M20 15C18.9 15 18 15.9 18 17V19C18 20.1 18.9 21 20 21C21.1 21 22 20.1 22 19V17C22 15.9 21.1 15 20 15Z" fill="white"/>
+  <path d="M20 24C19.448 24 19 24.448 19 25C19 25.552 19.448 26 20 26C20.552 26 21 25.552 21 25C21 24.448 20.552 24 20 24Z" fill="white"/>
+</svg>`;
+
+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 +50,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';
+    }
+  };
 
-  const isDarkMode = color === 'black' || (!color && !hasStroke);
+  // 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');
+  };
+
+  // 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 +140,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 +193,17 @@ 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();
+  const logoColor = textColor;
 
   // Render components
   return (
@@ -155,17 +213,26 @@ 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}>
+            <SvgXml 
+              xml={onairosLogoSvg.replace('currentColor', logoColor)} 
+              width={24} 
+              height={24} 
+              style={styles.logo} 
+            />
+            <Text style={[styles.buttonText, { color: textColor }]}>
+              {getButtonText()}
+            </Text>
+          </View>
         )}
       </TouchableOpacity>
 
@@ -178,11 +245,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 +263,13 @@ export const OnairosButton: React.FC<OnairosButtonProps> = ({
             modelKey={storedCredentials.userPin || ''}
             onResolved={handleOverlayResolved}
             appName={AppName}
+            darkMode={darkMode}
           />
         </Portal>
       )}
     </>
   );
-};
+});
 
 const styles = StyleSheet.create({
   button: {
@@ -209,7 +278,20 @@ 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: {
+    marginRight: 8,
   },
   pillButton: {
     borderRadius: 24,
@@ -217,19 +299,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 +311,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;
 }