@momo-kits/foundation 0.89.4-tracking.18 → 0.89.5-beta.10

package/Input/InputDropDown.tsx

@@ -7,11 +7,6 @@ import {InputDropDownProps} from './index';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputDropDown = ({
   value,
@@ -31,13 +26,10 @@ const InputDropDown = ({
   leadingIcon,
   leadingIconColor,
   style,
-  params,
-  componentId,
   ...props
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
-  const screenInfo = useContext<any>(ScreenContext);
 
   const renderIcon = (color: string | undefined) => {
     if (loading) {
@@ -112,22 +104,10 @@ const InputDropDown = ({
   };
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'InputOTP',
-        params,
-        state: 'enabled',
-        componentLabel: formatComponentName(floatingValue || ''),
-        componentId,
-      }}>
-      <TouchableOpacity
-        onPress={onPress}
-        style={[style, full && styles.wrapper]}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity onPress={onPress} style={[style, full && styles.wrapper]}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+    </TouchableOpacity>
   );
 };
 

package/Input/InputMoney.tsx

@@ -18,11 +18,6 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputMoney = forwardRef(
   (
@@ -41,9 +36,7 @@ const InputMoney = forwardRef(
       required = false,
       errorSpacing,
       style,
-      params,
       defaultValue = '',
-      componentId,
       ...props
     }: InputMoneyProps,
     ref,
@@ -51,7 +44,6 @@ const InputMoney = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const screenInfo = useContext<any>(ScreenContext);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -159,34 +151,11 @@ const InputMoney = forwardRef(
       );
     };
 
-    let inputState = 'active';
-
-    if (value && value?.length > 0) {
-      inputState = 'filled';
-    }
-    if (errorMessage && errorMessage?.length > 0) {
-      inputState = 'error';
-    }
-
-    if (disabled) {
-      inputState = 'disabled';
-    }
-
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'InputMoney',
-          params,
-          componentLabel: formatComponentName(floatingValue || ''),
-          state: inputState,
-          componentId,
-        }}>
-        <View style={[style, styles.wrapper]}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </View>
-      </ScreenContext.Provider>
+      <View style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
     );
   },
 );

package/Input/InputOTP.tsx

@@ -21,11 +21,6 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -83,9 +78,7 @@ const InputOTP = forwardRef(
       onFocus,
       onBlur,
       dataType = 'number',
-      params,
       style,
-      componentId,
       ...props
     }: InputOTPProps,
     ref,
@@ -95,7 +88,6 @@ const InputOTP = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
-    const screenInfo = useContext<any>(ScreenContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -229,23 +221,13 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'InputOTP',
-          params,
-          componentLabel: formatComponentName(floatingValue || ''),
-          state: 'enabled',
-          componentId,
-        }}>
-        <TouchableOpacity
-          activeOpacity={1}
-          onPress={onFocusInput}
-          style={[style, styles.otpWrapper]}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </TouchableOpacity>
-      </ScreenContext.Provider>
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={onFocusInput}
+        style={[style, styles.otpWrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </TouchableOpacity>
     );
   },
 );

package/Input/InputSearch.tsx

@@ -13,10 +13,6 @@ import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const InputSearch = forwardRef(
   (
     {
@@ -32,9 +28,7 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
-      hasColorBG = true,
-      params,
-      componentId,
+        hasColorBG = true,
       ...props
     }: InputSearchProps,
     ref,
@@ -43,7 +37,6 @@ const InputSearch = forwardRef(
     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);
@@ -124,56 +117,33 @@ const InputSearch = forwardRef(
       );
     };
 
-    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;
+    const backgroundColor = hasColorBG ? theme.colors.background.default : theme.colors.background.surface
 
     return (
-      <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 style={[style, styles.searchInputContainer]}>
+        <View
+          style={[
+            styles.searchInputWrapper,
+            {
+              backgroundColor,
+            }
+          ]}>
+          <Icon
+            source={'navigation_search'}
+            size={24}
+            color={theme.colors.text.hint}
+          />
+          {renderInputView()}
+          {renderIconView()}
         </View>
-      </ScreenContext.Provider>
+        {showButtonText && (
+          <TouchableOpacity onPress={onPressButtonText}>
+            <Text typography={'action_default_bold'} style={styles.textButton}>
+              {buttonText}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
     );
   },
 );

package/Input/index.tsx

@@ -80,9 +80,6 @@ export interface InputProps extends TextInputProps {
   fontWeight?: 'Regular' | 'Bold';
 
   onPressIcon?: () => void;
-
-  params?: any;
-  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -124,14 +121,7 @@ export interface InputSearchProps extends TextInputProps {
    */
   icon?: string;
 
-  /**
-   *
-   */
-  hasColorBG?: boolean;
-
-  params?: any;
-
-  componentId?: string;
+  hasColorBG?: boolean
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
@@ -255,22 +245,7 @@ export interface InputDropDownProps {
    */
   leadingIconColor?: string;
 
-  /**
-   * 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[];
+  style: ViewStyle | ViewStyle[];
 }
 
 export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};

package/Radio/index.tsx

@@ -6,11 +6,6 @@ import {Text} from '../Text';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatNameLength} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -19,11 +14,8 @@ const Radio: FC<RadioProps> = ({
   onChange,
   label,
   style,
-  params,
-  componentId,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -46,38 +38,26 @@ const Radio: FC<RadioProps> = ({
   }
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Button',
-        params,
-        state: disabled ? 'disabled' : 'enabled',
-        componentId,
-        componentLabel: formatNameLength(label || ''),
-        componentValue: value,
-        action: 'click',
-      }}>
-      <TouchableOpacity
-        onPress={onChange}
-        disabled={disabled}
+    <TouchableOpacity
+      onPress={onChange}
+      disabled={disabled}
+      style={[
+        style,
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+      ]}>
+      <View
         style={[
-          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>
+          styles.radio,
+          checkBoxStyle,
+          disabledStyle,
+          {marginRight: label ? Spacing.XS : 0},
+        ]}
+      />
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+    </TouchableOpacity>
   );
 };
 

package/Radio/types.ts

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

package/Switch/index.tsx

@@ -1,17 +1,11 @@
-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';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const Switch: FC<SwitchProps> = props => {
-  const {value, onChange, disabled, style, params, componentId} = props;
-  const screenInfo = useContext<any>(ScreenContext);
-
+  const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
@@ -21,29 +15,18 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Button',
-        params,
-        state: disabled ? 'disabled' : 'enabled',
-        componentId,
-        componentValue: value,
-        action: 'click',
-      }}>
-      <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>
+    <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>
   );
 };
 

package/Switch/types.ts

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

package/code-scanner.js

@@ -1,51 +1,138 @@
 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 = (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);
+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) + '%'
+    }
 };
 
+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 [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);
+    const rootPath = `${__dirname}/../../../`
+    const branchName = process.argv[2] || "";
+    const removedHead = branchName.replace("remotes/origin/", "");
+    const removedTail = removedHead.replace("/master", "");
+    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(removedTail, kitJsonPath, miniappJsonPath, reactNativeJsonPath, fsJsonPath);
+        sendMessage(result)
+        console.log(result)
+    } catch (error) {
+        console.error("Error during scan or calculation:", error);
+    }
 };
 
-main().catch(console.error);
+main();