@onairos/react-native 3.0.8 → 3.0.10

package/src/assets/images/onairos_logo.svg

@@ -0,0 +1,6 @@
+<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> 

package/src/components/Onairos.tsx

@@ -1,117 +1,311 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { Platform, View } from 'react-native';
-import { OnairosButton } from './OnairosButton';
-import type { OnairosButtonProps } from '../types';
-import { hasCredentials, getCredentials } from '../utils/secureStorage';
-
-export interface OnairosProps extends Omit<OnairosButtonProps, 'onResolved' | 'onRejection'> {
-  /**
-   * Callback function called when the Onairos flow completes successfully
-   * @param apiUrl The API URL for accessing the data
-   * @param token The authentication token
-   * @param userData The user data returned by the server
-   */
-  onResolved?: (apiUrl: string, token: string, userData: any) => void;
-  
-  /**
-   * Callback function called when the Onairos flow is rejected or fails
-   * @param error Optional error message
-   */
+import React, { forwardRef, useImperativeHandle, useState, useCallback } from 'react';
+import {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  Text,
+  ViewStyle,
+  TextStyle,
+  Platform,
+} from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import { UniversalOnboarding } from './UniversalOnboarding';
+import { Overlay } from './Overlay';
+import { COLORS } from '../constants';
+import { hasCredentials, getCredentials, deleteCredentials } from '../utils/secureStorage';
+import { onairosApi } from '../api';
+import { Portal } from '../utils/Portal';
+import { DataTier } from '../types';
+
+// 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>`;
+
+interface OnairosProps {
+  returnLink?: string;
+  prefillUrl?: string;
+  AppName: string;
+  buttonType?: 'normal' | 'pill';
+  requestData?: {
+    [key: string]: DataTier;
+  };
+  buttonWidth?: number;
+  buttonHeight?: number;
+  hasStroke?: boolean;
+  enabled?: boolean;
+  buttonForm?: 'default' | 'connect';
   onRejection?: (error?: string) => void;
-  
-  /**
-   * Optional test mode flag - simplifies flows for testing
-   */
+  onResolved?: (apiUrl: string, token: string, userData: any) => void;
+  preCheck?: () => Promise<boolean>;
+  color?: string;
+  debug?: boolean;
+  darkMode?: boolean;
+  preferredPlatform?: string;
   testMode?: boolean;
-  
-  /**
-   * Optional style for the container
-   */
-  containerStyle?: any;
 }
 
-/**
- * Main Onairos component - wraps OnairosButton with additional state management and logic
- */
-export const Onairos: React.FC<OnairosProps> = ({
-  AppName,
+export interface OnairosRef {
+  trigger: () => Promise<void>;
+  reset: () => Promise<void>;
+}
+
+export const Onairos = forwardRef<OnairosRef, OnairosProps>(({
   returnLink,
-  requestData,
+  prefillUrl,
+  AppName,
   buttonType = 'normal',
-  buttonForm = 'default',
-  buttonWidth,
+  requestData,
+  buttonWidth = 180,
   buttonHeight,
+  hasStroke = false,
+  enabled = true,
+  buttonForm = 'default',
+  onRejection,
+  onResolved,
+  preCheck,
   color,
-  hasStroke,
+  debug = false,
+  darkMode = false,
   preferredPlatform,
-  onResolved,
-  onRejection,
   testMode = false,
-  containerStyle,
-}) => {
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [hasExistingCredentials, setHasExistingCredentials] = useState(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);
 
-  const initialize = useCallback(async () => {
+  // Expose methods for external control
+  useImperativeHandle(ref, () => ({
+    trigger: async () => {
+      await handlePress();
+    },
+    reset: async () => {
+      await deleteCredentials();
+    }
+  }));
+
+  // Compute button text based on buttonForm
+  const getButtonText = () => {
+    if (buttonForm === 'connect') {
+      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');
+  };
+
+  // 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 - in a real app, this would use a proper algorithm
+    return bgColor === '#ffffff' || bgColor === '#f5f5f580' || bgColor.includes('#f') ? '#000000' : '#FFFFFF';
+  };
+
+  const handlePress = async () => {
+    if (!enabled || isLoading) return;
+    
+    setIsLoading(true);
+    
     try {
-      // Check for existing credentials
-      const credentialsExist = await hasCredentials();
-      setHasExistingCredentials(credentialsExist);
+      if (preCheck) {
+        const shouldProceed = await preCheck();
+        if (!shouldProceed) {
+          onRejection?.('Precheck validation failed');
+          setIsLoading(false);
+          return;
+        }
+      }
+
+      // Check if credentials exist
+      const hasStoredCreds = await hasCredentials();
       
-      if (credentialsExist) {
-        // Load credentials to verify they are valid
+      if (hasStoredCreds) {
+        // If credentials exist, fetch them and verify
         const credentials = await getCredentials();
-        if (!credentials || !credentials.username || !credentials.userPin) {
-          setHasExistingCredentials(false);
+        
+        if (!credentials || !credentials.username) {
+          // Invalid credentials, clear and start fresh
+          await deleteCredentials();
+          setShowOnboarding(true);
+          setIsLoading(false);
+          return;
+        }
+        
+        try {
+          // Validate credentials with server
+          const isValid = await onairosApi.validateCredentials(credentials.username);
+          
+          if (!isValid) {
+            // Clear invalid credentials
+            await deleteCredentials();
+            setShowOnboarding(true);
+            setIsLoading(false);
+            return;
+          }
+          
+          // Store and display overlay with valid credentials
+          setStoredCredentials(credentials);
+          setShowOverlay(true);
+        } catch (validationError) {
+          console.warn('Validation error, proceeding to onboarding:', validationError);
+          setShowOnboarding(true);
         }
+      } else {
+        // If no credentials, show onboarding
+        setShowOnboarding(true);
       }
     } catch (error) {
-      console.error('Error initializing Onairos:', error);
+      console.error('Error during button press flow:', error);
+      // Fall back to onboarding on error
+      setShowOnboarding(true);
+      onRejection?.(error instanceof Error ? error.message : 'Unknown error');
     } finally {
-      setIsInitialized(true);
+      setIsLoading(false);
     }
-  }, []);
+  };
 
-  useEffect(() => {
-    initialize();
-  }, [initialize]);
-
-  const handleResolved = useCallback((apiUrl: string, token: string, userData: any) => {
+  const handleOnboardingComplete = useCallback((apiUrl: string, token: string, data: any) => {
+    setShowOnboarding(false);
     if (onResolved) {
-      onResolved(apiUrl, token, userData);
+      onResolved(apiUrl, token, data);
     }
   }, [onResolved]);
-
-  const handleRejection = useCallback((error?: string) => {
-    if (onRejection) {
-      onRejection(error);
+  
+  const handleOverlayResolved = useCallback((apiUrl: string, token: string, data: any) => {
+    setShowOverlay(false);
+    if (onResolved) {
+      onResolved(apiUrl, token, data);
     }
-  }, [onRejection]);
+  }, [onResolved]);
 
-  if (!isInitialized) {
-    // Could render a loading state here if needed
-    return null;
-  }
+  // Apply custom styling based on props
+  const buttonStyle: ViewStyle[] = [
+    styles.button,
+    {
+      width: buttonWidth,
+      height: buttonHeight || 48,
+      backgroundColor: getBackgroundColor(),
+      borderWidth: hasStroke ? 1 : 0,
+      borderColor: darkMode ? '#555555' : '#000000',
+      borderRadius: buttonType === 'pill' ? 24 : 8,
+    },
+  ];
+
+  const textStyle: TextStyle = {
+    ...styles.buttonText,
+    color: getTextColor(),
+    opacity: enabled ? 1 : 0.7,
+  };
+
+  const logoColor = getTextColor();
 
   return (
-    <View style={containerStyle}>
-      <OnairosButton
-        AppName={AppName}
-        returnLink={returnLink}
-        requestData={requestData}
-        buttonType={buttonType}
-        buttonForm={buttonForm}
-        buttonWidth={buttonWidth}
-        buttonHeight={buttonHeight}
-        color={color}
-        hasStroke={hasStroke}
-        enabled={true}
-        preferredPlatform={preferredPlatform}
-        onResolved={handleResolved}
-        onRejection={handleRejection}
-        preCheck={async () => true}
-        testMode={testMode}
-      />
-    </View>
+    <>
+      <TouchableOpacity
+        style={buttonStyle}
+        onPress={handlePress}
+        disabled={!enabled || isLoading}
+        accessibilityLabel="Sign in with Onairos"
+        onPressIn={() => setIsPressed(true)}
+        onPressOut={() => setIsPressed(false)}
+      >
+        <View style={styles.buttonContent}>
+          <SvgXml 
+            xml={onairosLogoSvg.replace('currentColor', logoColor)} 
+            width={24} 
+            height={24} 
+            style={styles.logo} 
+          />
+          <Text style={textStyle}>{getButtonText()}</Text>
+        </View>
+      </TouchableOpacity>
+
+      {/* Overlay and Onboarding components rendered outside the button */}
+      {showOnboarding && (
+        <UniversalOnboarding
+          visible={showOnboarding}
+          onClose={() => {
+            setShowOnboarding(false);
+            onRejection?.('User closed onboarding');
+          }}
+          AppName={AppName}
+          requestData={requestData as any}
+          returnLink={returnLink || ''}
+          onComplete={handleOnboardingComplete}
+          debug={debug}
+          test={testMode}
+          preferredPlatform={preferredPlatform}
+        />
+      )}
+      
+      {/* Overlay rendered through Portal to ensure it appears at root level */}
+      {showOverlay && storedCredentials && (
+        <Portal>
+          <Overlay
+            data={requestData || {}}
+            username={storedCredentials.username}
+            modelKey={storedCredentials.userPin || ''}
+            onResolved={handleOverlayResolved}
+            appName={AppName}
+            darkMode={darkMode}
+          />
+        </Portal>
+      )}
+    </>
   );
-}; 
+});
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  buttonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    marginRight: 8,
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+}); 

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,
-  },
 });