@onairos/react-native 1.0.0

package/src/components/onboarding/PinInput.tsx

@@ -0,0 +1,356 @@
+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,
+  },
+});

package/src/components/onboarding/PlatformConnector.tsx

@@ -0,0 +1,297 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+  ScrollView,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS } from '../../constants';
+import { OAuthWebView } from './OAuthWebView';
+import type { ConnectionStatus, PlatformConfig } from '../../types';
+
+interface PlatformConnectorProps {
+  connections: ConnectionStatus;
+  onConnect: (platform: string) => Promise<void>;
+  onDisconnect: (platform: string) => Promise<void>;
+  isLoading: boolean;
+  canProceed: boolean;
+  onProceed: () => void;
+}
+
+// Platform definitions
+const PLATFORMS: Record<string, PlatformConfig> = {
+  instagram: {
+    name: 'Instagram',
+    icon: 'photo-camera',
+    color: '#E1306C',
+    description: 'Connect to share and analyze your Instagram content',
+  },
+  youtube: {
+    name: 'YouTube',
+    icon: 'smart-display',
+    color: '#FF0000',
+    description: 'Connect for YouTube video recommendations and analysis',
+  },
+  pinterest: {
+    name: 'Pinterest',
+    icon: 'push-pin',
+    color: '#E60023',
+    description: 'Connect to enhance Pinterest board recommendations',
+  },
+  reddit: {
+    name: 'Reddit',
+    icon: 'forum',
+    color: '#FF4500',
+    description: 'Connect to personalize Reddit content insights',
+  },
+};
+
+export const PlatformConnector: React.FC<PlatformConnectorProps> = ({
+  connections,
+  onConnect,
+  onDisconnect,
+  isLoading,
+  canProceed,
+  onProceed,
+}) => {
+  const [activeWebview, setActiveWebview] = useState<string | null>(null);
+
+  const handleConnectPress = async (platform: string) => {
+    setActiveWebview(platform);
+  };
+
+  const handleWebViewComplete = () => {
+    setActiveWebview(null);
+  };
+
+  const handleWebViewClose = () => {
+    setActiveWebview(null);
+  };
+
+  const handleDisconnectPress = async (platform: string) => {
+    await onDisconnect(platform);
+  };
+
+  const getPlatformStatus = (platform: string) => {
+    const platformKey = platform as keyof ConnectionStatus;
+    return connections[platformKey] ? true : false;
+  };
+
+  const getConnectedCount = () => {
+    return Object.values(connections).filter(Boolean).length;
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Connect Your Platforms</Text>
+      <Text style={styles.subtitle}>
+        Connect at least 2 platforms to create your Onairos account
+      </Text>
+
+      <ScrollView style={styles.platformList}>
+        {Object.keys(PLATFORMS).map((platform) => {
+          const platformInfo = PLATFORMS[platform];
+          const isConnected = getPlatformStatus(platform);
+          const userName = isConnected 
+            ? connections[platform as keyof ConnectionStatus]?.userName 
+            : null;
+
+          return (
+            <View key={platform} style={styles.platformItem}>
+              <View style={styles.platformInfo}>
+                <View
+                  style={[
+                    styles.platformIcon,
+                    { backgroundColor: platformInfo.color },
+                  ]}
+                >
+                  <Icon name={platformInfo.icon} size={24} color="#fff" />
+                </View>
+                <View style={styles.platformText}>
+                  <Text style={styles.platformName}>{platformInfo.name}</Text>
+                  <Text style={styles.platformDescription}>
+                    {isConnected
+                      ? `Connected as ${userName}`
+                      : platformInfo.description}
+                  </Text>
+                </View>
+              </View>
+
+              <TouchableOpacity
+                style={[
+                  styles.platformButton,
+                  isConnected ? styles.disconnectButton : styles.connectButton,
+                ]}
+                onPress={() =>
+                  isConnected
+                    ? handleDisconnectPress(platform)
+                    : handleConnectPress(platform)
+                }
+                disabled={isLoading}
+              >
+                {isLoading ? (
+                  <ActivityIndicator size="small" color="#fff" />
+                ) : (
+                  <Text style={styles.buttonText}>
+                    {isConnected ? 'Disconnect' : 'Connect'}
+                  </Text>
+                )}
+              </TouchableOpacity>
+            </View>
+          );
+        })}
+      </ScrollView>
+
+      <View style={styles.footer}>
+        <Text style={styles.connectionStatus}>
+          {getConnectedCount()} of {Object.keys(PLATFORMS).length} platforms connected
+        </Text>
+        <TouchableOpacity
+          style={[
+            styles.proceedButton,
+            canProceed ? styles.proceedActive : styles.proceedInactive,
+          ]}
+          onPress={onProceed}
+          disabled={!canProceed}
+        >
+          <Text
+            style={[
+              styles.proceedText,
+              canProceed ? styles.proceedTextActive : styles.proceedTextInactive,
+            ]}
+          >
+            Continue
+          </Text>
+          <Icon
+            name="arrow-forward"
+            size={20}
+            color={canProceed ? '#fff' : '#999'}
+          />
+        </TouchableOpacity>
+      </View>
+
+      {activeWebview && (
+        <OAuthWebView
+          url={`https://oauth.example.com/${activeWebview}`} // This would be replaced with actual OAuth URL
+          platform={activeWebview}
+          onComplete={handleWebViewComplete}
+          onClose={handleWebViewClose}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    color: '#000',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 24,
+  },
+  platformList: {
+    flex: 1,
+  },
+  platformItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 16,
+    padding: 12,
+    backgroundColor: '#f8f8f8',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#eee',
+  },
+  platformInfo: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  platformIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  platformText: {
+    flex: 1,
+  },
+  platformName: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 4,
+    color: '#000',
+  },
+  platformDescription: {
+    fontSize: 14,
+    color: '#666',
+  },
+  platformButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minWidth: 100,
+  },
+  connectButton: {
+    backgroundColor: COLORS.primary,
+  },
+  disconnectButton: {
+    backgroundColor: '#f44336',
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+    marginTop: 16,
+  },
+  connectionStatus: {
+    fontSize: 14,
+    color: '#666',
+  },
+  proceedButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 24,
+  },
+  proceedActive: {
+    backgroundColor: COLORS.primary,
+  },
+  proceedInactive: {
+    backgroundColor: '#eee',
+  },
+  proceedText: {
+    fontWeight: '600',
+    marginRight: 8,
+  },
+  proceedTextActive: {
+    color: '#fff',
+  },
+  proceedTextInactive: {
+    color: '#999',
+  },
+});