@momo-kits/foundation 0.81.52 → 0.81.53-beta.0

package/Application/types.ts

@@ -1,9 +1,10 @@
-import {Animated} from 'react-native';
 import {StackNavigationOptions} from '@react-navigation/stack';
+import {EventArg} from '@react-navigation/core';
 import React from 'react';
-import Navigator from './Navigator';
+import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
+import Navigator from './Navigator';
 
 type Screen = React.ComponentType<NavigationScreenProps>;
 
@@ -70,16 +71,6 @@ export type Context = {
   translate?: (key: string) => string;
 };
 
-export type MiniAppInfo = {
-  [key: string]: any;
-  code: string;
-  appId: string;
-  buildNumber: number;
-  flowPartnerId?: string;
-  toolkitConfig?: any;
-  fromCode?: string;
-};
-
 export type LocalizationObject = {
   vi: {
     [key: string]: string;
@@ -95,6 +86,7 @@ export type NavigationContainerProps = {
   theme: Theme;
   maxApi: any;
   localization?: LocalizationObject;
+  initialParams?: any;
 };
 
 export type NavigationScreenProps = {
@@ -109,18 +101,28 @@ export type ScreenParams = {
   options?: NavigationOptions;
 };
 
-export interface ModalParams extends ScreenParams {
+export type ModalParams = {
   [key: string]: any;
+  screen: React.ComponentType;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
-}
+};
 
-export interface BottomSheetParams extends ScreenParams {
+export type BottomSheetParams = {
   [key: string]: any;
-  onDismiss?: () => void;
-  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
-  indicatorColor?: string;
-}
+  screen: React.ComponentType;
+  options: {
+    title: string;
+    surface?: boolean;
+  };
+  useNativeModal?: boolean;
+  surface?: boolean;
+  onDismiss?: (type?: string) => void;
+  barrierDismissible?: boolean;
+  draggable?: boolean;
+  useBottomInset?: boolean;
+  keyboardVerticalOffset?: number;
+};
 
 export type NavigationButtonProps = {
   icon: string;
@@ -129,6 +131,7 @@ export type NavigationButtonProps = {
   onPress: () => void;
   badgeType?: 'dot' | 'number';
   badgeValue?: number;
+  accessibilityLabel?: string;
 };
 
 export type PinnedToolType = {
@@ -152,6 +155,7 @@ export interface NavigationOptions extends StackNavigationOptions {
   toolkitParams?: {
     pinnedTool?: PinnedToolType;
     runtimeTools?: RuntimeToolType[];
+    preventClose?: PopupNotifyProps;
   };
 }
 
@@ -162,9 +166,8 @@ export interface HeaderBackProps extends NavigationButtonProps {
 
 export type HeaderBackgroundProps = {
   image?: string | null;
-  backgroundColor?: string | null;
   animatedValue?: Animated.Value;
-  useBorder?: boolean;
+  useSurface?: boolean;
 };
 
 export type TitleCustomProps = {
@@ -183,20 +186,25 @@ export type HeaderToolkitProps = {
   configs: any[];
 };
 
-export type HeaderAnimatedProps = {
+export interface HeaderAnimatedProps extends ViewProps {
   animatedValue: Animated.Value;
   image: string;
-  onPress?: () => void;
-};
+}
 
 export type BottomTabItemProps = {
   name: string;
   label: string;
   icon: string;
   showDot?: boolean;
-  badgeLabel?: string;
+  badgeLabel?: string | number;
   screen: Screen;
   options: NavigationOptions;
+  initialParams?: any;
+  listeners?: {
+    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
+    focus?: (e: EventArg<'focus', false, unknown>) => void;
+    blur?: (e: EventArg<'blur', false, unknown>) => void;
+  };
 };
 
 export type BottomTabProps = {
@@ -205,12 +213,22 @@ export type BottomTabProps = {
   initialRouteName?: string;
   navigation: Navigation;
   listeners?: {
-    tabPress?: any;
-    focus?: any;
+    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
+    focus?: (e: EventArg<'focus', false, unknown>) => void;
+    blur?: (e: EventArg<'blur', false, unknown>) => void;
   };
+  floatingButton?: FloatingButtonProps;
+};
+
+export type FloatingButtonProps = {
+  container?: React.ReactNode;
+  icon: string | React.ReactNode;
+  label: string;
+  onPress: () => void;
 };
 
 export type AnimatedHeader = {
   type: 'default' | 'surface';
   component?: (props?: any) => React.ReactElement;
+  headerTitle?: (props?: any) => React.ReactElement;
 };

package/Application/utils.tsx

@@ -94,17 +94,13 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (typeof params.surface == 'boolean') {
+  if (typeof params.surface === 'boolean') {
     if (params.surface) {
       options = {
         ...options,
         headerTintColor: theme.colors.text.default,
         headerBackground: () => (
-          <HeaderBackground
-            image={null}
-            backgroundColor={theme.colors.background.surface}
-            useBorder={true}
-          />
+          <HeaderBackground image={null} useSurface={true} />
         ),
       };
     } else {
@@ -126,19 +122,14 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
+  if (params.toolkitParams) {
     options = {
       ...options,
       headerRight: (props: any) => {
-        return (
-          <HeaderToolkitAction
-            preventBack={params.preventBack}
-            pinnedTool={params.toolkitParams?.pinnedTool}
-            runtimeTools={params.toolkitParams?.runtimeTools}
-            {...props}
-          />
-        );
+        return <HeaderToolkitAction {...params.toolkitParams} {...props} />;
       },
     };
+  }
 
   return {
     ...params,
@@ -146,4 +137,17 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions};
+const formatNameLength = (name = '') => {
+  let formattedName = name;
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName;
+};
+export {
+  getStackOptions,
+  getDialogOptions,
+  getModalOptions,
+  getOptions,
+  formatNameLength,
+};

package/Assets/icon_bank.json

@@ -503,4 +503,4 @@
   "zalopay_icon": {
     "uri": "https://static.momocdn.net/app/img/kits/icon_bank/zalopay_icon.png"
   }
-}
+}

package/Badge/Badge.tsx

@@ -46,7 +46,7 @@ const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
 
   return (
     <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
-      <Text color={Colors.black_01} typography={'action_xs_bold'}>
+      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
         {formatTitle()}
       </Text>
     </View>

package/Button/index.tsx

@@ -6,9 +6,8 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
-
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
@@ -59,7 +58,7 @@ export interface ButtonProps extends TouchableOpacityProps {
   /**
    *  If true, the icon of button will use the tint color provided by its container.
    */
-  useTintColor?: boolean;
+  tintColor?: string;
 
   /**
    *  If true, the icon of button will use be show indicator loading.
@@ -70,30 +69,39 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  A callback function that is called when the button is pressed.
    */
   onPress: () => void;
+
+  params?: any;
 }
 
 const Button: FC<ButtonProps> = ({
   type = 'primary',
   size = 'large',
-  useTintColor = true,
+  tintColor = null,
   full = true,
   iconRight,
   iconLeft,
   loading = false,
   title = 'Button',
   onPress,
+  params,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
-  if (gradient?.length > 0 && type == 'primary') {
+  let state = 'enabled';
+  if (loading) {
+    state = 'loading';
+  }
+  if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
       colors: gradient,
       start: {x: 1, y: 0.5},
       end: {x: 0, y: 0.5},
     };
   }
+
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -209,9 +217,9 @@ const Button: FC<ButtonProps> = ({
    */
   const renderTitle = () => {
     const typography = getTypography();
-    const color = getTextColor();
+    const textColor = getTextColor();
     return (
-      <Text typography={typography} color={color} numberOfLines={1}>
+      <Text typography={typography} color={textColor} numberOfLines={1}>
         {title}
       </Text>
     );
@@ -223,7 +231,7 @@ const Button: FC<ButtonProps> = ({
   const renderLeading = () => {
     const iconSize = getIconSize();
     const marginRight = getIconSpace();
-    const color = useTintColor ? getTextColor() : undefined;
+    const textColor = tintColor ?? getTextColor();
 
     if (loading) {
       return (
@@ -237,7 +245,7 @@ const Button: FC<ButtonProps> = ({
               borderRadius: Spacing.M,
             },
           ]}>
-          <Loader type="spinner" color={color} />
+          <Loader type="spinner" color={getTextColor()} />
         </View>
       );
     }
@@ -248,7 +256,7 @@ const Button: FC<ButtonProps> = ({
             styles.leading,
             {width: iconSize, height: iconSize, marginRight},
           ]}>
-          <Icon color={color} source={iconLeft} size={iconSize} />
+          <Icon color={textColor} source={iconLeft} size={iconSize} />
         </View>
       );
     }
@@ -258,7 +266,7 @@ const Button: FC<ButtonProps> = ({
    * render trailing
    */
   const renderTrailing = () => {
-    const color = useTintColor ? getTextColor() : undefined;
+    const textColor = tintColor ?? getTextColor();
     const marginLeft = getIconSpace();
 
     if (iconRight) {
@@ -269,7 +277,7 @@ const Button: FC<ButtonProps> = ({
             styles.trailing,
             {width: iconSize, height: iconSize, marginLeft},
           ]}>
-          <Icon color={color} source={iconRight} size={iconSize} />
+          <Icon color={textColor} source={iconRight} size={iconSize} />
         </View>
       );
     }
@@ -291,19 +299,30 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      {renderLeading()}
-      {renderTitle()}
-      {renderTrailing()}
-      {gradientPros && (
-        <AnimationLinear {...gradientPros} style={styles.gradientView} />
-      )}
-      {gradientPros && <View style={styles.strokeView} />}
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'Button',
+        params,
+        state: state,
+        componentId: accessibilityLabel,
+        componentValue: title,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        accessibilityLabel={accessibilityLabel}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        {renderLeading()}
+        {renderTitle()}
+        {renderTrailing()}
+        {gradientPros && (
+          <AnimationLinear {...gradientPros} style={styles.gradientView} />
+        )}
+        {gradientPros && <View style={styles.strokeView} />}
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 

package/CheckBox/index.tsx

@@ -2,17 +2,20 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import {formatNameLength} from '../Application/utils';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
-  disabled,
+  disabled = false,
   onChange,
   style,
   label,
   indeterminate,
+  params,
+  accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const haveValue = value || indeterminate;
@@ -35,31 +38,39 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <TouchableOpacity
-      activeOpacity={0.8}
-      onPress={() => onChange?.(!value)}
-      disabled={disabled}
-      style={[style, styles.container]}>
-      <View
-        style={[
-          {borderColor, backgroundColor, borderWidth: 1},
-          styles.checkbox,
-        ]}>
-        {haveValue && (
-          <Icon
-            color={theme.colors.background.surface}
-            size={20}
-            source={iconSource}
-          />
-        )}
-      </View>
-      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'CheckBox',
+        params,
+        state: disabled ? 'disabled' : 'filled',
+        componentId: accessibilityLabel,
+        action: 'click',
+        componentLabel: formatNameLength(label || ''),
+        componentValue: indeterminate ? 'undetermined' : value,
+      }}>
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        activeOpacity={0.8}
+        onPress={() => onChange?.(!value)}
+        disabled={disabled}
+        style={[style, styles.container]}>
+        <View
+          style={[
+            {borderColor, backgroundColor, borderWidth: 1},
+            styles.checkbox,
+          ]}>
+          {haveValue && (
+            <Icon
+              color={theme.colors.background.surface}
+              size={20}
+              source={iconSource}
+            />
+          )}
+        </View>
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 
-CheckBox.defaultProps = {
-  disabled: false,
-};
-
 export {CheckBox};

package/CheckBox/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type CheckBoxProps = {
+export interface CheckBoxProps extends TouchableOpacityProps {
   /**
    * Represents whether the CheckBox is currently checked (`true`) or unchecked (`false`).
    */
@@ -35,4 +35,6 @@ export type CheckBoxProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-};
+
+  params?: any;
+}

package/Consts/colors+spacing+radius.ts

@@ -213,6 +213,20 @@ const Shadow = {
       elevation: 6,
     },
   }),
+
+  Pink: Platform.select({
+    ios: {
+      shadowColor: '#e27eb5',
+      shadowOffset: {width: 0, height: 6},
+      shadowOpacity: 0.25,
+      shadowRadius: 8,
+    },
+    android: {
+      elevation: 16,
+      shadowColor: '#e27eb5',
+      shadowOpacity: 0.25,
+    },
+  }),
 };
 
 export {Colors, Spacing, Radius, Shadow};

package/Icon/index.tsx

@@ -5,7 +5,12 @@ import {IconProps} from './types';
 import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
 
-const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
+const Icon: React.FC<IconProps> = ({
+  source = 'ic_back',
+  size = 24,
+  color,
+  style = {},
+}) => {
   const {theme} = useContext(ApplicationContext);
 
   /**
@@ -20,22 +25,18 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
   };
 
   const tintColorProps = color !== null && {
-    tintColor: color ?? theme.colors.text.default
-  }
+    tintColor: color ?? theme.colors.text.default,
+  };
 
   return (
     <Image
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
+      resizeMode="contain"
       {...tintColorProps}
     />
   );
 };
 
-Icon.defaultProps = {
-  source: 'ic_back',
-  size: 24,
-};
-
 export {Icon, IconSources, IconBankSources};

package/Icon/types.ts

@@ -1,4 +1,5 @@
 import {ImageStyle} from 'react-native-fast-image';
+import {StyleProp} from 'react-native';
 
 export type IconProps = {
   /**
@@ -15,7 +16,6 @@ export type IconProps = {
 
   /**
    *  Optional. Represents the color of the icon.
-   * It can be any valid color in @momo-kits/foundation.
    */
   color?: string | null;
 
@@ -23,5 +23,5 @@ export type IconProps = {
    *  Optional. Used to apply custom styling to the Icon component.
    * Accepts an object of style properties.
    */
-  style?: ImageStyle;
+  style?: StyleProp<ImageStyle>;
 };

package/IconButton/index.tsx

@@ -5,7 +5,7 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
@@ -26,13 +26,17 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * Optional. Defines the size of the IconButton.
    */
   size?: 'large' | 'small';
+
+  params?: any;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
-  type,
+  type = 'primary',
   icon,
   size,
   onPress,
+  params,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -121,19 +125,25 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      <Icon size={iconSize} source={icon} color={getIconColor()} />
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'IconButton',
+        params,
+        state: type === 'disabled' ? 'disabled' : 'enabled',
+        componentId: accessibilityLabel,
+        componentValue: icon,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        accessibilityLabel={accessibilityLabel}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        <Icon size={iconSize} source={icon} color={getIconColor()} />
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 
-IconButton.defaultProps = {
-  type: 'primary',
-  disabled: false,
-};
-
 export {IconButton};