@momo-kits/foundation 0.77.8 → 0.78.2

package/Loader/DotLoader.tsx

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

package/Loader/Loader.tsx

@@ -0,0 +1,13 @@
+import React, {FC} from 'react';
+import {LoaderProps} from './types';
+import DotLoader from './DotLoader';
+import Spinner from './Spinner';
+
+const Loader: FC<LoaderProps> = ({type = 'dot', ...props}) => {
+  if (type === 'spinner') {
+    return <Spinner {...props} key={props.color} />;
+  }
+  return <DotLoader {...props} key={props.color} />;
+};
+
+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,29 @@
+import React, {FC, useContext} from 'react';
+import AnimatedLottieView from 'lottie-react-native';
+import animation from '../Assets/SpinnerAnimation.json';
+import {hexToRGBA} from './utils';
+import {ApplicationContext} from '../Application';
+import {LoaderProps} from './types';
+
+const Spinner: FC<LoaderProps> = ({color}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  let source: any = animation;
+  source.assets[0].layers.forEach((layer: any) => {
+    layer.shapes[0].it.forEach((item: any) => {
+      if (item.ty === 'fl' && item.c) {
+        item.c.k = hexToRGBA(color ?? theme.colors.primary);
+      }
+    });
+  });
+
+  return (
+    <AnimatedLottieView
+      source={source}
+      style={{width: 24, height: 24}}
+      autoPlay
+    />
+  );
+};
+
+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,35 @@
+import {ViewStyle} from 'react-native';
+
+export type LoaderProps = {
+  /**
+   * Optional. Type of loader, can be 'dot' or 'spinner'.
+   */
+  type?: 'dot' | 'spinner';
+
+  /**
+   * Optional. Color for the loader.
+   */
+  color?: string;
+
+  /**
+   * Optional. Style or styles for the loader component.
+   */
+  style?: ViewStyle | ViewStyle[];
+};
+
+export type ProgressBarProps = {
+  /**
+   * Required. Percentage value to display on the progress bar.
+   */
+  percent: number;
+
+  /**
+   * Optional. Color for the progress bar.
+   */
+  color?: string;
+
+  /**
+   * Optional. Style or styles for the progress bar component.
+   */
+  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/Pagination/PaginationNumber.tsx

@@ -1,9 +1,8 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {View} from 'react-native';
 import {ChildPaginationProps} from './types';
 import styles from './styles';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 
 const PaginationNumber: FC<ChildPaginationProps> = ({

package/Pagination/PaginationWhiteDot.tsx

@@ -1,16 +1,14 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {View} from 'react-native';
 import {ChildPaginationProps} from './types';
 import styles from './styles';
 import Dot from './Dot';
 import {Colors, Spacing} from '../Consts';
-import {ApplicationContext} from '../Application';
 
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
 }) => {
-  const {theme} = useContext(ApplicationContext);
   const renderDots = () => {
     const dots = [];
     for (let i = 0; i < dataLength; i++) {

package/Popup/PopupNotify.tsx

@@ -10,8 +10,8 @@ import {Icon} from '../Icon';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
-  title,
-  description,
+  title = 'Title',
+  description = 'Description',
   information,
   secondary,
   primary,
@@ -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,
@@ -204,12 +206,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PopupNotify.defaultProps = {
-  title: 'Title',
-  primary: {
-    title: 'Primary',
-    onPress: () => {},
-  },
-};
-
 export default PopupNotify;

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/Popup/types.ts

@@ -1,3 +1,6 @@
+import {TextStyle} from 'react-native';
+import React from 'react';
+
 export type PopupNotifyProps = {
   /**
    * `image`: Optional. Represents the URL or path of the image to be displayed in the PopupNotify component.
@@ -12,7 +15,7 @@ export type PopupNotifyProps = {
   /**
    * `description`: Represents the description text to be displayed in the PopupNotify component.
    */
-  description: string;
+  description: string | React.ReactNode;
 
   /**
    * `information`: Optional. Represents additional information text to be displayed in the PopupNotify component.
@@ -67,4 +70,9 @@ type PopupAction = {
   onPress: () => void;
 };
 
+export type HighlightText = {
+  text: string;
+  style: TextStyle;
+};
+
 type PopupActionDirection = 'row' | 'column' | 'auto';

package/Radio/index.tsx

@@ -39,7 +39,7 @@ const Radio: FC<RadioProps> = ({
 
   return (
     <TouchableOpacity
-      accessibilityLabel={`Radio/${label}`}
+      accessibilityLabel={`Radio/${label}/${value}`}
       onPress={onChange}
       disabled={disabled}
       style={[

package/Skeleton/types.ts

@@ -1,3 +1,6 @@
 export type SkeletonTypes = {
+  /**
+   * Optional. Custom styles for the Skeleton component.
+   */
   style?: object;
 };

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,14 @@ 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 Text: React.FC<TextProps> = ({
   typography,
   color,
   children,
   style,
-  widthSpan,
   ...rest
 }) => {
-  const grid = useContext(GridContext);
   const {theme} = useContext(ApplicationContext);
 
   const getTypoStyle = (typo: Typography) => {
@@ -101,17 +92,11 @@ const Text: React.FC<TextProps> = ({
   };
 
   const textStyle = getTypoStyle(typography);
-  const spanStyle = widthSpan ? {width: grid.getSizeSpan(widthSpan)} : {};
   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>
   );

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/code-scanner.js

@@ -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.8",
+    "version": "0.78.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,14 +10,17 @@
         "@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"
+        "lottie-react-native": "3.3.2",
+        "@react-navigation/stack": "git+https://gitlab.com/dung.huynh1/react-navigation-stack.git#main"
     },
     "peerDependencies": {
         "react-native": "*"
@@ -34,7 +37,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/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "rootDir": ".",
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": false,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext",
+    "verbatimModuleSyntax": false
+  }
+}

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;