@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/navigation/OxyRouter.tsx

@@ -1,216 +0,0 @@
-import type React from 'react';
-import { useState, useEffect, useCallback, memo } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { OxyServices } from '../../core';
-import ErrorBoundary from '../components/ErrorBoundary';
-
-// Import types and route registry
-import type { OxyRouterProps } from './types';
-import { routes, routeNames } from './routes';
-import type { RouteName } from './routes';
-
-// Helper function to validate route names at runtime
-const isValidRouteName = (screen: string): screen is RouteName => {
-    return routeNames.includes(screen as RouteName);
-};
-
-// Helper function for safe navigation with validation
-const validateAndNavigate = (
-    screen: string,
-    props: Record<string, any>,
-    setCurrentScreen: (screen: RouteName) => void,
-    setScreenHistory: React.Dispatch<React.SetStateAction<RouteName[]>>,
-    setScreenPropsMap: React.Dispatch<React.SetStateAction<Partial<Record<RouteName, any>>>>
-): boolean => {
-    if (!isValidRouteName(screen)) {
-        const errorMsg = `Invalid route name: "${screen}". Valid routes are: ${routeNames.join(', ')}`;
-        console.error('OxyRouter:', errorMsg);
-        if (process.env.NODE_ENV !== 'production') {
-            console.error('Navigation error:', errorMsg);
-        }
-        return false;
-    }
-
-    if (!routes[screen]) {
-        const errorMsg = `Route "${screen}" is registered but component is missing`;
-        console.error('OxyRouter:', errorMsg);
-        if (process.env.NODE_ENV !== 'production') {
-            console.error('Navigation error:', errorMsg);
-        }
-        return false;
-    }
-
-    return true;
-};
-
-const OxyRouter: React.FC<OxyRouterProps> = ({
-    oxyServices,
-    initialScreen,
-    onClose,
-    onAuthenticated,
-    theme,
-    adjustSnapPoints,
-    navigationRef,
-    containerWidth,
-}) => {
-    const [currentScreen, setCurrentScreen] = useState<RouteName>(initialScreen);
-    const [screenHistory, setScreenHistory] = useState<RouteName[]>([initialScreen]);
-    // Store props per screen for correct restoration on back
-    const [screenPropsMap, setScreenPropsMap] = useState<Partial<Record<RouteName, any>>>({ [initialScreen]: {} });
-
-    // Update snap points when the screen changes
-    useEffect(() => {
-        if ((routes as any)[currentScreen] && typeof adjustSnapPoints === 'function') {
-            adjustSnapPoints((routes as any)[currentScreen].snapPoints);
-        }
-    }, [currentScreen, adjustSnapPoints]);
-
-    // Memoized navigation methods with validation
-    const navigate = useCallback((screen: RouteName, props: Record<string, any> = {}) => {
-        if (__DEV__) console.log('OxyRouter: navigate called', screen, props);
-        
-        // Validate route before navigating
-        if (!validateAndNavigate(screen, props, setCurrentScreen, setScreenHistory, setScreenPropsMap)) {
-            return; // Early return if validation fails
-        }
-
-        // All validations passed, proceed with navigation
-        setCurrentScreen(screen);
-        setScreenHistory(prev => [...prev, screen]);
-        setScreenPropsMap(prev => ({ ...prev, [screen]: props }));
-    }, []);
-
-    const goBack = useCallback(() => {
-        setScreenHistory(prev => {
-            if (prev.length > 1) {
-                const newHistory = [...prev];
-                newHistory.pop();
-                const previousScreen = newHistory[newHistory.length - 1];
-                setCurrentScreen(previousScreen);
-                return newHistory;
-            } else {
-                if (onClose) onClose();
-                return prev;
-            }
-        });
-    }, [onClose]);
-
-    // Expose the navigate function to the parent component
-    useEffect(() => {
-        if (navigationRef) {
-            navigationRef.current = navigate;
-            if (__DEV__) console.log('OxyRouter: navigationRef set');
-        }
-        return () => {
-            if (navigationRef) {
-                navigationRef.current = null;
-                if (__DEV__) console.log('OxyRouter: navigationRef cleared');
-            }
-        };
-    }, [navigate, navigationRef]);
-
-    // Expose the navigate method to the parent component (OxyProvider)
-    useEffect(() => {
-        const handleNavigationEvent = (event: any) => {
-            if (event && event.detail) {
-                if (typeof event.detail === 'string') {
-                    // Validate string route name before navigating
-                    if (isValidRouteName(event.detail)) {
-                        navigate(event.detail as RouteName);
-                    } else {
-                        console.error('OxyRouter: Invalid route name in event:', event.detail);
-                    }
-                } else if (typeof event.detail === 'object' && event.detail.screen) {
-                    const { screen, props } = event.detail;
-                    // Validate route name before navigating
-                    if (isValidRouteName(screen)) {
-                        navigate(screen as RouteName, props || {});
-                    } else {
-                        console.error('OxyRouter: Invalid route name in event:', screen);
-                    }
-                }
-            }
-        };
-
-        let intervalId: any = null;
-        if (typeof document !== 'undefined' && document.addEventListener) {
-            document.addEventListener('oxy:navigate', handleNavigationEvent);
-        } else {
-            intervalId = setInterval(() => {
-                const globalNav = (globalThis as any).oxyNavigateEvent;
-                if (globalNav && globalNav.screen) {
-                    // Validate route name before navigating
-                    if (isValidRouteName(globalNav.screen)) {
-                        navigate(globalNav.screen as RouteName, globalNav.props || {});
-                        (globalThis as any).oxyNavigateEvent = null;
-                    } else {
-                        console.error('OxyRouter: Invalid route name in global event:', globalNav.screen);
-                        (globalThis as any).oxyNavigateEvent = null; // Clear invalid event
-                    }
-                }
-            }, 100);
-        }
-        return () => {
-            if (typeof document !== 'undefined' && document.removeEventListener) {
-                document.removeEventListener('oxy:navigate', handleNavigationEvent);
-            }
-            if (intervalId) {
-                clearInterval(intervalId);
-            }
-        };
-    }, [navigate]);
-
-    // Render the current screen component with error boundary
-    const renderScreen = () => {
-        const CurrentScreen = (routes as any)[currentScreen]?.component;
-        if (!CurrentScreen) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.error(`Screen "${currentScreen}" not found`);
-            }
-            return <View style={styles.errorContainer} />;
-        }
-        return (
-            <ErrorBoundary
-                onError={(error, errorInfo) => {
-                    console.error(`Error in screen "${currentScreen}":`, error, errorInfo);
-                }}
-            >
-                <CurrentScreen
-                    oxyServices={oxyServices}
-                    navigate={navigate}
-                    goBack={goBack}
-                    onClose={onClose}
-                    onAuthenticated={onAuthenticated}
-                    theme={theme}
-                    containerWidth={containerWidth}
-                    {...(screenPropsMap[currentScreen] || {})}
-                />
-            </ErrorBoundary>
-        );
-    };
-
-    return (
-        <View style={styles.container}>
-            {renderScreen()}
-        </View>
-    );
-};
-
-// Memoize the router component to prevent unnecessary re-renders
-const MemoizedOxyRouter = memo(OxyRouter);
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    errorContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: 100,
-    },
-});
-
-// Export both the memoized version (default) and the original for testing
-export { OxyRouter };
-export default MemoizedOxyRouter;

