@momo-kits/foundation 0.92.1-tracking.9 → 0.92.2-tracking.2

package/Popup/PopupNotify.tsx

@@ -4,10 +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";
+import {getAccessibilityID} from '../Application/utils';
+
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -20,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');
@@ -43,7 +47,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      ...context,
+      appId: context.appId,
+      code: context.code,
       screen_name,
       component_type: 'popup',
       component_name: id,
@@ -90,6 +95,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                     closeAction.current = 'button_action';
                     onAction(secondary?.onPress);
                   }}
+                  accessibilityLabel={'btn_popup_cancel'}
                 />
               </View>
               <View style={styles.buttonSpace} />
@@ -103,19 +109,17 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 closeAction.current = 'button_action';
                 onAction(primary.onPress);
               }}
+              accessibilityLabel={'btn_popup_allow'}
             />
           </View>
         </View>
       );
     };
     const renderColumn = () => {
-      const accessibilityPrimaryID = getAccessibilityID?.('btn_popup_allow')
-      const accessibilitySecondID = getAccessibilityID?.('btn_popup_cancel')
-
       return (
         <View style={Styles.columnCenter}>
           <Button
-            accessibilityID={accessibilityPrimaryID}
+            accessibilityLabel={'btn_popup_allow'}
             title={primary.title}
             size="medium"
             onPress={() => {
@@ -127,7 +131,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
-                  accessibilityID={accessibilitySecondID}
+                accessibilityLabel={'btn_popup_cancel'}
                 title={secondary?.title}
                 type="text"
                 size="medium"
@@ -161,11 +165,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close')
-
     return (
       <TouchableOpacity
-          {...accessibilityCloseID}
+        {...getAccessibilityID?.('ic_popup_close')}
         style={styles.iconCloseContainer}
         onPress={() => {
           closeAction.current = 'icon_close';
@@ -189,11 +191,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     );
   };
 
-  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_notify`)
-
   return (
     <View
-        {...accessibilityID}
+      {...getAccessibilityID?.(`pu_${context.code}_notify`)}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -1,18 +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";
+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');
 
@@ -27,7 +31,8 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      ...context,
+      appId: context.appId,
+      code: context.code,
       screen_name,
       component_type: 'popup',
       component_name: id,
@@ -49,10 +54,10 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close')
-
     return (
-      <View {...accessibilityCloseID} style={styles.iconCloseContainer}>
+      <View
+        {...getAccessibilityID?.('ic_popup_close')}
+        style={styles.iconCloseContainer}>
         <TouchableOpacity
           onPress={() => {
             closeAction.current = 'icon_close';
@@ -78,12 +83,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       </View>
     );
   };
-  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_promotion`)
 
   return (
-    <View
-        {...accessibilityID}
-    >
+    <View {...getAccessibilityID?.(`pu_${context.code}_promotion`)}>
       <Image
         source={{
           uri: image,
@@ -119,8 +121,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PopupPromotion.defaultProps = {
-  image: 'https://google.com',
-};
-
 export default PopupPromotion;

package/Radio/index.tsx

@@ -4,12 +4,12 @@ import {TouchableOpacity, View} from 'react-native';
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatNameLength, getAccessibilityID} from '../Application/utils';
+import {formatNameLength} from '../Application/utils';
 
 const {
-  ScreenContext,
+  ComponentContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const Radio: FC<RadioProps> = ({
@@ -20,11 +20,9 @@ const Radio: FC<RadioProps> = ({
   label,
   style,
   params,
-  componentId,
+  accessibilityLabel,
 }) => {
-    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -45,22 +43,20 @@ const Radio: FC<RadioProps> = ({
         : theme.colors.text.disable,
     };
   }
-    const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/rdo_${label}_${value}`)
 
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
         componentName: 'Button',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentId,
+        componentId: accessibilityLabel,
         componentLabel: formatNameLength(label || ''),
         componentValue: value,
         action: 'click',
       }}>
       <TouchableOpacity
-          {...accessibilityID}
+        accessibilityLabel={accessibilityLabel}
         onPress={onChange}
         disabled={disabled}
         style={[
@@ -80,7 +76,7 @@ const Radio: FC<RadioProps> = ({
         />
         {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 

package/Radio/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type RadioProps = {
+export interface RadioProps extends TouchableOpacityProps {
   /**
    * `value`: Represents the value associated with the Radio component.
    * It is used to determine whether the Radio component is selected or not in comparison with the `groupValue`.
@@ -36,8 +36,5 @@ export type RadioProps = {
    */
   style?: ViewStyle;
 
-
-  params?: any
-
-  componentId?: string
-};
+  params?: any;
+}

package/Switch/index.tsx

@@ -1,20 +1,21 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} 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";
-import {MiniAppContext} from "../Application";
 
 const {
-  ScreenContext,
+  ComponentContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
-const Switch: FC<SwitchProps> = props => {
-    const {appId} = useContext(MiniAppContext)
-  const {value, onChange, disabled, style, params, componentId} = props;
-  const screenInfo = useContext<any>(ScreenContext);
-
+const Switch: FC<SwitchProps> = ({
+  value = false,
+  onChange,
+  disabled = false,
+  style,
+  params,
+  accessibilityLabel,
+}) => {
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
@@ -22,22 +23,20 @@ const Switch: FC<SwitchProps> = props => {
   if (disabled) {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
-    const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/swt_${value}`)
 
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
         componentName: 'Button',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentId,
+        componentId: accessibilityLabel,
         componentValue: value,
         action: 'click',
       }}>
       <TouchableOpacity
-          {...accessibilityID}
         disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
         onPress={() => onChange?.(!value)}
         style={[
           style,
@@ -48,12 +47,8 @@ const Switch: FC<SwitchProps> = props => {
           <View style={[styles.circleSmall, {backgroundColor}]} />
         </View>
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 
-Switch.defaultProps = {
-  value: false,
-  disabled: false,
-};
 export {Switch};

package/Switch/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type SwitchProps = {
+export interface SwitchProps extends TouchableOpacityProps {
   /**
    * `value`: Represents whether the Switch component is currently in the 'on' (`true`) or 'off' (`false`) state.
    */
@@ -24,7 +24,5 @@ export type SwitchProps = {
    */
   style?: ViewStyle;
 
-  params?: any
-
-  componentId?: string
-};
+  params?: any;
+}

package/Text/index.tsx

@@ -50,11 +50,25 @@ export interface TextProps extends RNTextProps {
    * It can be any valid color string (e.g., hex, rgb, rgba, etc.).
    */
   color?: string;
-
-  children?: any
 }
+
+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='body_default_regular',
+  typography = 'body_default_regular',
   color,
   children,
   style,
@@ -96,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}

package/Text/styles.ts

@@ -5,7 +5,7 @@ export default {
   header_s_semibold: {fontSize: 14, lineHeight: 20, 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',
@@ -22,8 +22,8 @@ export default {
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
-  description_s_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
-  description_s_regularstrikethrought: {
+  description_xs_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_xs_regularstrikethrought: {
     fontSize: 10,
     lineHeight: 14,
     fontWeight: '400',

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'