@oxyhq/services 19.0.1 → 19.1.0

package/src/ui/components/Avatar.tsx

@@ -1,284 +0,0 @@
-import type React from 'react';
-import { memo, useMemo, useState, useEffect } from 'react';
-import { View, Text, Image, StyleSheet, type StyleProp, type ViewStyle, type ImageStyle, type TextStyle, ActivityIndicator, Platform } from 'react-native';
-import { useTheme } from '@oxyhq/bloom/theme';
-
-export interface AvatarProps {
-    /**
-     * URL of the avatar image
-     */
-    uri?: string;
-
-    /**
-     * Text to display when no image is available
-     * Defaults to first letter of name if name is provided
-     */
-    text?: string;
-
-    /**
-     * Full name to derive the initials from
-     * For single word: takes first letter
-     * For multiple words: takes first letter of first and last word (e.g., "John Doe" -> "JD")
-     * For usernames starting with @: takes first two letters after @
-     */
-    name?: string;
-
-    /**
-     * Size of the avatar in pixels
-     * @default 40
-     */
-    size?: number;
-
-    /**
-     * Theme to use for colors
-     * @default 'light'
-     */
-    theme?: 'light' | 'dark';
-
-    /**
-     * Background color for text avatar
-     * Defaults to theme primary color
-     */
-    backgroundColor?: string;
-
-    /**
-     * Text color for text avatar
-     * @default '#FFFFFF'
-     */
-    textColor?: string;
-
-    /**
-     * Additional styles for the container
-     */
-    style?: StyleProp<ViewStyle>;
-
-    /**
-     * Additional styles for the image
-     * Only used when uri is provided
-     */
-    imageStyle?: StyleProp<ImageStyle>;
-
-    /**
-     * Additional styles for the text
-     */
-    textStyle?: StyleProp<TextStyle>;
-
-    /**
-     * Is loading state
-     * @default false
-     */
-    isLoading?: boolean;
-}
-
-/**
- * Extracts initials from a name string
- * - Single word: first letter (e.g., "John" -> "J")
- * - Multiple words: first letter of first and last word (e.g., "John Doe" -> "JD")
- * - Username starting with @: first two letters after @ (e.g., "@johndoe" -> "JO")
- */
-const getInitials = (nameStr: string): string => {
-    if (!nameStr?.trim()) return '';
-
-    const trimmed = nameStr.trim();
-    const parts = trimmed.split(/\s+/).filter(part => part.length > 0);
-
-    if (parts.length === 0) return '';
-
-    if (parts.length === 1) {
-        const firstPart = parts[0];
-        // Handle username format (@username)
-        if (firstPart.length >= 2 && firstPart.startsWith('@')) {
-            return firstPart.substring(1, 3).toUpperCase();
-        }
-        return firstPart.charAt(0).toUpperCase();
-    }
-
-    // Multiple words: first letter of first and last word
-    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
-};
-
-/**
- * Generates a consistent color from a string (name)
- * Uses a simple hash function to create a deterministic color
- */
-const generateColorFromString = (str: string): string => {
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-    }
-
-    // Generate a vibrant color with good contrast
-    const hue = Math.abs(hash) % 360;
-    // Use high saturation and medium lightness for vibrant, readable colors
-    return `hsl(${hue}, 65%, 55%)`;
-};
-
-/**
- * Calculates font size based on avatar size for letter avatars
- * Uses a larger ratio for better visibility
- */
-const calculateFontSize = (size: number): number => {
-    // Use larger font size for letter avatars (50-55% of size)
-    return size <= 40
-        ? Math.floor(size * 0.5)
-        : Math.floor(size * 0.45);
-};
-
-/**
- * Avatar component that displays either an image or text avatar
- * Falls back to displaying initials (1-2 letters) derived from the name if no image is provided
- * Supports flexible sizing via the size prop (default: 40px)
- * 
- * @example
- * <Avatar name="John Doe" size={100} theme="light" />
- * <Avatar uri="https://example.com/avatar.jpg" size={50} />
- */
-const Avatar: React.FC<AvatarProps> = ({
-    uri,
-    text,
-    name,
-    size = 40,
-    theme = 'light',
-    backgroundColor,
-    textColor = '#FFFFFF',
-    style,
-    imageStyle,
-    textStyle,
-    isLoading = false,
-}) => {
-    const { colors } = useTheme();
-    const [imageError, setImageError] = useState(false);
-
-    // Reset error state when uri changes
-    useEffect(() => {
-        if (uri) {
-            setImageError(false);
-        }
-    }, [uri]);
-
-    const displayText = useMemo(
-        () => text || (name ? getInitials(name) : ''),
-        [text, name]
-    );
-
-    // Generate a color from the name for letter avatars (only when no backgroundColor is provided and no uri)
-    const generatedBgColor = useMemo(
-        () => {
-            if (backgroundColor) return backgroundColor;
-            if (uri) return colors.primary; // Use primary for image avatars as fallback
-            // Generate color from name for letter avatars
-            const nameForColor = name || text || 'User';
-            return generateColorFromString(nameForColor);
-        },
-        [backgroundColor, uri, name, text, colors.primary]
-    );
-
-    // Memoize computed values to avoid recalculation on every render
-    const bgColor = useMemo(
-        () => generatedBgColor,
-        [generatedBgColor]
-    );
-
-    const fontSize = useMemo(
-        () => calculateFontSize(size),
-        [size]
-    );
-
-    const containerStyle = useMemo(
-        () => ({
-            width: size,
-            height: size,
-            borderRadius: size / 2,
-        }),
-        [size]
-    );
-
-    const textStyleComputed = useMemo(
-        () => [
-            styles.text,
-            {
-                fontSize,
-                color: textColor,
-                textAlign: 'center' as const,
-                lineHeight: size, // Match line height to size for perfect vertical centering
-                ...(Platform.OS === 'android' && { includeFontPadding: false }), // Remove extra padding for better centering (Android only)
-            },
-            textStyle,
-        ],
-        [fontSize, textColor, textStyle, size]
-    );
-
-    // Early return for loading state
-    if (isLoading) {
-        return (
-            <View
-                style={[
-                    styles.container,
-                    containerStyle,
-                    { backgroundColor: colors.backgroundSecondary },
-                    style
-                ]}
-            >
-                <ActivityIndicator
-                    color={colors.primary}
-                    size={size > 50 ? 'large' : 'small'}
-                />
-            </View>
-        );
-    }
-
-    // Image avatar (with fallback to initials on error)
-    if (uri && !imageError) {
-        return (
-            <View
-                style={[
-                    styles.container,
-                    containerStyle,
-                    { backgroundColor: bgColor },
-                    style
-                ]}
-            >
-                <Image
-                    source={{ uri }}
-                    style={[styles.image, containerStyle, imageStyle]}
-                    resizeMode="cover"
-                    onError={() => setImageError(true)}
-                />
-            </View>
-        );
-    }
-
-    // Text avatar with initials
-    return (
-        <View
-            style={[
-                styles.container,
-                containerStyle,
-                { backgroundColor: bgColor },
-                style
-            ]}
-        >
-            <Text style={textStyleComputed}>
-                {displayText}
-            </Text>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        overflow: 'hidden',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    image: {
-        width: '100%',
-        height: '100%',
-    },
-    text: {
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-    },
-});
-
-// Memoize component to prevent unnecessary re-renders when props haven't changed
-export default memo(Avatar);

