@momo-kits/foundation 0.89.6 → 0.92.1-tracking.12

package/Application/utils.tsx

@@ -12,7 +12,8 @@ import {
 } from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-
+import {Platform} from 'react-native';
+const isIOS = Platform.OS === 'ios';
 /**
  * default options for stack screen
  */
@@ -141,4 +142,60 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions};
+const getAccessibilityID = (key = '') => {
+  if (isIOS) {
+    return {
+      accessible: true,
+      testID: key,
+    };
+  } else {
+    return {
+      accessibilityLabel: key,
+    };
+  }
+};
+
+const formatComponentName = (word = '') => {
+  const accentsMap = {
+    a: 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
+    A: 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
+    e: 'é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ',
+    E: 'É|È|Ẻ|Ẽ|Ẹ|Ê|Ế|Ề|Ể|Ễ|Ệ',
+    i: 'í|ì|ỉ|ĩ|ị',
+    I: 'Í|Ì|Ỉ|Ĩ|Ị',
+    o: 'ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ',
+    O: 'Ó|Ò|Ỏ|Õ|Ọ|Ô|Ố|Ồ|Ổ|Ỗ|Ộ|Ơ|Ớ|Ờ|Ở|Ỡ|Ợ',
+    u: 'ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự',
+    U: 'Ú|Ù|Ủ|Ũ|Ụ|Ư|Ứ|Ừ|Ử|Ữ|Ự',
+    y: 'ý|ỳ|ỷ|ỹ|ỵ',
+    Y: 'Ý|Ỳ|Ỷ|Ỹ|Ỵ',
+    d: 'đ',
+    D: 'Đ',
+  };
+
+  for (const [nonAccent, accentGroup] of Object.entries(accentsMap)) {
+    const accents = new RegExp(accentGroup, 'g');
+    word = word.replace(accents, nonAccent);
+  }
+
+  word = word.replace(/\s+/g, '_').toLowerCase();
+
+  return word;
+};
+
+const formatNameLength = (name = '') => {
+  let formattedName = name;
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName;
+};
+export {
+  getStackOptions,
+  getDialogOptions,
+  getModalOptions,
+  getOptions,
+  formatComponentName,
+  formatNameLength,
+  getAccessibilityID,
+};

package/Button/index.tsx

@@ -6,15 +6,19 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
-
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
+import {formatComponentName, getAccessibilityID} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -70,6 +74,12 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  A callback function that is called when the button is pressed.
    */
   onPress: () => void;
