@momo-kits/foundation 0.74.2-react-native.1

package/Layout/utils.ts

@@ -0,0 +1,55 @@
+import {Dimensions} from 'react-native';
+import React, {Fragment, ReactElement, useEffect, useState} from 'react';
+
+/**
+ * validate children type
+ * @param children
+ * @param childrenTypes
+ */
+const validateChildren = (
+  children: React.ReactNode | React.ReactNode[],
+  childrenTypes: Array<React.ReactNode>,
+) => {
+  const validateType = (child: React.ReactElement) => {
+    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: 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 {numberOfColumns};
+};
+
+export {validateChildren, useGridSystem};

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 = require('../Assets/DotAnimation.json');
+  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,28 @@
+import React, {FC, useContext} from 'react';
+import AnimatedLottieView from 'lottie-react-native';
+import {hexToRGBA} from './utils';
+import {ApplicationContext} from '../Application';
+import {LoaderProps} from './types';
+
+const Spinner: FC<LoaderProps> = ({color}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  let source: any = require('../Assets/DotAnimation.json');
+  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

@@ -0,0 +1,16 @@
+import React, {FC, useContext} from 'react';
+import {Animated} from 'react-native';
+import styles from './styles';
+import {DotProps} from './types';
+import {ApplicationContext} from '../Application';
+
+const Dot: FC<DotProps> = ({active, style}) => {
+  const {theme} = useContext(ApplicationContext);
+  const dotStyle = active
+    ? [styles.activeDot]
+    : [styles.inactiveDot, {backgroundColor: theme.colors.background.pressed}];
+
+  return <Animated.View style={[style, dotStyle]} />;
+};
+
+export default Dot;

package/Pagination/PaginationDot.tsx

@@ -0,0 +1,38 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {ChildPaginationProps} from './types';
+import Dot from './Dot';
+import styles from './styles';
+import {Spacing} from '../Consts';
+import {ApplicationContext} from '../Application';
+
+const PaginationDot: FC<ChildPaginationProps> = ({
+  dataLength = 2,
+  activeIndex = 0,
+  style,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const renderDots = () => {
+    const dots: React.ReactElement[] = [];
+    for (let i = 0; i < dataLength; i++) {
+      dots.push(
+        <Dot
+          key={`Dot${i}`}
+          style={[
+            i !== dataLength - 1 ? {marginRight: Spacing.XS} : {},
+            {backgroundColor: theme.colors.primary},
+          ]}
+          active={activeIndex === i}
+        />,
+      );
+    }
+    return dots;
+  };
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationPinkContainer}>{renderDots()}</View>
+    </View>
+  );
+};
+
+export default PaginationDot;

package/Pagination/PaginationNumber.tsx

@@ -0,0 +1,24 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {ChildPaginationProps} from './types';
+import styles from './styles';
+import {Text} from '../Text';
+import {Colors} from '../Consts';
+
+const PaginationNumber: FC<ChildPaginationProps> = ({
+  activeIndex = 0,
+  dataLength = 2,
+  style,
+}) => {
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationNumberContainer}>
+        <Text color={Colors.black_01} typography={'label_default_medium'}>{`${
+          activeIndex + 1
+        }/${dataLength}`}</Text>
+      </View>
+    </View>
+  );
+};
+
+export default PaginationNumber;

package/Pagination/PaginationScroll.tsx

@@ -0,0 +1,88 @@
+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 '../Application';
+
+const INDICATOR_WIDTH = 24;
+const INDICATOR_CONTAINER_WIDTH = 72;
+const PaginationScroll: FC<ScrollIndicatorProps> = ({
+  style,
+  children,
+  scrollViewRef,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const left = useRef(new Animated.Value(0)).current;
+  const [scrollViewWidth, setScrollViewWidth] = useState(0);
+  const [scrollContentWidth, setScrollContentWidth] = useState(0);
+
+  const translateX = () => {
+    if (scrollViewWidth && scrollContentWidth) {
+      const value = left.interpolate({
+        inputRange: [0, scrollContentWidth - scrollViewWidth],
+        outputRange: [0, INDICATOR_CONTAINER_WIDTH - INDICATOR_WIDTH],
+        extrapolate: 'clamp',
+      });
+      return {transform: [{translateX: value}]};
+    }
+    return {};
+  };
+
+  const renderScrollView = () => {
+    return (
+      <Animated.ScrollView
+        ref={scrollViewRef}
+        onScroll={Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: {
+                  x: left,
+                },
+              },
+            },
+          ],
+          {useNativeDriver: true},
+        )}
+        alwaysBounceHorizontal={false}
+        showsHorizontalScrollIndicator={false}
+        horizontal
+        style={styles.scrollView}
+        onContentSizeChange={width => {
+          setScrollContentWidth(width);
+        }}
+        onLayout={e => {
+          setScrollViewWidth(e.nativeEvent.layout.width);
+        }}>
+        {children}
+      </Animated.ScrollView>
+    );
+  };
+  const renderIndicator = () => {
+    return (
+      <View
+        style={[
+          styles.indicatorContainer,
+          {backgroundColor: theme.colors.background.pressed},
+        ]}>
+        <Animated.View
+          style={[
+            styles.indicator,
+            {
+              backgroundColor: theme.colors.primary,
+            },
+            translateX(),
+          ]}
+        />
+      </View>
+    );
+  };
+  return (
+    <View style={[style, styles.scrollContainer]}>
+      {renderScrollView()}
+      {renderIndicator()}
+    </View>
+  );
+};
+
+export default PaginationScroll;

