@momo-kits/foundation 0.89.6 → 0.92.1-rc.1

package/Application/BottomTab/path.ts

@@ -0,0 +1,202 @@
+import * as shape from 'd3-shape';
+import {Platform} from 'react-native';
+
+export const TABBAR_ITEM_TOP = Platform.OS === 'ios' ? 8 : 4;
+export const CIRCLE_SIZE = 50;
+export const TABBAR_ITEM_ICON_SIZE = 28;
+export const CIRCLE_POSITION_TOP =
+  CIRCLE_SIZE - TABBAR_ITEM_ICON_SIZE - TABBAR_ITEM_TOP;
+export const CIRCLE_OVER_SIZE = 10;
+export const CIRCLE_OVER_TOP = CIRCLE_POSITION_TOP + CIRCLE_OVER_SIZE;
+
+export const scale = (number: number) => {
+  return number;
+};
+
+const line = (width: number, height: number) => {
+  const path = (shape as any)
+    .line()
+    .x((d: {x: any}) => d.x)
+    .y((d: {y: any}) => d.y)([
+    {x: width / 2, y: scale(CIRCLE_OVER_TOP)},
+    {x: 0, y: scale(CIRCLE_OVER_TOP)},
+    {x: 0, y: height},
+    {x: width, y: height},
+    {x: width, y: scale(CIRCLE_OVER_TOP)},
+    {x: width / 2, y: scale(CIRCLE_OVER_TOP)},
+  ]);
+  //M195,30L0,30L0,106L390,106L390,30L195,30
+  // MaxApi.copyToClipboard(path, 'copied');
+  return path;
+};
+
+//** Path Line Border Left Right Up */
+const lineBorder = (width: number, height: number) => {
+  const border = (shape as any)
+    .line()
+    .x((d: {x: any}) => d.x)
+    .y((d: {y: any}) => d.y)
+    .curve(shape.curveBasis)([
+    // right
+    {x: width / 2, y: scale(30)},
+    {x: width - scale(20), y: scale(30)},
+    {x: width - scale(10), y: scale(32)},
+    {x: width - scale(2), y: scale(40)},
+    {x: width, y: scale(50)},
+    {x: width, y: height},
+    {x: width, y: height},
+    // bottom
+    {x: width, y: height},
+    {x: 0, y: height},
+    // left
+    {x: 0, y: height},
+    {x: 0, y: height},
+    {x: 0, y: scale(50)},
+    {x: 0 + scale(2), y: scale(40)},
+    {x: 0 + scale(10), y: scale(32)},
+    {x: 0 + scale(20), y: scale(30)},
+    {x: width / 2, y: scale(30)},
+  ]);
+
+  return border;
+};
+
+//** Path Line Border Left Right Down */
+const lineBorderLeft = (width: number, height: number) => {
+  const border = (shape as any)
+    .line()
+    .x((d: {x: any}) => d.x)
+    .y((d: {y: any}) => d.y)
+    .curve(shape.curveBasis)([
+    // right
+    {x: width, y: scale(30)},
+    {x: width, y: height},
+    {x: width, y: height},
+    // bottom
+    {x: width, y: height},
+    {x: 0, y: height},
+    // left
+    {x: 0, y: height},
+    {x: 0, y: height},
+    {x: 0, y: scale(50)},
+    {x: 0 + scale(2), y: scale(40)},
+    {x: 0 + scale(10), y: scale(32)},
+    {x: 0 + scale(20), y: scale(30)},
+    {x: width / 2, y: scale(30)},
+  ]);
+
+  return border;
+};
+
+//** Path Line Border Left Right Down */
+const lineBorderRight = (width: number, height: number) => {
+  const border = (shape as any)
+    .line()
+    .x((d: {x: any}) => d.x)
+    .y((d: {y: any}) => d.y)
+    .curve(shape.curveBasis)([
+    // right
+    {x: width / 2, y: scale(30)},
+    {x: width - scale(20), y: scale(30)},
+    {x: width - scale(10), y: scale(32)},
+    {x: width - scale(2), y: scale(40)},
+    {x: width, y: scale(50)},
+    {x: width, y: height},
+    {x: width, y: height},
+    // bottom
+    {x: width, y: height},
+    {x: 0, y: height},
+    // left
+    {x: 0, y: height},
+    {x: 0, y: height},
+    {x: 0, y: scale(30)},
+  ]);
+
+  return border;
+};
+
+//** Path Curved Up */
+const lineCurved = (position: number, circle: number) => {
+  const circleR = circle / 2;
+  const circleRightPos = circle + position;
+  const circleOverR = circle / 2 + CIRCLE_OVER_SIZE;
+  const centerX = (position + circleRightPos) / 2; //195
+  const centerY = CIRCLE_OVER_SIZE + circleR; //33
+  // {"circle":50,"position":170,"centerX":195,"circleWidth":220}
+  // WIDTH_SCREEN: 390
+
+  const curved = (shape as any)
+    .line()
+    .x((d: {x: any}) => d.x)
+    .y((d: {y: any}) => d.y)
+    .curve(shape.curveBundle.beta(1))([
+    {x: centerX - circleOverR - scale(50), y: CIRCLE_OVER_TOP},
+    {x: centerX - circleOverR, y: CIRCLE_OVER_TOP}, //y 20
+    {
+      x: centerX + circleOverR * Math.cos(-Math.PI / 2 - Math.PI / 4),
+      y: centerY + circleOverR * Math.sin(-Math.PI / 2 - Math.PI / 4),
+    },
+
+    {x: centerX, y: 0},
+
+    {
+      x: centerX + circleOverR * Math.cos(-Math.PI / 2 + Math.PI / 4),
+      y: centerY + circleOverR * Math.sin(-Math.PI / 2 + Math.PI / 4),
+    },
+    {x: centerX + circleOverR, y: CIRCLE_OVER_TOP}, //y 20
+    {x: centerX + circleOverR + scale(50), y: CIRCLE_OVER_TOP},
+  ]);
+
+  return curved;
+};
+
+export const getPathUp = (
+  width: number,
+  iHeight: number,
+  centerWidth = 50,
+  borderTopLeftRight = false,
+  position: 'CENTER' | 'LEFT' | 'RIGHT',
+) => {
+  const height = scale(iHeight);
+  const circleWidth = scale(centerWidth);
+
+  if (borderTopLeftRight && position === 'LEFT') {
+    return `${lineBorderRight(width, height)} ${lineCurved(
+      circleWidth / 1.7,
+      circleWidth,
+    )}`;
+  }
+
+  if (borderTopLeftRight && position === 'RIGHT') {
+    return `${lineBorderLeft(width, height)} ${lineCurved(
+      width - circleWidth * 1.6,
+      circleWidth,
+    )}`;
+  }
+
+  if (borderTopLeftRight && position === 'CENTER') {
+    return `${lineBorder(width, height)} ${lineCurved(
+      width / 2 - circleWidth / 2,
+      circleWidth,
+    )}`;
+  }
+
+  if (position === 'LEFT') {
+    return `${line(width, height)} ${lineCurved(
+      circleWidth / 1.7,
+      circleWidth,
+    )}`;
+  }
+
+  if (position === 'RIGHT') {
+    return `${line(width, height)} ${lineCurved(
+      width - circleWidth * 1.6,
+      circleWidth,
+    )}`;
+  }
+
+  return `${line(width, height)} ${lineCurved(
+    width / 2 - circleWidth / 2,
+    circleWidth,
+  )}`;
+};

