@oxyhq/services 5.13.40 → 5.15.0

package/src/ui/components/styles/overlay.tsx

@@ -0,0 +1,88 @@
+import { Animated } from 'react-native';
+
+// Simple hex color manipulation without color package
+const hexToRgb = (hex: string): [number, number, number] => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return [r, g, b];
+};
+
+const rgbToHex = (r: number, g: number, b: number): string => {
+  return `#${[r, g, b].map(x => {
+    const hex = Math.round(x).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  }).join('')}`;
+};
+
+const mixColors = (color1: string, color2: string, ratio: number): string => {
+  const [r1, g1, b1] = hexToRgb(color1);
+  const [r2, g2, b2] = hexToRgb(color2);
+  const r = r1 + (r2 - r1) * ratio;
+  const g = g1 + (g2 - g1) * ratio;
+  const b = b1 + (b2 - b1) * ratio;
+  return rgbToHex(r, g, b);
+};
+
+export const isAnimatedValue = (
+  it: number | string | Animated.AnimatedInterpolation<number | string>
+): it is Animated.Value => it instanceof Animated.Value;
+
+export default function overlay<T extends Animated.Value | number>(
+  elevation: T,
+  surfaceColor: string = '#121212'
+): T extends number ? string : Animated.AnimatedInterpolation<number | string> {
+  if (isAnimatedValue(elevation)) {
+    const inputRange = [0, 1, 2, 3, 8, 24];
+
+    // @ts-expect-error: TS doesn't seem to refine the type correctly
+    return elevation.interpolate({
+      inputRange,
+      outputRange: inputRange.map((elevation) => {
+        return calculateColor(surfaceColor, elevation);
+      }),
+    });
+  }
+
+  // @ts-expect-error: TS doesn't seem to refine the type correctly
+  return calculateColor(surfaceColor, elevation);
+}
+
+function calculateColor(surfaceColor: string, elevation: number = 1) {
+  let overlayTransparency: number;
+  if (elevation >= 1 && elevation <= 24) {
+    overlayTransparency = elevationOverlayTransparency[elevation];
+  } else if (elevation > 24) {
+    overlayTransparency = elevationOverlayTransparency[24];
+  } else {
+    overlayTransparency = elevationOverlayTransparency[1];
+  }
+  return mixColors(surfaceColor, '#FFFFFF', overlayTransparency * 0.01);
+}
+
+const elevationOverlayTransparency: Record<string, number> = {
+  1: 5,
+  2: 7,
+  3: 8,
+  4: 9,
+  5: 10,
+  6: 11,
+  7: 11.5,
+  8: 12,
+  9: 12.5,
+  10: 13,
+  11: 13.5,
+  12: 14,
+  13: 14.25,
+  14: 14.5,
+  15: 14.75,
+  16: 15,
+  17: 15.12,
+  18: 15.24,
+  19: 15.36,
+  20: 15.48,
+  21: 15.6,
+  22: 15.72,
+  23: 15.84,
+  24: 16,
+};

package/src/ui/components/styles/shadow.tsx

