@momo-kits/foundation 0.154.1-test.18 → 0.155.1-beta.1

package/Application/BottomSheet.tsx

@@ -12,7 +12,7 @@ import {
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ApplicationContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { BottomSheetParams } from './types';
 import { Colors, Radius, Spacing, Styles } from '../Consts';
 import { Text } from '../Text';
@@ -32,12 +32,15 @@ import layoutStyles from '../Layout/styles';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const heightDevice = Dimensions.get('screen').height;
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
   const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const {
     screen: Screen,
     options,
@@ -152,15 +155,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 
   useEffect(() => {
-      const backHandler = BackHandler.addEventListener(
-        'hardwareBackPress',
-        () => {
-          onDismiss();
-          return true;
-        },
-      );
-      return () => backHandler.remove();
-    }, [barrierDismissible, onDismiss]);
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        onDismiss();
+        return true;
+      },
+    );
+    return () => backHandler.remove();
+  }, [barrierDismissible, onDismiss]);
 
   /**
    * render header
@@ -283,6 +286,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               borderTopRightRadius: Radius.M,
               overflow: 'hidden',
             },
+            showBaseLineDebug && styles.debugBaseLine,
           ]}
         >
           {renderHeader()}
@@ -348,6 +352,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: Spacing.M,
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 
 export default BottomSheet;

package/Application/BottomTab/BottomTabBar.tsx

@@ -15,7 +15,7 @@ import { Icon } from '../../Icon';
 import { Text } from '../../Text';
 import { FloatingButtonProps } from '../types';
 import CustomBottomTabItem from './CustomBottomTabItem';
-import { ApplicationContext } from '../../Context';
+import { ApplicationContext, MiniAppContext } from '../../Context';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
@@ -62,6 +62,9 @@ export default function BottomTabBar({
   const paddingBottom = getPaddingBottom(insets);
   const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
 
+  const context = useContext<any>(MiniAppContext);
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   /**
    * render tab item
    */
