@oxyhq/services 5.7.5 → 5.8.2

package/src/ui/components/GroupedSection.tsx

@@ -6,12 +6,18 @@ interface GroupedSectionItem {
     id: string;
     icon?: string;
     iconColor?: string;
+    image?: string;
+    imageSize?: number;
     title: string;
     subtitle?: string;
     onPress?: () => void;
     showChevron?: boolean;
     disabled?: boolean;
+    selected?: boolean;
     customContent?: React.ReactNode;
+    customIcon?: React.ReactNode;
+    multiRow?: boolean;
+    customContentBelow?: React.ReactNode;
 }
 
 interface GroupedSectionProps {
@@ -27,6 +33,8 @@ const GroupedSection: React.FC<GroupedSectionProps> = ({ items, theme }) => {
                     key={item.id}
                     icon={item.icon}
                     iconColor={item.iconColor}
+                    image={item.image}
+                    imageSize={item.imageSize}
                     title={item.title}
                     subtitle={item.subtitle}
                     theme={theme}
@@ -35,7 +43,11 @@ const GroupedSection: React.FC<GroupedSectionProps> = ({ items, theme }) => {
                     isLast={index === items.length - 1}
                     showChevron={item.showChevron}
                     disabled={item.disabled}
+                    selected={item.selected}
                     customContent={item.customContent}
+                    customIcon={item.customIcon}
+                    multiRow={item.multiRow}
+                    customContentBelow={item.customContentBelow}
                 />
             ))}
         </View>

package/src/ui/components/Header.tsx

