@onairos/react-native 3.4.1 → 3.5.4

package/src/components/PinInput.tsx

@@ -1,343 +0,0 @@
-import React, { useState, useCallback, useRef } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  Keyboard,
-  Dimensions,
-  Modal,
-  TouchableWithoutFeedback,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS } from '../constants';
-import type { PinInputProps } from '../types';
-
-const { width } = Dimensions.get('window');
-
-export const PinInput: React.FC<PinInputProps> = ({
-  onSubmit,
-  minLength = 8,
-  requireSpecialChar = true,
-  requireNumber = true,
-  onBack,
-}) => {
-  const [pin, setPin] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [showPin, setShowPin] = useState(false);
-  const [showTooltip, setShowTooltip] = useState(false);
-
-  const validatePin = useCallback((value: string) => {
-    if (value.length < minLength) {
-      return `PIN must be at least ${minLength} characters`;
-    }
-    if (requireSpecialChar && !/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
-      return 'PIN must include a special character';
-    }
-    if (requireNumber && !/\d/.test(value)) {
-      return 'PIN must include a number';
-    }
-    return null;
-  }, [minLength, requireSpecialChar, requireNumber]);
-
-  const handleSubmit = useCallback(() => {
-    const validationError = validatePin(pin);
-    if (validationError) {
-      setError(validationError);
-      return;
-    }
-    onSubmit(pin);
-  }, [pin, validatePin, onSubmit]);
-
-  const handlePinChange = useCallback((value: string) => {
-    setPin(value);
-    setError(null);
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        {onBack && (
-          <TouchableOpacity style={styles.backButton} onPress={onBack}>
-                            <Icon name="arrow-back" size={24} color={COLORS.text.primary} />
-          </TouchableOpacity>
-        )}
-        <Text style={styles.title}>Create your PIN</Text>
-        <TouchableOpacity 
-          style={styles.helpButton} 
-          onPress={() => setShowTooltip(true)}
-        >
-          <Icon name="help" size={24} color={COLORS.text.primary} />
-        </TouchableOpacity>
-      </View>
-      
-      <Text style={styles.subtitle}>
-        This PIN will be used to secure your account
-      </Text>
-
-      <View style={styles.inputContainer}>
-        <TextInput
-          style={styles.input}
-          value={pin}
-          onChangeText={handlePinChange}
-          secureTextEntry={!showPin}
-          placeholder="Enter PIN"
-          keyboardType="default"
-          maxLength={20}
-          autoCapitalize="none"
-          autoCorrect={false}
-        />
-        <TouchableOpacity
-          style={styles.visibilityButton}
-          onPress={() => setShowPin(!showPin)}
-        >
-          <Icon
-            name={showPin ? 'visibility-off' : 'visibility'}
-            size={24}
-            color={COLORS.text.secondary}
-          />
-        </TouchableOpacity>
-      </View>
-
-      {error && <Text style={styles.error}>{error}</Text>}
-
-      <View style={styles.requirements}>
-        <Text style={styles.requirementTitle}>PIN Requirements:</Text>
-        <Text style={[styles.requirement, pin.length >= minLength && styles.requirementMet]}>
-          • At least {minLength} characters
-        </Text>
-        {requireSpecialChar && (
-          <Text
-            style={[
-              styles.requirement,
-              /[!@#$%^&*(),.?":{}|<>]/.test(pin) && styles.requirementMet,
-            ]}
-          >
-            • Include a special character
-          </Text>
-        )}
-        {requireNumber && (
-          <Text
-            style={[
-              styles.requirement,
-              /\d/.test(pin) && styles.requirementMet,
-            ]}
-          >
-            • Include a number
-          </Text>
-        )}
-      </View>
-
-      <View style={styles.footer}>
-        {onBack && (
-          <TouchableOpacity
-            style={styles.cancelButton}
-            onPress={onBack}
-          >
-            <Text style={styles.cancelButtonText}>Back</Text>
-          </TouchableOpacity>
-        )}
-        
-        <TouchableOpacity
-          style={[styles.submitButton, !pin && styles.submitButtonDisabled]}
-          onPress={handleSubmit}
-          disabled={!pin}
-        >
-          <Text style={styles.submitButtonText}>Continue</Text>
-        </TouchableOpacity>
-      </View>
-      
-      {/* PIN Information Tooltip Modal */}
-      <Modal
-        visible={showTooltip}
-        transparent
-        animationType="fade"
-        onRequestClose={() => setShowTooltip(false)}
-      >
-        <TouchableWithoutFeedback onPress={() => setShowTooltip(false)}>
-          <View style={styles.tooltipOverlay}>
-            <View style={styles.tooltipContainer}>
-              <Text style={styles.tooltipTitle}>About Your PIN</Text>
-              <Text style={styles.tooltipText}>
-                Your PIN is used to secure your account and protect your data. It will be required whenever you access sensitive information or perform important actions.
-              </Text>
-              <Text style={styles.tooltipText}>
-                For maximum security, your PIN should:
-              </Text>
-              <Text style={styles.tooltipBullet}>• Be at least {minLength} characters</Text>
-              {requireSpecialChar && (
-                <Text style={styles.tooltipBullet}>• Include special characters like !@#$%^&*()</Text>
-              )}
-              {requireNumber && (
-                <Text style={styles.tooltipBullet}>• Include at least one number</Text>
-              )}
-              <Text style={styles.tooltipText}>
-                Your PIN is stored securely and encrypted on your device.
-              </Text>
-              <TouchableOpacity 
-                style={styles.tooltipButton} 
-                onPress={() => setShowTooltip(false)}
-              >
-                <Text style={styles.tooltipButtonText}>Got it</Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        </TouchableWithoutFeedback>
-      </Modal>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-    width: width,
-    backgroundColor: '#fff',
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 16,
-    paddingVertical: 8,
-  },
-  backButton: {
-    padding: 8,
-  },
-  helpButton: {
-    padding: 8,
-    width: 40,
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: COLORS.text.primary,
-    textAlign: 'center',
-    flex: 1,
-  },
-  subtitle: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 24,
-    textAlign: 'center',
-  },
-  inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: COLORS.border,
-    borderRadius: 8,
-    marginBottom: 16,
-  },
-  input: {
-    flex: 1,
-    padding: 12,
-    fontSize: 16,
-  },
-  visibilityButton: {
-    padding: 12,
-  },
-  error: {
-    color: COLORS.error,
-    marginBottom: 16,
-  },
-  requirements: {
-    marginBottom: 24,
-  },
-  requirementTitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    marginBottom: 8,
-    color: COLORS.text.primary,
-  },
-  requirement: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 4,
-  },
-  requirementMet: {
-    color: COLORS.success,
-  },
-  footer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginTop: 24,
-    borderTopWidth: 1,
-    borderTopColor: '#eee',
-    paddingTop: 16,
-  },
-  cancelButton: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-  cancelButtonText: {
-    color: '#666',
-    fontSize: 16,
-  },
-  submitButton: {
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    borderRadius: 16,
-    backgroundColor: COLORS.primary,
-    borderWidth: 1,
-    borderColor: COLORS.primary,
-    alignItems: 'center',
-  },
-  submitButtonDisabled: {
-    opacity: 0.5,
-  },
-  submitButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  tooltipOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-  },
-  tooltipContainer: {
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    padding: 20,
-    width: '90%',
-    maxWidth: 400,
-  },
-  tooltipTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 12,
-    color: COLORS.text.primary,
-    textAlign: 'center',
-  },
-  tooltipText: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 12,
-  },
-  tooltipBullet: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 6,
-    marginLeft: 10,
-  },
-  tooltipButton: {
-    backgroundColor: COLORS.primary,
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    borderRadius: 8,
-    alignSelf: 'center',
-    marginTop: 12,
-  },
-  tooltipButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-});