package/src/ui/components/CrossFadeIcon.tsx

@@ -1,140 +0,0 @@
-import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-
-import Icon, { type IconSource, isEqualIcon, isValidIcon } from './Icon';
-import { useInternalTheme } from './theming';
-import type { ThemeProp } from './types';
-
-type Props = {
-  /**
-   * Icon to display for the `CrossFadeIcon`.
-   */
-  source: IconSource;
-  /**
-   * Color of the icon.
-   */
-  color: string;
-  /**
-   * Size of the icon.
-   */
-  size: number;
-  /**
-   * TestID used for testing purposes
-   */
-  testID?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-const CrossFadeIcon = ({
-  color,
-  size,
-  source,
-  theme: themeOverrides,
-  testID = 'cross-fade-icon',
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const [currentIcon, setCurrentIcon] = React.useState<IconSource>(
-    () => source
-  );
-  const [previousIcon, setPreviousIcon] = React.useState<IconSource | null>(
-    null
-  );
-  const { current: fade } = React.useRef<Animated.Value>(new Animated.Value(1));
-
-  const { scale } = theme.animation;
-
-  if (currentIcon !== source) {
-    setPreviousIcon(() => currentIcon);
-    setCurrentIcon(() => source);
-  }
-
-  React.useEffect(() => {
-    if (isValidIcon(previousIcon) && !isEqualIcon(previousIcon, currentIcon)) {
-      fade.setValue(1);
-
-      Animated.timing(fade, {
-        duration: scale * 200,
-        toValue: 0,
-        useNativeDriver: true,
-      }).start();
-    }
-  }, [currentIcon, previousIcon, scale]);
-
-  const opacityPrev = fade;
-  const opacityNext = previousIcon
-    ? fade.interpolate({
-      inputRange: [0, 1],
-      outputRange: [1, 0],
-    })
-    : 1;
-
-  const rotatePrev = fade.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['-90deg', '0deg'],
-  });
-
-  const rotateNext = previousIcon
-    ? fade.interpolate({
-      inputRange: [0, 1],
-      outputRange: ['0deg', '-180deg'],
-    })
-    : '0deg';
-
-  return (
-    <View
-      style={[
-        styles.content,
-        {
-          height: size,
-          width: size,
-        },
-      ]}
-    >
-      {previousIcon ? (
-        <Animated.View
-          style={[
-            styles.icon,
-            {
-              opacity: opacityPrev,
-              transform: [{ rotate: rotatePrev }],
-            },
-          ]}
-          testID={`${testID}-previous`}
-        >
-          <Icon source={previousIcon} size={size} color={color} theme={theme} />
-        </Animated.View>
-      ) : null}
-      <Animated.View
-        style={[
-          styles.icon,
-          {
-            opacity: opacityNext,
-            transform: [{ rotate: rotateNext }],
-          },
-        ]}
-        testID={`${testID}-current`}
-      >
-        <Icon source={currentIcon} size={size} color={color} theme={theme} />
-      </Animated.View>
-    </View>
-  );
-};
-
-export default CrossFadeIcon;
-
-const styles = StyleSheet.create({
-  content: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-});

package/src/ui/components/EmptyState.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-export interface EmptyStateProps {
-    message: string;
-    textColor?: string;
-}
-
-/**
- * Reusable empty state component
- * Provides consistent empty state displays across screens
- */
-const EmptyState: React.FC<EmptyStateProps> = ({
-    message,
-    textColor,
-}) => {
-    return (
-        <View style={styles.container}>
-            <Text style={[styles.message, textColor ? { color: textColor } : undefined]}>
-                {message}
-            </Text>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        padding: 40,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    message: {
-        fontSize: 16,
-        textAlign: 'center',
-    },
-});
-
-export default React.memo(EmptyState);
-

package/src/ui/components/HelperText.tsx

@@ -1,149 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  type LayoutChangeEvent,
-  type StyleProp,
-  StyleSheet,
-  type TextStyle,
-} from 'react-native';
-import { useTheme } from '@oxyhq/bloom/theme';
-
-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 } = useTheme();
-  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]);
-
-  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.textSecondary}80`; // Add opacity
-    }
-    return colors.textSecondary;
-  };
-
-  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;