@oxyhq/services 5.3.11 → 5.4.1

package/src/ui/components/GroupedItem.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+interface GroupedItemProps {
+    icon?: string;
+    iconColor?: string;
+    title: string;
+    subtitle?: string;
+    theme: 'light' | 'dark';
+    onPress?: () => void;
+    isFirst?: boolean;
+    isLast?: boolean;
+    showChevron?: boolean;
+    disabled?: boolean;
+    customContent?: React.ReactNode;
+}
+
+const GroupedItem: React.FC<GroupedItemProps> = ({
+    icon,
+    iconColor = '#007AFF',
+    title,
+    subtitle,
+    theme,
+    onPress,
+    isFirst = false,
+    isLast = false,
+    showChevron = true,
+    disabled = false,
+    customContent,
+}) => {
+    const isDarkTheme = theme === 'dark';
+    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
+
+    const itemStyles = [
+        styles.groupedItem,
+        isFirst && styles.firstGroupedItem,
+        isLast && styles.lastGroupedItem,
+        { backgroundColor: secondaryBackgroundColor },
+    ];
+
+    const content = (
+        <View style={styles.groupedItemContent}>
+            {icon && (
+                <Ionicons name={icon as any} size={20} color={iconColor} style={styles.actionIcon} />
+            )}
+            <View style={styles.actionTextContainer}>
+                <Text style={[styles.actionButtonText, { color: textColor }]}>{title}</Text>
+                {subtitle && (
+                    <Text style={[styles.actionButtonSubtext, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        {subtitle}
+                    </Text>
+                )}
+            </View>
+            {customContent}
+            {showChevron && (
+                <Ionicons name="chevron-forward" size={16} color={isDarkTheme ? '#666666' : '#999999'} />
+            )}
+        </View>
+    );
+
+    if (onPress && !disabled) {
+        return (
+            <TouchableOpacity style={itemStyles} onPress={onPress}>
+                {content}
+            </TouchableOpacity>
+        );
+    }
+
+    return (
+        <View style={itemStyles}>
+            {content}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    groupedItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 2,
+        overflow: 'hidden',
+    },
+    firstGroupedItem: {
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    lastGroupedItem: {
+        borderBottomLeftRadius: 24,
+        borderBottomRightRadius: 24,
+        marginBottom: 8,
+    },
+    groupedItemContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        width: '100%',
+    },
+    actionIcon: {
+        marginRight: 12,
+    },
+    actionTextContainer: {
+        flex: 1,
+    },
+    actionButtonText: {
+        fontSize: 16,
+        fontWeight: '500',
+        marginBottom: 2,
+    },
+    actionButtonSubtext: {
+        fontSize: 13,
+        lineHeight: 18,
+    },
+});
+
+export default GroupedItem;

package/src/ui/components/GroupedSection.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View } from 'react-native';
+import GroupedItem from './GroupedItem';
+
+interface GroupedSectionItem {
+    id: string;
+    icon?: string;
+    iconColor?: string;
+    title: string;
+    subtitle?: string;
+    onPress?: () => void;
+    showChevron?: boolean;
+    disabled?: boolean;
+    customContent?: React.ReactNode;
+}
+
+interface GroupedSectionProps {
+    items: GroupedSectionItem[];
+    theme: 'light' | 'dark';
+}
+
+const GroupedSection: React.FC<GroupedSectionProps> = ({ items, theme }) => {
+    return (
+        <View>
+            {items.map((item, index) => (
+                <GroupedItem
+                    key={item.id}
+                    icon={item.icon}
+                    iconColor={item.iconColor}
+                    title={item.title}
+                    subtitle={item.subtitle}
+                    theme={theme}
+                    onPress={item.onPress}
+                    isFirst={index === 0}
+                    isLast={index === items.length - 1}
+                    showChevron={item.showChevron}
+                    disabled={item.disabled}
+                    customContent={item.customContent}
+                />
+            ))}
+        </View>
+    );
+};
+
+export default GroupedSection;

package/src/ui/components/OxyProvider.tsx

