@momo-kits/foundation 0.169.4 → 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.4",
+    "version": "0.169.5",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Application/__tests__/modalLayout.test.ts

@@ -1,128 +0,0 @@
-// document/__mocks__ shadows react-native with react-native-web for the doc site
-jest.mock('react-native', () => jest.requireActual('react-native'));
-
-import { getModalLayout } from '../modalLayout';
-
-const NO_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
-
-describe('getModalLayout', () => {
-  it('keeps the phone look', () => {
-    const layout = getModalLayout({
-      width: 390,
-      height: 844,
-      insets: { top: 47, right: 0, bottom: 34, left: 0 },
-      isDuo: false,
-    });
-    expect(layout.isFoldable).toBe(false);
-    expect(layout.popup.width).toBe(342);
-    expect(layout.popup.maxHeight).toBeUndefined();
-    expect(layout.popup.radius).toBe(24);
-    expect(layout.sheet.width).toBeUndefined();
-    expect(layout.sheet.maxHeight).toBeUndefined();
-    expect(layout.sheet.radius).toBe(24);
-    expect(layout.scrimOpacity).toBe(0.6);
-  });
-
-  it('keeps the phone look in landscape', () => {
-    const layout = getModalLayout({
-      width: 844,
-      height: 390,
-      insets: { top: 0, right: 47, bottom: 21, left: 47 },
-      isDuo: false,
-    });
-    expect(layout.isFoldable).toBe(false);
-    expect(layout.popup.width).toBe(844 - 48);
-    expect(layout.popup.maxHeight).toBeUndefined();
-    expect(layout.popup.radius).toBe(24);
-    expect(layout.sheet.width).toBeUndefined();
-    expect(layout.scrimOpacity).toBe(0.6);
-  });
-
-  it('caps popup and sheet on a wide foldable window', () => {
-    const layout = getModalLayout({
-      width: 884,
-      height: 1104,
-      insets: { top: 24, right: 0, bottom: 20, left: 0 },
-      isDuo: false,
-    });
-    expect(layout.isFoldable).toBe(true);
-    expect(layout.popup).toMatchObject({
-      width: 450,
-      minWidth: 280,
-      maxWidth: 450,
-      maxHeight: 600,
-      margin: 24,
-      radius: 24,
-    });
-    expect(layout.sheet).toMatchObject({
-      width: 653,
-      maxHeight: 1104 - 24 - 12,
-      minHeight: 230,
-      margin: 12,
-      radius: 24,
-    });
-    expect(layout.scrimOpacity).toBe(0.2);
-  });
-
-  it('limits popup height to the safe area minus 48', () => {
-    const layout = getModalLayout({
-      width: 900,
-      height: 600,
-      insets: { top: 24, right: 0, bottom: 20, left: 0 },
-      isDuo: false,
-    });
-    expect(layout.popup.maxHeight).toBe(600 - 24 - 20 - 48);
-  });
-
-  it('places modals left of the control column on the iPhone Duo outer display', () => {
-    const layout = getModalLayout({
-      width: 420,
-      height: 760,
-      insets: { top: 0, right: 64, bottom: 20, left: 0 },
-      isDuo: true,
-    });
-    expect(layout.isFoldable).toBe(true);
-    expect(layout.placement).toEqual({ x: 0, y: 0, width: 356, height: 740 });
-    expect(layout.popup.margin).toBe(12);
-    expect(layout.popup.width).toBe(356 - 24);
-    expect(layout.sheet.width).toBe(356 - 24);
-  });
-
-  it('never grows past the margins when the space is under the min width', () => {
-    const layout = getModalLayout({
-      width: 300,
-      height: 600,
-      insets: NO_INSETS,
-      isDuo: true,
-    });
-    expect(layout.popup.width).toBe(300 - 24);
-    expect(layout.popup.minWidth).toBe(300 - 24);
-    expect(layout.sheet.width).toBe(300 - 24);
-  });
-
-  it('moves to the right half when iPhone Duo is half folded', () => {
-    const layout = getModalLayout({
-      width: 1000,
-      height: 800,
-      insets: NO_INSETS,
-      isDuo: true,
-      hinge: { x: 495, y: 0, width: 10, height: 800 },
-    });
-    expect(layout.placement).toEqual({ x: 505, y: 0, width: 495, height: 800 });
-    expect(layout.popup.margin).toBe(12);
-    expect(layout.popup.width).toBe(450);
-    expect(layout.sheet.width).toBe(495 - 24);
-  });
-
-  it('ignores a division off the iPhone Duo', () => {
-    const layout = getModalLayout({
-      width: 1000,
-      height: 800,
-      insets: NO_INSETS,
-      isDuo: false,
-      hinge: { x: 495, y: 0, width: 10, height: 800 },
-    });
-    expect(layout.placement.x).toBe(0);
-    expect(layout.popup.margin).toBe(24);
-  });
-});