package/src/components/PlatformList.tsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS, PLATFORMS } from '../constants';
-import type { PlatformListProps } from '../types';
-
-export const PlatformList: React.FC<PlatformListProps> = ({
-  connections,
-  onToggle,
-  isLoading,
-  canProceed,
-  onProceed,
-}) => {
-  const renderPlatformItem = (platform: string, isConnected: boolean) => {
-    const platformConfig = PLATFORMS[platform];
-    if (!platformConfig) return null;
-
-    return (
-      <View key={platform} style={styles.platformContainer}>
-        <View style={styles.platformHeader}>
-          <Icon name={platformConfig.icon} size={24} color={platformConfig.color} />
-          <Text style={styles.platformName}>{platformConfig.name}</Text>
-        </View>
-        {platformConfig.description && (
-          <Text style={styles.platformDescription}>{platformConfig.description}</Text>
-        )}
-        <TouchableOpacity
-          style={[
-            styles.connectButton,
-            isConnected ? styles.connectedButton : styles.disconnectedButton,
-          ]}
-          onPress={() => onToggle(platform, !isConnected)}
-          disabled={isLoading}
-        >
-          {isLoading ? (
-            <ActivityIndicator color="#fff" />
-          ) : (
-            <Text style={styles.buttonText}>
-              {isConnected ? 'Disconnect' : 'Connect'}
-            </Text>
-          )}
-        </TouchableOpacity>
-      </View>
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Connect your platforms</Text>
-      <Text style={styles.subtitle}>
-        Connect at least 2 platforms to proceed
-      </Text>
-      
-      <View style={styles.platformsList}>
-        {Object.entries(connections).map(([platform, status]) =>
-          renderPlatformItem(platform, !!status)
-        )}
-      </View>
-
-      <TouchableOpacity
-        style={[styles.proceedButton, !canProceed && styles.disabledButton]}
-        onPress={onProceed}
-        disabled={!canProceed || isLoading}
-      >
-        <Text style={styles.proceedButtonText}>Proceed</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: '600',
-    marginBottom: 8,
-    color: COLORS.text.primary,
-  },
-  subtitle: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 24,
-  },
-  platformsList: {
-    flex: 1,
-  },
-  platformContainer: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: COLORS.border,
-  },
-  platformHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  platformName: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginLeft: 12,
-    color: COLORS.text.primary,
-  },
-  platformDescription: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 16,
-  },
-  connectButton: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    alignItems: 'center',
-  },
-  connectedButton: {
-    backgroundColor: COLORS.success,
-  },
-  disconnectedButton: {
-    backgroundColor: COLORS.primary,
-  },
-  buttonText: {
-    color: '#fff',
-    fontWeight: '600',
-  },
-  proceedButton: {
-    backgroundColor: COLORS.primary,
-    paddingVertical: 16,
-    borderRadius: 12,
-    alignItems: 'center',
-    marginTop: 16,
-  },
-  disabledButton: {
-    opacity: 0.5,
-  },
-  proceedButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-});