@@ -1,27 +1,20 @@
-// filepath: /home/nate/OxyServicesandApi/OxyHQServices/src/ui/components/OxyProvider.tsx
 import React, { useCallback, useRef, useState, useEffect } from 'react';
 import { View, Text, StyleSheet, Dimensions, Platform, Animated, StatusBar, Keyboard, KeyboardEvent } from 'react-native';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { OxyServices } from '../../core';
 import { OxyProviderProps } from '../navigation/types';
-import SignInScreen from '../screens/SignInScreen';
-import SignUpScreen from '../screens/SignUpScreen';
-import AccountCenterScreen from '../screens/AccountCenterScreen';
 import { OxyContextProvider, useOxy } from '../context/OxyContext';
 import OxyRouter from '../navigation/OxyRouter';
 import { FontLoader, setupFonts } from './FontLoader';
 import { Toaster } from '../../lib/sonner';
 
 // Import bottom sheet components directly - no longer a peer dependency
-import { BottomSheetModal, BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetView } from './bottomSheet';
-import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import { BottomSheetModal, BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetView, BottomSheetScrollView } from './bottomSheet';
+import type { BottomSheetModalRef } from './bottomSheet';
 
 // Initialize fonts automatically
 setupFonts();
 
-const { height, width } = Dimensions.get('window');
-
 /**
  * Enhanced OxyProvider component
  * 
@@ -36,11 +29,12 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
         contextOnly = false,
         onAuthStateChange,
         storageKeyPrefix,
+        showInternalToaster = true,
         ...bottomSheetProps
     } = props;
 
     // Create internal bottom sheet ref
-    const internalBottomSheetRef = useRef<BottomSheetModal>(null);
+    const internalBottomSheetRef = useRef<BottomSheetModalRef>(null);
 
     // If contextOnly is true, we just provide the context without the bottom sheet UI
     if (contextOnly) {
@@ -72,10 +66,12 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
                             {children}
                         </SafeAreaProvider>
                     </BottomSheetModalProvider>
-                    {/* Move Toaster outside BottomSheetModalProvider to ensure it appears above the modal backdrop */}
-                    <View style={styles.toasterContainer}>
-                        <Toaster position="top-center" swipeToDismissDirection="left" offset={15} />
-                    </View>
+                    {/* Global Toaster for app-wide notifications outside of Modal contexts - only show if internal toaster is disabled */}
+                    {!showInternalToaster && (
+                        <View style={styles.toasterContainer}>
+                            <Toaster position="top-center" swipeToDismissDirection="left" offset={15} />
+                        </View>
+                    )}
                 </GestureHandlerRootView>
             </FontLoader>
         </OxyContextProvider>
@@ -97,15 +93,17 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
     customStyles = {},
     bottomSheetRef,
     autoPresent = false,
+    showInternalToaster = true,
 }) => {
     // Use the internal ref (which is passed as a prop from OxyProvider)
-    const modalRef = useRef<BottomSheetModal>(null);
+    const modalRef = useRef<BottomSheetModalRef>(null);
     
     // Create a ref to store the navigation function from OxyRouter
     const navigationRef = useRef<((screen: string, props?: Record<string, any>) => void) | null>(null);
 
     // Track content height for dynamic sizing
     const [contentHeight, setContentHeight] = useState<number>(0);
+    const [containerWidth, setContainerWidth] = useState<number>(800); // Track actual container width
     const screenHeight = Dimensions.get('window').height;
 
     // Set up effect to sync the internal ref with our modal ref
@@ -148,14 +146,14 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                 } else {
                     // For React Native - use the global variable approach
                     console.log('Using React Native global navigation');
-                    (global as any).oxyNavigateEvent = { screen: screenName, props };
+                    (globalThis as any).oxyNavigateEvent = { screen: screenName, props };
                 }
             };
         }
     }, [bottomSheetRef, modalRef]);
 
     // Use percentage-based snap points for better cross-platform compatibility
-    const [snapPoints, setSnapPoints] = useState<(string | number)[]>(['60%', '85%']);
+    const [snapPoints, setSnapPoints] = useState<(string | number)[]>(['60%', '90%']);
 
     // Animation values - we'll use these for content animations
     // Start with opacity 1 on Android to avoid visibility issues