@@ -0,0 +1,136 @@
+import { Animated, Platform, ShadowStyleIOS, ViewStyle } from 'react-native';
+
+const SHADOW_COLOR = '#000000';
+const SHADOW_OPACITY = 0.24;
+const MD3_SHADOW_OPACITY = 0.3;
+const MD3_SHADOW_COLOR = '#000000';
+
+export default function shadow(
+  elevation: number | Animated.Value = 0,
+  isV3 = false
+): ViewStyle | ShadowStyleIOS {
+  return isV3 ? v3Shadow(elevation) : v2Shadow(elevation);
+}
+
+function v2Shadow(elevation: number | Animated.Value = 0): ViewStyle | ShadowStyleIOS {
+  if (elevation instanceof Animated.Value) {
+    const inputRange = [0, 1, 2, 3, 8, 24];
+
+    if (Platform.OS === 'ios') {
+      return {
+        shadowColor: SHADOW_COLOR,
+        shadowOffset: {
+          width: 0,
+          height: elevation.interpolate({
+            inputRange,
+            outputRange: [0, 0.5, 0.75, 2, 7, 23],
+          }),
+        },
+        shadowOpacity: elevation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, SHADOW_OPACITY],
+          extrapolate: 'clamp',
+        }),
+        shadowRadius: elevation.interpolate({
+          inputRange,
+          outputRange: [0, 0.75, 1.5, 3, 8, 24],
+        }),
+      } as unknown as ShadowStyleIOS;
+    } else {
+      return {
+        elevation: elevation.interpolate({
+          inputRange,
+          outputRange: [0, 1, 2, 3, 8, 24],
+        }) as unknown as number,
+      };
+    }
+  } else {
+    if (elevation === 0) {
+      return {};
+    }
+
+    let height, radius;
+    switch (elevation) {
+      case 1:
+        height = 0.5;
+        radius = 0.75;
+        break;
+      case 2:
+        height = 0.75;
+        radius = 1.5;
+        break;
+      default:
+        height = elevation - 1;
+        radius = elevation;
+    }
+
+    if (Platform.OS === 'ios') {
+      return {
+        shadowColor: SHADOW_COLOR,
+        shadowOffset: {
+          width: 0,
+          height,
+        },
+        shadowOpacity: SHADOW_OPACITY,
+        shadowRadius: radius,
+      } as ShadowStyleIOS;
+    } else {
+      return {
+        elevation: elevation,
+      };
+    }
+  }
+}
+
+function v3Shadow(elevation: number | Animated.Value = 0): ViewStyle | ShadowStyleIOS {
+  const inputRange = [0, 1, 2, 3, 4, 5];
+  const shadowHeight = [0, 1, 2, 4, 6, 8];
+  const shadowRadius = [0, 3, 6, 8, 10, 12];
+
+  if (elevation instanceof Animated.Value) {
+    if (Platform.OS === 'ios') {
+      return {
+        shadowColor: MD3_SHADOW_COLOR,
+        shadowOffset: {
+          width: 0,
+          height: elevation.interpolate({
+            inputRange,
+            outputRange: shadowHeight,
+          }),
+        },
+        shadowOpacity: elevation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, MD3_SHADOW_OPACITY],
+          extrapolate: 'clamp',
+        }),
+        shadowRadius: elevation.interpolate({
+          inputRange,
+          outputRange: shadowRadius,
+        }),
+      } as unknown as ShadowStyleIOS;
+    } else {
+      return {
+        elevation: elevation.interpolate({
+          inputRange,
+          outputRange: [0, 1, 2, 3, 4, 5],
+        }) as unknown as number,
+      };
+    }
+  } else {
+    if (Platform.OS === 'ios') {
+      return {
+        shadowColor: MD3_SHADOW_COLOR,
+        shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0,
+        shadowOffset: {
+          width: 0,
+          height: shadowHeight[elevation] || 0,
+        },
+        shadowRadius: shadowRadius[elevation] || 0,
+      } as ShadowStyleIOS;
+    } else {
+      return {
+        elevation: elevation || 0,
+      };
+    }
+  }
+}

package/src/ui/components/theming.tsx

