@oxyhq/services 19.0.1 → 19.1.0

package/src/ui/components/Icon.tsx

@@ -1,189 +0,0 @@
-import type * as React from 'react';
-import {
-  I18nManager,
-  Image,
-  type ImageSourcePropType,
-  Platform,
-  type StyleProp,
-  type ImageStyle,
-  type TextStyle,
-} 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 IconStyle = StyleProp<ImageStyle> | StyleProp<TextStyle>;
-
-type IconProps = {
-  /**
-   * Size of icon.
-   */
-  size: number;
-  allowFontScaling?: boolean;
-  style?: IconStyle;
-};
-
-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
-      />
-    );
-  }if (typeof s === 'string') {
-    // String icons - use MaterialCommunityIcons from @expo/vector-icons
-    // This is the default icon library used by react-native-paper.
-    // The package ships a literal-union for `name`, but the local
-    // module augmentation in src/types/expo-vector-icons.d.ts widens it
-    // to `string` so dynamic names compile without a cast.
-    const styleArray = Array.isArray(rest.style)
-      ? rest.style
-      : rest.style
-        ? [rest.style]
-        : [];
-    return (
-      <MaterialCommunityIcons
-        name={s}
-        size={size}
-        color={iconColor}
-        style={[
-          {
-            transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
-          },
-          ...styleArray,
-        ]}
-        testID={testID}
-        {...accessibilityProps}
-      />
-    );
-  }if (typeof s === 'function') {
-    return s({ color: iconColor, size, direction, testID });
-  }
-
-  return null;
-};
-
-export default Icon;

package/src/ui/components/IconButton/IconButton.tsx