@@ -176,15 +174,21 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
         const keyboardWillShowListener = Keyboard.addListener(
             Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
             (event: KeyboardEvent) => {
-                setKeyboardVisible(true);
-                // Get keyboard height from event
-                const keyboardHeightValue = event.endCoordinates.height;
-                setKeyboardHeight(keyboardHeightValue);
-
-                // Ensure the bottom sheet remains visible when keyboard opens
-                // by adjusting to the highest snap point
-                if (modalRef.current) {
-                    modalRef.current.snapToIndex(1);
+                // Debounce rapid keyboard events
+                if (!keyboardVisible) {
+                    setKeyboardVisible(true);
+                    // Get keyboard height from event
+                    const keyboardHeightValue = event.endCoordinates.height;
+                    setKeyboardHeight(keyboardHeightValue);
+
+                    // Ensure the bottom sheet remains visible when keyboard opens
+                    // by adjusting to the highest snap point
+                    if (modalRef.current) {
+                        // Use requestAnimationFrame to avoid conflicts
+                        requestAnimationFrame(() => {
+                            modalRef.current?.snapToIndex(1);
+                        });
+                    }
                 }
             }
         );
@@ -192,8 +196,10 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
         const keyboardWillHideListener = Keyboard.addListener(
             Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
             () => {
-                setKeyboardVisible(false);
-                setKeyboardHeight(0);
+                if (keyboardVisible) {
+                    setKeyboardVisible(false);
+                    setKeyboardHeight(0);
+                }
             }
         );
 
@@ -202,7 +208,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             keyboardWillShowListener.remove();
             keyboardWillHideListener.remove();
         };
-    }, []);
+    }, [keyboardVisible]);
 
     // Present the modal when component mounts, but only if autoPresent is true
     useEffect(() => {
@@ -229,27 +235,6 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                     }),
                 ]).start();
             };
-
-            // Override present to also handle animations
-            // @ts-ignore - Dynamic method assignment
-            bottomSheetRef.current.present = () => {
-                modalRef.current?.present();
-
-                // Start content animations after presenting
-                Animated.parallel([
-                    Animated.timing(fadeAnim, {
-                        toValue: 1,
-                        duration: 300,
-                        useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
-                    }),
-                    Animated.spring(slideAnim, {
-                        toValue: 0,
-                        friction: 8,
-                        tension: 40,
-                        useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
-                    }),
-                ]).start();
-            };
         }
 
         // Auto-present if the autoPresent prop is true
@@ -346,20 +331,26 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             // If we have content height, use it as a constraint
             if (contentHeight > 0) {
                 // Calculate content height as percentage of screen (plus some padding)
-                const contentHeightPercent = Math.min(Math.ceil((contentHeight + 40) / screenHeight * 100), 90) + '%';
+                // Clamp to ensure we don't exceed 90% to leave space for UI elements
+                const contentHeightPercent = Math.min(Math.ceil((contentHeight) / screenHeight * 100), 90);
+                const contentHeightPercentStr = `${contentHeightPercent}%`;
                 // Use content height for first snap point if it's taller than the default
-                const firstPoint = contentHeight / screenHeight > 0.6 ? contentHeightPercent : points[0];
-                setSnapPoints([firstPoint, points[1]]);
+                const firstPoint = contentHeight / screenHeight > 0.6 ? contentHeightPercentStr : points[0];
+                setSnapPoints([firstPoint, points[1] || '90%']);
             } else {
                 setSnapPoints(points);
             }
         }
     }, [keyboardVisible, contentHeight, screenHeight]);
 
