@oxyhq/services 5.14.0 → 5.15.1

package/src/ui/screens/karma/KarmaRulesScreen.tsx

@@ -1,21 +1,26 @@
 import type React from 'react';
 import { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
-import type { BaseScreenProps } from '../../navigation/types';
-import { useOxy } from '../../context/OxyContext';
+import type { BaseScreenProps } from '../../types/navigation';
 import { Header } from '../../components';
 import { useI18n } from '../../hooks/useI18n';
+import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { normalizeTheme } from '../../utils/themeUtils';
+import { useColorScheme } from '../../hooks/use-color-scheme';
+import { useOxy } from '../../context/OxyContext';
 
 const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
+    // Use useOxy() hook for OxyContext values
     const { oxyServices } = useOxy();
     const { t } = useI18n();
     const [rules, setRules] = useState<any[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
-    const isDarkTheme = theme === 'dark';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const colorScheme = useColorScheme();
+    const normalizedTheme = normalizeTheme(theme);
+    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    // Override primaryColor for Karma screens (purple instead of blue)
     const primaryColor = '#d169e5';
 
     useEffect(() => {
@@ -28,11 +33,11 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     }, [oxyServices]);
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <Header
                 title={t('karma.rules.title') || 'Karma Rules'}
                 subtitle={t('karma.rules.subtitle') || 'How to earn karma points'}
-                theme={theme}
+                
                 onBack={goBack}
                 elevation="subtle"
             />
@@ -43,11 +48,11 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
             ) : (
                 <ScrollView contentContainerStyle={styles.listContainer}>
                     {rules.length === 0 ? (
-                        <Text style={[styles.placeholder, { color: textColor }]}>{t('karma.rules.empty') || 'No rules found.'}</Text>
+                        <Text style={[styles.placeholder, { color: themeStyles.textColor }]}>{t('karma.rules.empty') || 'No rules found.'}</Text>
                     ) : (
                         rules.map((rule, idx) => (
                             <View key={rule.id || idx} style={styles.ruleRow}>
-                                <Text style={[styles.ruleDesc, { color: textColor }]}>{rule.description}</Text>
+                                <Text style={[styles.ruleDesc, { color: themeStyles.textColor }]}>{rule.description}</Text>
                             </View>
                         ))
                     )}

package/src/ui/stores/authStore.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import type { User } from '../../models/interfaces';
 
-interface AuthState {
+export interface AuthState {
   user: User | null;
   isAuthenticated: boolean;
   isLoading: boolean;

package/src/ui/styles/authStyles.ts

@@ -15,18 +15,12 @@ export interface AuthThemeColors {
 }
 
 export const createAuthStyles = (colors: AuthThemeColors, theme: string) => StyleSheet.create({
-  // Container styles
-  container: {
-    flex: 1,
-  },
-  scrollContent: {
-    flexGrow: 1,
-    paddingHorizontal: 24,
-    paddingTop: 0,
-    paddingBottom: 32,
-  },
+  // Container and scrollContent styles removed entirely
+  // All layout is handled by BottomSheetRouter's BottomSheetScrollView
+  // StepBasedScreen and step components are pure content renderers
   stepContainer: {
-    flex: 1,
+    // Removed flex: 1 - BottomSheetScrollView handles all layout
+    // This prevents unnecessary expansion that can cause spacing issues
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
   },

package/src/ui/styles/spacing.ts

@@ -8,18 +8,37 @@ import { StyleSheet } from 'react-native';
 export const STEP_GAP = 12; // Vertical gap between ALL elements (illustration, title, description, textfield, buttons, etc.) - must be consistent everywhere
 export const STEP_INNER_GAP = 12; // Gap within sections (headers, cards, etc.) - must match STEP_GAP for uniformity
 
+/**
+ * Re-export screen spacing constants from constants/spacing.ts
+ * This allows importing all spacing constants from a single location
+ */
+export {
+    SCREEN_PADDING_HORIZONTAL,
+    SCREEN_PADDING_VERTICAL,
+    SECTION_GAP,
+    SECTION_GAP_LARGE,
+    COMPONENT_GAP,
+    COMPONENT_GAP_SMALL,
+    HEADER_PADDING_TOP_OVERVIEW,
+    HEADER_PADDING_TOP_SETTINGS,
+} from '../constants/spacing';
+
 /**
  * Reusable stylesheet for step components
- * All step components should use these base styles for consistency
+ * NOTE: Layout styles (container, sectionSpacing) removed - all layout is handled by BottomSheetRouter
+ * Step components should NOT use these for layout, only for content-specific styling
  */
 export const stepStyles = StyleSheet.create({
     container: {
+        // Layout removed - use only for content width constraints if needed
         width: '100%',
         maxWidth: 420,
         alignSelf: 'center',
     },
     sectionSpacing: {
-        marginBottom: STEP_GAP,
+        // Layout removed - do NOT use for spacing, use explicit marginBottom: 0
+        // This is kept for backward compatibility but should not add margins
+        marginBottom: 0,
     },
     header: {
         alignItems: 'flex-start',

package/src/ui/styles/theme.ts

@@ -39,7 +39,7 @@ const lightColors: ThemeColors = {
 
 const darkColors: ThemeColors = {
   text: '#FFFFFF',
-  background: '#121212',
+  background: '#000000',
   inputBackground: '#333333',
   placeholder: '#AAAAAA',
   primary: '#d169e5',

package/src/ui/types/fileManagement.ts

@@ -0,0 +1,51 @@
+import type { BaseScreenProps } from './navigation';
+import type { FileMetadata } from '../../models/interfaces';
+
+// Exporting props & callback types so external callers (e.g. showBottomSheet config objects) can annotate
+export type OnConfirmFileSelection = (files: FileMetadata[]) => void;
+
+export interface FileManagementScreenProps extends BaseScreenProps {
+    userId?: string;
+    // Container width for responsive layout calculations
+    containerWidth?: number;
+    // Enable selection mode (acts like a picker). When true, opening a file selects it instead of showing viewer
+    selectMode?: boolean;
+    // Allow selecting multiple files; only used if selectMode is true
+    multiSelect?: boolean;
+    // Callback when a file is selected (single select mode)
+    onSelect?: (file: FileMetadata) => void;
+    // Callback when confirm pressed in multi-select mode
+    onConfirmSelection?: OnConfirmFileSelection;
+    // Initial selected file IDs for multi-select
+    initialSelectedIds?: string[];
+    maxSelection?: number;
+    disabledMimeTypes?: string[];
+    /**
+     * What to do after a single selection (non-multiSelect) is made.
+     * 'close' (default) will dismiss the bottom sheet via onClose.
+     * 'back' will navigate back to the previous screen (e.g., return to AccountSettings without closing sheet).
+     * 'none' will keep the picker open (caller can manually close or navigate).
+     */
+    afterSelect?: 'close' | 'back' | 'none';
+    allowUploadInSelectMode?: boolean;
+    /**
+     * Default visibility for uploaded files in this screen
+     * Useful for third-party apps that want files to be public (e.g., GIF selector)
+     */
+    defaultVisibility?: 'private' | 'public' | 'unlisted';
+    /**
+     * Link context for tracking file usage by third-party apps
+     * When provided, selected files will be linked to this entity
+     */
+    linkContext?: {
+        app: string;           // App identifier (e.g., 'chat-app', 'post-composer')
+        entityType: string;    // Type of entity (e.g., 'message', 'post', 'profile')
+        entityId: string;      // Unique ID of the entity using this file
+        webhookUrl?: string;   // Optional webhook URL to receive file events
+    };
+}
+
+export type ViewMode = 'all' | 'photos' | 'videos' | 'documents' | 'audio';
+export type SortBy = 'date' | 'size' | 'name' | 'type';
+export type SortOrder = 'asc' | 'desc';
+

package/src/ui/types/navigation.ts

@@ -0,0 +1,61 @@
+import type { ReactNode, RefObject } from 'react';
+import type { QueryClient } from '@tanstack/react-query';
+import type { RouteName } from '../navigation/routes';
+import type { User } from '../../models/interfaces';
+import type { ClientSession } from '../../models/session';
+
+// Re-export RouteName from routes for convenience
+export type { RouteName };
+
+export interface StepController {
+    canGoBack: () => boolean;
+    goBack: () => void;
+}
+
+export interface BaseScreenProps {
+    // Navigation props
+    navigate?: (screen: RouteName, props?: Record<string, unknown>) => void;
+    goBack?: () => void;
+    onClose?: () => void;
+    onAuthenticated?: (payload?: unknown) => void;
+    
+    // Theme props
+    theme?: 'light' | 'dark' | string;
+    
+    // Step-based screen props
+    initialStep?: number;
+    stepControllerRef?: RefObject<StepController | null>;
+    onStepChange?: (currentStep: number, totalSteps: number) => void;
+    
+    // Screen identification
+    currentScreen?: RouteName;
+    
+    // Scroll control
+    scrollTo?: (y: number, animated?: boolean) => void;
+    
+    // Form props (for sign in/up flows)
+    username?: string;
+    email?: string;
+    password?: string;
+    confirmPassword?: string;
+    userProfile?: unknown;
+    
+    // Note: OxyContext values (user, sessions, login, etc.) should be accessed via useOxy() hook
+    // This keeps props minimal and follows React best practices
+    
+    // Allow additional props for screen-specific data
+    [key: string]: unknown;
+}
+
+export interface OxyProviderProps {
+    oxyServices?: unknown;
+    children?: ReactNode;
+    contextOnly?: boolean;
+    onAuthStateChange?: (user: unknown) => void;
+    storageKeyPrefix?: string;
+    baseURL?: string;
+    queryClient?: QueryClient;
+}
+
+
+

package/src/ui/utils/colorUtils.ts

@@ -0,0 +1,46 @@
+/**
+ * Color utility functions
+ */
+
+/**
+ * Darkens a color by a specified factor
+ * Returns a darker version of the color
+ */
+export const darkenColor = (color: string, factor: number = 0.6): string => {
+    // Remove # if present
+    const hex = color.replace('#', '');
+
+    // Convert to RGB
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    // Darken by factor
+    const newR = Math.max(0, Math.round(r * (1 - factor)));
+    const newG = Math.max(0, Math.round(g * (1 - factor)));
+    const newB = Math.max(0, Math.round(b * (1 - factor)));
+
+    return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
+};
+
+/**
+ * Lightens a color by a specified factor
+ * Returns a lighter version of the color
+ */
+export const lightenColor = (color: string, factor: number = 0.3): string => {
+    // Remove # if present
+    const hex = color.replace('#', '');
+
+    // Convert to RGB
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    // Lighten by factor
+    const newR = Math.min(255, Math.round(r + (255 - r) * factor));
+    const newG = Math.min(255, Math.round(g + (255 - g) * factor));
+    const newB = Math.min(255, Math.round(b + (255 - b) * factor));
+
+    return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
+};
+

package/src/ui/utils/errorHandlers.ts

@@ -0,0 +1,136 @@
+import type { ApiError } from '../../models/interfaces';
+
+type ErrorWithMessage = {
+  message?: string;
+};
+
+type ErrorWithResponse = {
+  response?: {
+    status?: number;
+    data?: {
+      message?: string;
+      error?: string;
+    };
+  };
+};
+
+export interface HandleAuthErrorOptions {
+  defaultMessage: string;
+  code: string;
+  status?: number;
+  onError?: (error: ApiError) => void;
+  setAuthError?: (message: string) => void;
+  logger?: (message: string, error?: unknown) => void;
+}
+
+const DEFAULT_INVALID_SESSION_MESSAGES = [
+  'Invalid or expired session',
+  'Session is invalid',
+  'Session not found',
+  'Session expired',
+];
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null;
+
+const getResponseStatus = (error: unknown): number | undefined => {
+  if (!isObject(error)) return undefined;
+  const response = (error as ErrorWithResponse).response;
+  return response?.status;
+};
+
+/**
+ * Determine whether the error represents an invalid session condition.
+ * This centralizes 401 detection across different fetch clients.
+ */
+export const isInvalidSessionError = (error: unknown): boolean => {
+  const status = getResponseStatus(error);
+  if (status === 401) {
+    return true;
+  }
+
+  if (!isObject(error)) {
+    return false;
+  }
+
+  const normalizedMessage = extractErrorMessage(error)?.toLowerCase();
+  if (!normalizedMessage) {
+    return false;
+  }
+
+  return DEFAULT_INVALID_SESSION_MESSAGES.some((msg) =>
+    normalizedMessage.includes(msg.toLowerCase()),
+  );
+};
+
+/**
+ * Extract a consistent error message from unknown error shapes.
+ *
+ * @param error - The unknown error payload
+ * @param fallbackMessage - Message to return when no concrete message is available
+ */
+export const extractErrorMessage = (
+  error: unknown,
+  fallbackMessage = 'Unexpected error',
+): string => {
+  if (typeof error === 'string' && error.trim().length > 0) {
+    return error;
+  }
+
+  if (!isObject(error)) {
+    return fallbackMessage;
+  }
+
+  const withMessage = error as ErrorWithMessage;
+  if (withMessage.message && withMessage.message.trim().length > 0) {
+    return withMessage.message;
+  }
+
+  const withResponse = error as ErrorWithResponse;
+  const responseMessage =
+    withResponse.response?.data?.message ?? withResponse.response?.data?.error;
+
+  if (typeof responseMessage === 'string' && responseMessage.trim().length > 0) {
+    return responseMessage;
+  }
+
+  return fallbackMessage;
+};
+
+/**
+ * Centralized error handler for auth-related operations.
+ *
+ * @param error - Unknown error object
+ * @param options - Error handling configuration
+ * @returns Resolved error message
+ */
+export const handleAuthError = (
+  error: unknown,
+  {
+    defaultMessage,
+    code,
+    status,
+    onError,
+    setAuthError,
+    logger,
+  }: HandleAuthErrorOptions,
+): string => {
+  const resolvedStatus = status ?? getResponseStatus(error) ?? (isInvalidSessionError(error) ? 401 : 500);
+  const message = extractErrorMessage(error, defaultMessage);
+
+  if (logger) {
+    logger(message, error);
+  }
+
+  setAuthError?.(message);
+
+  onError?.({
+    message,
+    code,
+    status: resolvedStatus,
+  });
+
+  return message;
+};
+
+

package/src/ui/utils/fileManagement.ts

@@ -0,0 +1,190 @@
+import { Alert } from 'react-native';
+import type { FileMetadata } from '../../models/interfaces';
+import { File as ExpoFile } from 'expo-file-system';
+
+/**
+ * Format file size in bytes to human-readable string
+ */
+export function formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+/**
+ * Get icon name for file based on content type
+ */
+export function getFileIcon(contentType: string): string {
+    if (contentType.startsWith('image/')) return 'image';
+    if (contentType.startsWith('video/')) return 'videocam';
+    if (contentType.startsWith('audio/')) return 'musical-notes';
+    if (contentType.includes('pdf')) return 'document-text';
+    if (contentType.includes('word') || contentType.includes('doc')) return 'document';
+    if (contentType.includes('excel') || contentType.includes('sheet')) return 'grid';
+    if (contentType.includes('zip') || contentType.includes('archive')) return 'archive';
+    return 'document-outline';
+}
+
+/**
+ * Unified confirmation dialog - uses Alert.alert for all platforms
+ */
+export function confirmAction(
+    message: string,
+    title?: string,
+    confirmText: string = 'OK',
+    cancelText: string = 'Cancel'
+): Promise<boolean> {
+    return new Promise((resolve) => {
+        Alert.alert(
+            title || 'Confirm',
+            message,
+            [
+                {
+                    text: cancelText,
+                    style: 'cancel',
+                    onPress: () => resolve(false),
+                },
+                {
+                    text: confirmText,
+                    onPress: () => resolve(true),
+                },
+            ],
+            { cancelable: true, onDismiss: () => resolve(false) }
+        );
+    });
+}
+
+/**
+ * Convert DocumentPicker asset to File object
+ * Handles both web (native File API) and mobile (URI-based) file sources
+ * Expo 54 compatible - works across all platforms
+ */
+export async function convertDocumentPickerAssetToFile(
+    doc: { file?: File | Blob; uri?: string; name?: string | null; mimeType?: string | null; size?: number | null },
+    index: number
+): Promise<File | null> {
+    try {
+        let file: File | null = null;
+
+        // Priority 1: Use doc.file if available (web native File API)
+        // This is the most efficient path as it doesn't require fetching
+        if (doc.file && doc.file instanceof globalThis.File) {
+            file = doc.file as File;
+            // Ensure file has required properties
+            if (!file.name && doc.name) {
+                // Create new File with proper name if missing
+                file = new globalThis.File([file], doc.name, { type: file.type || doc.mimeType || 'application/octet-stream' });
+            }
+            // Preserve URI for preview if available (useful for mobile previews)
+            if (doc.uri) {
+                (file as any).uri = doc.uri;
+            }
+            return file;
+        }
+
+        // Priority 2: Use uri to create File using Expo 54 FileSystem API
+        // This path handles mobile file URIs (file://, content://) and web blob URLs
+        if (doc.uri) {
+            try {
+                // Check if it's a web blob URL - use fetch for those
+                if (doc.uri.startsWith('blob:') || doc.uri.startsWith('http://') || doc.uri.startsWith('https://')) {
+                    const response = await fetch(doc.uri);
+                    if (!response.ok) {
+                        throw new Error(`Failed to fetch file: ${response.statusText}`);
+                    }
+                    const blob = await response.blob();
+                    const fileName = doc.name || `file-${index + 1}`;
+                    const fileType = doc.mimeType || blob.type || 'application/octet-stream';
+                    file = new globalThis.File([blob], fileName, { type: fileType });
+                    // Preserve URI for preview
+                    (file as any).uri = doc.uri;
+                    return file;
+                }
+
+                // For mobile file URIs (file://, content://), use fetch to get blob
+                // React Native's Blob doesn't support Uint8Array directly, so we use fetch
+                const fileName = doc.name || `file-${index + 1}`;
+                const fileType = doc.mimeType || 'application/octet-stream';
+                
+                // Use fetch to get the file as a blob (works with file:// and content:// URIs in React Native)
+                const response = await fetch(doc.uri);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch file: ${response.statusText}`);
+                }
+                const blob = await response.blob();
+                file = new globalThis.File([blob], fileName, { type: fileType });
+                // Preserve URI for preview (especially important for mobile)
+                (file as any).uri = doc.uri;
+                return file;
+            } catch (error: any) {
+                console.error('Failed to read file from URI:', error);
+                throw new Error(`Failed to load file: ${error.message || 'Unknown error'}`);
+            }
+        }
+
+        // No file or URI available - this shouldn't happen with Expo 54
+        throw new Error('Missing file data (no file or uri property)');
+    } catch (error: any) {
+        console.error('Error converting document to file:', error);
+        throw error;
+    }
+}
+
+/**
+ * Helper to safely request a thumbnail variant only for image mime types.
+ * Prevents backend warnings: "Variant thumb not supported for mime application/pdf".
+ * 
+ * @param file - File metadata
+ * @param variant - Variant type (default: 'thumb')
+ * @param getFileDownloadUrl - Function to get download URL from oxyServices
+ */
+export function getSafeDownloadUrl(
+    file: FileMetadata,
+    variant: string = 'thumb',
+    getFileDownloadUrl: (fileId: string, variant?: string) => string
+): string {
+    const isImage = file.contentType.startsWith('image/');
+    const isVideo = file.contentType.startsWith('video/');
+
+    // Prefer explicit variant key if variants metadata present
+    if (file.variants && file.variants.length > 0) {
+        // For videos, try 'poster' regardless of requested variant
+        if (isVideo) {
+            const poster = file.variants.find(v => v.type === 'poster');
+            if (poster) return getFileDownloadUrl(file.id, 'poster');
+        }
+        if (isImage) {
+            const desired = file.variants.find(v => v.type === variant);
+            if (desired) return getFileDownloadUrl(file.id, variant);
+        }
+    }
+
+    if (isImage) {
+        return getFileDownloadUrl(file.id, variant);
+    }
+    if (isVideo) {
+        // Fallback to poster if backend supports implicit generation
+        try {
+            return getFileDownloadUrl(file.id, 'poster');
+        } catch {
+            return getFileDownloadUrl(file.id);
+        }
+    }
+    // Other mime types: no variant
+    return getFileDownloadUrl(file.id);
+}
+
+/**
+ * Upload file raw - helper function for file uploads
+ */
+export async function uploadFileRaw(
+    file: File | Blob,
+    userId: string,
+    oxyServices: any,
+    visibility?: 'private' | 'public' | 'unlisted'
+) {
+    return await oxyServices.uploadRawFile(file, visibility);
+}
+