@@ -147,7 +150,7 @@ export default function BottomTabBar({
     };
 
     return (
-      <View style={Styles.flex}>
+      <View style={[Styles.flex, showBaseLineDebug && styles.debugBaseLine]}>
         <TouchableOpacity
           onPress={floatingButton?.onPress}
           style={styles.floatingContainer}
@@ -184,6 +187,7 @@ export default function BottomTabBar({
     floatingButton?.icon,
     floatingButton?.label,
     floatingButton?.onPress,
+    showBaseLineDebug,
     theme.colors.primary,
   ]);
 
@@ -311,4 +315,5 @@ const styles = StyleSheet.create({
     borderBottomLeftRadius: 1,
     borderBottomRightRadius: 1,
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { TouchableOpacity, StyleSheet, Platform } from 'react-native';
 import {
   BottomTabBarButtonProps,
@@ -7,6 +7,8 @@ import {
 import { Route } from '@react-navigation/native';
 import { TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
+import { MiniAppContext } from '../../Context';
+import { Colors } from '../../Consts';
 
 type LabelType = NonNullable<BottomTabNavigationOptions['tabBarLabel']>;
 
@@ -58,6 +60,9 @@ const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
   badgeStyle,
   allowFontScaling,
 }) => {
+  const context = useContext<any>(MiniAppContext);
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const renderIcon = () => {
     if (icon === undefined) {
       return null;
@@ -123,6 +128,7 @@ const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
             : inactiveBackgroundColor,
         },
         style,
+        showBaseLineDebug && styles.debugBaseLine,
       ]}
     >
       {renderIcon()}
@@ -143,6 +149,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: '600',
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 
 export default CustomBottomTabItem;

package/Application/Components/HeaderAnimated.tsx

@@ -1,8 +1,7 @@
-import { Animated, StyleSheet, View } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 import { type HeaderAnimatedProps } from '../types';
-import React, { useContext } from 'react';
+import React from 'react';
 import { Image } from '../../Image';
-import { MiniAppContext } from '../../Context';
 import { Colors } from '../../Consts';
 
 /**
@@ -50,19 +49,10 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
           style={styles.full}
         />
       )}
-      <Verified />
     </Animated.View>
   );
 };
 
-const Verified: React.FC<any> = () => {
-  const context = useContext<any>(MiniAppContext);
-  if (context.environment === 'uat') {
-    return <View style={styles.verifiedDot} />;
-  }
-  return <View />;
-};
-
 const styles = StyleSheet.create({
   container: { width: '100%', aspectRatio: 16 / 9 },
   verifiedDot: {

package/Application/Components/HeaderBackground.tsx

@@ -2,8 +2,8 @@ import LinearGradient from 'react-native-linear-gradient';
 import { Animated, StyleSheet, View } from 'react-native';
 import React, { useContext } from 'react';
 import { HeaderBackgroundProps } from '../types';
-import { ApplicationContext } from '../../Context';
-import { Styles } from '../../Consts';
+import { ApplicationContext, MiniAppContext } from '../../Context';
+import { Colors, Styles } from '../../Consts';
 import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';
 
@@ -20,9 +20,12 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   headerBackground,
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerImage = headerBackground ?? theme.assets?.headerBackground;
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],
     outputRange: [0, 1],
@@ -30,7 +33,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   });
 
   return (
-    <View style={Styles.flex}>
+    <View style={[Styles.flex, showBaseLineDebug && styles.debugBaseLine]}>
       <BackgroundImageView
         useShadowHeader={useShadowHeader}
         heightHeader={'100%'}
@@ -74,6 +77,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     aspectRatio: 375 / 154,
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 
 export { HeaderBackground };

package/Application/Components/HeaderExtendHeader.tsx

@@ -43,11 +43,14 @@ const HeaderExtendHeader: React.FC<{
   headerBackground: customBackground,
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const animated = useRef(new Animated.Value(0));
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],
     outputRange: [0, 1],
@@ -95,7 +98,7 @@ const HeaderExtendHeader: React.FC<{
 
   if (inputSearchProps) {
     return (
-      <View style={{ zIndex: 0 }}>
+      <View style={[{ zIndex: 0 }, showBaseLineDebug && styles.debugBaseLine]}>
         <Animated.View style={{ height: height }} />
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
@@ -156,14 +159,13 @@ const HeaderExtendHeader: React.FC<{
             </Animated.View>
           </Animated.View>
         </Animated.View>
-        <Verified />
       </View>
     );
   }
 
   if (headerType === 'extended') {
     return (
-      <View style={{ zIndex: 0 }}>
+      <View style={[{ zIndex: 0 }, showBaseLineDebug && styles.debugBaseLine]}>
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
@@ -185,7 +187,6 @@ const HeaderExtendHeader: React.FC<{
           </LinearGradientAnimated>
         )}
         <View style={{ height: heightHeader }} />
-        <Verified />
       </View>
     );
   }
@@ -193,14 +194,6 @@ const HeaderExtendHeader: React.FC<{
   return <View />;
 };
 
-const Verified: React.FC<any> = () => {
-  const context = useContext<any>(MiniAppContext);
-  if (context.environment === 'uat') {
-    return <View style={styles.verifiedDot} />;
-  }
-  return <View />;
-};
-
 const styles = StyleSheet.create({
   headerBackground: {
     width: '100%',
@@ -226,6 +219,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     alignSelf: 'center',
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 
 export { HeaderExtendHeader };

package/Application/Components/HeaderRight.tsx

@@ -41,7 +41,6 @@ const HeaderRight: React.FC<any> = props => {
   return (
     <View style={styles.headerRightButton}>
       <HeaderToolkitAction {...props.headerRight} tintColor={props.tintColor} />
-      <Verified />
     </View>
   );
 };
@@ -313,14 +312,6 @@ const HeaderToolkitAction: React.FC<any> = ({
   );
 };
 
-const Verified: React.FC<any> = () => {
-  const context = useContext<any>(MiniAppContext);
-  if (context.environment === 'uat') {
-    return <View style={styles.verifiedDot} />;
-  }
-  return <View />;
-};
-
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,

package/Application/Components/HeaderTitle.tsx

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native';
 import { ApplicationContext, MiniAppContext } from '../../Context';
-import { exportFontFamily, useScaleSize, Text } from '../../Text';
+import { exportFontFamily, Text, useScaleSize } from '../../Text';
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import {
   TitleJourneyProps,
@@ -22,6 +22,10 @@ import { Skeleton } from '../../Skeleton';
  * default header title used for nav
  */
 const HeaderTitle: React.FC<any> = props => {
+  const context = useContext<any>(MiniAppContext);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const opacity = props.animatedValue?.interpolate(
     props.interpolate ?? {
       inputRange: [0, 200],
@@ -33,10 +37,13 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <View
       pointerEvents={'none'}
-      style={{
-        justifyContent: 'center',
-        maxWidth: Dimensions.get('window').width - 172,
-      }}
+      style={[
+        {
+          justifyContent: 'center',
+          maxWidth: Dimensions.get('window').width - 172,
+        },
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
     >
       <Animated.Text
         {...props}
@@ -56,7 +63,6 @@ const HeaderTitle: React.FC<any> = props => {
         ]}
         numberOfLines={1}
       />
-      <Verified />
     </View>
   );
 };
@@ -360,7 +366,6 @@ const TitleUser: React.FC<TitleUserProps> = ({
           )}
         </View>
       </View>
-      <Verified />
     </TouchableOpacity>
   );
 };
@@ -421,7 +426,6 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
           style={{ marginHorizontal: Spacing.XS }}
         />
       </View>
-      <Verified />
     </TouchableOpacity>
   );
 };
@@ -513,19 +517,10 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
           </Text>
         </View>
       )}
-      <Verified />
     </TouchableOpacity>
   );
 };
 
