@momo-kits/foundation 0.81.1-optimize.19 → 0.81.1-optimize.21

package/Application/BottomSheet.tsx

@@ -34,7 +34,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     new Animated.ValueXY({
       y: heightDevice,
       x: 0,
-    }),
+    })
   ).current;
   const panResponder = useRef(
     PanResponder.create({
@@ -46,7 +46,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         gestureState.dy > 0 &&
           Animated.event([null, {dy: pan.y}], {useNativeDriver: false})(
             e,
-            gestureState,
+            gestureState
           );
       },
       onPanResponderRelease: (_, gestureState) => {
@@ -59,7 +59,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           }).start();
         }
       },
-    }),
+    })
   ).current;
 
   let backgroundColor = theme.colors.background.default;
@@ -209,10 +209,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: Spacing.M,
   },
-  estimate: {
-    position: 'absolute',
-    top: -9999,
-    left: -9999,
-    opacity: 0,
-  },
 });

package/Application/BottomTab/BottomTabBar.tsx

@@ -133,7 +133,7 @@ export default function BottomTabBar({
    */
   const renderFloatingButton = useCallback(() => {
     const renderFloatingButton = () => {
-      if (typeof floatingButton?.icon == 'string') {
+      if (typeof floatingButton?.icon === 'string') {
         return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
       }
       return floatingButton?.icon;

package/Application/BottomTab/index.tsx

@@ -94,7 +94,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
       }}>
       {tabs.map(item => {
         const isNum = !isNaN(parseInt(`${item?.badgeLabel}`));
-        const isDot = typeof item?.badgeLabel == 'string' && !item?.badgeLabel;
+        const isDot = typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
         return (
           <Tab.Screen
             key={item.name}

package/Application/Components.tsx

@@ -41,7 +41,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
-  if (tintColor != Colors.black_01) {
+  if (tintColor !== Colors.black_01) {
     buttonStyle = {
       backgroundColor: 'transparent',
       borderColor: '#00000066',
@@ -238,7 +238,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   tintColor,
   dotColor,
 }) => {
-  const avatarStyle = imageShape == 'circle' ? styles.circle : styles.square;
+  const avatarStyle = imageShape === 'circle' ? styles.circle : styles.square;
   const header = (
     <View style={Styles.row}>
       <View>
@@ -265,7 +265,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
 
 const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const validateType = (child: React.ReactElement) => {
-    const valid = child?.type === NavigationButton || child?.type == Fragment;
+    const valid = child?.type === NavigationButton || child?.type === Fragment;
     if (__DEV__ && !valid) {
       console.warn(
         'HeaderRightAction contains element type of NavigationButton, Please check again.',
@@ -306,7 +306,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   const {onAction} = toolConfig ?? {};
 
   let backgroundColor;
-  if (tintColor != Colors.black_01) {
+  if (tintColor !== Colors.black_01) {
     backgroundColor = 'transparent';
   }
 

package/Application/StackScreen.tsx

@@ -1,11 +1,92 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
+import {useHeaderHeight} from '@react-navigation/stack';
+import {InteractionManager, Linking, View} from 'react-native';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
-import {useHeaderHeight} from '@react-navigation/stack';
-import {Alert, InteractionManager} from 'react-native';
+import {Text} from '../Text';
+import {Colors, Radius, Spacing} from '../Consts';
+
+/**
+ * Empty screen for unvalidated screen name
+ * @constructor
+ */
+const EmptyScreen: React.FC = () => {
+  return (
+    <View
+      style={{
+        backgroundColor: Colors.black_01,
+        padding: Spacing.M,
+        borderRadius: Radius.M,
+      }}>
+      <Text typography={'header_m_bold'}>Unvalidated screen name</Text>
+      <Text
+        typography={'description_default_regular'}
+        style={{paddingVertical: Spacing.S}}>
+        Your screen has not been rendered because Platform has not detected the
+        screen name. Please migrate to support this feature.
+      </Text>
+      <Text typography={'header_default'} style={{width: '100%'}}>
+        Possible fixes:
+      </Text>
+      <View style={{marginLeft: Spacing.S}}>
+        <Text typography={'body_default_regular'}>1. Off webpack config</Text>
+        <Text typography={'body_default_regular'}>
+          2. Screen name refactoring
+        </Text>
+        <View style={{marginLeft: Spacing.S}}>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với các screen push/import dạng arrow function ={'>'} đổi thành
+            named function
+          </Text>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với các screen import dạng High Order Component ={'>'} rename
+            generic function thành named function
+          </Text>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với Tab Navigator, Platform sẽ lấy Tab Container làm screen name.
+            Trong trường hợp miniapp muốn track riêng action cho từng tab, tham
+            khảo theo docs
+          </Text>
+        </View>
+      </View>
+      <Text typography={'header_s_semibold'}>More information: </Text>
+      <Text
+        typography={'body_default_regular'}
+        color={Colors.blue_01}
+        onPress={() => {
+          Linking.openURL(
+            'https://gitlab.mservice.com.vn/momo-platform/mini-app/-/tree/vn.momo.uikits/dev/app'
+          );
+        }}>
+        Mini App: vn.momo.uikits/dev
+      </Text>
+      <Text
+        typography={'body_default_regular'}
+        color={Colors.blue_01}
+        onPress={() => {
+          Linking.openURL(
+            'https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing'
+          );
+        }}>
+        https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing
+      </Text>
+    </View>
+  );
+};
 
+/**
+ * container for stack screen
+ * @param props
+ * @constructor
+ */
 const StackScreen: React.FC<ScreenParams> = props => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const startTime = useRef(Date.now());
@@ -50,8 +131,10 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
-      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
+    if (['Invalid', 'screen'].includes(screenName) && context.enableAutoId) {
+      setTimeout(() => {
+        navigator?.showModal({screen: EmptyScreen});
+      }, 300);
     }
 
     navigator?.maxApi?.of?.({screenName});

package/Application/utils.tsx

@@ -94,7 +94,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (typeof params.surface == 'boolean') {
+  if (typeof params.surface === 'boolean') {
     if (params.surface) {
       options = {
         ...options,

package/Assets/icon_bank.json

@@ -503,4 +503,4 @@
   "zalopay_icon": {
     "uri": "https://static.momocdn.net/app/img/kits/icon_bank/zalopay_icon.png"
   }
-}
+}

package/Button/index.tsx

@@ -94,7 +94,7 @@ const Button: FC<ButtonProps> = ({
   if (loading) {
     state = 'loading';
   }
-  if (gradient?.length > 0 && type == 'primary') {
+  if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
       colors: gradient,
       start: {x: 1, y: 0.5},
@@ -217,9 +217,9 @@ const Button: FC<ButtonProps> = ({
    */
   const renderTitle = () => {
     const typography = getTypography();
-    const color = getTextColor();
+    const textColor = getTextColor();
     return (
-      <Text typography={typography} color={color} numberOfLines={1}>
+      <Text typography={typography} color={textColor} numberOfLines={1}>
         {title}
       </Text>
     );
@@ -231,7 +231,7 @@ const Button: FC<ButtonProps> = ({
   const renderLeading = () => {
     const iconSize = getIconSize();
     const marginRight = getIconSpace();
-    const color = tintColor ?? getTextColor();
+    const textColor = tintColor ?? getTextColor();
 
     if (loading) {
       return (
@@ -256,7 +256,7 @@ const Button: FC<ButtonProps> = ({
             styles.leading,
             {width: iconSize, height: iconSize, marginRight},
           ]}>
-          <Icon color={color} source={iconLeft} size={iconSize} />
+          <Icon color={textColor} source={iconLeft} size={iconSize} />
         </View>
       );
     }
@@ -266,7 +266,7 @@ const Button: FC<ButtonProps> = ({
    * render trailing
    */
   const renderTrailing = () => {
-    const color = tintColor ?? getTextColor();
+    const textColor = tintColor ?? getTextColor();
     const marginLeft = getIconSpace();
 
     if (iconRight) {
@@ -277,7 +277,7 @@ const Button: FC<ButtonProps> = ({
             styles.trailing,
             {width: iconSize, height: iconSize, marginLeft},
           ]}>
-          <Icon color={color} source={iconRight} size={iconSize} />
+          <Icon color={textColor} source={iconRight} size={iconSize} />
         </View>
       );
     }

package/Icon/index.tsx

@@ -33,7 +33,7 @@ const Icon: React.FC<IconProps> = ({
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
-      resizeMode='contain'
+      resizeMode="contain"
       {...tintColorProps}
     />
   );

package/Icon/types.ts

@@ -1,5 +1,5 @@
 import {ImageStyle} from 'react-native-fast-image';
-import {StyleProp} from "react-native";
+import {StyleProp} from 'react-native';
 
 export type IconProps = {
   /**

package/Image/index.tsx

@@ -19,7 +19,6 @@ const Image: React.FC<ImageProps> = ({
   source,
   loading = true,
   children,
-  params,
   accessibilityLabel,
   ...rest
 }) => {

package/Input/InputDropDown.tsx

@@ -4,7 +4,7 @@ import {ApplicationContext, ComponentContext} from '../Application';
 import {Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {ErrorView, FloatingView, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
 import styles from './styles';
 
@@ -61,7 +61,7 @@ const InputDropDown = ({
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
           getSizeStyle(size),
-          getBorderColor(theme, false, errorMessage, disabled),
+          // getBorderColor(theme, false, errorMessage, disabled),
         ]}>
         <FloatingView
           floatingValue={floatingValue}

package/Input/InputMoney.tsx

@@ -1,6 +1,7 @@
 import React, {
   forwardRef,
   useContext,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -40,6 +41,7 @@ const InputMoney = forwardRef(
       defaultValue = '',
       accessibilityLabel,
       hintText,
+      value: _value,
       ...props
     }: InputMoneyProps,
     ref,
@@ -48,6 +50,13 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
 
+    useEffect(() => {
+      if (_value) {
+        setValue(validateText(_value));
+        onChangeText?.(formatMoneyToNumber(_value, 'đ').toString());
+      }
+    }, [_value]);
+
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
       return formatNumberToMoney(valueFormat, 'đ');

package/Input/InputOTP.tsx

@@ -71,11 +71,8 @@ const InputOTP = forwardRef(
       errorMessage,
       errorSpacing,
       floatingValue = 'Label',
-      floatingIconColor,
-      floatingIcon,
       placeholder,
       onChangeText,
-      onFocus,
       onBlur,
       dataType = 'number',
       params,
@@ -125,16 +122,16 @@ const InputOTP = forwardRef(
       onChangeText?.(text);
     };
 
-    const renderInputs = (length: number) => {
+    const renderInputs = (inputLength: number) => {
       const TextInputs: React.ReactNode[] = [];
-      for (let i = 0; i < length; i++) {
+      for (let i = 0; i < inputLength; i++) {
         TextInputs.push(
           <View>
             {focused && value.length === i ? (
-              <OTPCaret index={i} length={length} />
+              <OTPCaret index={i} length={inputLength} />
             ) : (
               <Text
-                style={i !== length - 1 && {marginRight: Spacing.L}}
+                style={i !== inputLength - 1 && {marginRight: Spacing.L}}
                 color={
                   !!value[i]
                     ? theme.colors.text.default

package/Input/InputTextArea.tsx

@@ -44,7 +44,6 @@ const InputTextArea = forwardRef(
       required,
       errorSpacing,
       style,
-      accessibilityLabel,
       hintText,
       ...props
     }: InputTextAreaProps,

package/Input/index.tsx

@@ -6,13 +6,6 @@ import InputOTP from './InputOTP';
 import InputSearch from './InputSearch';
 import InputTextArea from './InputTextArea';
 
-export interface InputRef {
-  focus: () => void;
-  blur: () => void;
-  clear: () => void;
-  setText: (text: string) => void;
-}
-
 export interface InputProps extends TextInputProps {
   /**
    *  Optional. Defines the size of the Input component.
@@ -105,14 +98,8 @@ export interface InputProps extends TextInputProps {
   hintText?: string;
 }
 
-type InputPropsWithoutSizeAndIcon = Omit<
-  InputProps,
-  'size' | 'icon' | 'iconColor'
->;
-
-type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
-
-export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
+export interface InputTextAreaProps
+  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
   /**
    * Optional. Defines the height of the InputTextArea component.
    * It can be used to set a specific height for the text area.
@@ -132,6 +119,9 @@ export interface InputSearchProps extends TextInputProps {
    */
   showButtonText?: boolean;
 
+  /**
+   * Optional. Represents the value for the floating title in the InputSearch component.
+   */
   onPressButtonText?: () => void;
 
   /**
@@ -145,18 +135,22 @@ export interface InputSearchProps extends TextInputProps {
   icon?: string;
 
   /**
-   *
+   * Optional. If `true`, the user won't be able to interact with the Input component.
    */
   hasColorBG?: boolean;
 
+  /**
+   * Optional. Represents the style of the InputSearch component.
+   */
   params?: any;
 }
 
-export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
+export interface InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
 
 export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
 
-export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+export interface InputOTPProps
+  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
   /**
    * Optional. Defines the length of the OTP (One Time Password) input.
    * Can be 2, 4, 6, 8, or 10.

package/Input/styles.ts

@@ -8,6 +8,7 @@ export default StyleSheet.create({
     flex: 1,
     paddingLeft: Spacing.M,
     fontSize: scaleSize(14),
+    height: '100%',
   },
   wrapper: {
     width: '100%',

package/Input/utils.ts

@@ -61,7 +61,7 @@ const formatMoneyToNumber = (money: string, currencyUnit: string) => {
 };
 const checkTyping = (text: string, value: boolean, setValue: any) => {
   let typing = text?.length > 0;
-  if (typing != value) {
+  if (typing !== value) {
     setValue(typing);
   }
 };

package/Layout/Card.tsx

@@ -86,7 +86,7 @@ const Card: React.FC<CardProps> = ({
         {rows.map((i: React.ReactElement, index: number) => {
           return (
             <View key={`Item${cursor}${index}`} style={{flexDirection: 'row'}}>
-              {index != 0 && (
+              {index !== 0 && (
                 <View style={{width: gridContext.gutterSize}}></View>
               )}
               {i}
@@ -126,14 +126,14 @@ const Card: React.FC<CardProps> = ({
           rows = [item];
         }
 
-        if (i == arrayChild.length - 1) {
+        if (i === arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
       }
     } else {
       element.push(children);
-      if (children?.type == Fragment) {
+      if (children?.type === Fragment) {
         return renderView(children?.props.children);
       }
     }

package/Layout/FloatingButton.tsx

@@ -34,7 +34,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
 }: FloatingButtonProps) => {
   const {theme} = useContext(ApplicationContext);
   const maxWidth = useRef(0);
-  const minWidth = size == 'small' ? 36 : 48;
+  const minWidth = size === 'small' ? 36 : 48;
   const [opacityAnimated] = useState(new Animated.Value(0)); // Initial opacity set to 0
   const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
   const lastOffset = useRef(0);
@@ -84,7 +84,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     });
 
     return () => {
-      if (listener != null) {
+      if (listener !== null) {
         animatedValue?.removeListener(listener);
       }
     };
@@ -123,7 +123,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
           right: position === 'right' ? 12 : undefined,
           alignSelf: position === 'center' ? 'center' : 'flex-end',
           width: widthAnimated,
-          height: size == 'small' ? 36 : 48,
+          height: size === 'small' ? 36 : 48,
           backgroundColor: theme.colors.primary,
           bottom,
         },

package/Layout/GridSystem.tsx

@@ -53,7 +53,7 @@ const GridSystem: React.FC<any> = ({
         {list.map((_, index) => {
           return (
             <View style={{flexDirection: 'row'}} key={index.toString()}>
-              {index != -0 && <View style={{width: grid.gutterSize}} />}
+              {index !== -0 && <View style={{width: grid.gutterSize}} />}
               <View
                 key={`Grid${index.toString()}`}
                 pointerEvents="none"

package/Layout/Section.tsx

@@ -85,7 +85,7 @@ const Section: React.FC<SectionProps> = ({
         {rows.map((i: React.ReactElement, index: number) => {
           return (
             <View key={`Card${cursor}${index}`} style={{flexDirection: 'row'}}>
-              {index != 0 && (
+              {index !== 0 && (
                 <View style={{width: gridContext.gutterSize}}></View>
               )}
               {i}
@@ -125,14 +125,14 @@ const Section: React.FC<SectionProps> = ({
           rows = [item];
         }
 
-        if (i == arrayChild.length - 1) {
+        if (i === arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
       }
     } else {
       element.push(children);
-      if (children?.type == Fragment) {
+      if (children?.type === Fragment) {
         return renderView(children?.props.children);
       }
     }

package/Layout/utils.ts

@@ -12,7 +12,7 @@ const validateChildren = (
 ) => {
   const validateType = (child: React.ReactElement) => {
     const valid = childrenTypes.some(
-      childrenType => child?.type === childrenType || child?.type == Fragment,
+      childrenType => child?.type === childrenType || child?.type === Fragment,
     );
     if (!valid) {
       console.warn(
@@ -42,7 +42,7 @@ const useGridSystem = () => {
   useEffect(() => {
     const subscription: any = Dimensions.addEventListener('change', () => {
       const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
-      if (newColumns != numberOfColumns) {
+      if (newColumns !== numberOfColumns) {
         setNumberOfColumns(newColumns);
       }
     });

package/Popup/PopupNotify.tsx

@@ -139,7 +139,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       );
     };
 
-    if (buttonDirection == 'auto') {
+    if (buttonDirection === 'auto') {
       if (
         secondary?.title &&
         (secondary.title.length > 12 || primary.title.length > 12)
@@ -148,7 +148,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       }
       return renderRow();
     }
-    if (buttonDirection == 'row') {
+    if (buttonDirection === 'row') {
       return renderRow();
     }
     return renderColumn();
@@ -204,7 +204,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               typography={'body_default_regular'}
               onTextLayout={({nativeEvent: {lines}}) => {
                 const enableScroll = lines.length > 3;
-                if (enableScroll != scrollContent) {
+                if (enableScroll !== scrollContent) {
                   setScrollContent(enableScroll);
                 }
               }}>

package/Title/index.tsx

@@ -143,8 +143,14 @@ const Title: FC<TitleProps> = ({
   const renderActionRight = () => {
     if (!showRightAction || showTrailingAction) return false;
 
+    const lineHeight = styleSheet[typography].lineHeight;
+
     return (
-      <View>
+      <View
+        style={{
+          height: lineHeight,
+          justifyContent: 'center',
+        }}>
         {!buttonTitle ? (
           <TouchableOpacity
             onPress={onPressRightAction}
@@ -174,7 +180,6 @@ const Title: FC<TitleProps> = ({
   if (textOnly) {
     return (
       <View style={isSection && styles.margin}>
-        zZ
         <RNText
           numberOfLines={numberOfLines}
           style={[styleSheet[typography], styles.title]}>

package/code-scanner.js

@@ -2,142 +2,159 @@ 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 = 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) + '%'
-    }
+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));
-    }
+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)
+  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);
     })
-        .then(response => response.json())
-        .then(data => {
-            console.log('Success:', data);
-        })
-        .catch((error) => {
-            console.error('Error:', error);
-        });
-}
+    .catch(error => {
+      console.error('Error:', error);
+    });
+};
 
 const main = async () => {
-    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);
-    }
+  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();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.1-optimize.19",
+    "version": "0.81.1-optimize.21",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -18,7 +18,7 @@
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
-        "lottie-react-native": "3.3.2",
+        "lottie-react-native": "git+https://gitlab.mservice.com.vn/momo-platform/momo-lottie-react-native.git",
         "@react-navigation/stack": "https://oauth2:eX-jVhzQdLc343AjD3Sc@gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
     },
     "peerDependencies": {

package/publish.sh

@@ -1,23 +1,28 @@
 #!/bin/bash
+
+# Prepare dist files
 rm -rf dist
 mkdir dist
-
-cp . ./dist
-
-
-# GET VERSION from mck_package.json
-VERSIONSTRING=( v$(jq .version package.json) )
-VERSION=(${VERSIONSTRING//[\"]/})
-echo VERSION: $VERSION
-
-rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
-
+rsync -r --exclude=/dist ./* dist
 cd dist
-npm publish --tag latest --access=public
 
-#clear dist and package json
+#if [ "$1" == "stable" ]; then
+#  npm version $(npm view @momo-kits/foundation@stable version)
+#  npm version patch
+#  npm publish --tag stable --access=public
+#elif [ "$1" == "latest" ]; then
+#  npm version $(npm view @momo-kits/foundation@latest version)
+#  npm version prerelease --preid=rc
+#  npm publish --tag latest --access=public
+#else
+#  npm version $(npm view @momo-kits/foundation@beta version)
+#  npm version prerelease --preid=beta
+  npm publish --tag beta --access=public
+#fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
 cd ..
 rm -rf dist
-
-
-#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/core new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/foundation"}'

package/tsconfig.json

@@ -19,6 +19,6 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "esnext",
+    "target": "esnext"
   }
 }