@momo-kits/foundation 0.92.8 → 0.92.9-beta.1

package/Input/index.tsx

@@ -6,13 +6,6 @@ import InputOTP from './InputOTP';
 import InputSearch from './InputSearch';
 import InputTextArea from './InputTextArea';
 
-export interface InputRef {
-  focus: () => void;
-  blur: () => void;
-  clear: () => void;
-  setText: (text: string) => void;
-}
-
 export interface InputProps extends TextInputProps {
   /**
    *  Optional. Defines the size of the Input component.
@@ -105,14 +98,8 @@ export interface InputProps extends TextInputProps {
   hintText?: string;
 }
 
-type InputPropsWithoutSizeAndIcon = Omit<
-  InputProps,
-  'size' | 'icon' | 'iconColor'
->;
-
-type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
-
-export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
+export interface InputTextAreaProps
+  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
   /**
    * Optional. Defines the height of the InputTextArea component.
    * It can be used to set a specific height for the text area.
@@ -132,6 +119,9 @@ export interface InputSearchProps extends TextInputProps {
    */
   showButtonText?: boolean;
 
+  /**
+   * Optional. Represents the value for the floating title in the InputSearch component.
+   */
   onPressButtonText?: () => void;
 
   /**
@@ -145,18 +135,22 @@ export interface InputSearchProps extends TextInputProps {
   icon?: string;
 
   /**
-   *
+   * Optional. If `true`, the user won't be able to interact with the Input component.
    */
   hasColorBG?: boolean;
 
+  /**
+   * Optional. Represents the style of the InputSearch component.
+   */
   params?: any;
 }
 
-export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
+export interface InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
 
 export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
 
-export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+export interface InputOTPProps
+  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
   /**
    * Optional. Defines the length of the OTP (One Time Password) input.
    * Can be 2, 4, 6, 8, or 10.

package/Input/utils.ts

@@ -61,7 +61,7 @@ const formatMoneyToNumber = (money: string, currencyUnit: string) => {
 };
 const checkTyping = (text: string, value: boolean, setValue: any) => {
   let typing = text?.length > 0;
-  if (typing != value) {
+  if (typing !== value) {
     setValue(typing);
   }
 };

package/Layout/Card.tsx

@@ -86,7 +86,7 @@ const Card: React.FC<CardProps> = ({
         {rows.map((i: React.ReactElement, index: number) => {
           return (
             <View key={`Item${cursor}${index}`} style={{flexDirection: 'row'}}>
-              {index != 0 && (
+              {index !== 0 && (
                 <View style={{width: gridContext.gutterSize}}></View>
               )}
               {i}
@@ -126,14 +126,14 @@ const Card: React.FC<CardProps> = ({
           rows = [item];
         }
 
-        if (i == arrayChild.length - 1) {
+        if (i === arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
       }
     } else {
       element.push(children);
-      if (children?.type == Fragment) {
+      if (children?.type === Fragment) {
         return renderView(children?.props.children);
       }
     }
@@ -144,6 +144,7 @@ const Card: React.FC<CardProps> = ({
     <GridContext.Provider value={gridContext}>
       <View
         {...props}
+        onLayout={undefined}
         style={[
           {backgroundColor: theme.colors.background.surface},
           style,

package/Layout/FloatingButton.tsx

@@ -34,7 +34,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
 }: FloatingButtonProps) => {
   const {theme} = useContext(ApplicationContext);
   const maxWidth = useRef(0);
-  const minWidth = size == 'small' ? 36 : 48;
+  const minWidth = size === 'small' ? 36 : 48;
   const [opacityAnimated] = useState(new Animated.Value(0)); // Initial opacity set to 0
   const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
   const lastOffset = useRef(0);
@@ -84,7 +84,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     });
 
     return () => {
-      if (listener != null) {
+      if (listener !== null) {
         animatedValue?.removeListener(listener);
       }
     };
@@ -123,7 +123,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
           right: position === 'right' ? 12 : undefined,
           alignSelf: position === 'center' ? 'center' : 'flex-end',
           width: widthAnimated,
-          height: size == 'small' ? 36 : 48,
+          height: size === 'small' ? 36 : 48,
           backgroundColor: theme.colors.primary,
           bottom,
         },

package/Layout/GridSystem.tsx

@@ -53,7 +53,7 @@ const GridSystem: React.FC<any> = ({
         {list.map((_, index) => {
           return (
             <View style={{flexDirection: 'row'}} key={index.toString()}>
-              {index != -0 && <View style={{width: grid.gutterSize}} />}
+              {index !== -0 && <View style={{width: grid.gutterSize}} />}
               <View
                 key={`Grid${index.toString()}`}
                 pointerEvents="none"

package/Layout/Screen.tsx

@@ -33,6 +33,9 @@ import styles from './styles';
 import {HeaderType} from './types';
 
 export interface ScreenProps extends ViewProps {
+  /**
+   * ReactNode representing the content of the screen.
+   */
   children: React.ReactNode;
   /**
    * Optional. Navigation object for handling navigation actions.
@@ -90,9 +93,10 @@ export interface ScreenProps extends ViewProps {
   floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue' | 'bottom'>;
 
   /**
-   * optional animated value
+   * Optional. Keyboard vertical offset.
    */
