@momo-kits/foundation 0.89.5-beta.18 → 0.89.6

package/Application/Components.tsx

@@ -120,13 +120,19 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     const goBack = () => {
       const canGoBack = navigator?.ref.current?.canGoBack();
       if (!canGoBack) {
-        const currentRoute = navigator?.ref?.current.getCurrentRoute();
-        navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
+        const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+        const params = {
           ...context,
           screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
           trigger_id: '111154000000000000',
           icon_name: 'back',
+        };
+        navigator?.maxApi?.showToastDebug?.({
+          appId: context.appId,
+          message: 'service_icon_clicked',
+          params,
         });
+        navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       }
       if (canGoBack) {
         navigator?.ref.current?.goBack();
@@ -284,7 +290,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   pinnedTool,
   runtimeTools = [],
-  preventBack,
+  preventClose,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
   const miniContext = useContext(MiniAppContext);
@@ -331,15 +337,15 @@ const HeaderToolkitAction: React.FC<any> = ({
   };
 
   const onClose = () => {
-    if (preventBack) {
+    if (preventClose) {
       navigator?.showModal({
         screen: () => (
           <PopupNotify
-            {...preventBack}
+            {...preventClose}
             primary={{
-              title: preventBack.primary.title,
+              title: preventClose.primary.title,
               onPress: () => {
-                preventBack?.primary.onPress();
+                preventClose?.primary.onPress();
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
@@ -415,7 +421,7 @@ const HeaderToolkitAction: React.FC<any> = ({
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
-  onPress,
+  children,
 }) => {
   const scale = animatedValue.interpolate({
     inputRange: [-300, 0, 300],
@@ -434,21 +440,21 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   });
 
   return (
-    <TouchableOpacity onPress={onPress}>
-      <Animated.View
-        style={{
-          height: 210,
-          opacity: opacity,
-          transform: [{scale}, {translateY}],
-        }}>
+    <Animated.View
+      style={{
+        height: 210,
+        opacity: opacity,
+        transform: [{scale}, {translateY}],
+      }}>
+      {children ?? (
         <Image
           source={{
             uri: image,
           }}
           style={{width: '100%', height: '100%'}}
         />
-      </Animated.View>
-    </TouchableOpacity>
+      )}
+    </Animated.View>
   );
 };
 

package/Application/ModalScreen.tsx

@@ -1,29 +1,21 @@
-import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
-  Dimensions,
-  Keyboard,
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
+  TouchableOpacity,
   View,
 } from 'react-native';
+import {Modalize} from 'react-native-modalize';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {
-  BottomSheetBackdrop,
-  BottomSheetModal,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
+
+import {ApplicationContext} from '.';
+import {Radius, Spacing, Styles} from '../Consts';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
 import Navigation from './Navigation';
 import {BottomSheetParams, ModalParams} from './types';
-import {Radius, Spacing, Styles} from '../Consts';
-import {
-  ApplicationContext,
-  HeaderRightAction,
-  NavigationButton,
-  NavigationContainer,
-} from './index';
-import {HeaderBackground, HeaderLeft, HeaderTitle} from './Components';
 
 const ModalScreen: React.FC<any> = props => {
   /**
@@ -92,141 +84,88 @@ const Modal: React.FC<ModalParams> = props => {
 };
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
-  const insets = useSafeAreaInsets();
   const {theme, navigator} = useContext(ApplicationContext);
-  const [keyboardSnap, setKeyboardSnap] = useState(0);
-  const {screen, options, snapPoint, indicatorColor}: BottomSheetParams =
-    props.route.params;
-  const Component = useRef(screen).current;
+  const {
+    screen: Screen,
+    options,
+    footerComponent,
+    flatListProps,
+  }: BottomSheetParams = props.route.params;
+
   const navigation = new Navigation(props.navigation, theme);
+
   const params = {
     ...props.route.params,
     navigation,
   };
 
   delete params.screen;
-
-  const snapPoints = useMemo(() => {
-    if (snapPoint) {
-      const current = parseInt(snapPoint) + keyboardSnap * 100;
-      return [`${current}%`];
-    }
-    return ['50%', '70%', '90%'];
-  }, [keyboardSnap]);
-
-  const bottomSheetRef = useRef<any>(null);
-  const mountedRef = useRef(true);
-
-  let backgroundColor = theme.colors.background.default;
-  let bottomInset = keyboardSnap * Dimensions.get('window').height;
-  if (bottomInset > 16) {
-    bottomInset -= 16;
-  }
-  if (options?.surface) {
-    backgroundColor = theme.colors.background.surface;
-  }
+  const modalizeRef = useRef<Modalize>(null);
 
   useEffect(() => {
-    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', e => {
-      setKeyboardSnap(
-        e.endCoordinates.height / Dimensions.get('window').height,
-      );
-      bottomSheetRef.current?.expand();
-    });
-
-    const keyboardDidHide = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardSnap(0);
-    });
-
-    bottomSheetRef.current?.present();
-    return () => {
-      mountedRef.current = false;
-      keyboardDidShow.remove();
-      keyboardDidHide.remove();
-    };
+    modalizeRef.current?.open();
   }, []);
 
-  const backdropComponent = (backdropProps: any) => (
-    <BottomSheetBackdrop
-      disappearsOnIndex={-1}
-      appearsOnIndex={0}
-      {...backdropProps}
-    />
-  );
+  const handleClose = () => {
+    modalizeRef?.current?.close();
+  };
 
   return (
     <SafeAreaView style={Styles.flex}>
-      <BottomSheetModal
-        ref={bottomSheetRef}
-        snapPoints={snapPoints}
-        onDismiss={() => {
-          if (mountedRef.current) {
-            navigator?.pop();
-          }
+      <Modalize
+        keyboardAvoidingOffset={-20}
+        adjustToContentHeight
+        closeOnOverlayTap
+        closeSnapPointStraightEnabled
+        onClosed={() => {
+          navigator?.pop();
         }}
-        bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
-        handleComponent={null}
-        backdropComponent={backdropComponent}>
-        <BottomSheetView>
-          <View style={[styles.sheetContainer, {backgroundColor}]}>
-            <View style={styles.indicatorContainer}>
-              <View
-                style={[
-                  styles.indicator,
-                  {backgroundColor: theme.colors.text.disable},
-                ]}
-              />
-            </View>
-            <NavigationContainer
-              maxApi={navigator?.maxApi}
-              theme={{
-                ...theme,
-                assets: {...theme.assets, headerBackground: undefined},
-              }}
-              screen={props => <Component {...props} {...params} />}
-              options={{
-                ...options,
-                ...{
-                  headerLeft: (props: any) => {
-                    if (props.canGoBack) {
-                      return <HeaderLeft {...props} useBorder={false} />;
-                    }
-                  },
-                  headerTitle: (props: any) => {
-                    return <HeaderTitle {...props} />;
-                  },
-                  headerTintColor: theme.colors.text.default,
-                  headerBackground: () => (
-                    <HeaderBackground backgroundColor={backgroundColor} />
-                  ),
-                  headerTransparent: false,
-                },
-                headerTitleAlign: 'center',
-                headerRight: props => (
-                  <HeaderRightAction>
-                    <NavigationButton
-                      {...props}
-                      icon="24_navigation_close"
-                      useBorder={false}
-                      onPress={() => bottomSheetRef.current?.dismiss()}
-                    />
-                  </HeaderRightAction>
-                ),
-              }}
-            />
-            <View
-              style={{
-                height: Math.min(insets.bottom, 20),
-                backgroundColor: indicatorColor ?? backgroundColor,
-              }}
-            />
-          </View>
-        </BottomSheetView>
-      </BottomSheetModal>
+        ref={modalizeRef}
+        withHandle={false}
+        flatListProps={flatListProps}
+        HeaderComponent={headerDefault(
+          options?.title ?? options?.customTitle?.title ?? '',
+          handleClose,
+        )}
+        FooterComponent={footerDefault(footerComponent)}>
+        <View style={styles.bottomSheetContainer}>
+          <Screen {...props} {...params} />
+        </View>
+      </Modalize>
     </SafeAreaView>
   );
 };
 
+const headerDefault = (title: string, onClose: () => void) => {
+  return (
+    <View style={styles.header}>
+      <Text
+        style={styles.textOption}
+        numberOfLines={2}
+        typography="header_default_bold">
+        {title ?? ''}
+      </Text>
+      <TouchableOpacity style={styles.buttonClose} onPress={onClose}>
+        <Icon source="navigation_close" />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const footerDefault = (footerComponent: React.ReactNode) => {
+  const insets = useSafeAreaInsets();
+  if (!footerComponent) return;
+  return (
+    <View
+      style={{
+        marginBottom: Math.min(insets.bottom, 21) + Spacing.S,
+        paddingHorizontal: 12,
+      }}>
+      {footerComponent}
+    </View>
+  );
+};
+
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
@@ -263,6 +202,43 @@ const styles = StyleSheet.create({
     height: 4,
     borderRadius: Radius.S,
   },
+  bottomSheetContainer: {
+    width: '100%',
+    backgroundColor: 'white',
+    borderTopRightRadius: 16,
+    borderTopLeftRadius: 16,
+  },
+  header: {
+    height: 50,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textOption: {
+    fontSize: 16,
+    color: '#303233',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    paddingHorizontal: 60,
+  },
+  imageOption: {
+    height: 1,
+    backgroundColor: '#ebebeb',
+    width: '100%',
+    position: 'absolute',
+    bottom: 1,
+  },
+  buttonClose: {
+    padding: 12,
+    position: 'absolute',
+    right: 0,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    tintColor: '#303233',
+    backgroundColor: 'red',
+  },
 });
 
 export default ModalScreen;

package/Application/NavigationContainer.tsx

@@ -1,5 +1,4 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
-import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
@@ -25,8 +24,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   localization,
 }) => {
   const context = useContext(MiniAppContext);
-  const navigationRef = React.useRef<NavigationContainerRef>(null);
-  const navigator = useRef(new Navigator(navigationRef));
+  const navigationRef = useRef<NavigationContainerRef>(null);
+  const isReady = useRef(false);
+  const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
   const config = useRef<any>();
 
@@ -67,52 +67,53 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 
   return (
     <SafeAreaProvider>
-      <BottomSheetModalProvider>
-        <ApplicationContext.Provider
-          value={{
-            navigator: navigator.current,
-            config: config.current,
-            theme,
-            showGrid,
-            translate,
-          }}>
-          <ReactNavigationContainer
-            theme={{
-              ...theme,
-              colors: {
-                ...theme.colors,
-                background: theme.colors.background.default,
-                card: theme.colors.background.surface,
-                text: theme.colors.text.default,
-                border: theme.colors.border.default,
-                notification: theme.colors.error.primary,
-              },
-            }}
-            ref={navigator.current?.ref}
-            independent={true}>
-            <Stack.Navigator initialRouteName="Stack" headerMode="screen">
-              <Stack.Screen
-                name="Stack"
-                component={StackScreen}
-                initialParams={{screen}}
-                options={{...getStackOptions(), ...options}}
-              />
-              <Stack.Screen
-                name="Dialog"
-                component={StackScreen}
-                options={getDialogOptions()}
-                initialParams={{screen}}
-              />
-              <Stack.Screen
-                name="Modal"
-                component={ModalScreen}
-                options={getModalOptions()}
-                initialParams={{screen}}
-              />
-            </Stack.Navigator>
-          </ReactNavigationContainer>
-        </ApplicationContext.Provider>
-      </BottomSheetModalProvider>
+      <ApplicationContext.Provider
+        value={{
+          navigator: navigator.current,
+          config: config.current,
+          theme,
+          showGrid,
+          translate,
+        }}>
+        <ReactNavigationContainer
+          theme={{
+            ...theme,
+            colors: {
+              ...theme.colors,
+              background: theme.colors.background.default,
+              card: theme.colors.background.surface,
+              text: theme.colors.text.default,
+              border: theme.colors.border.default,
+              notification: theme.colors.error.primary,
+            },
+          }}
+          ref={navigator.current?.ref}
+          onReady={() => {
+            isReady.current = true;
+          }}
+          independent={true}>
+          <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+            <Stack.Screen
+              name="Stack"
+              component={StackScreen}
+              initialParams={{screen}}
+              options={{...getStackOptions(), ...options}}
+            />
+            <Stack.Screen
+              name="Dialog"
+              component={StackScreen}
+              options={getDialogOptions()}
+              initialParams={{screen}}
+            />
+            <Stack.Screen
+              name="Modal"
+              component={ModalScreen}
+              options={getModalOptions()}
+              initialParams={{screen}}
+            />
+          </Stack.Navigator>
+        </ReactNavigationContainer>
+      </ApplicationContext.Provider>
     </SafeAreaProvider>
   );
 };

package/Application/Navigator.ts

@@ -8,13 +8,15 @@ import {
 
 class Navigator {
   ref?: any;
+  isReady?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
   dismissData?: any;
   toolkitCallback?: (item: any) => void;
 
-  constructor(navigation: any) {
+  constructor(navigation: any, isReady: any) {
     this.ref = navigation;
+    this.isReady = isReady;
   }
 
   /**
@@ -22,7 +24,9 @@ class Navigator {
    * @param params
    */
   push = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.push('Stack', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Stack', params));
+    }
   };
 
   /**
@@ -30,14 +34,18 @@ class Navigator {
    * @param params
    */
   replace = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.replace('Stack', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.replace('Stack', params));
+    }
   };
   /**
    * pop to dismiss a screen
    * @param count
    */
   pop = (count?: number) => {
-    this.ref.current.dispatch(StackActions.pop(count ?? 1));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.pop(count ?? 1));
+    }
   };
 
   /**
@@ -45,7 +53,9 @@ class Navigator {
    * @param params
    */
   present = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.push('Dialog', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Dialog', params));
+    }
   };
 
   /**
@@ -53,7 +63,9 @@ class Navigator {
    * @param params
    */
   showModal = (params: ModalParams) => {
-    this.ref.current.dispatch(StackActions.push('Modal', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Modal', params));
+    }
   };
 
   /**
@@ -61,19 +73,23 @@ class Navigator {
    * @param params
    */
   showBottomSheet = (params: BottomSheetParams) => {
-    this.ref.current.dispatch(
-      StackActions.push('Modal', {
-        ...params,
-        isBottomSheet: true,
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        StackActions.push('Modal', {
+          ...params,
+          isBottomSheet: true,
+        }),
+      );
+    }
   };
 
   /**
    * pop all screen route
    */
   popToTop = () => {
-    this.ref.current.dispatch(StackActions.popToTop());
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.popToTop());
+    }
   };
 
   /**
@@ -82,12 +98,14 @@ class Navigator {
    * @param params
    */
   navigate = (name: string, params: any) => {
-    this.ref.current.dispatch(
-      CommonActions.navigate({
-        name,
-        params,
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.navigate({
+          name,
+          params,
+        }),
+      );
+    }
   };
 
   /**
@@ -95,18 +113,20 @@ class Navigator {
    * @param params
    */
   reset = (params: ScreenParams) => {
-    this.ref.current.dispatch(
-      CommonActions.reset({
-        index: 0,
-        routes: [
-          {
-            name: 'Stack',
-            key: `Stack_${new Date().getTime()}`,
-            params,
-          },
-        ],
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [
+            {
+              name: 'Stack',
+              key: `Stack_${new Date().getTime()}`,
+              params,
+            },
+          ],
+        }),
+      );
+    }
   };
 
   /**

package/Application/StackScreen.tsx

@@ -45,17 +45,29 @@ const StackScreen: React.FC<ScreenParams> = props => {
       pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
 
-    navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
+    const params = {
       ...tracking,
       pre_screen_name,
       trigger_id: '111378000000000000',
+    };
+    navigator?.maxApi?.trackEvent?.('service_frame_displayed', params);
+    navigator?.maxApi?.showToastDebug?.({
+      appId: context.appId,
+      message: `${Component.name} service_frame_displayed`,
+      params,
     });
 
     return props.navigation.addListener('beforeRemove', () => {
-      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
+      const params = {
         ...tracking,
         trigger_id: '111154000000000000',
         icon_name: 'back',
+      };
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
+      navigator?.maxApi?.showToastDebug?.({
+        appId: context.appId,
+        message: `${Component.name} service_icon_clicked`,
+        params,
       });
     });
   }, []);

package/Application/index.ts

@@ -4,10 +4,8 @@ import {
   HeaderAnimated,
   HeaderBackground,
   HeaderCustom,
-  HeaderLeft,
   HeaderRightAction,
   HeaderTitle,
-  HeaderToolkitAction,
   NavigationButton,
 } from './Components';
 import BottomTab from './BottomTab';
@@ -32,10 +30,8 @@ export {
   BottomTab,
   NavigationButton,
   HeaderTitle,
-  HeaderLeft,
   HeaderBackground,
   HeaderRightAction,
-  HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
 };

package/Application/types.ts

@@ -1,4 +1,4 @@
-import {Animated} from 'react-native';
+import {Animated, FlatListProps, ViewProps} from 'react-native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import Navigator from './Navigator';
@@ -118,8 +118,8 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
-  indicatorColor?: string;
+  footerComponent?: React.ReactNode;
+  flatListProps: FlatListProps<any>;
 }
 
 export type NavigationButtonProps = {
@@ -152,6 +152,7 @@ export interface NavigationOptions extends StackNavigationOptions {
   toolkitParams?: {
     pinnedTool?: PinnedToolType;
     runtimeTools?: RuntimeToolType[];
+    preventClose?: PopupNotifyProps;
   };
 }
 
@@ -183,11 +184,10 @@ export type HeaderToolkitProps = {
   configs: any[];
 };
 
-export type HeaderAnimatedProps = {
+export interface HeaderAnimatedProps extends ViewProps {
   animatedValue: Animated.Value;
   image: string;
-  onPress?: () => void;
-};
+}
 
 export type BottomTabItemProps = {
   name: string;

package/Application/utils.tsx

@@ -126,19 +126,14 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
+  if (params.toolkitParams) {
     options = {
       ...options,
       headerRight: (props: any) => {
-        return (
-          <HeaderToolkitAction
-            preventBack={params.preventBack}
-            pinnedTool={params.toolkitParams?.pinnedTool}
-            runtimeTools={params.toolkitParams?.runtimeTools}
-            {...props}
-          />
-        );
+        return <HeaderToolkitAction {...params.toolkitParams} {...props} />;
       },
     };
+  }
 
   return {
     ...params,

package/Input/styles.ts

@@ -7,7 +7,7 @@ export default StyleSheet.create({
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   wrapper: {
     width: '100%',
@@ -75,7 +75,7 @@ export default StyleSheet.create({
     flex: 1,
     paddingRight: Spacing.XS,
     paddingVertical: Spacing.XS,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -108,7 +108,7 @@ export default StyleSheet.create({
     height: 36,
     marginLeft: Spacing.S,
     flex: 1,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
     paddingVertical: Spacing.XS,
   },
   searchInputView: {

package/Text/index.tsx

@@ -51,8 +51,9 @@ export interface TextProps extends RNTextProps {
    */
   color?: string;
 }
+
 const Text: React.FC<TextProps> = ({
-  typography,
+  typography = 'body_default_regular',
   color,
   children,
   style,
@@ -103,8 +104,4 @@ const Text: React.FC<TextProps> = ({
   );
 };
 
-Text.defaultProps = {
-  typography: 'body_default_regular',
-};
-
 export {Text, scaleSize};

package/Text/styles.ts

@@ -1,9 +1,9 @@
 export default {
-  headline_default_bold: {fontSize: 24, lineHeight: 32, fontWeight: '700'},
-  header_m_bold: {fontSize: 18, lineHeight: 28, fontWeight: '700'},
+  headline_default_bold: {fontSize: 24, lineHeight: 34, fontWeight: '700'},
+  header_m_bold: {fontSize: 18, lineHeight: 26, fontWeight: '700'},
   header_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
   header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
-  header_xs_semibold: {fontSize: 12, lineHeight: 16, fontWeight: '600'},
+  header_xs_semibold: {fontSize: 12, lineHeight: 18, fontWeight: '600'},
   body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
   body_regularstrikethrought: {
     fontSize: 14,
@@ -13,12 +13,12 @@ export default {
   },
   description_default_regular: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 18,
     fontWeight: '400',
   },
   description_default_regularstrikethrought: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 18,
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
@@ -30,11 +30,11 @@ export default {
     textDecorationLine: 'line-through',
   },
   label_default_medium: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
-  label_s_medium: {fontSize: 12, lineHeight: 16, fontWeight: '500'},
+  label_s_medium: {fontSize: 12, lineHeight: 18, fontWeight: '500'},
   label_xs_medium: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
   action_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
   action_s_bold: {fontSize: 14, lineHeight: 20, fontWeight: '700'},
-  action_xs_bold: {fontSize: 12, lineHeight: 16, fontWeight: '700'},
+  action_xs_bold: {fontSize: 12, lineHeight: 18, fontWeight: '700'},
   action_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
   /**non-support**/
   headline_default: {

package/code-scanner.js

@@ -1,143 +1,51 @@
 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 = (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);
 };
 
-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 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 [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);
 };
 
-main();
+main().catch(console.error);

package/package.json

@@ -1,27 +1,26 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.89.5-beta.18",
+    "version": "0.89.6",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
-        "postinstall": "node code-scanner.js"
+        "postinstall": "node verify.js"
     },
     "keywords": [
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "git+https://gitlab.com/momo-platform/bottom-sheet.git#main",
         "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/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-scanner": "^1.1.0"
+        "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main"
     },
     "peerDependencies": {
         "react-native": "*"

package/verify.js

@@ -2,25 +2,24 @@ const fs = require('fs');
 const path = require('path');
 
 try {
-  const package = path.join(`${__dirname}`, 'package.json');
-  const packageInfo = JSON.parse(fs.readFileSync(package, 'utf8'));
+  const packageInfo = JSON.parse(
+    fs.readFileSync(path.join(`${__dirname}`, 'package.json'), 'utf8'),
+  );
   const packageVersion = parseInt(packageInfo?.version.split('.')?.[1]);
 
   const app = path.join(`${__dirname}/../../../`, 'app.json');
   const miniJson = path.join(`${__dirname}/../../../`, 'package.json');
+
+  if (!fs.existsSync(app) || fs.existsSync(miniJson)) {
+    return;
+  }
+
   const appInfo = JSON.parse(fs.readFileSync(app, 'utf8'));
   const miniInfo = JSON.parse(fs.readFileSync(miniJson, 'utf8'));
+
   const iOSAppTarget = appInfo?.client?.ios.deploymentTarget;
   const androidAppTarget = appInfo?.client?.android.deploymentTarget;
 
-  if (Object.values(appInfo).length < 1) {
-    return
-  }
-
-  if (appInfo.name === 'MoMoPlatform') {
-    return;
-  }
-
   if (packageVersion > iOSAppTarget || packageVersion > androidAppTarget) {
     console.error(
       `Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`,