@@ -0,0 +1,405 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    Platform,
+    Animated,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import OxyIcon from './icon/OxyIcon';
+import { fontFamilies } from '../styles/fonts';
+
+export interface HeaderProps {
+    title: string;
+    subtitle?: string;
+    onBack?: () => void;
+    onClose?: () => void;
+    rightAction?: {
+        icon?: string;
+        onPress: () => void;
+        loading?: boolean;
+        disabled?: boolean;
+        text?: string;
+    };
+    theme: 'light' | 'dark';
+    showBackButton?: boolean;
+    showCloseButton?: boolean;
+    variant?: 'default' | 'large' | 'minimal' | 'gradient';
+    elevation?: 'none' | 'subtle' | 'prominent';
+    subtitleVariant?: 'default' | 'small' | 'large' | 'muted';
+    titleAlignment?: 'left' | 'center' | 'right';
+}
+
+const Header: React.FC<HeaderProps> = ({
+    title,
+    subtitle,
+    onBack,
+    onClose,
+    rightAction,
+    theme,
+    showBackButton = true,
+    showCloseButton = false,
+    variant = 'default',
+    elevation = 'subtle',
+    subtitleVariant = 'default',
+    titleAlignment = 'left',
+}) => {
+    const isDarkTheme = theme === 'dark';
+
+    // Modern color palette
+    const colors = {
+        background: isDarkTheme ? '#1C1C1E' : '#FFFFFF',
+        surface: isDarkTheme ? '#2C2C2E' : '#F8F9FA',
+        primary: '#007AFF',
+        secondary: isDarkTheme ? '#8E8E93' : '#6C757D',
+        text: {
+            primary: isDarkTheme ? '#FFFFFF' : '#1A1A1A',
+            secondary: isDarkTheme ? '#8E8E93' : '#6C757D',
+            tertiary: isDarkTheme ? '#636366' : '#ADB5BD',
+        },
+        border: isDarkTheme ? '#38383A' : '#E9ECEF',
+        accent: '#5856D6',
+        success: '#34C759',
+        warning: '#FF9500',
+        error: '#FF3B30',
+    };
+
+    const renderBackButton = () => {
+        if (!showBackButton || !onBack) return null;
+
+        return (
+            <TouchableOpacity
+                style={[
+                    styles.backButton,
+                    { backgroundColor: colors.surface }
+                ]}
+                onPress={onBack}
+                activeOpacity={0.7}
+            >
+                <OxyIcon name="chevron-back" size={18} color={colors.primary} />
+            </TouchableOpacity>
+        );
+    };
+
+    const renderCloseButton = () => {
+        if (!showCloseButton || !onClose) return null;
+
+        return (
+            <TouchableOpacity
+                style={[
+                    styles.closeButton,
+                    { backgroundColor: colors.surface }
+                ]}
+                onPress={onClose}
+                activeOpacity={0.7}
+            >
+                <Ionicons name="close" size={18} color={colors.text.primary} />
+            </TouchableOpacity>
+        );
+    };
+
+    const renderRightAction = () => {
+        if (!rightAction) return null;
+
+        const isTextAction = rightAction.text;
+
+        return (
+            <TouchableOpacity
+                style={[
+                    styles.rightActionButton,
+                    isTextAction ? styles.textActionButton : styles.iconActionButton,
+                    {
+                        backgroundColor: isTextAction ? colors.primary : colors.surface,
+                        opacity: rightAction.disabled ? 0.5 : 1
+                    }
+                ]}
+                onPress={rightAction.onPress}
+                disabled={rightAction.disabled || rightAction.loading}
+                activeOpacity={0.7}
+            >
+                {rightAction.loading ? (
+                    <View style={styles.loadingContainer}>
+                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.primary }]} />
+                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.primary }]} />
+                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.primary }]} />
+                    </View>
+                ) : isTextAction ? (
+                    <Text style={[styles.actionText, { color: '#FFFFFF' }]}>
+                        {rightAction.text}
+                    </Text>
+                ) : (
+                    <Ionicons name={rightAction.icon as any} size={18} color={colors.primary} />
+                )}
+            </TouchableOpacity>
+        );
+    };
+
+    const renderTitle = () => {
+        const titleStyle = variant === 'large' ? styles.titleLarge :
+            variant === 'minimal' ? styles.titleMinimal :
+                styles.titleDefault;
+
+        const subtitleStyle = variant === 'large' ? styles.subtitleLarge :
+            variant === 'minimal' ? styles.subtitleMinimal :
+                subtitleVariant === 'small' ? styles.subtitleSmall :
+                    subtitleVariant === 'large' ? styles.subtitleLarge :
+                        subtitleVariant === 'muted' ? styles.subtitleMuted :
+                            styles.subtitleDefault;
+
+        const getTitleAlignment = () => {
+            switch (titleAlignment) {
+                case 'center':
+                    return styles.titleContainerCenter;
+                case 'right':
+                    return styles.titleContainerRight;
+                default:
+                    return styles.titleContainerLeft;
+            }
+        };
+
+        return (
+            <View style={[
+                styles.titleContainer,
+                getTitleAlignment(),
+                variant === 'minimal' && styles.titleContainerMinimal
+            ]}>
+                <Text style={[titleStyle, { color: colors.text.primary }]}>
+                    {title}
+                </Text>
+                {subtitle && (
+                    <Text style={[subtitleStyle, { color: colors.text.secondary }]}>
+                        {subtitle}
+                    </Text>
+                )}
+            </View>
+        );
+    };
+
+    const getElevationStyle = () => {
+        switch (elevation) {
+            case 'none':
+                return {};
+            case 'subtle':
+                return Platform.select({
+                    web: {
+                        boxShadow: isDarkTheme
+                            ? '0 1px 3px rgba(0,0,0,0.3)'
+                            : '0 1px 3px rgba(0,0,0,0.1)',
+                    },
+                    default: {
+                        shadowColor: '#000000',
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: isDarkTheme ? 0.3 : 0.1,
+                        shadowRadius: 3,
+                        elevation: 2,
+                    },
+                });
+            case 'prominent':
+                return Platform.select({
+                    web: {
+                        boxShadow: isDarkTheme
+                            ? '0 4px 12px rgba(0,0,0,0.4)'
+                            : '0 4px 12px rgba(0,0,0,0.15)',
+                    },
+                    default: {
+                        shadowColor: '#000000',
+                        shadowOffset: { width: 0, height: 4 },
+                        shadowOpacity: isDarkTheme ? 0.4 : 0.15,
+                        shadowRadius: 12,
+                        elevation: 8,
+                    },
+                });
+            default:
+                return {};
+        }
+    };
+
+    const getBackgroundStyle = () => {
+        if (variant === 'gradient') {
+            return {
+                backgroundColor: isDarkTheme ? '#1C1C1E' : '#FFFFFF',
+                // Add gradient overlay effect
+                borderBottomWidth: 1,
+                borderBottomColor: colors.border,
+            };
+        }
+
+        return {
+            backgroundColor: colors.background,
+            borderBottomWidth: elevation === 'none' ? 0 : 1,
+            borderBottomColor: colors.border,
+        };
+    };
+
+    return (
+        <View style={[
+            styles.container,
+            getBackgroundStyle(),
+            getElevationStyle(),
+        ]}>
+            <View style={[
+                styles.content,
+                variant === 'minimal' && styles.contentMinimal
+            ]}>
+                {renderBackButton()}
+                {renderTitle()}
+                {renderRightAction()}
+                {renderCloseButton()}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        paddingTop: Platform.OS === 'ios' ? 50 : 16,
+        paddingBottom: 12,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1000,
+        ...Platform.select({
+            web: {
+                position: 'sticky' as any,
+            },
+            default: {},
+        }),
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        position: 'relative',
+        minHeight: 40,
+    },
+    contentMinimal: {
+        paddingHorizontal: 12,
+        minHeight: 36,
+    },
+    backButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 10,
+    },
+    closeButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: 10,
+    },
+    titleContainer: {
+        flex: 1,
+        alignItems: 'flex-start',
+        justifyContent: 'center',
+    },
+    titleContainerLeft: {
+        alignItems: 'flex-start',
+    },
+    titleContainerCenter: {
+        alignItems: 'center',
+    },
+    titleContainerRight: {
+        alignItems: 'flex-end',
+    },
+    titleContainerMinimal: {
+        alignItems: 'center',
+        marginHorizontal: 16,
+    },
+    titleDefault: {
+        fontSize: 18,
+        fontWeight: '700',
+        fontFamily: fontFamilies.phuduBold,
+        letterSpacing: -0.5,
+        lineHeight: 22,
+    },
+    titleLarge: {
+        fontSize: 28,
+        fontWeight: '800',
+        fontFamily: fontFamilies.phuduExtraBold,
+        letterSpacing: -1,
+        lineHeight: 34,
+        marginBottom: 3,
+    },
+    titleMinimal: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        letterSpacing: -0.3,
+        lineHeight: 20,
+    },
+    subtitleDefault: {
+        fontSize: 14,
+        fontWeight: '400',
+        lineHeight: 17,
+        marginTop: 1,
+    },
+    subtitleLarge: {
+        fontSize: 16,
+        fontWeight: '400',
+        lineHeight: 19,
+        marginTop: 3,
+    },
+    subtitleMinimal: {
+        fontSize: 13,
+        fontWeight: '400',
+        lineHeight: 15,
+        marginTop: 1,
+    },
+    subtitleSmall: {
+        fontSize: 12,
+        fontWeight: '400',
+        lineHeight: 14,
+        marginTop: 0,
+    },
+    subtitleMuted: {
+        fontSize: 14,
+        fontWeight: '400',
+        lineHeight: 17,
+        marginTop: 1,
+        opacity: 0.7,
+    },
+    rightActionButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: 10,
+    },
+    iconActionButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+    },
+    textActionButton: {
+        paddingHorizontal: 14,
+        paddingVertical: 6,
+        borderRadius: 18,
+        minWidth: 56,
+    },
+    actionText: {
+        fontSize: 14,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        letterSpacing: -0.2,
+    },
+    loadingContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 2,
+    },
+    loadingDot: {
+        width: 4,
+        height: 4,
+        borderRadius: 2,
+        opacity: 0.6,
+    },
+});
+
+export default Header; 

