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

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/DotLoader.tsx

@@ -0,0 +1,39 @@
+import React, {FC, useContext} from 'react';
+import {View, ViewProps} from 'react-native';
+import AnimatedLottieView from 'lottie-react-native';
+import animation from '../Assets/DotAnimation.json';
+import {ApplicationContext} from '../Application';
+import {hexToRGBA} from './utils';
+
+const DotLoader: FC<ViewProps> = ({style}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const arrayColor = [
+    theme.colors.primary,
+    theme.colors.secondary,
+    theme.colors.primary,
+  ];
+
+  let source = animation;
+  source.assets[0].layers[0].shapes[0].it.forEach(item => {
+    if (item.ty === 'fl' && item.c) {
+      item.c.k.forEach((fillItem, index) => {
+        if (typeof fillItem !== 'number') {
+          fillItem.s = hexToRGBA(arrayColor[index]);
+        }
+      });
+    }
+  });
+
+  return (
+    <View style={style}>
+      <AnimatedLottieView
+        source={source}
+        style={{width: 52, height: 18}}
+        autoPlay
+      />
+    </View>
+  );
+};
+
+export default DotLoader;

package/Loader/Loader.tsx

@@ -0,0 +1,14 @@
+import React, {FC} from 'react';
+import {LoaderProps} from './types';
+import DotLoader from './DotLoader';
+import Spinner from './Spinner';
+
+const Loader: FC<LoaderProps> = ({type = 'dot', style}) => {
+  if (type === 'spinner') {
+    return <Spinner style={style} />;
+  }
+
+  return <DotLoader style={style} />;
+};
+
+export default Loader;

package/Loader/ProgressBar.tsx

@@ -0,0 +1,44 @@
+import React, {FC, useContext, useEffect, useRef} from 'react';
+import {Animated, View} from 'react-native';
+import styles from './styles';
+import {ProgressBarProps} from './types';
+import {ApplicationContext} from '../Application';
+import {Radius} from '../Consts';
+
+const ProgressBar: FC<ProgressBarProps> = ({percent = 0, style}) => {
+  const {theme} = useContext(ApplicationContext);
+  const animation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(animation, {
+      toValue: percent,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [percent, animation]);
+
+  const width = animation.interpolate({
+    inputRange: [0, 100],
+    outputRange: ['0%', '100%'],
+  });
+
+  return (
+    <View
+      style={[
+        style,
+        styles.progressContainer,
+        {backgroundColor: theme.colors.background.default},
+      ]}>
+      <Animated.View
+        style={{
+          height: 4,
+          borderRadius: Radius.XXS,
+          width,
+          backgroundColor: theme.colors.primary,
+        }}
+      />
+    </View>
+  );
+};
+
+export default ProgressBar;

package/Loader/Spinner.tsx

@@ -0,0 +1,31 @@
+import React, {FC, useContext} from 'react';
+import {View, ViewProps} from 'react-native';
+import AnimatedLottieView from 'lottie-react-native';
+import animation from '../Assets/SpinnerAnimation.json';
+import {hexToRGBA} from './utils';
+import {ApplicationContext} from '../Application';
+
+const Spinner: FC<ViewProps> = ({style}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  let source = animation;
+  source.assets[0].layers.forEach(layer => {
+    layer.shapes[0].it.forEach(item => {
+      if (item.ty === 'fl' && item.c) {
+        item.c.k = hexToRGBA(theme.colors.primary);
+      }
+    });
+  });
+
+  return (
+    <View style={style}>
+      <AnimatedLottieView
+        source={source}
+        style={{width: 24, height: 24}}
+        autoPlay
+      />
+    </View>
+  );
+};
+
+export default Spinner;

package/Loader/index.tsx

@@ -0,0 +1,4 @@
+import Loader from './Loader';
+import ProgressBar from './ProgressBar';
+
+export {Loader, ProgressBar};

package/Loader/styles.ts

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native';
+import {Radius} from '../Consts';
+
+export default StyleSheet.create({
+  progressContainer: {
+    width: '100%',
+    height: 4,
+    borderRadius: Radius.XXS,
+  },
+});

package/Loader/types.ts

@@ -0,0 +1,11 @@
+import {ViewStyle} from 'react-native';
+
+export type LoaderProps = {
+  type?: 'dot' | 'spinner';
+  style?: ViewStyle | ViewStyle[];
+};
+
+export type ProgressBarProps = {
+  percent: number;
+  style?: ViewStyle | ViewStyle[];
+};

package/Loader/utils.ts

@@ -0,0 +1,25 @@
+export const hexToRGBA = (hex: string) => {
+  const normalizedHex = hex.startsWith('#') ? hex.slice(1) : hex;
+
+  if (!/^([0-9A-Fa-f]{3}){1,2}$/.test(normalizedHex)) {
+    throw new Error('Invalid HEX color.');
+  }
+
+  const expandedHex =
+    normalizedHex.length === 3
+      ? normalizedHex
+          .split('')
+          .map(val => val + val)
+          .join('')
+      : normalizedHex;
+
+  const hexMatch = expandedHex.match(/.{2}/g);
+
+  if (!hexMatch) {
+    throw new Error('HEX parsing failed.');
+  }
+
+  return hexMatch
+    .map(val => parseInt(val, 16))
+    .map(val => Math.round((val / 255) * 1000) / 1000);
+};

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/index.ts

@@ -43,3 +43,5 @@ export * from './Tag';
 export * from './Tag/types';
 export * from './Pagination';
 export * from './Pagination/types';
+export * from './Loader';
+export * from './Loader/types';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.77.7",
+    "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;