@oxyhq/services 5.7.5 → 5.8.1

package/src/node/index.ts

@@ -7,10 +7,28 @@ import { OxyServices, OXY_CLOUD_URL } from '../core'; // Adjusted path
 import { createAuth } from './createAuth';
 import * as Models from '../models/interfaces'; // Adjusted path
 
+// ------------- Enhanced Authentication Imports -------------
+import { 
+  OxyAuth, 
+  AuthRequest,
+  AuthOptions,
+  AuthMiddlewareOptions,
+  TokenValidationResult
+} from './createAuth';
+
 // ------------- Core Exports -------------
 export { OxyServices, OXY_CLOUD_URL };
 
-// Zero-config auth and session router
+// ------------- Enhanced Authentication Exports -------------
+export { 
+  OxyAuth, 
+  AuthRequest,
+  AuthOptions,
+  AuthMiddlewareOptions,
+  TokenValidationResult
+};
+
+// Zero-config auth and session router (legacy)
 export { createAuth };
 
 // ------------- Model Exports -------------

package/src/ui/components/Avatar.tsx

@@ -112,13 +112,15 @@ const Avatar: React.FC<AvatarProps> = ({
         );
     }
 
-    // If an image URL is provided, use Image component
+    // If an image URL is provided, use Image component with optional background
     if (uri) {
         return (
-            <Image
-                source={{ uri: uri }}
-                style={[styles.container, containerStyle, imageStyle]}
-            />
+            <View style={[styles.container, containerStyle, { backgroundColor: bgColor }, style]}>
+                <Image
+                    source={{ uri: uri }}
+                    style={[styles.image, containerStyle, imageStyle]}
+                />
+            </View>
         );
     }
 
@@ -146,6 +148,10 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
     },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
     text: {
         // Font family is applied directly in the component to use the constants
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined, // Only apply fontWeight on web

package/src/ui/components/GroupedItem.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 
 interface GroupedItemProps {
     icon?: string;
     iconColor?: string;
+    image?: string;
+    imageSize?: number;
     title: string;
     subtitle?: string;
     theme: 'light' | 'dark';
@@ -13,12 +15,18 @@ interface GroupedItemProps {
     isLast?: boolean;
     showChevron?: boolean;
     disabled?: boolean;
+    selected?: boolean;
     customContent?: React.ReactNode;
+    customIcon?: React.ReactNode;
+    multiRow?: boolean;
+    customContentBelow?: React.ReactNode;
 }
 
 const GroupedItem: React.FC<GroupedItemProps> = ({
     icon,
     iconColor = '#007AFF',
+    image,
+    imageSize = 20,
     title,
     subtitle,
     theme,
@@ -27,36 +35,57 @@ const GroupedItem: React.FC<GroupedItemProps> = ({
     isLast = false,
     showChevron = true,
     disabled = false,
+    selected = false,
     customContent,
+    customIcon,
+    multiRow = false,
+    customContentBelow,
 }) => {
     const isDarkTheme = theme === 'dark';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
     const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
+    const selectedBackgroundColor = selected ? `${iconColor}15` : secondaryBackgroundColor;
 
     const itemStyles = [
         styles.groupedItem,
         isFirst && styles.firstGroupedItem,
         isLast && styles.lastGroupedItem,
-        { backgroundColor: secondaryBackgroundColor },
+        {
+            backgroundColor: selected ? selectedBackgroundColor : secondaryBackgroundColor,
+        },
     ];
 
     const content = (
-        <View style={styles.groupedItemContent}>
-            {icon && (
-                <Ionicons name={icon as any} size={20} color={iconColor} style={styles.actionIcon} />
-            )}
-            <View style={styles.actionTextContainer}>
+        <View style={[styles.groupedItemContent, multiRow && styles.groupedItemContentMultiRow]}>
+            {customIcon ? (
+                <View style={styles.actionIcon}>
+                    {customIcon}
+                </View>
+            ) : image ? (
+                <Image
+                    source={{ uri: image }}
+                    style={[styles.actionImage, { width: imageSize, height: imageSize }]}
+                />
+            ) : icon ? (
+                <View style={[styles.iconContainer, { backgroundColor: `${iconColor}20` }]}>
+                    <Ionicons name={icon as any} size={20} color={iconColor} />
+                </View>
+            ) : null}
+            <View style={[styles.actionTextContainer, multiRow && styles.actionTextContainerMultiRow]}>
                 <Text style={[styles.actionButtonText, { color: textColor }]}>{title}</Text>
                 {subtitle && (
                     <Text style={[styles.actionButtonSubtext, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                         {subtitle}
                     </Text>
                 )}
+                {customContentBelow}
             </View>
             {customContent}
-            {showChevron && (
+            {selected ? (
+                <Ionicons name="checkmark-circle" size={20} color={iconColor || '#007AFF'} />
+            ) : showChevron ? (
                 <Ionicons name="chevron-forward" size={16} color={isDarkTheme ? '#666666' : '#999999'} />
-            )}
+            ) : null}
         </View>
     );
 
@@ -101,6 +130,18 @@ const styles = StyleSheet.create({
     actionIcon: {
         marginRight: 12,
     },
+    iconContainer: {
+        width: 38,
+        height: 38,
+        borderRadius: 19,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    actionImage: {
+        marginRight: 12,
+        borderRadius: 16,
+    },
     actionTextContainer: {
         flex: 1,
     },
@@ -113,6 +154,13 @@ const styles = StyleSheet.create({
         fontSize: 13,
         lineHeight: 18,
     },
+    groupedItemContentMultiRow: {
+        alignItems: 'flex-start',
+        paddingVertical: 12,
+    },
+    actionTextContainerMultiRow: {
+        alignItems: 'flex-start',
+    },
 });
 
 export default GroupedItem;

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,364 @@
+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';
+}
+
+const Header: React.FC<HeaderProps> = ({
+    title,
+    subtitle,
+    onBack,
+    onClose,
+    rightAction,
+    theme,
+    showBackButton = true,
+    showCloseButton = false,
+    variant = 'default',
+    elevation = 'subtle',
+}) => {
+    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 :
+                styles.subtitleDefault;
+
+        return (
+            <View style={[
+                styles.titleContainer,
+                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',
+    },
+    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,
+        fontFamily: fontFamilies.phuduMedium,
+        lineHeight: 17,
+        marginTop: 1,
+    },
+    subtitleLarge: {
+        fontSize: 16,
+        fontFamily: fontFamilies.phuduMedium,
+        lineHeight: 19,
+        marginTop: 3,
+    },
+    subtitleMinimal: {
+        fontSize: 13,
+        fontFamily: fontFamilies.phuduMedium,
+        lineHeight: 15,
+        marginTop: 1,
+    },
+    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;