@momo-kits/foundation 0.81.43 → 0.88.1

package/Application/BottomTab.tsx

@@ -3,29 +3,45 @@ import {Platform} from 'react-native';
 import {BottomTabProps, NavigationScreenProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {createStackNavigator} from '@react-navigation/stack';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {NavigationContainer} from '@react-navigation/native';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {ApplicationContext} from './index';
 import {getStackOptions} from './utils';
 import StackScreen from './StackScreen';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
+  if (route.params?.nested) {
+    return (
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          initialParams={{screen: route.params?.screen}}
+          options={{...getStackOptions(), ...route.params?.options}}
+        />
+      </Stack.Navigator>
+    );
+  }
   return (
-    <Stack.Navigator>
-      <Stack.Screen
-        name="Stack"
-        component={StackScreen}
-        initialParams={{screen: route.params?.screen}}
-        options={{...getStackOptions(), ...route.params?.options}}
-      />
-    </Stack.Navigator>
+    <NavigationContainer independent={true}>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          initialParams={{screen: route.params?.screen}}
+          options={{...getStackOptions(), ...route.params?.options}}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 };
 const BottomTab: React.FC<BottomTabProps> = ({
+  nested,
   tabs,
   listeners,
   navigation,
@@ -61,14 +77,16 @@ const BottomTab: React.FC<BottomTabProps> = ({
             key={item.name}
             name={item.name}
             component={TabScreen}
-            initialParams={item}
+            initialParams={{...item, nested}}
             listeners={listeners}
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (
                   <Text
                     numberOfLines={1}
-                    typography={focused ? 'label_xs' : 'description_xs'}
+                    typography={
+                      focused ? 'label_xs_medium' : 'description_xs_regular'
+                    }
                     color={color}>
                     {item.label}
                   </Text>

package/Application/Components.tsx

@@ -22,7 +22,6 @@ import {
   HeaderAnimatedProps,
   HeaderBackgroundProps,
   HeaderBackProps,
-  HeaderToolkitProps,
   NavigationButtonProps,
   TitleCustomProps,
 } from './types';
@@ -31,74 +30,6 @@ import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
 
-const styles = StyleSheet.create({
-  navigationButton: {
-    height: 28,
-    width: 28,
-    borderRadius: 14,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  headerBackground: {
-    width: '100%',
-    height: undefined,
-    position: 'absolute',
-    aspectRatio: 375 / 154,
-  },
-  headerTitleContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-  },
-  circle: {width: 36, height: 36, borderRadius: 18},
-  square: {width: 36, height: 36, borderRadius: Radius.XS},
-  dotAvatar: {
-    position: 'absolute',
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    bottom: 0,
-    right: 0,
-    borderWidth: 1,
-    borderColor: Colors.black_01,
-  },
-  headerButton: {paddingHorizontal: 4},
-  headerRightButton: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingRight: Spacing.S,
-  },
-  toolkitContainer: {
-    marginLeft: Spacing.S,
-    padding: Spacing.XS,
-    height: 28,
-    borderRadius: 14,
-    borderColor: '#00000066',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  divider: {
-    width: 1,
-    height: 12,
-    marginHorizontal: 4,
-  },
-  headerLeft: {
-    marginLeft: 12,
-  },
-  title: {
-    fontSize: scaleSize(15),
-    lineHeight: scaleSize(22),
-    fontWeight: 'bold',
-  },
-  badge: {
-    position: 'absolute',
-    top: -8,
-    right: -8,
-  },
-});
-
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
@@ -118,26 +49,35 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     };
   }
 
+  const isNumber = (label: any) => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(label));
+  };
+
   const renderBadge = useCallback(() => {
-    if (!badgeValue && !badgeType) return null;
     if (badgeType === 'dot') {
-      return <BadgeDot size="small" style={styles.badge} />;
+      return <BadgeDot size="small" style={styles.badgeDot} />;
+    }
+
+    if (isNumber(badgeValue)) {
+      return <Badge label={badgeValue} style={styles.badge} />;
     }
-    return <Badge label={badgeValue} style={styles.badge} />;
   }, [badgeType, badgeValue]);
 
   return (
-    <TouchableOpacity
-      accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
-      style={[styles.navigationButton, buttonStyle]}
-      onPress={onPress}>
-      <Icon
-        source={icon}
-        color={tintColor ?? theme.colors.text.default}
-        size={20}
-      />
+    <View style={{width: scaleSize(28)}}>
+      <TouchableOpacity
+        accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
+        style={[styles.navigationButton, buttonStyle]}
+        onPress={onPress}>
+        <Icon
+          source={icon}
+          color={tintColor ?? theme.colors.text.default}
+          size={20}
+        />
+      </TouchableOpacity>
       {renderBadge()}
-    </TouchableOpacity>
+    </View>
   );
 };
 
@@ -304,10 +244,10 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text typography="title_xs" color={tintColor}>
+        <Text typography="header_default_bold" color={tintColor}>
           {title}
         </Text>
-        <Text typography="description_s" color={tintColor}>
+        <Text typography="description_default_regular" color={tintColor}>
           {subTitle}
         </Text>
       </View>
@@ -347,10 +287,14 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   return <View style={styles.headerRightButton}>{renderAction()}</View>;
 };
 