package/src/ui/components/OxyProvider.tsx

@@ -30,6 +30,7 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
         onAuthStateChange,
         storageKeyPrefix,
         showInternalToaster = true,
+        baseURL, // Add support for baseURL
         ...bottomSheetProps
     } = props;
 
@@ -41,6 +42,7 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
         return (
             <OxyContextProvider
                 oxyServices={oxyServices}
+                baseURL={baseURL}
                 storageKeyPrefix={storageKeyPrefix}
                 onAuthStateChange={onAuthStateChange}
             >
@@ -53,6 +55,7 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
     return (
         <OxyContextProvider
             oxyServices={oxyServices}
+            baseURL={baseURL}
             storageKeyPrefix={storageKeyPrefix}
             onAuthStateChange={onAuthStateChange}
             bottomSheetRef={internalBottomSheetRef}
@@ -85,7 +88,7 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
  * and reimplemented using BottomSheetModal for better Android compatibility
  */
 const OxyBottomSheet: React.FC<OxyProviderProps> = ({
-    oxyServices,
+    oxyServices: providedOxyServices,
     initialScreen = 'SignIn',
     onClose,
     onAuthenticated,
@@ -95,6 +98,13 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
     autoPresent = false,
     showInternalToaster = true,
 }) => {
+    // Helper function to determine if native driver should be used
+    const shouldUseNativeDriver = () => {
+        return Platform.OS === 'ios';
+    };
+    // Get oxyServices from context if not provided as prop
+    const contextOxy = useOxy();
+    const oxyServices = providedOxyServices || contextOxy?.oxyServices;
     // Use the internal ref (which is passed as a prop from OxyProvider)
     const modalRef = useRef<BottomSheetModalRef>(null);
     const navigationRef = useRef<((screen: string, props?: Record<string, any>) => void) | null>(null);
@@ -116,13 +126,17 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                     };
                 }
             });
