@momo-kits/foundation 0.169.5 → 0.169.6-beta.1

package/Application/ModalScreen.tsx

@@ -27,10 +27,6 @@ import { isIPhoneDuo } from './utils';
 import { useModalLayout } from './modalLayout';
 import { scheduleOnRN } from 'react-native-worklets';
 
-/**
- * Screen of the `Modal` route: a bottom sheet when pushed by
- * `showBottomSheet`, otherwise a centered popup.
- */
 const ModalScreen: React.FC<any> = props => {
   if (props.route?.params?.isBottomSheet) {
     return <BottomSheet {...props} />;
@@ -38,10 +34,6 @@ const ModalScreen: React.FC<any> = props => {
   return <Modal {...props} />;
 };
 
-/**
- * Centered popup that fades and scales in over a scrim. On foldables it is
- * centered in the modal placement area, at most a popup wide.
- */
 const Modal: React.FC<ModalParams> = props => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -58,7 +50,9 @@ const Modal: React.FC<ModalParams> = props => {
   const isDuo = isIPhoneDuo();
   const { isFoldable, placement, popup, scrimOpacity } = useModalLayout();
 
-  // Auto-tracks the popup as displayed on the current screen.
+  /**
+   * Fire auto_popup_displayed tracking event on mount
+   */
   useEffect(() => {
     navigator?.maxApi?.getDataObserver?.('current_screen', (curScreen: any) => {
       context.autoTracking({

package/Application/Navigation.ts

@@ -11,10 +11,6 @@ export const WHITE_LIST = [
   'vn.momo.ekyc',
 ];
 
-/**
- * Screen-level navigation handle given to features; `setOptions` enforces the
- * design system's header rules before applying React Navigation options.
- */
 class Navigation {
   instance: NavigationProp<any>;
   context: any;
@@ -25,33 +21,39 @@ class Navigation {
   }
 
   /**
-   * Drops header overrides the design system forbids: any `headerLeft`, and
-   * render-function `headerRight`/`headerTitle` outside `WHITE_LIST` apps.
+   * navigation options filter by design system rule
+   * @param params
    */
   private filterParams = (params: NavigationOptions) => {
-    const isWhiteListed = WHITE_LIST.includes(this.context?.appId);
-    const rightType = typeof params.headerRight;
-    const titleType = typeof params.headerTitle;
-    const isTitleRenderer = titleType !== 'string' && titleType !== 'object';
-
     if (params.headerLeft) {
       console.warn('headerLeft not allow override render by design system!');
       delete params.headerLeft;
     }
 
-    if (params.headerRight && rightType !== 'object' && !isWhiteListed) {
+    if (
+      params.headerRight &&
+      typeof params.headerRight !== 'object' &&
+      !WHITE_LIST.includes(this.context?.appId)
+    ) {
       console.warn('headerRight not allow type func render by design system!');
       delete params.headerRight;
     }
 
-    if (params.headerTitle && isTitleRenderer && !isWhiteListed) {
+    if (
+      params.headerTitle &&
+      !['string', 'object'].includes(typeof params.headerTitle) &&
+      !WHITE_LIST.includes(this.context?.appId)
+    ) {
       console.warn('headerTitle not allow type func render by design system!');
       delete params.headerTitle;
     }
     return params;
   };
 
-  /** Applies kit `NavigationOptions` to the screen after `filterParams`. */
+  /**
+   * navigation setOptions support props NavigationOptions base on react-navigation options
+   * @param params
+   */
   setOptions = (params: NavigationOptions) => {
     const options = getOptions(this.filterParams(params));
     this.instance.setOptions(options as StackNavigationOptions);

package/Application/NavigationContainer.tsx

@@ -33,10 +33,6 @@ import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
 
 const Stack = createStackNavigator();
 
-/**
- * Root of a mini app: safe area, reserved regions and the merged mini app
- * context around the kit's navigator.
- */
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme = defaultTheme,
@@ -96,10 +92,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   );
 };
 
-/**
- * Stack navigator with its `Stack`, `Dialog` and `Modal` routes, under an
- * `ApplicationContext` carrying the navigator, themed fonts and `translate`.
- */
 const Navigation: React.FC<any> = ({
   screen,
   theme = defaultTheme,
@@ -117,10 +109,9 @@ const Navigation: React.FC<any> = ({
   const syncCanGoBack = useNativeCanGoBack();
   const isWhiteList = isWhiteListDesignSystem(context);
   const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
-  let navigationFontFamily = 'SFProText';
-  if (isWhiteList) {
-    navigationFontFamily = 'MomoTrustSans-Regular';
-  }
+  const navigationFontFamily = isWhiteList
+    ? 'MomoTrustSans-Regular'
+    : 'SFProText';
   let headerBackground = context?.designSystemConfig?.config?.headerBar;
   let headerGradient = theme.colors?.gradient;
 
@@ -131,9 +122,15 @@ const Navigation: React.FC<any> = ({
     headerGradient = context?.designSystemConfig?.config?.headerGradient;
   }
 
+  /**
+   * inject data for navigator
+   */
   navigator.current.maxApi = maxApi;
 
-  /** Text for a localization key, or the current-language side of `{ vi, en }`. */
+  /**
+   * translate context method
+   * @param data
+   */
   const translate = (data?: string | { vi: string; en: string }) => {
     if (data && typeof data !== 'string') {
       return localize?.translateData(data);
@@ -231,12 +228,12 @@ const Navigation: React.FC<any> = ({
                   backgroundColor: theme.colors.background.default,
                 },
                 headerLeft: (props: any) => <HeaderLeft {...props} floating />,
-                headerBackground: (props: any) => {
-                  return <HeaderBackground {...props} />;
-                },
-                headerRight: (props: any) => {
-                  return <HeaderRight {...props} floating />;
-                },
+                headerBackground: (props: any) => (
+                  <HeaderBackground {...props} />
+                ),
+                headerRight: (props: any) => (
+                  <HeaderRight {...props} floating />
+                ),
                 headerTintColor: Colors.black_17,
                 ...TransitionPresets.ModalTransition,
               }}

package/Application/Navigator.ts

@@ -1,10 +1,6 @@
 import {CommonActions, StackActions} from '@react-navigation/native';
 import {BottomSheetParams, ModalParams, ScreenParams} from './types';
 
-/**
- * Imperative navigation API exposed to features through `ApplicationContext`.
- * Every action is a no-op until the container reports ready.
- */
 class Navigator {
   ref?: any;
   isReady?: any;
@@ -18,28 +14,40 @@ class Navigator {
     this.isWidget = isWidget;
   }
 
-  /** Pushes a new stack screen. */
+  /**
+   * push new stack screen
+   * @param params
+   */
   push = (params: ScreenParams) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(StackActions.push('Stack', params));
     }
   };
 
-  /** Replaces the current screen with a new stack screen. */
+  /**
+   * replace current screen with new screen
+   * @param params
+   */
   replace = (params: ScreenParams) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(StackActions.replace('Stack', params));
     }
   };
 
-  /** Pops `count` screens, 1 by default. */
+  /**
+   * pop to dismiss a screen
+   * @param count
+   */
   pop = (count?: number) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(StackActions.pop(count ?? 1));
     }
   };
 
-  /** Presents a screen as a dialog (slides up from the bottom on iOS). */
+  /**
+   * present a new screen, show from bottom iOS
+   * @param params
+   */
   present = (params: ScreenParams) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(StackActions.push('Dialog', params));
@@ -47,8 +55,9 @@ class Navigator {
   };
 
   /**
-   * Shows a modal popup; inside a widget it always uses the native modal.
-   * Failures are reported through `onError` instead of throwing.
+   * show a modal popup
+   * @param params
+   * @param onError
    */
   showModal = (params: ModalParams, onError?: (error: string) => void) => {
     try {
@@ -67,7 +76,11 @@ class Navigator {
     }
   };
 
-  /** Shows a bottom sheet through the modal route; failures go to `onError`. */
+  /**
+   * show a bottom sheet
+   * @param params
+   * @param onError
+   */
   showBottomSheet = (
     params: BottomSheetParams,
     onError?: (error: string) => void
@@ -89,21 +102,31 @@ class Navigator {
     }
   };
 
-  /** Pops back to the first screen of the stack. */
+  /**
+   * pop all screen route
+   */
   popToTop = () => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(StackActions.popToTop());
     }
   };
 
-  /** Navigates to a route by name; meant for bottom tab routes only. */
+  /**
+   * navigate route name bottom tab only
+   * @param name
+   */
   navigate = (name: string) => {
     if (this.isReady.current) {
-      this.ref.current?.dispatch?.(CommonActions.navigate(name));
+      this.ref.current?.dispatch?.(
+        CommonActions.navigate(name)
+      );
     }
   };
 
-  /** Resets the flow to a single new stack screen. */
+  /**
+   * reset a navigation flow with new screen
+   * @param params
+   */
   reset = (params: ScreenParams) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(
@@ -121,21 +144,26 @@ class Navigator {
     }
   };
 
-  /** Sets the payload the header passes to `maxApi.dismiss` on close. */
+  /**
+   * dismiss a feature data
+   * @param data
+   */
   setDismissData = (data: any) => {
     this.dismissData = data;
   };
 
   /**
-   * No-op placeholder; `NavigationContainer` and `WidgetContainer` replace it
-   * with their context state setter.
+   * set app context using for features of kit
+   * @param context
    */
-  setCurrentContext = (_context: {
+  setCurrentContext = (context: {
     code?: string;
     name?: {vi: string; en: string};
     description?: {vi: string; en: string};
     icon?: string;
-  }) => {};
+  }) => {
+    console.log(context);
+  };
 }
 
 export default Navigator;

package/Application/StackScreen.tracking.ts

@@ -8,17 +8,15 @@ type ScreenTrackingDeps = {
   screenName: string;
 };
 
-/**
- * Auto-tracking reporters of a stack screen. Each event fires at most once per
- * screen, guarded by the `release*` flags on `tracking.current`.
- */
 export const createScreenTracking = ({
   tracking,
   context,
   navigator,
   screenName,
 }: ScreenTrackingDeps) => {
-  /** Reports the screen load time. */
+  /**
+   * tracking for screen load
+   */
   const onScreenLoad = () => {
     if (!tracking.current?.releaseLoad) {
       let timeLoad = tracking.current.timeLoad;
@@ -44,22 +42,29 @@ export const createScreenTracking = ({
       );
       tracking.current.releaseLoad = true;
 
+      /**
+       * debug
+       */
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
         message: `${screenName} screen_load_time ${timeLoad}`,
         type: 'ERROR',
       });
-      const lastChildren = tracking.current.lastElement?.children?.current;
-      if (__DEV__ && lastChildren?.length > 0) {
+      if (
+        __DEV__ &&
+        tracking.current.lastElement?.children?.current?.length > 0
+      ) {
         Alert.alert(
           `${screenName}- load ${timeLoad}ms`,
-          JSON.stringify(lastChildren),
+          JSON.stringify(tracking.current.lastElement?.children?.current),
         );
       }
     }
   };
 
-  /** Reports the time until the screen became interactive. */
+  /**
+   * tracking for screen load
+   */
   const onScreenInteraction = () => {
     if (!tracking.current?.releaseInteraction) {
       let timeLoad = tracking.current.timeLoad;
@@ -87,6 +92,9 @@ export const createScreenTracking = ({
       );
       tracking.current.releaseInteraction = true;
 
+      /**
+       * debug toast
+       */
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
         message: `${screenName} screen_interaction_time ${tracking.current.timeInteraction}`,
@@ -95,7 +103,9 @@ export const createScreenTracking = ({
     }
   };
 
-  /** Reports the user's first interaction with the screen. */
+  /**
+   * tracking for first interaction by user
+   */
   const onFirstInteraction = (action: string) => {
     if (!tracking.current?.releaseUserInteraction) {
       const timeLoad = tracking.current.endTime - tracking.current.startTime;
@@ -109,6 +119,9 @@ export const createScreenTracking = ({
       });
       tracking.current.releaseUserInteraction = true;
 
+      /**
+       * debug
+       */
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
         message: `${screenName} user_interaction ${timeLoad}`,
@@ -117,7 +130,9 @@ export const createScreenTracking = ({
     }
   };
 
-  /** Reports how long the skeleton loading state lasted. */
+  /**
+   * tracking for loading screen
+   */
   const onScreenLoading = () => {
     const start = tracking.current.timeStartLoading;
     const end = tracking.current.timeEndLoading;

package/Application/StackScreen.tsx

@@ -12,8 +12,9 @@ import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
 /**
- * Hosts a feature screen in the stack: applies its header options, provides
- * `ScreenContext` and reports navigation, load and interaction tracking.
+ * container for stack screen
+ * @param props
+ * @constructor
  */
 const StackScreen: React.FC<any> = props => {
   const { navigator } = useContext(ApplicationContext);
@@ -63,12 +64,18 @@ const StackScreen: React.FC<any> = props => {
 
   const screenName = Component?.name || Component?.type?.name || 'Invalid';
 
+  /**
+   * set options for screen
+   */
   useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);
     }
   }, [navigation, options]);
 
+  /**
+   * tracking for screen
+   */
   useEffect(() => {
     let focusScreen: any;
     let onFocusApp: any;
@@ -142,7 +149,6 @@ const StackScreen: React.FC<any> = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  /** Reports a navigation to this screen: `back` if it was shown before. */
   const onScreenNavigated = (pre: string, current: string) => {
     if (!isBackgroundToForeground) {
       const item: any = {
@@ -160,6 +166,9 @@ const StackScreen: React.FC<any> = props => {
 
       tracking.current.mounted = true;
 
+      /**
+       * debug toast
+       */
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
         message: `${screenName} screen_navigated`,
@@ -181,7 +190,9 @@ const StackScreen: React.FC<any> = props => {
         screenName,
         bottomTab: !!bottomTab,
         onElementLoad: (item: any) => {
-          // Widgets record their own load span and don't end the screen load.
+          /**
+           * widget handle
+           */
           if (item?.componentName === 'Widget') {
             const index = widgets.current.findIndex(
               (element: any) => element.componentId === item.componentId,
@@ -205,25 +216,35 @@ const StackScreen: React.FC<any> = props => {
             return;
           }
 
+          /**
+           * tracking for element screen load
+           */
           clearTimeout(tracking.current.timeoutLoad);
           tracking.current.endTime = Date.now();
           tracking.current.timeoutInteraction?.cancel?.();
           tracking.current.timeoutInteraction = runAfterInteractions(() => {
-            const elapsed = Date.now() - tracking.current.startTime;
-            tracking.current.timeInteraction = elapsed;
+            tracking.current.timeInteraction =
+              Date.now() - tracking.current.startTime;
           });
 
+          /**
+           * support for debug last element
+           */
           if (item?.componentName) {
             tracking.current.lastElement = item;
           }
 
-          // A user interaction settles load and interaction tracking at once.
+          /**
+           * for stop tracking when user interaction
+           */
           if (item?.interaction) {
             onScreenLoad();
             onScreenInteraction();
             onFirstInteraction(item?.action);
           }
-          // Reports once no element has loaded for 2s.
+          /**
+           * timeout for handle tracking screen
+           */
           tracking.current.timeoutLoad = setTimeout(() => {
             const time = tracking.current.endTime - tracking.current.startTime;
             tracking.current.widgets = widgets.current;
@@ -241,10 +262,16 @@ const StackScreen: React.FC<any> = props => {
             tracking.current.timeStartLoading = Date.now();
           }
 
+          /**
+           * tracking for loading screen
+           */
           if (!loading) {
             tracking.current.timeEndLoading = Date.now();
           }
 
+          /**
+           * timeout for handle tracking screen
+           */
           clearTimeout(tracking.current.timeoutLoading);
           tracking.current.timeoutLoading = setTimeout(() => {
             onScreenLoading();

package/Application/TooltipPortal.tsx

@@ -21,14 +21,10 @@ const TooltipPortalContext = createContext<TooltipPortalContextValue | null>(
   null,
 );
 
-/**
- * Registry of tooltip contents that `TooltipPortalHost` renders in one layer
- * above the screen, so tooltips aren't clipped by their anchor's parents.
- */
 export const TooltipPortalProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
-  // The ref map updates synchronously; the reducer only triggers re-renders.
+  // Use ref for synchronous updates + reducer for manual re-renders
   const portalsRef = useRef<Map<string, ReactNode>>(new Map());
   const hostRef = useRef<View>(null);
   const [updateCounter, forceUpdate] = useReducer((x: number) => x + 1, 0);
@@ -36,15 +32,16 @@ export const TooltipPortalProvider: React.FC<{ children: ReactNode }> = ({
 
   const register = useCallback((id: string, content: ReactNode) => {
     portalsRef.current.set(id, content);
-    forceUpdate();
+    forceUpdate(); // Trigger re-render to show new content
   }, []);
 
   const unregister = useCallback((id: string, immediate = false) => {
     const hasItem = portalsRef.current.has(id);
-    if (!hasItem) return;
+    if (!hasItem) return; // Already removed
 
     portalsRef.current.delete(id);
 
+    // Clear any pending updates
     if (pendingUpdateRef.current) {
       clearTimeout(pendingUpdateRef.current);
       pendingUpdateRef.current = null;
@@ -75,7 +72,6 @@ export const TooltipPortalProvider: React.FC<{ children: ReactNode }> = ({
   );
 };
 
-/** Full-screen, touch-through layer that renders every registered tooltip. */
 export const TooltipPortalHost: React.FC = () => {
   const context = useContext(TooltipPortalContext);
 
@@ -99,10 +95,6 @@ export const TooltipPortalHost: React.FC = () => {
   );
 };
 
-/**
- * Tooltip portal API. Outside a provider it returns no-ops (and warns in dev)
- * so a tooltip degrades instead of crashing.
- */
 export const useTooltipPortal = () => {
   const context = useContext(TooltipPortalContext);
 
@@ -112,6 +104,7 @@ export const useTooltipPortal = () => {
         'useTooltipPortal must be used within TooltipPortalProvider. Tooltips may not appear correctly.',
       );
     }
+    // Return no-op functions if context is missing
     return {
       register: () => { },
       unregister: () => { },

package/Application/WidgetContainer.tsx

@@ -18,7 +18,6 @@ import { StyleSheet, View } from 'react-native';
 
 const Stack = createStackNavigator();
 
-/** Widget screen that reports its laid-out height to size the container. */
 const WidgetContent: React.FC = ({ route }: any) => {
   const Component = route?.params?.screen;
   return (
@@ -32,10 +31,6 @@ const WidgetContent: React.FC = ({ route }: any) => {
   );
 };
 
-/**
- * Root of an embedded widget: its own navigator with the widget screen and the
- * `Modal` route, sized to the widget's content height.
- */
 const WidgetContainer: React.FC<WidgetContainerProps> = ({
   widget,
   theme = defaultTheme,
@@ -66,9 +61,11 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
     headerGradient = context?.designConfig?.headerGradient;
   }
 
+  /**
+   * inject data for navigator
+   */
   navigator.current.maxApi = maxApi;
 
-  /** Text for a localization key, or the current-language side of `{ vi, en }`. */
   const translate = (data?: string | { vi: string; en: string }) => {
     if (data && typeof data !== 'string') {
       return localize?.translateData(data);
@@ -84,10 +81,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
   };
   const isWhiteList = isWhiteListDesignSystem(mergedContext);
   const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
-  let navigationFontFamily = 'SFProText';
-  if (isWhiteList) {
-    navigationFontFamily = 'MomoTrustSans-Regular';
-  }
+  const navigationFontFamily = isWhiteList ? 'MomoTrustSans-Regular' : 'SFProText';
 
   return (
     <View style={[styles.container, { height: height ?? '100%' }]}>