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

package/Input/InputPhoneNumber.tsx

@@ -34,7 +34,8 @@ import { Image } from '../Image';
 import { Typography } from '../Text/types';
 
 /**
- * Input default component
+ * Vietnamese phone number input with a fixed flag and `+84` prefix, number pad
+ * by default, plus clear and trailing icons.
  */
 const InputPhoneNumber = forwardRef(
   (
@@ -146,9 +147,6 @@ const InputPhoneNumber = forwardRef(
       typography = 'header_m_bold';
     }
 
-    /**
-     * Render input view
-     */
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       const secure = secureTextEntry;
@@ -156,6 +154,11 @@ const InputPhoneNumber = forwardRef(
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = trailingColor ?? theme.colors.text.default;
       const borderWidth = focused ? 1.5 : 1;
+      let secureTextStyle = styles.secureTextLarge;
+
+      if (size === 'small') {
+        secureTextStyle = styles.secureTextSmall;
+      }
 
       if (disabled) {
         textColor = disabledColor;
@@ -214,11 +217,7 @@ const InputPhoneNumber = forwardRef(
                   color: textColor,
                 },
                 inputTextStyles,
-                secure &&
-                  haveValue &&
-                  (size === 'small'
-                    ? styles.secureTextSmall
-                    : styles.secureTextLarge),
+                secure && haveValue && secureTextStyle,
               ]}
               defaultValue={defaultValue}
               allowFontScaling={false}

package/Input/InputSearch.tsx

@@ -26,6 +26,10 @@ import styles from './styles';
 import { Styles } from '../Consts';
 import SystemTextInput from './SystemTextInput';
 
+/**
+ * Search field with search icon, clear icon, optional trailing icon and a
+ * cancel button; with `typingData` it shows an animated placeholder instead.
+ */
 const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   {
     placeholder,
@@ -106,9 +110,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     };
   });
 
