@momo-kits/foundation 0.169.4-beta.4 → 0.169.4-beta.6

package/Application/BottomSheet.tsx

@@ -18,6 +18,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import { DUO_ORIENTATIONS, styles } from './BottomSheet.styles';
+import { AdoptionProbe } from './KitAdoption';
 import {
   useBottomSheetLayout,
   useDuoKeyboardLift,
@@ -173,11 +174,16 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 
   const screen = (
-    <Screen
-      {...props}
-      {...props.route.params}
-      onRequestClose={onRequestClose}
-    />
+    <AdoptionProbe
+      screenName={Screen?.name || 'Invalid'}
+      navigation={props.navigation}
+    >
+      <Screen
+        {...props}
+        {...props.route.params}
+        onRequestClose={onRequestClose}
+      />
+    </AdoptionProbe>
   );
 
   return (

package/Application/BottomTab/BottomTabBar.tsx

@@ -17,7 +17,7 @@ import { CurvedContainer } from './CurvedContainer';
 import { ActiveIndicator } from './ActiveIndicator';
 import { getHorizontalBarWidth, TabBarMetrics, TabBarMotion } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { CappedScaleText } from './TabBarIcon';
+import { FixedScaleText } from './TabBarIcon';
 import { styles } from './BottomTabBar.styles';
 
 type Props = BottomTabBarProps & {
@@ -114,7 +114,7 @@ const CenterAction: React.FC<{
         </Animated.View>
         <View style={styles.ctaLabel}>
           {fixedFontScale ? (
-            <CappedScaleText>{labelText}</CappedScaleText>
+            <FixedScaleText>{labelText}</FixedScaleText>
           ) : (
             labelText
           )}
@@ -194,17 +194,21 @@ const HorizontalTabBar: React.FC<{
     return renderItems(items);
   };
 
+  const customContainer = withCta && floatingButton?.container;
+
   return (
     <View
       style={[styles.container, { width }]}
       accessibilityLabel={'bottom_tab_bar'}
     >
-      <CurvedContainer
-        width={width}
-        height={TabBarMetrics.height}
-        radius={TabBarMetrics.height / 2}
-        notchCenterX={withCta ? width / 2 : undefined}
-      />
+      {customContainer || (
+        <CurvedContainer
+          width={width}
+          height={TabBarMetrics.height}
+          radius={TabBarMetrics.height / 2}
+          notchCenterX={withCta ? width / 2 : undefined}
+        />
+      )}
       <View style={styles.content}>
         <ActiveIndicator
           axis={'x'}
@@ -254,7 +258,6 @@ export default function BottomTabBar(props: Props) {
       ]}
     >
       <HorizontalTabBar
-        fixedFontScale
         items={getTabItems(props)}
         width={width}
         floatingButton={floatingButton}

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -10,7 +10,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { CappedScaleText, TabBarIcon } from './TabBarIcon';
+import { FixedScaleText, TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 import { MiniAppContext } from '../../Context';
 import { Colors, Spacing } from '../../Consts';
@@ -98,7 +98,7 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
         />
       </View>
       {!hideLabel &&
-        (fixedFontScale ? <CappedScaleText>{text}</CappedScaleText> : text)}
+        (fixedFontScale ? <FixedScaleText>{text}</FixedScaleText> : text)}
     </>
   );
 };
@@ -166,11 +166,6 @@ const styles = StyleSheet.create({
   },
   labelBox: {
     alignSelf: 'stretch',
-    // fixed to the design line height so a capped-scale label overflows downward and the
-    // icon above it stays put
-    height: TabBarMetrics.labelHeight,
-    justifyContent: 'flex-start',
-    overflow: 'visible',
   },
   label: {
     textAlign: 'center',

package/Application/BottomTab/DuoRailTabBar.tsx

@@ -13,7 +13,7 @@ import { TabItemContent } from './CustomBottomTabItem';
 import { CurvedContainer } from './CurvedContainer';
 import { TabBarMetrics } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { CappedScaleText } from './TabBarIcon';
+import { FixedScaleText } from './TabBarIcon';
 import { usePressLift } from './usePressLift';
 import { ActiveIndicator } from './ActiveIndicator';
 import {
@@ -116,7 +116,7 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
         <CtaIcon icon={floatingButton.icon} />
       </Animated.View>
       <View style={styles.railCtaLabel}>
-        <CappedScaleText>
+        <FixedScaleText>
           <Text
             numberOfLines={1}
             typography={'label_xs_medium'}
@@ -124,7 +124,7 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
           >
             {floatingButton.label}
           </Text>
-        </CappedScaleText>
+        </FixedScaleText>
         {floatingButton.labelContent && (
           <View pointerEvents={'none'} style={styles.railCtaLabelOverlay}>
             {floatingButton.labelContent}

package/Application/BottomTab/TabBarIcon.tsx

@@ -71,30 +71,6 @@ export const FixedScaleText: React.FC<{ children: React.ReactNode }> = ({
   );
 };
 
-// the tab labels follow the OS/host font scale but never grow past this, so the fixed-height
-// container and the notch stay aligned
-const TAB_LABEL_MAX_SCALE = 1.2;
-
-/**
- * caps the label scale at `TAB_LABEL_MAX_SCALE`: it keeps following the host/OS font scale but
- * stops growing past 1.2× so it fits the fixed bar geometry
- */
-export const CappedScaleText: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const context = useContext<any>(MiniAppContext);
-  return (
-    <MiniAppContext.Provider
-      value={{
-        ...context,
-        fontScale: { ...context?.fontScale, maxScaleRate: TAB_LABEL_MAX_SCALE },
-      }}
-    >
-      {children}
-    </MiniAppContext.Provider>
-  );
-};
-
 /**
  * numbers use the error color, text the warning color (Figma Badge round numeric / text)
  */

package/Application/BottomTab/metrics.ts

@@ -20,9 +20,6 @@ const TabBarMetrics = {
   indicatorPaddingHorizontal: Spacing.M,
   indicatorRadius: Radius.XL,
   indicatorHeight: 32,
-  // label_s_medium line height: the label box keeps this height so a scaled label grows
-  // downward instead of pushing the icon up
-  labelHeight: 18,
   // home indicator / gesture bar area under the container
   systemIndicatorHeight: 24,
   // unfolded foldables (short side from 600, the smallest in the spec) use 65% of the short

package/Application/KitAdoption/AdoptionBadge.tsx

@@ -0,0 +1,123 @@
+import React, { useContext, 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 { MiniAppContext } from '../../Context';
+import { Text } from '../../Text';
+import { adoptionStore } from './AdoptionStore';
+import { styles } from './styles';
+import type { ScreenSnapshot } from './types';
+import { isAdoptionEnabled } from './utils';
+
+/** 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 or when kit adoption is off.
+ */
+const AdoptionBadge: React.FC = () => {
+  const context = useContext<unknown>(MiniAppContext);
+  const insets = useSafeAreaInsets();
+  const [isExpanded, setExpanded] = useState(false);
+  const latest = useSyncExternalStore(subscribeToStore, getLatestSnapshot);
+  const screenCount = useSyncExternalStore(subscribeToStore, getScreenCount);
+
+  if (!__DEV__ || !isAdoptionEnabled(context)) 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 };

package/Application/KitAdoption/AdoptionProbe.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { InteractionManager, Platform } from 'react-native';
+
+import { MiniAppContext } from '../../Context';
+import { adoptionStore } from './AdoptionStore';
+import { SETTLE_MS } from './constants';
+import type {
+  FiberLike,
+  KitRegistries,
+  ScreenSnapshot,
+  WalkResult,
+} from './types';
+import {
+  createRegistries,
+  getAppId,
+  getCurrentFiber,
+  isAdoptionEnabled,
+  walkScreen,
+} from './utils';
+
+type NavigationLike = {
+  addListener?: (event: string, callback: () => void) => () => void;
+};
+
+type ProbeProps = {
+  screenName: string;
+  navigation?: NavigationLike;
+  children: React.ReactNode;
+};
+
+let registriesCache: KitRegistries | undefined;
+
+/**
+ * Kit and RN identity sets, built on first use. Lazy require breaks the cycle
+ * between the foundation index and the Application screens that render this probe.
+ */
+const getRegistries = (): KitRegistries => {
+  if (!registriesCache) {
+    const kitModule = require('../../index') as Record<string, unknown>;
+    const rnModule = require('react-native') as Record<string, unknown>;
+    registriesCache = createRegistries([kitModule], rnModule);
+  }
+  return registriesCache;
+};
+
+/** Foundation version from its package.json, or undefined if it cannot be read. */
+const readFoundationVersion = (): string | undefined => {
+  try {
+    const pkg = require('../../package.json') as { version?: string };
+    return pkg.version;
+  } catch {
+    return undefined;
+  }
+};
+
+const createErrorResult = (): WalkResult => ({
+  counts: { K: 0, R: 0, O: 0 },
+  kit: {},
+  rn: {},
+  other: {},
+  top_transparent: [],
+  fibers: 0,
+  truncated: false,
+  status: 'error',
+});
+
+/** Stops the walk at nested probes so each screen is measured on its own. */
+const isProbeFiber = (fiber: FiberLike): boolean =>
+  fiber.type === AdoptionProbeDev;
+
+/** Passes children through with no measurement. Used in release builds. */
+const PassThrough = (props: ProbeProps): React.JSX.Element => (
+  <>{props.children}</>
+);
+
+/**
+ * Dev-only wrapper around a screen. Measures the screen's fiber tree after
+ * the first interactions settle, and again on focus, when kit adoption is on.
+ */
+class AdoptionProbeDev extends React.Component<ProbeProps> {
+  static contextType = MiniAppContext;
+
+  private timer: ReturnType<typeof setTimeout> | undefined;
+  private interaction: { cancel: () => void } | undefined;
+  private unsubscribeFocus: (() => void) | undefined;
+
+  componentDidMount(): void {
+    if (!isAdoptionEnabled(this.context)) return;
+    adoptionStore.setActive(this.measure);
+    this.unsubscribeFocus = this.props.navigation?.addListener?.(
+      'focus',
+      this.handleFocus,
+    );
+    this.interaction = InteractionManager.runAfterInteractions(() => {
+      this.timer = setTimeout(this.measure, SETTLE_MS);
+    });
+  }
+
+  componentWillUnmount(): void {
+    if (this.timer !== undefined) clearTimeout(this.timer);
+    this.interaction?.cancel();
+    this.unsubscribeFocus?.();
+    adoptionStore.clearActive(this.measure);
+  }
+
+  render(): React.ReactNode {
+    return this.props.children;
+  }
+
+  private handleFocus = (): void => {
+    adoptionStore.setActive(this.measure);
+  };
+
+  private measure = (): void => {
+    const startedAt = Date.now();
+    let result: WalkResult;
+    try {
+      const self = getCurrentFiber(
+        (this as unknown as { _reactInternals: FiberLike })._reactInternals,
+      );
+      const root = self.child;
+      if (!root) return;
+      result = walkScreen(root, getRegistries(), isProbeFiber);
+    } catch {
+      result = createErrorResult();
+    }
+    this.save(result, startedAt);
+  };
+
+  private save(result: WalkResult, startedAt: number): void {
+    const snapshot: ScreenSnapshot = {
+      ...result,
+      app_id: getAppId(this.context),
+      screen_name: this.props.screenName,
+      foundation_version: readFoundationVersion(),
+      platform: Platform.OS,
+      ts: Date.now(),
+      walk_ms: Date.now() - startedAt,
+    };
+    adoptionStore.save(snapshot);
+  }
+}
+
+const AdoptionProbe = __DEV__ ? AdoptionProbeDev : PassThrough;
+
+export type { NavigationLike, ProbeProps };
+export { AdoptionProbe, AdoptionProbeDev };

package/Application/KitAdoption/AdoptionStore.ts

@@ -0,0 +1,80 @@
+import type { ScreenSnapshot } from './types';
+
+type Listener = () => void;
+type Measure = () => void;
+
+/** Total classified nodes in a snapshot, used to keep the richer measurement. */
+const getTotal = (snapshot: ScreenSnapshot): number =>
+  snapshot.counts.K + snapshot.counts.R + snapshot.counts.O;
+
+const getKey = (snapshot: ScreenSnapshot): string =>
+  `${snapshot.app_id}/${snapshot.screen_name}`;
+
+/**
+ * In-memory, dev-only store of per-screen snapshots. Keeps one snapshot per
+ * app and screen (the one with the most nodes) and holds the active measurer.
+ */
+class AdoptionStore {
+  private snapshots = new Map<string, ScreenSnapshot>();
+  private listeners = new Set<Listener>();
+  private latestKey: string | undefined;
+  private activeMeasure: Measure | undefined;
+
+  /** Stores a snapshot unless the stored one for the same screen is larger. */
+  save(snapshot: ScreenSnapshot): void {
+    const key = getKey(snapshot);
+    const existing = this.snapshots.get(key);
+    if (!existing || getTotal(existing) <= getTotal(snapshot)) {
+      this.snapshots.set(key, snapshot);
+    }
+    this.latestKey = key;
+    this.notify();
+  }
+
+  getAll(): ScreenSnapshot[] {
+    return Array.from(this.snapshots.values());
+  }
+
+  /** The screen saved most recently, or undefined when nothing is saved. */
+  getLatest(): ScreenSnapshot | undefined {
+    return this.latestKey === undefined
+      ? undefined
+      : this.snapshots.get(this.latestKey);
+  }
+
+  clear(): void {
+    this.snapshots.clear();
+    this.latestKey = undefined;
+    this.notify();
+  }
+
+  /** Registers a change listener and returns its unsubscribe function. */
+  subscribe(listener: Listener): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  setActive(measure: Measure): void {
+    this.activeMeasure = measure;
+  }
+
+  /** Clears the active measurer only if it is still the given one. */
+  clearActive(measure: Measure): void {
+    if (this.activeMeasure === measure) this.activeMeasure = undefined;
+  }
+
+  remeasureActive(): void {
+    this.activeMeasure?.();
+  }
+
+  private notify(): void {
+    this.listeners.forEach(listener => listener());
+  }
+}
+
+const adoptionStore = new AdoptionStore();
+
+export type { Listener, Measure };
+export { AdoptionStore, adoptionStore };

package/Application/KitAdoption/constants.ts

@@ -0,0 +1,104 @@
+const SETTLE_MS = 3000;
+const MAX_FIBERS = 20000;
+const SLOT_SCAN_DEPTH = 4;
+const TOP_TRANSPARENT_LIMIT = 10;
+
+// Generic lib names (Badge, Title, Logo, ...) are left out on purpose so app components with the same name are not counted as kit.
+const LIB_UNIT_NAMES: string[] = [
+  'AutoComplete',
+  'Avatar',
+  'Calendar',
+  'Carousel',
+  'Chip',
+  'Collapse',
+  'DateTimePicker',
+  'ProgressInfo',
+  'Rating',
+  'Slider',
+  'Stepper',
+  'Steps',
+  'SuggestAction',
+  'Swipe',
+  'TabView',
+  'TabBar',
+  'CardTabBar',
+  'ScrollableTabBar',
+  'HeaderSliderBanner',
+  'TrustBanner',
+  'Uploader',
+];
+
+const RN_PRIMITIVE_NAMES: string[] = [
+  'View',
+  'Text',
+  'Image',
+  'ImageBackground',
+  'TextInput',
+  'ScrollView',
+  'FlatList',
+  'SectionList',
+  'VirtualizedList',
+  'TouchableOpacity',
+  'TouchableHighlight',
+  'TouchableWithoutFeedback',
+  'Pressable',
+  'Switch',
+  'ActivityIndicator',
+  'Modal',
+  'KeyboardAvoidingView',
+  'RefreshControl',
+];
+
+/** Foundation exports that come from third-party or RN and must not count as kit. */
+const FOUNDATION_REEXPORT_NAMES: string[] = [
+  'TouchableOpacity',
+  'LinearGradient',
+  'SafeAreaView',
+  'SafeAreaProvider',
+  'SafeAreaConsumer',
+  'SafeAreaInsetsContext',
+  'SafeAreaFrameContext',
+  'withSafeAreaInsets',
+];
+
+const FIBER_TAG = {
+  FunctionComponent: 0,
+  ClassComponent: 1,
+  HostRoot: 3,
+  HostComponent: 5,
+  HostText: 6,
+  Fragment: 7,
+  ContextProvider: 10,
+  ForwardRef: 11,
+  MemoComponent: 14,
+  SimpleMemoComponent: 15,
+} as const;
+
+/** Fiber tags that are component fibers; every other tag is walked through without counting. */
+const COUNTED_FIBER_TAGS: number[] = [
+  FIBER_TAG.FunctionComponent,
+  FIBER_TAG.ClassComponent,
+  FIBER_TAG.HostComponent,
+  FIBER_TAG.ForwardRef,
+  FIBER_TAG.SimpleMemoComponent,
+];
+
+const HOST_RN_PREFIXES: string[] = ['RCT', 'Android'];
+
+const REACT_MEMO_TYPE = Symbol.for('react.memo');
+const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+
+export {
+  COUNTED_FIBER_TAGS,
+  FIBER_TAG,
+  FOUNDATION_REEXPORT_NAMES,
+  HOST_RN_PREFIXES,
+  LIB_UNIT_NAMES,
+  MAX_FIBERS,
+  REACT_FORWARD_REF_TYPE,
+  REACT_MEMO_TYPE,
+  RN_PRIMITIVE_NAMES,
+  SETTLE_MS,
+  SLOT_SCAN_DEPTH,
+  TOP_TRANSPARENT_LIMIT,
+};

package/Application/KitAdoption/index.ts

@@ -0,0 +1,5 @@
+import { AdoptionBadge } from './AdoptionBadge';
+import { AdoptionProbe } from './AdoptionProbe';
+import { adoptionStore } from './AdoptionStore';
+
+export { AdoptionBadge, AdoptionProbe, adoptionStore };