@@ -0,0 +1,114 @@
+import { useThemeColors, getTheme } from '../styles';
+import type { InternalTheme } from './types';
+
+/**
+ * Adapter to convert services theming to react-native-paper's InternalTheme format
+ */
+export const useInternalTheme = (
+  themeOverrides?: Partial<InternalTheme> & { dark?: boolean } | 'light' | 'dark'
+): InternalTheme => {
+  // Handle string theme prop (for compatibility with services theme system)
+  let theme: 'light' | 'dark' = 'light';
+  if (typeof themeOverrides === 'string') {
+    theme = themeOverrides;
+  } else if (themeOverrides && typeof themeOverrides === 'object' && themeOverrides.dark) {
+    theme = 'dark';
+  }
+
+  const colors = useThemeColors(theme);
+  const themeObj = getTheme(theme);
+
+  // Create InternalTheme compatible object
+  const internalTheme: InternalTheme = {
+    version: 3,
+    isV3: true,
+    dark: theme === 'dark',
+    mode: 'adaptive',
+    roundness: 10,
+    animation: {
+      scale: 1,
+    },
+    colors: {
+      primary: colors.primary,
+      primaryContainer: colors.primary + '20',
+      secondary: colors.secondaryText,
+      secondaryContainer: colors.secondaryText + '20',
+      tertiary: colors.primary,
+      tertiaryContainer: colors.primary + '20',
+      surface: colors.background,
+      surfaceVariant: colors.inputBackground,
+      surfaceDisabled: colors.secondaryText + '40',
+      background: colors.background,
+      error: colors.error,
+      errorContainer: colors.error + '20',
+      onPrimary: '#FFFFFF',
+      onPrimaryContainer: colors.primary,
+      onSecondary: '#FFFFFF',
+      onSecondaryContainer: colors.secondaryText,
+      onTertiary: '#FFFFFF',
+      onTertiaryContainer: colors.primary,
+      onSurface: colors.text,
+      onSurfaceVariant: colors.secondaryText,
+      onSurfaceDisabled: colors.secondaryText + '60',
+      onError: '#FFFFFF',
+      onErrorContainer: colors.error,
+      onBackground: colors.text,
+      outline: colors.border,
+      outlineVariant: colors.border + '80',
+      inverseSurface: theme === 'dark' ? '#FFFFFF' : '#000000',
+      inverseOnSurface: theme === 'dark' ? '#000000' : '#FFFFFF',
+      inversePrimary: colors.primary,
+      shadow: '#000000',
+      scrim: '#000000',
+      backdrop: '#00000080',
+      elevation: {
+        level0: 'transparent',
+        level1: theme === 'dark' ? '#1E1E1E' : '#F5F5F5',
+        level2: theme === 'dark' ? '#2A2A2A' : '#EEEEEE',
+        level3: theme === 'dark' ? '#363636' : '#E0E0E0',
+        level4: theme === 'dark' ? '#404040' : '#D5D5D5',
+        level5: theme === 'dark' ? '#4A4A4A' : '#CCCCCC',
+      },
+    },
+    fonts: {
+      displayLarge: themeObj.fonts.title,
+      displayMedium: themeObj.fonts.title,
+      displaySmall: themeObj.fonts.title,
+      headlineLarge: themeObj.fonts.title,
+      headlineMedium: themeObj.fonts.title,
+      headlineSmall: themeObj.fonts.title,
+      titleLarge: themeObj.fonts.title,
+      titleMedium: themeObj.fonts.title,
+      titleSmall: themeObj.fonts.title,
+      labelLarge: themeObj.fonts.label,
+      labelMedium: themeObj.fonts.label,
+      labelSmall: themeObj.fonts.label,
+      bodyLarge: themeObj.fonts.body,
+      bodyMedium: themeObj.fonts.body,
+      bodySmall: themeObj.fonts.body,
+      default: {
+        fontFamily: themeObj.fonts.body.fontFamily || undefined,
+        fontWeight: themeObj.fonts.body.fontWeight || 'normal',
+        letterSpacing: 0,
+      },
+    },
+  };
+
+  // Merge with overrides if provided (only if it's an object, not a string)
+  if (themeOverrides && typeof themeOverrides === 'object') {
+    return {
+      ...internalTheme,
+      ...themeOverrides,
+      colors: {
+        ...internalTheme.colors,
+        ...(themeOverrides.colors || {}),
+      },
+      fonts: {
+        ...internalTheme.fonts,
+        ...(themeOverrides.fonts || {}),
+      },
+    } as InternalTheme;
+  }
+
+  return internalTheme;
+};

package/src/ui/components/types.tsx

@@ -0,0 +1,90 @@
+// Types for react-native-paper compatibility
+// Support both string theme ('light' | 'dark') and InternalTheme object
+export type ThemeProp = Partial<InternalTheme> | 'light' | 'dark';
+
+export type MD3Elevation = 0 | 1 | 2 | 3 | 4 | 5;
+
+export type InternalTheme = {
+  version: 3;
+  isV3: true;
+  dark: boolean;
+  mode?: 'adaptive' | 'exact';
+  roundness: number;
+  animation: {
+    scale: number;
+    defaultAnimationDuration?: number;
+  };
+  colors: {
+    primary: string;
+    primaryContainer: string;
+    secondary: string;
+    secondaryContainer: string;
+    tertiary: string;
+    tertiaryContainer: string;
+    surface: string;
+    surfaceVariant: string;
+    surfaceDisabled: string;
+    background: string;
+    error: string;
+    errorContainer: string;
+    onPrimary: string;
+    onPrimaryContainer: string;
+    onSecondary: string;
+    onSecondaryContainer: string;
+    onTertiary: string;
+    onTertiaryContainer: string;
+    onSurface: string;
+    onSurfaceVariant: string;
+    onSurfaceDisabled: string;
+    onError: string;
+    onErrorContainer: string;
+    onBackground: string;
+    outline: string;
+    outlineVariant: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    shadow: string;
+    scrim: string;
+    backdrop: string;
+    elevation: {
+      level0: string;
+      level1: string;
+      level2: string;
+      level3: string;
+      level4: string;
+      level5: string;
+    };
+    // Legacy properties for backward compatibility
+    text?: string;
+    disabled?: string;
+    placeholder?: string;
+  };
+  fonts: {
+    displayLarge: any;
+    displayMedium: any;
+    displaySmall: any;
+    headlineLarge: any;
+    headlineMedium: any;
+    headlineSmall: any;
+    titleLarge: any;
+    titleMedium: any;
+    titleSmall: any;
+    labelLarge: any;
+    labelMedium: any;
+    labelSmall: any;
+    bodyLarge: any;
+    bodyMedium: any;
+    bodySmall: any;
+    default: any;
+    // Legacy property for backward compatibility
+    regular?: any;
+  };
+};
+
+export type $Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+export type $RemoveChildren<T extends React.ComponentType<any>> = $Omit<
+  React.ComponentPropsWithoutRef<T>,
+  'children'
+>;
+