-  /**
-   * Render the input view
-   */
   const renderInputView = () => {
     if (typingData && typingData?.length > 0) {
       return (
@@ -149,9 +150,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     );
   };
 
-  /**
-   * Render trailing icon or text
-   */
   const renderTrailing = () => {
     return (
       <View style={Styles.row}>

package/Input/InputTextArea.tsx

@@ -21,6 +21,10 @@ import styles from './styles';
 import SystemTextInput from './SystemTextInput';
 import { setAutomationID, useComponentId } from '../Application';
 
+/**
+ * Multiline input with floating label, clear icon and a `length/maxLength`
+ * counter; the ref exposes clear, focus, blur and setText.
+ */
 const InputTextArea = forwardRef(
   (
     {

package/Input/SearchTextTyping.tsx

@@ -4,6 +4,10 @@ import { TextInput } from 'react-native';
 import { useScaleSize, exportFontFamily } from '../Text';
 import styles from './styles';
 
+/**
+ * Animated search placeholder: types each string of `data` char by char, then
+ * erases it, looping forever. Writes via setNativeProps to avoid re-renders.
+ */
 export const TextTyping: FC<any> = ({
   data = [],
   timeDelayEnd = 2000,

package/Input/SystemTextInput.tsx

@@ -11,11 +11,16 @@ interface SystemTextInputProps extends TextInputProps {
   ref?: React.RefObject<TextInput | null>;
 }
 
+/**
+ * TextInput that still fires onPressIn/onPressOut when not editable on
+ * Android, by moving them to a wrapping touchable.
+ */
 const SystemTextInput: FC<SystemTextInputProps> = props => {
   const { editable, onPressIn, onPressOut, ref } = props;
 
-  const needsAndroidWrapper =
-    Platform.OS === 'android' && !editable && (onPressIn || onPressOut);
+  const isAndroidReadOnly = Platform.OS === 'android' && !editable;
+  const hasPressHandler = !!(onPressIn || onPressOut);
+  const needsAndroidWrapper = isAndroidReadOnly && hasPressHandler;
 
   const noPressHandlers = { onPressIn: undefined, onPressOut: undefined };
   const inputProps: TextInputProps = {

package/Input/TextTyping.tsx

@@ -11,6 +11,10 @@ export interface TextTypingProps {
   inputStyle?: TextStyle;
 }
 
+/**
+ * Typing placeholder: types each string of `data` char by char, then erases
+ * it, looping forever. Writes via setNativeProps to avoid re-renders.
+ */
 const TextTyping: FC<TextTypingProps> = ({
   data = [],
   timeDelayEnd = 2000,

package/Input/common.tsx

@@ -35,6 +35,7 @@ type TrailingProps = {
 
 export const MAX_LENGTH = 300;
 
+/** Border color by state; priority is disabled > error > focused > default. */
 export const getBorderColor = (
   theme: Theme,
   focused: boolean,
@@ -58,6 +59,10 @@ export const getBorderColor = (
   return { borderColor };
 };
 
+/**
+ * Container style for `size`; multiline uses `height` as minHeight so the
+ * field can grow with its content.
+ */
 export const getSizeStyle = (
   size?: 'small' | 'large',
   multiline: boolean = false,
@@ -68,13 +73,14 @@ export const getSizeStyle = (
     scaleStyle = { height };
   }
 
-  if (multiline)
+  if (multiline) {
     return [
       styles.multilineContainer,
       {
         minHeight: height,
       },
     ];
+  }
 
   if (size === 'small') {
     return [styles.smallContainer, scaleStyle];
@@ -82,6 +88,10 @@ export const getSizeStyle = (
   return [styles.container, scaleStyle];
 };
 
+/**
+ * Error or hint row under an input (error wins); with neither, `errorSpacing`
+ * keeps an empty row so the layout doesn't jump when an error appears.
+ */
 export const ErrorView: FC<{
   errorMessage?: string;
   errorSpacing?: boolean;
@@ -95,21 +105,17 @@ export const ErrorView: FC<{
   const scaledIconSize = useScaleSize(16);
 
   if (errorMessage || hintText) {
+    const messageColor = errorMessage ? errorColor : hintColor;
+    const messageType = errorMessage ? 'error' : 'hint';
     return (
       <View style={styles.errorView}>
         <View style={styles.errorIcon}>
-          <Icon
-            color={errorMessage ? errorColor : hintColor}
-            source="ic_error"
-            size={scaledIconSize}
-          />
+          <Icon color={messageColor} source="ic_error" size={scaledIconSize} />
         </View>
         <Text
-          accessibilityLabel={`${componentId}|${
-            errorMessage ? 'error' : 'hint'
-          }-text`}
+          accessibilityLabel={`${componentId}|${messageType}-text`}
           style={Styles.flex}
-          color={errorMessage ? errorColor : hintColor}
+          color={messageColor}
           typography={'description_default_regular'}
         >
           {errorMessage ?? hintTextDefault}
@@ -123,6 +129,10 @@ export const ErrorView: FC<{
   return <View />;
 };
 
+/**
+ * Floating label on the input's top border with a required `*` and an
+ * optional pressable icon; renders nothing without `floatingValue`.
+ */
 export const FloatingView: FC<FloatingViewProps> = ({
   floatingValue,
   floatingIconColor,
@@ -191,6 +201,10 @@ export const FloatingView: FC<FloatingViewProps> = ({
   return null;
 };
 
+/**
+ * Trailing slot: spinner while `loading`, an icon when `icon` is a known icon
+ * name or URL, otherwise `icon` as a text action (first 15 chars).
+ */
 export const RenderTrailing: FC<TrailingProps> = ({
   loading,
   color,
@@ -204,8 +218,8 @@ export const RenderTrailing: FC<TrailingProps> = ({
   }
 
   if (icon) {
-    const isIcon =
-      (IconSources as any)?.[icon as string]?.uri || icon?.includes('http');
+    const isIconName = !!(IconSources as any)?.[icon]?.uri;
+    const isIcon = isIconName || icon.includes('http');
     const renderIconTouchable = (content: ReactNode) => {
       return (
         <TouchableOpacity

package/Input/index.tsx

@@ -36,7 +36,7 @@ export interface InputProps extends TextInputProps {
   errorMessage?: string;
 
   /**
-   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   * Optional. Trailing icon name or URL; any other string is shown as a text action.
    */
   trailing?: string;
 
@@ -69,19 +69,18 @@ export interface InputProps extends TextInputProps {
   required?: boolean;
 
   /**
-   * Optional. If `true`,
-   * include spacing when Input not have error message.
+   * Optional. If `true`, keeps an empty error row when there is no error or hint.
    * Defaults to `false` if not provided.
    */
   errorSpacing?: boolean;
 
   /**
-   *  If true, the icon of input will use be show indicator loading.
+   * Optional. If `true`, shows a loading spinner in place of the trailing icon.
    */
   loading?: boolean;
 
   /**
-   *  Optional. Represents the leading icon in the Input component.
+   * Optional. Represents the leading icon in the Input component.
    */
   leadingIcon?: string;
 
@@ -111,12 +110,13 @@ export interface InputProps extends TextInputProps {
   hintText?: string;
 
   /**
-   * Optional. Represents the style of the Input component.
+   * Optional. Callback function to be called when the floating icon is pressed.
    */
   onPressFloatingIcon?: () => void;
 
   /**
-   * Optional. Represents the style of the Input component.
+   * Optional. If `true`, shows a clear icon while focused with a value.
+   * Defaults to `true` if not provided.
    */
   showClearIcon?: boolean;
 }
@@ -137,12 +137,12 @@ export interface InputSearchProps extends TextInputProps {
 
   /**
    * Optional. If `true`, the text on the search button will be displayed.
-   * Defaults to `false` if not provided.
+   * Defaults to `true` if not provided.
    */
   showButtonText?: boolean;
 
   /**
-   * Optional. Represents the value for the floating title in the InputSearch component.
+   * Optional. Callback function to be called when the search button is pressed.
    */
   onPressButtonText?: () => void;
 
@@ -180,7 +180,7 @@ export interface InputSearchProps extends TextInputProps {
   onPressTrailing?: () => void;
 
   /**
-   * Optional. If `true`, the user won't be able to interact with the Input component.
+   * Optional. Background color of the search field. Defaults to the surface color.
    */
   backgroundColor?: string;
 
@@ -195,8 +195,7 @@ export interface InputSearchProps extends TextInputProps {
   typingData?: string[];
 
   /**
-   * Optional. Represents the callback function to be called when the search button is pressed.
-   * @param e
+   * Optional. Called when the field is pressed while showing `typingData`.
    */
   onPress?: (e: GestureResponderEvent) => void;
 }
@@ -259,7 +258,7 @@ export interface InputDropDownProps extends TouchableOpacityProps {
   placeholder?: string;
 
   /**
-   * Optional. Represents the data for the dropdown.
+   * Optional. If `true`, the value wraps to multiple lines and the chevron aligns to the top.
    */
   multiline?: boolean;
 
@@ -303,19 +302,18 @@ export interface InputDropDownProps extends TouchableOpacityProps {
   required?: boolean;
 
   /**
-   * Optional. If `true`,
-   * include spacing when Input not have error message.
+   * Optional. If `true`, keeps an empty error row when there is no error or hint.
    * Defaults to `false` if not provided.
    */
   errorSpacing?: boolean;
 
   /**
-   *  If true, the icon of input will use be show indicator loading.
+   * Optional. If `true`, shows a loading spinner in place of the trailing icon.
    */
   loading?: boolean;
 
   /**
-   *  Optional. Represents the leading icon in the Input component.
+   * Optional. Represents the leading icon in the Input component.
    */
   leadingIcon?: string;
 
@@ -340,15 +338,14 @@ export interface InputDropDownProps extends TouchableOpacityProps {
   hintText?: string;
 
   /**
-   * Optional. Represents the style of the Input component.
+   * Optional. Callback function to be called when the floating icon is pressed.
    */
   onPressFloatingIcon?: () => void;
 }
 
 export interface InputPhoneNumberProps extends InputProps {
   /**
-   * Optional. Represents the country code to be displayed in the InputPhoneNumber component.
-   * It should be in the format of a string, e.g., "+1" for the United States.
+   * Optional. Currently unused: the displayed prefix is always `+84`.
    */
   countryCode?: string;
 }

package/Input/moneyUtils.ts

@@ -1,15 +1,21 @@
 export const moneyFormatter = new Intl.NumberFormat('vi-VN');
 
+/**
+ * Locates the single edited span between `old` and `text`: common prefix
+ * length (`start`), common suffix length (`suffix`) and removed + inserted
+ * char count (`size`).
+ */
 export const findEdit = (old: string, text: string) => {
   let start = 0;
   while (start < text.length && old[start] === text[start]) {
     start += 1;
   }
+  const maxSuffix = Math.min(text.length, old.length) - start;
   let suffix = 0;
-  while (
-    suffix < Math.min(text.length, old.length) - start &&
-    old[old.length - 1 - suffix] === text[text.length - 1 - suffix]
-  ) {
+  while (suffix < maxSuffix) {
+    if (old[old.length - 1 - suffix] !== text[text.length - 1 - suffix]) {
+      break;
+    }
     suffix += 1;
   }
   const size = old.length + text.length - 2 * (start + suffix);

package/Input/styles.ts

@@ -2,7 +2,6 @@ import { Platform, StyleSheet } from 'react-native';
 import { Colors, Radius, Spacing } from '../Consts';
 
 export default StyleSheet.create({
-  //input style
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
@@ -65,7 +64,6 @@ export default StyleSheet.create({
     marginTop: Spacing.S,
   },
 
-  //text area style
   textAreaView: {
     flex: 1,
   },
@@ -94,7 +92,6 @@ export default StyleSheet.create({
     marginBottom: Spacing.XS,
   },
 
-  //searchInput
   searchInputWrapper: {
     flexDirection: 'row',
     borderRadius: Radius.XL,
@@ -136,7 +133,6 @@ export default StyleSheet.create({
       ios: 36,
     }),
   },
-  //OTP
   otpWrapper: {
     width: '100%',
     marginTop: Spacing.M,
@@ -183,7 +179,6 @@ export default StyleSheet.create({
     opacity: 0.02,
     letterSpacing: Spacing.XXL,
   },
-  //DropDown
   inputDropDownWrapper: {
     flexDirection: 'row',
     marginTop: Spacing.S,

package/Input/utils.ts

@@ -1,5 +1,9 @@
 import { Localize } from '../Application';
 
+/**
+ * Formats a number Vietnamese-style (`.` thousands, `,` decimals) with
+ * `currency` appended; 0, NaN or a falsy value gives `0<currency>`.
+ */
 const formatNumberToMoney = (number: number, currency = '') => {
   if (!number || isNaN(number) || Number(number) === 0) {
     return `0${currency}`;
@@ -41,6 +45,10 @@ const formatNumberToMoney = (number: number, currency = '') => {
   return isNegative ? `-${result}${currency}` : `${result}${currency}`;
 };
 
+/**
+ * Parses a formatted money string back to a number by stripping
+ * `currencyUnit`, separators, `đ` and spaces; unparsable text gives 0.
+ */
 const formatMoneyToNumber = (money: string, currencyUnit: string) => {
   if (money && money.length > 0) {
     const moneyString = money
@@ -59,26 +67,20 @@ const formatMoneyToNumber = (money: string, currencyUnit: string) => {
   return Number(money);
 };
 
-// --- PHONE VALIDATION ---
 function formatPhoneNumber(phone: string): string {
   return phone.replace(/\D/g, '');
 }
 
+/**
+ * Keeps the digits of `phone` (prepending the `0` a 9-char local number lacks)
+ * and returns a localized error when empty or not 10-11 digits.
+ */
 function checkValidPhoneNumber(phone: string): {
   phoneFormatted: string;
   error?: string;
 } {
-  let phoneNumber = phone;
-
-  // if not starting with 0 and has 9 digits => prepend 0
-  if (
-    phoneNumber.length > 0 &&
-    phoneNumber[0] !== '0' &&
-    /^\d$/.test(phoneNumber[0]) &&
-    phoneNumber.length === 9
-  ) {
-    phoneNumber = '0' + phoneNumber;
-  }
+  const isMissingLeadingZero = phone.length === 9 && /^[1-9]/.test(phone);
+  const phoneNumber = isMissingLeadingZero ? `0${phone}` : phone;
 
   const phoneFormatted = formatPhoneNumber(phoneNumber);
   const localize = new Localize({ vi: {}, en: {} });

package/Layout/Card.tsx

@@ -20,6 +20,10 @@ export interface CardProps extends ViewProps {
   useShadow?: boolean;
 }
 
+/**
+ * Surface card across the content width minus 12pt margins, with its own grid for child
+ * Items; optional background image and light shadow.
+ */
 const Card: React.FC<CardProps> = ({
   children,
   style,
@@ -34,10 +38,9 @@ const Card: React.FC<CardProps> = ({
   const gutterSize = 8;
   const margin = 12;
   const widthSection = contentWidth - margin * 2;
-  let sizePerSpan =
-    (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
-      numberOfColumns -
-    1 / numberOfColumns;
+  const innerWidth = widthSection - margin * 2;
+  const columnsWidth = innerWidth - gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = columnsWidth / numberOfColumns - 1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,

package/Layout/FloatingButton.tsx

@@ -31,6 +31,10 @@ export interface FloatingButtonProps {
   renderComponent?: () => React.ReactNode;
 }
 
+/**
+ * Floating action button above the screen bottom. With a label and a scroll value it
+ * shrinks to its icon while scrolling down and expands again on scroll up.
+ */
 export const FloatingButton: React.FC<FloatingButtonProps> = ({
   renderComponent,
   label = '',

package/Layout/Item.tsx

@@ -7,16 +7,20 @@ import { SpanNumber } from './types';
 
 export interface ItemProps extends ViewProps {
   /**
-   * Represents the width of the Card component in terms of span numbers (1-12).
+   * Width in grid columns (1-12). Defaults to the full row.
    */
   widthSpan?: SpanNumber;
 
   /**
-   * Optional. Represents the height of the Card component in terms of span numbers (1-12).
+   * Optional. Height in grid spans (1-12). Unset keeps the content height.
    */
   heightSpan?: SpanNumber;
 }
 
+/**
+ * Grid cell sized from the enclosing GridContext; outlined when the mini app turns on
+ * the baseline debug feature.
+ */
 const Item: React.FC<ItemProps> = ({
   widthSpan,
   heightSpan,

package/Layout/ItemList.tsx

@@ -7,12 +7,16 @@ import { SpanNumber } from './types';
 
 export interface ItemListProps extends FlatListProps<any> {
   /**
-   * Represents the width of the Card component in terms of span numbers (1-12).
+   * Width of each item in grid columns (1-12). Defaults to the full row.
    */
   widthSpan?: SpanNumber;
   data: any[];
 }
 
+/**
+ * FlatList on the grid: `widthSpan` sets how many items share a row, and every item but
+ * the first of a row gets the gutter on its left.
+ */
 const ItemList = forwardRef(
   (
     {
@@ -30,6 +34,9 @@ const ItemList = forwardRef(
     const indexBegin = props?.data?.map(
       (_i: any, index: number) => index * numColumns,
     );
+    const defaultKeyExtractor = (item: any, index: number) => {
+      return (item?.id ?? item?.key ?? index).toString();
+    };
     const _renderItem = (item: any) => {
       if (indexBegin?.includes(item?.index)) {
         return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
@@ -46,12 +53,7 @@ const ItemList = forwardRef(
         ref={ref as React.RefObject<FlatList>}
         {...props}
         key={`ItemList-${numColumns}`}
-        keyExtractor={
-          // prefer caller's keyExtractor; fallback to common id/key/index
-          (props as any)?.keyExtractor ??
-          ((item: any, index: number) =>
-            (item?.id ?? item?.key ?? index).toString())
-        }
+        keyExtractor={(props as any)?.keyExtractor ?? defaultKeyExtractor}
         numColumns={numColumns}
         renderItem={_renderItem}
         horizontal={false}

package/Layout/ItemSectionList.tsx

@@ -7,11 +7,12 @@ import { SpanNumber } from './types';
 
 export interface ItemSectionListProps extends SectionListProps<any> {
   /**
-   * Represents the width of the Card component in terms of span numbers (1-12).
+   * Width of each item in grid columns (1-12). Defaults to the full row.
    */
   widthSpan?: SpanNumber;
 }
 
+/** SectionList whose items sit on the grid, `widthSpan` columns wide, a gutter apart. */
 const ItemSectionList: FC<ItemSectionListProps> = ({
   renderItem,
   widthSpan,