@momo-kits/native-kits 0.157.1-beta.9-debug → 0.157.1-com.1-debug

package/src/foundations/Layout/Section.tsx

@@ -0,0 +1,103 @@
+import React, { useContext } from 'react';
+import { Dimensions, View, ViewProps } from 'react-native';
+import { useGridSystem } from './utils';
+import { GridContextProps } from './types';
+import { GridContext } from './index';
+import { ApplicationContext, MiniAppContext } from '../Context';
+import styles from './styles';
+import { Image } from '../Image';
+import { Spacing } from '../Consts';
+
+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;
+
+  /**
+   * Optional. Background image for the Section component.
+   */
+  backgroundImage?: string;
+}
+
+const Section: React.FC<SectionProps> = ({
+  children,
+  useMargin = true,
+  backgroundImage,
+  style,
+  ...props
+}) => {
+  const { showGrid } = useContext(ApplicationContext);
+  const { numberOfColumns } = useGridSystem();
+
+  const gutterSize = 12;
+  let margin = 0;
+  if (useMargin) {
+    margin = 12;
+  }
+  let widthSection = Dimensions.get('window').width;
+  if (useMargin) {
+    widthSection = widthSection - margin * 2;
+  }
+
+  const sizePerSpan =
+    (widthSection - gutterSize * (numberOfColumns - 1)) / numberOfColumns -
+    1 / numberOfColumns;
+
+  const gridContext: GridContextProps = {
+    numberOfColumns,
+    gutterSize: Spacing.M,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + gutterSize * (span - 1);
+    },
+  };
+
+  /**
+   * render overlay only dev mode
+   */
+  const renderOverlay = () => {
+    return <View pointerEvents={'none'} style={styles.boxGridSection} />;
+  };
+
+  return (
+    <GridContext.Provider value={gridContext}>
+      <View
+        {...props}
+        onLayout={undefined}
+        style={[
+          style,
+          styles.protectedStyle,
+          {
+            width: widthSection,
+            marginHorizontal: margin,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: gutterSize,
+          },
+        ]}
+      >
+        {!!backgroundImage && (
+          <Image
+            source={{ uri: backgroundImage }}
+            style={styles.imageBackground}
+          />
+        )}
+        {/* Render only allowed children as valid React elements */}
+        {children}
+        {showGrid && renderOverlay()}
+      </View>
+    </GridContext.Provider>
+  );
+};
+
+Section.displayName = 'Section';
+
+export default Section;

package/src/foundations/Layout/TrackingScope.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TrackingScopeContext } from '../Context';
+
+const TrackingScope = ({
+  scopeName,
+  children,
+}: {
+  scopeName: string;
+  children: any;
+}) => {
+  return (
+    <TrackingScopeContext.Provider value={{ scopeName }}>
+      {children}
+    </TrackingScopeContext.Provider>
+  );
+};
+
+export { TrackingScope };

package/src/foundations/Layout/index.ts

@@ -0,0 +1,34 @@
+import Card from './Card';
+import Section from './Section';
+import GridSystem from './GridSystem';
+import { validateChildren } from './utils';
+import { createContext } from 'react';
+import { GridContextProps } from './types';
+import Item from './Item';
+import ItemList from './ItemList';
+import ItemSectionList from './ItemSectionList';
+import Screen from './Screen';
+import { TrackingScope } from './TrackingScope';
+import { ScreenProps } from './Screen';
+
+const GridContext = createContext<GridContextProps>({
+  numberOfColumns: 12,
+  gutterSize: 12,
+  sizePerSpan: 0,
+  getSizeSpan: () => 0,
+});
+
+export type { ScreenProps };
+
+export {
+  GridContext,
+  Card,
+  Section,
+  GridSystem,
+  validateChildren,
+  Item,
+  ItemList,
+  ItemSectionList,
+  Screen,
+  TrackingScope,
+};

package/src/foundations/Layout/styles.ts

@@ -0,0 +1,95 @@
+import { Platform, StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '../Consts';
+
+export default StyleSheet.create({
+  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: {
+    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,
+      },
+    }),
+  },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});

package/src/foundations/Layout/types.ts