@@ -1,232 +0,0 @@
-import type * as React from 'react';
-import {
-  type GestureResponderEvent,
-  type StyleProp,
-  StyleSheet,
-  type ViewStyle,
-  type View,
-  type Animated,
-  type ColorValue,
-} from 'react-native';
-
-import { getIconButtonColor } from './utils';
-import { useInternalTheme } from '../theming';
-import type { $RemoveChildren, ThemeProp } from "../types";
-import { forwardRef } from '../utils/forwardRef';
-import { Loading } from '@oxyhq/bloom';
-import CrossFadeIcon from '../CrossFadeIcon';
-import Icon, { type IconSource } from '../Icon';
-import Surface from '../Surface';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-
-const PADDING = 8;
-
-type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
-
-export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
-  /**
-   * Icon to display.
-   */
-  icon: IconSource;
-  /**
-   * @supported Available in v5.x with theme version 3
-   * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
-   */
-  mode?: IconButtonMode;
-  /**
-   * @renamed Renamed from 'color' to 'iconColor' in v5.x
-   * Color of the icon.
-   */
-  iconColor?: string;
-  /**
-   * Background color of the icon container.
-   */
-  containerColor?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * @supported Available in v5.x with theme version 3
-   * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
-   */
-  selected?: boolean;
-  /**
-   * Size of the icon.
-   */
-  size?: number;
-  /**
-   * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
-   */
-  disabled?: boolean;
-  /**
-   * Whether an icon change is animated.
-   */
-  animated?: boolean;
-  /**
-   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Style of button's inner content.
-   * Use this prop to apply custom height and width or to set a custom padding`.
-   */
-  contentStyle?: StyleProp<ViewStyle>;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  ref?: React.RefObject<View>;
-  /**
-   * TestID used for testing purposes
-   */
-  testID?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * Whether to show a loading indicator.
-   */
-  loading?: boolean;
-};
-
-/**
- * An icon button is a button which displays only an icon without a label.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { IconButton, MD3Colors } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <IconButton
- *     icon="camera"
- *     iconColor={MD3Colors.error50}
- *     size={20}
- *     onPress={() => console.log('Pressed')}
- *   />
- * );
- *
- * export default MyComponent;
- * ```
- *
- * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
- */
-const IconButton = forwardRef<View, Props>(
-  (
-    {
-      icon,
-      iconColor: customIconColor,
-      containerColor: customContainerColor,
-      rippleColor: customRippleColor,
-      size = 24,
-      accessibilityLabel,
-      disabled,
-      onPress,
-      selected = false,
-      animated = false,
-      mode,
-      style,
-      theme: themeOverrides,
-      testID = 'icon-button',
-      loading = false,
-      contentStyle,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const theme = useInternalTheme(themeOverrides);
-    const { isV3 } = theme;
-
-    const IconComponent = animated ? CrossFadeIcon : Icon;
-
-    const { iconColor, rippleColor, backgroundColor, borderColor } =
-      getIconButtonColor({
-        theme,
-        disabled,
-        selected,
-        mode,
-        customIconColor,
-        customContainerColor,
-        customRippleColor,
-      });
-
-    const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5;
-
-    const {
-      borderWidth = isV3 && mode === 'outlined' && !selected ? 1 : 0,
-      borderRadius = buttonSize / 2,
-    } = (StyleSheet.flatten(style) || {}) as ViewStyle;
-
-    const borderStyles = {
-      borderWidth,
-      borderRadius,
-      borderColor,
-    };
-
-    return (
-      <Surface
-        ref={ref}
-        testID={`${testID}-container`}
-        style={[
-          {
-            backgroundColor,
-            width: buttonSize,
-            height: buttonSize,
-          },
-          styles.container,
-          borderStyles,
-          !isV3 && disabled && styles.disabled,
-          style,
-        ]}
-        container
-        {...(isV3 && { elevation: 0 })}
-      >
-        <TouchableRipple
-          borderless
-          centered
-          onPress={onPress}
-          rippleColor={rippleColor}
-          accessibilityLabel={accessibilityLabel}
-          style={[styles.touchable, contentStyle]}
-          accessibilityRole="button"
-          accessibilityState={{ disabled }}
-          disabled={disabled}
-          hitSlop={
-            TouchableRipple.supported
-              ? { top: 10, left: 10, bottom: 10, right: 10 }
-              : { top: 6, left: 6, bottom: 6, right: 6 }
-          }
-          testID={testID}
-          {...rest}
-        >
-          {loading ? (
-            <Loading iconSize={size} color={iconColor} />
-          ) : (
-            <IconComponent color={iconColor} source={icon} size={size} />
-          )}
-        </TouchableRipple>
-      </Surface>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-    margin: 6,
-    elevation: 0,
-  },
-  touchable: {
-    flexGrow: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  disabled: {
-    opacity: 0.32,
-  },
-});
-
-export default IconButton;

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

@@ -1,190 +0,0 @@
-import type { ColorValue } from 'react-native';
-
-import color from 'color';
-
-import type { InternalTheme } from "../types";
-
-type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
-
-type BaseProps = {
-  theme: InternalTheme;
-  isMode: (mode: IconButtonMode) => boolean;
-  disabled?: boolean;
-  selected?: boolean;
-};
-
-const getBorderColor = ({
-  theme,
-  disabled,
-}: {
-  theme: InternalTheme;
-  disabled?: boolean;
-}) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.surfaceDisabled;
-    }
-
-    return theme.colors.outline;
-  }
-
-  return undefined;
-};
-
-const getBackgroundColor = ({
-  theme,
-  isMode,
-  disabled,
-  selected,
-  customContainerColor,
-}: BaseProps & { customContainerColor?: string }) => {
-  if (theme.isV3) {
-    if (disabled) {
-      if (isMode('contained') || isMode('contained-tonal')) {
-        return theme.colors.surfaceDisabled;
-      }
-    }
-
-    if (typeof customContainerColor !== 'undefined') {
-      return customContainerColor;
-    }
-
-    if (isMode('contained')) {
-      if (selected) {
-        return theme.colors.primary;
-      }
-      return theme.colors.surfaceVariant;
-    }
-
-    if (isMode('contained-tonal')) {
-      if (selected) {
-        return theme.colors.secondaryContainer;
-      }
-      return theme.colors.surfaceVariant;
-    }
-
-    if (isMode('outlined')) {
-      if (selected) {
-        return theme.colors.inverseSurface;
-      }
-    }
-  }
-
-  if (typeof customContainerColor !== 'undefined') {
-    return customContainerColor;
-  }
-
-  return undefined;
-};
-
-const getIconColor = ({
-  theme,
-  isMode,
-  disabled,
-  selected,
-  customIconColor,
-}: BaseProps & { customIconColor?: string }) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    if (typeof customIconColor !== 'undefined') {
-      return customIconColor;
-    }
-
-    if (isMode('contained')) {
-      if (selected) {
-        return theme.colors.onPrimary;
-      }
-      return theme.colors.primary;
-    }
-
-    if (isMode('contained-tonal')) {
-      if (selected) {
-        return theme.colors.onSecondaryContainer;
-      }
-      return theme.colors.onSurfaceVariant;
-    }
-
-    if (isMode('outlined')) {
-      if (selected) {
-        return theme.colors.inverseOnSurface;
-      }
-      return theme.colors.onSurfaceVariant;
-    }
-
-    if (selected) {
-      return theme.colors.primary;
-    }
-    return theme.colors.onSurfaceVariant;
-  }
-
-  if (typeof customIconColor !== 'undefined') {
-    return customIconColor;
-  }
-
-  return theme.colors.text || theme.colors.onSurface;
-};
-
-const getRippleColor = ({
-  theme,
-  iconColor,
-  customRippleColor,
-}: {
-  theme: InternalTheme;
-  iconColor: string;
-  customRippleColor?: ColorValue;
-}) => {
-  if (customRippleColor) {
-    return customRippleColor;
-  }
-  if (theme.isV3) {
-    return color(iconColor).alpha(0.12).rgb().string();
-  }
-  return color(iconColor).alpha(0.32).rgb().string();
-};
-
-export const getIconButtonColor = ({
-  theme,
-  disabled,
-  mode,
-  selected,
-  customIconColor,
-  customContainerColor,
-  customRippleColor,
-}: {
-  theme: InternalTheme;
-  disabled?: boolean;
-  selected?: boolean;
-  mode?: IconButtonMode;
-  customIconColor?: string;
-  customContainerColor?: string;
-  customRippleColor?: ColorValue;
-}) => {
-  const isMode = (modeToCompare: IconButtonMode) => {
-    return mode === modeToCompare;
-  };
-
-  const baseIconColorProps = {
-    theme,
-    isMode,
-    disabled,
-    selected,
-  };
-
-  const iconColor = getIconColor({
-    ...baseIconColorProps,
-    customIconColor,
-  });
-
-  return {
-    iconColor,
-    backgroundColor: getBackgroundColor({
-      ...baseIconColorProps,
-      customContainerColor,
-    }),
-    rippleColor: getRippleColor({ theme, iconColor, customRippleColor }),
-    borderColor: getBorderColor({ theme, disabled }),
-  };
-};

package/src/ui/components/LoadingState.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
-
-export interface LoadingStateProps {
-    message?: string;
-    color?: string;
-    size?: 'small' | 'large';
-}
-
-/**
- * Reusable loading state component
- * Provides consistent loading indicators across screens
- */
-const LoadingState: React.FC<LoadingStateProps> = ({
-    message,
-    color,
-    size = 'large',
-}) => {
-    return (
-        <View style={styles.container}>
-            <ActivityIndicator size={size} color={color} />
-            {message && (
-                <Text style={[styles.message, color ? { color } : undefined]}>
-                    {message}
-                </Text>
-            )}
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 40,
-        gap: 12,
-    },
-    message: {
-        marginTop: 12,
-        fontSize: 16,
-        textAlign: 'center',
-    },
-});
-
-export default React.memo(LoadingState);
-