@momo-kits/foundation 0.89.5 → 0.89.6-rc.2

package/Popup/PopupNotify.tsx

@@ -1,12 +1,12 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
 import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
-import {PopupNotifyProps} from './types';
-import {Radius, Spacing, Styles} from '../Consts';
-import {Image} from '../Image';
-import {Text} from '../Text';
 import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
+import {Radius, Spacing, Styles} from '../Consts';
 import {Icon} from '../Icon';
+import {Image} from '../Image';
+import {scaleSize, Text} from '../Text';
+import {PopupNotifyProps} from './types';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -19,18 +19,16 @@ 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');
-
   let descriptionStyle = {};
   let Description: any = View;
   if (scrollContent) {
     Description = ScrollView;
-    descriptionStyle = {height: 80};
+    descriptionStyle = {maxHeight: scaleSize(172)};
   }
-
   /**
    * tracking
    */
@@ -42,7 +40,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,
@@ -89,6 +88,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                     closeAction.current = 'button_action';
                     onAction(secondary?.onPress);
                   }}
+                  accessibilityLabel={'btn_popup_cancel'}
                 />
               </View>
               <View style={styles.buttonSpace} />
@@ -102,6 +102,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 closeAction.current = 'button_action';
                 onAction(primary.onPress);
               }}
+              accessibilityLabel={'btn_popup_allow'}
             />
           </View>
         </View>