package/src/ui/navigation/types.ts

@@ -1,164 +0,0 @@
-import type { OxyServices } from '../../core';
-import type { User } from '../../models/interfaces';
-import type { ReactNode } from 'react';
-import type { QueryClient } from '@tanstack/react-query';
-import type { RouteName } from './routes';
-
-/**
- * Base props for all screens in the Oxy UI system
- */
-export interface BaseScreenProps {
-  oxyServices: OxyServices;
-  navigate: (screen: RouteName, props?: Record<string, unknown>) => void;
-  goBack: () => void;
-  onClose?: () => void;
-  onAuthenticated?: (user: User) => void;
-  theme: 'light' | 'dark';
-  containerWidth?: number;
-  initialStep?: number;
-  username?: string;
-  userProfile?: User;
-}
-
-/**
- * Route configuration for OxyRouter
- */
-// Route config moved to routes.ts to avoid cycles; re-exported here if needed
-export { routes } from './routes';
-export type { RouteName } from './routes';
-
-/**
- * Props for OxyRouter component
- */
-export interface OxyRouterProps {
-  oxyServices: OxyServices;
-  initialScreen: RouteName;
-  onClose?: () => void;
-  onAuthenticated?: (user: User) => void;
-  theme: 'light' | 'dark';
-  adjustSnapPoints?: (snapPoints: string[]) => void;
-  navigationRef?: React.MutableRefObject<((screen: RouteName, props?: Record<string, unknown>) => void) | null>;
-  containerWidth?: number;
-}
-
-/**
- * Props for the OxyProvider component
- */
-export interface OxyProviderProps {
-  /**
-   * Instance of OxyServices (optional if baseURL is provided)
-   */
-  oxyServices?: OxyServices;
-  
-  /**
-   * API base URL for automatic service creation (optional if oxyServices is provided)
-   */
-  baseURL?: string;
-  
-  /**
-   * Initial screen to display
-   * @default "SignIn"
-   */
-  initialScreen?: RouteName;
-  
-  /**
-   * Callback when the bottom sheet is closed
-   */
-  onClose?: () => void;
-  
-  /**
-   * Callback when a user successfully authenticates
-   */
-  onAuthenticated?: (user: User) => void;
-  
-  /**
-   * UI theme
-   * @default "light"
-   */
-  theme?: 'light' | 'dark';
-  
-  /**
-   * @internal
-   * Reference to the bottom sheet component (for internal use only)
-   * @hidden
-   */
-  bottomSheetRef?: React.RefObject<BottomSheetController | null>;
-  
-  /**
-   * Whether to automatically present the bottom sheet when component mounts
-   * @default false
-   */
-  autoPresent?: boolean;
-  
-  /**
-   * Custom styles for the bottom sheet
-   */
-  customStyles?: {
-    /**
-     * Background color of the bottom sheet
-     */
-    backgroundColor?: string;
-    
-    /**
-     * Color of the handle indicator
-     */
-    handleColor?: string;
-
-    /**
-     * Content padding
-     */
-    contentPadding?: number;
-  };
-
-  /**
-   * Child components to render within the provider
-   */
-  children?: ReactNode;
-
-  /**
-   * When true, only provides the authentication context without rendering the bottom sheet UI
-   * @default false
-   */
-  contextOnly?: boolean;
-
-  /**
-   * Callback when authentication state changes
-   */
-  onAuthStateChange?: (user: User | null) => void;
-
-  /**
-   * Prefix for keys in AsyncStorage
-   * @default "oxy"
-   */
-  storageKeyPrefix?: string;
-
-  /**
-   * Whether to show the internal toaster in the bottom sheet
-   * If false, only the provider's global toaster will be shown
-   * @default true
-   */
-  showInternalToaster?: boolean;
-
-  /**
-   * Optional QueryClient instance for React Query. If not provided, a sensible default is created.
-   */
-  queryClient?: QueryClient;
-
-  appInsets?: {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-  };
-}
-
-// Typed imperative controller for the bottom sheet UI
-export interface BottomSheetController {
-  present: () => void;
-  dismiss: () => void;
-  expand: () => void;
-  collapse: () => void;
-  snapToIndex: (index: number) => void;
-  snapToPosition: (position: number | string) => void;
-  navigate: (screen: RouteName | string, props?: Record<string, any>) => void;
-}

