@momo-kits/foundation 0.169.4-beta.8 → 0.169.4

package/Application/BottomSheet.tsx

@@ -18,7 +18,6 @@ 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,
@@ -174,16 +173,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 
   const screen = (
-    <AdoptionProbe
-      screenName={Screen?.name || 'Invalid'}
-      navigation={props.navigation}
-    >
-      <Screen
-        {...props}
-        {...props.route.params}
-        onRequestClose={onRequestClose}
-      />
-    </AdoptionProbe>
+    <Screen
+      {...props}
+      {...props.route.params}
+      onRequestClose={onRequestClose}
+    />
   );
 
   return (

package/Application/ModalScreen.tsx

@@ -24,7 +24,6 @@ import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
 import { isIPhoneDuo } from './utils';
-import { AdoptionProbe } from './KitAdoption';
 import { useModalLayout } from './modalLayout';
 import { scheduleOnRN } from 'react-native-worklets';
 
@@ -183,12 +182,7 @@ const Modal: React.FC<ModalParams> = props => {
             modalStyle,
           ]}
         >
-          <AdoptionProbe
-            screenName={Component?.name || Component?.type?.name || 'Invalid'}
-            navigation={props.navigation}
-          >
-            <Component {...params} onRequestClose={onDismiss} />
-          </AdoptionProbe>
+          <Component {...params} onRequestClose={onDismiss} />
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>

package/Application/NavigationContainer.tsx

@@ -30,7 +30,6 @@ import { HeaderBackground } from './Components/HeaderBackground';
 import { useScreenLayout } from '../Layout';
 import { getHeaderRowOptions } from '../Layout/utils';
 import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
-import { AdoptionBadge } from './KitAdoption';
 
 const Stack = createStackNavigator();
 
@@ -87,7 +86,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             initialParams={initialParams}
             localize={localize}
           />
-          <AdoptionBadge />
         </MiniAppContext.Provider>
       </ReservedRegionsProvider>
     </SafeAreaProvider>

package/Application/StackScreen.tsx

@@ -8,7 +8,6 @@ import { SwipeBackHaptic } from './Components/SwipeBackHaptic';
 import { useAppState } from './hooks';
 import { createScreenTracking } from './StackScreen.tracking';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
-import { AdoptionProbe } from './KitAdoption';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
@@ -284,9 +283,7 @@ const StackScreen: React.FC<any> = props => {
       }}
     >
       <TooltipPortalProvider>
-        <AdoptionProbe screenName={screenName} navigation={props.navigation}>
-          <Component heightHeader={heightHeader} {...data} />
-        </AdoptionProbe>
+        <Component heightHeader={heightHeader} {...data} />
         <TooltipPortalHost />
         <SwipeBackHaptic />
       </TooltipPortalProvider>

package/Application/__tests__/modalLayout.test.ts

@@ -16,10 +16,10 @@ describe('getModalLayout', () => {
     expect(layout.isFoldable).toBe(false);
     expect(layout.popup.width).toBe(342);
     expect(layout.popup.maxHeight).toBeUndefined();
-    expect(layout.popup.radius).toBe(16);
+    expect(layout.popup.radius).toBe(24);
     expect(layout.sheet.width).toBeUndefined();
     expect(layout.sheet.maxHeight).toBeUndefined();
-    expect(layout.sheet.radius).toBe(12);
+    expect(layout.sheet.radius).toBe(24);
     expect(layout.scrimOpacity).toBe(0.6);
   });
 
@@ -33,7 +33,7 @@ describe('getModalLayout', () => {
     expect(layout.isFoldable).toBe(false);
     expect(layout.popup.width).toBe(844 - 48);
     expect(layout.popup.maxHeight).toBeUndefined();
-    expect(layout.popup.radius).toBe(16);
+    expect(layout.popup.radius).toBe(24);
     expect(layout.sheet.width).toBeUndefined();
     expect(layout.scrimOpacity).toBe(0.6);
   });

package/Application/modalLayout.ts

@@ -112,9 +112,9 @@ const getModalLayout = ({
         minWidth: popupWidth,
         maxWidth: popupWidth,
         margin: Spacing.XL,
-        radius: Radius.L,
+        radius: Radius.XL,
       },
-      sheet: { margin: 0, radius: Radius.M },
+      sheet: { margin: 0, radius: Radius.XL },
       scrimOpacity: SCRIM_OPACITY,
     };
   }

package/Popup/PopupNotify.tsx

@@ -183,18 +183,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const body = (
     <>
       {!!image && (
-        <Image
-          source={{ uri: image }}
-          style={[
-            styles.image,
-            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
-          ]}
-        />
+        <Image source={{ uri: image }} style={styles.image} />
       )}
       <View style={[styles.content, isFoldable && styles.shrink]}>
         <Text
           typography={'header_default_bold'}
-          numberOfLines={3}
+          numberOfLines={2}
           accessibilityLabel={'title_popup_notify'}
           // keeps the title clear of the close button on a text only popup
           style={
@@ -250,6 +244,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           width: popupWidth,
           maxHeight,
         },
+        styles.card,
         showBaseLineDebug && styles.debugBaseLine,
       ]}
     >
@@ -262,9 +257,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
 const styles = StyleSheet.create({
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+  // clips the image and content to the card radius
+  card: { overflow: 'hidden' },
   image: {
     aspectRatio: 1.7777,
-    overflow: 'hidden',
   },
   shrink: { flexShrink: 1 },
   content: { padding: Spacing.XL },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.4-beta.8",
+    "version": "0.169.4",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Application/KitAdoption/AdoptionBadge.tsx

@@ -1,119 +0,0 @@
-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 };

package/Application/KitAdoption/AdoptionProbe.tsx

@@ -1,145 +0,0 @@
-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,
-  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. Release builds use PassThrough.
- */
-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 {
-    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

@@ -1,80 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

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

package/Application/KitAdoption/styles.ts

@@ -1,55 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-import { Colors, Radius, Spacing } from '../../Consts';
-
-// Keeps the summary pill from stretching across a narrow screen.
-const BADGE_MAX_WIDTH = 240;
-// Wide enough for the three action labels without clipping.
-const PANEL_MIN_WIDTH = 180;
-// Floats the dev overlay above screen content.
-const BADGE_Z_INDEX = 9999;
-
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    alignItems: 'flex-end',
-    paddingRight: Spacing.L,
-    zIndex: BADGE_Z_INDEX,
-  },
-  badge: {
-    maxWidth: BADGE_MAX_WIDTH,
-    backgroundColor: Colors.black_17,
-    borderRadius: Radius.S,
-    paddingHorizontal: Spacing.S,
-    paddingVertical: Spacing.XS,
-  },
-  panel: {
-    marginTop: Spacing.XS,
-    minWidth: PANEL_MIN_WIDTH,
-    gap: Spacing.XS,
-    padding: Spacing.S,
-    backgroundColor: Colors.black_01,
-    borderRadius: Radius.M,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: Colors.black_05,
-  },
-  action: {
-    alignItems: 'center',
-    paddingHorizontal: Spacing.S,
-    paddingVertical: Spacing.XS,
-    borderRadius: Radius.S,
-    backgroundColor: Colors.blue_09,
-  },
-  actionOutline: {
-    alignItems: 'center',
-    paddingHorizontal: Spacing.S,
-    paddingVertical: Spacing.XS,
-    borderRadius: Radius.S,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: Colors.black_07,
-  },
-});
-
-export { styles };