@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/components/Header.tsx

@@ -6,10 +6,25 @@ import {
     StyleSheet,
     Platform,
     Animated,
+    Keyboard,
 } from 'react-native';
+import { useMemo } from 'react';
+import AnimatedReanimated, { useAnimatedStyle, interpolate, Extrapolation, type SharedValue } from 'react-native-reanimated';
+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 { normalizeColorScheme } from '../utils/themeUtils';
+import { Colors } from '../constants/theme';
+
+// Calculate header height based on platform and variant
+export const getHeaderHeight = (variant: HeaderProps['variant'] = 'default', safeAreaTop: number = 0): number => {
+    const paddingTop = Platform.OS === 'ios' ? Math.max(safeAreaTop, 50) : 16;
+    const paddingBottom = 12;
+    const contentHeight = variant === 'minimal' ? 36 : 40;
+    return paddingTop + contentHeight + paddingBottom;
+};
 
 export interface HeaderProps {
     title: string;
@@ -32,13 +47,16 @@ export interface HeaderProps {
         text?: string;
         key?: string; // optional identifier
     }>;
-    theme: 'light' | 'dark';
+    theme?: 'light' | 'dark';
     showBackButton?: boolean;
     showCloseButton?: boolean;
+    showThemeToggle?: boolean;
+    onThemeToggle?: () => void;
     variant?: 'default' | 'large' | 'minimal' | 'gradient';
     elevation?: 'none' | 'subtle' | 'prominent';
     subtitleVariant?: 'default' | 'small' | 'large' | 'muted';
     titleAlignment?: 'left' | 'center' | 'right';
+    scrollY?: SharedValue<number>; // For sticky behavior on native
 }
 
 const Header: React.FC<HeaderProps> = ({
@@ -51,29 +69,50 @@ const Header: React.FC<HeaderProps> = ({
     theme,
     showBackButton = true,
     showCloseButton = false,
+    showThemeToggle = false,
+    onThemeToggle,
     variant = 'default',
     elevation = 'subtle',
     subtitleVariant = 'default',
     titleAlignment = 'left',
+    scrollY,
 }) => {
-    const isDarkTheme = theme === 'dark';
+    // Use theme colors directly from Colors constant (like Accounts sidebar)
+    // Ensure colorScheme is always 'light' or 'dark' with proper fallback chain
+    const colorScheme = normalizeColorScheme(useColorScheme(), theme);
+    const colors = Colors[colorScheme];
+    const insets = useSafeAreaInsets();
+    const headerHeight = getHeaderHeight(variant, insets.top);
 
-    // Modern color palette
-    const colors = {
-        background: isDarkTheme ? '#1C1C1E' : '#FFFFFF',
-        surface: isDarkTheme ? '#2C2C2E' : '#F8F9FA',
-        primary: '#007AFF',
-        secondary: isDarkTheme ? '#8E8E93' : '#6C757D',
-        text: {
-            primary: isDarkTheme ? '#FFFFFF' : '#1A1A1A',
-            secondary: isDarkTheme ? '#8E8E93' : '#6C757D',
-            tertiary: isDarkTheme ? '#636366' : '#ADB5BD',
-        },
-        border: isDarkTheme ? '#38383A' : '#E9ECEF',
-        accent: '#5856D6',
-        success: '#34C759',
-        warning: '#FF9500',
-        error: '#FF3B30',
+    // Animated style for sticky behavior on native
+    // Only create animated style if scrollY is provided and we're on native platform
+    const animatedHeaderStyle = useAnimatedStyle(() => {
+        if (Platform.OS === 'web' || !scrollY) {
+            return {};
+        }
+
+        // Sticky behavior: header scrolls with content initially, then sticks at top
+        // When scrollY = 0, translateY = 0 (header at normal position)
+        // When scrollY > 0, translateY becomes negative to keep header at top
+        // Clamp to prevent header from going above viewport
+        const translateY = interpolate(
+            scrollY.value,
+            [0, headerHeight],
+            [0, -headerHeight],
+            Extrapolation.CLAMP
+        );
+
+        return {
+            transform: [{ translateY }],
+        };
+    }, [scrollY, headerHeight]);
+
+    const handleBackPress = () => {
+        if (!onBack) return;
+        
+        // Navigate immediately and synchronously - this prioritizes navigation
+        // over keyboard dismiss. The keyboard will close naturally after screen changes.
+        onBack();
     };
 
     const renderBackButton = () => {
@@ -83,12 +122,12 @@ const Header: React.FC<HeaderProps> = ({
             <TouchableOpacity
                 style={[
                     styles.backButton,
-                    { backgroundColor: colors.surface }
+                    { backgroundColor: colors.card }
                 ]}
-                onPress={onBack}
+                onPress={handleBackPress}
                 activeOpacity={0.7}
             >
-                <OxyIcon name="chevron-back" size={18} color={colors.primary} />
+                <OxyIcon name="chevron-back" size={18} color={colors.tint} />
             </TouchableOpacity>
         );
     };
@@ -100,12 +139,12 @@ const Header: React.FC<HeaderProps> = ({
             <TouchableOpacity
                 style={[
                     styles.closeButton,
-                    { backgroundColor: colors.surface }
+                    { backgroundColor: colors.card }
                 ]}
                 onPress={onClose}
                 activeOpacity={0.7}
             >
-                <Ionicons name="close" size={18} color={colors.text.primary} />
+                <Ionicons name="close" size={18} color={colors.text} />
             </TouchableOpacity>
         );
     };
@@ -119,7 +158,7 @@ const Header: React.FC<HeaderProps> = ({
                     styles.rightActionButton,
                     isTextAction ? styles.textActionButton : styles.iconActionButton,
                     {
-                        backgroundColor: isTextAction ? colors.primary : colors.surface,
+                        backgroundColor: isTextAction ? colors.tint : colors.card,
                         opacity: action.disabled ? 0.5 : 1
                     }
                 ]}
@@ -129,31 +168,50 @@ const Header: React.FC<HeaderProps> = ({
             >
                 {action.loading ? (
                     <View style={styles.loadingContainer}>
-                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.primary }]} />
-                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.primary }]} />
-                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.primary }]} />
+                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.tint }]} />
+                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.tint }]} />
+                        <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.tint }]} />
                     </View>
                 ) : isTextAction ? (
                     <Text style={[styles.actionText, { color: '#FFFFFF' }]}>
                         {action.text}
                     </Text>
                 ) : (
-                    <Ionicons name={action.icon as any} size={18} color={colors.primary} />
+                    <Ionicons name={action.icon as any} size={18} color={colors.tint} />
                 )}
             </TouchableOpacity>
         );
     };
 
     const renderRightActions = () => {
+        const actions: Array<NonNullable<HeaderProps['rightAction']>> = [];
+
+        // Add existing right actions
         if (rightActions?.length) {
+            actions.push(...rightActions);
+        } else if (rightAction) {
+            actions.push(rightAction);
+        }
+
+        // Add theme toggle button if enabled
+        if (showThemeToggle && onThemeToggle) {
+            actions.push({
+                icon: colorScheme === 'dark' ? 'sunny' : 'moon',
+                onPress: onThemeToggle,
+                key: 'theme-toggle',
+            });
+        }
+
+        if (actions.length === 0) return null;
+
+        if (actions.length > 1) {
             return (
                 <View style={styles.rightActionsRow}>
-                    {rightActions.map((a, i) => renderRightActionButton(a, i))}
+                    {actions.map((a, i) => renderRightActionButton(a, i))}
                 </View>
             );
         }
-        if (rightAction) return renderRightActionButton(rightAction, 0);
-        return null;
+        return renderRightActionButton(actions[0], 0);
     };
 
     const renderTitle = () => {
@@ -185,11 +243,11 @@ const Header: React.FC<HeaderProps> = ({
                 getTitleAlignment(),
                 variant === 'minimal' && styles.titleContainerMinimal
             ]}>
-                <Text style={[titleStyle, { color: colors.text.primary }]}>
+                <Text style={[titleStyle, { color: colors.text }]}>
                     {title}
                 </Text>
                 {subtitle && (
-                    <Text style={[subtitleStyle, { color: colors.text.secondary }]}>
+                    <Text style={[subtitleStyle, { color: colors.secondaryText }]}>
                         {subtitle}
                     </Text>
                 )}
@@ -198,20 +256,21 @@ const Header: React.FC<HeaderProps> = ({
     };
 
     const getElevationStyle = () => {
+        const isDark = colorScheme === 'dark';
         switch (elevation) {
             case 'none':
                 return {};
             case 'subtle':
                 return Platform.select({
                     web: {
-                        boxShadow: isDarkTheme
+                        boxShadow: isDark
                             ? '0 1px 3px rgba(0,0,0,0.3)'
                             : '0 1px 3px rgba(0,0,0,0.1)',
                     },
                     default: {
                         shadowColor: '#000000',
                         shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: isDarkTheme ? 0.3 : 0.1,
+                        shadowOpacity: isDark ? 0.3 : 0.1,
                         shadowRadius: 3,
                         elevation: 2,
                     },
@@ -219,14 +278,14 @@ const Header: React.FC<HeaderProps> = ({
             case 'prominent':
                 return Platform.select({
                     web: {
-                        boxShadow: isDarkTheme
+                        boxShadow: isDark
                             ? '0 4px 12px rgba(0,0,0,0.4)'
                             : '0 4px 12px rgba(0,0,0,0.15)',
                     },
                     default: {
                         shadowColor: '#000000',
                         shadowOffset: { width: 0, height: 4 },
-                        shadowOpacity: isDarkTheme ? 0.4 : 0.15,
+                        shadowOpacity: isDark ? 0.4 : 0.15,
                         shadowRadius: 12,
                         elevation: 8,
                     },
@@ -239,7 +298,7 @@ const Header: React.FC<HeaderProps> = ({
     const getBackgroundStyle = () => {
         if (variant === 'gradient') {
             return {
-                backgroundColor: isDarkTheme ? '#1C1C1E' : '#FFFFFF',
+                backgroundColor: colors.background,
                 // Add gradient overlay effect
                 borderBottomWidth: 1,
                 borderBottomColor: colors.border,
@@ -253,12 +312,34 @@ const Header: React.FC<HeaderProps> = ({
         };
     };
 
+    const backgroundStyle = getBackgroundStyle();
+    const elevationStyle = getElevationStyle();
+
+    const containerStyle = useMemo(() => [
+        styles.container,
+        {
+            paddingTop: Platform.OS === 'ios' ? Math.max(insets.top, 50) : 16,
+        },
+        // When header is inside ScrollView (has scrollY), don't use absolute positioning
+        !scrollY && Platform.OS !== 'web' ? {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+        } : {},
+        backgroundStyle,
+        elevationStyle,
+    ], [insets.top, backgroundStyle, elevationStyle, scrollY]);
+
+    const HeaderContainer = Platform.OS === 'web' || !scrollY ? View : AnimatedReanimated.View;
+    // Only apply animated styles when HeaderContainer is an animated component
+    const shouldUseAnimatedStyle = Platform.OS !== 'web' && scrollY !== undefined;
+    const headerStyle = shouldUseAnimatedStyle 
+        ? [containerStyle, animatedHeaderStyle] 
+        : containerStyle;
+
     return (
-        <View style={[
-            styles.container,
-            getBackgroundStyle(),
-            getElevationStyle(),
-        ]}>
+        <HeaderContainer style={headerStyle}>
             <View style={[
                 styles.content,
                 variant === 'minimal' && styles.contentMinimal
@@ -268,24 +349,23 @@ const Header: React.FC<HeaderProps> = ({
                 {renderRightActions()}
                 {renderCloseButton()}
             </View>
-        </View>
+        </HeaderContainer>
     );
 };
 
 const styles = StyleSheet.create({
     container: {
-        paddingTop: Platform.OS === 'ios' ? 50 : 16,
         paddingBottom: 12,
-        top: 0,
-        left: 0,
-        right: 0,
         zIndex: 1000,
         ...Platform.select({
             web: {
                 position: 'sticky' as any,
+                top: 0,
+                left: 0,
+                right: 0,
             },
             default: {
-                position: 'absolute',
+                // Position will be set dynamically based on scrollY prop
             },
         }),
     },

package/src/ui/components/HelperText.tsx

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+} from 'react-native';
+import { useThemeColors } from '../styles';
+
+// Helper function for text color
+const getTextColor = (colors: ReturnType<typeof useThemeColors>, disabled?: boolean, type?: 'error' | 'info') => {
+  if (type === 'error') {
+    return colors.error;
+  }
+  if (disabled) {
+    return colors.secondaryText + '80'; // Add opacity
+  }
+  return colors.secondaryText;
+};
+
+export type HelperTextProps = {
+  /**
+   * Type of the helper text.
+   */
+  type?: 'error' | 'info';
+  /**
+   * Text content of the HelperText.
+   */
+  children: React.ReactNode;
+  /**
+   * Whether to display the helper text.
+   */
+  visible?: boolean;
+  /**
+   * Whether to apply padding to the helper text.
+   */
+  padding?: 'none' | 'normal';
+  /**
+   * Whether the text input tied with helper text is disabled.
+   */
+  disabled?: boolean;
+  style?: StyleProp<TextStyle>;
+  /**
+   * Theme to use ('light' | 'dark')
+   */
+  theme?: 'light' | 'dark';
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
+  /**
+   * Callback when layout changes
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
+  /**
+   * Maximum font size multiplier
+   */
+  maxFontSizeMultiplier?: number;
+};
+
+/**
+ * Helper text is used in conjunction with input elements to provide additional hints for the user.
+ */
+const HelperText = ({
+  style,
+  type = 'info',
+  visible = true,
+  theme: themeProp = 'light',
+  onLayout,
+  padding = 'normal',
+  disabled,
+  maxFontSizeMultiplier = 1.5,
+  ...rest
+}: HelperTextProps) => {
+  const colors = useThemeColors(themeProp);
+  const { current: shown } = React.useRef<Animated.Value>(
+    new Animated.Value(visible ? 1 : 0)
+  );
+
+  let { current: textHeight } = React.useRef<number>(0);
+
+  React.useEffect(() => {
+    if (visible) {
+      // show text
+      Animated.timing(shown, {
+        toValue: 1,
+        duration: 150,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      // hide text
+      Animated.timing(shown, {
+        toValue: 0,
+        duration: 180,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [visible, shown]);
+
+  const handleTextLayout = (e: LayoutChangeEvent) => {
+    onLayout?.(e);
+    textHeight = e.nativeEvent.layout.height;
+  };
+
+  // Get text color based on type and disabled state
+  const getTextColor = () => {
+    if (type === 'error') {
+      return colors.error;
+    }
+    if (disabled) {
+      return colors.secondaryText + '80'; // Add opacity
+    }
+    return colors.secondaryText;
+  };
+
+  const textColor = getTextColor();
+
+  return (
+    <Animated.Text
+      onLayout={handleTextLayout}
+      style={[
+        styles.text,
+        padding !== 'none' ? styles.padding : {},
+        {
+          color: textColor,
+          opacity: shown,
+          transform:
+            visible && type === 'error'
+              ? [
+                {
+                  translateY: shown.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [-textHeight / 2, 0],
+                  }),
+                },
+              ]
+              : [],
+        },
+        style,
+      ]}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      {...rest}
+    >
+      {rest.children}
+    </Animated.Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 12,
+    paddingVertical: 4,
+  },
+  padding: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default HelperText;

package/src/ui/components/Icon.tsx

@@ -0,0 +1,181 @@
+import * as React from 'react';
+import {
+  I18nManager,
+  Image,
+  ImageSourcePropType,
+  Platform,
+} from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useInternalTheme } from './theming';
+import type { ThemeProp } from './types';
+
+// MaterialCommunityIcon accessibility props - simplified
+const accessibilityProps = {};
+
+type IconSourceBase = string | ImageSourcePropType;
+
+export type IconSource =
+  | IconSourceBase
+  | Readonly<{ source: IconSourceBase; direction: 'rtl' | 'ltr' | 'auto' }>
+  | ((props: IconProps & { color: string }) => React.ReactNode);
+
+type IconProps = {
+  /**
+   * Size of icon.
+   */
+  size: number;
+  allowFontScaling?: boolean;
+  style?: any;
+};
+
+const isImageSource = (source: any) =>
+  // source is an object with uri
+  (typeof source === 'object' &&
+    source !== null &&
+    Object.prototype.hasOwnProperty.call(source, 'uri') &&
+    typeof source.uri === 'string') ||
+  // source is a module, e.g. - require('image')
+  typeof source === 'number' ||
+  // image url on web
+  (Platform.OS === 'web' &&
+    typeof source === 'string' &&
+    (source.startsWith('data:image') ||
+      /\.(bmp|jpg|jpeg|png|gif|svg)$/.test(source)));
+
+const getIconId = (source: any) => {
+  if (
+    typeof source === 'object' &&
+    source !== null &&
+    Object.prototype.hasOwnProperty.call(source, 'uri') &&
+    typeof source.uri === 'string'
+  ) {
+    return source.uri;
+  }
+
+  return source;
+};
+
+export const isValidIcon = (source: any) =>
+  typeof source === 'string' ||
+  typeof source === 'function' ||
+  isImageSource(source);
+
+export const isEqualIcon = (a: any, b: any) =>
+  a === b || getIconId(a) === getIconId(b);
+
+export type Props = IconProps & {
+  /**
+   * Icon to display.
+   */
+  source: any;
+  /**
+   * Color of the icon.
+   */
+  color?: string;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+/**
+ * An icon component which renders icon from vector library.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Icon, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Icon
+ *     source="camera"
+ *     color={MD3Colors.error50}
+ *     size={20}
+ *   />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+
+const Icon = ({
+  source,
+  color,
+  size,
+  theme: themeOverrides,
+  testID,
+  ...rest
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+  const direction =
+    typeof source === 'object' && source.direction && source.source
+      ? source.direction === 'auto'
+        ? I18nManager.getConstants().isRTL
+          ? 'rtl'
+          : 'ltr'
+        : source.direction
+      : null;
+
+  const s =
+    typeof source === 'object' && source.direction && source.source
+      ? source.source
+      : source;
+  const iconColor =
+    color || (theme.isV3 ? theme.colors.onSurface : (theme.colors.text || theme.colors.onSurface));
+
+  if (isImageSource(s)) {
+    return (
+      <Image
+        {...rest}
+        testID={testID}
+        source={s}
+        style={[
+          {
+            transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
+          },
+          {
+            width: size,
+            height: size,
+            tintColor: color,
+            resizeMode: `contain`,
+          },
+        ]}
+        {...accessibilityProps}
+        accessibilityIgnoresInvertColors
+      />
+    );
+  } else if (typeof s === 'string') {
+    // String icons - use MaterialCommunityIcons from @expo/vector-icons
+    // This is the default icon library used by react-native-paper
+    const styleArray = Array.isArray(rest.style)
+      ? rest.style
+      : rest.style
+        ? [rest.style]
+        : [];
+    return (
+      <MaterialCommunityIcons
+        name={s as any}
+        size={size}
+        color={iconColor}
+        style={[
+          {
+            transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
+          },
+          ...styleArray,
+        ] as any}
+        testID={testID}
+        {...accessibilityProps}
+      />
+    );
+  } else if (typeof s === 'function') {
+    return s({ color: iconColor, size, direction, testID });
+  }
+
+  return null;
+};
+
+export default Icon;