@oxyhq/services 5.24.0 → 5.26.0

package/src/shared/utils/themeUtils.ts

@@ -0,0 +1,115 @@
+/**
+ * Theme Utility Functions
+ *
+ * Consolidated theme utilities for normalizing and handling color schemes
+ * across the OxyServices ecosystem.
+ *
+ * @module shared/utils/themeUtils
+ */
+
+/**
+ * Valid theme values in the Oxy ecosystem.
+ */
+export type ThemeValue = 'light' | 'dark';
+
+/**
+ * Normalizes a theme value to ensure it's always 'light' or 'dark'.
+ *
+ * @param theme - Theme value (may be 'light' | 'dark' | string | undefined)
+ * @returns Normalized 'light' | 'dark' theme (defaults to 'light')
+ *
+ * @example
+ * ```ts
+ * normalizeTheme('dark');     // 'dark'
+ * normalizeTheme('light');    // 'light'
+ * normalizeTheme('unknown');  // 'light'
+ * normalizeTheme(undefined);  // 'light'
+ * normalizeTheme(null);       // 'light'
+ * ```
+ */
+export const normalizeTheme = (theme?: string | null): ThemeValue =>
+  theme === 'light' || theme === 'dark' ? theme : 'light';
+
+/**
+ * Normalizes a color scheme value with optional fallback chain.
+ *
+ * Handles null/undefined cases from React Native's useColorScheme() hook
+ * with a proper fallback chain.
+ *
+ * @param colorScheme - The color scheme from useColorScheme() hook (may be null/undefined)
+ * @param theme - Optional theme prop as fallback
+ * @returns Normalized 'light' | 'dark' color scheme
+ *
+ * @example
+ * ```ts
+ * // In a React Native component:
+ * const systemScheme = useColorScheme(); // might be null
+ * const colorScheme = normalizeColorScheme(systemScheme, props.theme);
+ *
+ * normalizeColorScheme('dark', 'light');      // 'dark'
+ * normalizeColorScheme(null, 'dark');         // 'dark'
+ * normalizeColorScheme(undefined, undefined); // 'light'
+ * ```
+ */
+export const normalizeColorScheme = (
+  colorScheme?: string | null,
+  theme?: string
+): ThemeValue => {
+  if (colorScheme === 'light' || colorScheme === 'dark') {
+    return colorScheme;
+  }
+
+  if (theme === 'light' || theme === 'dark') {
+    return theme;
+  }
+
+  return 'light';
+};
+
+/**
+ * Gets the opposite theme value.
+ *
+ * @param theme - Current theme value
+ * @returns The opposite theme ('light' → 'dark', 'dark' → 'light')
+ *
+ * @example
+ * ```ts
+ * getOppositeTheme('light'); // 'dark'
+ * getOppositeTheme('dark');  // 'light'
+ * ```
+ */
+export const getOppositeTheme = (theme: ThemeValue): ThemeValue =>
+  theme === 'light' ? 'dark' : 'light';
+
+/**
+ * Checks if the system prefers dark mode.
+ *
+ * This function only works in browser environments.
+ * Returns false in non-browser environments (Node.js, React Native).
+ *
+ * @returns true if system prefers dark mode, false otherwise
+ *
+ * @example
+ * ```ts
+ * if (systemPrefersDarkMode()) {
+ *   setTheme('dark');
+ * }
+ * ```
+ */
+export const systemPrefersDarkMode = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+};
+
+/**
+ * Gets the system's preferred color scheme.
+ *
+ * @returns 'dark' if system prefers dark mode, 'light' otherwise
+ *
+ * @example
+ * ```ts
+ * const theme = getSystemColorScheme();
+ * ```
+ */
+export const getSystemColorScheme = (): ThemeValue =>
+  systemPrefersDarkMode() ? 'dark' : 'light';

package/src/ui/components/BottomSheetRouter.tsx

@@ -4,7 +4,7 @@ import { useStore } from 'zustand';
 import type { RouteName } from '../navigation/routes';
 import { getScreenComponent, isValidRoute } from '../navigation/routes';
 import type { BaseScreenProps } from '../types/navigation';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { Colors } from '../constants/theme';
 import BottomSheet, { type BottomSheetRef } from './BottomSheet';
 import {

package/src/ui/components/FontLoader.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Platform } from 'react-native';
 import * as Font from 'expo-font';
 

package/src/ui/components/GroupedItem.tsx

@@ -3,7 +3,7 @@ import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 // @ts-ignore - MaterialCommunityIcons is available at runtime
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { darkenColor } from '../utils/colorUtils';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { Colors } from '../constants/theme';

package/src/ui/components/Header.tsx