-    // Handle content layout changes to measure height
+    // Handle content layout changes to measure height and width
     const handleContentLayout = useCallback((event: any) => {
-        const layoutHeight = event.nativeEvent.layout.height;
+        const { height: layoutHeight, width: layoutWidth } = event.nativeEvent.layout;
         setContentHeight(layoutHeight);
+        setContainerWidth(layoutWidth);
+        
+        // Debug: log container dimensions
+        console.log('[OxyProvider] Container dimensions (full):', { width: layoutWidth, height: layoutHeight });
 
         // Update snap points based on new content height
         if (keyboardVisible) {
@@ -368,8 +359,10 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             setSnapPoints([highestPoint, highestPoint]);
         } else {
             if (layoutHeight > 0) {
-                const contentHeightPercent = Math.min(Math.ceil((layoutHeight + 40) / screenHeight * 100), 90) + '%';
-                const firstPoint = layoutHeight / screenHeight > 0.6 ? contentHeightPercent : snapPoints[0];
+                // Add padding and clamp to reasonable limits
+                const contentHeightPercent = Math.min(Math.ceil((layoutHeight + 40) / screenHeight * 100), 90);
+                const contentHeightPercentStr = `${contentHeightPercent}%`;
+                const firstPoint = layoutHeight / screenHeight > 0.6 ? contentHeightPercentStr : snapPoints[0];
                 setSnapPoints([firstPoint, snapPoints[1]]);
             }
         }
@@ -395,27 +388,6 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
 
     // Handle sheet index changes
     const handleSheetChanges = useCallback((index: number) => {
-        if (index === -1 && onClose) {
-            onClose();
-        } else if (index === 1) {
-            // Pulse animation when expanded to full height
-            Animated.sequence([
-                Animated.timing(handleScaleAnim, {
-                    toValue: 1.2,
-                    duration: 200,
-                    useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
-                }),
-                Animated.timing(handleScaleAnim, {
-                    toValue: 1,
-                    duration: 200,
-                    useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
-                }),
-            ]).start();
-        } else if (index === 0 && keyboardVisible) {
-            // If keyboard is visible and user tries to go to a smaller snap point,
-            // force the sheet to stay at the highest point for better visibility
-            modalRef.current?.snapToIndex(1);
-        }
     }, [onClose, handleScaleAnim, keyboardVisible]);
 
     return (
@@ -425,23 +397,6 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             snapPoints={snapPoints}
             enablePanDownToClose
             backdropComponent={renderBackdrop}
-            // Remove enableDynamicSizing as we're implementing our own solution
-            handleComponent={() => (
-                <Animated.View
-                    style={{
-                        alignItems: 'center',
-                        paddingVertical: 8,
-                        ...(Platform.OS === 'ios' ? {
-                            transform: [{ scale: handleScaleAnim }]
-                        } : {})
-                    }}
-                >
-                    <View style={[
-                        styles.indicator,
-                        { backgroundColor: customStyles.handleColor || (theme === 'light' ? '#CCCCCC' : '#444444') }
-                    ]} />
-                </Animated.View>
-            )}
             backgroundStyle={[
                 getBackgroundStyle(),
                 {
@@ -455,6 +410,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                 height: 4,
             }}
             onChange={handleSheetChanges}
+            style={styles.bottomSheetContainer}
             // Adding additional props to improve layout behavior
             keyboardBehavior="interactive"
             keyboardBlurBehavior="restore"
@@ -477,38 +433,57 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                 ]}
                 onLayout={handleContentLayout}
             >
-                <Animated.View
-                    style={[
-                        styles.animatedContent,
-                        // Apply animations - conditionally for Android
-                        Platform.OS === 'android' ?
-                            {
-                                opacity: 1,  // No fade animation on Android
-                            } : {
-                                opacity: fadeAnim,
-                                transform: [{ translateY: slideAnim }]
-                            }
-                    ]}
-                >
-                    <OxyRouter
-                        oxyServices={oxyServices}
-                        initialScreen={initialScreen}
-                        onClose={handleClose}
-                        onAuthenticated={handleAuthenticated}
-                        theme={theme}
-                        adjustSnapPoints={adjustSnapPoints}
-                        navigationRef={navigationRef}
-                    />
-                </Animated.View>
+                <View style={styles.centeredContentWrapper}>
+                    <Animated.View
+                        style={[
+                            styles.animatedContent,
+                            // Apply animations - conditionally for Android
+                            Platform.OS === 'android' ?
+                                {
+                                    opacity: 1,  // No fade animation on Android
+                                } : {
+                                    opacity: fadeAnim,
+                                    transform: [{ translateY: slideAnim }]
+                                }
+                        ]}
+                    >
+                        <OxyRouter
+                            oxyServices={oxyServices}
+                            initialScreen={initialScreen}
+                            onClose={handleClose}
+                            onAuthenticated={handleAuthenticated}
+                            theme={theme}
+                            adjustSnapPoints={adjustSnapPoints}
+                            navigationRef={navigationRef}
+                            containerWidth={containerWidth}
+                        />
+                    </Animated.View>
+                </View>
             </BottomSheetScrollView>
+            {/* Internal toaster - only show if showInternalToaster is true */}
+            {showInternalToaster && (
+                <View style={styles.toasterContainer}>
+                    <Toaster position="top-center" swipeToDismissDirection="left" />
+                </View>
+            )}
         </BottomSheetModal>
     );
 };
 
 const styles = StyleSheet.create({
+    bottomSheetContainer: {
+        maxWidth: 800,
+        width: '100%',
+        marginHorizontal: 'auto',
+    },
     contentContainer: {
         width: '100%',
-        backgroundColor: 'transparent', // Make this transparent to let the bottom sheet background show through
+        borderTopLeftRadius: 35,
+        borderTopRightRadius: 35,
+    },
+    centeredContentWrapper: {
+        width: '100%',
+        marginHorizontal: 'auto',
     },
     animatedContent: {
         width: '100%',
@@ -516,7 +491,6 @@ const styles = StyleSheet.create({
     indicator: {
         width: 40,
         height: 4,
-        alignSelf: 'center',
         marginTop: 8,
         marginBottom: 8,
         borderRadius: 35,
@@ -531,6 +505,7 @@ const styles = StyleSheet.create({
         position: 'relative',
         backgroundColor: 'transparent',
         ...Platform.select({
+
             android: {
                 height: '100%',
                 width: '100%',

package/src/ui/components/ProfileCard.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import Avatar from './Avatar';
+import { fontFamilies } from '../styles/fonts';
+
+interface ProfileCardProps {
+    user: {
+        username: string;
+        email?: string;
+        name?: {
+            full?: string;
+        };
+        avatar?: {
+            url?: string;
+        };
+    };
+    theme: 'light' | 'dark';
+    onEditPress?: () => void;
+    onClosePress?: () => void;
+    showCloseButton?: boolean;
+}
+
+const ProfileCard: React.FC<ProfileCardProps> = ({
+    user,
+    theme,
+    onEditPress,
+    onClosePress,
+    showCloseButton = false,
+}) => {
+    const isDarkTheme = theme === 'dark';
+    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
+    const primaryColor = '#0066CC';
+
+    return (
+        <View style={styles.headerSection}>
+            <View style={[
+                styles.profileCard,
+                styles.firstGroupedItem,
+                styles.lastGroupedItem,
+                { backgroundColor: secondaryBackgroundColor }
+            ]}>
+                <View style={styles.userProfile}>
+                    <Avatar
+                        uri={user?.avatar?.url}
+                        name={user?.name?.full || user?.username}
+                        size={60}
+                        theme={theme}
+                    />
+                    <View style={styles.userInfo}>
+                        <Text style={[styles.userName, { color: textColor }]}>{user.username}</Text>
+                        {user.email && (
+                            <Text style={[styles.userEmail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                {user.email}
+                            </Text>
+                        )}
+                        {onEditPress && (
+                            <TouchableOpacity 
+                                style={styles.editProfileButton}
+                                onPress={onEditPress}
+                            >
+                                <Text style={[styles.editProfileText, { color: primaryColor }]}>Edit Profile</Text>
+                            </TouchableOpacity>
+                        )}
+                    </View>
+                </View>
+                {showCloseButton && onClosePress && (
+                    <TouchableOpacity style={styles.closeButton} onPress={onClosePress}>
+                        <Ionicons name="close" size={24} color={textColor} />
+                    </TouchableOpacity>
+                )}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    headerSection: {
+        padding: 16,
+        paddingTop: 20,
+    },
+    profileCard: {
+        padding: 20,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    firstGroupedItem: {
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    lastGroupedItem: {
+        borderBottomLeftRadius: 24,
+        borderBottomRightRadius: 24,
+        marginBottom: 8,
+    },
+    userProfile: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+    },
+    userInfo: {
+        marginLeft: 16,
+        flex: 1,
+    },
+    userName: {
+        fontSize: 22,
+        fontWeight: 'bold',
+        fontFamily: fontFamilies.phuduBold,
+        marginBottom: 4,
+    },
+    userEmail: {
+        fontSize: 14,
+        marginBottom: 8,
+    },
+    editProfileButton: {
+        alignSelf: 'flex-start',
+    },
+    editProfileText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    closeButton: {
+        padding: 8,
+    },
+});
+
+export default ProfileCard;