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

package/Badge/BadgeRibbon.tsx

@@ -8,10 +8,6 @@ import { Text } from '../Text';
 import { Colors } from '../Consts';
 import { Image } from '../Image';
 
-/**
- * Corner ribbon label in the warning color, skewed or `isRound`. Right-corner
- * ribbons are rotated 180deg with the text counter-rotated to stay upright.
- */
 const BadgeRibbon: FC<BadgeRibbonProps> = ({
   position = 'top_right',
   label = 'Label',
@@ -37,16 +33,39 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
   const textTransform = useMemo(() => [{ rotateZ: textRotate }], [textRotate]);
 
   const ribbonTail = isUpTail ? <UpTail /> : <DownTail />;
-  const renderRoundContent = () => {
-    return (
+  const renderRoundContent = () => (
+    <View
+      collapsable={false}
+      style={[
+        styles.ribbonContent,
+        {
+          backgroundColor: theme.colors.warning.primary,
+          marginTop: textMargin,
+        },
+      ]}
+    >
+      <View
+        collapsable={false}
+        style={[styles.ribbonLabelWrapper, { transform: textTransform }]}
+      >
+        <Text
+          style={styles.ribbonLabel}
+          color={Colors.black_01}
+          typography="label_xs_medium"
+        >
+          {label}
+        </Text>
+      </View>
+    </View>
+  );
+
+  const renderSkewContent = () => (
+    <View style={[styles.ribbonSkewRow, { marginTop: skewMargin }]}>
       <View
         collapsable={false}
         style={[
-          styles.ribbonContent,
-          {
-            backgroundColor: theme.colors.warning.primary,
-            marginTop: textMargin,
-          },
+          styles.ribbonSkewContent,
+          { backgroundColor: theme.colors.warning.primary },
         ]}
       >
         <View
@@ -62,41 +81,14 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
           </Text>
         </View>
       </View>
-    );
-  };
-
-  const renderSkewContent = () => {
-    return (
-      <View style={[styles.ribbonSkewRow, { marginTop: skewMargin }]}>
-        <View
-          collapsable={false}
-          style={[
-            styles.ribbonSkewContent,
-            { backgroundColor: theme.colors.warning.primary },
-          ]}
-        >
-          <View
-            collapsable={false}
-            style={[styles.ribbonLabelWrapper, { transform: textTransform }]}
-          >
-            <Text
-              style={styles.ribbonLabel}
-              color={Colors.black_01}
-              typography="label_xs_medium"
-            >
-              {label}
-            </Text>
-          </View>
-        </View>
-        <Image
-          source={{
-            uri: 'https://static.momocdn.net/app/img/kits/utils/Tail_4x.png',
-          }}
-          style={styles.skew}
-        />
-      </View>
-    );
-  };
+      <Image
+        source={{
+          uri: 'https://static.momocdn.net/app/img/kits/utils/Tail_4x.png',
+        }}
+        style={styles.skew}
+      />
+    </View>
+  );
 
   const content = isRound ? renderRoundContent() : renderSkewContent();
 

package/Badge/Shape.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import styles from './styles';
 import {Image} from '../Image';
 
-/** Ribbon tail image pointing up (the down tail rotated 180deg). */
 const UpTail = () => {
   return (
     <Image
@@ -15,7 +14,6 @@ const UpTail = () => {
   );
 };
 
-/** Ribbon tail image pointing down. */
 const DownTail = () => {
   return (
     <Image

package/Badge/types.ts

@@ -1,7 +1,7 @@
 import {ViewStyle} from 'react-native';
 
 /**
- * Props for a Badge component. It displays a short label or a number count.
+ * Props for a general Badge component. It can display a wide range of badges including simple labels, numbers, or dots.
  */
 export type BadgeProps = {
   /**
@@ -20,7 +20,7 @@ export type BadgeProps = {
   backgroundColor?: string;
 
   /**
-   * Optional. Overrides the generated component ID used for accessibility and QA.
+   *
    */
   accessibilityLabel?: string;
 };

package/Button/index.tsx

@@ -63,11 +63,6 @@ export interface ButtonProps extends TouchableOpacityProps {
   params?: any;
 }
 
-/**
- * Design-system button: `type` sets the colors, `size` the height and text,
- * and `loading` swaps an icon slot for a spinner. Primary buttons use the mini
- * app gradient from `config.navigationBar.buttonColors` when set.
- */
 const Button: FC<ButtonProps> = ({
   type = 'primary',
   size = 'large',
@@ -95,21 +90,33 @@ const Button: FC<ButtonProps> = ({
     rest.accessibilityLabel,
   );
 
+  /**
+   * animate press in (Reanimated)
+   */
   const animateIn = (event: GestureResponderEvent) => {
     rest?.onPressIn?.(event);
     pressAnim.value = withTiming(1, { duration: 100 });
   };
 
+  /**
+   * animate press out (Reanimated)
+   */
   const animateOut = (event: GestureResponderEvent) => {
     rest?.onPressOut?.(event);
     pressAnim.value = withTiming(0, { duration: 100 });
   };
 
+  /**
+   * export size style
+   */
   const getSizeStyle = () => {
     const styleSheet: { [key: string]: any } = styles;
     return styleSheet[size ?? 'small'];
   };
 
+  /**
+   * render title
+   */
   const renderTitle = () => {
     const typography = getTypography(size);
     const textColor = getTextColor(type, theme, color);
@@ -120,6 +127,10 @@ const Button: FC<ButtonProps> = ({
     );
   };
 
+  /**
+   * render icon
+   * @param position
+   */
   const renderIcon = (position: 'left' | 'right') => {
     const iconSize = getIconSize(size);
     const space = getIconSpace(size);

package/Button/utils.ts

@@ -4,8 +4,10 @@ import { Typography } from '../Text/types';
 import { ButtonProps } from './index';
 
 /**
- * Whether the loading spinner belongs in the `isLeft` icon slot: it takes the
- * right slot when there is a right icon, otherwise the left one.
+ * determine loading position
+ * @param left
+ * @param right
+ * @param isLeft
  */
 export const shouldShowLoading = (
   left?: string,
@@ -21,8 +23,7 @@ export const shouldShowLoading = (
 };
 
 /**
- * Background and border of a button `type`; `color` (mini app button color)
- * overrides the outline border.
+ * export type style
  */
 export const getTypeStyle = (
   type: ButtonProps['type'],
@@ -63,7 +64,9 @@ export const getTypeStyle = (
   }
 };
 
-/** Icon size for a button `size`. */
+/**
+ * export icon size
+ */
 export const getIconSize = (size: ButtonProps['size']) => {
   switch (size) {
     case 'large':
@@ -76,7 +79,9 @@ export const getIconSize = (size: ButtonProps['size']) => {
   }
 };
 
-/** Gap between icon and title for a button `size`. */
+/**
+ * export icon space
+ */
 export const getIconSpace = (size: ButtonProps['size']) => {
   switch (size) {
     case 'large':
@@ -89,7 +94,9 @@ export const getIconSpace = (size: ButtonProps['size']) => {
   }
 };
 
-/** Title typography for a button `size`. */
+/**
+ * export typography style
+ */
 export const getTypography = (size: ButtonProps['size']): Typography => {
   switch (size) {
     case 'large':
@@ -104,8 +111,7 @@ export const getTypography = (size: ButtonProps['size']): Typography => {
 };
 
 /**
- * Title and icon color of a button `type`; `color` (mini app button color)
- * overrides the outline and text types.
+ * export text color
  */
 export const getTextColor = (
   type: ButtonProps['type'],

package/CheckBox/index.tsx

@@ -11,10 +11,6 @@ import {
 import { Text } from '../Text';
 import { Icon } from '../Icon';
 
-/**
- * Checkbox with an optional label. `indeterminate` shows a minus icon and is
- * styled and announced as checked.
- */
 const CheckBox: FC<CheckBoxProps> = ({
   value,
   disabled = false,

package/Consts/theme.ts

@@ -62,22 +62,22 @@ const defaultDarkTheme: Theme = {
     secondary: Colors.pink_08,
     gradient: '#FDCADE',
     background: {
-      default: '#121212',
-      surface: '#1e1e1e',
+      default: '#121212', // Dark background
+      surface: '#1e1e1e', // Slightly lighter surface background
       tonal: Colors.pink_10,
-      pressed: '#1a1a1a',
+      pressed: '#1a1a1a', // Pressed state background
       selected: Colors.pink_11,
-      disable: '#303030',
+      disable: '#303030', // Disabled state background
     },
     text: {
-      default: '#ffffff',
-      secondary: '#b0b0b0',
-      hint: '#727272',
-      disable: '#505050',
+      default: '#ffffff', // White text for better contrast
+      secondary: '#b0b0b0', // Light gray secondary text
+      hint: '#727272', // Hint text color
+      disable: '#505050', // Disabled text color
     },
     border: {
-      default: '#2a2a2a',
-      disable: '#242424',
+      default: '#2a2a2a', // Darker borders
+      disable: '#242424', // Disabled state border color
     },
     success: {
       primary: Colors.green_03,

package/Context/index.ts

@@ -5,15 +5,11 @@ import { defaultContext } from '../Consts';
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
 
-// Shared by the host app via `Platform`; standalone falls back to a local one.
 const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
 const SkeletonContext = createContext({ loading: false });
-/**
- * @deprecated Not read: wrap the subtree in `ScaleSizeProvider`, which caps the
- * font scale through MiniAppContext. Kept for mini apps built on older kits.
- */
+/** @deprecated Max font scale is fixed at 1.5; this context is no longer read. */
 const ScaleSizeContext = createContext<{ scaleSizeMaxRate?: number }>({
   scaleSizeMaxRate: undefined,
 });

package/Divider/DashDivider.tsx

@@ -11,7 +11,6 @@ export interface DashDividerProps {
   style?: ViewStyle;
 }
 
-/** 1px dashed horizontal line in the default border color. */
 const DashDivider: React.FC<DashDividerProps> = ({ style }) => {
   const { theme } = useContext(ApplicationContext);
   const borderColor = theme.colors.border.default;

package/Divider/index.tsx

@@ -18,10 +18,6 @@ export interface DividerProps {
   type?: 'dash' | 'default';
 }
 
-/**
- * 1px horizontal line in the default border color. `type='dash'` renders
- * `DashDivider`, which always has a 4px vertical margin.
- */
 const Divider: React.FC<DividerProps> = ({
   style,
   useMargin = true,

package/FoundationList/index.tsx

@@ -5,10 +5,6 @@ import { FlatListProps } from 'react-native';
 type CombinedListProps<ItemT> = FlatListProps<ItemT> &
   Partial<FlashListProps<ItemT>>;
 
-/**
- * FlashList typed to also accept FlatList props, so FlatList call sites can
- * switch to it without type changes.
- */
 const FoundationList = <ItemT,>(props: CombinedListProps<ItemT>) => {
   return <FlashList {...props} />;
 };

package/Icon/index.tsx

@@ -7,10 +7,6 @@ import { Image } from '../Image';
 import { StyleSheet } from 'react-native';
 import { Colors } from '../Consts';
 
-/**
- * Tinted icon from the bundled icon map (unknown names fall back to
- * `ic_warning`) or from a URL. `color={null}` keeps the image's own colors.
- */
 const Icon: React.FC<IconProps> = ({
   source = 'ic_back',
   size = 24,
@@ -23,6 +19,9 @@ const Icon: React.FC<IconProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
+  /**
+   * get icon source maps or remote http
+   */
   const getIconSource = (): any => {
     if (source && !source.includes('http')) {
       let icon: { [key: string]: { uri: string } } = IconSources;
@@ -31,8 +30,9 @@ const Icon: React.FC<IconProps> = ({
     return { uri: source };
   };
 
-  const tintColor = color ?? theme.colors.text.default;
-  const tintColorProps = color !== null && { tintColor };
+  const tintColorProps = color !== null && {
+    tintColor: color ?? theme.colors.text.default,
+  };
 
   return (
     <Image

package/Icon/types.ts

@@ -15,7 +15,7 @@ export type IconProps = {
   size?: number;
 
   /**
-   *  Optional. Represents the color of the icon; `null` keeps the image colors.
+   *  Optional. Represents the color of the icon.
    */
   color?: string | null;
 

package/IconButton/index.tsx

@@ -41,10 +41,6 @@ export interface IconButtonProps extends TouchableOpacityProps {
   params?: any;
 }
 
-/**
- * Icon-only button. `type` sets the background and icon color; `'disabled'`
- * also blocks presses.
- */
 const IconButton: React.FC<IconButtonProps> = ({
   type = 'primary',
   icon,
@@ -58,6 +54,9 @@ const IconButton: React.FC<IconButtonProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
+  /**
+   * get size icon button
+   */
   const getSizeStyle = () => {
     switch (size) {
       case 'small':
@@ -69,10 +68,16 @@ const IconButton: React.FC<IconButtonProps> = ({
     }
   };
 
+  /**
+   * get shape icon button
+   */
   const getShapeStyle = () => {
     return shape === 'square' ? styles.square : styles.circle;
   };
 
+  /**
+   * get style for icon button by type
+   */
   const getTypeStyle = () => {
     switch (type) {
       case 'disabled':
@@ -106,6 +111,9 @@ const IconButton: React.FC<IconButtonProps> = ({
     }
   };
 
+  /**
+   * get color for icon
+   */
   const getIconColor = () => {
     switch (type) {
       case 'disabled':

package/Image/index.tsx

@@ -15,7 +15,6 @@ import { ImageProps } from './types';
 
 type Status = 'success' | 'loading' | 'error';
 
-/** Last path segment of a `{ uri }` source, used in QA labels; '' otherwise. */
 export const getImageName = (source: any): string => {
   const parts = source?.uri?.split?.('/');
   if (parts?.length > 0) {
@@ -24,10 +23,6 @@ export const getImageName = (source: any): string => {
   return '';
 };
 
-/**
- * FastImage that shows a skeleton while loading (if `loading`) or inside a
- * loading `SkeletonProvider`, and a fail icon on error.
- */
 const Image: React.FC<ImageProps> = ({
   style,
   source,
@@ -49,12 +44,15 @@ const Image: React.FC<ImageProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const imageName = getImageName(source);
-  let accessibilityLabel: any = `img|${imageName}`;
+  let accessibilityLabel: any = `img|${getImageName(source)}`;
   if (component?.componentId) {
-    accessibilityLabel = `${component?.componentId}|img|${imageName}`;
+    accessibilityLabel = `${component?.componentId}|img|${getImageName(
+      source,
+    )}`;
   }
-
+  /**
+   * render content loading | fail | rendered
+   */
   const renderContent = () => {
     if (status === 'loading' || status === 'error') {
       let content = <Skeleton />;

package/Input/Input.tsx

@@ -31,8 +31,7 @@ import {
 } from '../Context';
 
 /**
- * Text input with floating label, leading/trailing/clear icons and an error or
- * hint row; controlled via `value` or uncontrolled via `defaultValue`.
+ * Input default component
  */
 const Input = forwardRef(
   (
@@ -132,17 +131,15 @@ const Input = forwardRef(
       };
     });
 
+    /**
+     * Render input view
+     */
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       const secure = secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = trailingColor;
-      let secureTextStyle = styles.secureTextLarge;
-
-      if (size === 'small') {
-        secureTextStyle = styles.secureTextSmall;
-      }
 
       if (disabled) {
         textColor = disabledColor;
@@ -202,7 +199,11 @@ const Input = forwardRef(
                   color: textColor,
                   fontFamily: exportFontFamily(fontWeight ?? 'regular'),
                 },
-                secure && haveValue && secureTextStyle,
+                secure &&
+                  haveValue &&
+                  (size === 'small'
+                    ? styles.secureTextSmall
+                    : styles.secureTextLarge),
               ]}
               defaultValue={defaultValue}
               allowFontScaling={false}

package/Input/InputDropDown.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { TouchableOpacity, View, type ViewStyle } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { useComponentId } from '../Application';
 import {
   ApplicationContext,
@@ -18,10 +18,6 @@ import { Text, useScaleSize } from '../Text';
 import styles from './styles';
 import { Spacing } from '../Consts';
 
-/**
- * Pressable field styled like an input with a chevron; shows `value` or
- * `placeholder`. Opening the picker is left to `onPress`.
- */
 const InputDropDown = ({
   value,
   floatingValue,
@@ -54,19 +50,18 @@ const InputDropDown = ({
     props.accessibilityLabel,
   );
 
+  /**
+   * Render the input view
+   */
   const renderInputView = () => {
     const disabledColor = theme.colors.text.disable;
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
-    let chevronStyle: ViewStyle = styles.iconViewDropDownSingle;
 
     if (disabled) {
       textColor = disabledColor;
       placeholderColor = disabledColor;
     }
-    if (multiline) {
-      chevronStyle = styles.iconViewDropDownMultiline;
-    }
 
     return (
       <View
@@ -116,7 +111,14 @@ const InputDropDown = ({
             </Text>
           </View>
         </View>
-        <View style={[styles.iconViewDropDown, chevronStyle]}>
+        <View
+          style={[
+            styles.iconViewDropDown,
+            multiline
+              ? styles.iconViewDropDownMultiline
+              : styles.iconViewDropDownSingle,
+          ]}
+        >
           <Icon source={'arrow_chevron_down_small'} />
         </View>
       </View>

package/Input/InputMoney.tsx

@@ -16,11 +16,6 @@ import { InputMoneyView } from './InputMoneyView';
 import { findEdit, moneyFormatter } from './moneyUtils';
 import styles from './styles';
 
-/**
- * Money input: keeps digits only, shows them grouped with a currency suffix and
- * reports raw digits to `onChangeText`. On Android it restores the caret by the
- * count of digits after it, since regrouping shifts positions.
- */
 const InputMoney = forwardRef(
   (
     {
@@ -93,9 +88,9 @@ const InputMoney = forwardRef(
 
     useEffect(() => {
       if (!caretSelection) return;
-      setCaretSelection(current => {
-        return current === caretSelection ? undefined : current;
-      });
+      setCaretSelection(current =>
+        current === caretSelection ? undefined : current,
+      );
     }, [caretSelection]);
 
     const updateDisplayValue = (numeric: string) => {
@@ -147,10 +142,11 @@ const InputMoney = forwardRef(
       lastRawText.current = text;
       const formattedEdit = findEdit(lastDisplayValue, text);
       const rawEdit = findEdit(raw, text);
-      const isRawEditSmaller = !!raw && rawEdit.size < formattedEdit.size;
-      const { old, start, suffix } = isRawEditSmaller ? rawEdit : formattedEdit;
-      const textAfterEdit = text.slice(text.length - suffix);
-      caretDigitsAfter.current = parseInputText(textAfterEdit).length;
+      const { old, start, suffix } =
+        raw && rawEdit.size < formattedEdit.size ? rawEdit : formattedEdit;
+      caretDigitsAfter.current = parseInputText(
+        text.slice(text.length - suffix),
+      ).length;
       if (text.length < old.length && digits === numericValue) {
         const index = parseInputText(text.slice(0, start)).length - 1;
         if (index >= 0) {