@@ -0,0 +1,40 @@
+import { NavigationOptions, SearchHeaderProps } from '../Application/types';
+
+export type HeaderType = 'default' | 'extended' | 'none';
+
+export type ScreenRef = {
+  /**
+   * Set options for screen
+   * @param params
+   */
+  setOptions: (params: NavigationOptions) => void;
+
+  /**
+   * Show search header
+   * @param params
+   */
+  setSearchHeader: (params: SearchHeaderProps) => void;
+};
+export type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type GridContextProps = {
+  /**
+   * Represents the number of columns in the grid.
+   */
+  numberOfColumns: number;
+
+  /**
+   * Represents the size of the gutter between grid items.
+   */
+  gutterSize: number;
+
+  /**
+   * Represents the size (width or height) per span number.
+   */
+  sizePerSpan: number;
+
+  /**
+   * A function that receives a span number and returns the calculated size for that span.
+   */
+  getSizeSpan: (span: number) => number;
+};

package/src/foundations/Layout/utils.ts

@@ -0,0 +1,47 @@
+import React, { Fragment, ReactElement } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+/**
+ * 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.Children.toArray(children).filter(
+      (child): child is ReactElement => React.isValidElement(child),
+    );
+    for (const child of flattenChildren) {
+      validateType(child);
+    }
+    return flattenChildren;
+  } else {
+    if (React.isValidElement(children)) {
+      validateType(children as ReactElement);
+    }
+    return children;
+  }
+};
+
+const useGridSystem = () => {
+  const windowSize = useWindowDimensions();
+  const numberOfColumns = windowSize.width > 600 ? 24 : 12;
+  return { numberOfColumns };
+};
+
+export { useGridSystem, validateChildren };

package/src/foundations/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 '../Context';
+import { hexToRGBA } from './utils';
+import { LoaderProps } from './types';
+
+const DotLoader: FC<LoaderProps> = ({ color, style }) => {
+  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 }, style]}
+      autoPlay
+    />
+  );
+};
+
+export default DotLoader;

package/src/foundations/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/src/foundations/Loader/ProgressBar.tsx

@@ -0,0 +1,45 @@
+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 '../Context';
+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/src/foundations/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 '../Context';
+import { LoaderProps } from './types';
+
+const Spinner: FC<LoaderProps> = ({ color, style }) => {
+  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 }, style]}
+      autoPlay
+    />
+  );
+};
+
+export default Spinner;

package/src/foundations/Loader/index.tsx

@@ -0,0 +1,6 @@
+import Loader from './Loader';
+import ProgressBar from './ProgressBar';
+import {LoaderProps, ProgressBarProps} from './types';
+
+export {Loader, ProgressBar};
+export type {LoaderProps, ProgressBarProps};

package/src/foundations/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/src/foundations/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/src/foundations/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/src/foundations/Pagination/Dot.tsx

@@ -0,0 +1,19 @@
+import React, { FC, useContext } from 'react';
+import { Animated } from 'react-native';
+import styles from './styles';
+import { DotProps } from './types';
+import { ApplicationContext } from '../Context';
+
+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/src/foundations/Pagination/PaginationDot.tsx

@@ -0,0 +1,44 @@
+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, MiniAppContext } from '../Context';
+
+const PaginationDot: FC<ChildPaginationProps> = ({
+  dataLength = 2,
+  activeIndex = 0,
+  style,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  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, showBaseLineDebug && styles.debugBaseLine]}
+    >
+      <View style={styles.paginationPinkContainer}>{renderDots()}</View>
+    </View>
+  );
+};
+
+export default PaginationDot;

package/src/foundations/Pagination/PaginationNumber.tsx

@@ -0,0 +1,31 @@
+import React, { FC, useContext } from 'react';
+import { View } from 'react-native';
+import { ChildPaginationProps } from './types';
+import styles from './styles';
+import { Text } from '../Text';
+import { Colors } from '../Consts';
+import { MiniAppContext } from '../Context';
+
+const PaginationNumber: FC<ChildPaginationProps> = ({
+  activeIndex = 0,
+  dataLength = 2,
+  style,
+}) => {
+  const context = useContext<any>(MiniAppContext);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  return (
+    <View
+      style={[style, styles.row, showBaseLineDebug && styles.debugBaseLine]}
+    >
+      <View style={styles.paginationNumberContainer}>
+        <Text color={Colors.black_01} typography={'label_default_medium'}>{`${
+          activeIndex + 1
+        }/${dataLength}`}</Text>
+      </View>
+    </View>
+  );
+};
+
+export default PaginationNumber;