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

package/Popup/utils.ts

@@ -1,9 +1,5 @@
-type HighlightSegment = { text: string; isHighlighted: boolean };
+type HighlightSegment = { text: string; highlight: boolean };
 
-/**
- * True for cased-script letters, digits and `_`; caseless scripts (CJK, Thai)
- * count as word breaks.
- */
 const isWordChar = (char?: string) => {
   if (!char) {
     return false;
@@ -46,15 +42,12 @@ const splitHighlightText = (
       continue;
     }
     if (start > lastIndex) {
-      segments.push({
-        text: text.slice(lastIndex, start),
-        isHighlighted: false,
-      });
+      segments.push({ text: text.slice(lastIndex, start), highlight: false });
     }
-    segments.push({ text: match[0], isHighlighted: true });
+    segments.push({ text: match[0], highlight: true });
     lastIndex = end;
   }
-  segments.push({ text: text.slice(lastIndex), isHighlighted: false });
+  segments.push({ text: text.slice(lastIndex), highlight: false });
   return segments;
 };
 

package/Radio/index.tsx

@@ -11,10 +11,6 @@ import {
   MiniAppContext,
 } from '../Context';
 
-/**
- * Radio button, selected when `value === groupValue`. `onChange` is called on
- * press without arguments; the parent updates `groupValue`.
- */
 const Radio: FC<RadioProps> = ({
   value,
   groupValue,

package/Skeleton/index.tsx

@@ -21,10 +21,6 @@ import { Colors, Styles } from '../Consts';
 import styles from './styles';
 import { ScreenContext, SkeletonContext } from '../Context';
 
-/**
- * Shimmering placeholder that fills its parent. Reports loading to the screen
- * context while mounted.
- */
 const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   const screen = useContext<any>(ScreenContext);
   const [width, setWidth] = useState(0);
@@ -88,10 +84,6 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   );
 };
 
-/**
- * Shares `loading` with descendants (e.g. `Image` shows a skeleton) and animates
- * the layout change when it flips.
- */
 const SkeletonProvider: React.FC<{ loading: boolean; children: any }> = ({
   loading = true,
   children,

package/Switch/index.tsx

@@ -6,7 +6,6 @@ import { Colors } from '../Consts';
 import { useComponentId } from '../Application';
 import { ComponentContext, MiniAppContext } from '../Context';
 
-/** On/off toggle; `onChange` receives the negated `value`. */
 const Switch: FC<SwitchProps> = ({
   value = false,
   onChange,

package/Tag/index.tsx

@@ -25,10 +25,6 @@ const textColor = {
   grey: Colors.black_12,
 };
 
-/**
- * Small status label with an optional leading icon. `customColor` replaces the
- * palette color and turns the text white.
- */
 const Tag: FC<TagProps> = ({
   label = 'Label',
   icon,
@@ -76,7 +72,7 @@ const Tag: FC<TagProps> = ({
     `${componentName}/${label}`,
     accessibilityLabel,
   );
-  // Dev builds only accept `Colors.*_03` as customColor; release accepts any.
+  //Check if custom color is [color]_03 (only check in dev mode)
   const validateCustomColor = (hex: string) => {
     if (__DEV__) {
       const colorCore: { [key: string]: string } = Colors;

package/Tag/types.ts

@@ -8,7 +8,7 @@ export type TagProps = {
 
   /**
    * `size`: Optional. Defines the size of the Tag component.
-   * Defaults to 'large' if not provided.
+   * Defaults to 'medium' if not provided.
    */
   size?: 'medium' | 'large';
 
@@ -29,8 +29,8 @@ export type TagProps = {
   style?: ViewStyle;
 
   /**
-   * `customColor`: Optional. Custom background color; the label turns white.
-   * Dev builds ignore values other than the `Colors.*_03` tokens.
+   * `customColor`: Optional. Represents a custom color string (e.g., hex, rgb, rgba, etc.)
+   * that can be applied to the Tag component.
    */
   customColor?: string;
 

package/Text/index.tsx

@@ -111,10 +111,6 @@ 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: {
@@ -162,7 +158,9 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
     fontSize: useScaleSize(fontSize),
     lineHeight: useScaleSize(lineHeight),
     fontStyle,
-    // Weight is in fontFamily; fontWeight >= 700 makes Android seek a missing <family>_bold.ttf.
+    // 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.
     fontWeight: undefined,
   };
 };
@@ -171,11 +169,6 @@ 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,
@@ -235,10 +228,6 @@ 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' },
-  // Legacy tokens kept for old callers; not in the current type scale.
+  /**non-support**/
   headline_default: {
     fontSize: 28,
     lineHeight: 34,

package/Text/types.ts

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

package/Text/utils.ts

@@ -6,28 +6,16 @@ const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
 
-type MiniAppScale = {
-  scaleSizeMaxRate?: number;
-  fontScale?: { useOSScaleRate?: boolean; userScaleRate?: number };
-};
-
-/**
- * Scales `size` by screen width (+5 max) and OS font scale (max `scaleRate`,
- * else the ScaleSizeProvider rate, else 1.5), taking the larger, or by the mini
- * app `fontScale.userScaleRate`; a provider rate caps both at `size × rate`.
- */
 const useScaleSize = (size: number, scaleRate?: number) => {
   const { width } = useWindowDimensions();
-  const context = useContext<MiniAppScale | undefined>(MiniAppContext);
-  const scaleSizeMaxRate = context?.scaleSizeMaxRate;
-  const maxSize = scaleSizeMaxRate ? size * scaleSizeMaxRate : Infinity;
+  const context = useContext<any>(MiniAppContext);
   if (context?.fontScale?.useOSScaleRate === false) {
-    return Math.min(size * (context.fontScale.userScaleRate ?? 1), maxSize);
+    return size * (context.fontScale.userScaleRate ?? 1);
   }
   const fontScale = PixelRatio.getFontScale();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
-  const maxScaleRate = scaleRate ?? scaleSizeMaxRate ?? MAX_FONT_SCALE;
+  const maxScaleRate = scaleRate ?? MAX_FONT_SCALE;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
@@ -46,13 +34,9 @@ const useScaleSize = (size: number, scaleRate?: number) => {
     );
   }
 
-  return Math.min(Math.max(fontSizeDeviceScale, fontSizeOSScale), maxSize);
+  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,11 +15,6 @@ 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',
@@ -48,6 +43,7 @@ const Title: FC<TitleProps> = ({
 
   const size18 = useScaleSize(18);
   const size22 = useScaleSize(22);
+  // Dynamic styles using useScaleSize hook
   const dynamicStyles = {
     card_small: {
       fontSize: useScaleSize(14),
@@ -208,44 +204,39 @@ 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 }]}>
-        {action}
+        {!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>
+        )}
       </View>
     );
   };

package/ViewBoundary/index.tsx

@@ -14,10 +14,6 @@ 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
@@ -37,6 +33,7 @@ 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 {
@@ -52,6 +49,7 @@ 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,8 +1,14 @@
+/**
+ * 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.7-beta.3",
+    "version": "0.169.7-beta.4",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},