@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/components/SectionTitle.tsx

@@ -1,19 +1,22 @@
 import type React from 'react';
 import { Text, StyleSheet, type StyleProp, type TextStyle } from 'react-native';
 import { fontFamilies } from '../styles/fonts';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { normalizeColorScheme } from '../utils/themeUtils';
+import { useThemeStyles } from '../hooks/useThemeStyles';
 
 interface SectionTitleProps {
     title: string;
-    theme: 'light' | 'dark';
+    theme?: 'light' | 'dark';
     style?: StyleProp<TextStyle>;
 }
 
 const SectionTitle: React.FC<SectionTitleProps> = ({ title, theme, style }) => {
-    const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const colorScheme = normalizeColorScheme(useColorScheme(), theme);
+    const themeStyles = useThemeStyles(theme || colorScheme, colorScheme);
 
     return (
-        <Text style={[styles.sectionTitle, { color: textColor }, style]}>
+        <Text style={[styles.sectionTitle, { color: themeStyles.textColor }, style]}>
             {title}
         </Text>
     );

package/src/ui/components/SettingRow.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { View, Text, Switch, StyleSheet } from 'react-native';
+
+export interface SettingRowProps {
+    title: string;
+    description?: string;
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    disabled?: boolean;
+    textColor?: string;
+    mutedTextColor?: string;
+    borderColor?: string;
+}
+
+/**
+ * Reusable setting row component with switch
+ * Extracted from PrivacySettingsScreen for reuse across settings screens
+ */
+const SettingRow: React.FC<SettingRowProps> = ({
+    title,
+    description,
+    value,
+    onValueChange,
+    disabled = false,
+    textColor,
+    mutedTextColor,
+    borderColor,
+}) => {
+    return (
+        <View style={[styles.settingRow, borderColor ? { borderBottomColor: borderColor } : undefined]}>
+            <View style={styles.settingInfo}>
+                <Text style={[styles.settingTitle, textColor ? { color: textColor } : undefined]}>
+                    {title}
+                </Text>
+                {description && (
+                    <Text style={[styles.settingDescription, mutedTextColor ? { color: mutedTextColor } : undefined]}>
+                        {description}
+                    </Text>
+                )}
+            </View>
+            <Switch
+                value={value}
+                onValueChange={onValueChange}
+                disabled={disabled}
+                trackColor={{ false: '#767577', true: '#d169e5' }}
+                thumbColor={value ? '#fff' : '#f4f3f4'}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    settingRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 16,
+        borderBottomWidth: 1,
+    },
+    settingInfo: {
+        flex: 1,
+        marginRight: 16,
+    },
+    settingTitle: {
+        fontSize: 16,
+        fontWeight: '500',
+        marginBottom: 4,
+    },
+    settingDescription: {
+        fontSize: 14,
+        opacity: 0.7,
+    },
+});
+
+export default React.memo(SettingRow);
+

package/src/ui/components/StepBasedScreen.tsx

@@ -2,23 +2,18 @@ import type React from 'react';
 import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import {
     View,
-    Text,
-    KeyboardAvoidingView,
-    ScrollView,
-    StatusBar,
     Platform,
-    StyleSheet,
 } from 'react-native';
 import Animated, {
     useSharedValue,
     useAnimatedStyle,
     withTiming,
-    runOnJS,
-    type SharedValue,
 } from 'react-native-reanimated';
 import { useThemeColors, createAuthStyles } from '../styles';
-import type { BaseScreenProps } from '../navigation/types';
-import type { RouteName } from '../navigation/routes';
+import type { BaseScreenProps, StepController } from '../types/navigation';
+import type { RouteName } from '../types/navigation';
+import { screenContentStyle } from '../constants/spacing';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export interface StepConfig {
     id: string;
@@ -39,12 +34,11 @@ export interface StepBasedScreenProps extends Omit<BaseScreenProps, 'navigate'>
     stepData?: any[];
     navigate: (screen: RouteName, props?: Record<string, any>) => void;
     oxyServices: any; // Required services for step components
+    getNavigationProps?: () => Record<string, unknown>; // Optional callback to extract navigation props from screen state
 }
 
 interface StepBasedScreenState {
-    currentStep: number;
     stepData: any[];
-    isTransitioning: boolean;
 }
 
 // Individual animated progress dot
