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

package/Text/index.tsx

@@ -111,6 +111,10 @@ const deprecatedValues: Typography[] = [
   'action_s',
 ];
 
+/**
+ * Text style of a typography token with sizes scaled by `useScaleSize` and the
+ * font file name for its weight. Calls hooks, so it only runs during render.
+ */
 const TypoStyles = (typo: Typography, newFontFamily?: string) => {
   const { theme } = useContext(ApplicationContext);
   const styleSheet: {
@@ -158,9 +162,7 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
     fontSize: useScaleSize(fontSize),
     lineHeight: useScaleSize(lineHeight),
     fontStyle,
-    // fontFamily da mang san weight. Tren Android, ReactFontManager doi
-    // `fonts/<family>_bold.ttf` khi fontWeight >= 700; file do khong ton tai nen
-    // font se roi ve font he thong. Bo fontWeight de Android dung dung file.
+    // Weight is in fontFamily; fontWeight >= 700 makes Android seek a missing <family>_bold.ttf.
     fontWeight: undefined,
   };
 };
@@ -169,6 +171,11 @@ const skeletonStyles = StyleSheet.create({
   overlay: { position: 'absolute' },
 });
 
+/**
+ * Design-system text: renders a `typography` token in the theme font with
+ * scaled sizes and OS font scaling off. Warns on deprecated tokens and shows a
+ * skeleton overlay while a SkeletonContext is loading.
+ */
 const Text: React.FC<TextProps> = ({
   typography = 'body_default_regular',
   color,
@@ -228,6 +235,10 @@ const Text: React.FC<TextProps> = ({
   );
 };
 
+/**
+ * Theme font family for a loose weight name ('bold', 'semibold', 'regular').
+ * The `typography` argument is ignored; it calls hooks, so use it during render.
+ */
 const exportFontFamily = (
   fontWeight: string,
   typography?: Typography,

package/Text/styles.ts

@@ -39,7 +39,7 @@ export default {
   action_s_bold: { fontSize: 14, lineHeight: 20, fontWeight: '700' },
   action_xs_bold: { fontSize: 12, lineHeight: 18, fontWeight: '700' },
   action_xxs_bold: { fontSize: 10, lineHeight: 14, fontWeight: '700' },
-  /**non-support**/
+  // Legacy tokens kept for old callers; not in the current type scale.
   headline_default: {
     fontSize: 28,
     lineHeight: 34,

package/Text/types.ts

@@ -14,9 +14,7 @@ export type TypographyWeight = {
 };
 
 export type Typography =
-  /**
-   * @deprecated
-   **/
+  // Deprecated up to 'action_s': Text warns at runtime when one is used.
   | 'headline_default'
   | 'headline_l'
   | 'headline_xl'
@@ -29,9 +27,6 @@ export type Typography =
   | 'paragraph_italic'
   | 'label_xxs'
   | 'action_s'
-  /**
-   * end
-   **/
   | 'headline_l_bold'
   | 'headline_default_bold'
   | 'header_m_bold'

package/Text/utils.ts

@@ -6,6 +6,11 @@ const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
 
+/**
+ * Scales `size` by screen width (at most +5) and OS font scale (at most
+ * `scaleRate`, default 1.5), taking the larger; a mini app can opt out of the
+ * OS rate and use its own `fontScale.userScaleRate` instead.
+ */
 const useScaleSize = (size: number, scaleRate?: number) => {
   const { width } = useWindowDimensions();
   const context = useContext<any>(MiniAppContext);
@@ -37,6 +42,10 @@ const useScaleSize = (size: number, scaleRate?: number) => {
   return Math.max(fontSizeDeviceScale, fontSizeOSScale);
 };
 
+/**
+ * Non-hook `useScaleSize` with the default cap and no mini app rate, for use
+ * outside render. Reads the window width at call time, so it misses resizes.
+ */
 const scaleSize = (size: number) => {
   const fontScale = PixelRatio.getFontScale();
   const deviceScale = Dimensions.get('window').width / DEFAULT_SCREEN_SIZE;

package/Title/index.tsx

@@ -15,6 +15,11 @@ import styles from './styles';
 import { TitleProps } from './types';
 import { Typography } from '../Text/types';
 
+/**
+ * Section or card heading with optional icon, badge, description, trailing
+ * chevron and right action (chevron, or a text button when `buttonTitle` is
+ * set). `textOnly` renders the title text alone.
+ */
 const Title: FC<TitleProps> = ({
   accessibilityLabel,
   title = 'Title',
@@ -43,7 +48,6 @@ const Title: FC<TitleProps> = ({
 
   const size18 = useScaleSize(18);
   const size22 = useScaleSize(22);
-  // Dynamic styles using useScaleSize hook
   const dynamicStyles = {
     card_small: {
       fontSize: useScaleSize(14),
@@ -204,39 +208,44 @@ const Title: FC<TitleProps> = ({
 
     const lineHeight = styleSheet[typography].lineHeight;
 
+    let action = (
+      <TouchableOpacity
+        onPress={onPressRightAction}
+        style={[
+          styles.iconRight,
+          {
+            backgroundColor: theme.colors.primary + '0F',
+          },
+        ]}
+        accessibilityLabel={componentId + '|label-right-action-touch'}
+      >
+        <Icon
+          source={'arrow_chevron_right_small'}
+          size={size22}
+          color={theme.colors.primary}
+        />
+      </TouchableOpacity>
+    );
+    if (buttonTitle) {
+      action = (
+        <TouchableOpacity
+          onPress={onPressRightAction}
+          accessibilityLabel={componentId + '|label-right-action-touch'}
+        >
+          <Text
+            color={theme.colors.primary}
+            typography={buttonTypo}
+            accessibilityLabel={componentId + '|label-right-action-text'}
+          >
+            {buttonTitle}
+          </Text>
+        </TouchableOpacity>
+      );
+    }
+
     return (
       <View style={[styles.actionRightView, { height: lineHeight }]}>
-        {!buttonTitle ? (
-          <TouchableOpacity
-            onPress={onPressRightAction}
-            style={[
-              styles.iconRight,
-              {
-                backgroundColor: theme.colors.primary + '0F',
-              },
-            ]}
-            accessibilityLabel={componentId + '|label-right-action-touch'}
-          >
-            <Icon
-              source={'arrow_chevron_right_small'}
-              size={size22}
-              color={theme.colors.primary}
-            />
-          </TouchableOpacity>
-        ) : (
-          <TouchableOpacity
-            onPress={onPressRightAction}
-            accessibilityLabel={componentId + '|label-right-action-touch'}
-          >
-            <Text
-              color={theme.colors.primary}
-              typography={buttonTypo}
-              accessibilityLabel={componentId + '|label-right-action-text'}
-            >
-              {buttonTitle}
-            </Text>
-          </TouchableOpacity>
-        )}
+        {action}
       </View>
     );
   };

package/ViewBoundary/index.tsx

@@ -14,6 +14,10 @@ interface ViewBoundaryState {
   error: Error | null;
 }
 
+/**
+ * Error boundary: renders `fallback` (or nothing) after a render error and
+ * reports it to native `MiniAppModule.onJSBoundaryCrash` when available.
+ */
 class ViewBoundary extends React.Component<
   ViewBoundaryProps,
   ViewBoundaryState
@@ -33,7 +37,6 @@ class ViewBoundary extends React.Component<
     this.props.onError?.(error, errorInfo);
 
     const context = (this as any).context ?? {};
-    // check exist native module method onJSBoundaryCrash
     const nativeMethod = NativeModules?.MiniAppModule?.onJSBoundaryCrash;
     if (typeof nativeMethod === 'function') {
       try {
@@ -49,7 +52,6 @@ class ViewBoundary extends React.Component<
             componentStack: errorInfo?.componentStack?.substring(0, 500) ?? '',
           },
         });
-        console.info('[ViewBoundary] onJSBoundaryCrash success!');
       } catch (_e) {
         console.warn('[ViewBoundary] onJSBoundaryCrash failed:', _e);
       }

package/index.ts

@@ -1,14 +1,8 @@
-/**
- * native export
- */
 import { TouchableOpacity } from 'react-native';
 
 export * from 'react-native-linear-gradient';
 export * from 'react-native-safe-area-context';
 
-/**
- * foundation component
- */
 export * from './Consts';
 export * from './Context';
 export * from './Layout';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.5-beta.1",
+    "version": "0.169.5",
     "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 };