@momo-kits/foundation 0.76.1-beta.2 → 0.77.1-optimize.10

package/Layout/index.ts

@@ -5,13 +5,23 @@ import {validateChildren} from './utils';
 import {createContext} from 'react';
 import {GridContextProps} from './types';
 import Item from './Item';
+import ItemList from './ItemList';
+import ItemSectionList from './ItemSectionList';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
   gutterSize: 12,
-  margin: 12,
   sizePerSpan: 0,
-  getSizeSpan: span => 0,
+  getSizeSpan: () => 0,
 });
 
-export {GridContext, Card, Section, GridSystem, validateChildren, Item};
+export {
+  GridContext,
+  Card,
+  Section,
+  GridSystem,
+  validateChildren,
+  Item,
+  ItemList,
+  ItemSectionList,
+};

package/Layout/styles.ts

@@ -0,0 +1,101 @@
+import {Platform, StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  extendedHeader: {
+    aspectRatio: 1.75,
+    position: 'absolute',
+    width: '100%',
+    height: 210,
+  },
+  screenBanner: {
+    width: '100%',
+  },
+  boxGrid: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderColor: 'red',
+    borderWidth: 1,
+    zIndex: 99,
+  },
+  boxGridSection: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderColor: 'blue',
+    borderWidth: 2,
+    zIndex: 100,
+  },
+  boxGridCard: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderColor: 'green',
+    borderWidth: 2,
+    zIndex: 100,
+  },
+  card: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    borderRadius: Radius.M,
+    padding: 12,
+  },
+  item: {
+    overflow: 'hidden',
+    margin: undefined,
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    marginVertical: undefined,
+    marginHorizontal: undefined,
+  },
+  imageBackground: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  protectedStyle: {
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    paddingTop: undefined,
+    paddingBottom: undefined,
+    paddingLeft: undefined,
+    paddingRight: undefined,
+    padding: undefined,
+    margin: undefined,
+    marginHorizontal: undefined,
+    marginVertical: undefined,
+    paddingHorizontal: undefined,
+    paddingVertical: undefined,
+  },
+  shadow: {
+    paddingTop: Spacing.S,
+    ...Platform.select({
+      ios: {
+        shadowColor: Colors.black_17,
+        shadowOffset: {
+          width: 2,
+          height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 10,
+      },
+      android: {
+        shadowColor: Colors.black_20,
+        elevation: 24,
+      },
+    }),
+  },
+});

package/Layout/types.ts

@@ -1,6 +1,4 @@
-import {ViewProps} from 'react-native';
-
-type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type HeaderType = 'default' | 'surface' | 'extended' | 'none';
 
 export type GridContextProps = {
   /**
@@ -13,11 +11,6 @@ export type GridContextProps = {
    */
   gutterSize: number;
 
-  /**
-   * Optional. Represents the margin around the grid.
-   */
-  margin?: number;
-
   /**
    * Represents the size (width or height) per span number.
    */
@@ -28,34 +21,3 @@ export type GridContextProps = {
    */
   getSizeSpan: (span: number) => number;
 };
-export interface SectionProps extends ViewProps {
-  /**
-   * Optional. If `true`, the Section component will be displayed in an expanded state.
-   * Defaults to `false` if not provided.
-   */
-  expanded?: boolean;
-
-  /**
-   * Optional. If `true`, margin will be applied to the Section component.
-   * Defaults to `false` if not provided.
-   */
-  useMargin?: boolean;
-
-  backgroundColor?: string;
-}
-
-export interface ItemProps extends ViewProps {
-  /**
-   * Represents the width of the Card component in terms of span numbers (1-12).
-   */
-  widthSpan?: SpanNumber;
-
-  /**
-   * Optional. Represents the height of the Card component in terms of span numbers (1-12).
-   */
-  heightSpan?: SpanNumber;
-}
-
-export interface CardProps extends ViewProps {
-  background?: string;
-}

package/Layout/utils.ts

@@ -1,5 +1,5 @@
-import {Alert, Dimensions} from 'react-native';
-import React, {useEffect, useState} from 'react';
+import React, {Fragment, ReactElement, useEffect, useState} from 'react';
+import {Dimensions} from 'react-native';
 
 /**
  * validate children type
@@ -7,53 +7,31 @@ import React, {useEffect, useState} from 'react';
  * @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;
   }
-
-  return results;
 };
 
 const useGridSystem = () => {
@@ -62,19 +40,16 @@ const useGridSystem = () => {
   );
 
   useEffect(() => {
-    const subscription: any = Dimensions.addEventListener(
-      'change',
-      ({window}: any) => {
-        const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
-        if (newColumns != numberOfColumns) {
-          setNumberOfColumns(newColumns);
-        }
-      },
-    );
+    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};
+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/PaginationDot.tsx

@@ -9,10 +9,11 @@ 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,20 +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 '../Application';
 import {Colors} from '../Consts';
 
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
+  style,
 }) => {
   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

@@ -31,7 +31,6 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   const renderScrollView = () => {
     return (
       <Animated.ScrollView
-        accessibilityLabel={'PaginationScroll'}
         ref={scrollViewRef}
         onScroll={Animated.event(
           [

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 '../Application';
 
 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 = {