package/Pagination/PaginationWhiteDot.tsx

@@ -0,0 +1,35 @@
+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';
+
+const PaginationWhiteDot: FC<ChildPaginationProps> = ({
+  dataLength = 2,
+  activeIndex = 0,
+  style,
+}) => {
+  const renderDots = () => {
+    const dots: React.ReactElement[] = [];
+    for (let i = 0; i < dataLength; i++) {
+      dots.push(
+        <Dot
+          style={[
+            i !== dataLength - 1 ? {marginRight: Spacing.XS} : {},
+            {backgroundColor: Colors.black_01},
+          ]}
+          active={activeIndex === i}
+        />,
+      );
+    }
+    return dots;
+  };
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationWhiteContainer}>{renderDots()}</View>
+    </View>
+  );
+};
+
+export default PaginationWhiteDot;

package/Pagination/index.tsx

@@ -0,0 +1,25 @@
+import React, {FC} from 'react';
+import {PaginationProps} from './types';
+import PaginationWhiteDot from './PaginationWhiteDot';
+import PaginationDot from './PaginationDot';
+import PaginationNumber from './PaginationNumber';
+import PaginationScroll from './PaginationScroll';
+
+const Pagination: FC<PaginationProps> = props => {
+  const {type} = props;
+
+  const getComponent = (): any => {
+    switch (type) {
+      case 'black_white':
+        return <PaginationWhiteDot {...props} />;
+      case 'number':
+        return <PaginationNumber {...props} />;
+      default:
+        return <PaginationDot {...props} />;
+    }
+  };
+
+  return getComponent();
+};
+
+export {Pagination, PaginationScroll};

package/Pagination/styles.ts

@@ -0,0 +1,50 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  activeDot: {
+    height: 4,
+    width: 12,
+    borderRadius: Radius.XS,
+  },
+  inactiveDot: {
+    height: 4,
+    width: 4,
+    borderRadius: Radius.XS,
+  },
+  paginationPinkContainer: {
+    flexDirection: 'row',
+  },
+  paginationWhiteContainer: {
+    flexDirection: 'row',
+    padding: Spacing.XS,
+    borderRadius: Radius.S,
+    backgroundColor: Colors.black_20 + '33',
+  },
+  paginationNumberContainer: {
+    paddingHorizontal: Spacing.S,
+    borderRadius: Radius.L,
+    backgroundColor: Colors.black_20 + '33',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scrollContainer: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  scrollView: {
+    marginBottom: Spacing.L,
+  },
+
+  indicator: {
+    width: 24,
+    height: 4,
+    borderRadius: Radius.XS,
+  },
+  indicatorContainer: {
+    width: 72,
+    height: 4,
+    borderRadius: Radius.XS,
+  },
+  row: {flexDirection: 'row'},
+});

package/Pagination/types.ts

@@ -0,0 +1,40 @@
+import {ScrollView, ScrollViewProps, ViewStyle} from 'react-native';
+import {Ref} from 'react';
+
+export type PaginationProps = {
+  /**
+   * Optional. Defines the visual style of the Pagination component.
+   * - 'default': Represents the default style.
+   * - 'black_white': Represents a pagination that have black background.
+   * - 'number': Represents a style where pages are represented by numbers.
+   * - 'scroll': Represents a scrollable style.
+   */
+  type?: 'default' | 'black_white' | 'number' | 'scroll';
+
+  /**
+   * Represents the currently active (selected) index in the Pagination component.
+   */
+  activeIndex: number;
+
+  /**
+   * Represents the total number of items (pages) in the Pagination component.
+   */
+  dataLength: number;
+
+  style?: ViewStyle | ViewStyle[];
+};
+
+export type DotProps = {
+  active: boolean;
+  style: ViewStyle | ViewStyle[];
+};
+
+export interface ScrollIndicatorProps extends ScrollViewProps {
+  /**
+   * Optional. Represents a reference to the ScrollView component.
+   * It can be used to access the instance methods of the ScrollView.
+   */
+  scrollViewRef?: Ref<ScrollView>;
+}
+
+export type ChildPaginationProps = Omit<PaginationProps, 'type'>;