package/src/ui/components/utils/forwardRef.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type {
+  ForwardRefRenderFunction,
+  PropsWithoutRef,
+  RefAttributes,
+  ForwardRefExoticComponent,
+} from 'react';
+
+export type ForwardRefComponent<T, P = {}> = ForwardRefExoticComponent<
+  PropsWithoutRef<P> & RefAttributes<T>
+>;
+
+/**
+ * TypeScript generated a large union of props from `ViewProps` in
+ * `d.ts` files when using `React.forwardRef`. To prevent this
+ * `ForwardRefComponent` was created and exported. Use this
+ * `forwardRef` instead of `React.forwardRef` so you don't have to
+ * import `ForwardRefComponent`.
+ * More info: https://github.com/callstack/react-native-paper/pull/3603
+ */
+export const forwardRef: <T, P = {}>(
+  render: ForwardRefRenderFunction<T, PropsWithoutRef<P>>
+) => ForwardRefComponent<T, P> = React.forwardRef;

package/src/ui/components/utils/hasTouchHandler.tsx

@@ -0,0 +1,23 @@
+import type { GestureResponderEvent } from 'react-native';
+
+const touchableEvents = [
+  'onPress',
+  'onLongPress',
+  'onPressIn',
+  'onPressOut',
+] as const;
+
+type TouchableEventObject = Partial<
+  Record<
+    (typeof touchableEvents)[number],
+    (event: GestureResponderEvent) => void
+  >
+>;
+
+export default function hasTouchHandler(
+  touchableEventObject: TouchableEventObject
+) {
+  return touchableEvents.some((event) => {
+    return Boolean(touchableEventObject[event]);
+  });
+}

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

@@ -0,0 +1,2 @@
+export const roundLayoutSize = (size: number): number =>
+  Math.round(size * 1000) / 1000;

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

@@ -0,0 +1,60 @@
+import type { ViewStyle } from 'react-native';
+
+type FiltersArray = readonly ((style: keyof ViewStyle) => boolean)[];
+
+type MappedTuple<Tuple extends FiltersArray> = {
+  [Index in keyof Tuple]: ViewStyle;
+} & { length: Tuple['length'] };
+
+type Style = ViewStyle[keyof ViewStyle];
+type Entry = [keyof ViewStyle, Style];
+
+/**
+ * Utility function to extract styles in separate objects
+ *
+ * @param styles The style object you want to filter
+ * @param filters The filters by which you want to split the styles
+ * @returns An array of filtered style objects:
+ * - The first style object contains the properties that didn't match any filter
+ * - After that there will be a style object for each filter you passed in the same order as the matching filters
+ * - A style property will exist in a single style object, the first filter it matched
+ */
+export function splitStyles<Tuple extends FiltersArray>(
+  styles: ViewStyle,
+  ...filters: Tuple
+) {
+  if (process.env.NODE_ENV !== 'production' && filters.length === 0) {
+    console.error('No filters were passed when calling splitStyles');
+  }
+
+  // `Object.entries` will be used to iterate over the styles and `Object.fromEntries` will be called before returning
+  // Entries which match the given filters will be temporarily stored in `newStyles`
+  const newStyles = filters.map(() => [] as Entry[]);
+
+  // Entries which match no filter
+  const rest: Entry[] = [];
+
+  // Iterate every style property
+  outer: for (const item of Object.entries(styles) as Entry[]) {
+    // Check each filter
+    for (let i = 0; i < filters.length; i++) {
+      // Check if filter matches
+      if (filters[i](item[0])) {
+        newStyles[i].push(item); // Push to temporary filtered entries array
+        continue outer; // Skip to checking next style property
+      }
+    }
+
+    // Adds to rest styles if not filtered
+    rest.push(item);
+  }
+
+  // Put unmatched styles in the beginning
+  newStyles.unshift(rest);
+
+  // Convert arrays of entries into objects
+  return newStyles.map((styles) => Object.fromEntries(styles)) as unknown as [
+    ViewStyle,
+    ...MappedTuple<Tuple>
+  ];
+}