@@ -98,32 +92,7 @@ const ProgressIndicator: React.FC<{
     </View>
 );
 
-// Step container with animations
-const AnimatedStepContainer: React.FC<{
-    children: React.ReactNode;
-    fadeAnim: SharedValue<number>;
-    slideAnim: SharedValue<number>;
-    scaleAnim: SharedValue<number>;
-    styles: any;
-    stepKey: string;
-}> = ({ children, fadeAnim, slideAnim, scaleAnim, styles, stepKey }) => {
-    const animatedStyle = useAnimatedStyle(() => ({
-        opacity: fadeAnim.value,
-        transform: [
-            { translateX: slideAnim.value },
-            { scale: scaleAnim.value }
-        ]
-    }));
-
-    return (
-        <Animated.View
-            key={stepKey}
-            style={[styles.stepContainer, animatedStyle]}
-        >
-            {children}
-        </Animated.View>
-    );
-};
+// Step container - animations are now handled by router
 
 const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
     steps,
@@ -138,10 +107,31 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
     onAuthenticated,
     theme,
     oxyServices,
+    stepControllerRef,
+    currentScreen, // Current screen name for router-based step navigation
+    getNavigationProps, // Optional callback to extract navigation props from screen state
 }) => {
-    const colors = useThemeColors(theme);
+    // ========================================================================
+    // State Management
+    // ========================================================================
+    // Router now handles step navigation - we just track step data
+    const [state, setState] = useState<StepBasedScreenState>({
+        stepData: [...stepData],
+    });
+
+    // Current step comes from router via initialStep prop
+    const currentStep = initialStep ?? 0;
+
+    // ========================================================================
+    // Computed Values
+    // ========================================================================
+    // Narrow theme type with default value
+    const themeValue = (theme === 'light' || theme === 'dark') ? theme : 'light';
+    const themeString = typeof theme === 'string' ? theme : 'light';
+    const colors = useThemeColors(themeValue);
+    const insets = useSafeAreaInsets();
     const styles = useMemo(() => ({
-        ...createAuthStyles(colors, theme),
+        ...createAuthStyles(colors, themeString),
         // Additional styles for step components
         modernHeader: {
             alignItems: 'flex-start' as const,
@@ -213,7 +203,7 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
             width: '100%',
             justifyContent: 'center' as const,
             marginTop: 24, // Space for bottom sheet handle (~20px) + small buffer
-            marginBottom: 24, // Equal spacing below dots
+            marginBottom: 0, // BottomSheet handles all bottom spacing
         },
         progressDot: {
             height: 6,
@@ -224,146 +214,181 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
         },
     }), [colors, theme]);
 
-    // State management
-    const [state, setState] = useState<StepBasedScreenState>({
-        currentStep: initialStep,
-        stepData: stepData,
-        isTransitioning: false,
-    });
+    // ========================================================================
+    // Animation Values (removed - router handles animations now)
+    // ========================================================================
 
-    // Update state when stepData prop changes
+    // ========================================================================
+    // Refs for Callbacks
+    // ========================================================================
+    const onStepChangeRef = useRef(onStepChange);
+    const onCompleteRef = useRef(onComplete);
+    onStepChangeRef.current = onStepChange;
+    onCompleteRef.current = onComplete;
+
+    // ========================================================================
+    // Effects
+    // ========================================================================
     useEffect(() => {
         setState(prevState => ({
             ...prevState,
-            stepData: stepData,
+            stepData: [...stepData],
         }));
     }, [stepData]);
 
-    // Animation values
-    const fadeAnim = useSharedValue(1);
-    const slideAnim = useSharedValue(0);
-    const scaleAnim = useSharedValue(1);
-
-    // Refs for animation callbacks
-    const onStepChangeRef = useRef(onStepChange);
-    const onCompleteRef = useRef(onComplete);
-    onStepChangeRef.current = onStepChange;
-    onCompleteRef.current = onComplete;
-
-    // Update step data
+    // ========================================================================
+    // Step Data Management
+    // ========================================================================
     const updateStepData = useCallback((stepIndex: number, data: any) => {
-        setState(prev => ({
-            ...prev,
-            stepData: prev.stepData.map((item, index) =>
-                index === stepIndex ? data : item
-            ),
-        }));
-    }, [setState]);
+        setState(prev => {
+            const nextStepData = prev.stepData.slice();
+            nextStepData[stepIndex] = data;
+            return {
+                ...prev,
+                stepData: nextStepData,
+            };
+        });
+    }, []);
 