package/Application/Components.tsx

@@ -15,7 +15,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {
@@ -29,6 +29,11 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
+import {getAccessibilityID} from './utils';
+
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -37,6 +42,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
   badgeType,
   badgeValue,
+  accessibilityID = '',
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
@@ -64,7 +70,9 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <View style={{width: scaleSize(28)}}>
+    <View
+      {...getAccessibilityID(accessibilityID)}
+      style={{width: scaleSize(28)}}>
       <TouchableOpacity
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
@@ -90,6 +98,7 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
+      {...getAccessibilityID('title_navigation_header')}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -104,7 +113,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   onPressLeftHeader,
   useBorder,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
   useEffect(() => {
@@ -128,7 +137,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
           icon_name: 'back',
         };
         navigator?.maxApi?.showToastDebug?.({
-          appId: context.appId,
+          appId: `auto - ${context.appId}`,
           message: 'service_icon_clicked',
           params,
         });
@@ -166,10 +175,10 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     }
     return true;
   };
-
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
+        accessibilityID="btn_navigation_back"
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
@@ -243,7 +252,10 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text typography="header_default_bold" color={tintColor}>
+        <Text
+          {...getAccessibilityID('title_navigation_header')}
+          typography="header_default_bold"
+          color={tintColor}>
           {title}
         </Text>
         <Text typography="description_default_regular" color={tintColor}>
