@onairos/react-native 3.4.1 → 3.5.4

package/src/components/onboarding/OnboardingHeader.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS } from '../../constants';
-
-interface OnboardingHeaderProps {
-  title: string;
-  subtitle?: string;
-  showBackButton?: boolean;
-  onBack?: () => void;
-  onClose: () => void;
-}
-
-export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
-  title,
-  subtitle,
-  showBackButton = false,
-  onBack,
-  onClose,
-}) => {
-  return (
-    <View style={styles.header}>
-      {showBackButton && (
-        <TouchableOpacity style={styles.backButton} onPress={onBack}>
-          <Icon name="arrow-back" size={24} color="#000" />
-        </TouchableOpacity>
-      )}
-      
-      <View style={styles.titleContainer}>
-        <Text style={styles.title}>{title}</Text>
-        {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
-      </View>
-      
-      <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-        <Icon name="close" size={24} color="#000" />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    backgroundColor: COLORS.headerBg,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-  },
-  backButton: {
-    padding: 8,
-    marginRight: 8,
-  },
-  titleContainer: {
-    flex: 1,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#000',
-  },
-  subtitle: {
-    fontSize: 14,
-    color: '#666',
-    marginTop: 4,
-  },
-  closeButton: {
-    padding: 8,
-  },
-});

package/src/components/onboarding/PinInput.tsx

