@momo-kits/foundation 0.75.1-beta.9 → 0.75.2-beta.0

package/Layout/utils.ts

@@ -1,6 +1,5 @@
-import {Alert} from 'react-native';
-import React, {ReactElement} from 'react';
-import {SectionProps} from './types';
+import React, {Fragment, ReactElement, useEffect, useState} from 'react';
+import {Dimensions} from 'react-native';
 
 /**
  * validate children type
@@ -8,53 +7,49 @@ import {SectionProps} from './types';
  * @param childrenTypes
  */
 const validateChildren = (
-  children:
-    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
-    | string
-    | number
-    | {}
-    | Iterable<React.ReactNode>
-    | React.ReactPortal
-    | null
-    | undefined
-    | boolean,
-  childrenTypes: Array<React.FC<any>>,
+  children: React.ReactNode | React.ReactNode[],
+  childrenTypes: Array<React.ReactNode>,
 ) => {
-  if (!__DEV__) return children;
-
-  let results: React.ReactElement[] = [];
   const validateType = (child: React.ReactElement) => {
-    return childrenTypes.some(childrenType => child?.type === childrenType);
-  };
-
-  const alertWrongType = () => {
-    Alert.alert(
-      'Component Kits',
-      `Wrong children type for this component, expected are ${childrenTypes
-        .map(type => type.displayName)
-        .join(', ')}.`,
+    const valid = childrenTypes.some(
+      childrenType => child?.type === childrenType || child?.type == Fragment,
     );
+    if (!valid) {
+      console.warn(
+        `Wrong children type for this component, expected are ${childrenTypes
+          .map(item => item)
+          .join(', ')}.`,
+      );
+    }
   };
-
   if (Array.isArray(children)) {
-    const flattenChildren = children.flat();
-    results = flattenChildren.filter((child: React.ReactElement) => {
-      if (validateType(child)) {
-        return child;
-      } else {
-        alertWrongType();
-      }
-    });
-  } else {
-    const singleChild: any = children;
-    if (validateType(singleChild)) {
-      results = [singleChild];
-    } else {
-      alertWrongType();
+    const flattenChildren: React.ReactElement[] = children.flat();
+    for (const child of flattenChildren) {
+      validateType(child);
     }
+    return flattenChildren;
+  } else {
+    validateType(children as ReactElement);
+    return children;
   }
+};
+
+const useGridSystem = () => {
+  const [numberOfColumns, setNumberOfColumns] = useState(
+    Dimensions.get('window').width > 600 ? 24 : 12,
+  );
+
+  useEffect(() => {
+    const subscription: any = Dimensions.addEventListener('change', () => {
+      const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
+      if (newColumns != numberOfColumns) {
+        setNumberOfColumns(newColumns);
+      }
+    });
+    return () => subscription?.remove();
+  }, []);
 
-  return results;
+  return {numberOfColumns};
 };
 
-export {validateChildren};
+export {useGridSystem, validateChildren};

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

@@ -2,7 +2,7 @@ import React, {FC, useContext} from 'react';
 import {Animated} from 'react-native';
 import styles from './styles';
 import {DotProps} from './types';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const Dot: FC<DotProps> = ({active, style}) => {
   const {theme} = useContext(ApplicationContext);

package/Pagination/PaginationDot.tsx

@@ -4,15 +4,16 @@ import {ChildPaginationProps} from './types';
 import Dot from './Dot';
 import styles from './styles';
 import {Spacing} from '../Consts';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const renderDots = () => {
-    const dots = [];
+    const dots: React.ReactElement[] = [];
     for (let i = 0; i < dataLength; i++) {
       dots.push(
         <Dot
@@ -27,7 +28,11 @@ const PaginationDot: FC<ChildPaginationProps> = ({
     }
     return dots;
   };
-  return <View style={styles.paginationPinkContainer}>{renderDots()}</View>;
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationPinkContainer}>{renderDots()}</View>
+    </View>
+  );
 };
 
 export default PaginationDot;

package/Pagination/PaginationNumber.tsx

@@ -1,21 +1,22 @@
-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 '../Navigation';
 import {Colors} from '../Consts';
 
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
+  style,
 }) => {
-  const {theme} = useContext(ApplicationContext);
   return (
-    <View style={[styles.paginationNumberContainer]}>
-      <Text color={Colors.black_01} typography={'label_default'}>{`${
-        activeIndex + 1
-      }/${dataLength}`}</Text>
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationNumberContainer}>
+        <Text color={Colors.black_01} typography={'label_default_medium'}>{`${
+          activeIndex + 1
+        }/${dataLength}`}</Text>
+      </View>
     </View>
   );
 };

package/Pagination/PaginationScroll.tsx

@@ -2,7 +2,7 @@ import React, {FC, useContext, useRef, useState} from 'react';
 import {Animated, View} from 'react-native';
 import {ScrollIndicatorProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Navigation';
+import {ApplicationContext} from '../Application';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;

package/Pagination/PaginationWhiteDot.tsx

@@ -1,18 +1,17 @@
-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 '../Navigation';
 
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
+  style,
 }) => {
-  const {theme} = useContext(ApplicationContext);
   const renderDots = () => {
-    const dots = [];
+    const dots: React.ReactElement[] = [];
     for (let i = 0; i < dataLength; i++) {
       dots.push(
         <Dot
@@ -26,7 +25,11 @@ const PaginationWhiteDot: FC<ChildPaginationProps> = ({
     }
     return dots;
   };
-  return <View style={[styles.paginationWhiteContainer]}>{renderDots()}</View>;
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationWhiteContainer}>{renderDots()}</View>
+    </View>
+  );
 };
 
 export default PaginationWhiteDot;

package/Pagination/styles.ts

@@ -25,6 +25,8 @@ export default StyleSheet.create({
     paddingHorizontal: Spacing.S,
     borderRadius: Radius.L,
     backgroundColor: Colors.black_20 + '33',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   scrollContainer: {
     alignItems: 'center',
@@ -44,4 +46,5 @@ export default StyleSheet.create({
     height: 4,
     borderRadius: Radius.XS,
   },
+  row: {flexDirection: 'row'},
 });

package/Pagination/types.ts

@@ -20,6 +20,8 @@ export type PaginationProps = {
    * Represents the total number of items (pages) in the Pagination component.
    */
   dataLength: number;
+
+  style?: ViewStyle | ViewStyle[];
 };
 
 export type DotProps = {