-const Verified: React.FC<any> = () => {
-  const context = useContext<any>(MiniAppContext);
-  if (context.environment === 'uat') {
-    return <View style={styles.verifiedDot} />;
-  }
-  return <View />;
-};
-
 const styles = StyleSheet.create({
   rowJourney: { flexDirection: 'row', width: '100%', alignItems: 'flex-start' },
   verifiedDot: {
@@ -595,6 +590,7 @@ const styles = StyleSheet.create({
     borderRadius: Radius.XS,
     overflow: 'hidden',
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 
 export { HeaderTitle, TitleCustom };

package/Application/Components/NavigationButton.tsx

@@ -38,19 +38,10 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         />
       </TouchableOpacity>
       {showBadge && <BadgeDot size={'small'} style={styles.badgeDot} />}
-      <Verified />
     </View>
   );
 };
 
-const Verified: React.FC<any> = () => {
-  const context = useContext<any>(MiniAppContext);
-  if (context.environment === 'uat') {
-    return <View style={styles.verifiedDot} />;
-  }
-  return <View />;
-};
-
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,

package/Application/Components/SearchHeader.tsx

@@ -1,4 +1,4 @@
-import { Radius, Spacing, Styles } from '../../Consts';
+import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
 import {
   Animated,
@@ -29,8 +29,8 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const { width: screenWidth } = Dimensions.get('window');
 
     const animated = useRef(new Animated.Value(0));
-    const leftPosition = props?.leftPosition || BACK_WIDTH + 20;
-    const headerRightWidth = props?.headerRightWidth || 73;
+    const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
+    const headerRightWidth = props?.headerRightWidth ?? 73;
 
     useEffect(() => {
       const listener = animatedValue?.addListener(({ value }) => {
@@ -77,8 +77,12 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
       return true;
     };
 
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
     return (
-      <View style={styles.container}>
+      <View
+        style={[styles.container, showBaseLineDebug && styles.debugBaseLine]}
+      >
         <View
           style={[
             Styles.flex,
@@ -117,6 +121,7 @@ const styles = StyleSheet.create({
   searchAction: {
     marginLeft: Spacing.M,
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 
 export { SearchHeader };

package/Application/Localize.ts

@@ -8,8 +8,8 @@ class Localize {
 
   constructor(assets: LocalizationObject) {
     this.assets = {
-      vi: { ...assets?.vi, ...defaultLanguage.vi },
-      en: { ...assets?.en, ...defaultLanguage.en },
+      vi: { ...defaultLanguage.vi, ...assets?.vi },
+      en: { ...defaultLanguage.en, ...assets?.en },
     };
     this.currentLanguage = 'vi';
     if (NativeModules?.RNResource?.getResourceSync('language') === 'en') {

package/Badge/Badge.tsx

@@ -2,7 +2,7 @@ import React, { FC, useContext } from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { useComponentId } from '../Application';
-import { ApplicationContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { BadgeProps } from './types';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Text, useScaleSize } from '../Text';
@@ -14,8 +14,11 @@ const Badge: FC<BadgeProps> = ({
   accessibilityLabel,
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const { componentId } = useComponentId('Badge', accessibilityLabel);
   const scaledSize = useScaleSize(16);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   
   const styles = StyleSheet.create({
     badge: {
@@ -40,6 +43,10 @@ const Badge: FC<BadgeProps> = ({
       backgroundColor: 'transparent',
       alignSelf: 'baseline',
     },
+    debugBaseLine: {
+      borderWidth: 1,
+      borderColor: Colors.green_06,
+    },
   });
 
   const isValidatedColor = () => {
@@ -77,7 +84,7 @@ const Badge: FC<BadgeProps> = ({
   }
 
   return (
-    <View style={[style, styles.badgeContainer]}>
+    <View style={[style, styles.badgeContainer, showBaseLineDebug && styles.debugBaseLine]}>
       <View
         style={[styles.badge, { backgroundColor: badgeColor }]}
         accessibilityLabel={componentId}

package/Badge/BadgeDot.tsx

@@ -1,12 +1,16 @@
-import React, {FC} from 'react';
-import {View} from 'react-native';
-import {BadgeDotProps} from './types';
+import React, { FC, useContext } from 'react';
+import { View } from 'react-native';
+import { BadgeDotProps } from './types';
 import styles from './styles';
+import { MiniAppContext } from '../Context';
 
-const BadgeDot: FC<BadgeDotProps> = ({size = 'large', style}) => {
+const BadgeDot: FC<BadgeDotProps> = ({ size = 'large', style }) => {
+  const context = useContext<any>(MiniAppContext);
   let dotStyle;
   let dotContainerStyle;
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   if (size === 'large') {
     dotStyle = styles.dot;
     dotContainerStyle = styles.dotContainer;
@@ -16,7 +20,13 @@ const BadgeDot: FC<BadgeDotProps> = ({size = 'large', style}) => {
   }
 
   return (
-    <View style={[style, dotContainerStyle]}>
+    <View
+      style={[
+        style,
+        dotContainerStyle,
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+    >
       <View style={[dotStyle]} />
     </View>
   );

package/Badge/BadgeRibbon.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { DownTail, UpTail } from './Shape';
 import styles from './styles';
 import { BadgeRibbonProps } from './types';
-import { ApplicationContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { Text } from '../Text';
 import { Colors } from '../Consts';
 import { Image } from '../Image';
@@ -15,9 +15,12 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
   style = {},
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const isRight = position === 'top_right' || position === 'bottom_right';
   const isUpTail = position === 'bottom_left' || position === 'top_right';
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const ribbonRotate = useMemo(() => (isRight ? '180deg' : '0deg'), [isRight]);
   const textRotate = ribbonRotate;
   const textMargin = useMemo(() => (isUpTail ? 4 : 0), [isUpTail]);
@@ -93,7 +96,12 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
     <View
       collapsable={false}
       key={isRight ? 'right' : 'left'}
-      style={[styles.ribbon, style, { transform: ribbonTransform }]}
+      style={[
+        styles.ribbon,
+        style,
+        { transform: ribbonTransform },
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
     >
       {ribbonTail}
       {content}

package/Badge/styles.ts

@@ -121,4 +121,5 @@ export default StyleSheet.create({
   },
   skew: {width: 8, height: 16},
   tail: {width: 5, height: 20},
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/Button/index.tsx

@@ -13,6 +13,7 @@ import { useComponentId } from '../Application';
 import {
   ApplicationContext,
   ComponentContext,
+  MiniAppContext,
   SkeletonContext,
 } from '../Context';
 import { Text } from '../Text';
@@ -71,10 +72,13 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const { theme, config } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const skeleton = useContext(SkeletonContext);
   const animationRef = useRef<LottieView>(null);
   const pressAnim = useSharedValue(0);
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const componentName = 'Button';
   const { componentId } = useComponentId(
     `${componentName}/${title}`,
@@ -111,9 +115,7 @@ const Button: FC<ButtonProps> = ({
     const hasLeft = !!left;
     const hasRight = !!right;
 
-    const loadingOnLeft =
-      (!hasLeft && !hasRight) ||
-      (hasLeft && !hasRight);
+    const loadingOnLeft = (!hasLeft && !hasRight) || (hasLeft && !hasRight);
 
     return isLeft === loadingOnLeft;
   };
@@ -316,10 +318,7 @@ const Button: FC<ButtonProps> = ({
     full && { width: '100%' },
     loading && { opacity: 0.75 },
   ]);
-  const buttonStyle = StyleSheet.flatten([
-    sizeStyle,
-    typeStyle,
-  ]);
+  const buttonStyle = StyleSheet.flatten([sizeStyle, typeStyle]);
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -351,7 +350,7 @@ const Button: FC<ButtonProps> = ({
         }}
         disabled={isDisabled}
         activeOpacity={0.75}
-        style={containerStyle}
+        style={[containerStyle, showBaseLineDebug && styles.debugBaseLine]}
         onPressIn={animateIn}
         onPressOut={animateOut}
       >

package/Button/styles.ts

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { Colors } from '../Consts';
 
 export default StyleSheet.create({
   large: {
@@ -60,4 +61,5 @@ export default StyleSheet.create({
   skeleton: {
     paddingHorizontal: 0,
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });