@momo-kits/foundation 0.89.5 → 0.89.6-rc.2

package/Title/index.tsx

@@ -1,129 +1,196 @@
 import React, {FC, useContext, useState} from 'react';
-import {
-  LayoutChangeEvent,
-  NativeSyntheticEvent,
-  Text as RNText,
-  TextLayoutEventData,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {TitleProps} from './types';
+import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
 import {Icon} from '../Icon';
-import styles from './styles';
-import {ApplicationContext} from '../Application';
-import {Colors, Spacing} from '../Consts';
 import {scaleSize, Text} from '../Text';
+import {ApplicationContext} from '../Application';
+import {Badge} from '../Badge';
+import {Colors} from '../Consts';
+import styles from './styles';
+import {TitleProps} from './types';
+import {Typography} from '../Text/types';
 
 const Title: FC<TitleProps> = ({
-  size = 'large',
-  type = 'section',
-  onPressAction,
-  actionTitle,
   title = 'Title',
-  titleFlex = true,
-  showAction = true,
+  type = 'section',
+  size = 'medium',
   icon,
   description,
-  usePadding = true,
+  iconColor = null,
+  iconAlign = 'top',
+  showRightAction = false,
+  showTrailingAction = false,
+  badgeLabel,
+  buttonTitle,
+  onPressRightAction = () => {},
+  onPressTrailingAction = () => {},
+  buttonSize = 'small',
+  textOnly = false,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [textLines, setTextLines] = useState(0);
-  const typeStyle =
-    type === 'screen' ? styles.screen : styles[`${type}_${size}`];
-  const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
-  const marginStyle =
-    type === 'section' && usePadding ? {marginTop: Spacing.S} : {};
-  const numberOfLines = type === 'section' ? 1 : 2;
+  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 renderAction = () => {
-    return !!actionTitle && titleFlex ? (
-      <TouchableOpacity onPress={onPressAction}>
-        <Text typography={'action_s_bold'} color={theme.colors.primary}>
-          {actionTitle}
-        </Text>
-      </TouchableOpacity>
-    ) : (
-      <TouchableOpacity
-        style={[
-          {backgroundColor: theme.colors.primary + '0F'},
-          styles.actionIcon,
-          {width: scaleSize(22), height: scaleSize(22)},
-        ]}
-        onPress={onPressAction}>
-        <Icon
-          size={scaleSize(22)}
-          color={theme.colors.primary}
-          source={'arrow_chevron_right_small'}
-        />
-      </TouchableOpacity>
+  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 renderSemiAction = () => {
-    if (textLines > 1) return null;
+  const renderContent = () => {
+    return (
+      <View style={styles.contentView}>
+        <View
+          onLayout={e => {
+            if (e.nativeEvent.layout.width !== contentWidth) {
+              setContentWidth(e.nativeEvent.layout.width);
+            }
+          }}
+          style={[styles.iconLeftView, flexStyle]}>
+          <RNText
+            numberOfLines={numberOfLines}
+            style={[
+              styleSheet[typography],
+              styles.title,
+              {
+                maxWidth:
+                  contentWidth > 0 ? contentWidth - badgeWidth : undefined,
+              },
+            ]}>
+            {title}
+          </RNText>
+          {badgeLabel && (
+            <View
+              onLayout={e => {
+                if (e.nativeEvent.layout.width !== badgeWidth) {
+                  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
-        style={[
-          {backgroundColor: Colors.black_06},
-          styles.actionIcon,
-          {width: scaleSize(18), height: scaleSize(18)},
-        ]}
-        onPress={onPressAction}>
-        <Icon
-          size={scaleSize(18)}
-          color={theme.colors.text.default}
-          source={'arrow_chevron_right_small'}
-        />
+        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 onLayout = (e: LayoutChangeEvent) => {
-    setContainerWidth(e.nativeEvent.layout.width);
-  };
 
-  const onTextLayout = (e: NativeSyntheticEvent<TextLayoutEventData>) => {
-    setTextLines(e.nativeEvent.lines.length);
-  };
+  const renderActionRight = () => {
+    if (!showRightAction || showTrailingAction) return false;
 
-  return (
-    <View onLayout={onLayout} style={[styles.wrapper, marginStyle]}>
-      {!!icon && type !== 'screen' && (
-        <Icon style={styles.icon} source={icon} />
-      )}
-      <View style={{flex: 1, flexDirection: 'row'}}>
-        <View style={styles.textContent}>
-          <View
-            style={{
-              flexDirection: 'row',
-              maxWidth: containerWidth - scaleSize(22),
-            }}>
-            <RNText
-              onTextLayout={onTextLayout}
-              numberOfLines={numberOfLines}
-              style={[
-                typeStyle,
-                {
-                  fontFamily: `${theme.font}-${titleWeight}`,
-                  color: theme.colors.text.default,
-                  marginRight: Spacing.S,
-                },
-              ]}>
-              {title}
-            </RNText>
-            {!titleFlex && renderSemiAction()}
-          </View>
-          {!!description && type !== 'screen' && (
-            <Text
-              numberOfLines={1}
-              typography={'description_default_regular'}
-              color={theme.colors.text.secondary}>
-              {description}
+    const lineHeight = styleSheet[typography].lineHeight;
+
+    return (
+      <View
+        style={{
+          height: lineHeight,
+          justifyContent: 'center',
+        }}>
+        {!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>
-          )}
-        </View>
-        {showAction && titleFlex && type !== 'screen' && renderAction()}
+          </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>
   );
 };

package/Title/styles.ts

@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import {scaleSize} from '../Text';
-import {Radius, Spacing} from '../Consts';
+import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   card_small: {
@@ -27,10 +27,6 @@ export default StyleSheet.create({
     fontSize: scaleSize(24),
     lineHeight: scaleSize(34),
   },
-  screen: {
-    fontSize: scaleSize(36),
-    lineHeight: scaleSize(44),
-  },
   actionIcon: {
     borderRadius: Radius.M,
     alignItems: 'center',
@@ -41,12 +37,43 @@ export default StyleSheet.create({
     borderRadius: Radius.XS,
   },
   wrapper: {
-    width: '100%',
     flexDirection: 'row',
-    alignItems: 'center',
   },
-  textContent: {
+  margin: {
+    marginTop: Spacing.S,
+  },
+  iconView: {
     marginRight: Spacing.S,
-    flex: 1,
+  },
+  iconRight: {
+    width: 22,
+    height: 22,
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: Spacing.S,
+  },
+  iconLeft: {
+    width: 18,
+    height: 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

@@ -1,52 +1,20 @@
-export type TitleProps = {
-  /**
-   * Optional. Defines the type of Title component.
-   * 'screen' - Used for screen titles.
-   * 'section' - Used for section titles within a screen.
-   * 'card' - Used for titles within a card component.
-   */
-  type?: 'screen' | 'section' | 'card';
+import {ViewStyle} from 'react-native';
 
-  /**
-   * Required. The text of the title.
-   */
+export type TitleProps = {
+  type?: 'card' | 'section';
+  size?: 'small' | 'medium' | 'large';
   title: string;
-
-  /**
-   * Optional. A description or subtitle that appears below the title.
-   */
-  description?: string;
-
-  /**
-   * Optional. Defines the size of the Title component.
-   * 'large' - A larger, more prominent title.
-   * 'small' - A smaller, less prominent title.
-   */
-  size?: 'large' | 'medium' | 'small';
-
-  /**
-   * Optional. Represents the name or key of the icon to be displayed alongside the title.
-   */
   icon?: string;
-
-  /**
-   * Optional. If `true`, the title will be flexible in its container, adjusting its width dynamically.
-   */
-  titleFlex?: boolean;
-
-  /**
-   * Optional. Text for an action button associated with the title.
-   */
-  actionTitle?: string;
-
-  /**
-   * Optional. Function to be called when the action associated with the title is pressed.
-   */
-  onPressAction?: () => void;
-
-  /**
-   * Optional. If `true`, an action button or icon is displayed alongside the title.
-   */
-  showAction?: boolean;
-  usePadding?: boolean;
+  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

@@ -1,4 +1,5 @@
 const scanner = require('react-scanner');
+const fs = require('fs');
 const path = require('path');
 
 const scan = async config => {
@@ -9,43 +10,151 @@ const calcSum = array => {
   return array.reduce((a, b) => a + b, 0);
 };
 
-const calculateAdoptionRate = (kitJsonPath, miniappJsonPath) => {
+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 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 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 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 kitJsonPath = path.resolve(process.cwd(), kitJsonRelativePath);
-  const miniappJsonPath = path.resolve(process.cwd(), miniappJsonRelativePath);
+  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(\/.*)?|foundation(\/.*)?)|@miniapp-platform\/(components(\/.*)?|foundation(\/.*)?))$/;
+  const RNReg = /react-native|react-native-svg/;
 
   const config1 = {
     crawlFrom: scanPath,
     includeSubComponents: true,
-    importedFrom: /@momo-kits\/.+/,
+    importedFrom: allKitsReg,
     processors: [['count-components', {outputTo: kitJsonPath}]],
-    rootDir: './',
+    rootDir: process.cwd(),
   };
 
   const config2 = {
     crawlFrom: scanPath,
     includeSubComponents: true,
     processors: [['count-components', {outputTo: miniappJsonPath}]],
-    rootDir: './',
+    rootDir: process.cwd(),
+  };
+
+  const config3 = {
+    crawlFrom: scanPath,
+    includeSubComponents: true,
+    importedFrom: RNReg,
+    processors: [['count-components', {outputTo: reactNativeJsonPath}]],
+    rootDir: process.cwd(),
   };
 
-  await scan(config1);
-  await scan(config2);
+  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);
 
-  calculateAdoptionRate(kitJsonPath, miniappJsonPath);
+    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().catch(console.error);
+main();

package/index.ts

@@ -49,3 +49,10 @@ export * from './Title';
 export * from './Title/types';
 export * from './Badge';
 export * from './Badge/types';
+
+/**
+ * export trick for keep old mini app working
+ * @deprecated
+ */
+export * from 'react-native-modalize';
+export * from '@gorhom/bottom-sheet';

package/migrate_typo.js

@@ -0,0 +1,56 @@
+const {readFileSync, writeFileSync, readdirSync, statSync} = require('fs');
+const path = require('path');
+let rootPath = process.argv[2];
+
+const migrateText = [
+  {typo1: 'headline_s', typo2: 'headline_default_bold'},
+  {typo1: 'header_s', typo2: 'header_s_semibold'},
+  {typo1: 'header_xs', typo2: 'header_xs_semibold'},
+  {typo1: 'description_default', typo2: 'body_default_regular'},
+  {typo1: 'description_s', typo2: 'description_default_regular'},
+  {typo1: 'description_xs', typo2: 'description_xs_regular'},
+  {typo1: 'label_default', typo2: 'label_default_medium'},
+  {typo1: 'label_s', typo2: 'label_s_medium'},
+  {typo1: 'label_xs', typo2: 'label_xs_medium'},
+  {typo1: 'action_default', typo2: 'action_default_bold'},
+  {typo1: 'action_xs', typo2: 'action_xs_bold'},
+  {typo1: 'action_xxs', typo2: 'action_xxs_bold'},
+];
+
+function replaceTextInFile(oldText, newText, filePath) {
+  try {
+    let content = readFileSync(filePath, {encoding: 'utf-8'});
+    const regex = new RegExp(`\\b${oldText}\\b`, 'g');
+    content = content.replace(regex, newText);
+    writeFileSync(filePath, content, 'utf8');
+    console.log(`Replaced text in: ${filePath}`);
+  } catch (error) {
+    console.error(`Error processing file ${filePath}:`, error);
+  }
+}
+
+function scanDirectory(directory, oldText, newText) {
+  const files = readdirSync(directory);
+
+  files.forEach(file => {
+    const filePath = path.join(directory, file);
+    const stat = statSync(filePath);
+
+    if (stat.isDirectory()) {
+      scanDirectory(filePath, oldText, newText);
+    } else if (
+      stat.isFile() &&
+      (filePath.endsWith('.tsx') || filePath.endsWith('.ts'))
+    ) {
+      replaceTextInFile(oldText, newText, filePath);
+    }
+  });
+}
+
+function main() {
+  migrateText.forEach(({typo1, typo2}) => {
+    scanDirectory(rootPath, typo1, typo2);
+  });
+}
+
+main();