-    // Animation transition function
-    const animateTransition = useCallback((nextStep: number) => {
-        if (!enableAnimations) {
-            setState(prev => ({ ...prev, currentStep: nextStep }));
-            onStepChangeRef.current?.(nextStep, steps.length);
+    // ========================================================================
+    // Step Change Effects
+    // ========================================================================
+    // Router handles all step navigation - we just respond to prop changes
+    useEffect(() => {
+        // Validate step
+        if (currentStep < 0 || currentStep >= steps.length) {
+            if (__DEV__) {
+                console.warn('StepBasedScreen: invalid step', currentStep);
+            }
             return;
         }
 
-        setState(prev => ({ ...prev, isTransitioning: true }));
+        // Call onEnter for current step
+        const currentStepConfig = steps[currentStep];
+        currentStepConfig?.onEnter?.();
 
-        const applyStepChange = (targetStep: number, totalSteps: number) => {
-            setState(prev => ({
-                ...prev,
-                currentStep: targetStep,
-                isTransitioning: false,
-            }));
-            onStepChangeRef.current?.(targetStep, totalSteps);
-
-            // Prepare next step animation
-            fadeAnim.value = 0;
-            scaleAnim.value = 0.98;
-            slideAnim.value = 0;
-
-            fadeAnim.value = withTiming(1, { duration: 220 });
-            scaleAnim.value = withTiming(1, { duration: 220 });
-        };
+        // Notify parent of step change
+        onStepChangeRef.current?.(currentStep, steps.length);
 
-        // Animate current step out
-        scaleAnim.value = withTiming(0.98, { duration: 180 });
-        fadeAnim.value = withTiming(0, { duration: 180 }, (finished) => {
-            if (finished) {
-                runOnJS(applyStepChange)(nextStep, steps.length);
+        // Cleanup: call onExit when step changes
+        return () => {
+            if (currentStepConfig?.onExit) {
+                currentStepConfig.onExit();
             }
-        });
-    }, [enableAnimations, steps.length, fadeAnim, scaleAnim, slideAnim]);
+        };
+    }, [currentStep, steps]);
 
-    // Navigation functions
+    // ========================================================================
+    // Step Navigation
+    // ========================================================================
+    // All step navigation is now handled by router - these functions use router's navigate/goBack
     const nextStep = useCallback(() => {
-        if (state.isTransitioning) return;
-
-        const currentStepConfig = steps[state.currentStep];
+        const currentStepConfig = steps[currentStep];
         if (currentStepConfig?.canProceed) {
-            const stepData = state.stepData[state.currentStep];
+            const stepData = state.stepData[currentStep];
             if (!currentStepConfig.canProceed(stepData)) {
                 return; // Step validation failed
             }
         }
 
-        if (state.currentStep < steps.length - 1) {
-            // Call onExit for current step
-            currentStepConfig?.onExit?.();
+        if (currentStep < steps.length - 1) {
+            const nextStepIndex = currentStep + 1;
 
-            animateTransition(state.currentStep + 1);
+            // Extract props to preserve them across navigation
+            const navigationProps: Record<string, unknown> = { initialStep: nextStepIndex };
 
-            // Call onEnter for next step
-            const nextStepConfig = steps[state.currentStep + 1];
-            nextStepConfig?.onEnter?.();
+            // Use extraction callback if provided
+            if (getNavigationProps) {
+                const extractedProps = getNavigationProps();
+                Object.assign(navigationProps, extractedProps);
+            } else {
+                // Fallback: Extract props from stepData
+                const step0Data = stepData[0] || {};
+                const currentStepData = stepData[currentStep] || {};
+
+                if (step0Data.username || currentStepData.username) {
+                    navigationProps.username = step0Data.username || currentStepData.username;
+                }
+                if (step0Data.userProfile || currentStepData.userProfile) {
+                    navigationProps.userProfile = step0Data.userProfile || currentStepData.userProfile;
+                }
+                if (step0Data.email || currentStepData.email) {
+                    navigationProps.email = step0Data.email || currentStepData.email;
+                }
+            }
+
+            // Router handles step navigation with animations
+            if (currentScreen && navigate && typeof currentScreen === 'string') {
+                navigate(currentScreen as RouteName, navigationProps);
+            }
         } else {
             // Final step - call onComplete
             onCompleteRef.current?.(state.stepData);
         }
-    }, [state.currentStep, state.stepData, state.isTransitioning, steps, animateTransition]);
+    }, [currentStep, steps, currentScreen, navigate, state.stepData, getNavigationProps, stepData]);
 
     const prevStep = useCallback(() => {
-        if (state.isTransitioning) return;
+        // Use router's goBack - it handles step navigation automatically
+        if (currentStep > 0 && typeof goBack === 'function') {
+            goBack();
+        } else if (typeof goBack === 'function') {
+            // On first step, goBack will check screen history or close
+            goBack();
+        }
+    }, [currentStep, goBack]);
 
-        if (state.currentStep > 0) {
-            // Call onExit for current step
-            const currentStepConfig = steps[state.currentStep];
-            currentStepConfig?.onExit?.();
+    const goToStep = useCallback((stepIndex: number) => {
+        if (stepIndex < 0 || stepIndex >= steps.length || stepIndex === currentStep) return;
 
-            animateTransition(state.currentStep - 1);
+        // Extract props to preserve state
+        const navigationProps: Record<string, unknown> = { initialStep: stepIndex };
 
-            // Call onEnter for previous step
-            const prevStepConfig = steps[state.currentStep - 1];
-            prevStepConfig?.onEnter?.();
+        if (getNavigationProps) {
+            const extractedProps = getNavigationProps();
+            Object.assign(navigationProps, extractedProps);
         } else {
-            // First step - go back
-            goBack?.();
+            const step0Data = stepData[0] || {};
+            if (step0Data.username) navigationProps.username = step0Data.username;
+            if (step0Data.userProfile) navigationProps.userProfile = step0Data.userProfile;
+            if (step0Data.email) navigationProps.email = step0Data.email;
         }
-    }, [state.currentStep, state.isTransitioning, steps, animateTransition, goBack]);
 
-    const goToStep = useCallback((stepIndex: number) => {
-        if (state.isTransitioning || stepIndex < 0 || stepIndex >= steps.length) return;
+        // Router handles step navigation with animations
+        if (currentScreen && navigate && typeof currentScreen === 'string') {
+            navigate(currentScreen as RouteName, navigationProps);
+        }
+    }, [currentStep, steps, currentScreen, navigate, stepData, getNavigationProps]);
 
-        if (stepIndex !== state.currentStep) {
-            // Call onExit for current step
-            const currentStepConfig = steps[state.currentStep];
-            currentStepConfig?.onExit?.();
+    // ========================================================================
+    // Step Controller Exposure
+    // ========================================================================
+    useEffect(() => {
+        if (!stepControllerRef || typeof stepControllerRef !== 'object' || !('current' in stepControllerRef)) return;
 
-            animateTransition(stepIndex);
+        stepControllerRef.current = {
+            canGoBack: () => currentStep > 0,
+            goBack: prevStep,
+        };
 
-            // Call onEnter for target step
-            const targetStepConfig = steps[stepIndex];
-            targetStepConfig?.onEnter?.();
-        }
-    }, [state.currentStep, state.isTransitioning, steps, animateTransition]);
+        return () => {
+            if (stepControllerRef && typeof stepControllerRef === 'object' && 'current' in stepControllerRef) {
+                stepControllerRef.current = null;
+            }
+        };
+    }, [currentStep, prevStep, stepControllerRef]);
 