-  animatedValue?: Animated.Value;
+  keyboardVerticalOffset?: number;
+
   /**
    * Optional. If `true`, the screen content is using grid layout by span.
    */
@@ -115,13 +119,11 @@ const Screen = forwardRef(
       headerType = 'default',
       floatingButtonProps,
       useGridLayout = true,
-      animatedValue: animated,
+      keyboardVerticalOffset,
     }: ScreenProps,
     ref,
   ) => {
-    const animatedValue = useRef<Animated.Value>(
-      animated ?? new Animated.Value(0),
-    );
+    const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
@@ -132,10 +134,9 @@ const Screen = forwardRef(
     let handleScroll;
     let headerBackground: string | undefined = undefined;
     let Component: any = View;
-    let keyboardVerticalOffset = heightHeader - 20;
-
+    let keyboardOffset = heightHeader - 20;
     if (headerType == 'extended' || animatedHeader) {
-      keyboardVerticalOffset = -20;
+      keyboardOffset = -20;
     }
 
     if (headerType == 'extended') {
@@ -235,7 +236,7 @@ const Screen = forwardRef(
     if (scrollable) {
       Component = Animated.ScrollView;
       handleScroll = scrollViewProps?.onScroll;
-      if (animatedHeader || floatingButtonProps) {
+      if (animatedHeader || floatingButtonProps?.icon) {
         handleScroll = Animated.event(
           [
             {
@@ -296,7 +297,8 @@ const Screen = forwardRef(
                 style={{
                   marginTop: space,
                   flex: item.props?.expanded ? 1 : undefined,
-                }}>
+                }}
+                onLayout={item.props?.onLayout}>
                 {item}
               </View>
             );
@@ -314,7 +316,8 @@ const Screen = forwardRef(
             style={{
               marginTop: space,
               flex: item?.props?.expanded ? 1 : undefined,
-            }}>
+            }}
+            onLayout={item?.props?.onLayout}>
             {children}
           </View>
         );
@@ -337,7 +340,7 @@ const Screen = forwardRef(
         <KeyboardAvoidingView
           style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
-          keyboardVerticalOffset={keyboardVerticalOffset}
+          keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
           behavior={Platform.select({
             ios: 'padding',
             android: undefined,

package/Layout/Section.tsx

@@ -85,7 +85,7 @@ const Section: React.FC<SectionProps> = ({
         {rows.map((i: React.ReactElement, index: number) => {
           return (
             <View key={`Card${cursor}${index}`} style={{flexDirection: 'row'}}>
-              {index != 0 && (
+              {index !== 0 && (
                 <View style={{width: gridContext.gutterSize}}></View>
               )}
               {i}
@@ -125,14 +125,14 @@ const Section: React.FC<SectionProps> = ({
           rows = [item];
         }
 
-        if (i == arrayChild.length - 1) {
+        if (i === arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
       }
     } else {
       element.push(children);
-      if (children?.type == Fragment) {
+      if (children?.type === Fragment) {
         return renderView(children?.props.children);
       }
     }
@@ -151,6 +151,7 @@ const Section: React.FC<SectionProps> = ({
       }}>
       <View
         {...props}
+        onLayout={undefined}
         style={[
           style,
           styles.protectedStyle,

package/Layout/utils.ts

@@ -12,7 +12,7 @@ const validateChildren = (
 ) => {
   const validateType = (child: React.ReactElement) => {
     const valid = childrenTypes.some(
-      childrenType => child?.type === childrenType || child?.type == Fragment,
+      childrenType => child?.type === childrenType || child?.type === Fragment,
     );
     if (!valid) {
       console.warn(
@@ -42,7 +42,7 @@ const useGridSystem = () => {
   useEffect(() => {
     const subscription: any = Dimensions.addEventListener('change', () => {
       const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
-      if (newColumns != numberOfColumns) {
+      if (newColumns !== numberOfColumns) {
         setNumberOfColumns(newColumns);
       }
     });

package/Loader/index.tsx

@@ -1,4 +1,6 @@
 import Loader from './Loader';
 import ProgressBar from './ProgressBar';
+import {LoaderProps, ProgressBarProps} from './types';
 
 export {Loader, ProgressBar};
+export type {LoaderProps, ProgressBarProps};

package/Popup/PopupNotify.tsx

@@ -139,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)
@@ -148,7 +148,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       }
       return renderRow();
     }
-    if (buttonDirection == 'row') {
+    if (buttonDirection === 'row') {
       return renderRow();
     }
     return renderColumn();
@@ -188,7 +188,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
-      accessibilityLabel={'PopupNotify'}
+      accessibilityLabel={'popup_notify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},
@@ -204,7 +204,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               typography={'body_default_regular'}
               onTextLayout={({nativeEvent: {lines}}) => {
                 const enableScroll = lines.length > 3;
-                if (enableScroll != scrollContent) {
+                if (enableScroll !== scrollContent) {
                   setScrollContent(enableScroll);
                 }
               }}>

package/Popup/PopupPromotion.tsx

@@ -79,7 +79,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View accessibilityLabel={'PopupPromotion'}>
+    <View accessibilityLabel={'popup_promotion'}>
       <Image
         source={{
           uri: image,

package/Popup/types.ts

@@ -18,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.

package/Title/index.tsx

@@ -143,8 +143,14 @@ const Title: FC<TitleProps> = ({
   const renderActionRight = () => {
     if (!showRightAction || showTrailingAction) return false;
 
+    const lineHeight = styleSheet[typography].lineHeight;
+
     return (
-      <View>
+      <View
+        style={{
+          height: lineHeight,
+          justifyContent: 'center',
+        }}>
         {!buttonTitle ? (
           <TouchableOpacity
             onPress={onPressRightAction}
@@ -174,7 +180,6 @@ const Title: FC<TitleProps> = ({
   if (textOnly) {
     return (
       <View style={isSection && styles.margin}>
-        zZ
         <RNText
           numberOfLines={numberOfLines}
           style={[styleSheet[typography], styles.title]}>

package/code-scanner.js

@@ -2,142 +2,159 @@ 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 = 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));
-    }
+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)
+  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);
     })
-        .then(response => response.json())
-        .then(data => {
-            console.log('Success:', data);
-        })
-        .catch((error) => {
-            console.error('Error:', error);
-        });
-}
+    .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 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);
+  }
 };
 
 main();