@momo-kits/foundation 0.89.5-beta.18 → 0.92.1-tracking.1

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 {}
@@ -245,7 +255,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/Popup/PopupNotify.tsx

@@ -7,6 +7,7 @@ import {Text} from '../Text';
 import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
+import {getAccessibilityID} from "../Application/utils";
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -108,9 +109,13 @@ 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}
             title={primary.title}
             size="medium"
             onPress={() => {
@@ -122,6 +127,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
+                  {...accessibilitySecondID}
                 title={secondary?.title}
                 type="text"
                 size="medium"
@@ -155,8 +161,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
+    const accessibilityCloseID = getAccessibilityID('ic_popup_close')
+
     return (
       <TouchableOpacity
+          {...accessibilityCloseID}
         style={styles.iconCloseContainer}
         onPress={() => {
           closeAction.current = 'icon_close';
@@ -180,8 +189,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     );
   };
 
+  const accessibilityID = getAccessibilityID(`pu_${context.code}_notify`)
+
   return (
     <View
+        {...accessibilityID}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -5,6 +5,7 @@ import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
+import {getAccessibilityID} from "../Application/utils";
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   id,
@@ -48,8 +49,10 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
+    const accessibilityCloseID = getAccessibilityID('ic_popup_close')
+
     return (
-      <View style={styles.iconCloseContainer}>
+      <View {...accessibilityCloseID} style={styles.iconCloseContainer}>
         <TouchableOpacity
           onPress={() => {
             closeAction.current = 'icon_close';
@@ -75,9 +78,12 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       </View>
     );
   };
+  const accessibilityID = getAccessibilityID(`pu_${context.code}_promotion`)
 
   return (
-    <View>
+    <View
+        {...accessibilityID}
+    >
       <Image
         source={{
           uri: image,

package/Radio/index.tsx

@@ -4,8 +4,13 @@ import {TouchableOpacity, View} from 'react-native';
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Spacing} from '../Consts';
+import {formatNameLength, getAccessibilityID} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -14,8 +19,12 @@ const Radio: FC<RadioProps> = ({
   onChange,
   label,
   style,
+  params,
+  componentId,
 }) => {
+    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -36,28 +45,42 @@ const Radio: FC<RadioProps> = ({
         : theme.colors.text.disable,
     };
   }
+    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|rdo_${label}_${value}`)
 
   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";
+import {MiniAppContext} from "../Application";
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const Switch: FC<SwitchProps> = props => {
-  const {value, onChange, disabled, style} = props;
+    const {appId} = useContext(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';
 
@@ -13,20 +22,33 @@ const Switch: FC<SwitchProps> = props => {
   if (disabled) {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
+    const accessibilityID = getAccessibilityID(`${appId}|${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/code-scanner.js

@@ -1,143 +1,51 @@
 const scanner = require('react-scanner');
-const fs = require('fs');
 const path = require('path');
 
-const scan = async (config) => {
-    return await scanner.run(config);
+const scan = async config => {
+  return await scanner.run(config);
 };
 
-const calcSum = (array) => {
-    return array.reduce((a, b) => a + b, 0);
+const calcSum = array => {
+  return array.reduce((a, b) => a + b, 0);
 };
 
-const calculateAdoptionRate = async (branchName , kitJsonPath , miniappJsonPath , reactNativeJsonPath , fsJsonPath ) => {
-    const kitJson = require(kitJsonPath);
-    const miniAppJson = require(miniappJsonPath);
-    const reactNativeJson = require(reactNativeJsonPath);
-    const fsJson = require(fsJsonPath);
-
-    const numOfKitComponents = calcSum(Object.values(kitJson));
-    const numOfMiniAppComponents = calcSum(Object.values(miniAppJson));
-    const numOfReactNativeComponents = calcSum(Object.values(reactNativeJson));
-    const numOfFSComponents = calcSum(Object.values(fsJson));
-
-    const adoptionRate = ((numOfKitComponents + numOfReactNativeComponents + numOfFSComponents) / numOfMiniAppComponents) * 100;
-
-    return {
-        miniAppName: branchName,
-        numOfKitComponents: numOfKitComponents,
-        numOfMiniAppComponents: numOfMiniAppComponents,
-        numOfReactNativeComponents: numOfReactNativeComponents,
-        numOfFSComponents: numOfFSComponents,
-        adoptionRate: adoptionRate.toFixed(2) + '%'
-    }
+const calculateAdoptionRate = (kitJsonPath, miniappJsonPath) => {
+  const kitJson = require(kitJsonPath);
+  const miniAppJson = require(miniappJsonPath);
+  const numOfKitComponents = calcSum(Object.values(kitJson));
+  const numOfMiniAppComponents = calcSum(Object.values(miniAppJson));
+  const adoptionRate = (numOfKitComponents / numOfMiniAppComponents) * 100;
+  console.log("Number of kit's components: ", numOfKitComponents);
+  console.log("Number of miniapp's components: ", numOfMiniAppComponents);
+  console.log('Adoption rate: ', adoptionRate);
 };
 
-function ensureFileExists(filePath , defaultContent = {}) {
-    if (!fs.existsSync(filePath)) {
-        fs.mkdirSync(path.dirname(filePath), { recursive: true });
-        fs.writeFileSync(filePath, JSON.stringify(defaultContent, null, 2));
-    }
-}
-
-const sendMessage = ({
-                         numOfKitComponents,
-                         numOfMiniAppComponents,
-                         numOfFSComponents,
-                         numOfReactNativeComponents,
-                         adoptionRate,
-                         miniAppName = ''
-                     }) => {
-    const url = 'https://chat.googleapis.com/v1/spaces/AAAAL9P6G8M/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=fnwfYuH_u0KicBnKTSSm9S0qV6azJH5v6URm8HR7V2g';
-
-    const data = {
-        text: `MiniApp: ${miniAppName}\nNumber of kit's components: ${numOfKitComponents}\nNumber of miniapp's components: ${numOfMiniAppComponents}\nNumber of FS's components: ${numOfFSComponents}\nNumber of React Native's components: ${numOfReactNativeComponents}\nAdoption rate: ${adoptionRate}`
-    };
-
-    fetch(url, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(data)
-    })
-        .then(response => response.json())
-        .then(data => {
-            console.log('Success:', data);
-        })
-        .catch((error) => {
-            console.error('Error:', error);
-        });
-}
-
 const main = async () => {
-    const rootPath = `${__dirname}/../../../`
-    const app = path.join(`${__dirname}/../../../`, 'app.json');
-    const appJson = require(app)
-    const branchName = appJson.appId
-
-    if (!branchName || !branchName.includes("vn.momo")){
-        return
-    }
-
-    const scanPath = path.join(rootPath, 'src')
-    const kitJsonPath = path.join(rootPath, './scan/kit.json')
-    const miniappJsonPath = path.join(rootPath, './scan/miniapp.json')
-    const reactNativeJsonPath = path.join(rootPath, './scan/RN.json')
-    const fsJsonPath = path.join(rootPath, './scan/verLib.json')
-
-    const allKitsReg = /@momo-kits/;
-    const fsReg = /^(?:@fs-mobile-platform\/(components|investment|screens)|@miniapp-platform\/(components|foundation))$/;
-    const RNReg = 'react-native'
-
-    const config1 = {
-        crawlFrom: scanPath,
-        includeSubComponents: true,
-        importedFrom: allKitsReg,
-        processors: [['count-components', { outputTo: kitJsonPath }]],
-        rootDir: process.cwd(),
-    };
-
-    const config2 = {
-        crawlFrom: scanPath,
-        includeSubComponents: true,
-        processors: [['count-components', { outputTo: miniappJsonPath }]],
-        rootDir: process.cwd(),
-    };
-
-    const config3 = {
-        crawlFrom: scanPath,
-        includeSubComponents: true,
-        importedFrom: RNReg,
-        processors: [['count-components', { outputTo: reactNativeJsonPath }]],
-        rootDir: process.cwd(),
-    };
-
-    const config4 = {
-        crawlFrom: scanPath,
-        includeSubComponents: true,
-        importedFrom: fsReg,
-        processors: [['count-components', { outputTo: fsJsonPath }]],
-        rootDir: process.cwd(),
-    };
-
-    try {
-        ensureFileExists(kitJsonPath, {});
-        ensureFileExists(miniappJsonPath, {});
-        ensureFileExists(reactNativeJsonPath, {});
-        ensureFileExists(fsJsonPath, {});
-
-        await scan(config1);
-        await scan(config2);
-        await scan(config3);
-        await scan(config4);
-
-        const result = await calculateAdoptionRate(branchName,kitJsonPath, miniappJsonPath, reactNativeJsonPath, fsJsonPath);
-        sendMessage(result)
-        console.log(result)
-    } catch (error) {
-        console.error("Error during scan or calculation:", error);
-    }
+  const [scanPath, kitJsonRelativePath, miniappJsonRelativePath] =
+    process.argv.slice(2);
+
+  const kitJsonPath = path.resolve(process.cwd(), kitJsonRelativePath);
+  const miniappJsonPath = path.resolve(process.cwd(), miniappJsonRelativePath);
+
+  const config1 = {
+    crawlFrom: scanPath,
+    includeSubComponents: true,
+    importedFrom: /@momo-kits\/.+/,
+    processors: [['count-components', {outputTo: kitJsonPath}]],
+    rootDir: './',
+  };
+
+  const config2 = {
+    crawlFrom: scanPath,
+    includeSubComponents: true,
+    processors: [['count-components', {outputTo: miniappJsonPath}]],
+    rootDir: './',
+  };
+
+  await scan(config1);
+  await scan(config2);
+
+  calculateAdoptionRate(kitJsonPath, miniappJsonPath);
 };
 
-main();
+main().catch(console.error);

package/index.ts

@@ -4,11 +4,12 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
+import {getAccessibilityID} from "./Application/utils";
 
 /**
  * native export
  */
-export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient};
+export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient, getAccessibilityID};
 
 /**
  * foundation component

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.89.5-beta.18",
+    "version": "0.92.1-tracking.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
-        "postinstall": "node code-scanner.js"
+        "postinstall": "node verify.js"
     },
     "keywords": [
         "@momo-kits/foundation"
@@ -20,8 +20,7 @@
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
         "lottie-react-native": "3.3.2",
-        "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main",
-        "react-scanner": "^1.1.0"
+        "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main"
     },
     "peerDependencies": {
         "react-native": "*"

package/verify.js

@@ -13,10 +13,6 @@ try {
   const iOSAppTarget = appInfo?.client?.ios.deploymentTarget;
   const androidAppTarget = appInfo?.client?.android.deploymentTarget;
 
-  if (Object.values(appInfo).length < 1) {
-    return
-  }
-
   if (appInfo.name === 'MoMoPlatform') {
     return;
   }