@momo-kits/foundation 0.81.1-beta.6 → 0.81.1-optimize.1

package/Layout/Section.tsx

@@ -22,11 +22,6 @@ export interface SectionProps extends ViewProps {
    */
   useMargin?: boolean;
 
-  /**
-   * Optional. Background color for the Section component.
-   */
-  backgroundColor?: string;
-
   /**
    * Optional. Background image for the Section component.
    */
@@ -36,8 +31,9 @@ export interface SectionProps extends ViewProps {
 const Section: React.FC<SectionProps> = ({
   children,
   useMargin = true,
-  backgroundColor,
   backgroundImage,
+  style,
+  ...props
 }) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
@@ -55,7 +51,6 @@ const Section: React.FC<SectionProps> = ({
   const gridContext: GridContextProps = {
     numberOfColumns,
     gutterSize,
-    margin,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + (span - 1) * gutterSize;
@@ -112,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)
@@ -129,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));
         }
@@ -148,21 +144,23 @@ const Section: React.FC<SectionProps> = ({
       value={{
         numberOfColumns,
         gutterSize,
-        margin,
         sizePerSpan,
         getSizeSpan: span => {
           return span * sizePerSpan + (span - 1) * gutterSize;
         },
       }}>
       <View
-        accessibilityLabel={`Section`}
-        style={{
-          width: widthSection,
-          marginHorizontal: gridContext.margin,
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-          backgroundColor: backgroundColor,
-        }}>
+        {...props}
+        style={[
+          style,
+          styles.protectedStyle,
+          {
+            width: widthSection,
+            marginHorizontal: margin,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+          },
+        ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}

package/Layout/index.ts

@@ -6,11 +6,11 @@ import {createContext} from 'react';
 import {GridContextProps} from './types';
 import Item from './Item';
 import ItemList from './ItemList';
+import ItemSectionList from './ItemSectionList';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
   gutterSize: 12,
-  margin: 12,
   sizePerSpan: 0,
   getSizeSpan: () => 0,
 });
@@ -23,4 +23,5 @@ export {
   validateChildren,
   Item,
   ItemList,
+  ItemSectionList,
 };

package/Layout/styles.ts

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
-import {Radius, Spacing} from '../Consts';
+import {Platform, StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   extendedHeader: {
@@ -45,19 +45,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     borderRadius: Radius.M,
-    paddingTop: undefined,
-    paddingBottom: undefined,
-    paddingLeft: undefined,
-    paddingRight: undefined,
-    paddingVertical: undefined,
-    paddingHorizontal: undefined,
     padding: 12,
-    margin: undefined,
-    marginTop: undefined,
-    marginBottom: undefined,
-    marginLeft: undefined,
-    marginRight: undefined,
-    marginVertical: undefined,
   },
   item: {
     overflow: 'hidden',
@@ -75,7 +63,6 @@ export default StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
-    borderRadius: Spacing.M,
   },
   protectedStyle: {
     marginTop: undefined,
@@ -93,4 +80,18 @@ export default StyleSheet.create({
     paddingHorizontal: undefined,
     paddingVertical: undefined,
   },
+  footerContainer: {
+    paddingTop: Spacing.S,
+    ...Platform.select({
+      android: {
+        elevation: 4,
+      },
+      ios: {
+        shadowColor: Colors.black_20,
+        shadowOffset: {width: 0, height: -2},
+        shadowOpacity: 0.1,
+        shadowRadius: 3,
+      },
+    }),
+  },
 });

package/Layout/types.ts

@@ -1,3 +1,5 @@
+export type HeaderType = 'default' | 'surface' | 'extended' | 'none';
+
 export type GridContextProps = {
   /**
    * Represents the number of columns in the grid.
@@ -9,11 +11,6 @@ export type GridContextProps = {
    */
   gutterSize: number;
 
-  /**
-   * Optional. Represents the margin around the grid.
-   */
-  margin?: number;
-
   /**
    * Represents the size (width or height) per span number.
    */

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/Pagination/PaginationScroll.tsx

@@ -31,7 +31,6 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   const renderScrollView = () => {
     return (
       <Animated.ScrollView
-        accessibilityLabel={'PaginationScroll'}
         ref={scrollViewRef}
         onScroll={Animated.event(
           [

package/Popup/PopupNotify.tsx

@@ -1,24 +1,66 @@
-import React, {useContext} from 'react';
-import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
+  id,
   image,
   title = 'Title',
   description = 'Description',
-  information,
+  error,
   secondary,
   primary,
   buttonDirection = 'row',
   onIconClose,
 }) => {
-  const {theme, navigator} = useContext(ApplicationContext);
+  const context = useContext(MiniAppContext);
+  const {theme, navigator, translate} = useContext(ApplicationContext);
+  const [scrollContent, setScrollContent] = useState(false);
+  const closeAction = useRef('touch_outside');
+
+  let descriptionStyle = {};
+  let Description: any = View;
+  if (scrollContent) {
+    Description = ScrollView;
+    descriptionStyle = {height: 80};
+  }
+
+  /**
+   * tracking
+   */
+  useEffect(() => {
+    const routes = navigator?.ref.current?.getRootState()?.routes || [];
+    const routesLength = routes.length;
+    let screen_name = routes?.[0]?.params?.screen?.name;
+    if (routesLength > 1) {
+      screen_name = routes[routesLength - 2]?.params?.screen?.name;
+    }
+    const tracking = {
+      ...context,
+      screen_name,
+      component_type: 'popup',
+      component_name: id,
+      error_code: error ? error : undefined,
+    };
+    navigator?.maxApi?.trackEvent?.('service_component_displayed', {
+      ...tracking,
+      trigger_id: '111012100000000000',
+    });
+
+    return () => {
+      navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
+        ...tracking,
+        trigger_id: '111154100000000001',
+        action_type: closeAction.current,
+      });
+    };
+  }, []);
 
   /**
    * on action popup
@@ -44,6 +86,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                   type="text"
                   size="medium"
                   onPress={() => {
+                    closeAction.current = 'button_action';
                     onAction(secondary?.onPress);
                   }}
                 />
@@ -56,6 +99,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               title={primary.title}
               size="medium"
               onPress={() => {
+                closeAction.current = 'button_action';
                 onAction(primary.onPress);
               }}
             />
@@ -70,6 +114,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             title={primary.title}
             size="medium"
             onPress={() => {
+              closeAction.current = 'button_action';
               onAction(primary.onPress);
             }}
           />
@@ -81,6 +126,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 type="text"
                 size="medium"
                 onPress={() => {
+                  closeAction.current = 'button_action';
                   onAction(secondary?.onPress);
                 }}
               />
@@ -112,7 +158,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     return (
       <TouchableOpacity
         style={styles.iconCloseContainer}
-        onPress={() => onAction(onIconClose)}>
+        onPress={() => {
+          closeAction.current = 'icon_close';
+          onAction(onIconClose);
+        }}>
         <View
           style={[
             styles.iconClose,
@@ -133,28 +182,35 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
-      accessibilityLabel={'PopupNotify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},
       ]}>
       {!!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>
-        <View style={styles.description}>
-          <Text typography={'paragraph_default'} numberOfLines={3}>
+        <Description style={[styles.description, descriptionStyle]}>
+          <Text
+            typography={'body_default_regular'}
+            onTextLayout={({nativeEvent: {lines}}) => {
+              const enableScroll = lines.length > 3;
+              if (enableScroll != scrollContent) {
+                setScrollContent(enableScroll);
+              }
+            }}>
             {description}
           </Text>
-        </View>
-        {!!information && (
+        </Description>
+        {!!error && (
           <View style={styles.information}>
             <Text
-              typography={'description_xs'}
+              typography={'description_xs_regular'}
               color={theme.colors.text.hint}
               numberOfLines={1}>
-              {information}
+              {translate?.('errorCode')}
+              {error}
             </Text>
           </View>
         )}
@@ -174,6 +230,7 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: Radius.L,
     borderTopRightRadius: Radius.L,
     aspectRatio: 1.7777,
+    overflow: 'hidden',
   },
   content: {padding: Spacing.XL},
   description: {

package/Popup/PopupPromotion.tsx

@@ -1,13 +1,48 @@
-import React, {useContext} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
 
-const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
+const PopupPromotion: React.FC<PopupPromotionProps> = ({
+  id,
+  image,
+  onIconClose,
+}) => {
+  const context = useContext(MiniAppContext);
   const {theme, navigator} = useContext(ApplicationContext);
+  const closeAction = useRef('touch_outside');
+
+  /**
+   * tracking
+   */
+  useEffect(() => {
+    const routes = navigator?.ref.current?.getRootState()?.routes || [];
+    const routesLength = routes.length;
+    let screen_name = routes?.[0]?.params?.screen?.name;
+    if (routesLength > 1) {
+      screen_name = routes[routesLength - 2]?.params?.screen?.name;
+    }
+    const tracking = {
+      ...context,
+      screen_name,
+      component_type: 'popup',
+      component_name: id,
+    };
+    navigator?.maxApi?.trackEvent?.('service_component_displayed', {
+      ...tracking,
+      trigger_id: '111012100000000000',
+    });
+    return () => {
+      navigator?.maxApi?.trackEvent?.('service_popup_dismissed', {
+        ...tracking,
+        trigger_id: '111154100000000001',
+        action_type: closeAction.current,
+      });
+    };
+  }, []);
 
   /**
    * build close action
@@ -17,8 +52,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
       <View style={styles.iconCloseContainer}>
         <TouchableOpacity
           onPress={() => {
+            closeAction.current = 'icon_close';
             navigator?.pop();
-            onClose?.();
+            onIconClose?.();
           }}
           style={styles.iconButton}>
           <View
@@ -41,12 +77,12 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
   };
 
   return (
-    <View accessibilityLabel={'PopupPromotion'}>
+    <View>
       <Image
-        style={styles.container}
         source={{
           uri: image,
         }}
+        style={styles.container}
       />
       {buildCloseIcon()}
     </View>
@@ -56,6 +92,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
 const styles = StyleSheet.create({
   container: {
     aspectRatio: 0.72,
+    width: '100%',
   },
   iconCloseContainer: {
     width: '100%',

package/Popup/types.ts

@@ -2,6 +2,10 @@ import {TextStyle} from 'react-native';
 import React from 'react';
 
 export type PopupNotifyProps = {
+  /**
+   * `id`: Optional. id component_name for tracking component.
+   */
+  id?: string;
   /**
    * `image`: Optional. Represents the URL or path of the image to be displayed in the PopupNotify component.
    */
@@ -18,9 +22,9 @@ export type PopupNotifyProps = {
   description: string | React.ReactNode;
 
   /**
-   * `information`: Optional. Represents additional information text to be displayed in the PopupNotify component.
+   * `error`: Optional. Represents additional error text to be displayed in the PopupNotify component.
    */
-  information?: string;
+  error?: string;
 
   /**
    * `secondary`: Optional. Represents the secondary action that can be performed from the PopupNotify component.
@@ -47,6 +51,11 @@ export type PopupNotifyProps = {
 };
 
 export type PopupPromotionProps = {
+  /**
+   * `id`: Optional. id component_name for tracking component.
+   */
+  id?: string;
+
   /**
    * `image`: Represents the URL or path of the image to be displayed in the PopupPromotion component.
    */
@@ -55,7 +64,7 @@ export type PopupPromotionProps = {
   /**
    * `onClose`: Optional. A callback function that is called when the PopupPromotion component is closed.
    */
-  onClose?: () => void;
+  onIconClose?: () => void;
 };
 
 type PopupAction = {

package/Radio/index.tsx

@@ -39,7 +39,6 @@ const Radio: FC<RadioProps> = ({
 
   return (
     <TouchableOpacity
-      accessibilityLabel={`Radio/${label}/${value}`}
       onPress={onChange}
       disabled={disabled}
       style={[
@@ -57,7 +56,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/Skeleton/index.tsx

@@ -41,7 +41,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
     }
   };
   return (
-    <View style={[styles.container, style]} accessibilityLabel={'Skeleton'}>
+    <View style={[styles.container, style]}>
       <View
         onLayout={e => onLayout(e.nativeEvent.layout.width)}
         style={[Styles.flex, {backgroundColor: PRIMARY_COLOR}]}>

package/Switch/index.tsx

@@ -16,7 +16,6 @@ const Switch: FC<SwitchProps> = props => {
 
   return (
     <TouchableOpacity
-      accessibilityLabel={'Switch'}
       disabled={disabled}
       onPress={() => onChange?.(!value)}
       style={[

package/Tag/index.tsx

@@ -60,9 +60,7 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View
-      style={[style, sizeStyle, {backgroundColor: tagColor}]}
-      accessibilityLabel={`Tag/${label}`}>
+    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
       {!!icon && (
         <Icon
           style={styles.icon}
@@ -71,7 +69,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,10 +84,12 @@ const Text: React.FC<TextProps> = ({
     }
 
     return {
+      ...typoStyle,
       fontFamily,
       fontSize: scaleSize(fontSize),
       lineHeight: scaleSize(lineHeight),
       fontStyle,
+      fontWeight,
     };
   };
 
@@ -95,7 +97,6 @@ const Text: React.FC<TextProps> = ({
   return (
     <RNText
       {...rest}
-      accessibilityLabel={`Text/${children}`}
       style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
       {children ?? ''}
     </RNText>
@@ -103,7 +104,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,39 @@ export type TypographyWeight = {
 };
 
 export type Typography =
+  /**
+   * @deprecated
+   **/
   | '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';
+  | 'action_s'
+  /**
+   * end
+   **/
+  | 'headline_default_bold'
+  | 'header_m_bold'
+  | 'header_default_bold'
+  | 'header_s_semibold'
+  | 'header_xs_semibold'
+  | 'body_default_regular'
+  | 'body_default_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';