package/src/ui/screens/AccountManagementDemo.tsx

@@ -1,297 +0,0 @@
-import type React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
-import OxyProvider from '../components/OxyProvider';
-import { OxyServices } from '../../core';
-
-/**
- * Demo component showcasing the complete account management UI flow
- * This demonstrates how all the account screens work together
- */
-const AccountManagementDemo: React.FC = () => {
-    const oxyServices = new OxyServices({
-        baseURL: 'https://api.oxy.so'
-    });
-
-    return (
-        <View style={styles.container}>
-            <ScrollView style={styles.content}>
-                <Text style={styles.title}>Account Management System Demo</Text>
-                <Text style={styles.description}>
-                    Complete account management flow with 5 interconnected screens:
-                </Text>
-
-                <View style={styles.screensList}>
-                    <ScreenCard
-                        title="AccountCenterScreen"
-                        description="Main account hub and entry point"
-                        features={[
-                            'User profile display',
-                            'Quick access to all account features',
-                            'Multi-account switching',
-                            'Session management access'
-                        ]}
-                        navigatesTo={['AccountOverview', 'AccountSwitcher', 'EditProfile', 'SessionManagement']}
-                    />
-
-                    <ScreenCard
-                        title="AccountOverviewScreen"
-                        description="Comprehensive account information and management"
-                        features={[
-                            'Detailed profile information',
-                            'Account settings shortcuts',
-                            'Subscription management',
-                            'Privacy and security overview'
-                        ]}
-                        navigatesTo={['EditProfile', 'SessionManagement']}
-                    />
-
-                    <ScreenCard
-                        title="EditProfileScreen"
-                        description="Complete account configuration and preferences"
-                        features={[
-                            'Profile editing (username, email, name)',
-                            'Password management',
-                            'Security settings',
-                            'Notification preferences',
-                            'Tabbed interface for organization'
-                        ]}
-                        navigatesTo={['Previous screen via goBack()']}
-                    />
-
-                    <ScreenCard
-                        title="AccountSwitcherScreen"
-                        description="Multi-account management and switching"
-                        features={[
-                            'View all saved accounts',
-                            'Switch between accounts',
-                            'Remove unwanted accounts',
-                            'Device session management',
-                            'Add new accounts'
-                        ]}
-                        navigatesTo={['SignIn', 'Account switching']}
-                    />
-
-                    <ScreenCard
-                        title="SessionManagementScreen"
-                        description="Active session management across devices"
-                        features={[
-                            'View all active sessions',
-                            'Device information display',
-                            'Logout specific sessions',
-                            'Logout all sessions',
-                            'Session security monitoring'
-                        ]}
-                        navigatesTo={['Session logout actions']}
-                    />
-                </View>
-
-                <View style={styles.navigationFlow}>
-                    <Text style={styles.sectionTitle}>Navigation Flow</Text>
-                    <Text style={styles.flowDescription}>
-                        The screens are designed with intuitive navigation patterns:
-                    </Text>
-
-                    <View style={styles.flowItem}>
-                        <Text style={styles.flowStep}>1. Entry Point</Text>
-                        <Text style={styles.flowText}>Users typically start at AccountCenterScreen</Text>
-                    </View>
-
-                    <View style={styles.flowItem}>
-                        <Text style={styles.flowStep}>2. Explore</Text>
-                        <Text style={styles.flowText}>Navigate to specific screens based on needs</Text>
-                    </View>
-
-                    <View style={styles.flowItem}>
-                        <Text style={styles.flowStep}>3. Manage</Text>
-                        <Text style={styles.flowText}>Perform account actions in specialized screens</Text>
-                    </View>
-
-                    <View style={styles.flowItem}>
-                        <Text style={styles.flowStep}>4. Return</Text>
-                        <Text style={styles.flowText}>Navigate back or to related screens seamlessly</Text>
-                    </View>
-                </View>
-
-                <View style={styles.demoSection}>
-                    <Text style={styles.sectionTitle}>Try the Demo</Text>
-                    <TouchableOpacity style={styles.demoButton}>
-                        <Text style={styles.demoButtonText}>
-                            Launch Account Center
-                        </Text>
-                    </TouchableOpacity>
-                </View>
-            </ScrollView>
-
-            {/* The actual OxyProvider would be used here in a real implementation */}
-            <OxyProvider
-                oxyServices={oxyServices}
-                initialScreen="AccountCenter"
-                theme="light"
-                autoPresent={false}
-            />
-        </View>
-    );
-};
-
-const ScreenCard: React.FC<{
-    title: string;
-    description: string;
-    features: string[];
-    navigatesTo: string[];
-}> = ({ title, description, features, navigatesTo }) => (
-    <View style={styles.screenCard}>
-        <Text style={styles.screenTitle}>{title}</Text>
-        <Text style={styles.screenDescription}>{description}</Text>
-
-        <Text style={styles.featuresTitle}>Features:</Text>
-        {features.map((feature, index) => (
-            <Text key={index} style={styles.feature}>• {feature}</Text>
-        ))}
-
-        <Text style={styles.navigationTitle}>Navigates to:</Text>
-        {navigatesTo.map((nav, index) => (
-            <Text key={index} style={styles.navigationItem}>→ {nav}</Text>
-        ))}
-    </View>
-);
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#F5F5F5',
-    },
-    content: {
-        flex: 1,
-        padding: 20,
-    },
-    title: {
-        fontSize: 28,
-        fontWeight: 'bold',
-        color: '#333',
-        marginBottom: 10,
-        textAlign: 'center',
-    },
-    description: {
-        fontSize: 16,
-        color: '#666',
-        marginBottom: 20,
-        textAlign: 'center',
-        lineHeight: 22,
-    },
-    screensList: {
-        marginBottom: 30,
-    },
-    screenCard: {
-        backgroundColor: '#FFFFFF',
-        borderRadius: 12,
-        padding: 20,
-        marginBottom: 16,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 3,
-    },
-    screenTitle: {
-        fontSize: 20,
-        fontWeight: 'bold',
-        color: '#0066CC',
-        marginBottom: 8,
-    },
-    screenDescription: {
-        fontSize: 14,
-        color: '#666',
-        marginBottom: 12,
-        lineHeight: 20,
-    },
-    featuresTitle: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#333',
-        marginBottom: 8,
-    },
-    feature: {
-        fontSize: 14,
-        color: '#555',
-        marginBottom: 4,
-        marginLeft: 10,
-    },
-    navigationTitle: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#333',
-        marginTop: 12,
-        marginBottom: 8,
-    },
-    navigationItem: {
-        fontSize: 14,
-        color: '#0066CC',
-        marginBottom: 4,
-        marginLeft: 10,
-    },
-    navigationFlow: {
-        backgroundColor: '#FFFFFF',
-        borderRadius: 12,
-        padding: 20,
-        marginBottom: 30,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 3,
-    },
-    sectionTitle: {
-        fontSize: 22,
-        fontWeight: 'bold',
-        color: '#333',
-        marginBottom: 12,
-    },
-    flowDescription: {
-        fontSize: 14,
-        color: '#666',
-        marginBottom: 16,
-        lineHeight: 20,
-    },
-    flowItem: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        marginBottom: 12,
-    },
-    flowStep: {
-        fontSize: 14,
-        fontWeight: 'bold',
-        color: '#0066CC',
-        minWidth: 80,
-    },
-    flowText: {
-        fontSize: 14,
-        color: '#555',
-        flex: 1,
-        lineHeight: 20,
-    },
-    demoSection: {
-        backgroundColor: '#FFFFFF',
-        borderRadius: 12,
-        padding: 20,
-        alignItems: 'center',
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 3,
-    },
-    demoButton: {
-        backgroundColor: '#0066CC',
-        borderRadius: 25,
-        paddingHorizontal: 30,
-        paddingVertical: 12,
-        marginTop: 10,
-    },
-    demoButtonText: {
-        color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
-    },
-});
-
-export default AccountManagementDemo;