@oxyhq/services 5.17.17 → 5.18.0

package/src/ui/components/BottomSheetRouter.tsx

@@ -31,7 +31,12 @@ export interface BottomSheetRouterProps {
     onDismiss?: () => void;
 }
 
-// Compatibility re-exports removed. Import types/functions directly from their sources instead.
+// Re-export types for backward compatibility
+export type { BottomSheetRouterState };
+export { subscribeToBottomSheetState };
+
+// Re-export BottomSheetRef for backward compatibility
+export type { BottomSheetRef };
 
 /**
  * BottomSheetRouter - Manages navigation within bottom sheet modals

package/src/ui/components/GroupedItem.tsx

@@ -22,6 +22,10 @@ interface GroupedItemProps {
     disabled?: boolean;
     customContent?: React.ReactNode;
     customIcon?: React.ReactNode;
+    /** Accessibility label (defaults to title) */
+    accessibilityLabel?: string;
+    /** Accessibility hint for what happens on press */
+    accessibilityHint?: string;
 }
 
 const GroupedItemComponent = ({
@@ -36,6 +40,8 @@ const GroupedItemComponent = ({
     disabled = false,
     customContent,
     customIcon,
+    accessibilityLabel,
+    accessibilityHint,
 }: GroupedItemProps) => {
     const hookColorScheme = useColorScheme();
     const colorScheme = normalizeColorScheme(hookColorScheme);
@@ -90,13 +96,25 @@ const GroupedItemComponent = ({
                 onPressIn={disabled ? undefined : handlePressIn}
                 onPress={onPress}
                 activeOpacity={0.7}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel || title}
+                accessibilityHint={accessibilityHint || subtitle}
+                accessibilityState={{ disabled }}
             >
                 {content}
             </TouchableOpacity>
         );
     }
 
-    return <View style={itemStyles}>{content}</View>;
+    return (
+        <View
+            style={itemStyles}
+            accessibilityRole="text"
+            accessibilityLabel={accessibilityLabel || title}
+        >
+            {content}
+        </View>
+    );
 };
 
 GroupedItemComponent.displayName = 'GroupedItem';

package/src/ui/components/Icon.tsx

@@ -125,7 +125,7 @@ const Icon = ({
       ? source.source
       : source;
   const iconColor =
-    color || (theme.isV3 ? theme.colors.onSurface : ((theme.colors as any).text || theme.colors.onSurface));
+    color || (theme.isV3 ? theme.colors.onSurface : (theme.colors.text || theme.colors.onSurface));
 
   if (isImageSource(s)) {
     return (

package/src/ui/components/IconButton/utils.ts

@@ -124,7 +124,7 @@ const getIconColor = ({
     return customIconColor;
   }
 
-  return (theme.colors as any).text || theme.colors.onSurface;
+  return theme.colors.text || theme.colors.onSurface;
 };
 
 const getRippleColor = ({

package/src/ui/components/OxyProvider.tsx

@@ -10,6 +10,7 @@ import { setupFonts } from './FontLoader';
 import BottomSheetRouter from './BottomSheetRouter';
 import { Toaster } from '../../lib/sonner';
 import { createQueryClient } from '../hooks/queryClient';
+import { createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
 
 // Initialize fonts automatically
 setupFonts();
@@ -23,30 +24,53 @@ setupFonts();
 const OxyProvider: FC<OxyProviderProps> = ({
     oxyServices,
     children,
-    contextOnly = false,
     onAuthStateChange,
     storageKeyPrefix,
     baseURL,
+    authWebUrl,
+    authRedirectUri,
     queryClient: providedQueryClient,
 }) => {
-    // contextOnly is retained for backwards compatibility while the UI-only
-    // bottom sheet experience is removed. At the moment both modes behave the same.
-    void contextOnly;
 
-    // Initialize React Query Client (in-memory; persistence handled separately if needed)
+    // Simple storage initialization for query persistence
+    const storageRef = useRef<StorageInterface | null>(null);
     const queryClientRef = useRef<ReturnType<typeof createQueryClient> | null>(null);
-    const [queryClient, setQueryClient] = useState<ReturnType<typeof createQueryClient>>(
-        () => providedQueryClient ?? createQueryClient(),
-    );
+    const [queryClient, setQueryClient] = useState<ReturnType<typeof createQueryClient> | null>(null);
 
     useEffect(() => {
-        if (providedQueryClient && queryClientRef.current !== providedQueryClient) {
+        if (providedQueryClient) {
             queryClientRef.current = providedQueryClient;
             setQueryClient(providedQueryClient);
-        } else if (!queryClientRef.current) {
-            queryClientRef.current = queryClient;
+            return;
         }
-    }, [providedQueryClient, queryClient]);
+
+        // Initialize storage and create query client
+        let mounted = true;
+        createPlatformStorage()
+            .then((storage) => {
+                if (mounted && !queryClientRef.current) {
+                    storageRef.current = storage;
+                    const client = createQueryClient(storage);
+                    queryClientRef.current = client;
+                    setQueryClient(client);
+                }
+            })
+            .catch((error) => {
+                // If storage fails, create query client without persistence
+                if (mounted && !queryClientRef.current) {
+                    if (__DEV__) {
+                        console.warn('[OxyProvider] Failed to initialize storage for query persistence', error);
+                    }
+                    const client = createQueryClient(null);
+                    queryClientRef.current = client;
+                    setQueryClient(client);
+                }
+            });
+
+        return () => {
+            mounted = false;
+        };
+    }, [providedQueryClient]);
 
     // Hook React Query focus manager into React Native AppState
     useEffect(() => {
@@ -107,6 +131,12 @@ const OxyProvider: FC<OxyProviderProps> = ({
         };
     }, []);
 
+    // Ensure we have a valid QueryClient
+    if (!queryClient) {
+        // Return loading state or fallback
+        return null;
+    }
+
     return (
         <SafeAreaProvider>
             <GestureHandlerRootView style={{ flex: 1 }}>
@@ -116,6 +146,8 @@ const OxyProvider: FC<OxyProviderProps> = ({
                             <OxyContextProvider
                                 oxyServices={oxyServices as any}
                                 baseURL={baseURL}
+                                authWebUrl={authWebUrl}
+                                authRedirectUri={authRedirectUri}
                                 storageKeyPrefix={storageKeyPrefix}
                                 onAuthStateChange={onAuthStateChange as any}
                             >

package/src/ui/components/SettingRow.tsx

@@ -10,6 +10,12 @@ export interface SettingRowProps {
     textColor?: string;
     mutedTextColor?: string;
     borderColor?: string;
+    /** Active color for the switch track (default: #d169e5) */
+    activeColor?: string;
+    /** Inactive color for the switch track (default: #767577) */
+    inactiveColor?: string;
+    /** Accessibility label for the switch */
+    accessibilityLabel?: string;
 }
 
 /**
@@ -25,15 +31,27 @@ const SettingRow: React.FC<SettingRowProps> = ({
     textColor,
     mutedTextColor,
     borderColor,
+    activeColor = '#d169e5',
+    inactiveColor = '#767577',
+    accessibilityLabel,
 }) => {
     return (
-        <View style={[styles.settingRow, borderColor ? { borderBottomColor: borderColor } : undefined]}>
+        <View
+            style={[styles.settingRow, borderColor ? { borderBottomColor: borderColor } : undefined]}
+            accessibilityRole="none"
+        >
             <View style={styles.settingInfo}>
-                <Text style={[styles.settingTitle, textColor ? { color: textColor } : undefined]}>
+                <Text
+                    style={[styles.settingTitle, textColor ? { color: textColor } : undefined]}
+                    accessibilityRole="text"
+                >
                     {title}
                 </Text>
                 {description && (
-                    <Text style={[styles.settingDescription, mutedTextColor ? { color: mutedTextColor } : undefined]}>
+                    <Text
+                        style={[styles.settingDescription, mutedTextColor ? { color: mutedTextColor } : undefined]}
+                        accessibilityRole="text"
+                    >
                         {description}
                     </Text>
                 )}
@@ -42,8 +60,12 @@ const SettingRow: React.FC<SettingRowProps> = ({
                 value={value}
                 onValueChange={onValueChange}
                 disabled={disabled}
-                trackColor={{ false: '#767577', true: '#d169e5' }}
+                trackColor={{ false: inactiveColor, true: activeColor }}
                 thumbColor={value ? '#fff' : '#f4f3f4'}
+                accessibilityRole="switch"
+                accessibilityLabel={accessibilityLabel || title}
+                accessibilityState={{ checked: value, disabled }}
+                accessibilityHint={description}
             />
         </View>
     );

package/src/ui/components/TextField/Addons/Outline.tsx

@@ -7,7 +7,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { TextFieldLabelProp } from '../types';
+import { TextInputLabelProp } from '../types';
 
 type OutlineProps = {
   isV3: boolean;
@@ -17,7 +17,7 @@ type OutlineProps = {
   focused?: boolean;
   outlineColor?: string;
   roundness?: number;
-  label?: TextFieldLabelProp;
+  label?: TextInputLabelProp;
   style?: StyleProp<ViewStyle>;
 };
 

package/src/ui/components/TextField/Adornment/utils.ts

@@ -33,7 +33,7 @@ export function getTextColor({ theme, disabled }: BaseProps) {
     return theme.colors.onSurfaceVariant;
   }
   // For non-V3 themes, apply opacity to text color
-  const textColor = theme?.colors?.onSurface || (theme?.colors as any)?.text || '#000000';
+  const textColor = theme?.colors?.onSurface || theme?.colors?.text || '#000000';
   const opacity = theme.dark ? 0.7 : 0.54;
   return hexToRgba(textColor, opacity);
 }
@@ -55,7 +55,7 @@ export function getIconColor({
   }
 
   if (!theme.isV3) {
-    return (theme.colors as any).text || theme.colors.onSurface;
+    return theme.colors.text || theme.colors.onSurface;
   }
 
   if (disabled) {

package/src/ui/components/TextField/helpers.tsx

@@ -26,7 +26,7 @@ import {
   MD3_MIN_HEIGHT,
   MD3_OUTLINED_INPUT_OFFSET,
 } from './constants';
-import type { TextFieldLabelProp } from './types';
+import type { TextInputLabelProp } from './types';
 import type { InternalTheme } from "../types";
 
 type PaddingProps = {
@@ -37,7 +37,7 @@ type PaddingProps = {
   topPosition: number;
   fontSize: number;
   lineHeight?: number;
-  label?: TextFieldLabelProp | null;
+  label?: TextInputLabelProp | null;
   scale: number;
   offset: number;
   isAndroid: boolean;
@@ -329,10 +329,10 @@ const getInputTextColor = ({
   }
 
   if (disabled) {
-    return color((theme.colors as any).text || theme.colors.onSurface).alpha(0.54).rgb().string();
+    return color(theme.colors.text || theme.colors.onSurface).alpha(0.54).rgb().string();
   }
 
-  return (theme.colors as any).text || theme.colors.onSurface;
+  return theme.colors.text || theme.colors.onSurface;
 };
 
 const getActiveColor = ({
@@ -364,7 +364,7 @@ const getActiveColor = ({
       return theme.colors.onSurfaceDisabled;
     }
 
-    return color((theme.colors as any).text || theme.colors.onSurface).alpha(0.54).rgb().string();
+    return color(theme.colors.text || theme.colors.onSurface).alpha(0.54).rgb().string();
   }
 
   return theme.colors.primary;
@@ -380,10 +380,10 @@ const getPlaceholderColor = ({ theme, disabled }: BaseProps) => {
   }
 
   if (disabled) {
-    return (theme.colors as any).disabled || theme.colors.onSurfaceDisabled;
+    return theme.colors.disabled || theme.colors.onSurfaceDisabled;
   }
 
-  return (theme.colors as any).placeholder || theme.colors.onSurfaceVariant;
+  return theme.colors.placeholder || theme.colors.onSurfaceVariant;
 };
 
 const getSelectionColor = ({
@@ -443,7 +443,7 @@ const getFlatUnderlineColor = ({
     return 'transparent';
   }
 
-  return (theme.colors as any).disabled || theme.colors.onSurfaceVariant;
+  return theme.colors.disabled || theme.colors.onSurfaceVariant;
 };
 
 const getOutlinedOutlineInputColor = ({
@@ -472,9 +472,9 @@ const getOutlinedOutlineInputColor = ({
     if (isTransparent) {
       return customOutlineColor;
     }
-    return (theme.colors as any).disabled || theme.colors.onSurfaceDisabled;
+    return theme.colors.disabled || theme.colors.onSurfaceDisabled;
   }
-  return (theme.colors as any).placeholder || theme.colors.onSurfaceVariant;
+  return theme.colors.placeholder || theme.colors.onSurfaceVariant;
 };
 
 export const getFlatInputColors = ({

package/src/ui/components/TextField/types.tsx

@@ -15,7 +15,7 @@ import type {
 import type { $Omit, InternalTheme, ThemeProp } from '../types';
 
 export type TextFieldLabelProp = string | React.ReactElement;
-// Removed alias `TextInputLabelProp`; use `TextFieldLabelProp` directly.
+export type TextInputLabelProp = TextFieldLabelProp; // Alias for backward compatibility
 
 type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
   mode?: 'flat' | 'outlined';

package/src/ui/components/TouchableRipple/utils.ts

@@ -40,9 +40,9 @@ const getRippleColor = ({
   }
 
   if (theme.dark) {
-    return colorUtil(theme.colors.onSurface || (theme.colors as any).text || '#000000').alpha(0.32).rgb().string();
+    return colorUtil(theme.colors.onSurface || theme.colors.text || '#000000').alpha(0.32).rgb().string();
   }
-  return colorUtil((theme.colors as any).text || theme.colors.onSurface || '#000000').alpha(0.2).rgb().string();
+  return colorUtil(theme.colors.text || theme.colors.onSurface || '#000000').alpha(0.2).rgb().string();
 };
 
 export const getTouchableRippleColors = ({

package/src/ui/components/Typography/AnimatedText.tsx

@@ -72,10 +72,10 @@ const AnimatedText = forwardRef<Text & HTMLElement, Props<never>>(
         />
       );
     } else {
-      const font = !theme.isV3 ? ((theme.fonts as any).regular || theme.fonts.default) : theme.fonts.bodyMedium;
+      const font = !theme.isV3 ? (theme.fonts.regular || theme.fonts.default) : theme.fonts.bodyMedium;
       const textStyle = {
         ...font,
-        color: theme.isV3 ? theme.colors.onSurface : ((theme.colors as any).text || theme.colors.onSurface),
+        color: theme.isV3 ? theme.colors.onSurface : (theme.colors.text || theme.colors.onSurface),
       };
       return (
         <Animated.Text

package/src/ui/components/feedback/FormInput.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { View, Text, TextInput } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import type { FeedbackColors } from './types';
+
+interface FormInputProps {
+    icon: string;
+    label: string;
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    multiline?: boolean;
+    numberOfLines?: number;
+    testID?: string;
+    colors: FeedbackColors;
+    styles: any;
+    borderColor?: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}
+
+const FormInput: React.FC<FormInputProps> = React.memo(({
+    icon,
+    label,
+    value,
+    onChangeText,
+    placeholder,
+    multiline = false,
+    numberOfLines = 1,
+    testID,
+    colors,
+    styles,
+    borderColor,
+    accessibilityLabel,
+    accessibilityHint,
+}) => (
+    <View style={styles.inputContainer}>
+        <View style={[
+            multiline ? styles.textAreaWrapper : styles.premiumInputWrapper,
+            {
+                borderColor: borderColor || colors.border,
+                backgroundColor: colors.inputBackground,
+                shadowColor: colors.primary,
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: 0.1,
+                shadowRadius: 12,
+                elevation: 3,
+            }
+        ]}>
+            {!multiline && (
+                <Ionicons
+                    name={icon as any}
+                    size={22}
+                    color={colors.secondaryText}
+                    style={styles.inputIcon}
+                />
+            )}
+            <View style={styles.inputContent}>
+                <Text style={[styles.modernLabel, { color: colors.secondaryText }]}>
+                    {label}
+                </Text>
+                <TextInput
+                    style={[
+                        multiline ? styles.textArea : styles.modernInput,
+                        { color: colors.text }
+                    ]}
+                    value={value}
+                    onChangeText={onChangeText}
+                    placeholder={placeholder}
+                    placeholderTextColor={colors.secondaryText + '60'}
+                    multiline={multiline}
+                    numberOfLines={multiline ? numberOfLines : undefined}
+                    testID={testID}
+                    accessibilityLabel={accessibilityLabel || label}
+                    accessibilityHint={accessibilityHint}
+                />
+            </View>
+        </View>
+    </View>
+));
+
+FormInput.displayName = 'FormInput';
+
+export default FormInput;

package/src/ui/components/feedback/ProgressIndicator.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { FeedbackColors } from './types';
+
+interface ProgressIndicatorProps {
+    currentStep: number;
+    totalSteps: number;
+    colors: FeedbackColors;
+    styles: any;
+}
+
+const ProgressIndicator: React.FC<ProgressIndicatorProps> = React.memo(({
+    currentStep,
+    totalSteps,
+    colors,
+    styles,
+}) => (
+    <View style={styles.progressContainer} accessibilityRole="progressbar" accessibilityLabel={`Step ${currentStep + 1} of ${totalSteps}`}>
+        {Array.from({ length: totalSteps }, (_, index) => (
+            <View
+                key={index}
+                style={[
+                    styles.progressDot,
+                    currentStep === index ?
+                        { backgroundColor: colors.primary, width: 24 } :
+                        { backgroundColor: colors.border }
+                ]}
+            />
+        ))}
+    </View>
+));
+
+ProgressIndicator.displayName = 'ProgressIndicator';
+
+export default ProgressIndicator;

package/src/ui/components/feedback/constants.ts

@@ -0,0 +1,22 @@
+import type { FeedbackType, PriorityLevel } from './types';
+
+export const FEEDBACK_TYPES: FeedbackType[] = [
+    { id: 'bug', label: 'Bug Report', icon: 'bug', color: '#FF3B30', description: 'Report a problem or issue' },
+    { id: 'feature', label: 'Feature Request', icon: 'bulb', color: '#007AFF', description: 'Suggest a new feature' },
+    { id: 'general', label: 'General Feedback', icon: 'chatbubble', color: '#34C759', description: 'Share your thoughts' },
+    { id: 'support', label: 'Support Request', icon: 'help-circle', color: '#FF9500', description: 'Get help with something' },
+];
+
+export const PRIORITY_LEVELS: PriorityLevel[] = [
+    { id: 'low', label: 'Low', icon: 'arrow-down', color: '#34C759' },
+    { id: 'medium', label: 'Medium', icon: 'remove', color: '#FF9500' },
+    { id: 'high', label: 'High', icon: 'arrow-up', color: '#FF3B30' },
+    { id: 'critical', label: 'Critical', icon: 'warning', color: '#FF0000' },
+];
+
+export const CATEGORIES: Record<string, string[]> = {
+    bug: ['UI/UX', 'Performance', 'Authentication', 'File Management', 'Billing', 'Other'],
+    feature: ['User Interface', 'File Management', 'Security', 'Performance', 'Integration', 'Other'],
+    general: ['User Experience', 'Design', 'Performance', 'Documentation', 'Other'],
+    support: ['Account Issues', 'Billing', 'Technical Problems', 'Feature Questions', 'Other'],
+};