@@ -293,7 +305,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   preventClose,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const miniContext = useContext(MiniAppContext);
+  const miniContext = useContext<any>(MiniAppContext);
   const [toolConfig, setToolConfig] = useState<any>();
   const {onAction} = toolConfig ?? {};
 
@@ -369,6 +381,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
+          accessibilityID="btn_navigation_pin"
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -386,7 +399,6 @@ const HeaderToolkitAction: React.FC<any> = ({
         />
       );
   };
-
   if (toolConfig) {
     return (
       <View style={styles.headerRightButton}>
@@ -399,11 +411,15 @@ const HeaderToolkitAction: React.FC<any> = ({
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <TouchableOpacity onPress={onMore}>
+          <TouchableOpacity
+            {...getAccessibilityID('btn_navigation_more')}
+            onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity onPress={onClose}>
+          <TouchableOpacity
+            {...getAccessibilityID('btn_navigation_close')}
+            onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"

package/Application/NavigationContainer.tsx

@@ -4,6 +4,7 @@ import {
   NavigationContainer as ReactNavigationContainer,
   NavigationContainerRef,
 } from '@react-navigation/native';
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {createStackNavigator} from '@react-navigation/stack';
 import {DeviceEventEmitter} from 'react-native';
 import StackScreen from './StackScreen';
@@ -11,9 +12,19 @@ import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {LocalizationObject, NavigationContainerProps} from './types';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
+/**
+ * link for deprecated
+ */
+
+console.log(typeof BottomSheetModalProvider);
+
 const Stack = createStackNavigator();
 
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
@@ -22,8 +33,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  initialParams,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
@@ -96,7 +108,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             <Stack.Screen
               name="Stack"
               component={StackScreen}
-              initialParams={{screen}}
+              initialParams={{screen, initialParams}}
               options={{...getStackOptions(), ...options}}
             />
             <Stack.Screen

package/Application/StackScreen.tsx

@@ -1,29 +1,54 @@
-import React, {useContext, useEffect, useLayoutEffect} from 'react';
+import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
+import {Alert, InteractionManager} from 'react-native';
+
+const {
+  ScreenContext,
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const StackScreen: React.FC<ScreenParams> = props => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
-  const context = useContext(MiniAppContext);
+  const startTime = useRef(Date.now());
+  const endTime = useRef(Date.now());
+  const timeLoad = useRef(0);
+  const timeout = useRef<any>();
+
+  const context = useContext<any>(MiniAppContext);
 
-  const {screen: Component, options}: ScreenParams = props.route.params;
+  const {screen: Component, options, initialParams} = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
   const heightHeader = useHeaderHeight();
 
-  const params = {
+  const data = {
     ...props.route.params,
+    ...initialParams,
     navigation,
   };
 
-  delete params.screen;
+  delete data.screen;
+  delete data.initialParams;
+
+  const screenName = Component?.name || Component?.type?.name || '';
 
   /**
    * set options for screen
    */
   useLayoutEffect(() => {
+    const host = (global as any).miniAppApi?.currentHost || {};
+    host.screenName = screenName;
+    InteractionManager.runAfterInteractions(() => {
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_interaction_time ${
+          Date.now() - startTime.current
+        }`,
+      });
+    });
     if (options) {
       navigation.setOptions(options);
     }
@@ -33,9 +58,18 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
+    if (__DEV__) {
+      if (!screenName || screenName === 'screen') {
+        Alert.alert(
+          'Design system',
+          `Unvalidated screen name "${screenName}" !`,
+        );
+      }
+    }
+
     const tracking = {
       ...context,
-      screen_name: Component.name,
+      screen_name: screenName,
     };
 
     const routes = props.navigation.getState()?.routes || [];
@@ -52,8 +86,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
     };
     navigator?.maxApi?.trackEvent?.('service_frame_displayed', params);
     navigator?.maxApi?.showToastDebug?.({
-      appId: context.appId,
-      message: `${Component.name} service_frame_displayed`,
+      appId: `auto - ${context.appId}`,
+      message: `${screenName} service_frame_displayed`,
       params,
     });
 
@@ -65,18 +99,43 @@ const StackScreen: React.FC<ScreenParams> = props => {
       };
       navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
-        message: `${Component.name} service_icon_clicked`,
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} service_icon_clicked`,
         params,
       });
     });
   }, []);
 
   return (
-    <>
-      <Component heightHeader={heightHeader} {...params} />
+    <ScreenContext.Provider
+      value={{
+        appId: context.appId,
+        code: context.code,
+        screenName,
+        autoTracking: (data: any) => {
+          navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
+        },
+        onElementLoad: () => {
+          endTime.current = Date.now();
+          clearTimeout(timeout.current);
+          timeout.current = setTimeout(() => {
+            if (timeLoad.current === 0) {
+              timeLoad.current = endTime.current - startTime.current;
+              navigator?.maxApi?.showToastDebug?.({
+                appId: `auto - ${context.appId}`,
+                message: `${screenName} screen_load_time ${timeLoad.current}`,
+              });
+            }
+          }, 2000);
+        },
+      }}>
+      <Component
+        heightHeader={heightHeader}
+        {...data}
+        onScreenLoad={() => {}}
+      />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
   );
 };
 

package/Application/types.ts

@@ -1,9 +1,9 @@
-import {Animated, FlatListProps, ViewProps} from 'react-native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import Navigator from './Navigator';
+import {Animated, FlatListProps, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
+import Navigator from './Navigator';
 
 type Screen = React.ComponentType<NavigationScreenProps>;
 
@@ -95,6 +95,7 @@ export type NavigationContainerProps = {
   theme: Theme;
   maxApi: any;
   localization?: LocalizationObject;
+  initialParams?: any;
 };
 
 export type NavigationScreenProps = {
@@ -129,6 +130,7 @@ export type NavigationButtonProps = {
   onPress: () => void;
   badgeType?: 'dot' | 'number';
   badgeValue?: number;
+  accessibilityID?: string;
 };
 
 export type PinnedToolType = {
@@ -208,6 +210,13 @@ export type BottomTabProps = {
     tabPress?: any;
     focus?: any;
   };
+  floatingButton?: FloatingButtonProps;
+};
+
+export type FloatingButtonProps = {
+  icon: string | React.ReactNode;
+  label: string;
+  onPress: () => void;
 };
 
 export type AnimatedHeader = {

package/Application/utils.tsx

@@ -12,7 +12,8 @@ import {
 } from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-
+import {Platform} from 'react-native';
+const isIOS = Platform.OS === 'ios';
 /**
  * default options for stack screen
  */
@@ -141,4 +142,63 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions};
+const getAccessibilityID = (
+  key = '',
+  override: string | undefined = undefined,
+) => {
+  if (isIOS) {
+    return {
+      accessible: true,
+      testID: override || key,
+    };
+  } else {
+    return {
+      accessibilityLabel: override || key,
+    };
+  }
+};
+
+const formatComponentName = (word = '') => {
+  const accentsMap = {
+    a: 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
+    A: 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
+    e: 'é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ',
+    E: 'É|È|Ẻ|Ẽ|Ẹ|Ê|Ế|Ề|Ể|Ễ|Ệ',
+    i: 'í|ì|ỉ|ĩ|ị',
+    I: 'Í|Ì|Ỉ|Ĩ|Ị',
+    o: 'ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ',
+    O: 'Ó|Ò|Ỏ|Õ|Ọ|Ô|Ố|Ồ|Ổ|Ỗ|Ộ|Ơ|Ớ|Ờ|Ở|Ỡ|Ợ',
+    u: 'ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự',
+    U: 'Ú|Ù|Ủ|Ũ|Ụ|Ư|Ứ|Ừ|Ử|Ữ|Ự',
+    y: 'ý|ỳ|ỷ|ỹ|ỵ',
+    Y: 'Ý|Ỳ|Ỷ|Ỹ|Ỵ',
+    d: 'đ',
+    D: 'Đ',
+  };
+
+  for (const [nonAccent, accentGroup] of Object.entries(accentsMap)) {
+    const accents = new RegExp(accentGroup, 'g');
+    word = word.replace(accents, nonAccent);
+  }
+
+  word = word.replace(/\s+/g, '_').toLowerCase();
+
+  return word;
+};
+
+const formatNameLength = (name = '') => {
+  let formattedName = name;
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName;
+};
+export {
+  getStackOptions,
+  getDialogOptions,
+  getModalOptions,
+  getOptions,
+  formatComponentName,
+  formatNameLength,
+  getAccessibilityID,
+};

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_xs_bold'}>
+      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
         {formatTitle()}
       </Text>
     </View>