-const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
+const HeaderToolkitAction: React.FC<any> = ({
+  tintColor,
+  pinnedTool,
+  preventBack,
+}) => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const [toolConfig, setToolConfig] = useState<HeaderToolkitProps>();
-  const {appCode, hidden, type, onAction} = toolConfig ?? {};
+  const [toolConfig, setToolConfig] = useState<any>();
+  const {onAction} = toolConfig ?? {};
 
   let backgroundColor;
   if (tintColor != Colors.black_01) {
@@ -361,95 +305,78 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
     if (navigator?.toolkitConfig) {
       setToolConfig(navigator?.toolkitConfig);
     } else {
-      navigator?.requestApi('getToolkit', [undefined], (result: boolean) => {
-        if (result) {
-          navigator?.requestApi(
-            'getToolkitConfig',
-            [undefined],
-            (config: any) => {
-              navigator.toolkitConfig = {
-                ...config?.utilityToolConfig,
-                appCode: config?.appCode,
-              };
-              setToolConfig(navigator?.toolkitConfig);
-            },
-          );
-        }
-      });
+      getToolkitConfig();
     }
   }, []);
 
-  useEffect(() => {
-    let addFavorite: any;
-    let removeFavorite: any;
-    if (appCode) {
-      const addSchema = `observerToolkit_addFavorite_${appCode}`;
-      const removeSchema = `observerToolkit_removeFavorite_${appCode}`;
-      addFavorite = navigator?.requestApi(
-        'observer',
-        [addSchema],
-        (data: any) => {
-          if (data?.status) {
-            setToolConfig({
-              ...(toolConfig as HeaderToolkitProps),
-              hidden: true,
-            });
-          }
-        },
-      );
-      addFavorite = navigator?.requestApi(
-        'observer',
-        [removeSchema],
-        (data: any) => {
-          if (data?.status) {
-            setToolConfig({
-              ...(toolConfig as HeaderToolkitProps),
-              hidden: false,
-            });
-          }
-        },
-      );
-    }
-
-    return () => {
-      addFavorite?.();
-      removeFavorite?.();
-    };
-  }, [appCode]);
-
-  const onUtilityTool = () => {
-    onAction?.('onUtilityTool');
-    navigator?.requestApi(type, undefined, undefined);
+  const getToolkitConfig = () => {
+    navigator?.requestApi('getToolsConfig', [undefined], (config: any) => {
+      navigator.toolkitConfig = config;
+      setToolConfig(navigator?.toolkitConfig);
+    });
   };
 
   const onMore = () => {
     onAction?.('onMore');
-    navigator?.requestApi('showToolkit', [toolConfig], undefined);
+    navigator?.requestApi(
+      'showTools',
+      [undefined],
+      (res: {item: {action?: string; key: string}}) => {
+        const {item} = res;
+        navigator?.toolkitCallback?.(item);
+        getToolkitConfig();
+      },
+    );
   };
 
   const onClose = () => {
-    onAction?.('onClose');
-    navigator?.requestApi('dismiss', undefined, undefined);
+    if (preventBack) {
+      navigator?.showModal({
+        screen: () => (
+          <PopupNotify
+            {...preventBack}
+            primary={{
+              title: preventBack.primary.title,
+              onPress: () => {
+                preventBack?.primary.onPress();
+                navigator?.requestApi('dismiss', undefined, undefined);
+              },
+            }}
+          />
+        ),
+      });
+    } else {
+      navigator?.requestApi('dismiss', undefined, undefined);
+    }
   };
 
-  const renderUtilityTool = () => {
-    if (hidden === false) {
+  const renderPinnedTool = () => {
+    const pinKey = pinnedTool?.key || toolConfig?.pinnedTool?.key;
+    const pinTool = toolConfig?.tools?.find((i: any) => i.key === pinKey);
+    const {badgeValue, badgeType} = pinnedTool ?? {};
+
+    if (pinTool)
       return (
         <NavigationButton
           accessibilityLabel={'UtilityTool'}
-          icon={type as string}
+          icon={pinTool.icon as string}
           tintColor={tintColor}
-          onPress={onUtilityTool}
+          badgeValue={badgeValue}
+          badgeType={badgeType}
+          onPress={() => {
+            navigator?.requestApi('onToolAction', [pinTool?.key], () => {
+              getToolkitConfig();
+            });
+            navigator?.toolkitCallback?.(pinTool.key);
+          }}
         />
       );
-    }
-    return null;
   };
 
   if (toolConfig) {
     return (
       <View style={styles.headerRightButton}>
-        {renderUtilityTool()}
+        {renderPinnedTool()}
         <View
           style={[
             styles.toolkitContainer,
@@ -521,6 +448,79 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  navigationButton: {
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerBackground: {
+    width: '100%',
+    height: undefined,
+    position: 'absolute',
+    aspectRatio: 375 / 154,
+  },
+  headerTitleContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  circle: {width: 36, height: 36, borderRadius: 18},
+  square: {width: 36, height: 36, borderRadius: Radius.XS},
+  dotAvatar: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    bottom: 0,
+    right: 0,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+  },
+  headerButton: {paddingHorizontal: 4},
+  headerRightButton: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: Spacing.S,
+  },
+  toolkitContainer: {
+    marginLeft: Spacing.S,
+    padding: Spacing.XS,
+    height: 28,
+    borderRadius: 14,
+    borderColor: '#00000066',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  divider: {
+    width: 1,
+    height: 12,
+    marginHorizontal: 4,
+  },
+  headerLeft: {
+    marginLeft: 12,
+  },
+  title: {
+    fontSize: scaleSize(15),
+    lineHeight: scaleSize(22),
+    fontWeight: 'bold',
+  },
+  badge: {
+    position: 'absolute',
+    top: -Spacing.S,
+    right: -6,
+  },
+  badgeDot: {
+    position: 'absolute',
+    top: -Spacing.XS,
+    right: -Spacing.XS,
+  },
+});
+
 export {
   NavigationButton,
   HeaderTitle,

package/Application/Navigator.ts

@@ -13,6 +13,7 @@ class Navigator {
   maxApi?: any;
   trackingInfo?: TrackingInfo;
   dismissData?: any;
+  toolkitCallback?: (item: any) => void;
 
   constructor(navigation: any) {
     this.ref = navigation;
@@ -121,6 +122,12 @@ class Navigator {
       this.maxApi[func]?.(...args, callback);
     }
   };
+
+  setToolkitCallback = (
+    callback: (item: {key: string; action: string}) => void,
+  ) => {
+    this.toolkitCallback = callback;
+  };
 }
 
 export default Navigator;

package/Application/types.ts

@@ -128,8 +128,14 @@ export type NavigationButtonProps = {
   useBorder?: boolean;
   onPress: () => void;
   accessibilityLabel?: string;
-  badgeType?: 'dot' | 'number' | 'string';
-  badgeValue?: number | string;
+  badgeType?: 'dot' | 'number';
+  badgeValue?: number;
+};
+
+export type PinnedToolType = {
+  key: string;
+  badgeValue?: number;
+  badgeType?: 'number' | 'dot';
 };
 
 export interface NavigationOptions extends StackNavigationOptions {
@@ -138,6 +144,7 @@ export interface NavigationOptions extends StackNavigationOptions {
   surface?: boolean;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
+  pinnedTool?: PinnedToolType;
 }
 
 export interface HeaderBackProps extends NavigationButtonProps {
@@ -166,9 +173,7 @@ export type TitleCustomProps = {
 export type HeaderToolkitProps = {
   [key: string]: any;
   appCode: string;
-  hidden: boolean;
-  type: string;
-  onAction?: (action: string) => void;
+  configs: any[];
 };
 
 export type HeaderAnimatedProps = {
@@ -188,6 +193,7 @@ export type BottomTabItemProps = {
 };
 
 export type BottomTabProps = {
+  nested?: boolean;
   tabs: BottomTabItemProps[];
   initialRouteName?: string;
   navigation: Navigation;

package/Application/utils.tsx

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

package/Badge/Badge.tsx

@@ -46,7 +46,7 @@ const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
 
   return (
     <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
-      <Text color={Colors.black_01} typography={'action_xxs'}>
+      <Text color={Colors.black_01} typography={'action_xs_bold'}>
         {formatTitle()}
       </Text>
     </View>

package/Badge/BadgeRibbon.tsx

@@ -54,7 +54,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
             },
           ]}
           color={Colors.black_01}
-          typography={'label_xs'}>
+          typography={'label_xs_medium'}>
           {label}
         </Text>
       </View>
@@ -87,7 +87,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
               },
             ]}
             color={Colors.black_01}
-            typography={'label_xs'}>
+            typography={'label_xs_medium'}>
             {label}
           </Text>
         </View>

package/Badge/styles.ts

@@ -4,13 +4,16 @@ import {scaleSize} from '../Text';
 
 export default StyleSheet.create({
   badge: {
+    paddingHorizontal: Spacing.XS,
     borderRadius: Radius.M,
     justifyContent: 'center',
+    alignItems: 'center',
     height: scaleSize(16),
+    minWidth: scaleSize(16),
     flexDirection: 'row',
+    borderWidth: 1,
     borderColor: Colors.black_01,
-    paddingHorizontal: Spacing.XS,
-    alignItems: 'center',
+    alignSelf: 'baseline',
   },
   dot: {
     width: 16,

package/Button/index.tsx

@@ -172,14 +172,14 @@ const Button: FC<ButtonProps> = ({
   const getTypography = (): Typography => {
     switch (size) {
       case 'large':
-        return 'action_default';
+        return 'action_default_bold';
       case 'medium':
-        return 'action_s';
+        return 'action_s_bold';
       case 'small':
-        return 'action_xs';
+        return 'action_xs_bold';
 
       default:
-        return 'action_default';
+        return 'action_default_bold';
     }
   };
 

package/CheckBox/index.tsx

@@ -54,7 +54,7 @@ const CheckBox: FC<CheckBoxProps> = ({
           />
         )}
       </View>
-      {!!label && <Text typography={'description_default'}>{label}</Text>}
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
     </TouchableOpacity>
   );
 };

package/Input/InputOTP.tsx

@@ -57,7 +57,7 @@ const OTPCaret: FC<CaretProps> = ({index, length}) => {
           opacity,
         }}
       />
-      <Text color={theme.colors.text.hint} typography={'paragraph_default'}>
+      <Text color={theme.colors.text.hint} typography={'body_default_regular'}>
         -
       </Text>
     </View>
@@ -135,7 +135,9 @@ const InputOTP = forwardRef(
                     ? theme.colors.text.default
                     : theme.colors.text.hint
                 }
-                typography={!!value[i] ? 'title_s' : 'paragraph_default'}>
+                typography={
+                  !!value[i] ? 'header_m_bold' : 'body_default_regular'
+                }>
                 {value[i] || '-'}
               </Text>
             )}
@@ -150,7 +152,9 @@ const InputOTP = forwardRef(
 
       if (!focused && value.length === 0 && !!placeholder) {
         return (
-          <Text color={theme.colors.text.hint} typography={'description_s'}>
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_default_regular'}>
             {placeholder}
           </Text>
         );
@@ -167,7 +171,7 @@ const InputOTP = forwardRef(
                     marginRight: Spacing.L,
                   }
                 }
-                typography={'title_s'}>
+                typography={'header_m_bold'}>
                 {letter}
               </Text>
             );
@@ -191,7 +195,9 @@ const InputOTP = forwardRef(
                 styles.otpFloatingView,
                 {backgroundColor: theme.colors.background.surface},
               ]}>
-              <Text typography={'description_s'}>{floatingValue}</Text>
+              <Text typography={'description_default_regular'}>
+                {floatingValue}
+              </Text>
             </View>
           )}
           <View style={styles.otpInputsView}>

package/Input/InputSearch.tsx

@@ -142,7 +142,7 @@ const InputSearch = forwardRef(
         </View>
         {showButtonText && (
           <TouchableOpacity onPress={onPressButtonText}>
-            <Text typography={'action_default'} style={styles.textButton}>
+            <Text typography={'action_default_bold'} style={styles.textButton}>
               {buttonText}
             </Text>
           </TouchableOpacity>

package/Input/InputTextArea.tsx

@@ -71,7 +71,9 @@ const InputTextArea = forwardRef(
     const renderCountingView = () => {
       return (
         <View style={styles.countingView}>
-          <Text color={theme.colors.text.hint} typography={'description_xs'}>
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_xs_regular'}>
             {`${inputValue.length}/${maxLength}`}
           </Text>
         </View>

package/Input/common.tsx

@@ -64,7 +64,7 @@ export const ErrorView: FC<{errorMessage?: string; errorSpacing?: boolean}> = ({
           style={Styles.flex}
           color={errorColor}
           numberOfLines={2}
-          typography={'description_s'}>
+          typography={'description_default_regular'}>
           {errorMessage}
         </Text>
       </View>
@@ -104,10 +104,12 @@ export const FloatingView: FC<FloatingViewProps> = ({
           },
           style,
         ]}>
-        <Text color={floatingTextColor} typography={'label_s'}>
+        <Text color={floatingTextColor} typography={'label_s_medium'}>
           {floatingValue}
           {required && (
-            <Text typography={'label_s'} color={theme.colors.error.primary}>
+            <Text
+              typography={'label_s_medium'}
+              color={theme.colors.error.primary}>
               *
             </Text>
           )}

package/Layout/Card.tsx

@@ -29,7 +29,7 @@ const Card: React.FC<CardProps> = ({
   useShadow = false,
   ...props
 }) => {
-  const {showGrid} = useContext(ApplicationContext);
+  const {showGrid, theme} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 8;
@@ -47,6 +47,7 @@ const Card: React.FC<CardProps> = ({
       return span * sizePerSpan + (span - 1) * gutterSize;
     },
   };
+
   /**
    * render overlay only dev mode
    */
@@ -107,8 +108,9 @@ const Card: React.FC<CardProps> = ({
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      for (let i = 0; i < children.length; ++i) {
-        const item = children[i];
+      const arrayChild = children.filter(item => !!item);
+      for (let i = 0; i < arrayChild.length; ++i) {
+        const item = arrayChild[i];
         const totalSpan = rows
           .concat([item])
           .map(i => i.props?.widthSpan)
@@ -124,7 +126,7 @@ const Card: React.FC<CardProps> = ({
           rows = [item];
         }
 
-        if (i == children.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
@@ -138,23 +140,21 @@ const Card: React.FC<CardProps> = ({
     return element;
   };
 
-  const {theme} = useContext(ApplicationContext);
   return (
     <GridContext.Provider value={gridContext}>
       <View
         {...props}
         accessibilityLabel={`Card`}
         style={[
+          {backgroundColor: theme.colors.background.surface},
           style,
           styles.protectedStyle,
           styles.card,
           {
             width: widthSection,
             marginHorizontal: margin,
-            backgroundColor: backgroundImage
-              ? undefined
-              : theme.colors.background.surface,
           },
+          !!backgroundImage && {backgroundColor: undefined},
           useShadow && Shadow.Light,
         ]}>
         {!!backgroundImage && (

package/Layout/ItemList.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, {forwardRef, useContext} from 'react';
 import {FlatList, FlatListProps, View} from 'react-native';
 import Item, {SpanNumber} from './Item';
 import {GridContext} from './index';
@@ -11,39 +11,45 @@ export interface ItemListProps extends FlatListProps<any> {
   widthSpan?: SpanNumber;
 }
 
-const ItemList: FC<ItemListProps> = ({
-  renderItem,
-  widthSpan,
-  style,
-  contentContainerStyle,
-  ...props
-}) => {
-  const {gutterSize, numberOfColumns} = useContext(GridContext);
-  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
-  const numColumns = Math.floor(numberOfColumns / widthItem);
-  const indexBegin = props?.data?.map((_i, index) => index * numColumns);
-  const _renderItem = (item: any) => {
-    if (indexBegin?.includes(item?.index)) {
-      return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
-    }
+const ItemList = forwardRef(
+  (
+    {
+      renderItem,
+      widthSpan,
+      style,
+      contentContainerStyle,
+      ...props
+    }: ItemListProps,
+    ref,
+  ) => {
+    const {gutterSize, numberOfColumns} = useContext(GridContext);
+    const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+    const numColumns = Math.floor(numberOfColumns / widthItem);
+    const indexBegin = props?.data?.map((_i, index) => index * numColumns);
+    const _renderItem = (item: any) => {
+      if (indexBegin?.includes(item?.index)) {
+        return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
+      }
+      return (
+        <View style={{paddingLeft: gutterSize}}>
+          <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
+        </View>
+      );
+    };
+
     return (
-      <View style={{paddingLeft: gutterSize}}>
-        <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
-      </View>
+      <FlatList
+        ref={ref as React.RefObject<FlatList>}
+        {...props}
+        numColumns={numColumns}
+        renderItem={_renderItem}
+        horizontal={false}
+        ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+        style={[style, styles.protectedStyle]}
+        contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+      />
     );
-  };
-
-  return (
-    <FlatList
-      {...props}
-      numColumns={numColumns}
-      renderItem={_renderItem}
-      horizontal={false}
-      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
-      style={[style, styles.protectedStyle]}
-      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
-    />
-  );
-};
+  },
+);
 
 export default ItemList;

package/Layout/Section.tsx

@@ -107,8 +107,9 @@ const Section: React.FC<SectionProps> = ({
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      for (let i = 0; i < children.length; ++i) {
-        const item = children[i];
+      const arrayChild = children.filter(item => !!item);
+      for (let i = 0; i < arrayChild.length; ++i) {
+        const item = arrayChild[i];
         const totalSpan = rows
           .concat([item])
           .map(i => i.props?.widthSpan)
@@ -124,7 +125,7 @@ const Section: React.FC<SectionProps> = ({
           rows = [item];
         }
 
-        if (i == children.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }

package/Pagination/PaginationNumber.tsx

@@ -13,7 +13,7 @@ const PaginationNumber: FC<ChildPaginationProps> = ({
   return (
     <View style={[style, styles.row]}>
       <View style={styles.paginationNumberContainer}>
-        <Text color={Colors.black_01} typography={'label_default'}>{`${
+        <Text color={Colors.black_01} typography={'label_default_medium'}>{`${
           activeIndex + 1
         }/${dataLength}`}</Text>
       </View>

package/Popup/PopupNotify.tsx

@@ -192,12 +192,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       ]}>
       {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
-        <Text typography={'title_xs'} numberOfLines={1}>
+        <Text typography={'header_default_bold'} numberOfLines={1}>
           {title}
         </Text>
         <Description style={[styles.description, descriptionStyle]}>
           <Text
-            typography={'paragraph_default'}
+            typography={'body_default_regular'}
             onTextLayout={({nativeEvent: {lines}}) => {
               const enableScroll = lines.length > 3;
               if (enableScroll != scrollContent) {
@@ -210,7 +210,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         {!!error && (
           <View style={styles.information}>
             <Text
-              typography={'description_xs'}
+              typography={'description_xs_regular'}
               color={theme.colors.text.hint}
               numberOfLines={1}>
               {translate?.('errorCode')}

package/Radio/index.tsx

@@ -57,7 +57,7 @@ const Radio: FC<RadioProps> = ({
           {marginRight: label ? Spacing.XS : 0},
         ]}
       />
-      {!!label && <Text typography={'description_default'}>{label}</Text>}
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
     </TouchableOpacity>
   );
 };

package/Tag/index.tsx

@@ -71,7 +71,7 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text color={labelColor} typography={'label_s'}>
+      <Text color={labelColor} typography={'label_s_medium'}>
         {label}
       </Text>
     </View>

package/Text/index.tsx

@@ -84,6 +84,7 @@ const Text: React.FC<TextProps> = ({
     }
 
     return {
+      ...typoStyle,
       fontFamily,
       fontSize: scaleSize(fontSize),
       lineHeight: scaleSize(lineHeight),
@@ -104,7 +105,7 @@ const Text: React.FC<TextProps> = ({
 };
 
 Text.defaultProps = {
-  typography: 'paragraph_default',
+  typography: 'body_default_regular',
 };
 
 export {Text, scaleSize};

package/Text/styles.ts

@@ -1,4 +1,42 @@
 export default {
+  headline_default_bold: {fontSize: 24, lineHeight: 32, fontWeight: '700'},
+  header_m_bold: {fontSize: 18, lineHeight: 28, 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'},
+  body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
+  body_regularstrikethrought: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  description_default_regular: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '400',
+  },
+  description_default_regularstrikethrought: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  description_xs_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_xs_regularstrikethrought: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  label_default_medium: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
+  label_s_medium: {fontSize: 12, lineHeight: 16, 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_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
+  /**non-support**/
   headline_default: {
     fontSize: 28,
     lineHeight: 34,

package/Text/types.ts

@@ -14,27 +14,21 @@ export type TypographyWeight = {
 };
 
 export type Typography =
-  | 'headline_default'
-  | 'headline_s'
-  | 'headline_l'
-  | 'headline_xl'
-  | 'title_default'
-  | 'title_xs'
-  | 'title_s'
-  | 'header_default'
-  | 'header_xs'
-  | 'header_s'
-  | 'paragraph_default'
-  | 'paragraph_bold'
-  | 'paragraph_italic'
-  | 'description_default'
-  | 'description_xs'
-  | 'description_s'
-  | 'label_default'
-  | 'label_xxs'
-  | 'label_xs'
-  | 'label_s'
-  | 'action_default'
-  | 'action_xxs'
-  | 'action_xs'
-  | 'action_s';
+  | 'headline_default_bold'
+  | 'header_m_bold'
+  | 'header_default_bold'
+  | 'header_s_semibold'
+  | 'header_xs_semibold'
+  | 'body_default_regular'
+  | 'body_regularstrikethrought'
+  | 'description_default_regular'
+  | 'description_default_regularstrikethrought'
+  | 'description_xs_regular'
+  | 'description_xs_regularstrikethrought'
+  | 'label_default_medium'
+  | 'label_s_medium'
+  | 'label_xs_medium'
+  | 'action_default_bold'
+  | 'action_s_bold'
+  | 'action_xs_bold'
+  | 'action_xxs_bold';

package/Title/index.tsx

@@ -39,7 +39,7 @@ const Title: FC<TitleProps> = ({
   const renderAction = () => {
     return !!actionTitle && titleFlex ? (
       <TouchableOpacity onPress={onPressAction}>
-        <Text typography={'action_s'} color={theme.colors.primary}>
+        <Text typography={'action_s_bold'} color={theme.colors.primary}>
           {actionTitle}
         </Text>
       </TouchableOpacity>
@@ -116,7 +116,7 @@ const Title: FC<TitleProps> = ({
           {!!description && type !== 'screen' && (
             <Text
               numberOfLines={1}
-              typography={'description_s'}
+              typography={'description_default_regular'}
               color={theme.colors.text.secondary}>
               {description}
             </Text>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.43",
+    "version": "0.88.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {

package/verify.js

@@ -27,8 +27,9 @@ try {
   }
 
   if (
-    miniInfo?.name !== '@momo-platform/momo-core' &&
-    miniInfo?.resolutions?.['@momo-platform/momo-core'] !== packageInfo?.version
+    miniInfo?.dependencies?.['@momo-platform/momo-core'] &&
+    miniInfo?.dependencies?.['@momo-platform/momo-core'] !==
+      packageInfo?.version
   ) {
     console.error(
       `Package ${packageInfo.name} version: ${packageInfo.version} require install resolutions @momo-platform/momo-core ${packageInfo.version}`,