@momo-kits/foundation 0.89.5 → 0.92.1-beta.16

package/Input/InputSearch.tsx

@@ -12,6 +12,12 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
+import {getAccessibilityID} from '../Application/utils';
+
+const {
+  ScreenContext,
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputSearch = forwardRef(
   (
@@ -28,15 +34,19 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
-        hasColorBG = true,
+      params,
+      componentId,
+      hasColorBG = false,
       ...props
     }: InputSearchProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const screenInfo = useContext<any>(ScreenContext);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -62,6 +72,9 @@ const InputSearch = forwardRef(
       return (
         <TextInput
           {...props}
+          {...getAccessibilityID(
+            `${appId}/${code}/${screenInfo.screenName}/input_search`,
+          )}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -117,33 +130,56 @@ const InputSearch = forwardRef(
       );
     };
 
-    const backgroundColor = hasColorBG ? theme.colors.background.default : theme.colors.background.surface
+    let inputState = 'empty';
+
+    if (focused) {
+      inputState = 'focus';
+    }
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+
+    const backgroundColor = hasColorBG
+      ? theme.colors.background.default
+      : theme.colors.background.surface;
 
     return (
-      <View style={[style, styles.searchInputContainer]}>
-        <View
-          style={[
-            styles.searchInputWrapper,
-            {
-              backgroundColor,
-            }
-          ]}>
-          <Icon
-            source={'navigation_search'}
-            size={24}
-            color={theme.colors.text.hint}
-          />
-          {renderInputView()}
-          {renderIconView()}
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'InputSearch',
+          params,
+          state: inputState,
+          componentId,
+        }}>
+        <View style={[style, styles.searchInputContainer]}>
+          <View
+            style={[
+              styles.searchInputWrapper,
+              {
+                backgroundColor,
+              },
+            ]}>
+            <Icon
+              source={'navigation_search'}
+              size={24}
+              color={theme.colors.text.hint}
+            />
+            {renderInputView()}
+            {renderIconView()}
+          </View>
+          {showButtonText && (
+            <TouchableOpacity onPress={onPressButtonText}>
+              <Text
+                typography={'action_default_bold'}
+                style={styles.textButton}>
+                {buttonText}
+              </Text>
+            </TouchableOpacity>
+          )}
         </View>
-        {showButtonText && (
-          <TouchableOpacity onPress={onPressButtonText}>
-            <Text typography={'action_default_bold'} style={styles.textButton}>
-              {buttonText}
-            </Text>
-          </TouchableOpacity>
-        )}
-      </View>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputTextArea.tsx

@@ -18,6 +18,12 @@ import {
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 import {ApplicationContext} from '../Application';
+import {cleanNameForTracking, getAccessibilityID} from '../Application/utils';
+
+const {
+  ScreenContext,
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputTextArea = forwardRef(
   (
@@ -43,6 +49,8 @@ const InputTextArea = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const screenInfo = useContext<any>(ScreenContext);
+    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -88,6 +96,20 @@ const InputTextArea = forwardRef(
         placeholderColor = disabledColor;
       }
 
+      const accessibilityID = disabled
+        ? getAccessibilityID(
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(
+              floatingValue ?? placeholder,
+            )}_disabled`,
+          )
+        : getAccessibilityID(
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
+          );
+
       return (
         <View
           style={[
@@ -109,6 +131,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
+                {...accessibilityID}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"

package/Input/index.tsx

@@ -80,6 +80,9 @@ export interface InputProps extends TextInputProps {
   fontWeight?: 'Regular' | 'Bold';
 
   onPressIcon?: () => void;
+
+  params?: any;
+  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -121,7 +124,14 @@ export interface InputSearchProps extends TextInputProps {
    */
   icon?: string;
 
-  hasColorBG?: boolean
+  /**
+   *
+   */
+  hasColorBG?: boolean;
+
+  params?: any;
+
+  componentId?: string;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
@@ -141,6 +151,8 @@ export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
    * 'number' - The OTP input will be treated as a number.
    */
   dataType?: 'string' | 'number';
+
+  floatingValue: string;
 }
 
 export type CaretProps = {
@@ -245,7 +257,22 @@ export interface InputDropDownProps {
    */
   leadingIconColor?: string;
 
-  style: ViewStyle | ViewStyle[];
+  /**
+   * Optional. params for element tracking.
+   */
+  params?: {
+    [key: string]: any;
+  };
+
+  /**
+   * component id for element tracking.
+   */
+  componentId?: string;
+
+  /**
+   * Optional. Represents the style of the InputDropDown component.
+   */
+  style?: ViewStyle | ViewStyle[];
 }
 
 export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};

package/Input/styles.ts

@@ -7,7 +7,7 @@ export default StyleSheet.create({
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   wrapper: {
     width: '100%',
@@ -75,7 +75,7 @@ export default StyleSheet.create({
     flex: 1,
     paddingRight: Spacing.XS,
     paddingVertical: Spacing.XS,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -108,7 +108,7 @@ export default StyleSheet.create({
     height: 36,
     marginLeft: Spacing.S,
     flex: 1,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
     paddingVertical: Spacing.XS,
   },
   searchInputView: {

package/Popup/PopupNotify.tsx

@@ -4,9 +4,14 @@ import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
+import {getAccessibilityID} from '../Application/utils';
+
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -19,7 +24,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   buttonDirection = 'row',
   onIconClose,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {theme, navigator, translate} = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
   const closeAction = useRef('touch_outside');
@@ -89,6 +94,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                     closeAction.current = 'button_action';
                     onAction(secondary?.onPress);
                   }}
+                  accessibilityLabel={'btn_popup_cancel'}
                 />
               </View>
               <View style={styles.buttonSpace} />
@@ -102,6 +108,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 closeAction.current = 'button_action';
                 onAction(primary.onPress);
               }}
+              accessibilityLabel={'btn_popup_allow'}
             />
           </View>
         </View>
@@ -111,6 +118,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       return (
         <View style={Styles.columnCenter}>
           <Button
+            accessibilityLabel={'btn_popup_allow'}
             title={primary.title}
             size="medium"
             onPress={() => {
@@ -122,6 +130,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
+                accessibilityLabel={'btn_popup_cancel'}
                 title={secondary?.title}
                 type="text"
                 size="medium"
@@ -157,6 +166,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const buildCloseIcon = () => {
     return (
       <TouchableOpacity
+        {...getAccessibilityID?.('ic_popup_close')}
         style={styles.iconCloseContainer}
         onPress={() => {
           closeAction.current = 'icon_close';
@@ -182,6 +192,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
+      {...getAccessibilityID?.(`pu_${context.code}_notify`)}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -1,17 +1,22 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
+import {getAccessibilityID} from '../Application/utils';
+
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   id,
   image,
   onIconClose,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {theme, navigator} = useContext(ApplicationContext);
   const closeAction = useRef('touch_outside');
 
@@ -49,7 +54,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    */
   const buildCloseIcon = () => {
     return (
-      <View style={styles.iconCloseContainer}>
+      <View
+        {...getAccessibilityID?.('ic_popup_close')}
+        style={styles.iconCloseContainer}>
         <TouchableOpacity
           onPress={() => {
             closeAction.current = 'icon_close';
@@ -77,7 +84,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View>
+    <View {...getAccessibilityID?.(`pu_${context.code}_promotion`)}>
       <Image
         source={{
           uri: image,

package/Radio/index.tsx

@@ -6,6 +6,16 @@ import {Text} from '../Text';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
+import {
+  cleanNameForTracking,
+  formatNameLength,
+  getAccessibilityID,
+} from '../Application/utils';
+
+const {
+  ScreenContext,
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -14,8 +24,12 @@ const Radio: FC<RadioProps> = ({
   onChange,
   label,
   style,
+  params,
+  componentId,
 }) => {
+  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -37,27 +51,46 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
+  const accessibilityID = getAccessibilityID?.(
+    `${appId}/${code}/${screenInfo.screenName}/rdo_${cleanNameForTracking(
+      label,
+    )}_${selected}`,
+  );
+
   return (
-    <TouchableOpacity
-      onPress={onChange}
-      disabled={disabled}
-      style={[
-        style,
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-        },
-      ]}>
-      <View
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params,
+        state: disabled ? 'disabled' : 'enabled',
+        componentId,
+        componentLabel: formatNameLength(label || ''),
+        componentValue: value,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...accessibilityID}
+        onPress={onChange}
+        disabled={disabled}
         style={[
-          styles.radio,
-          checkBoxStyle,
-          disabledStyle,
-          {marginRight: label ? Spacing.XS : 0},
-        ]}
-      />
-      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-    </TouchableOpacity>
+          style,
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+        ]}>
+        <View
+          style={[
+            styles.radio,
+            checkBoxStyle,
+            disabledStyle,
+            {marginRight: label ? Spacing.XS : 0},
+          ]}
+        />
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Radio/types.ts

@@ -35,4 +35,9 @@ export type RadioProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
+
+
+  params?: any
+
+  componentId?: string
 };

package/Switch/index.tsx

@@ -1,11 +1,20 @@
-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 {getAccessibilityID} from '../Application/utils';
+
+const {
+  ScreenContext,
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const Switch: FC<SwitchProps> = props => {
-  const {value, onChange, disabled, style} = props;
+  const {appId, code} = useContext<any>(MiniAppContext);
+  const {value, onChange, disabled, style, params, componentId} = props;
+  const screenInfo = useContext<any>(ScreenContext);
+
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
@@ -14,19 +23,35 @@ const Switch: FC<SwitchProps> = props => {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
 
+  const accessibilityID = getAccessibilityID?.(
+    `${appId}/${code}/${screenInfo.screenName}/swt_${value}`,
+  );
+
   return (
-    <TouchableOpacity
-      disabled={disabled}
-      onPress={() => onChange?.(!value)}
-      style={[
-        style,
-        styles.container,
-        {backgroundColor, alignItems: circleAlign},
-      ]}>
-      <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
-        <View style={[styles.circleSmall, {backgroundColor}]} />
-      </View>
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params,
+        state: disabled ? 'disabled' : 'enabled',
+        componentId,
+        componentValue: value,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...accessibilityID}
+        disabled={disabled}
+        onPress={() => onChange?.(!value)}
+        style={[
+          style,
+          styles.container,
+          {backgroundColor, alignItems: circleAlign},
+        ]}>
+        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+          <View style={[styles.circleSmall, {backgroundColor}]} />
+        </View>
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Switch/types.ts

@@ -23,4 +23,8 @@ export type SwitchProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
+
+  params?: any
+
+  componentId?: string
 };

package/Text/index.tsx

@@ -51,8 +51,24 @@ export interface TextProps extends RNTextProps {
    */
   color?: string;
 }
+
+const deprecatedValues: Typography[] = [
+  'headline_default',
+  'headline_l',
+  'headline_xl',
+  'title_default',
+  'title_xs',
+  'title_s',
+  'header_default',
+  'paragraph_default',
+  'paragraph_bold',
+  'paragraph_italic',
+  'label_xxs',
+  'action_s',
+];
+
 const Text: React.FC<TextProps> = ({
-  typography,
+  typography = 'body_default_regular',
   color,
   children,
   style,
@@ -94,6 +110,13 @@ const Text: React.FC<TextProps> = ({
   };
 
   const textStyle = getTypoStyle(typography);
+
+  if (deprecatedValues.includes(typography)) {
+    console.warn(
+      `Warning: The typography value "${typography}" is deprecated.`,
+    );
+  }
+
   return (
     <RNText
       {...rest}
@@ -103,8 +126,4 @@ const Text: React.FC<TextProps> = ({
   );
 };
 
-Text.defaultProps = {
-  typography: 'body_default_regular',
-};
-
 export {Text, scaleSize};

package/Text/styles.ts

@@ -1,11 +1,11 @@
 export default {
-  headline_default_bold: {fontSize: 24, lineHeight: 32, fontWeight: '700'},
-  header_m_bold: {fontSize: 18, lineHeight: 28, fontWeight: '700'},
+  headline_default_bold: {fontSize: 24, lineHeight: 34, fontWeight: '700'},
+  header_m_bold: {fontSize: 18, lineHeight: 26, fontWeight: '700'},
   header_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
   header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
-  header_xs_semibold: {fontSize: 12, lineHeight: 16, fontWeight: '600'},
+  header_xs_semibold: {fontSize: 12, lineHeight: 18, fontWeight: '600'},
   body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
-  body_regularstrikethrought: {
+  body_default_regularstrikethrought: {
     fontSize: 14,
     lineHeight: 20,
     fontWeight: '400',
@@ -13,12 +13,12 @@ export default {
   },
   description_default_regular: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 18,
     fontWeight: '400',
   },
   description_default_regularstrikethrought: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 18,
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
@@ -30,11 +30,11 @@ export default {
     textDecorationLine: 'line-through',
   },
   label_default_medium: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
-  label_s_medium: {fontSize: 12, lineHeight: 16, fontWeight: '500'},
+  label_s_medium: {fontSize: 12, lineHeight: 18, fontWeight: '500'},
   label_xs_medium: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
   action_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
   action_s_bold: {fontSize: 14, lineHeight: 20, fontWeight: '700'},
-  action_xs_bold: {fontSize: 12, lineHeight: 16, fontWeight: '700'},
+  action_xs_bold: {fontSize: 12, lineHeight: 18, fontWeight: '700'},
   action_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
   /**non-support**/
   headline_default: {

package/Text/types.ts

@@ -14,13 +14,31 @@ export type TypographyWeight = {
 };
 
 export type Typography =
+  /**
+   * @deprecated
+   **/
+  | 'headline_default'
+  | 'headline_l'
+  | 'headline_xl'
+  | 'title_default'
+  | 'title_xs'
+  | 'title_s'
+  | 'header_default'
+  | 'paragraph_default'
+  | 'paragraph_bold'
+  | 'paragraph_italic'
+  | 'label_xxs'
+  | 'action_s'
+  /**
+   * end
+   **/
   | 'headline_default_bold'
   | 'header_m_bold'
   | 'header_default_bold'
   | 'header_s_semibold'
   | 'header_xs_semibold'
   | 'body_default_regular'
-  | 'body_regularstrikethrought'
+  | 'body_default_regularstrikethrought'
   | 'description_default_regular'
   | 'description_default_regularstrikethrought'
   | 'description_xs_regular'