@@ -14,7 +14,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import OxyIcon from './icon/OxyIcon';
 import { fontFamilies } from '../styles/fonts';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { Colors } from '../constants/theme';
 

package/src/ui/components/OxyProvider.tsx

@@ -19,6 +19,7 @@ const isWeb = Platform.OS === 'web';
 // Conditionally import components
 let KeyboardProvider: any = ({ children }: any) => children;
 let BottomSheetRouter: any = null;
+let SignInModal: any = null;
 
 // KeyboardProvider only on native
 if (!isWeb) {
@@ -36,6 +37,13 @@ try {
     // BottomSheetRouter not available
 }
 
+// SignInModal works on all platforms
+try {
+    SignInModal = require('./SignInModal').default;
+} catch {
+    // SignInModal not available
+}
+
 /**
  * OxyProvider - Universal provider for Expo apps (native + web)
  *
@@ -206,6 +214,8 @@ const OxyProvider: FC<OxyProviderProps> = ({
                 {children}
                 {/* Only render bottom sheet router on native */}
                 {BottomSheetRouter && <BottomSheetRouter />}
+                {/* Sign-in modal for all platforms */}
+                {SignInModal && <SignInModal />}
                 <Toaster />
             </OxyContextProvider>
         </QueryClientProvider>

package/src/ui/components/OxySignInButton.tsx

@@ -1,9 +1,10 @@
 import type React from 'react';
-import { useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform } from 'react-native';
 import { useAuth } from '../hooks/useAuth';
 import { fontFamilies } from '../styles/fonts';
 import OxyLogo from './OxyLogo';
+import { showSignInModal, subscribeToSignInModal } from './SignInModal';
 
 export interface OxySignInButtonProps {
     /**
@@ -81,36 +82,33 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     disabled = false,
     showWhenAuthenticated = false,
 }) => {
-    const { isAuthenticated, signIn, isLoading } = useAuth();
-    const [isSigningIn, setIsSigningIn] = useState(false);
+    const { isAuthenticated, isLoading } = useAuth();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    // Subscribe to modal close events
+    useEffect(() => {
+        return subscribeToSignInModal(setIsModalOpen);
+    }, []);
 
     // Don't show the button if already authenticated (unless explicitly overridden)
     if (isAuthenticated && !showWhenAuthenticated) return null;
 
-    // Default handler that uses useAuth's signIn method
-    // This works for both web (popup) and native (bottom sheet)
-    const handlePress = async () => {
+    // Handle button press - opens full-screen sign-in modal with QR code and auth options
+    const handlePress = useCallback(() => {
         if (onPress) {
             onPress();
             return;
         }
 
-        if (isSigningIn) return;
-
-        setIsSigningIn(true);
-        try {
-            await signIn();
-        } catch (error) {
-            // Sign-in handled by the auth flow
-            if (__DEV__) {
-                console.log('OxySignInButton: Sign-in flow initiated', error);
-            }
-        } finally {
-            setIsSigningIn(false);
-        }
-    };
+        // Set state immediately before showing modal
+        console.log('[OxySignInButton] Setting isModalOpen to true');
+        setIsModalOpen(true);
+        // Show the full-screen sign-in modal on all platforms
+        showSignInModal();
+    }, [onPress]);
 
-    const isButtonDisabled = disabled || isLoading || isSigningIn;
+    console.log('[OxySignInButton] render - isModalOpen:', isModalOpen);
+    const isButtonDisabled = disabled || isLoading || isModalOpen;
 
     // Determine the button style based on the variant
     const getButtonStyle = () => {
@@ -151,7 +149,7 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
                     style={isButtonDisabled ? { opacity: 0.6 } : undefined}
                 />
                 <Text style={[styles.text, getTextStyle(), isButtonDisabled && styles.textDisabled]}>
-                    {isSigningIn ? 'Signing in...' : text}
+                    {isLoading || isModalOpen ? 'Signing in...' : text}
                 </Text>
             </View>
         </TouchableOpacity>

package/src/ui/components/ProfileCard.tsx

@@ -7,7 +7,7 @@ import { useOxy } from '../context/OxyContext';
 import { useFileDownloadUrl } from '../hooks';
 import { fontFamilies } from '../styles/fonts';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 
 interface ProfileCardProps {
     user: {

package/src/ui/components/QuickActions.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 
 interface QuickAction {
     id: string;

package/src/ui/components/Section.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import SectionTitle from './SectionTitle';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { normalizeColorScheme } from '../utils/themeUtils';
 
 interface SectionProps {

package/src/ui/components/SectionTitle.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { Text, StyleSheet, type StyleProp, type TextStyle } from 'react-native';
 import { fontFamilies } from '../styles/fonts';
-import { useColorScheme } from '../hooks/use-color-scheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { useThemeStyles } from '../hooks/useThemeStyles';