@onairos/react-native 3.1.18 → 3.2.1

package/src/components/PlatformToggle.tsx

@@ -1,226 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  Image,
-  StyleSheet,
-  Switch,
-  Platform,
-} from 'react-native';
-import { COLORS, SPACING } from '../theme';
-
-interface PlatformToggleProps {
-  platform: {
-    id: string;
-    name: string;
-    icon: any; // require() image
-    description: string;
-  };
-  isEnabled: boolean;
-  onToggle: (platformId: string, enabled: boolean) => void;
-  compact?: boolean;
-  isLast?: boolean;
-  fullWidth?: boolean;
-  customIconSize?: number;
-  onLongPress?: () => void;
-  onPressOut?: () => void;
-}
-
-const PlatformToggle: React.FC<PlatformToggleProps> = ({
-  platform,
-  isEnabled,
-  onToggle,
-  compact = false,
-  isLast = false,
-  fullWidth = false,
-  customIconSize,
-  onLongPress,
-  onPressOut,
-}) => {
-  const handleToggle = () => {
-    onToggle(platform.id, !isEnabled);
-  };
-
-  const containerStyle = fullWidth ? styles.fullWidthContainer : 
-                        compact ? styles.compactContainer : styles.container;
-
-  return (
-    <TouchableOpacity
-      style={[
-        containerStyle,
-        !isLast && compact && styles.borderBottom,
-      ]}
-      onLongPress={onLongPress}
-      onPressOut={onPressOut}
-      activeOpacity={onLongPress ? 0.7 : 1.0}
-      disabled={!onLongPress}
-    >
-      {/* Top row: Icon + Name + Toggle */}
-      <View style={styles.topRow}>
-        <View style={styles.leftContent}>
-          <Image 
-            source={platform.icon} 
-            style={customIconSize ? 
-              { 
-                width: customIconSize, 
-                height: customIconSize, 
-                marginRight: 12 - (customIconSize - 28) // Reduce margin more to align text properly
-              } :
-              (fullWidth ? styles.compactIcon : (compact ? styles.compactIcon : styles.icon))
-            } 
-            resizeMode="contain" 
-          />
-          <View style={styles.textContent}>
-            <Text style={fullWidth ? styles.compactPlatformName : (compact ? styles.compactPlatformName : styles.platformName)}>{platform.name}</Text>
-          </View>
-        </View>
-        
-        <Switch
-          value={isEnabled}
-          onValueChange={handleToggle}
-          trackColor={{ 
-            false: '#E5E5E5', 
-            true: '#4CD964' // Green when enabled
-          }}
-          thumbColor={Platform.OS === 'ios' ? undefined : (isEnabled ? '#FFFFFF' : '#FFFFFF')}
-          ios_backgroundColor="#E5E5E5"
-          style={compact ? styles.compactSwitch : undefined}
-        />
-      </View>
-      
-      {/* Bottom row: Description in rounded box */}
-      {fullWidth && (
-        <View style={styles.descriptionBox}>
-          <Text style={styles.fullWidthDescription}>{platform.description}</Text>
-        </View>
-      )}
-      
-      {/* Show description inline for non-fullWidth modes */}
-      {!fullWidth && (
-        <Text style={compact ? styles.compactDescription : styles.description}>{platform.description}</Text>
-      )}
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    backgroundColor: COLORS.surface,
-    borderRadius: 12,
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: '#E5E5E5',
-  },
-  
-  compactContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    backgroundColor: COLORS.surface,
-  },
-  
-  fullWidthContainer: {
-    flexDirection: 'column', // Changed to column to stack rows
-    paddingVertical: 8,   // Reduced from 16 to bring platforms closer
-    paddingHorizontal: 2,  // Much closer to edges
-    backgroundColor: COLORS.surface,
-    marginBottom: 4,      // Reduced from 12 to bring platforms closer
-    marginHorizontal: 0, // Ensure it spans full width
-  },
-  
-  topRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 4, // Reduced space between icon row and description box
-  },
-  
-  descriptionBox: {
-    backgroundColor: '#F5F5F5',
-    borderRadius: 8,
-    paddingVertical: 8,   // Reduced from 10 to make description box smaller
-    paddingHorizontal: 4,  // Much closer to edges
-    marginTop: 2,         // Reduced from 4 to bring closer to icon row
-  },
-  
-  borderBottom: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E5E5',
-  },
-  
-  leftContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-  },
-  
-  icon: {
-    width: 32,
-    height: 32,
-    marginRight: 12,
-  },
-  
-  compactIcon: {
-    width: 28,
-    height: 28,
-    marginRight: 12,
-  },
-  
-  textContent: {
-    flex: 1,
-  },
-  
-  platformName: {
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    color: COLORS.grey800,
-    marginBottom: 2,
-  },
-  
-  compactPlatformName: {
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    color: COLORS.grey800,
-    marginBottom: 2,
-  },
-  
-  description: {
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    color: COLORS.grey600,
-    lineHeight: 20,
-  },
-  
-  compactDescription: {
-    fontSize: 12,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    color: COLORS.grey600,
-    lineHeight: 16,
-  },
-  
-  fullWidthDescription: {
-    fontSize: 13,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    color: COLORS.grey600,
-    lineHeight: 18,
-  },
-  
-  compactSwitch: {
-    transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }],
-  },
-});
-
-export default PlatformToggle;

