@oxyhq/services 19.0.0 → 19.1.0

package/src/ui/components/TouchableRipple/TouchableRipple.native.tsx

@@ -1,146 +0,0 @@
-import * as React from 'react';
-import {
-  type PressableAndroidRippleConfig,
-  type StyleProp,
-  Platform,
-  type ViewStyle,
-  StyleSheet,
-  type GestureResponderEvent,
-  View,
-  type ColorValue,
-} from 'react-native';
-
-import type { PressableProps } from './Pressable';
-import { Pressable } from './Pressable';
-import { getTouchableRippleColors } from './utils';
-// Settings context not needed - removed dependency
-const SettingsContext = React.createContext({ rippleEffectEnabled: true });
-import { useInternalTheme } from '../theming';
-import type { ThemeProp } from '../types';
-import { forwardRef } from '../utils/forwardRef';
-import hasTouchHandler from '../utils/hasTouchHandler';
-
-const ANDROID_VERSION_LOLLIPOP = 21;
-const ANDROID_VERSION_PIE = 28;
-
-export type Props = PressableProps & {
-  borderless?: boolean;
-  background?: PressableAndroidRippleConfig;
-  centered?: boolean;
-  disabled?: boolean;
-  onPress?: (e: GestureResponderEvent) => void | null;
-  onLongPress?: (e: GestureResponderEvent) => void;
-  onPressIn?: (e: GestureResponderEvent) => void;
-  onPressOut?: (e: GestureResponderEvent) => void;
-  rippleColor?: ColorValue;
-  underlayColor?: string;
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-  theme?: ThemeProp;
-};
-
-const TouchableRipple = (
-  {
-    style,
-    background,
-    borderless = false,
-    disabled: disabledProp,
-    rippleColor,
-    underlayColor,
-    children,
-    theme: themeOverrides,
-    ...rest
-  }: Props,
-  ref: React.ForwardedRef<View>
-) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { rippleEffectEnabled } = React.useContext(SettingsContext) as { rippleEffectEnabled: boolean };
-
-  const { onPress, onLongPress, onPressIn, onPressOut } = rest;
-
-  const hasPassedTouchHandler = hasTouchHandler({
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-  });
-
-  const disabled = disabledProp || !hasPassedTouchHandler;
-
-  const { calculatedRippleColor, calculatedUnderlayColor } =
-    getTouchableRippleColors({
-      theme,
-      rippleColor,
-      underlayColor,
-    });
-
-  // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
-  // https://github.com/facebook/react-native/issues/6480
-  const useForeground =
-    Platform.OS === 'android' &&
-    Platform.Version >= ANDROID_VERSION_PIE &&
-    borderless;
-
-  if (TouchableRipple.supported) {
-    const androidRipple = rippleEffectEnabled
-      ? background ?? {
-        color: calculatedRippleColor,
-        borderless,
-        foreground: useForeground,
-      }
-      : undefined;
-
-    return (
-      <Pressable
-        {...rest}
-        ref={ref}
-        disabled={disabled}
-        style={[borderless && styles.overflowHidden, style]}
-        android_ripple={androidRipple}
-      >
-        {React.Children.only(children)}
-      </Pressable>
-    );
-  }
-
-  return (
-    <Pressable
-      {...rest}
-      ref={ref}
-      disabled={disabled}
-      style={[borderless && styles.overflowHidden, style]}
-    >
-      {({ pressed }) => (
-        <>
-          {pressed && rippleEffectEnabled && (
-            <View
-              testID="touchable-ripple-underlay"
-              style={[
-                styles.underlay,
-                { backgroundColor: calculatedUnderlayColor },
-              ]}
-            />
-          )}
-          {React.Children.only(children)}
-        </>
-      )}
-    </Pressable>
-  );
-};
-
-TouchableRipple.supported =
-  Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
-
-const styles = StyleSheet.create({
-  overflowHidden: {
-    overflow: 'hidden',
-  },
-  underlay: {
-    ...StyleSheet.absoluteFill,
-    zIndex: 2,
-  },
-});
-
-const Component = forwardRef(TouchableRipple);
-
-export default Component as typeof Component & { supported: boolean };

