@momo-kits/foundation 0.81.51-beta.0 → 0.81.52

package/Title/index.tsx

@@ -1,196 +1,129 @@
 import React, {FC, useContext, useState} from 'react';
-import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
+import {
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  Text as RNText,
+  TextLayoutEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {TitleProps} from './types';
 import {Icon} from '../Icon';
-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';
+import {ApplicationContext} from '../Application';
+import {Colors, Spacing} from '../Consts';
+import {scaleSize, Text} from '../Text';
 
 const Title: FC<TitleProps> = ({
-  title = 'Title',
+  size = 'large',
   type = 'section',
-  size = 'medium',
+  onPressAction,
+  actionTitle,
+  title = 'Title',
+  titleFlex = true,
+  showAction = true,
   icon,
   description,
-  iconColor = null,
-  iconAlign = 'top',
-  showRightAction = false,
-  showTrailingAction = false,
-  badgeLabel,
-  buttonTitle,
-  onPressRightAction = () => {},
-  onPressTrailingAction = () => {},
-  buttonSize = 'small',
-  textOnly = false,
-  style,
+  usePadding = true,
 }) => {
   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'};
-    }
+  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;
 
-    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 => {
-            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 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 renderActionLeft = () => {
+  const renderSemiAction = () => {
+    if (textLines > 1) return null;
     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>
-        )}
+        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'}
+        />
       </TouchableOpacity>
     );
   };
-
-  const renderActionRight = () => {
-    if (!showRightAction || showTrailingAction) return false;
-
-    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>
-          </TouchableOpacity>
-        )}
-      </View>
-    );
+  const onLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
   };
 
-  if (textOnly) {
-    return (
-      <View style={isSection && styles.margin}>
-        <RNText
-          numberOfLines={numberOfLines}
-          style={[styleSheet[typography], styles.title]}>
-          {title}
-        </RNText>
-      </View>
-    );
-  }
+  const onTextLayout = (e: NativeSyntheticEvent<TextLayoutEventData>) => {
+    setTextLines(e.nativeEvent.lines.length);
+  };
 
   return (
-    <View style={[style, styles.wrapper, isSection && styles.margin]}>
-      {renderIcon()}
-      {renderContent()}
-      {renderActionRight()}
+    <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}
+            </Text>
+          )}
+        </View>
+        {showAction && titleFlex && type !== 'screen' && renderAction()}
+      </View>
     </View>
   );
 };

package/Title/styles.ts

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

package/Title/types.ts

@@ -1,20 +1,52 @@
-import {ViewStyle} from 'react-native';
-
 export type TitleProps = {
-  type?: 'card' | 'section';
-  size?: 'small' | 'medium' | 'large';
+  /**
+   * 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';
+
+  /**
+   * Required. The text of the title.
+   */
   title: string;
-  icon?: string;
+
+  /**
+   * Optional. A description or subtitle that appears below the title.
+   */
   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;
+
+  /**
+   * 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;
 };

package/code-scanner.js

@@ -1,5 +1,4 @@
 const scanner = require('react-scanner');
-const fs = require('fs');
 const path = require('path');
 
 const scan = async config => {
@@ -10,151 +9,43 @@ const calcSum = array => {
   return array.reduce((a, b) => a + b, 0);
 };
 
-const calculateAdoptionRate = async (
-  branchName,
-  kitJsonPath,
-  miniappJsonPath,
-  reactNativeJsonPath,
-  fsJsonPath
-) => {
+const calculateAdoptionRate = (kitJsonPath, miniappJsonPath) => {
   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 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 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, kitJsonRelativePath, miniappJsonRelativePath] =
+    process.argv.slice(2);
 
-  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 kitJsonPath = path.resolve(process.cwd(), kitJsonRelativePath);
+  const miniappJsonPath = path.resolve(process.cwd(), miniappJsonRelativePath);
 
   const config1 = {
     crawlFrom: scanPath,
     includeSubComponents: true,
-    importedFrom: allKitsReg,
+    importedFrom: /@momo-kits\/.+/,
     processors: [['count-components', {outputTo: kitJsonPath}]],
-    rootDir: process.cwd(),
+    rootDir: './',
   };
 
   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(),
+    rootDir: './',
   };
 
-  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);
+  await scan(config1);
+  await scan(config2);
 
-    const result = await calculateAdoptionRate(
-      branchName,
-      kitJsonPath,
-      miniappJsonPath,
-      reactNativeJsonPath,
-      fsJsonPath
-    );
-    sendMessage(result);
-    console.log(result);
-  } catch (error) {
-    console.error('Error during scan or calculation:', error);
-  }
+  calculateAdoptionRate(kitJsonPath, miniappJsonPath);
 };
 
-main();
+main().catch(console.error);

package/index.ts

@@ -49,10 +49,3 @@ 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/package.json

@@ -1,24 +1,25 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.51-beta.0",
+    "version": "0.81.52",
     "description": "React Native Component Kits",
     "main": "index.ts",
-    "scripts": {},
+    "scripts": {
+        "postinstall": "node verify.js"
+    },
     "keywords": [
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "2.4.1",
+        "@gorhom/bottom-sheet": "git+https://gitlab.com/momo-platform/bottom-sheet.git#main",
         "react-native-safe-area-context": "3.1.4",
         "react-native-linear-gradient": "2.8.3",
         "react-native-gesture-handler": "1.10.3",
-        "react-native-modalize": "2.1.1",
         "react-native-fast-image": "8.1.5",
         "@react-navigation/bottom-tabs": "https://gitlab.mservice.com.vn/momo-platform/react-native-bottom-tabs.git",
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
-        "lottie-react-native": "git+https://gitlab.mservice.com.vn/momo-platform/momo-lottie-react-native.git",
+        "lottie-react-native": "3.3.2",
         "@react-navigation/stack": "https://gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
     },
     "peerDependencies": {
@@ -31,7 +32,6 @@
         "@types/jest": "26.0.23",
         "@types/react-native": "0.64.4",
         "@types/react-test-renderer": "16.9.2",
-        "@types/d3-shape": "1.3.7",
         "babel-jest": "^26.6.3",
         "eslint": "^7.14.0",
         "jest": "^26.6.3",
@@ -39,8 +39,7 @@
         "react-test-renderer": "17.0.1",
         "typescript": "^4.0.3",
         "@momo-platform/versions": "4.1.11",
-        "react-scanner": "^1.1.0",
-        "@types/color": "3.0.6"
+        "react-scanner": "^1.1.0"
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"