package/src/components/PrimaryButton.tsx

@@ -1,214 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  ViewStyle,
-  TextStyle,
-  ActivityIndicator,
-} from 'react-native';
-import { Svg, Defs, RadialGradient, Stop, Rect } from 'react-native-svg';
-import LinearGradient from 'react-native-linear-gradient';
-import { COLORS } from '../theme';
-
-interface IconCircleProps {
-  size?: number;
-  children?: React.ReactNode;
-}
-
-const IconCircle: React.FC<IconCircleProps> = ({ 
-  size = 40, 
-  children 
-}) => {
-  return (
-    <View style={[styles.iconCircle, { width: size, height: size, borderRadius: size / 2 }]}>
-      {/* IconCircle has its own background - the only child that should */}
-      <LinearGradient
-        colors={[COLORS.iconCircleGradientStart, COLORS.iconCircleGradientEnd]}
-        style={[StyleSheet.absoluteFill, { borderRadius: size / 2 }]}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 0, y: 1 }}
-      />
-      
-      {/* Content */}
-      <View style={styles.iconContent}>
-        {children || (
-          <Text style={styles.arrowText}>→</Text>
-        )}
-      </View>
-    </View>
-  );
-};
-
-interface PrimaryButtonProps {
-  label?: string;
-  onPress: () => void;
-  iconRight?: React.ReactNode;
-  loading?: boolean;
-  disabled?: boolean;
-  testID?: string;
-  style?: ViewStyle;
-  textStyle?: TextStyle;
-}
-
-const PrimaryButton: React.FC<PrimaryButtonProps> = ({
-  label = "Get Started",
-  onPress,
-  iconRight,
-  loading = false,
-  disabled = false,
-  testID,
-  style,
-  textStyle,
-}) => {
-  const [pressed, setPressed] = useState(false);
-
-  const handlePressIn = () => setPressed(true);
-  const handlePressOut = () => setPressed(false);
-
-  return (
-    <TouchableOpacity
-      style={[
-        styles.outerPill,
-        !disabled && styles.outerShadow,
-        disabled && styles.disabled,
-        style
-      ]}
-      onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      disabled={disabled || loading}
-      activeOpacity={1}
-      testID={testID}
-      accessibilityLabel={label}
-      accessibilityRole="button"
-    >
-      {/* ONLY ONE gradient - no overlays */}
-      <LinearGradient
-        colors={[COLORS.btnGradStart, COLORS.btnGradEnd]}
-        style={styles.baseGradient}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 0, y: 1 }}
-      />
-
-      {/* Simple pressed state */}
-      {pressed && (
-        <View style={styles.pressedOverlay} />
-      )}
-
-      {/* Centered text on top */}
-      <View style={styles.textContainer}>
-        {loading ? (
-          <ActivityIndicator color={COLORS.btnLabel} size="small" />
-        ) : (
-          <Text style={[styles.label, textStyle]}>{label}</Text>
-        )}
-      </View>
-
-      {/* Icon in fixed position on right */}
-      <View style={styles.iconPosition}>
-        {!loading && (iconRight || <IconCircle />)}
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  // Outer pill container - owns all backgrounds, border, shadow
-  outerPill: {
-    height: 48,
-    borderRadius: 100,
-    borderWidth: 1,
-    borderColor: COLORS.btnBorder, // ≈20% black
-    overflow: 'hidden',
-    width: '100%',
-    position: 'relative',
-  },
-  
-  outerShadow: {
-    // Outer shadow: 20px 30px 40px rgba(0,0,0,0.10)
-    shadowColor: '#000000',
-    shadowOffset: { width: 20, height: 30 },
-    shadowOpacity: 0.10,
-    shadowRadius: 40,
-    elevation: 8,
-  },
-  
-  disabled: {
-    opacity: 0.65,
-    shadowOpacity: 0,
-    elevation: 0,
-  },
-  
-  // Single base gradient - fills entire button
-  baseGradient: {
-    ...StyleSheet.absoluteFillObject,
-    borderRadius: 100,
-  },
-  
-  pressedOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0,0,0,0.1)',
-    borderRadius: 100,
-  },
-  
-  // Absolutely centered text container
-  textContainer: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent',
-  },
-  
-  // Fixed icon position on right
-  iconPosition: {
-    position: 'absolute',
-    right: 4,
-    top: 4,
-    bottom: 4,
-    width: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent',
-  },
-  
-  label: {
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    fontSize: 16,
-    color: COLORS.btnLabel,
-    textAlign: 'center',
-    backgroundColor: 'transparent', // Must be transparent
-  },
-  
-  // IconCircle styles - ONLY child with background
-  iconCircle: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: 'rgba(0,0,0,0.25)',
-  },
-  
-  iconContent: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent',
-  },
-  
-  arrowText: {
-    fontSize: 20,
-    color: COLORS.btnLabel,
-    fontWeight: '600',
-    opacity: 0.95,
-    backgroundColor: 'transparent',
-  },
-});
-
-export { IconCircle };
-export { PrimaryButton };
-export default PrimaryButton;

