@momo-kits/foundation 0.169.7-beta.3 → 0.169.7-beta.4

package/Application/Components/HeaderExtendHeader.tsx

@@ -23,10 +23,6 @@ const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
 const TOOLKIT_WIDTH = 73;
 
-/**
- * Extended header background: a gradient that collapses on scroll and, with
- * `inputSearchProps`, a full-width search that slides into the bar beside back/toolkit.
- */
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
   animatedValue: AnimatedCompatValue;
@@ -68,15 +64,18 @@ const HeaderExtendHeader: React.FC<{
   const contentLeft = layout.insetLeft + SCREEN_PADDING;
   const contentRight = layout.insetLeft + layout.contentWidth;
   // collapsed on the status bar row, the search stays between its clusters
-  const clearanceLeft = layout.statusBarClearance?.left ?? 0;
-  const clearanceRight = layout.statusBarClearance?.right ?? 0;
-  const collapsedLeft = layout.insetLeft + leftPosition + clearanceLeft;
-  const collapsedRight = contentRight - clearanceRight - headerRightWidth;
+  const collapsedLeft =
+    layout.insetLeft + leftPosition + (layout.statusBarClearance?.left ?? 0);
+  const collapsedRight = contentRight - (layout.statusBarClearance?.right ?? 0);
   const searchWidth = layout.contentWidth - SCREEN_PADDING * 2;
-  const collapsedSearchWidth = collapsedRight - collapsedLeft - SCREEN_PADDING;
+  const collapsedSearchWidth =
+    collapsedRight - collapsedLeft - SCREEN_PADDING - headerRightWidth;
   // a row taller than barHeight (iPhone Duo) centers the collapsed search on the title
-  const titleRowHeight = layout.headerHeight - layout.headerStatusBarHeight;
-  const collapsedRaise = (titleRowHeight - HeaderMetrics.barHeight) / 2;
+  const collapsedRaise =
+    (layout.headerHeight -
+      layout.headerStatusBarHeight -
+      HeaderMetrics.barHeight) /
+    2;
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {

package/Application/Components/HeaderLeft.tsx

@@ -10,8 +10,7 @@ import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
 import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 
 /**
- * Header back button, also bound to the Android hardware back. `preventBack`
- * confirms in a popup first; the iPhone Duo layouts use the 48pt side bar button.
+ * default header left used for nav
  */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,

package/Application/Components/HeaderRight.tsx

@@ -9,8 +9,7 @@ import { HeaderToolkitAction } from './HeaderToolkitAction';
 import { styles } from './HeaderRight.styles';
 
 /**
- * Header right slot: a custom `headerRight` render function, the onboarding skip
- * button, or the toolkit (stacked vertically in the floating iPhone Duo side bar).
+ * main component for header right
  */
 const HeaderRight: React.FC<any> = props => {
   const { translate } = useContext(ApplicationContext);

package/Application/Components/HeaderTitle.shared.ts

@@ -4,10 +4,6 @@ import { Spacing } from '../../Consts';
 import { isWhiteListDesignSystem } from '../utils';
 import { useScreenLayout } from '../../Layout';
 
-/**
- * Header title font: MoMoTrustDisplay for design-system whitelisted mini apps,
- * SFProText otherwise.
- */
 const useHeaderFontFamily = (): string => {
   const context = useContext<any>(MiniAppContext);
   return isWhiteListDesignSystem(context) ? 'MoMoTrustDisplay' : 'SFProText';
@@ -24,22 +20,24 @@ const HEADER_ACTIONS_WIDTH = 172;
 const STATUS_BAR_ROW_ACTIONS_EXTRA = 55;
 
 /**
- * Max header title width. The iPhone Duo side bar takes back and toolkit out of
- * the bar, so the title gets the content width; otherwise it shares the bar with them.
+ * max title width, the iPhone Duo side bar takes back and toolkit out of the bar
  */
 const useTitleMaxWidth = () => {
-  const layout = useScreenLayout();
-  const { width, contentWidth, sideBar, statusBarClearance } = layout;
+  const { width, contentWidth, sideBar, statusBarClearance } =
+    useScreenLayout();
   let clearance = 0;
-  let rowActionsExtra = 0;
   if (statusBarClearance) {
     clearance = statusBarClearance.left + statusBarClearance.right;
-    rowActionsExtra = STATUS_BAR_ROW_ACTIONS_EXTRA;
   }
   if (sideBar) {
     return contentWidth - Spacing.M * 2 - clearance;
   }
-  return width - HEADER_ACTIONS_WIDTH - rowActionsExtra - clearance;
+  return (
+    width -
+    HEADER_ACTIONS_WIDTH -
+    (statusBarClearance ? STATUS_BAR_ROW_ACTIONS_EXTRA : 0) -
+    clearance
+  );
 };
 
 export { useHeaderFontFamily, HEADER_ACTIONS_WIDTH, useTitleMaxWidth };

package/Application/Components/HeaderTitle.tsx

@@ -33,8 +33,7 @@ type HeaderTitleExtraProps = {
 };
 
 /**
- * Default navigation header title. With `animatedValue` its opacity follows the
- * scroll through `interpolate` (0 to 1 over the first 200pt by default).
+ * default header title used for nav
  */
 const HeaderTitle: React.FC<
   HeaderTitleExtraProps & { [key: string]: any }
@@ -101,8 +100,8 @@ const HeaderTitle: React.FC<
 };
 
 /**
- * Header title picked by `type` (user, location or journey) with `data` as its
- * props; an empty view for an unknown type.
+ * Title custom for header
+ * @constructor
  */
 const TitleCustom: React.FC<any> = ({ type, data, ...props }) => {
   switch (type) {

package/Application/Components/HeaderToolkitAction.tsx

@@ -14,8 +14,7 @@ const CLOSE_ICON = '16_navigation_close_circle';
 const HOME_ICON = '16_basic_home';
 
 /**
- * Header toolkit: optional shortcut plus the help center / close capsule. When
- * `vertical` (iPhone Duo side bar) it reports its height and may fold into one button.
+ * Header toolkit action
  */
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
@@ -28,9 +27,8 @@ const HeaderToolkitAction: React.FC<any> = ({
   vertical = false,
 }) => {
   const context = useContext<any>(MiniAppContext);
-  const compression = useDuoBarCompression();
-  const { toolbarCompressed, toolbarHidden } = compression;
-  const { expandToolbar, setToolbarHeight } = compression;
+  const { toolbarCompressed, toolbarHidden, expandToolbar, setToolbarHeight } =
+    useDuoBarCompression();
   const { statusBarClearance } = useScreenLayout();
   const {
     isLoading,
@@ -58,22 +56,18 @@ const HeaderToolkitAction: React.FC<any> = ({
 
   const useHelpCenter = context.appId !== 'vn.momo.helpcenter';
   const closeIcon = useCloseIcon ? CLOSE_ICON : HOME_ICON;
-  let toolkitWidthStyle: ViewStyle = styles.toolkitNarrow;
-  if (useHelpCenter) {
-    toolkitWidthStyle = styles.toolkitWide;
-  }
 
   const groupCount = useHelpCenter ? 2 : 1;
   let capsuleHeight = DuoMetrics.controlSize;
   if (groupCount > 1) {
     capsuleHeight = groupCount * DuoMetrics.itemPitch;
   }
-  const backSlotHeight = DuoMetrics.controlSize + Spacing.M;
-  let shortcutHeight = 0;
-  if (useShortcut) {
-    shortcutHeight = DuoMetrics.controlSize + Spacing.M;
-  }
-  const fullToolbarHeight = backSlotHeight + shortcutHeight + capsuleHeight;
+  // Back slot, the optional shortcut, then the help/home capsule
+  const fullToolbarHeight =
+    DuoMetrics.controlSize +
+    Spacing.M +
+    (useShortcut ? DuoMetrics.controlSize + Spacing.M : 0) +
+    capsuleHeight;
 
   useEffect(() => {
     if (vertical) {
@@ -86,7 +80,8 @@ const HeaderToolkitAction: React.FC<any> = ({
     return null;
   }
 
-  // HIG "Toolbar compressed": a menu icon (not the "more" one) that expands the toolbar
+  // HIG "Toolbar compressed": tools fold into one button; tapping it expands the
+  // toolbar and compresses the tab bar instead. Not the useMore icon, to tell them apart
   if (vertical && toolbarCompressed) {
     return (
       <SideBarButton
@@ -175,7 +170,15 @@ const HeaderToolkitAction: React.FC<any> = ({
           showBadge={showBadge}
         />
       )}
-      <View style={[styles.toolkitContainer, buttonStyle, toolkitWidthStyle]}>
+      <View
+        style={[
+          styles.toolkitContainer,
+          buttonStyle,
+          context.appId !== 'vn.momo.helpcenter'
+            ? styles.toolkitWide
+            : styles.toolkitNarrow,
+        ]}
+      >
         {useHelpCenter && (
           <>
             <TouchableOpacity

package/Application/Components/NavigationButton.tsx

@@ -7,8 +7,7 @@ import { Icon } from '../../Icon';
 import { BadgeDot } from '../../Badge';
 
 /**
- * Round 28pt icon button of the header (back, shortcut) with an optional badge
- * dot; switches to a dark fill under a white tint so the icon stays readable.
+ * default navigation button used header nav
  */
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,

package/Application/Components/SearchHeader.tsx

@@ -10,10 +10,6 @@ import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
 import { DuoMetrics } from '../../Layout/utils';
 
-/**
- * Header search bar whose fill turns from surface to default once scrolled, with
- * a cancel button that goes back (or dismisses the mini app) unless `renderButtons`.
- */
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
     {
@@ -40,9 +36,9 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     if (layout.sideBar) {
       searchMaxWidth = layout.contentWidth - Spacing.M * 2 - headerRightWidth;
     }
-    const clearance = layout.statusBarClearance;
-    if (clearance) {
-      searchMaxWidth -= clearance.left + clearance.right;
+    if (layout.statusBarClearance) {
+      searchMaxWidth -=
+        layout.statusBarClearance.left + layout.statusBarClearance.right;
     }
 
     const backgroundStyle = useAnimatedStyle(() => {
@@ -80,15 +76,6 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
 
     const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-    let buttons: React.ReactNode = (
-      <TouchableOpacity onPress={goBackSafe} style={styles.searchAction}>
-        <Text typography={'action_default_bold'}>{buttonText}</Text>
-      </TouchableOpacity>
-    );
-    if (typeof renderButtons === 'function') {
-      buttons = renderButtons();
-    }
-
     return (
       <View
         style={[styles.container, showBaseLineDebug && styles.debugBaseLine]}
@@ -110,7 +97,13 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
             />
           </Animated.View>
         </View>
-        {buttons}
+        {renderButtons && typeof renderButtons === 'function' ? (
+          renderButtons()
+        ) : (
+          <TouchableOpacity onPress={goBackSafe} style={styles.searchAction}>
+            <Text typography={'action_default_bold'}>{buttonText}</Text>
+          </TouchableOpacity>
+        )}
       </View>
     );
   },

package/Application/Components/TitleJourney.tsx

@@ -14,8 +14,8 @@ import {
 } from './HeaderTitle.shared';
 
 /**
- * Header title for a journey: `start` and `end` around an icon, with an optional
- * description below; a shimmer while `isLoading`.
+ * Header user title
+ * @constructor
  */
 const TitleJourney: React.FC<TitleJourneyProps> = ({
   start,

package/Application/Components/TitleLocation.tsx

@@ -9,8 +9,8 @@ import { styles } from './HeaderTitle.styles';
 import { useHeaderFontFamily, useTitleMaxWidth } from './HeaderTitle.shared';
 
 /**
- * Header title showing a location with a dropdown chevron and an optional
- * description above it; a shimmer while `isLoading`.
+ * Header user title
+ * @constructor
  */
 const TitleLocation: React.FC<TitleLocationProps> = ({
   tintColor,

package/Application/Components/TitleUser.tsx

@@ -10,8 +10,8 @@ import { styles } from './HeaderTitle.styles';
 import { useHeaderFontFamily, useTitleMaxWidth } from './HeaderTitle.shared';
 
 /**
- * Header title for a user or group: avatar (1 to 4 images, a `+N` stack, or name
- * initials), title with verified icons and subtitle; a shimmer while `isLoading`.
+ * Header user title
+ * @constructor
  */
 const TitleUser: React.FC<TitleUserProps> = ({
   title,

package/Application/Components/useToolkitActions.tsx

@@ -15,8 +15,7 @@ type ToolkitActionsParams = {
 };
 
 /**
- * State and handlers behind the header toolkit: the favorite shortcut (kept in sync
- * with the home), single tool or "more" shortcut, help center and close.
+ * state and handlers behind the header toolkit buttons
  */
 const useToolkitActions = ({
   preventClose,
@@ -32,15 +31,20 @@ const useToolkitActions = ({
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  const checkAppIsFavorite = useCallback(() => {
-    return navigator?.maxApi?.dispatchFunction?.(
-      'isFavoriteApp',
-      { code: context?.code },
-      (result: boolean) => {
-        setIsFavorite(result);
-      },
-    );
-  }, [context?.code, navigator?.maxApi]);
+  /**
+   * check app is favorite
+   */
+  const checkAppIsFavorite = useCallback(
+    () =>
+      navigator?.maxApi?.dispatchFunction?.(
+        'isFavoriteApp',
+        { code: context?.code },
+        (result: boolean) => {
+          setIsFavorite(result);
+        },
+      ),
+    [context?.code, navigator?.maxApi],
+  );
 
   useEffect(() => {
     if (useShortcut) {
@@ -71,6 +75,9 @@ const useToolkitActions = ({
     }
   };
 
+  /**
+   * close navigation container
+   */
   const onClose = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
@@ -100,6 +107,9 @@ const useToolkitActions = ({
     }
   };
 
+  /**
+   * on press shortcut
+   */
   const onPressShortcut = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     const expected = !isFavorite;
@@ -129,6 +139,9 @@ const useToolkitActions = ({
     }, 1000);
   };
 
+  /**
+   * on press help center
+   */
   const onPressHelpCenter = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
@@ -141,6 +154,9 @@ const useToolkitActions = ({
     navigator?.maxApi?.dispatchFunction?.('showHelpCenter', context);
   };
 
+  /**
+   * on press icon more
+   */
   const onPressIconMore = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
@@ -184,10 +200,9 @@ const useToolkitActions = ({
     iconShortcut = 'navigation_more_icon';
     shortcutOnPress = onPressIconMore;
   } else if (isHaveOneTool) {
-    const singleToolGroup = tools.find(
+    const singleTool = tools.find(
       (group: ToolGroup) => group?.items?.length === 1,
-    );
-    const singleTool = singleToolGroup?.items[0];
+    )?.items[0];
     iconShortcut = singleTool?.icon;
     shortcutOnPress = () => {
       singleTool?.onPress?.();
@@ -201,9 +216,9 @@ const useToolkitActions = ({
     };
   }
 
-  const showBadge = tools.some((group: ToolGroup) => {
-    return group?.items?.some?.(tool => tool?.showBadge);
-  });
+  const showBadge = tools.some((group: ToolGroup) =>
+    group?.items?.some?.(tool => tool?.showBadge),
+  );
 
   return {
     isLoading,

package/Application/KitAdoption/AdoptionBadge.tsx

@@ -0,0 +1,119 @@
+import React, { useState, useSyncExternalStore } from 'react';
+import { Share, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Colors, Spacing } from '../../Consts';
+import { Text } from '../../Text';
+import { adoptionStore } from './AdoptionStore';
+import { styles } from './styles';
+import type { ScreenSnapshot } from './types';
+
+/** Subscribes a React listener to the adoption store. Stable identity for useSyncExternalStore. */
+const subscribeToStore = (listener: () => void): (() => void) =>
+  adoptionStore.subscribe(listener);
+
+const getLatestSnapshot = (): ScreenSnapshot | undefined =>
+  adoptionStore.getLatest();
+
+const getScreenCount = (): number => adoptionStore.getAll().length;
+
+/** Share of classified nodes that are app-authored kit: K / (K + R + O). */
+const getAdoptionRate = (snapshot: ScreenSnapshot): number => {
+  const { K, R, O } = snapshot.counts;
+  const total = K + R + O;
+  return total === 0 ? 0 : K / total;
+};
+
+const formatSummary = (snapshot: ScreenSnapshot | undefined): string => {
+  if (!snapshot) return 'Kit adoption: chưa có dữ liệu';
+  const { K, R, O } = snapshot.counts;
+  const percent = Math.round(getAdoptionRate(snapshot) * 100);
+  return `Kit ${percent}% · K${K} R${R} O${O}`;
+};
+
+const handleRemeasure = (): void => {
+  adoptionStore.remeasureActive();
+};
+
+const handleShare = (): void => {
+  Share.share({ message: JSON.stringify(adoptionStore.getAll()) }).catch(
+    () => undefined,
+  );
+};
+
+const handleClear = (): void => {
+  adoptionStore.clear();
+};
+
+/**
+ * Dev-only floating badge showing the latest screen's kit adoption. Tap to
+ * expand actions (re-measure, share JSON, clear). Renders nothing in release builds.
+ */
+const AdoptionBadge: React.FC = () => {
+  const insets = useSafeAreaInsets();
+  const [isExpanded, setExpanded] = useState(false);
+  const latest = useSyncExternalStore(subscribeToStore, getLatestSnapshot);
+  const screenCount = useSyncExternalStore(subscribeToStore, getScreenCount);
+
+  if (!__DEV__) return null;
+
+  const handleToggle = (): void => setExpanded(prev => !prev);
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[styles.wrapper, { top: insets.top + Spacing.S }]}
+    >
+      <TouchableOpacity
+        accessibilityRole="button"
+        onPress={handleToggle}
+        style={styles.badge}
+      >
+        <Text typography="label_xs_medium" color={Colors.black_01}>
+          {formatSummary(latest)}
+        </Text>
+        {latest ? (
+          <Text typography="description_xs_regular" color={Colors.black_01}>
+            {latest.screen_name}
+          </Text>
+        ) : null}
+      </TouchableOpacity>
+      {isExpanded ? (
+        <View style={styles.panel}>
+          <Text typography="label_xs_medium" color={Colors.black_17}>
+            {`Đã đo ${screenCount} màn hình`}
+          </Text>
+          <TouchableOpacity
+            accessibilityRole="button"
+            onPress={handleRemeasure}
+            style={styles.action}
+          >
+            <Text typography="label_xs_medium" color={Colors.blue_03}>
+              Đo lại
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            accessibilityRole="button"
+            onPress={handleShare}
+            style={styles.action}
+          >
+            <Text typography="label_xs_medium" color={Colors.blue_03}>
+              Share JSON
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            accessibilityRole="button"
+            onPress={handleClear}
+            style={styles.actionOutline}
+          >
+            <Text typography="label_xs_medium" color={Colors.black_17}>
+              Xoá
+            </Text>
+          </TouchableOpacity>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+export { AdoptionBadge };