@momo-kits/foundation 0.77.8-beta.1 → 0.77.8-beta.2

package/Application/Components.tsx

@@ -1,5 +1,6 @@
 import React, {useContext, useEffect, useState} from 'react';
 import {
+  Alert,
   Animated,
   DeviceEventEmitter,
   StatusBar,
@@ -7,13 +8,14 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, NavigationButton} from './index';
+import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {
   HeaderBackgroundProps,
   HeaderBackProps,
   HeaderToolkitProps,
+  NavigationButtonProps,
   TitleCustomProps,
 } from './types';
 import {scaleSize, Text} from '../Text';
@@ -21,6 +23,14 @@ import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
 const styles = StyleSheet.create({
+  navigationButton: {
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    borderColor: '#00000066',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   headerBackground: {
     width: '100%',
     height: undefined,
@@ -77,6 +87,39 @@ const styles = StyleSheet.create({
   },
 });
 
+const NavigationButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  onPress,
+  backgroundColor,
+  useBorder = true,
+  accessibilityLabel,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  if (!backgroundColor && tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
+      style={[
+        styles.navigationButton,
+        {
+          backgroundColor: backgroundColor ?? '#00000066',
+          borderWidth: useBorder && backgroundColor ? 0.5 : 0,
+        },
+      ]}
+      onPress={onPress}>
+      <Icon
+        source={icon}
+        color={tintColor ?? theme.colors.text.default}
+        size={20}
+      />
+    </TouchableOpacity>
+  );
+};
+
 const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
   const {theme} = useContext(ApplicationContext);
   const opacity = props.animatedValue?.interpolate({
@@ -100,6 +143,7 @@ const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
+  onPressLeftHeader,
   useBorder,
   backgroundColor,
   accessibilityLabel = '',
@@ -131,6 +175,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       const requestId = `navigationBackPress#${currentTime}`;
       DeviceEventEmitter.emit('dismiss', {requestId});
     }
+    onPressLeftHeader?.();
   };
 
   return (
@@ -220,8 +265,9 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
 const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const validType = (item: any) => {
     if (__DEV__ && item.type !== NavigationButton) {
-      console.warn(
-        'element type of NavigationButton, Please migrate to use NavigationButton of kits.',
+      Alert.alert(
+        'Rule',
+        'HeaderRightAction contains element type of NavigationButton, Please check again.',
       );
       return <View />;
     }
@@ -366,6 +412,7 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
 };
 
 export {
+  NavigationButton,
   HeaderTitle,
   HeaderLeft,
   HeaderBackground,

package/Application/ModalScreen.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
-import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types';
 import Navigation from './Navigation';
 import {BottomSheetParams, ModalParams} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
@@ -97,7 +96,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   const snapPoints = useMemo(() => ['50%', '90%'], []);
   const {bottom} = useSafeAreaInsets();
-  const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
+  const bottomSheetRef = useRef(null);
   const mountedRef = useRef(true);
 
   useEffect(() => {

package/Application/Navigation.ts

@@ -1,4 +1,5 @@
 import {NavigationProp} from '@react-navigation/native';
+import {Alert} from 'react-native';
 import {NavigationOptions, Theme} from './types';
 import {HeaderRightAction} from './index';
 import {getOptions} from './utils';
@@ -18,8 +19,9 @@ class Navigation {
       const headerRight = params.headerRight?.();
       const type = headerRight?.type;
       if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
-        console.warn(
-          'headerRight not return element type of HeaderRightAction | HeaderToolkitAction, Please migrate to use of kits.',
+        Alert.alert(
+          'Rule',
+          'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
         );
         delete params.headerRight;
       }
@@ -28,6 +30,7 @@ class Navigation {
   };
 
   setOptions = (params: NavigationOptions) => {
+    console.log(params);
     if (__DEV__) {
       params = this.filterParams(params);
     }

package/Application/index.ts

@@ -1,7 +1,6 @@
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
-import NavigationButton from './NavigationButton';
-import {HeaderRightAction} from './Components';
+import {HeaderRightAction, NavigationButton} from './Components';
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';

package/Application/types.ts

@@ -121,6 +121,7 @@ export type NavigationButtonProps = {
 
 export type NavigationOptions = {
   preventBack?: PopupNotifyProps;
+  onPressLeftHeader?: () => void;
   surface?: boolean;
   headerTransparent?: boolean;
   hiddenBack?: boolean;
@@ -134,6 +135,7 @@ export type NavigationOptions = {
 
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
+  onPressLeftHeader?: () => void;
   accessibilityLabel?: string;
 }
 

package/Application/utils.tsx

@@ -76,6 +76,19 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   let titleProps = {};
   let options = {};
 
+  if (typeof params.onPressLeftHeader === 'function') {
+    options = {
+      ...options,
+      headerLeft: (props: any) => (
+        <HeaderLeft
+          {...props}
+          preventBack={params.preventBack}
+          onPressLeftHeader={params.onPressLeftHeader}
+        />
+      ),
+    };
+  }
+
   if (params.preventBack) {
     options = {
       ...options,

package/Button/index.tsx

@@ -62,13 +62,13 @@ export interface ButtonProps extends TouchableOpacityProps {
 }
 
 const Button: FC<ButtonProps> = ({
-  type,
-  size,
-  useTintColor,
-  full,
+  type = 'primary',
+  size = 'large',
+  useTintColor = true,
+  full = false,
   iconRight,
   iconLeft,
-  title,
+  title = 'Button',
   onPress,
   ...rest
 }) => {
@@ -266,13 +266,4 @@ const Button: FC<ButtonProps> = ({
   );
 };
 
-Button.defaultProps = {
-  type: 'primary',
-  size: 'large',
-  full: true,
-  disabled: false,
-  title: 'Button',
-  useTintColor: true,
-};
-
 export {Button};

package/Layout/Screen.tsx

@@ -176,7 +176,7 @@ const Screen: React.FC<ScreenProps> = ({
           <View
             style={{
               paddingTop: Spacing.S,
-              paddingBottom: insets.bottom + Spacing.S,
+              paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
               backgroundColor: theme.colors.background.surface,
             }}>
             <Section>{Footer}</Section>

package/Loader/utils.ts

@@ -2,7 +2,6 @@ export const hexToRGBA = (hex: string) => {
   const normalizedHex = hex.startsWith('#') ? hex.slice(1) : hex;
 
   if (!/^([0-9A-Fa-f]{3}){1,2}$/.test(normalizedHex)) {
-    console.log(hex);
     throw new Error('Invalid HEX color.');
   }
 

package/Popup/PopupNotify.tsx

@@ -110,9 +110,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    */
   const buildCloseIcon = () => {
     return (
-      <View style={styles.iconCloseContainer}>
-        <TouchableOpacity
-          onPress={() => onAction(onIconClose)}
+      <TouchableOpacity
+        style={styles.iconCloseContainer}
+        onPress={() => onAction(onIconClose)}>
+        <View
           style={[
             styles.iconClose,
             {
@@ -125,8 +126,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             color={theme.colors.background.surface}
             size={14}
           />
-        </TouchableOpacity>
-      </View>
+        </View>
+      </TouchableOpacity>
     );
   };
 
@@ -191,8 +192,9 @@ const styles = StyleSheet.create({
   },
   iconCloseContainer: {
     position: 'absolute',
-    top: -Spacing.S,
-    right: -Spacing.S,
+    top: -Spacing.M,
+    right: -Spacing.M,
+    padding: Spacing.XS,
   },
   iconClose: {
     width: 20,

package/Popup/PopupPromotion.tsx

@@ -20,18 +20,21 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
             navigator?.pop();
             onClose?.();
           }}
-          style={[
-            styles.iconClose,
-            {
-              backgroundColor: theme.colors.text.default,
-              borderColor: theme.colors.background.surface,
-            },
-          ]}>
-          <Icon
-            source="navigation_close"
-            color={theme.colors.background.surface}
-            size={14}
-          />
+          style={styles.iconButton}>
+          <View
+            style={[
+              styles.iconClose,
+              {
+                backgroundColor: theme.colors.text.default,
+                borderColor: theme.colors.background.surface,
+              },
+            ]}>
+            <Icon
+              source="navigation_close"
+              color={theme.colors.background.surface}
+              size={14}
+            />
+          </View>
         </TouchableOpacity>
       </View>
     );
@@ -58,7 +61,10 @@ const styles = StyleSheet.create({
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'center',
-    marginTop: Spacing.L,
+    marginTop: Spacing.S,
+  },
+  iconButton: {
+    padding: 8,
   },
   iconClose: {
     width: 20,

package/code-scanner.ts

@@ -0,0 +1,51 @@
+const scanner = require('react-scanner');
+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 = (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 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);
+};
+
+main().catch(console.error);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.77.8-beta.01",
+    "version": "0.77.8-beta.02",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,14 +10,16 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
+        "@gorhom/bottom-sheet": "2.4.1",
         "react-native-safe-area-context": "3.1.4",
         "react-native-linear-gradient": "2.5.6",
+        "react-native-gesture-handler": "1.10.3",
+        "react-native-fast-image": "8.1.5",
         "@react-navigation/bottom-tabs": "git+https://gitlab.com/dung.huynh1/react-navigation-bottom-tabs.git#main",
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
-        "@react-navigation/stack": "git+https://gitlab.com/dung.huynh1/react-navigation-stack.git#main",
-        "@gorhom/bottom-sheet": "2.4.1"
+        "@react-navigation/stack": "git+https://gitlab.com/dung.huynh1/react-navigation-stack.git#main"
     },
     "peerDependencies": {
         "react-native": "*"
@@ -34,7 +36,8 @@
         "jest": "^26.6.3",
         "metro-react-native-babel-preset": "^0.64.0",
         "react-test-renderer": "17.0.1",
-        "typescript": "^4.0.3"
+        "typescript": "^4.0.3",
+        "react-scanner": "^1.1.0"
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"

package/Application/NavigationButton.tsx

@@ -1,54 +0,0 @@
-import {Platform, StyleSheet, TouchableOpacity as TouchRN} from 'react-native';
-import {TouchableOpacity as TouchGesture} from 'react-native-gesture-handler';
-import React, {useContext} from 'react';
-import {NavigationButtonProps} from './types';
-import {ApplicationContext} from './index';
-import {Icon} from '../Icon';
-import {Colors} from '../Consts';
-
-const TouchableOpacity = Platform.OS === 'ios' ? TouchRN : TouchGesture;
-const NavigationButton: React.FC<NavigationButtonProps> = ({
-  icon,
-  tintColor,
-  onPress,
-  backgroundColor,
-  useBorder = true,
-  accessibilityLabel,
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  if (!backgroundColor && tintColor != Colors.black_01) {
-    backgroundColor = theme.colors.background.surface;
-  }
-
-  return (
-    <TouchableOpacity
-      accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
-      style={[
-        styles.container,
-        {
-          backgroundColor: backgroundColor ?? '#00000066',
-          borderWidth: useBorder && backgroundColor ? 0.5 : 0,
-        },
-      ]}
-      onPress={onPress}>
-      <Icon
-        source={icon}
-        color={tintColor ?? theme.colors.text.default}
-        size={20}
-      />
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    height: 28,
-    width: 28,
-    borderRadius: 14,
-    borderColor: '#00000066',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default NavigationButton;