+
+  params?: any;
+
+  componentId?: string;
+
+  accessibilityID?: object
 }
 
 const Button: FC<ButtonProps> = ({
@@ -82,9 +92,14 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
+  params,
+  componentId,
+  accessibilityLabel,
+                                   accessibilityID,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
+  const {appId, code} = useContext(MiniAppContext)
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
   if (gradient?.length > 0 && type == 'primary') {
@@ -94,6 +109,8 @@ const Button: FC<ButtonProps> = ({
       end: {x: 0, y: 0.5},
     };
   }
+
+  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -289,21 +306,37 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-
+  const selfAccessibilityID = accessibilityID ? accessibilityID : getAccessibilityID?.(`${appId}/${code}/${screenInfo.screenName}/btn_${title}`)
   return (
-    <TouchableOpacity
-      {...rest}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      {renderLeading()}
-      {renderTitle()}
-      {renderTrailing()}
-      {gradientPros && (
-        <AnimationLinear {...gradientPros} style={styles.gradientView} />
-      )}
-      {gradientPros && <View style={styles.strokeView} />}
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params,
+        state: loading
+          ? 'loading'
+          : type === 'disabled'
+          ? 'disabled'
+          : 'enabled',
+        componentId,
+        componentValue: formatComponentName(title),
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        {...selfAccessibilityID}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        {renderLeading()}
+        {renderTitle()}
+        {renderTrailing()}
+        {gradientPros && (
+          <AnimationLinear {...gradientPros} style={styles.gradientView} />
+        )}
+        {gradientPros && <View style={styles.strokeView} />}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/CheckBox/index.tsx

@@ -2,9 +2,14 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import {formatNameLength, getAccessibilityID} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -13,8 +18,12 @@ const CheckBox: FC<CheckBoxProps> = ({
   style,
   label,
   indeterminate,
+  params,
+  componentId,
 }) => {
+    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
@@ -33,28 +42,42 @@ const CheckBox: FC<CheckBoxProps> = ({
       backgroundColor = theme.colors.background.tonal;
     }
   }
+    const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/cbx_${label}_${value}`)
 
   return (
-    <TouchableOpacity
-      activeOpacity={0.8}
-      onPress={() => onChange?.(!value)}
-      disabled={disabled}
-      style={[style, styles.container]}>
-      <View
-        style={[
-          {borderColor, backgroundColor, borderWidth: 1},
-          styles.checkbox,
-        ]}>
-        {haveValue && (
-          <Icon
-            color={theme.colors.background.surface}
-            size={20}
-            source={iconSource}
-          />
-        )}
-      </View>
-      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params,
+        state: disabled ? 'disabled' : 'filled',
+        componentId,
+        action: 'click',
+        componentLabel: formatNameLength(label || ''),
+        componentValue: indeterminate ? 'indetermine' : value,
+      }}>
+      <TouchableOpacity
+          {...accessibilityID}
+        activeOpacity={0.8}
+        onPress={() => onChange?.(!value)}
+        disabled={disabled}
+        style={[style, styles.container]}>
+        <View
+          style={[
+            {borderColor, backgroundColor, borderWidth: 1},
+            styles.checkbox,
+          ]}>
+          {haveValue && (
+            <Icon
+              color={theme.colors.background.surface}
+              size={20}
+              source={iconSource}
+            />
+          )}
+        </View>
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/CheckBox/types.ts

@@ -35,4 +35,8 @@ export type CheckBoxProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
+
+  params?: any
+
+  componentId?: string
 };

package/IconButton/index.tsx

@@ -9,6 +9,11 @@ import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
+import {formatComponentName} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
@@ -26,6 +31,10 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * Optional. Defines the size of the IconButton.
    */
   size?: 'large' | 'small';
+
+  params?: any;
+
+  componentId?: string;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -33,9 +42,12 @@ const IconButton: React.FC<IconButtonProps> = ({
   icon,
   size,
   onPress,
+  params,
+  componentId,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -121,13 +133,24 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      <Icon size={iconSize} source={icon} color={getIconColor()} />
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'IconButton',
+        params,
+        state: type === 'disabled' ? 'disabled' : 'enabled',
+        componentId,
+        componentValue: formatComponentName(icon),
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        <Icon size={iconSize} source={icon} color={getIconColor()} />
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Image/index.tsx

@@ -7,6 +7,7 @@ import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {ImageProps} from './types';
+import {getAccessibilityID} from "../Application/utils";
 
 type Status = 'success' | 'loading' | 'error';
 
@@ -41,9 +42,11 @@ const Image: React.FC<ImageProps> = ({
     return children;
   };
 
+  const accessibilityID = getAccessibilityID?.(`img|${source}`)
   return (
     <FastImage
       {...rest}
+      {...accessibilityID}
       source={source}
       style={[styles.container, style]}
       onProgress={() => {

package/Input/Input.tsx

@@ -6,13 +6,18 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
+import {formatComponentName, getAccessibilityID} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
   (
@@ -39,15 +44,19 @@ const Input = forwardRef(
       onPressIcon,
       secureTextEntry,
       style,
+      params,
+      componentId,
       ...props
     }: InputProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const {appId} = useContext(MiniAppContext)
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const screenInfo = useContext<any>(ScreenContext);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -112,6 +121,7 @@ const Input = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
+        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
       return (
         <View
@@ -140,6 +150,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
+              {...accessibilityID}
               editable={!disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
@@ -180,11 +191,35 @@ const Input = forwardRef(
       );
     };
 
+    let inputState = 'active';
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
+
     return (
-      <View style={[style, styles.wrapper]}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </View>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'Input',
+          params,
+          componentLabel: formatComponentName(floatingValue || ''),
+          state: inputState,
+          componentId,
+        }}>
+        <View style={[style, styles.wrapper]}>
+          {renderInputView()}
+          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        </View>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputDropDown.tsx

@@ -1,12 +1,17 @@
 import React, {useContext} from 'react';
 import {TextInput, TouchableOpacity, View} from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
+import {formatComponentName, getAccessibilityID} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputDropDown = ({
   value,
@@ -26,10 +31,14 @@ const InputDropDown = ({
   leadingIcon,
   leadingIconColor,
   style,
+  params,
+  componentId,
   ...props
 }: InputDropDownProps) => {
+    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
+  const screenInfo = useContext<any>(ScreenContext);
 
   const renderIcon = (color: string | undefined) => {
     if (loading) {
@@ -51,6 +60,7 @@ const InputDropDown = ({
       placeholderColor = disabledColor;
       iconTintColor = disabledColor;
     }
+      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <View
@@ -80,6 +90,7 @@ const InputDropDown = ({
           {full && (
             <TextInput
               {...props}
+              {...accessibilityID}
               onPressIn={onPress}
               editable={false}
               textAlignVertical="top"
@@ -103,11 +114,25 @@ const InputDropDown = ({
     );
   };
 
+
+
   return (
-    <TouchableOpacity onPress={onPress} style={[style, full && styles.wrapper]}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'InputOTP',
+        params,
+        state: 'enabled',
+        componentLabel: formatComponentName(floatingValue || ''),
+        componentId,
+      }}>
+      <TouchableOpacity
+        onPress={onPress}
+        style={[style, full && styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Input/InputMoney.tsx

@@ -12,12 +12,17 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
+import {formatComponentName, getAccessibilityID} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputMoney = forwardRef(
   (
@@ -36,14 +41,18 @@ const InputMoney = forwardRef(
       required = false,
       errorSpacing,
       style,
+      params,
       defaultValue = '',
+      componentId,
       ...props
     }: InputMoneyProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const {appId} = useContext(MiniAppContext)
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const screenInfo = useContext<any>(ScreenContext);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -95,6 +104,7 @@ const InputMoney = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
+        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
       return (
         <View
@@ -114,6 +124,7 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              {...accessibilityID}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -151,11 +162,36 @@ const InputMoney = forwardRef(
       );
     };
 
+    let inputState = 'active';
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
+
     return (
-      <View style={[style, styles.wrapper]}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </View>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'InputMoney',
+          params,
+          componentLabel: formatComponentName(floatingValue || ''),
+          state: inputState,
+          componentId,
+        }}>
+        <View
+            style={[style, styles.wrapper]}>
+          {renderInputView()}
+          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        </View>
+      </ScreenContext.Provider>
     );
   },
 );