@@ -1,356 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS } from '../../constants';
-import type { PinInputProps } from '../../types';
-
-export const PinInput: React.FC<PinInputProps> = ({
-  onSubmit,
-  minLength = 6,
-  requireSpecialChar = true,
-  requireNumber = true,
-}) => {
-  const [pin, setPin] = useState('');
-  const [confirmPin, setConfirmPin] = useState('');
-  const [showPin, setShowPin] = useState(false);
-  const [errors, setErrors] = useState<string[]>([]);
-  const [step, setStep] = useState<'create' | 'confirm'>('create');
-
-  // Validate pin whenever it changes
-  useEffect(() => {
-    if (step === 'create') {
-      validatePin(pin);
-    }
-  }, [pin, step]);
-
-  // Validate PIN strength and requirements
-  const validatePin = useCallback(
-    (value: string) => {
-      const newErrors: string[] = [];
-
-      if (value.length < minLength) {
-        newErrors.push(`PIN must be at least ${minLength} characters`);
-      }
-
-      if (requireNumber && !/\d/.test(value)) {
-        newErrors.push('PIN must include at least one number');
-      }
-
-      if (requireSpecialChar && !/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
-        newErrors.push('PIN must include at least one special character');
-      }
-
-      setErrors(newErrors);
-      return newErrors.length === 0;
-    },
-    [minLength, requireNumber, requireSpecialChar]
-  );
-
-  // Handle PIN submission
-  const handleSubmit = useCallback(() => {
-    if (step === 'create') {
-      if (validatePin(pin)) {
-        setStep('confirm');
-      }
-    } else {
-      // Confirm PIN
-      if (pin === confirmPin) {
-        Keyboard.dismiss();
-        onSubmit(pin);
-      } else {
-        setErrors(['PINs do not match']);
-        setConfirmPin('');
-      }
-    }
-  }, [pin, confirmPin, step, validatePin, onSubmit]);
-
-  // Go back to PIN creation step
-  const handleBack = useCallback(() => {
-    setStep('create');
-    setConfirmPin('');
-    setErrors([]);
-  }, []);
-
-  // Toggle PIN visibility
-  const togglePinVisibility = useCallback(() => {
-    setShowPin(!showPin);
-  }, [showPin]);
-
-  return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={styles.container}
-    >
-      <View style={styles.content}>
-        <Text style={styles.title}>
-          {step === 'create' ? 'Create a PIN' : 'Confirm your PIN'}
-        </Text>
-        <Text style={styles.subtitle}>
-          {step === 'create'
-            ? 'This PIN will protect your Onairos account'
-            : 'Please re-enter your PIN to confirm'}
-        </Text>
-
-        <View style={styles.inputContainer}>
-          <TextInput
-            style={styles.input}
-            value={step === 'create' ? pin : confirmPin}
-            onChangeText={step === 'create' ? setPin : setConfirmPin}
-            secureTextEntry={!showPin}
-            keyboardType="default"
-            autoCapitalize="none"
-            autoCorrect={false}
-            placeholder={step === 'create' ? 'Enter PIN' : 'Confirm PIN'}
-            placeholderTextColor="#999"
-            returnKeyType="done"
-            onSubmitEditing={handleSubmit}
-          />
-          <TouchableOpacity
-            style={styles.visibilityToggle}
-            onPress={togglePinVisibility}
-          >
-            <Icon
-              name={showPin ? 'visibility-off' : 'visibility'}
-              size={24}
-              color="#999"
-            />
-          </TouchableOpacity>
-        </View>
-
-        {errors.length > 0 && (
-          <View style={styles.errorContainer}>
-            {errors.map((error, index) => (
-              <View key={index} style={styles.errorItem}>
-                <Icon name="error-outline" size={16} color="#f44336" />
-                <Text style={styles.errorText}>{error}</Text>
-              </View>
-            ))}
-          </View>
-        )}
-
-        {step === 'create' && (
-          <View style={styles.requirementsContainer}>
-            <Text style={styles.requirementsTitle}>PIN Requirements:</Text>
-            <View style={styles.requirement}>
-              <Icon
-                name={pin.length >= minLength ? 'check-circle' : 'radio-button-unchecked'}
-                size={16}
-                color={pin.length >= minLength ? '#4caf50' : '#999'}
-              />
-              <Text
-                style={[
-                  styles.requirementText,
-                  {
-                    color: pin.length >= minLength ? '#4caf50' : '#999',
-                  },
-                ]}
-              >
-                At least {minLength} characters
-              </Text>
-            </View>
-
-            {requireNumber && (
-              <View style={styles.requirement}>
-                <Icon
-                  name={/\d/.test(pin) ? 'check-circle' : 'radio-button-unchecked'}
-                  size={16}
-                  color={/\d/.test(pin) ? '#4caf50' : '#999'}
-                />
-                <Text
-                  style={[
-                    styles.requirementText,
-                    {
-                      color: /\d/.test(pin) ? '#4caf50' : '#999',
-                    },
-                  ]}
-                >
-                  Include at least one number
-                </Text>
-              </View>
-            )}
-
-            {requireSpecialChar && (
-              <View style={styles.requirement}>
-                <Icon
-                  name={
-                    /[!@#$%^&*(),.?":{}|<>]/.test(pin)
-                      ? 'check-circle'
-                      : 'radio-button-unchecked'
-                  }
-                  size={16}
-                  color={
-                    /[!@#$%^&*(),.?":{}|<>]/.test(pin) ? '#4caf50' : '#999'
-                  }
-                />
-                <Text
-                  style={[
-                    styles.requirementText,
-                    {
-                      color: /[!@#$%^&*(),.?":{}|<>]/.test(pin)
-                        ? '#4caf50'
-                        : '#999',
-                    },
-                  ]}
-                >
-                  Include at least one special character
-                </Text>
-              </View>
-            )}
-          </View>
-        )}
-
-        <View style={styles.buttonContainer}>
-          {step === 'confirm' && (
-            <TouchableOpacity
-              style={[styles.button, styles.backButton]}
-              onPress={handleBack}
-            >
-              <Icon name="arrow-back" size={20} color={COLORS.primary} />
-              <Text style={[styles.buttonText, styles.backButtonText]}>
-                Back
-              </Text>
-            </TouchableOpacity>
-          )}
-
-          <TouchableOpacity
-            style={[
-              styles.button,
-              styles.nextButton,
-              (step === 'create' && errors.length > 0) ||
-              (step === 'confirm' && !confirmPin)
-                ? styles.disabledButton
-                : null,
-            ]}
-            onPress={handleSubmit}
-            disabled={
-              (step === 'create' && errors.length > 0) ||
-              (step === 'confirm' && !confirmPin)
-            }
-          >
-            <Text style={[styles.buttonText, styles.nextButtonText]}>
-              {step === 'create' ? 'Next' : 'Submit'}
-            </Text>
-            <Icon name="arrow-forward" size={20} color="#fff" />
-          </TouchableOpacity>
-        </View>
-      </View>
-    </KeyboardAvoidingView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    padding: 24,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 8,
-    color: '#000',
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#666',
-    marginBottom: 24,
-  },
-  inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 8,
-    backgroundColor: '#f9f9f9',
-    marginBottom: 16,
-  },
-  input: {
-    flex: 1,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    fontSize: 16,
-    color: '#000',
-  },
-  visibilityToggle: {
-    padding: 12,
-  },
-  errorContainer: {
-    marginBottom: 16,
-  },
-  errorItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 4,
-  },
-  errorText: {
-    color: '#f44336',
-    marginLeft: 6,
-  },
-  requirementsContainer: {
-    backgroundColor: '#f5f5f5',
-    padding: 16,
-    borderRadius: 8,
-    marginBottom: 24,
-  },
-  requirementsTitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    marginBottom: 8,
-    color: '#000',
-  },
-  requirement: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  requirementText: {
-    marginLeft: 8,
-    fontSize: 14,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 20,
-    borderRadius: 25,
-  },
-  backButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderColor: COLORS.primary,
-  },
-  nextButton: {
-    backgroundColor: COLORS.primary,
-    minWidth: 120,
-    justifyContent: 'center',
-  },
-  disabledButton: {
-    backgroundColor: '#ccc',
-  },
-  buttonText: {
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  backButtonText: {
-    color: COLORS.primary,
-    marginLeft: 8,
-  },
-  nextButtonText: {
-    color: '#fff',
-    marginRight: 8,
-  },
-});