@momo-kits/foundation 0.154.2-beta.4 → 0.155.1-beta.2

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 },
 });

package/CheckBox/index.tsx

@@ -3,7 +3,11 @@ import { TouchableOpacity, View } from 'react-native';
 import { CheckBoxProps } from './types';
 import styles from './styles';
 import { useComponentId } from '../Application';
-import { ApplicationContext, ComponentContext } from '../Context';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
 
@@ -19,6 +23,7 @@ const CheckBox: FC<CheckBoxProps> = ({
   ...props
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
@@ -29,6 +34,8 @@ const CheckBox: FC<CheckBoxProps> = ({
     props.accessibilityLabel,
   );
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   if (haveValue) {
     borderColor = theme.colors.primary;
     backgroundColor = theme.colors.primary;
@@ -64,7 +71,11 @@ const CheckBox: FC<CheckBoxProps> = ({
           disabled,
           ...accessibilityState,
         }}
-        style={[style, styles.container]}
+        style={[
+          style,
+          styles.container,
+          showBaseLineDebug && styles.debugBaseLine,
+        ]}
       >
         <View
           style={[

package/CheckBox/styles.ts

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
-import {Radius, Spacing} from '../Consts';
+import { StyleSheet } from 'react-native';
+import { Radius, Spacing, Colors } from '../Consts';
 
 export default StyleSheet.create({
   checkbox: {
@@ -11,6 +11,7 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  container: {flexDirection: 'row', alignItems: 'center'},
-  label: {flexShrink: 1}
+  container: { flexDirection: 'row', alignItems: 'center' },
+  label: { flexShrink: 1 },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/Icon/index.tsx

@@ -2,8 +2,10 @@ import React, { useContext } from 'react';
 import IconSources from '../Assets/icon.json';
 import IconBankSources from '../Assets/icon_bank.json';
 import { IconProps } from './types';
-import { ApplicationContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
+import { StyleSheet } from 'react-native';
+import { Colors } from '../Consts';
 
 const Icon: React.FC<IconProps> = ({
   source = 'ic_back',
@@ -13,6 +15,9 @@ const Icon: React.FC<IconProps> = ({
   ...props
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
    * get icon source maps or remote http
@@ -34,11 +39,19 @@ const Icon: React.FC<IconProps> = ({
       {...props}
       loading={false}
       source={getIconSource()}
-      style={[style, { width: size, height: size }]}
+      style={[
+        style,
+        { width: size, height: size },
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
       resizeMode="contain"
       {...tintColorProps}
     />
   );
 };
 
+const styles = StyleSheet.create({
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});
+
 export { Icon, IconSources, IconBankSources };

package/IconButton/index.tsx

@@ -4,7 +4,11 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import { ApplicationContext, ComponentContext } from '../Context';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
 import { Colors } from '../Consts';
 import { Icon } from '../Icon';
 import styles from './styles';
@@ -40,6 +44,9 @@ const IconButton: React.FC<IconButtonProps> = ({
   ...rest
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
    * get size icon button
@@ -126,7 +133,7 @@ const IconButton: React.FC<IconButtonProps> = ({
         {...rest}
         disabled={type === 'disabled'}
         activeOpacity={activeOpacity}
-        style={buttonStyle}
+        style={[buttonStyle, showBaseLineDebug && styles.debugBaseLine]}
       >
         <Icon size={iconSize} source={icon} color={getIconColor()} />
       </TouchableOpacity>

package/IconButton/styles.ts

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
-import {Radius} from '../Consts';
+import { StyleSheet } from 'react-native';
+import { Radius, Colors } from '../Consts';
 
 export default StyleSheet.create({
   large: {
@@ -16,4 +16,5 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/Image/index.tsx

@@ -5,6 +5,7 @@ import styles from './styles';
 import {
   ApplicationContext,
   ComponentContext,
+  MiniAppContext,
   SkeletonContext,
 } from '../Context';
 import { Skeleton } from '../Skeleton';
@@ -31,13 +32,18 @@ const Image: React.FC<ImageProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const component: any = useContext(ComponentContext);
+  const context = useContext<any>(MiniAppContext);
   const skeleton = useContext(SkeletonContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   let accessibilityLabel: any = `img|${getImageName(source)}`;
   if (component?.componentId) {
-    accessibilityLabel = `${component?.componentId}|img`;
+    accessibilityLabel = `${component?.componentId}|img|${getImageName(
+      source,
+    )}`;
   }
   /**
    * render content loading | fail | rendered
@@ -73,7 +79,11 @@ const Image: React.FC<ImageProps> = ({
       {...rest}
       {...{ accessibilityLabel: rest.accessibilityLabel ?? accessibilityLabel }}
       source={source}
-      style={[styles.container, style]}
+      style={[
+        styles.container,
+        style,
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
       onProgress={() => {
         error.current = false;
         if (status !== 'loading' && loading) {

package/Image/styles.ts

@@ -1,5 +1,7 @@
-import {StyleSheet} from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Colors } from '../Consts';
 
 export default StyleSheet.create({
   container: {},
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/Input/Input.tsx

@@ -26,7 +26,11 @@ import {
 import { InputProps } from './index';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
-import { ApplicationContext, ComponentContext } from '../Context';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
 
 /**
  * Input default component
@@ -69,6 +73,7 @@ const Input = forwardRef(
     ref,
   ) => {
     const { theme } = useContext(ApplicationContext);
+    const context = useContext<any>(MiniAppContext);
     const scaledFontSize = useScaleSize(14);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
     const [focused, setFocused] = useState(false);
@@ -76,6 +81,8 @@ const Input = forwardRef(
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'Input';
 
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,
       props.accessibilityLabel,
@@ -250,7 +257,13 @@ const Input = forwardRef(
           state: inputState,
         }}
       >
-        <View style={[style, styles.wrapper]}>
+        <View
+          style={[
+            style,
+            styles.wrapper,
+            showBaseLineDebug && styles.debugBaseLine,
+          ]}
+        >
           {renderInputView()}
           <ErrorView
             errorMessage={errorMessage}

package/Input/InputDropDown.tsx

@@ -1,7 +1,11 @@
 import React, { useContext } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { useComponentId } from '../Application';
-import { ApplicationContext, ComponentContext } from '../Context';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
 import { Icon } from '../Icon';
 import {
   ErrorView,
@@ -35,9 +39,12 @@ const InputDropDown = ({
   ...props
 }: InputDropDownProps) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
   const componentName = 'InputDropDown';
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const { componentId } = useComponentId(
     `${componentName}/${placeholder}`,
     props.accessibilityLabel,
@@ -133,7 +140,11 @@ const InputDropDown = ({
         accessibilityLabel={`${componentId}|touch`}
         accessibilityState={{ disabled: disabled as boolean }}
         activeOpacity={0.6}
-        style={[style, styles.wrapper]}
+        style={[
+          style,
+          styles.wrapper,
+          showBaseLineDebug && styles.debugBaseLine,
+        ]}
       >
         {renderInputView()}
         <ErrorView

package/Input/InputMoney.tsx

@@ -15,7 +15,11 @@ import {
   View,
 } from 'react-native';
 import { useComponentId } from '../Application';
-import { ApplicationContext, ComponentContext } from '../Context';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize } from '../Text';
 import { Spacing } from '../Consts';
@@ -62,6 +66,7 @@ const InputMoney = forwardRef(
     ref,
   ) => {
     const { theme } = useContext(ApplicationContext);
+    const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
     const scaledFontSize = useScaleSize(20);
     const [focused, setFocused] = useState(false);
@@ -71,6 +76,8 @@ const InputMoney = forwardRef(
     const inputRef = useRef<TextInput>(null);
     const componentName = 'InputMoney';
 
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,
       props.accessibilityLabel,
@@ -295,7 +302,13 @@ const InputMoney = forwardRef(
           state: inputState,
         }}
       >
-        <View style={[style, styles.wrapper]}>
+        <View
+          style={[
+            style,
+            styles.wrapper,
+            showBaseLineDebug && styles.debugBaseLine,
+          ]}
+        >
           {renderInputView()}
           <ErrorView
             errorMessage={errorMessage}

package/Input/InputOTP.tsx

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import {
   Animated,
+  PixelRatio,
   TextInput,
   TextInputFocusEvent,
   TouchableOpacity,
@@ -22,7 +23,11 @@ import { CaretProps, InputOTPProps } from './index';
 import styles from './styles';
 import { Icon } from '../Icon';
 import SystemTextInput from './SystemTextInput';
-import { ApplicationContext, ComponentContext } from '../Context';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
 
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   const DURATION = 300;
@@ -90,9 +95,12 @@ const InputOTP = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput | null>(null);
     const { theme } = useContext(ApplicationContext);
+    const context = useContext<any>(MiniAppContext);
 
     const componentName = 'InputOTP';
 
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,
       props.accessibilityLabel,
@@ -135,6 +143,8 @@ const InputOTP = forwardRef(
       _onChangeText('');
     };
 
+    const fontScale = PixelRatio.getFontScale();
+
     const renderInputs = (inputLength: number) => {
       const TextInputs: React.ReactNode[] = [];
       for (let i = 0; i < inputLength; i++) {
@@ -182,7 +192,8 @@ const InputOTP = forwardRef(
                 style={
                   (index !== value.length - 1 ||
                     (focused && value.length !== MAX_LENGTH)) && {
-                    marginRight: Spacing.L,
+                    marginRight:
+                      fontScale > 1 && value.length > 6 ? Spacing.M : Spacing.L,
                   }
                 }
                 typography={'header_m_bold'}
@@ -265,7 +276,13 @@ const InputOTP = forwardRef(
           state: 'enabled',
         }}
       >
-        <View style={[style, styles.otpWrapper]}>
+        <View
+          style={[
+            style,
+            styles.otpWrapper,
+            showBaseLineDebug && styles.debugBaseLine,
+          ]}
+        >
           {renderInputView()}
           <ErrorView
             errorMessage={errorMessage}

package/Input/InputPhoneNumber.tsx

@@ -14,7 +14,11 @@ import {
   View,
 } from 'react-native';
 import { useComponentId } from '../Application';
-import { ApplicationContext, ComponentContext } from '../Context';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
 import { Colors, Spacing, Styles } from '../Consts';
 import { Icon } from '../Icon';
 import { useScaleSize, Text } from '../Text';
@@ -62,12 +66,15 @@ const InputPhoneNumber = forwardRef(
     ref,
   ) => {
     const { theme } = useContext(ApplicationContext);
+    const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
     const [focused, setFocused] = useState(false);
     const haveValue = !!value || !!defaultValue;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'InputPhoneNumber';
 
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,
       props.accessibilityLabel,
@@ -249,7 +256,13 @@ const InputPhoneNumber = forwardRef(
           state: inputState,
         }}
       >
-        <View style={[style, styles.wrapper]}>
+        <View
+          style={[
+            style,
+            styles.wrapper,
+            showBaseLineDebug && styles.debugBaseLine,
+          ]}
+        >
           {renderInputView()}
           <ErrorView
             errorMessage={errorMessage}

package/Input/InputSearch.tsx

@@ -17,7 +17,11 @@ import {
   View,
 } from 'react-native';
 import { useComponentId } from '../Application';
-import { ApplicationContext, ComponentContext } from '../Context';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
 import { Icon } from '../Icon';
 import { Text, useScaleSize } from '../Text';
 import { InputRef, InputSearchProps } from './index';
@@ -138,8 +142,11 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   ref,
 ) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const scaledFontSize = useScaleSize(14);
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const [focused, setFocused] = useState(false);
   const [internalText, setInternalText] = useState(defaultValue || '');
   const currentValue = value !== undefined ? value : internalText;
@@ -298,7 +305,13 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         state: inputState,
       }}
     >
-      <View style={[style, styles.searchInputContainer]}>
+      <View
+        style={[
+          style,
+          styles.searchInputContainer,
+          showBaseLineDebug && styles.debugBaseLine,
+        ]}
+      >
         <View
           style={[
             styles.searchInputWrapper,

package/Input/InputTextArea.tsx

@@ -13,16 +13,11 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { ApplicationContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { Icon } from '../Icon';
 import { Text, useScaleSize } from '../Text';
 import { Spacing } from '../Consts';
-import {
-  ErrorView,
-  FloatingView,
-  getBorderColor,
-  MAX_LENGTH,
-} from './common';
+import { ErrorView, FloatingView, getBorderColor, MAX_LENGTH } from './common';
 import { InputTextAreaProps } from './index';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
@@ -52,16 +47,17 @@ const InputTextArea = forwardRef(
     }: InputTextAreaProps,
     ref,
   ) => {
-
     const componentName = 'InputTextArea';
 
-
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,
       props.accessibilityLabel,
     );
     const { theme } = useContext(ApplicationContext);
+    const context = useContext<any>(MiniAppContext);
     const DEFAULT_HEIGHT = useScaleSize(104);
+
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
     const scaledFontSize = useScaleSize(14);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
@@ -201,7 +197,13 @@ const InputTextArea = forwardRef(
     };
 
     return (
-      <View style={[style, styles.wrapper]}>
+      <View
+        style={[
+          style,
+          styles.wrapper,
+          showBaseLineDebug && styles.debugBaseLine,
+        ]}
+      >
         {renderInputView()}
         <ErrorView
           errorMessage={errorMessage}

package/Input/styles.ts

@@ -222,4 +222,5 @@ export default StyleSheet.create({
     width: 1,
     marginLeft: Spacing.M,
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/Layout/Card.tsx

@@ -4,7 +4,7 @@ import { useGridSystem } from './utils';
 import { GridContextProps } from './types';
 import { GridContext, GridSystem } from './index';
 import { Image } from '../Image';
-import { ApplicationContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import styles from './styles';
 import { Colors, Radius, Shadow, Spacing } from '../Consts';
 
@@ -28,8 +28,11 @@ const Card: React.FC<CardProps> = ({
   ...props
 }) => {
   const { showGrid, theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const { numberOfColumns } = useGridSystem();
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const gutterSize = 8;
   const margin = 12;
   const widthSection = Dimensions.get('window').width - margin * 2;
@@ -81,6 +84,7 @@ const Card: React.FC<CardProps> = ({
           },
           !!backgroundImage && { backgroundColor: undefined },
           useShadow && Shadow.Light,
+          showBaseLineDebug && styles.debugBaseLine,
         ]}
       >
         {!!backgroundImage && (

package/Layout/Item.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
 import { GridContext } from './index';
-import { ApplicationContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import styles from './styles';
 import { SpanNumber } from './types';
 
@@ -24,8 +24,11 @@ const Item: React.FC<ItemProps> = ({
   style,
 }) => {
   const { showGrid } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const grid = useContext(GridContext);
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   /**
    * render overlay view only dev mode
    */
@@ -42,6 +45,7 @@ const Item: React.FC<ItemProps> = ({
           width: grid.getSizeSpan(widthSpan ?? grid.numberOfColumns),
           height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
         },
+        showBaseLineDebug && styles.debugBaseLine,
       ]}
     >
       {children}