-    // Get current step component
-    const currentStepConfig = steps[state.currentStep];
+    // ========================================================================
+    // Step Component & Props
+    // ========================================================================
+    const currentStepConfig = steps[currentStep];
     const CurrentStepComponent = currentStepConfig?.component;
 
-    // Enhanced props for the step component
-    const stepProps = {
+    const updateCurrentStepData = useCallback(
+        (data: any) => updateStepData(currentStep, data),
+        [currentStep, updateStepData]
+    );
+
+    const stepProps = useMemo(() => ({
         ...currentStepConfig?.props,
         // Common props
         colors,
@@ -378,66 +403,59 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
         nextStep,
         prevStep,
         goToStep,
-        currentStep: state.currentStep,
+        currentStep: currentStep,
         totalSteps: steps.length,
 
         // Step data - spread the step data properties directly as props
-        ...state.stepData[state.currentStep],
+        ...state.stepData[currentStep],
 
         // Step data management
-        updateStepData: (data: any) => updateStepData(state.currentStep, data),
+        updateStepData: updateCurrentStepData,
         allStepData: state.stepData,
-
-        // State
-        isTransitioning: state.isTransitioning,
-
-        // Animation refs (for components that need direct access)
-        fadeAnim,
-        slideAnim,
-        scaleAnim,
-    };
+    }), [
+        currentStepConfig?.props,
+        colors,
+        styles,
+        theme,
+        navigate,
+        goBack,
+        onAuthenticated,
+        oxyServices,
+        nextStep,
+        prevStep,
+        goToStep,
+        currentStep,
+        state.stepData,
+        steps.length,
+        updateCurrentStepData,
+    ]);
+
+    // Pure content wrapper - all layout is handled by BottomSheetRouter
+    // This component only renders content, no layout calculations
+    // Add safe area insets to bottom padding so content doesn't sit under safe area
+    const contentStyle = useMemo(() => ({
+        ...screenContentStyle,
+        paddingBottom: screenContentStyle.paddingBottom + insets.bottom,
+    }), [insets.bottom]);
 
     return (
-        <KeyboardAvoidingView
-            style={[styles.container]}
-            behavior={undefined}
-        >
-            <StatusBar
-                barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}
-                backgroundColor={colors.background}
-            />
+        <View style={contentStyle}>
+            {showProgressIndicator && steps.length > 1 && (
+                <ProgressIndicator
+                    currentStep={currentStep}
+                    totalSteps={steps.length}
+                    colors={colors}
+                    styles={styles}
+                />
+            )}
 
-            <ScrollView
-                contentContainerStyle={styles.scrollContent}
-                showsVerticalScrollIndicator={false}
-                keyboardShouldPersistTaps="handled"
-                bounces={false}
-                alwaysBounceVertical={false}
-                overScrollMode="never"
-                removeClippedSubviews={true}
-            >
-                {showProgressIndicator && steps.length > 1 && (
-                    <ProgressIndicator
-                        currentStep={state.currentStep}
-                        totalSteps={steps.length}
-                        colors={colors}
-                        styles={styles}
-                    />
+            {/* Router handles animations now - no need for AnimatedStepContainer */}
+            <View style={styles.stepContainer}>
+                {CurrentStepComponent && (
+                    <CurrentStepComponent {...stepProps} />
                 )}
-
-                <AnimatedStepContainer
-                    fadeAnim={fadeAnim}
-                    slideAnim={slideAnim}
-                    scaleAnim={scaleAnim}
-                    styles={styles}
-                    stepKey={`step-${state.currentStep}`}
-                >
-                    {CurrentStepComponent && (
-                        <CurrentStepComponent {...stepProps} />
-                    )}
-                </AnimatedStepContainer>
-            </ScrollView>
-        </KeyboardAvoidingView>
+            </View>
+        </View>
     );
 };