@momo-kits/foundation 0.92.1-tracking.2 → 0.92.1-tracking.21

package/Input/InputTextArea.tsx

@@ -17,11 +17,12 @@ import {
 } from './common';
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
-import {ApplicationContext, MiniAppContext} from '../Application';
-import {getAccessibilityID} from "../Application/utils";
+import {ApplicationContext} from '../Application';
+import {getAccessibilityID} from '../Application/utils';
 
 const {
-    ScreenContext,
+  ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputTextArea = forwardRef(
@@ -48,8 +49,8 @@ const InputTextArea = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-      const screenInfo = useContext<any>(ScreenContext);
-      const {appId} = useContext(MiniAppContext)
+    const screenInfo = useContext<any>(ScreenContext);
+    const {appId} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -95,6 +96,12 @@ const InputTextArea = forwardRef(
         placeholderColor = disabledColor;
       }
 
+      const accessibilityID = getAccessibilityID(
+        `${appId}/${screenInfo.screenName}/input_${floatingValue}${
+          disabled && '_disabled'
+        }`,
+      );
+
       return (
         <View
           style={[
@@ -116,6 +123,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
+                {...accessibilityID}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -153,12 +161,9 @@ const InputTextArea = forwardRef(
         </View>
       );
     };
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
-      <View
-          {...accessibilityID}
-          style={[style, styles.wrapper]}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

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,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');
@@ -109,13 +113,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       );
     };
     const renderColumn = () => {
-      const accessibilityPrimaryID = getAccessibilityID('btn_popup_allow')
-      const accessibilitySecondID = getAccessibilityID('btn_popup_cancel')
-
       return (
         <View style={Styles.columnCenter}>
           <Button
-              {...accessibilityPrimaryID}
+            accessibilityLabel={'btn_popup_allow'}
             title={primary.title}
             size="medium"
             onPress={() => {
@@ -127,7 +128,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
-                  {...accessibilitySecondID}
+                accessibilityLabel={'btn_popup_cancel'}
                 title={secondary?.title}
                 type="text"
                 size="medium"
@@ -161,11 +162,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 +188,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');
 
@@ -49,10 +53,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 +82,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,

package/Radio/index.tsx

@@ -4,12 +4,13 @@ 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';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const Radio: FC<RadioProps> = ({
@@ -22,7 +23,7 @@ const Radio: FC<RadioProps> = ({
   params,
   componentId,
 }) => {
-    const {appId} = useContext(MiniAppContext)
+  const {appId} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
@@ -45,7 +46,10 @@ const Radio: FC<RadioProps> = ({
         : theme.colors.text.disable,
     };
   }
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|rdo_${label}_${value}`)
+
+  const accessibilityID = getAccessibilityID?.(
+    `${appId}/${screenInfo.screenName}/rdo_${label}_${value}`,
+  );
 
   return (
     <ScreenContext.Provider
@@ -60,7 +64,7 @@ const Radio: FC<RadioProps> = ({
         action: 'click',
       }}>
       <TouchableOpacity
-          {...accessibilityID}
+        {...accessibilityID}
         onPress={onChange}
         disabled={disabled}
         style={[

package/Switch/index.tsx

@@ -3,15 +3,15 @@ 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";
+import {getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const Switch: FC<SwitchProps> = props => {
-    const {appId} = useContext(MiniAppContext)
+  const {appId} = useContext<any>(MiniAppContext);
   const {value, onChange, disabled, style, params, componentId} = props;
   const screenInfo = useContext<any>(ScreenContext);
 
@@ -22,7 +22,10 @@ const Switch: FC<SwitchProps> = props => {
   if (disabled) {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|swt_${value}`)
+
+  const accessibilityID = getAccessibilityID?.(
+    `${appId}/${screenInfo.screenName}/swt_${value}`,
+  );
 
   return (
     <ScreenContext.Provider
@@ -36,7 +39,7 @@ const Switch: FC<SwitchProps> = props => {
         action: 'click',
       }}>
       <TouchableOpacity
-          {...accessibilityID}
+        {...accessibilityID}
         disabled={disabled}
         onPress={() => onChange?.(!value)}
         style={[

package/Text/index.tsx

@@ -51,8 +51,9 @@ export interface TextProps extends RNTextProps {
    */
   color?: string;
 }
+
 const Text: React.FC<TextProps> = ({
-  typography,
+  typography = 'body_default_regular',
   color,
   children,
   style,
@@ -94,6 +95,7 @@ const Text: React.FC<TextProps> = ({
   };
 
   const textStyle = getTypoStyle(typography);
+
   return (
     <RNText
       {...rest}
@@ -103,8 +105,4 @@ const Text: React.FC<TextProps> = ({
   );
 };
 
-Text.defaultProps = {
-  typography: 'body_default_regular',
-};
-
 export {Text, scaleSize};

package/Text/styles.ts

@@ -1,9 +1,9 @@
 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: {
     fontSize: 14,
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.1-tracking.2",
+    "version": "0.92.1-tracking.21",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -14,6 +14,7 @@
         "react-native-safe-area-context": "3.1.4",
         "react-native-linear-gradient": "2.8.3",
         "react-native-gesture-handler": "1.10.3",
+        "react-native-modalize": "2.1.1",
         "react-native-fast-image": "8.1.5",
         "@react-navigation/bottom-tabs": "git+https://gitlab.com/momo-platform/react-navigation-bottom-tabs.git#main",
         "@react-navigation/core": "5.16.1",

package/verify.js

@@ -2,21 +2,24 @@ const fs = require('fs');
 const path = require('path');
 
 try {
-  const package = path.join(`${__dirname}`, 'package.json');
-  const packageInfo = JSON.parse(fs.readFileSync(package, 'utf8'));
+  const packageInfo = JSON.parse(
+    fs.readFileSync(path.join(`${__dirname}`, 'package.json'), 'utf8'),
+  );
   const packageVersion = parseInt(packageInfo?.version.split('.')?.[1]);
 
   const app = path.join(`${__dirname}/../../../`, 'app.json');
   const miniJson = path.join(`${__dirname}/../../../`, 'package.json');
+
+  if (!fs.existsSync(app) || fs.existsSync(miniJson)) {
+    return;
+  }
+
   const appInfo = JSON.parse(fs.readFileSync(app, 'utf8'));
   const miniInfo = JSON.parse(fs.readFileSync(miniJson, 'utf8'));
+
   const iOSAppTarget = appInfo?.client?.ios.deploymentTarget;
   const androidAppTarget = appInfo?.client?.android.deploymentTarget;
 
-  if (Object.values(appInfo).length < 1) {
-    return;
-  }
-
   if (packageVersion > iOSAppTarget || packageVersion > androidAppTarget) {
     console.error(
       `Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`,