@momo-kits/foundation 0.92.2-tracking.8 → 0.92.3-beta.10

package/Application/BottomTab/BottomTabBar.tsx

@@ -28,12 +28,12 @@ import {Radius} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {FloatingButtonProps} from '../types';
-import {getAccessibilityID} from '../utils';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
   inactiveTintColor?: string;
   floatingButton?: FloatingButtonProps;
+  accessibilityLabel?: string;
 };
 
 type Options = {
@@ -317,7 +317,6 @@ export default function BottomTabBar({
                 labelStyle={labelStyle}
                 iconStyle={iconStyle}
                 style={tabStyle}
-                {...getAccessibilityID(`btn_tabbar_${route.name}`)}
               />
             </NavigationRouteContext.Provider>
           </NavigationContext.Provider>

package/Application/BottomTab/index.tsx

@@ -4,12 +4,13 @@ import {createStackNavigator} from '@react-navigation/stack';
 import React, {useContext, useEffect} from 'react';
 import {Platform} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Colors} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {ApplicationContext} from '../index';
 import StackScreen from '../StackScreen';
 import {BottomTabProps, NavigationScreenProps} from '../types';
-import {getAccessibilityID, getStackOptions} from '../utils';
+import {getStackOptions} from '../utils';
 import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
@@ -67,8 +68,8 @@ const BottomTab: React.FC<BottomTabProps> = ({
       backBehavior={'firstRoute'}
       tabBar={props => (
         <BottomTabBar
-          {...getAccessibilityID('tbr_main_bottom')}
           {...props}
+          accessibilityLabel={'BottomTabBar'}
           floatingButton={floatingButton}
         />
       )}
@@ -97,7 +98,8 @@ const BottomTab: React.FC<BottomTabProps> = ({
                     typography={
                       focused ? 'label_xs_medium' : 'description_xs_regular'
                     }
-                    color={color}>
+                    color={color}
+                    style={{width: '90%', textAlign: 'center'}}>
                     {item.label}
                   </Text>
                 );
@@ -113,6 +115,10 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 fontFamily: `${theme.font}-Bold`,
                 left: item?.showDot ? 8 : 4,
                 top: item?.showDot ? -2 : -6,
+                backgroundColor:
+                  typeof item?.badgeLabel === 'string'
+                    ? Colors.orange_03
+                    : Colors.red_03,
               },
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />

package/Application/Components.tsx

@@ -29,7 +29,6 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
-import {getAccessibilityID} from './utils';
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -38,7 +37,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
   badgeType,
   badgeValue,
-  accessibilityID = '',
+  accessibilityLabel = '',
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
@@ -66,10 +65,9 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <View
-      {...getAccessibilityID(accessibilityID)}
-      style={{width: scaleSize(28)}}>
+    <View style={{width: scaleSize(28)}}>
       <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
         <Icon
@@ -94,7 +92,7 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
-      {...getAccessibilityID('title_navigation_header')}
+      accessibilityLabel={'title_navigation_header'}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -173,7 +171,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
-        accessibilityID="btn_navigation_back"
+        accessibilityLabel="btn_navigation_back"
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
@@ -248,7 +246,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
         <Text
-          {...getAccessibilityID('title_navigation_header')}
+          accessibilityLabel={'title_navigation_header'}
           typography="header_default_bold"
           color={tintColor}>
           {title}
@@ -376,7 +374,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
-          accessibilityID="btn_navigation_pin"
+          accessibilityLabel="btn_navigation_pin"
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -407,13 +405,13 @@ const HeaderToolkitAction: React.FC<any> = ({
             },
           ]}>
           <TouchableOpacity
-            {...getAccessibilityID('btn_navigation_more')}
+            accessibilityLabel={'btn_navigation_more'}
             onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
           <TouchableOpacity
-            {...getAccessibilityID('btn_navigation_close')}
+            accessibilityLabel={'btn_navigation_close'}
             onPress={onClose}>
             <Icon
               color={tintColor}

package/Application/StackScreen.tsx

@@ -54,6 +54,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
       Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
     }
 
+    navigator?.maxApi?.of?.({screenName});
+
     tracked.current.timeoutLoad = setTimeout(() => {
       onScreenLoad();
     }, 5000);
@@ -115,9 +117,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
     <ScreenContext.Provider
       value={{
         screenName,
-        autoTracking: (data: any) => {
-          navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
-        },
         onElementLoad: () => {
           endTime.current = Date.now();
           interaction.current?.cancel?.();

package/Application/types.ts

@@ -130,7 +130,7 @@ export type NavigationButtonProps = {
   onPress: () => void;
   badgeType?: 'dot' | 'number';
   badgeValue?: number;
-  accessibilityID?: string;
+  accessibilityLabel?: string;
 };
 
 export type PinnedToolType = {
@@ -196,7 +196,7 @@ export type BottomTabItemProps = {
   label: string;
   icon: string;
   showDot?: boolean;
-  badgeLabel?: string;
+  badgeLabel?: string | number;
   screen: Screen;
   options: NavigationOptions;
 };

package/Application/utils.tsx

@@ -158,41 +158,6 @@ const getAccessibilityID = (
   }
 };
 
-const cleanNameForTracking = (word = ''): string => {
-  return word
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f |\s]/g, '')
-    .toLowerCase();
-};
-
-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) {
@@ -205,8 +170,6 @@ export {
   getDialogOptions,
   getModalOptions,
   getOptions,
-  formatComponentName,
   formatNameLength,
   getAccessibilityID,
-  cleanNameForTracking,
 };

package/Button/index.tsx

@@ -14,7 +14,6 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -306,7 +305,7 @@ const Button: FC<ButtonProps> = ({
         params,
         state: state,
         componentId: accessibilityLabel,
-        componentValue: formatComponentName(title),
+        componentValue: title,
         action: 'click',
       }}>
       <TouchableOpacity

package/CheckBox/index.tsx

@@ -46,7 +46,7 @@ const CheckBox: FC<CheckBoxProps> = ({
         componentId: accessibilityLabel,
         action: 'click',
         componentLabel: formatNameLength(label || ''),
-        componentValue: indeterminate ? 'indetermine' : value,
+        componentValue: indeterminate ? 'undetermined' : value,
       }}>
       <TouchableOpacity
         accessibilityLabel={accessibilityLabel}

package/IconButton/index.tsx

@@ -9,7 +9,6 @@ import {ApplicationContext, ComponentContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
-import {formatComponentName} from '../Application/utils';
 
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
@@ -132,7 +131,7 @@ const IconButton: React.FC<IconButtonProps> = ({
         params,
         state: type === 'disabled' ? 'disabled' : 'enabled',
         componentId: accessibilityLabel,
-        componentValue: formatComponentName(icon),
+        componentValue: icon,
         action: 'click',
       }}>
       <TouchableOpacity

package/Image/index.tsx

@@ -2,12 +2,11 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
-import {ApplicationContext, ComponentContext} from '../Application';
+import {ApplicationContext, ComponentContext, MiniAppContext} from '../Application';
 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';
 
@@ -16,21 +15,25 @@ const Image: React.FC<ImageProps> = ({
   source,
   loading = true,
   children,
+  params,
   accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const app = useContext<any>(MiniAppContext);
   const component = useContext<any>(ComponentContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
-  const id = getAccessibilityID(
-    `img|${(source as Source).uri}`,
-    accessibilityLabel,
-  );
+  const test: any = {
+    accessibilityLabel: accessibilityLabel || `img|${(source as Source).uri}`,
+  };
 
   useEffect(() => {
-    component?.addChild?.(id.testID || id.accessibilityLabel);
+    if(app.enableAutoId){
+      component?.addChildren?.(test.accessibilityLabel, 'add');
+      return () => component?.addChildren(test.accessibilityLabel, 'remove');
+    }
   }, []);
 
   /**
@@ -54,37 +57,37 @@ const Image: React.FC<ImageProps> = ({
   };
 
   return (
-    <FastImage
-      {...rest}
-      {...id}
-      source={source}
-      style={[styles.container, style]}
-      onProgress={() => {
-        error.current = false;
-        if (status !== 'loading' && loading) {
-          setStatus('loading');
-        }
-      }}
-      onLoadStart={() => {
-        error.current = false;
-      }}
-      onLoad={() => {
-        error.current = false;
-      }}
-      onLoadEnd={() => {
-        let current: Status = 'success';
-        if (error.current) {
-          current = 'error';
-        }
-        if (status !== current) {
-          setStatus(current);
-        }
-      }}
-      onError={() => {
-        error.current = true;
-      }}>
-      {renderContent()}
-    </FastImage>
+      <FastImage
+          {...rest}
+          {...test}
+          source={source}
+          style={[styles.container, style]}
+          onProgress={() => {
+            error.current = false;
+            if (status !== 'loading' && loading) {
+              setStatus('loading');
+            }
+          }}
+          onLoadStart={() => {
+            error.current = false;
+          }}
+          onLoad={() => {
+            error.current = false;
+          }}
+          onLoadEnd={() => {
+            let current: Status = 'success';
+            if (error.current) {
+              current = 'error';
+            }
+            if (status !== current) {
+              setStatus(current);
+            }
+          }}
+          onError={() => {
+            error.current = true;
+          }}>
+        {renderContent()}
+      </FastImage>
   );
 };
 

package/Image/types.ts

@@ -3,4 +3,5 @@ import {FastImageProps} from 'react-native-fast-image';
 export interface ImageProps extends FastImageProps {
   loading?: boolean;
   accessibilityLabel?: string;
+  params?: any;
 }

package/Input/Input.tsx

@@ -14,7 +14,6 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
 
 const Input = forwardRef(
   (
@@ -212,7 +211,7 @@ const Input = forwardRef(
         value={{
           componentName: 'Input',
           params,
-          componentLabel: formatComponentName(floatingValue || ''),
+          componentLabel: floatingValue,
           state: inputState,
           componentId: accessibilityLabel,
         }}>

package/Input/InputDropDown.tsx

@@ -7,7 +7,6 @@ import {InputDropDownProps} from './index';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
-import {formatComponentName} from '../Application/utils';
 
 const InputDropDown = ({
   value,
@@ -86,7 +85,6 @@ const InputDropDown = ({
               accessibilityLabel={accessibilityLabel}
               onPressIn={onPress}
               editable={false}
-              textAlignVertical="top"
               style={[
                 styles.input,
                 {
@@ -110,10 +108,10 @@ const InputDropDown = ({
   return (
     <ComponentContext.Provider
       value={{
-        componentName: 'InputOTP',
+        componentName: 'InputDropDown',
         params,
         state: 'enabled',
-        componentLabel: formatComponentName(floatingValue || ''),
+        componentLabel: floatingValue,
         componentId: accessibilityLabel,
       }}>
       <TouchableOpacity

package/Input/InputMoney.tsx

@@ -18,7 +18,6 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {formatComponentName} from '../Application/utils';
 
 const InputMoney = forwardRef(
   (
@@ -119,7 +118,6 @@ const InputMoney = forwardRef(
               {...props}
               accessibilityLabel={accessibilityLabel}
               editable={!disabled}
-              textAlignVertical="top"
               ref={inputRef}
               keyboardType={'number-pad'}
               style={[
@@ -173,7 +171,7 @@ const InputMoney = forwardRef(
         value={{
           componentName: 'InputMoney',
           params,
-          componentLabel: formatComponentName(floatingValue || ''),
+          componentLabel: floatingValue,
           state: inputState,
           componentId: accessibilityLabel,
         }}>

package/Input/InputOTP.tsx

@@ -21,7 +21,6 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatComponentName} from '../Application/utils';
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -71,7 +70,7 @@ const InputOTP = forwardRef(
       length,
       errorMessage,
       errorSpacing,
-      floatingValue,
+      floatingValue = 'Label',
       floatingIconColor,
       floatingIcon,
       placeholder,
@@ -197,7 +196,9 @@ const InputOTP = forwardRef(
                 styles.otpFloatingView,
                 {backgroundColor: theme.colors.background.surface},
               ]}>
-              <Text typography={'description_default_regular'}>
+              <Text
+                typography={'description_default_regular'}
+                color={theme.colors.text.hint}>
                 {floatingValue}
               </Text>
             </View>
@@ -229,7 +230,7 @@ const InputOTP = forwardRef(
         value={{
           componentName: 'InputOTP',
           params,
-          componentLabel: formatComponentName(floatingValue || ''),
+          componentLabel: floatingValue,
           state: 'enabled',
           componentId: accessibilityLabel,
         }}>

package/Input/styles.ts

@@ -53,7 +53,7 @@ export default StyleSheet.create({
     marginRight: Spacing.M,
   },
   icon: {
-    marginLeft: Spacing.S
+    marginLeft: Spacing.S,
   },
   iconWrapper: {
     width: 24,
@@ -145,7 +145,7 @@ export default StyleSheet.create({
   },
   otpFloatingView: {
     position: 'absolute',
-    top: -Spacing.S,
+    top: scaleSize(-Spacing.M + 2),
     alignSelf: 'center',
     paddingHorizontal: Spacing.S,
   },

package/Layout/Screen.tsx

@@ -18,7 +18,7 @@ import React, {
   useEffect,
   useRef,
 } from 'react';
-import {Colors, Spacing, Styles} from '../Consts';
+import {Colors, Shadow, Spacing, Styles} from '../Consts';
 import {Card, Section, validateChildren} from './index';
 import {
   ApplicationContext,
@@ -337,8 +337,9 @@ const Screen = forwardRef(
           {Footer && (
             <View
               style={[
-                styles.footerContainer,
+                Shadow.Dark,
                 {
+                  paddingTop: Spacing.S,
                   paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },

package/Layout/styles.ts

@@ -80,18 +80,4 @@ export default StyleSheet.create({
     paddingHorizontal: undefined,
     paddingVertical: undefined,
   },
-  footerContainer: {
-    paddingTop: Spacing.S,
-    ...Platform.select({
-      android: {
-        elevation: 4,
-      },
-      ios: {
-        shadowColor: Colors.black_20,
-        shadowOffset: {width: 0, height: -2},
-        shadowOpacity: 0.1,
-        shadowRadius: 3,
-      },
-    }),
-  },
 });

package/Popup/PopupNotify.tsx

@@ -7,7 +7,6 @@ import {Text} from '../Text';
 import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
-import {getAccessibilityID} from '../Application/utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -163,7 +162,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const buildCloseIcon = () => {
     return (
       <TouchableOpacity
-        {...getAccessibilityID?.('ic_popup_close')}
+        accessibilityLabel={'ic_popup_close'}
         style={styles.iconCloseContainer}
         onPress={() => {
           closeAction.current = 'icon_close';
@@ -189,7 +188,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
-      {...getAccessibilityID?.(`pu_${context.code}_notify`)}
+      accessibilityLabel={'PopupNotify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -5,7 +5,6 @@ import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
-import {getAccessibilityID} from '../Application/utils';
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   id,
@@ -51,10 +50,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    */
   const buildCloseIcon = () => {
     return (
-      <View
-        {...getAccessibilityID?.('ic_popup_close')}
-        style={styles.iconCloseContainer}>
+      <View style={styles.iconCloseContainer}>
         <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
           onPress={() => {
             closeAction.current = 'icon_close';
             navigator?.pop();
@@ -81,7 +79,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View {...getAccessibilityID?.(`pu_${context.code}_promotion`)}>
+    <View accessibilityLabel={'PopupPromotion'}>
       <Image
         source={{
           uri: image,

package/Radio/index.tsx

@@ -43,12 +43,12 @@ const Radio: FC<RadioProps> = ({
   return (
     <ComponentContext.Provider
       value={{
-        componentName: 'Button',
+        componentName: 'Radio',
         params,
         state: disabled ? 'disabled' : 'enabled',
         componentId: accessibilityLabel,
         componentLabel: formatNameLength(label || ''),
-        componentValue: value,
+        componentValue: selected,
         action: 'click',
       }}>
       <TouchableOpacity

package/Switch/index.tsx

@@ -24,7 +24,7 @@ const Switch: FC<SwitchProps> = ({
   return (
     <ComponentContext.Provider
       value={{
-        componentName: 'Button',
+        componentName: 'Switch',
         params,
         state: disabled ? 'disabled' : 'enabled',
         componentId: accessibilityLabel,

package/Title/index.tsx

@@ -22,8 +22,10 @@ const Title: FC<TitleProps> = ({
   badgeLabel,
   buttonTitle,
   onPressRightAction = () => {},
+  onPressTrailingAction = () => {},
   buttonSize = 'small',
   textOnly = false,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [badgeWidth, setBadgeWidth] = useState(0);
@@ -90,18 +92,23 @@ const Title: FC<TitleProps> = ({
           )}
           {renderActionLeft()}
         </View>
-        <Text
-          color={theme.colors.text.secondary}
-          typography={'description_default_regular'}>
-          {description}
-        </Text>
+        {description && (
+          <Text
+            style={styles.description}
+            color={theme.colors.text.secondary}
+            typography={'description_default_regular'}>
+            {description}
+          </Text>
+        )}
       </View>
     );
   };
 
   const renderActionLeft = () => {
     return (
-      <View style={styles.iconLeftView}>
+      <TouchableOpacity
+        onPress={onPressTrailingAction}
+        style={styles.iconLeftView}>
         {showTrailingAction && !showRightAction && (
           <View
             style={[
@@ -119,7 +126,7 @@ const Title: FC<TitleProps> = ({
             />
           </View>
         )}
-      </View>
+      </TouchableOpacity>
     );
   };
 
@@ -129,7 +136,8 @@ const Title: FC<TitleProps> = ({
     return (
       <View>
         {!buttonTitle ? (
-          <View
+          <TouchableOpacity
+            onPress={onPressRightAction}
             style={[
               styles.iconRight,
               {
@@ -141,7 +149,7 @@ const Title: FC<TitleProps> = ({
               size={scaleSize(22)}
               color={theme.colors.primary}
             />
-          </View>
+          </TouchableOpacity>
         ) : (
           <TouchableOpacity onPress={onPressRightAction}>
             <Text color={theme.colors.primary} typography={buttonTypo}>
@@ -166,7 +174,7 @@ const Title: FC<TitleProps> = ({
   }
 
   return (
-    <View style={[styles.wrapper, isSection && styles.margin]}>
+    <View style={[style, styles.wrapper, isSection && styles.margin]}>
       {renderIcon()}
       {renderContent()}
       {renderActionRight()}

package/Title/styles.ts

@@ -68,9 +68,12 @@ export default StyleSheet.create({
   contentView: {marginRight: Spacing.S, flex: 1},
   title: {
     fontWeight: 'bold',
-    marginBottom: Spacing.XS,
+    color: Colors.black_17,
   },
   badge: {
     marginLeft: Spacing.XS,
   },
+  description: {
+    marginTop: Spacing.XS,
+  },
 });

package/Title/types.ts

@@ -1,3 +1,5 @@
+import {ViewStyle} from 'react-native';
+
 export type TitleProps = {
   type?: 'card' | 'section';
   size?: 'small' | 'medium' | 'large';
@@ -12,5 +14,7 @@ export type TitleProps = {
   buttonTitle?: string;
   buttonSize?: 'small' | 'large';
   onPressRightAction?: () => void;
+  onPressTrailingAction?: () => void;
   textOnly?: boolean;
+  style?: ViewStyle;
 };

package/code-scanner.js

@@ -1,51 +1,143 @@
 const scanner = require('react-scanner');
+const fs = require('fs');
 const path = require('path');
 
-const scan = async config => {
-  return await scanner.run(config);
+const scan = async (config) => {
+    return await scanner.run(config);
 };
 
-const calcSum = array => {
-  return array.reduce((a, b) => a + b, 0);
+const calcSum = (array) => {
+    return array.reduce((a, b) => a + b, 0);
 };
 
-const calculateAdoptionRate = (kitJsonPath, miniappJsonPath) => {
-  const kitJson = require(kitJsonPath);
-  const miniAppJson = require(miniappJsonPath);
-  const numOfKitComponents = calcSum(Object.values(kitJson));
-  const numOfMiniAppComponents = calcSum(Object.values(miniAppJson));
-  const adoptionRate = (numOfKitComponents / numOfMiniAppComponents) * 100;
-  console.log("Number of kit's components: ", numOfKitComponents);
-  console.log("Number of miniapp's components: ", numOfMiniAppComponents);
-  console.log('Adoption rate: ', adoptionRate);
+const calculateAdoptionRate = async (branchName , kitJsonPath , miniappJsonPath , reactNativeJsonPath , fsJsonPath ) => {
+    const kitJson = require(kitJsonPath);
+    const miniAppJson = require(miniappJsonPath);
+    const reactNativeJson = require(reactNativeJsonPath);
+    const fsJson = require(fsJsonPath);
+
+    const numOfKitComponents = calcSum(Object.values(kitJson));
+    const numOfMiniAppComponents = calcSum(Object.values(miniAppJson));
+    const numOfReactNativeComponents = calcSum(Object.values(reactNativeJson));
+    const numOfFSComponents = calcSum(Object.values(fsJson));
+
+    const adoptionRate = ((numOfKitComponents + numOfReactNativeComponents + numOfFSComponents) / numOfMiniAppComponents) * 100;
+
+    return {
+        miniAppName: branchName,
+        numOfKitComponents: numOfKitComponents,
+        numOfMiniAppComponents: numOfMiniAppComponents,
+        numOfReactNativeComponents: numOfReactNativeComponents,
+        numOfFSComponents: numOfFSComponents,
+        adoptionRate: adoptionRate.toFixed(2) + '%'
+    }
 };
 
+function ensureFileExists(filePath , defaultContent = {}) {
+    if (!fs.existsSync(filePath)) {
+        fs.mkdirSync(path.dirname(filePath), { recursive: true });
+        fs.writeFileSync(filePath, JSON.stringify(defaultContent, null, 2));
+    }
+}
+
+const sendMessage = ({
+                         numOfKitComponents,
+                         numOfMiniAppComponents,
+                         numOfFSComponents,
+                         numOfReactNativeComponents,
+                         adoptionRate,
+                         miniAppName = ''
+                     }) => {
+    const url = 'https://chat.googleapis.com/v1/spaces/AAAAL9P6G8M/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=fnwfYuH_u0KicBnKTSSm9S0qV6azJH5v6URm8HR7V2g';
+
+    const data = {
+        text: `MiniApp: ${miniAppName}\nNumber of kit's components: ${numOfKitComponents}\nNumber of miniapp's components: ${numOfMiniAppComponents}\nNumber of FS's components: ${numOfFSComponents}\nNumber of React Native's components: ${numOfReactNativeComponents}\nAdoption rate: ${adoptionRate}`
+    };
+
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    })
+        .then(response => response.json())
+        .then(data => {
+            console.log('Success:', data);
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+        });
+}
+
 const main = async () => {
-  const [scanPath, kitJsonRelativePath, miniappJsonRelativePath] =
-    process.argv.slice(2);
-
-  const kitJsonPath = path.resolve(process.cwd(), kitJsonRelativePath);
-  const miniappJsonPath = path.resolve(process.cwd(), miniappJsonRelativePath);
-
-  const config1 = {
-    crawlFrom: scanPath,
-    includeSubComponents: true,
-    importedFrom: /@momo-kits\/.+/,
-    processors: [['count-components', {outputTo: kitJsonPath}]],
-    rootDir: './',
-  };
-
-  const config2 = {
-    crawlFrom: scanPath,
-    includeSubComponents: true,
-    processors: [['count-components', {outputTo: miniappJsonPath}]],
-    rootDir: './',
-  };
-
-  await scan(config1);
-  await scan(config2);
-
-  calculateAdoptionRate(kitJsonPath, miniappJsonPath);
+    const rootPath = `${__dirname}/../../../`
+    const app = path.join(`${__dirname}/../../../`, 'app.json');
+    const appJson = require(app)
+    const branchName = appJson.appId
+
+    if (!branchName || !branchName.includes("vn.momo")){
+        return
+    }
+
+    const scanPath = path.join(rootPath, 'src')
+    const kitJsonPath = path.join(rootPath, './scan/kit.json')
+    const miniappJsonPath = path.join(rootPath, './scan/miniapp.json')
+    const reactNativeJsonPath = path.join(rootPath, './scan/RN.json')
+    const fsJsonPath = path.join(rootPath, './scan/verLib.json')
+
+    const allKitsReg = /@momo-kits/;
+    const fsReg = /^(?:@fs-mobile-platform\/(components|investment|screens)|@miniapp-platform\/(components|foundation))$/;
+    const RNReg = 'react-native'
+
+    const config1 = {
+        crawlFrom: scanPath,
+        includeSubComponents: true,
+        importedFrom: allKitsReg,
+        processors: [['count-components', { outputTo: kitJsonPath }]],
+        rootDir: process.cwd(),
+    };
+
+    const config2 = {
+        crawlFrom: scanPath,
+        includeSubComponents: true,
+        processors: [['count-components', { outputTo: miniappJsonPath }]],
+        rootDir: process.cwd(),
+    };
+
+    const config3 = {
+        crawlFrom: scanPath,
+        includeSubComponents: true,
+        importedFrom: RNReg,
+        processors: [['count-components', { outputTo: reactNativeJsonPath }]],
+        rootDir: process.cwd(),
+    };
+
+    const config4 = {
+        crawlFrom: scanPath,
+        includeSubComponents: true,
+        importedFrom: fsReg,
+        processors: [['count-components', { outputTo: fsJsonPath }]],
+        rootDir: process.cwd(),
+    };
+
+    try {
+        ensureFileExists(kitJsonPath, {});
+        ensureFileExists(miniappJsonPath, {});
+        ensureFileExists(reactNativeJsonPath, {});
+        ensureFileExists(fsJsonPath, {});
+
+        await scan(config1);
+        await scan(config2);
+        await scan(config3);
+        await scan(config4);
+
+        const result = await calculateAdoptionRate(branchName,kitJsonPath, miniappJsonPath, reactNativeJsonPath, fsJsonPath);
+        sendMessage(result)
+        console.log(result)
+    } catch (error) {
+        console.error("Error during scan or calculation:", error);
+    }
 };
 
-main().catch(console.error);
+main();

package/migrate_typo.js

@@ -0,0 +1,56 @@
+const {readFileSync, writeFileSync, readdirSync, statSync} = require('fs');
+const path = require('path');
+let rootPath = process.argv[2];
+
+const migrateText = [
+  {typo1: 'headline_s', typo2: 'headline_default_bold'},
+  {typo1: 'header_s', typo2: 'header_s_semibold'},
+  {typo1: 'header_xs', typo2: 'header_xs_semibold'},
+  {typo1: 'description_default', typo2: 'body_default_regular'},
+  {typo1: 'description_s', typo2: 'description_default_regular'},
+  {typo1: 'description_xs', typo2: 'description_xs_regular'},
+  {typo1: 'label_default', typo2: 'label_default_medium'},
+  {typo1: 'label_s', typo2: 'label_s_medium'},
+  {typo1: 'label_xs', typo2: 'label_xs_medium'},
+  {typo1: 'action_default', typo2: 'action_default_bold'},
+  {typo1: 'action_xs', typo2: 'action_xs_bold'},
+  {typo1: 'action_xxs', typo2: 'action_xxs_bold'},
+];
+
+function replaceTextInFile(oldText, newText, filePath) {
+  try {
+    let content = readFileSync(filePath, {encoding: 'utf-8'});
+    const regex = new RegExp(`\\b${oldText}\\b`, 'g');
+    content = content.replace(regex, newText);
+    writeFileSync(filePath, content, 'utf8');
+    console.log(`Replaced text in: ${filePath}`);
+  } catch (error) {
+    console.error(`Error processing file ${filePath}:`, error);
+  }
+}
+
+function scanDirectory(directory, oldText, newText) {
+  const files = readdirSync(directory);
+
+  files.forEach(file => {
+    const filePath = path.join(directory, file);
+    const stat = statSync(filePath);
+
+    if (stat.isDirectory()) {
+      scanDirectory(filePath, oldText, newText);
+    } else if (
+      stat.isFile() &&
+      (filePath.endsWith('.tsx') || filePath.endsWith('.ts'))
+    ) {
+      replaceTextInFile(oldText, newText, filePath);
+    }
+  });
+}
+
+function main() {
+  migrateText.forEach(({typo1, typo2}) => {
+    scanDirectory(rootPath, typo1, typo2);
+  });
+}
+
+main();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.2-tracking.8",
+    "version": "0.92.3-beta.10",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,18 +10,18 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "git+https://gitlab.com/momo-platform/bottom-sheet.git#main",
+        "@gorhom/bottom-sheet": "2.4.1",
         "react-native-safe-area-context": "3.1.4",
         "react-native-linear-gradient": "2.8.3",
         "react-native-gesture-handler": "1.10.3",
         "react-native-modalize": "2.1.1",
         "react-native-fast-image": "8.1.5",
-        "@react-navigation/bottom-tabs": "git+https://gitlab.com/momo-platform/react-navigation-bottom-tabs.git#main",
+        "@react-navigation/bottom-tabs": "git+https://gitlab.mservice.com.vn/momo-platform/react-navigation-bottom-tabs.git",
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
         "lottie-react-native": "3.3.2",
-        "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main"
+        "@react-navigation/stack": "git+https://gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
     },
     "peerDependencies": {
         "react-native": "*"