@@ -111,6 +112,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       return (
         <View style={Styles.columnCenter}>
           <Button
+            accessibilityLabel={'btn_popup_allow'}
             title={primary.title}
             size="medium"
             onPress={() => {
@@ -122,6 +124,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
+                accessibilityLabel={'btn_popup_cancel'}
                 title={secondary?.title}
                 type="text"
                 size="medium"
@@ -136,7 +139,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       );
     };
 
-    if (buttonDirection == 'auto') {
+    if (buttonDirection === 'auto') {
       if (
         secondary?.title &&
         (secondary.title.length > 12 || primary.title.length > 12)
@@ -145,7 +148,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       }
       return renderRow();
     }
-    if (buttonDirection == 'row') {
+    if (buttonDirection === 'row') {
       return renderRow();
     }
     return renderColumn();
@@ -155,53 +158,61 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    return (
-      <TouchableOpacity
-        style={styles.iconCloseContainer}
-        onPress={() => {
-          closeAction.current = 'icon_close';
-          onAction(onIconClose);
-        }}>
-        <View
-          style={[
-            styles.iconClose,
-            {
-              backgroundColor: theme.colors.text.default,
-              borderColor: theme.colors.background.surface,
-            },
-          ]}>
-          <Icon
-            source="navigation_close"
-            color={theme.colors.background.surface}
-            size={14}
-          />
-        </View>
-      </TouchableOpacity>
-    );
+    if (typeof onIconClose === 'function') {
+      return (
+        <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
+          style={styles.iconCloseContainer}
+          onPress={() => {
+            closeAction.current = 'icon_close';
+            onAction(onIconClose);
+          }}>
+          <View
+            style={[
+              styles.iconClose,
+              {
+                backgroundColor: theme.colors.text.default,
+                borderColor: theme.colors.background.surface,
+              },
+            ]}>
+            <Icon
+              source="navigation_close"
+              color={theme.colors.background.surface}
+              size={14}
+            />
+          </View>
+        </TouchableOpacity>
+      );
+    }
   };
 
   return (
     <View
+      accessibilityLabel={'popup_notify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},
       ]}>
       {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
-        <Text typography={'header_default_bold'} numberOfLines={1}>
+        <Text typography={'header_default_bold'} numberOfLines={3}>
           {title}
         </Text>
         <Description style={[styles.description, descriptionStyle]}>
-          <Text
-            typography={'body_default_regular'}
-            onTextLayout={({nativeEvent: {lines}}) => {
-              const enableScroll = lines.length > 3;
-              if (enableScroll != scrollContent) {
-                setScrollContent(enableScroll);
-              }
-            }}>
-            {description}
-          </Text>
+          {typeof description === 'string' ? (
+            <Text
+              typography={'body_default_regular'}
+              onTextLayout={({nativeEvent: {lines}}) => {
+                const enableScroll = lines.length > 3;
+                if (enableScroll !== scrollContent) {
+                  setScrollContent(enableScroll);
+                }
+              }}>
+              {description}
+            </Text>
+          ) : (
+            description
+          )}
         </Description>
         {!!error && (
           <View style={styles.information}>

package/Popup/PopupPromotion.tsx

@@ -11,7 +11,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   image,
   onIconClose,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {theme, navigator} = useContext(ApplicationContext);
   const closeAction = useRef('touch_outside');
 
@@ -26,7 +26,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,
@@ -51,6 +52,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
     return (
       <View style={styles.iconCloseContainer}>
         <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
           onPress={() => {
             closeAction.current = 'icon_close';
             navigator?.pop();
@@ -77,7 +79,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View>
+    <View accessibilityLabel={'popup_promotion'}>
       <Image
         source={{
           uri: image,
@@ -113,8 +115,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PopupPromotion.defaultProps = {
-  image: 'https://google.com',
-};
-
 export default PopupPromotion;

package/Popup/types.ts

@@ -1,4 +1,3 @@
-import {TextStyle} from 'react-native';
 import React from 'react';
 
 export type PopupNotifyProps = {
@@ -19,7 +18,7 @@ export type PopupNotifyProps = {
   /**
    * `description`: Represents the description text to be displayed in the PopupNotify component.
    */
-  description: string | React.ReactNode;
+  description?: string | React.ReactNode;
 
   /**
    * `error`: Optional. Represents additional error text to be displayed in the PopupNotify component.
@@ -79,9 +78,4 @@ type PopupAction = {
   onPress: () => void;
 };
 
-export type HighlightText = {
-  text: string;
-  style: TextStyle;
-};
-
 type PopupActionDirection = 'row' | 'column' | 'auto';

package/Radio/index.tsx

@@ -4,8 +4,9 @@ import {TouchableOpacity, View} from 'react-native';
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
+import {formatNameLength} from '../Application/utils';
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -14,6 +15,8 @@ const Radio: FC<RadioProps> = ({
   onChange,
   label,
   style,
+  params,
+  accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const selected = value === groupValue;
@@ -38,26 +41,38 @@ const Radio: FC<RadioProps> = ({
   }
 
   return (
-    <TouchableOpacity
-      onPress={onChange}
-      disabled={disabled}
-      style={[
-        style,
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-        },
-      ]}>
-      <View
+    <ComponentContext.Provider
+      value={{
+        componentName: 'Radio',
+        params,
+        state: disabled ? 'disabled' : 'enabled',
+        componentId: accessibilityLabel,
+        componentLabel: formatNameLength(label || ''),
+        componentValue: selected,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        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>
+    </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`.
@@ -35,4 +35,6 @@ export type RadioProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-};
+
+  params?: any;
+}

package/Switch/index.tsx

@@ -3,9 +3,16 @@ import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
+import {ComponentContext} from '../Application';
 
-const Switch: FC<SwitchProps> = props => {
-  const {value, onChange, disabled, style} = props;
+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';
 
@@ -15,23 +22,30 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   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>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'Switch',
+        params,
+        state: disabled ? 'disabled' : 'enabled',
+        componentId: accessibilityLabel,
+        componentValue: value,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
+        onPress={() => onChange?.(!value)}
+        style={[
+          style,
+          styles.container,
+          {backgroundColor, alignItems: circleAlign},
+        ]}>
+        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+          <View style={[styles.circleSmall, {backgroundColor}]} />
+        </View>
+      </TouchableOpacity>
+    </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.
    */
@@ -23,4 +23,6 @@ export type SwitchProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-};
+
+  params?: any;
+}

package/Tag/index.tsx

@@ -31,6 +31,8 @@ const Tag: FC<TagProps> = ({
   size = 'large',
   style,
   customColor,
+  accessibilityLabelContainer,
+  accessibilityLabelText,
 }) => {
   let labelColor = textColor[color];
   let tagColor = backgroundColor[color];
@@ -60,7 +62,9 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
+    <View
+      style={[style, sizeStyle, {backgroundColor: tagColor}]}
+      accessibilityLabel={accessibilityLabelContainer}>
       {!!icon && (
         <Icon
           style={styles.icon}
@@ -69,7 +73,10 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text color={labelColor} typography={'label_s_medium'}>
+      <Text
+        color={labelColor}
+        typography={'label_s_medium'}
+        accessibilityLabel={accessibilityLabelText}>
         {label}
       </Text>
     </View>

package/Tag/styles.ts

@@ -1,19 +1,20 @@
 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: 24,
+    height: scaleSize(24),
     alignItems: 'center',
     justifyContent: 'center',
   },
   mediumContainer: {
     paddingHorizontal: Spacing.S,
     borderRadius: Radius.S,
-    height: 18,
+    height: scaleSize(18),
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'center',

package/Tag/types.ts

@@ -33,4 +33,16 @@ export type TagProps = {
    * that can be applied to the Tag component.
    */
   customColor?: string;
+
+  /**
+   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+   */
+  accessibilityLabelContainer?: string;
+
+  /**
+   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+   */
+  accessibilityLabelText?: 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'