package/src/ui/constants/iconColors.ts

@@ -0,0 +1,88 @@
+/**
+ * Icon color helpers and semantic mappings
+ * Provides easy access to icon colors from the theme system
+ */
+
+import { Colors } from './theme';
+
+/**
+ * Get icon colors for a specific theme
+ */
+export const getIconColors = (theme: 'light' | 'dark') => {
+  return Colors[theme];
+};
+
+/**
+ * Semantic icon color mappings
+ * Maps common icon types to their appropriate theme colors
+ */
+export const IconColorMap = {
+  // Profile and personal information
+  profile: 'iconPersonalInfo',
+  personalInfo: 'iconPersonalInfo',
+  editProfile: 'iconPersonalInfo',
+  
+  // Security and authentication
+  security: 'iconSecurity',
+  password: 'iconSecurity',
+  lock: 'iconSecurity',
+  shield: 'iconSecurity',
+  
+  // Documents and rules
+  document: 'iconSecurity',
+  rules: 'iconSecurity',
+  file: 'iconSecurity',
+  
+  // Premium and special features
+  premium: 'iconPayments',
+  star: 'iconPayments',
+  leaderboard: 'iconPayments',
+  trophy: 'iconPayments',
+  
+  // Rewards and gifts
+  rewards: 'iconPayments',
+  gift: 'iconStorage',
+  
+  // Notifications and warnings
+  notifications: 'iconStorage',
+  warning: 'iconStorage',
+  bell: 'iconStorage',
+  
+  // Help and FAQ
+  help: 'iconPersonalInfo',
+  faq: 'iconPersonalInfo',
+  question: 'iconPersonalInfo',
+  
+  // Data and privacy
+  data: 'iconData',
+  privacy: 'iconData',
+  settings: 'iconData',
+  
+  // Sharing and social
+  sharing: 'iconSharing',
+  social: 'iconSharing',
+  
+  // Primary actions
+  primary: 'iconPrimary',
+  home: 'iconHome',
+} as const;
+
+/**
+ * Get icon color by semantic name
+ */
+export const getIconColor = (
+  semanticName: keyof typeof IconColorMap,
+  theme: 'light' | 'dark' = 'light'
+): string => {
+  const colorKey = IconColorMap[semanticName];
+  const colors = getIconColors(theme);
+  return colors[colorKey as keyof typeof colors] as string;
+};
+
+/**
+ * Helper to get icon color for common use cases
+ */
+export const useIconColor = (semanticName: keyof typeof IconColorMap, theme: 'light' | 'dark') => {
+  return getIconColor(semanticName, theme);
+};
+

package/src/ui/constants/spacing.ts

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+
+/**
+ * Reusable spacing constants for screens across the codebase
+ * These values ensure consistent padding and gaps across all screens
+ */
+
+// Screen padding - used for all bottom sheet screens
+export const SCREEN_PADDING_HORIZONTAL = 16;
+export const SCREEN_PADDING_VERTICAL = 16;
+export const SCREEN_PADDING_TOP = 24; // Top padding for screen content (accounts for handle)
+
+// Section gaps
+export const SECTION_GAP = 24;
+export const SECTION_GAP_LARGE = 32;
+
+// Component gaps
+export const COMPONENT_GAP = 12;
+export const COMPONENT_GAP_SMALL = 8;
+
+// Header padding
+export const HEADER_PADDING_TOP_OVERVIEW = 38;
+export const HEADER_PADDING_TOP_SETTINGS = 40;
+
+/**
+ * Reusable screen content style for all bottom sheet screens
+ * Use this for ScrollView contentContainerStyle to ensure consistent padding
+ */
+export const screenContentStyle = {
+    paddingHorizontal: SCREEN_PADDING_HORIZONTAL,
+    paddingVertical: SCREEN_PADDING_VERTICAL,
+    paddingTop: SCREEN_PADDING_TOP,
+    paddingBottom: SCREEN_PADDING_VERTICAL,
+};
+
+/**
+ * Reusable screen content style for screens that need custom top padding
+ */
+export const createScreenContentStyle = (topPadding?: number) => ({
+    paddingHorizontal: SCREEN_PADDING_HORIZONTAL,
+    paddingVertical: SCREEN_PADDING_VERTICAL,
+    paddingTop: topPadding ?? SCREEN_PADDING_TOP,
+    paddingBottom: SCREEN_PADDING_VERTICAL,
+});
+