@momo-kits/foundation 0.76.1-beta.2 → 0.77.1-optimize.2

package/Text/index.tsx

@@ -3,7 +3,6 @@ import {Text as RNText, TextProps as RNTextProps} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
 import {ApplicationContext} from '../Application';
-import {GridContext} from '../Layout';
 import {scaleSize} from './utils';
 
 const SFProText: TypographyWeight = {
@@ -51,22 +50,30 @@ export interface TextProps extends RNTextProps {
    * It can be any valid color string (e.g., hex, rgb, rgba, etc.).
    */
   color?: string;
-
-  /**
-   * Optional. Represents the width of the Text component in terms of span numbers.
-   * It can be used to set a specific width for the text based on a predefined grid system.
-   */
-  widthSpan?: number;
 }
+
+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,
-  widthSpan,
   ...rest
 }) => {
-  const grid = useContext(GridContext);
   const {theme} = useContext(ApplicationContext);
 
   const getTypoStyle = (typo: Typography) => {
@@ -93,32 +100,30 @@ const Text: React.FC<TextProps> = ({
     }
 
     return {
+      ...typoStyle,
       fontFamily,
       fontSize: scaleSize(fontSize),
       lineHeight: scaleSize(lineHeight),
       fontStyle,
+      fontWeight,
     };
   };
 
   const textStyle = getTypoStyle(typography);
-  const spanStyle = widthSpan ? {width: grid.getSizeSpan(widthSpan)} : {};
+
+  if (deprecatedValues.includes(typography)) {
+    console.warn(
+      `Warning: The typography value "${typography}" is deprecated.`,
+    );
+  }
+
   return (
     <RNText
       {...rest}
-      accessibilityLabel={`Text/${children}`}
-      style={[
-        style,
-        textStyle,
-        spanStyle,
-        {color: color ?? theme.colors.text.default},
-      ]}>
+      style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
       {children ?? ''}
     </RNText>
   );
 };
 
-Text.defaultProps = {
-  typography: 'paragraph_default',
-};
-
 export {Text, scaleSize};

package/Text/styles.ts

@@ -1,4 +1,42 @@
 export default {
+  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: 18, fontWeight: '600'},
+  body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
+  body_default_regularstrikethrought: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  description_default_regular: {
+    fontSize: 12,
+    lineHeight: 18,
+    fontWeight: '400',
+  },
+  description_default_regularstrikethrought: {
+    fontSize: 12,
+    lineHeight: 18,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  description_xs_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_xs_regularstrikethrought: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  label_default_medium: {fontSize: 14, lineHeight: 20, 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: 18, fontWeight: '700'},
+  action_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
+  /**non-support**/
   headline_default: {
     fontSize: 28,
     lineHeight: 34,

package/Text/types.ts

@@ -14,27 +14,39 @@ export type TypographyWeight = {
 };
 
 export type Typography =
+  /**
+   * @deprecated
+   **/
   | 'headline_default'
-  | 'headline_s'
   | 'headline_l'
   | 'headline_xl'
   | 'title_default'
   | 'title_xs'
   | 'title_s'
   | 'header_default'
-  | 'header_xs'
-  | 'header_s'
   | 'paragraph_default'
   | 'paragraph_bold'
   | 'paragraph_italic'
-  | 'description_default'
-  | 'description_xs'
-  | 'description_s'
-  | 'label_default'
   | 'label_xxs'
-  | 'label_xs'
-  | 'label_s'
-  | 'action_default'
-  | 'action_xxs'
-  | 'action_xs'
-  | 'action_s';
+  | 'action_s'
+  /**
+   * end
+   **/
+  | 'headline_default_bold'
+  | 'header_m_bold'
+  | 'header_default_bold'
+  | 'header_s_semibold'
+  | 'header_xs_semibold'
+  | 'body_default_regular'
+  | 'body_default_regularstrikethrought'
+  | 'description_default_regular'
+  | 'description_default_regularstrikethrought'
+  | 'description_xs_regular'
+  | 'description_xs_regularstrikethrought'
+  | 'label_default_medium'
+  | 'label_s_medium'
+  | 'label_xs_medium'
+  | 'action_default_bold'
+  | 'action_s_bold'
+  | 'action_xs_bold'
+  | 'action_xxs_bold';

package/Text/utils.ts

@@ -6,7 +6,7 @@ const scaleSize = (size: number) => {
   const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
 
   if (scaleRate > 1) {
-    return Math.min(Math.round(size * scaleRate), size + 5);
+    return Math.min(Math.round(size * scaleRate), size + 3);
   }
 
   return size;

package/Title/index.tsx

@@ -0,0 +1,186 @@
+import React, {FC, useContext, useState} from 'react';
+import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
+import styles from './styles';
+import {Icon} from '../Icon';
+import {scaleSize, Text} from '../Text';
+import {ApplicationContext} from '../Application';
+import {Badge} from '../Badge';
+import {Typography} from '../Text/types';
+import {TitleProps} from './types';
+import {Colors} from '../Consts';
+
+const Title: FC<TitleProps> = ({
+  title = 'Title',
+  type = 'section',
+  size = 'medium',
+  icon,
+  description,
+  iconColor = null,
+  iconAlign = 'top',
+  showRightAction = false,
+  showTrailingAction = false,
+  badgeLabel,
+  buttonTitle,
+  onPressRightAction = () => {},
+  onPressTrailingAction = () => {},
+  buttonSize = 'small',
+  textOnly = false,
+  style,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [badgeWidth, setBadgeWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  const styleSheet: {
+    [key: string]: any;
+  } = styles;
+  const typography = `${type}_${size}`;
+  const isSection = type === 'section';
+  const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
+  const buttonTypo: Typography =
+    buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
+  const flexStyle = showTrailingAction && {maxWidth: '70%'};
+
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    let iconStyle: ViewStyle = {
+      justifyContent: 'flex-start',
+    };
+
+    if (iconAlign === 'middle') {
+      iconStyle = {justifyContent: 'center'};
+    }
+
+    if (iconAlign === 'bottom') {
+      iconStyle = {justifyContent: 'flex-end'};
+    }
+
+    return (
+      <View style={[styles.iconView, iconStyle]}>
+        <Icon color={iconColor} source={icon} />
+      </View>
+    );
+  };
+
+  const renderContent = () => {
+    return (
+      <View style={styles.contentView}>
+        <View
+          onLayout={e => {
+            setContentWidth(e.nativeEvent.layout.width);
+          }}
+          style={[styles.iconLeftView, flexStyle]}>
+          <RNText
+            numberOfLines={numberOfLines}
+            style={[
+              styleSheet[typography],
+              styles.title,
+              {maxWidth: contentWidth - badgeWidth},
+            ]}>
+            {title}
+          </RNText>
+          {badgeLabel && (
+            <View
+              onLayout={e => {
+                setBadgeWidth(e.nativeEvent.layout.width);
+              }}
+              style={{
+                alignItems: 'center',
+              }}>
+              <Badge style={styles.badge} label={badgeLabel} />
+            </View>
+          )}
+          {renderActionLeft()}
+        </View>
+        {description && (
+          <Text
+            style={styles.description}
+            color={theme.colors.text.secondary}
+            typography={'description_default_regular'}>
+            {description}
+          </Text>
+        )}
+      </View>
+    );
+  };
+
+  const renderActionLeft = () => {
+    return (
+      <TouchableOpacity
+        onPress={onPressTrailingAction}
+        style={styles.iconLeftView}>
+        {showTrailingAction && !showRightAction && (
+          <View
+            style={[
+              styles.iconLeft,
+              {
+                backgroundColor: isSection
+                  ? Colors.black_06 + '99'
+                  : Colors.black_06 + '4D',
+              },
+            ]}>
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={scaleSize(18)}
+              color={theme.colors.text.default}
+            />
+          </View>
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  const renderActionRight = () => {
+    if (!showRightAction || showTrailingAction) return false;
+
+    return (
+      <View>
+        {!buttonTitle ? (
+          <TouchableOpacity
+            onPress={onPressRightAction}
+            style={[
+              styles.iconRight,
+              {
+                backgroundColor: theme.colors.primary + '0F',
+              },
+            ]}>
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={scaleSize(22)}
+              color={theme.colors.primary}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity onPress={onPressRightAction}>
+            <Text color={theme.colors.primary} typography={buttonTypo}>
+              {buttonTitle}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
+  if (textOnly) {
+    return (
+      <View style={isSection && styles.margin}>
+        <RNText
+          numberOfLines={numberOfLines}
+          style={[styleSheet[typography], styles.title]}>
+          {title}
+        </RNText>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[style, styles.wrapper, isSection && styles.margin]}>
+      {renderIcon()}
+      {renderContent()}
+      {renderActionRight()}
+    </View>
+  );
+};
+
+export {Title};
+export type {TitleProps};

package/Title/styles.ts

@@ -0,0 +1,79 @@
+import {StyleSheet} from 'react-native';
+import {scaleSize} from '../Text';
+import {Colors, Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  card_small: {
+    fontSize: scaleSize(14),
+    lineHeight: scaleSize(20),
+  },
+  card_medium: {
+    fontSize: scaleSize(16),
+    lineHeight: scaleSize(22),
+  },
+  card_large: {
+    fontSize: scaleSize(18),
+    lineHeight: scaleSize(26),
+  },
+  section_medium: {
+    fontSize: scaleSize(20),
+    lineHeight: scaleSize(28),
+  },
+  section_small: {
+    fontSize: scaleSize(16),
+    lineHeight: scaleSize(22),
+  },
+  section_large: {
+    fontSize: scaleSize(24),
+    lineHeight: scaleSize(34),
+  },
+  actionIcon: {
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    marginRight: Spacing.S,
+    borderRadius: Radius.XS,
+  },
+  wrapper: {
+    flexDirection: 'row',
+  },
+  margin: {
+    marginTop: Spacing.S,
+  },
+  iconView: {
+    marginRight: Spacing.S,
+  },
+  iconRight: {
+    width: scaleSize(22),
+    height: scaleSize(22),
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: Spacing.S,
+  },
+  iconLeft: {
+    width: scaleSize(18),
+    height: scaleSize(18),
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: Spacing.XS,
+  },
+  iconLeftView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  contentView: {marginRight: Spacing.S, flex: 1},
+  title: {
+    fontWeight: 'bold',
+    color: Colors.black_17,
+  },
+  badge: {
+    marginLeft: Spacing.XS,
+  },
+  description: {
+    marginTop: Spacing.XS,
+  },
+});

package/Title/types.ts

@@ -0,0 +1,20 @@
+import {ViewStyle} from 'react-native';
+
+export type TitleProps = {
+  type?: 'card' | 'section';
+  size?: 'small' | 'medium' | 'large';
+  title: string;
+  icon?: string;
+  description?: string;
+  iconColor?: string;
+  iconAlign?: 'top' | 'middle' | 'bottom';
+  showRightAction?: boolean;
+  showTrailingAction?: boolean;
+  badgeLabel?: string;
+  buttonTitle?: string;
+  buttonSize?: 'small' | 'large';
+  onPressRightAction?: () => void;
+  onPressTrailingAction?: () => void;
+  textOnly?: boolean;
+  style?: ViewStyle;
+};

package/code-scanner.js

@@ -0,0 +1,143 @@
+const scanner = require('react-scanner');
+const fs = require('fs');
+const path = require('path');
+
+const scan = async (config) => {
+    return await scanner.run(config);
+};
+
+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) + '%'
+    }
+};
+
+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);
+    }
+};
+
+main();

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
@@ -43,3 +44,9 @@ export * from './Tag';
 export * from './Tag/types';
 export * from './Pagination';
 export * from './Pagination/types';
+export * from './Loader';
+export * from './Loader/types';
+export * from './Title';
+export * from './Title/types';
+export * from './Badge';
+export * from './Badge/types';