package/src/ui/components/TouchableRipple/TouchableRipple.tsx

@@ -1,347 +0,0 @@
-import * as React from 'react';
-import {
-  type ColorValue,
-  type GestureResponderEvent,
-  Platform,
-  type StyleProp,
-  StyleSheet,
-  type View,
-  type ViewStyle,
-} from 'react-native';
-
-import type { PressableProps, PressableStateCallbackType } from './Pressable';
-import { Pressable } from './Pressable';
-import { getTouchableRippleColors } from './utils';
-import { useInternalTheme } from '../theming';
-import type { ThemeProp } from '../types';
-import { forwardRef } from '../utils/forwardRef';
-import hasTouchHandler from '../utils/hasTouchHandler';
-
-// Settings context not needed - removed dependency
-const SettingsContext = React.createContext({ rippleEffectEnabled: true });
-
-// Color manipulation utilities (simplified without color package)
-const hexToRgb = (hex: string): [number, number, number] => {
-  const r = Number.parseInt(hex.slice(1, 3), 16);
-  const g = Number.parseInt(hex.slice(3, 5), 16);
-  const b = Number.parseInt(hex.slice(5, 7), 16);
-  return [r, g, b];
-};
-
-const fadeColor = (color: string, alpha: number): string => {
-  const [r, g, b] = hexToRgb(color);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
-
-const colorUtil = (hex: string) => ({
-  fade: (alpha: number) => ({
-    rgb: () => ({
-      string: () => fadeColor(hex, alpha),
-    }),
-  }),
-  rgb: () => ({
-    string: () => hex,
-  }),
-});
-
-export type Props = PressableProps & {
-  /**
-   * Whether to render the ripple outside the view bounds.
-   */
-  borderless?: boolean;
-  /**
-   * Type of background drawabale to display the feedback (Android).
-   * https://reactnative.dev/docs/pressable#rippleconfig
-   */
-  background?: Object;
-  /**
-   * Whether to start the ripple at the center (Web).
-   */
-  centered?: boolean;
-  /**
-   * Whether to prevent interaction with the touchable.
-   */
-  disabled?: boolean;
-  /**
-   * Function to execute on press. If not set, will cause the touchable to be disabled.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute on long press.
-   */
-  onLongPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute immediately when a touch is engaged, before `onPressOut` and `onPress`.
-   */
-  onPressIn?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute when a touch is released.
-   */
-  onPressOut?: (e: GestureResponderEvent) => void;
-  /**
-   * Color of the ripple effect (Android >= 5.0 and Web).
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Color of the underlay for the highlight effect (Android < 5.0 and iOS).
-   */
-  underlayColor?: string;
-  /**
-   * Content of the `TouchableRipple`.
-   */
-  children:
-  | ((state: PressableStateCallbackType) => React.ReactNode)
-  | React.ReactNode;
-  style?:
-  | StyleProp<ViewStyle>
-  | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
-  | undefined;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * A wrapper for views that should respond to touches.
- * Provides a material "ink ripple" interaction effect for supported platforms (>= Android Lollipop).
- * On unsupported platforms, it falls back to a highlight effect.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { Text, TouchableRipple } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <TouchableRipple
- *     onPress={() => console.log('Pressed')}
- *     rippleColor="rgba(0, 0, 0, .32)"
- *   >
- *     <Text>Press anywhere</Text>
- *   </TouchableRipple>
- * );
- *
- * export default MyComponent;
- * ```
- *
- * @extends Pressable props https://reactnative.dev/docs/Pressable#props
- */
-const TouchableRipple = (
-  {
-    style,
-    background: _background,
-    borderless = false,
-    disabled: disabledProp,
-    rippleColor,
-    underlayColor: _underlayColor,
-    children,
-    theme: themeOverrides,
-    ...rest
-  }: Props,
-  ref: React.ForwardedRef<View>
-) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { calculatedRippleColor } = getTouchableRippleColors({
-    theme,
-    rippleColor,
-  });
-  const hoverColor = colorUtil(typeof calculatedRippleColor === 'string' ? calculatedRippleColor : '#000000').fade(0.5).rgb().string();
-  const { rippleEffectEnabled } = React.useContext(SettingsContext) as { rippleEffectEnabled: boolean };
-
-  const { onPress, onLongPress, onPressIn, onPressOut } = rest;
-
-  const handlePressIn = React.useCallback(
-    (e: any) => {
-      onPressIn?.(e);
-
-      if (rippleEffectEnabled) {
-        const { centered } = rest;
-
-        const button = e.currentTarget;
-        const style = window.getComputedStyle(button);
-        const dimensions = button.getBoundingClientRect();
-
-        let touchX;
-        let touchY;
-
-        const { changedTouches, touches } = e.nativeEvent;
-        const touch = touches?.[0] ?? changedTouches?.[0];
-
-        // If centered or it was pressed using keyboard - enter or space
-        if (centered || !touch) {
-          touchX = dimensions.width / 2;
-          touchY = dimensions.height / 2;
-        } else {
-          touchX = touch.locationX ?? e.pageX;
-          touchY = touch.locationY ?? e.pageY;
-        }
-
-        // Get the size of the button to determine how big the ripple should be
-        const size = centered
-          ? // If ripple is always centered, we don't need to make it too big
-          Math.min(dimensions.width, dimensions.height) * 1.5
-          : // Otherwise make it twice as big so clicking on one end spreads ripple to other
-          Math.max(dimensions.width, dimensions.height) * 2;
-
-        // Create a container for our ripple effect so we don't need to change the parent's style
-        const container = document.createElement('span');
-
-        container.setAttribute('data-paper-ripple', '');
-
-        Object.assign(container.style, {
-          position: 'absolute',
-          pointerEvents: 'none',
-          top: '0',
-          left: '0',
-          right: '0',
-          bottom: '0',
-          borderTopLeftRadius: style.borderTopLeftRadius,
-          borderTopRightRadius: style.borderTopRightRadius,
-          borderBottomRightRadius: style.borderBottomRightRadius,
-          borderBottomLeftRadius: style.borderBottomLeftRadius,
-          overflow: centered ? 'visible' : 'hidden',
-        });
-
-        // Create span to show the ripple effect
-        const ripple = document.createElement('span');
-
-        Object.assign(ripple.style, {
-          position: 'absolute',
-          pointerEvents: 'none',
-          backgroundColor: calculatedRippleColor,
-          borderRadius: '50%',
-
-          /* Transition configuration */
-          transitionProperty: 'transform opacity',
-          transitionDuration: `${Math.min(size * 1.5, 350)}ms`,
-          transitionTimingFunction: 'linear',
-          transformOrigin: 'center',
-
-          /* We'll animate these properties */
-          transform: 'translate3d(-50%, -50%, 0) scale3d(0.1, 0.1, 0.1)',
-          opacity: '0.5',
-
-          // Position the ripple where cursor was
-          left: `${touchX}px`,
-          top: `${touchY}px`,
-          width: `${size}px`,
-          height: `${size}px`,
-        });
-
-        // Finally, append it to DOM
-        container.appendChild(ripple);
-        button.appendChild(container);
-
-        // rAF runs in the same frame as the event handler
-        // Use double rAF to ensure the transition class is added in next frame
-        // This will make sure that the transition animation is triggered
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            Object.assign(ripple.style, {
-              transform: 'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',
-              opacity: '1',
-            });
-          });
-        });
-      }
-    },
-    [onPressIn, rest, rippleEffectEnabled, calculatedRippleColor]
-  );
-
-  const handlePressOut = React.useCallback(
-    (e: any) => {
-      onPressOut?.(e);
-
-      if (rippleEffectEnabled) {
-        const containers = e.currentTarget.querySelectorAll(
-          '[data-paper-ripple]'
-        ) as HTMLElement[];
-
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            containers.forEach((container) => {
-              const ripple = container.firstChild as HTMLSpanElement;
-
-              Object.assign(ripple.style, {
-                transitionDuration: '250ms',
-                opacity: 0,
-              });
-
-              // Finally remove the span after the transition
-              setTimeout(() => {
-                const { parentNode } = container;
-
-                if (parentNode) {
-                  parentNode.removeChild(container);
-                }
-              }, 500);
-            });
-          });
-        });
-      }
-    },
-    [onPressOut, rippleEffectEnabled]
-  );
-
-  const hasPassedTouchHandler = hasTouchHandler({
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-  });
-
-  const disabled = disabledProp || !hasPassedTouchHandler;
-
-  return (
-    <Pressable
-      {...rest}
-      ref={ref}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      disabled={disabled}
-      style={(state) => [
-        styles.touchable,
-        borderless && styles.borderless,
-        // focused state is not ready yet: https://github.com/necolas/react-native-web/issues/1849
-        // state.focused && { backgroundColor: ___ },
-        state.hovered && { backgroundColor: hoverColor },
-        disabled && styles.disabled,
-        typeof style === 'function' ? style(state) : style,
-      ]}
-    >
-      {(state) =>
-        React.Children.only(
-          typeof children === 'function' ? children(state) : children
-        )
-      }
-    </Pressable>
-  );
-};
-
-/**
- * Whether ripple effect is supported.
- */
-TouchableRipple.supported = true;
-
-const styles = StyleSheet.create({
-  touchable: {
-    position: 'relative',
-    ...(Platform.OS === 'web' && {
-      cursor: 'pointer',
-      transition: '150ms background-color',
-    }),
-  },
-  disabled: {
-    ...(Platform.OS === 'web' && {
-      cursor: 'auto',
-    }),
-  },
-  borderless: {
-    overflow: 'hidden',
-  },
-});
-
-const Component = forwardRef(TouchableRipple);
-
-export default Component as typeof Component & { supported: boolean };

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

@@ -1,66 +0,0 @@
-import type { ColorValue } from 'react-native';
-
-import colorUtil from 'color';
-
-import type { InternalTheme } from '../types';
-
-const getUnderlayColor = ({
-  theme,
-  calculatedRippleColor,
-  underlayColor,
-}: {
-  theme: InternalTheme;
-  calculatedRippleColor: ColorValue;
-  underlayColor?: string;
-}) => {
-  if (underlayColor != null) {
-    return underlayColor;
-  }
-
-  if (theme.isV3) {
-    return typeof calculatedRippleColor === 'string' ? calculatedRippleColor : '#000000';
-  }
-
-  return colorUtil(typeof calculatedRippleColor === 'string' ? calculatedRippleColor : '#000000').fade(0.5).rgb().string();
-};
-
-const getRippleColor = ({
-  theme,
-  rippleColor,
-}: {
-  theme: InternalTheme;
-  rippleColor?: ColorValue;
-}) => {
-  if (rippleColor) {
-    return rippleColor;
-  }
-
-  if (theme.isV3) {
-    return colorUtil(theme.colors.onSurface).alpha(0.12).rgb().string();
-  }
-
-  if (theme.dark) {
-    return colorUtil(theme.colors.onSurface || theme.colors.text || '#000000').alpha(0.32).rgb().string();
-  }
-  return colorUtil(theme.colors.text || theme.colors.onSurface || '#000000').alpha(0.2).rgb().string();
-};
-
-export const getTouchableRippleColors = ({
-  theme,
-  rippleColor,
-  underlayColor,
-}: {
-  theme: InternalTheme;
-  rippleColor?: ColorValue;
-  underlayColor?: string;
-}) => {
-  const calculatedRippleColor = getRippleColor({ theme, rippleColor });
-  return {
-    calculatedRippleColor,
-    calculatedUnderlayColor: getUnderlayColor({
-      theme,
-      calculatedRippleColor,
-      underlayColor,
-    }),
-  };
-};

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

@@ -1,106 +0,0 @@
-import type * as React from 'react';
-import {
-  Animated,
-  I18nManager,
-  type StyleProp,
-  StyleSheet,
-  type TextStyle,
-  type Text,
-} from 'react-native';
-
-import type { VariantProp } from './types';
-import { useInternalTheme } from '../theming';
-import type { ThemeProp } from "../types";
-import { forwardRef } from '../utils/forwardRef';
-
-type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
-  /**
-   * Variant defines appropriate text styles for type role and its size.
-   * Available variants:
-   *
-   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
-   *
-   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
-   *
-   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
-   *
-   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
-   *
-   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
-   */
-  variant?: VariantProp<T>;
-  style?: StyleProp<TextStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * Animated text component which follows styles from the theme.
- *
- * @extends Text props https://reactnative.dev/docs/text#props
- */
-const AnimatedText = forwardRef<Text & HTMLElement, Props<never>>(
-  function AnimatedText(
-    { style, theme: themeOverrides, variant, ...rest },
-    ref
-  ) {
-    const theme = useInternalTheme(themeOverrides);
-    const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
-
-    if (theme.isV3 && variant) {
-      const font = theme.fonts[variant];
-      if (typeof font !== 'object') {
-        throw new Error(
-          `Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
-            theme.fonts
-          ).join(', ')}.`
-        );
-      }
-
-      return (
-        <Animated.Text
-          ref={ref}
-          {...rest}
-          style={[
-            font,
-            styles.text,
-            { writingDirection, color: theme.colors.onSurface },
-            style,
-          ]}
-        />
-      );
-    }
-      const font = !theme.isV3 ? (theme.fonts.regular || theme.fonts.default) : theme.fonts.bodyMedium;
-      const textStyle = {
-        ...font,
-        color: theme.isV3 ? theme.colors.onSurface : (theme.colors.text || theme.colors.onSurface),
-      };
-      return (
-        <Animated.Text
-          ref={ref}
-          {...rest}
-          style={[
-            styles.text,
-            textStyle,
-            {
-              writingDirection,
-            },
-            style,
-          ]}
-        />
-      );
-  }
-);
-
-const styles = StyleSheet.create({
-  text: {
-    textAlign: 'left',
-  },
-});
-
-export const customAnimatedText = <T,>() =>
-  AnimatedText as (props: Props<T>) => React.ReactElement;
-
-export default AnimatedText;

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

@@ -1,22 +0,0 @@
-// MD3TypescaleKey enum for variant types
-export enum MD3TypescaleKey {
-  displayLarge = 'displayLarge',
-  displayMedium = 'displayMedium',
-  displaySmall = 'displaySmall',
-  headlineLarge = 'headlineLarge',
-  headlineMedium = 'headlineMedium',
-  headlineSmall = 'headlineSmall',
-  titleLarge = 'titleLarge',
-  titleMedium = 'titleMedium',
-  titleSmall = 'titleSmall',
-  labelLarge = 'labelLarge',
-  labelMedium = 'labelMedium',
-  labelSmall = 'labelSmall',
-  bodyLarge = 'bodyLarge',
-  bodyMedium = 'bodyMedium',
-  bodySmall = 'bodySmall',
-}
-
-export type VariantProp<T> =
-  | (T extends string ? (string extends T ? never : T) : never)
-  | keyof typeof MD3TypescaleKey;