+
             // Add a method to navigate between screens
             // @ts-ignore
             bottomSheetRef.current._navigateToScreen = (screenName: string, props?: Record<string, any>) => {
+                console.log('_navigateToScreen called with:', screenName, props);
                 if (navigationRef.current) {
+                    console.log('Using navigationRef.current');
                     navigationRef.current(screenName, props);
                     return;
                 }
+                console.log('navigationRef.current not available, using event system');
                 if (typeof document !== 'undefined') {
                     const event = new CustomEvent('oxy:navigate', { detail: { screen: screenName, props } });
                     document.dispatchEvent(event);
@@ -130,6 +144,8 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                     (globalThis as any).oxyNavigateEvent = { screen: screenName, props };
                 }
             };
+
+            console.log('Bottom sheet ref methods exposed:', Object.keys(bottomSheetRef.current));
         }
     }, [bottomSheetRef, modalRef]);
     // Keyboard handling (unchanged)
@@ -168,13 +184,13 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                     Animated.timing(fadeAnim, {
                         toValue: 1,
                         duration: 300,
-                        useNativeDriver: Platform.OS === 'ios',
+                        useNativeDriver: shouldUseNativeDriver(),
                     }),
                     Animated.spring(slideAnim, {
                         toValue: 0,
                         friction: 8,
                         tension: 40,
-                        useNativeDriver: Platform.OS === 'ios',
+                        useNativeDriver: shouldUseNativeDriver(),
                     }),
                 ]).start();
             };
@@ -186,13 +202,13 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                     Animated.timing(fadeAnim, {
                         toValue: 1,
                         duration: 300,
-                        useNativeDriver: Platform.OS === 'ios',
+                        useNativeDriver: shouldUseNativeDriver(),
                     }),
                     Animated.spring(slideAnim, {
                         toValue: 0,
                         friction: 8,
                         tension: 40,
-                        useNativeDriver: Platform.OS === 'ios',
+                        useNativeDriver: shouldUseNativeDriver(),
                     }),
                 ]).start();
             }, 100);
@@ -204,7 +220,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
         Animated.timing(fadeAnim, {
             toValue: 0,
             duration: Platform.OS === 'android' ? 100 : 200,
-            useNativeDriver: Platform.OS === 'ios',
+            useNativeDriver: shouldUseNativeDriver(),
         }).start(() => {
             modalRef.current?.dismiss();
             if (onClose) {
@@ -304,15 +320,21 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                                 { opacity: fadeAnim, transform: [{ translateY: slideAnim }] }
                         ]}
                     >
-                        <OxyRouter
-                            oxyServices={oxyServices}
-                            initialScreen={initialScreen}
-                            onClose={handleClose}
-                            onAuthenticated={handleAuthenticated}
-                            theme={theme}
-                            navigationRef={navigationRef}
-                            containerWidth={800} // static, since dynamic sizing is used
-                        />
+                        {oxyServices ? (
+                            <OxyRouter
+                                oxyServices={oxyServices}
+                                initialScreen={initialScreen}
+                                onClose={handleClose}
+                                onAuthenticated={handleAuthenticated}
+                                theme={theme}
+                                navigationRef={navigationRef}
+                                containerWidth={800} // static, since dynamic sizing is used
+                            />
+                        ) : (
+                            <View style={styles.errorContainer}>
+                                <Text>OxyServices not available</Text>
+                            </View>
+                        )}
                     </Animated.View>
                 </View>
             </BottomSheetScrollView>

package/src/ui/components/index.ts

@@ -5,6 +5,7 @@ export { default as SectionTitle } from './SectionTitle';
 export { default as GroupedItem } from './GroupedItem';
 export { default as GroupedSection } from './GroupedSection';
 export { default as QuickActions } from './QuickActions';
+export { default as Header } from './Header';
 
 // Re-export existing components
 export { default as Avatar } from './Avatar';

package/src/ui/components/internal/GroupedPillButtons.tsx

@@ -247,7 +247,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
 const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
-        justifyContent: 'center',
+        justifyContent: 'flex-end',
         marginTop: 16,
         marginBottom: 8,
         width: '100%',