@momo-kits/foundation 0.154.2-beta.1 → 0.155.1-beta.1

package/Pagination/PaginationNumber.tsx

@@ -1,17 +1,24 @@
-import React, {FC} from 'react';
-import {View} from 'react-native';
-import {ChildPaginationProps} from './types';
+import React, { FC, useContext } from 'react';
+import { View } from 'react-native';
+import { ChildPaginationProps } from './types';
 import styles from './styles';
-import {Text} from '../Text';
-import {Colors} from '../Consts';
+import { Text } from '../Text';
+import { Colors } from '../Consts';
+import { MiniAppContext } from '../Context';
 
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
   style,
 }) => {
+  const context = useContext<any>(MiniAppContext);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   return (
-    <View style={[style, styles.row]}>
+    <View
+      style={[style, styles.row, showBaseLineDebug && styles.debugBaseLine]}
+    >
       <View style={styles.paginationNumberContainer}>
         <Text color={Colors.black_01} typography={'label_default_medium'}>{`${
           activeIndex + 1

package/Pagination/PaginationScroll.tsx

@@ -2,7 +2,7 @@ import React, { FC, useContext, useRef, useState } from 'react';
 import { Animated, View } from 'react-native';
 import { ScrollIndicatorProps } from './types';
 import styles from './styles';
-import { ApplicationContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
@@ -12,10 +12,13 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   scrollViewRef,
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const left = useRef(new Animated.Value(0)).current;
   const [scrollViewWidth, setScrollViewWidth] = useState(0);
   const [scrollContentWidth, setScrollContentWidth] = useState(0);
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const translateX = () => {
     if (scrollViewWidth && scrollContentWidth) {
       const value = left.interpolate({
@@ -80,7 +83,13 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
     );
   };
   return (
-    <View style={[style, styles.scrollContainer]}>
+    <View
+      style={[
+        style,
+        styles.scrollContainer,
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+    >
       {renderScrollView()}
       {scrollContentWidth > scrollViewWidth && renderIndicator()}
     </View>

package/Pagination/PaginationWhiteDot.tsx

@@ -1,15 +1,20 @@
-import React, {FC} from 'react';
-import {View} from 'react-native';
-import {ChildPaginationProps} from './types';
+import React, { FC, useContext } from 'react';
+import { View } from 'react-native';
+import { ChildPaginationProps } from './types';
 import styles from './styles';
 import Dot from './Dot';
-import {Colors, Spacing} from '../Consts';
+import { Colors, Spacing } from '../Consts';
+import { MiniAppContext } from '../Context';
 
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
   style,
 }) => {
+  const context = useContext<any>(MiniAppContext);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const renderDots = () => {
     const dots: React.ReactElement[] = [];
     for (let i = 0; i < dataLength; i++) {
@@ -17,8 +22,8 @@ const PaginationWhiteDot: FC<ChildPaginationProps> = ({
         <Dot
           key={`Dot${i}`}
           style={[
-            i !== dataLength - 1 ? {marginRight: Spacing.XS} : {},
-            {backgroundColor: Colors.black_01},
+            i !== dataLength - 1 ? { marginRight: Spacing.XS } : {},
+            { backgroundColor: Colors.black_01 },
           ]}
           active={activeIndex === i}
         />,
@@ -27,7 +32,9 @@ const PaginationWhiteDot: FC<ChildPaginationProps> = ({
     return dots;
   };
   return (
-    <View style={[style, styles.row]}>
+    <View
+      style={[style, styles.row, showBaseLineDebug && styles.debugBaseLine]}
+    >
       <View style={styles.paginationWhiteContainer}>{renderDots()}</View>
     </View>
   );

package/Pagination/styles.ts

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '../Consts';
+import { StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '../Consts';
 
 export default StyleSheet.create({
   activeDot: {
@@ -46,5 +46,6 @@ export default StyleSheet.create({
     height: 4,
     borderRadius: Radius.XS,
   },
-  row: {flexDirection: 'row'},
+  row: { flexDirection: 'row' },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/Popup/PopupNotify.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Button } from '../Button';
-import { Radius, Spacing, Styles } from '../Consts';
+import { Colors, Radius, Spacing, Styles } from '../Consts';
 import { Icon } from '../Icon';
 import { Image } from '../Image';
 import { useScaleSize, Text } from '../Text';
@@ -33,6 +33,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const { width: widthDevice } = Dimensions.get('window');
   const scaledMaxHeight = useScaleSize(172);
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   const closeAction = useRef('touch_outside');
   let descriptionStyle = {};
   let Description: any = View;
@@ -211,6 +212,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           backgroundColor: theme.colors.background.surface,
           width: widthDevice - Spacing.XL * 2,
         },
+        showBaseLineDebug && styles.debugBaseLine,
       ]}
     >
       {!!image && <Image source={{ uri: image }} style={styles.image} />}
@@ -264,6 +266,7 @@ const styles = StyleSheet.create({
   container: {
     borderRadius: Radius.L,
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
   image: {
     borderTopLeftRadius: Radius.L,
     borderTopRightRadius: Radius.L,

package/Popup/PopupPromotion.tsx

@@ -3,7 +3,7 @@ import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { PopupPromotionProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
-import { Radius, Spacing } from '../Consts';
+import { Colors, Radius, Spacing } from '../Consts';
 import { Icon } from '../Icon';
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
@@ -18,6 +18,8 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   const { width: widthDevice } = Dimensions.get('window');
   const closeAction = useRef('touch_outside');
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   /**
    * tracking
    */
@@ -95,7 +97,10 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View accessibilityLabel={'popup_promotion'}>
+    <View
+      accessibilityLabel={'popup_promotion'}
+      style={showBaseLineDebug && styles.debugBaseLine}
+    >
       <TouchableOpacity onPress={() => onAction(onActionClick)}>
         <Image
           source={{
@@ -119,6 +124,7 @@ const styles = StyleSheet.create({
     aspectRatio: 0.72,
     width: '100%',
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
   iconCloseContainer: {
     width: '100%',
     flexDirection: 'row',

package/Radio/index.tsx

@@ -5,7 +5,11 @@ import { RadioProps } from './types';
 import { Text } from '../Text';
 import styles from './styles';
 import { useComponentId } from '../Application';
-import { ApplicationContext, ComponentContext } from '../Context';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
 import { Spacing } from '../Consts';
 
 const Radio: FC<RadioProps> = ({
@@ -21,12 +25,15 @@ const Radio: FC<RadioProps> = ({
   ...props
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const selected = value === groupValue;
   const componentName = 'Radio';
   const { componentId } = useComponentId(
     `${componentName}${label ? `/${label}` : ''}`,
     accessibilityLabel,
   );
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   let disabledStyle = {};
   let checkBoxStyle = {
     borderWidth: 2,
@@ -67,6 +74,7 @@ const Radio: FC<RadioProps> = ({
             flexDirection: 'row',
             alignItems: 'center',
           },
+          showBaseLineDebug && styles.debugBaseLine,
         ]}
         accessibilityState={{
           checked: selected,

package/Radio/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({
   radio: {
@@ -7,8 +7,9 @@ export default StyleSheet.create({
     width: 20,
     borderRadius: Radius.M,
   },
-  container: {flex: 1},
+  container: { flex: 1 },
   radioText: {
     marginRight: Spacing.M,
-  }
+  },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/Switch/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React, { FC, useContext } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { SwitchProps } from './types';
 import styles from './styles';
 import { Colors } from '../Consts';
 import { useComponentId } from '../Application';
-import { ComponentContext } from '../Context';
+import { ComponentContext, MiniAppContext } from '../Context';
 
 const Switch: FC<SwitchProps> = ({
   value = false,
@@ -15,12 +15,15 @@ const Switch: FC<SwitchProps> = ({
   accessibilityLabel,
   ...props
 }) => {
+  const context = useContext<any>(MiniAppContext);
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
   const componentName = 'Switch';
 
   const { componentId } = useComponentId(componentName, accessibilityLabel);
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
@@ -49,6 +52,7 @@ const Switch: FC<SwitchProps> = ({
           style,
           styles.container,
           { backgroundColor, alignItems: circleAlign },
+          showBaseLineDebug && styles.debugBaseLine,
         ]}
       >
         <View

package/Switch/styles.ts

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

package/Tag/index.tsx

@@ -1,10 +1,11 @@
-import React, {FC} from 'react';
-import {View, StyleSheet} from 'react-native';
-import {TagProps} from './types';
-import {Colors, Radius, Spacing} from '../Consts';
-import {Icon} from '../Icon';
-import {Text, useScaleSize} from '../Text';
-import {useComponentId} from '../Application';
+import React, { FC, useContext } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { TagProps } from './types';
+import { Colors, Radius, Spacing } from '../Consts';
+import { Icon } from '../Icon';
+import { Text, useScaleSize } from '../Text';
+import { useComponentId } from '../Application';
+import { MiniAppContext } from '../Context';
 
 const backgroundColor = {
   default: Colors.black_04,
@@ -33,9 +34,12 @@ const Tag: FC<TagProps> = ({
   customColor,
   accessibilityLabel,
 }) => {
+  const context = useContext<any>(MiniAppContext);
   const scaledHeight24 = useScaleSize(24);
   const scaledHeight18 = useScaleSize(18);
-  
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const styles = StyleSheet.create({
     container: {
       paddingHorizontal: Spacing.S,
@@ -56,21 +60,22 @@ const Tag: FC<TagProps> = ({
     icon: {
       marginRight: Spacing.XS,
     },
+    debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
   });
-  
+
   let labelColor = textColor[color];
   let tagColor = backgroundColor[color];
   let sizeStyle = styles.mediumContainer;
   const componentName = 'Tag';
 
-  const {componentId} = useComponentId(
+  const { componentId } = useComponentId(
     `${componentName}/${label}`,
-    accessibilityLabel
+    accessibilityLabel,
   );
   //Check if custom color is [color]_03 (only check in dev mode)
   const validateCustomColor = (color: string) => {
     if (__DEV__) {
-      const colorCore: {[key: string]: string} = Colors;
+      const colorCore: { [key: string]: string } = Colors;
       const primaryColors = Object.keys(Colors)
         .map(i => {
           if (i.includes('_03')) {
@@ -93,8 +98,14 @@ const Tag: FC<TagProps> = ({
 
   return (
     <View
-      style={[style, sizeStyle, {backgroundColor: tagColor}]}
-      accessibilityLabel={componentId}>
+      style={[
+        style,
+        sizeStyle,
+        { backgroundColor: tagColor },
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
+      accessibilityLabel={componentId}
+    >
       {!!icon && (
         <Icon
           style={styles.icon}
@@ -106,11 +117,12 @@ const Tag: FC<TagProps> = ({
       <Text
         color={labelColor}
         typography={'label_s_medium'}
-        accessibilityLabel={`${componentId}|text`}>
+        accessibilityLabel={`${componentId}|text`}
+      >
         {label}
       </Text>
     </View>
   );
 };
 
-export {Tag};
+export { Tag };

package/Title/index.tsx

@@ -8,7 +8,7 @@ import {
 import { Icon } from '../Icon';
 import { useScaleSize, Text } from '../Text';
 import { useComponentId } from '../Application';
-import { ApplicationContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { Badge } from '../Badge';
 import { Colors } from '../Consts';
 import styles from './styles';
@@ -35,9 +35,12 @@ const Title: FC<TitleProps> = ({
   style,
 }) => {
   const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const [badgeWidth, setBadgeWidth] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
 
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
   const size18 = useScaleSize(18);
   const size22 = useScaleSize(22);
   // Dynamic styles using useScaleSize hook
@@ -263,7 +266,12 @@ const Title: FC<TitleProps> = ({
 
   return (
     <View
-      style={[style, styles.wrapper, isSection && styles.margin]}
+      style={[
+        style,
+        styles.wrapper,
+        isSection && styles.margin,
+        showBaseLineDebug && styles.debugBaseLine,
+      ]}
       accessibilityLabel={componentId}
     >
       {renderIcon()}

package/Title/styles.ts

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '../Consts';
+import { StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '../Consts';
 
 export default StyleSheet.create({
   actionIcon: {
@@ -40,7 +40,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  contentView: {marginRight: Spacing.S, flex: 1},
+  contentView: { marginRight: Spacing.S, flex: 1 },
   title: {
     fontWeight: 'bold',
     color: Colors.black_17,
@@ -51,4 +51,5 @@ export default StyleSheet.create({
   description: {
     marginTop: Spacing.XS,
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.154.2-beta.1",
+    "version": "0.155.1-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Tag/styles.ts

@@ -1,25 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Radius, Spacing} from '../Consts';
-import {scaleSize} from '../Text';
-
-export default StyleSheet.create({
-  container: {
-    paddingHorizontal: Spacing.S,
-    borderRadius: Radius.S,
-    flexDirection: 'row',
-    height: scaleSize(24),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  mediumContainer: {
-    paddingHorizontal: Spacing.S,
-    borderRadius: Radius.S,
-    height: scaleSize(18),
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  icon: {
-    marginRight: Spacing.XS,
-  },
-});