package/src/components/SignInMatchAnimation.tsx

@@ -1,225 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Modal,
-  ActivityIndicator,
-  Animated,
-  Dimensions,
-  TouchableOpacity
-} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-
-interface SignInMatchAnimationProps {
-  email: string;
-  visible: boolean;
-  onComplete: () => void;
-}
-
-const { width, height } = Dimensions.get('window');
-
-const SignInMatchAnimation: React.FC<SignInMatchAnimationProps> = ({ 
-  email, 
-  visible, 
-  onComplete 
-}) => {
-  const [step, setStep] = useState<'searching' | 'found' | 'complete'>('searching');
-  const [matchCount, setMatchCount] = useState(0);
-  const fadeAnim = useState(new Animated.Value(0))[0];
-  const scaleAnim = useState(new Animated.Value(0.9))[0];
-
-  useEffect(() => {
-    if (visible) {
-      // Start with fade in animation
-      Animated.parallel([
-        Animated.timing(fadeAnim, {
-          toValue: 1,
-          duration: 600,
-          useNativeDriver: true
-        }),
-        Animated.timing(scaleAnim, {
-          toValue: 1,
-          duration: 600,
-          useNativeDriver: true
-        })
-      ]).start();
-
-      // Simulate search process
-      setTimeout(() => {
-        // Generate random match count (3-8)
-        const randomMatchCount = Math.floor(Math.random() * 6) + 3;
-        setMatchCount(randomMatchCount);
-        setStep('found');
-        
-        // Auto-proceed to complete after 3 seconds
-        setTimeout(() => {
-          setStep('complete');
-        }, 3000);
-      }, 2500);
-    }
-  }, [visible, fadeAnim, scaleAnim]);
-
-  const handleContinue = () => {
-    // Fade out animation before calling onComplete
-    Animated.parallel([
-      Animated.timing(fadeAnim, {
-        toValue: 0,
-        duration: 400,
-        useNativeDriver: true
-      }),
-      Animated.timing(scaleAnim, {
-        toValue: 0.9,
-        duration: 400,
-        useNativeDriver: true
-      })
-    ]).start(() => {
-      onComplete();
-    });
-  };
-
-  if (!visible) return null;
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="none"
-    >
-      <View style={styles.container}>
-        <Animated.View 
-          style={[
-            styles.content,
-            { 
-              opacity: fadeAnim,
-              transform: [{ scale: scaleAnim }]
-            }
-          ]}
-        >
-          {step === 'searching' && (
-            <>
-              <Text style={styles.title}>Finding Your Matches</Text>
-              <ActivityIndicator size="large" color="#E9C46A" style={styles.loader} />
-              <Text style={styles.message}>
-                Searching for potential connections based on your profile...
-              </Text>
-            </>
-          )}
-
-          {step === 'found' && (
-            <>
-              <Text style={styles.title}>Matches Found!</Text>
-              <View style={styles.matchCircle}>
-                <Text style={styles.matchCount}>{matchCount}</Text>
-              </View>
-              <Text style={styles.message}>
-                We've found {matchCount} potential connections for you!
-              </Text>
-              <Text style={styles.subMessage}>
-                Complete your profile to see who they are.
-              </Text>
-            </>
-          )}
-
-          {step === 'complete' && (
-            <>
-              <Text style={styles.title}>Welcome to Enoch!</Text>
-              <Text style={styles.message}>
-                We'll send match notifications to {email.split('@')[0]}@...
-              </Text>
-              <TouchableOpacity
-                style={styles.button}
-                onPress={handleContinue}
-              >
-                <LinearGradient
-                  colors={['#f5e7c1', '#E9C46A', '#DDB957']}
-                  start={{x: 0, y: 0}}
-                  end={{x: 1, y: 0}}
-                  style={styles.gradientButton}
-                >
-                  <Text style={styles.buttonText}>Continue</Text>
-                </LinearGradient>
-              </TouchableOpacity>
-            </>
-          )}
-        </Animated.View>
-      </View>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.7)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  content: {
-    width: width * 0.85,
-    backgroundColor: '#FFFFFF',
-    borderRadius: 20,
-    padding: 24,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 10,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  loader: {
-    marginVertical: 24,
-  },
-  message: {
-    fontSize: 18,
-    color: '#555',
-    textAlign: 'center',
-    marginBottom: 16,
-    lineHeight: 24,
-  },
-  subMessage: {
-    fontSize: 16,
-    color: '#777',
-    textAlign: 'center',
-    marginTop: 8,
-  },
-  matchCircle: {
-    width: 100,
-    height: 100,
-    borderRadius: 50,
-    backgroundColor: '#E9C46A',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginVertical: 20,
-  },
-  matchCount: {
-    fontSize: 40,
-    fontWeight: 'bold',
-    color: '#FFFFFF',
-  },
-  button: {
-    width: '100%',
-    marginTop: 24,
-    borderRadius: 8,
-    overflow: 'hidden',
-  },
-  gradientButton: {
-    paddingVertical: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  buttonText: {
-    color: '#333',
-    fontSize: 16,
-    fontWeight: '600',
-  }
-});
-
-export default SignInMatchAnimation;