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

package/src/foundations/Layout/Section.tsx

@@ -1,103 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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;