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

package/src/libs/TabView/types.ts

@@ -1,166 +0,0 @@
-import {ReactElement} from 'react';
-import {PagerViewProps} from 'react-native-pager-view';
-import {Animated, ViewStyle} from 'react-native';
-
-export type Tab = {
-  /**
-   * The title of the tab.
-   */
-  title: string;
-
-  /**
-   * Optional. The icon associated with the tab, usually represented by a string referencing the icon's name or path.
-   */
-  icon?: string;
-
-  renderIcon?: (active: boolean) => ReactElement;
-
-  /**
-   * The main component or content to be displayed when this tab is active.
-   */
-  component: ReactElement;
-
-  /**
-   * Optional. If `true`, shows a dot indicator on the tab, often used to signal notifications or updates.
-   */
-  showDot?: boolean;
-
-  /**
-   * Optional. Specifies the size of the dot indicator, either 'small' or 'large'.
-   */
-  dotSize?: 'small' | 'large';
-
-  badgeValue?: string | number;
-
-  accessibilityLabel?: string;
-};
-
-export type TabItemProps = {
-  /**
-   * The Tab object containing the details and content of this tab item.
-   */
-  tab: Tab;
-
-  /**
-   * Indicates if this tab item is currently active or selected.
-   */
-  active: boolean;
-
-  /**
-   * Optional. A callback function that is triggered when this tab item is pressed.
-   */
-  onPressTabItem?: () => void;
-
-  /**
-   * Optional. Specifies the width of the tab item. Useful for customizing layout and appearance.
-   */
-  width?: number;
-
-  /**
-   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
-   */
-  direction?: 'row' | 'column';
-
-  selectedColor?: string;
-
-  unselectedColor?: string;
-};
-
-export type TabViewProps = {
-  /**
-   * Optional. If `true`, allows the tab bar to be scrollable, useful for a large number of tabs.
-   */
-  scrollable?: boolean;
-
-  /**
-   * An array of Tab objects representing each tab in the view.
-   */
-  tabs: Tab[];
-
-  /**
-   * Optional. A callback function that is triggered when a tab item is pressed, receiving the index of the tab as a parameter.
-   */
-  onPressTabItem?: (index: number) => void;
-
-  /**
-   * Optional. Specifies the visual style of the tab view, such as 'default' or 'card'.
-   */
-  type?: 'default' | 'card';
-
-  /**
-   * Optional. Specifies the initial page or tab to be displayed.
-   */
-  initialPage?: number;
-
-  /**
-   * Optional. Additional properties to pass to the underlying pager view component.
-   */
-  pagerProps?: Omit<PagerViewProps, 'children'>;
-
-  /**
-   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
-   */
-  direction?: 'row' | 'column';
-
-  selectedColor?: string;
-
-  unselectedColor?: string;
-
-  style?: ViewStyle;
-
-  accessibilityLabel?: string;
-
-  accessibilityLabelForSelectedCard?: string;
-
-  /**
-   * Optional. If `true`, the TabView will wrap its content height instead of using flex layout.
-   * When enabled, swipe gestures are disabled and only the selected tab content is rendered.
-   * Default is `false` (uses PagerView with flex layout and swipe enabled).
-   */
-  fitContent?: boolean;
-};
-
-/**
- * Properties for the TabBar component, which displays the navigation tabs.
- */
-export type TabBarProps = {
-  /**
-   * An array of Tab objects representing each tab in the tab bar.
-   */
-  tabs: Tab[];
-
-  /**
-   * The index of the currently selected or active tab.
-   */
-  selectedIndex: number;
-
-  /**
-   * Optional. A callback function that is triggered when a tab item is pressed, receiving the index of the tab as a parameter.
-   */
-  onPressTabItem?: (index: number) => void;
-
-  /**
-   * The width of the container in which the tab bar is placed. Useful for layout calculations.
-   */
-  containerWidth: number;
-
-  /**
-   * Represents the horizontal scroll position in a scrollable tab bar.
-   */
-  scrollX: Animated.Value;
-
-  /**
-   * Optional. Specifies the layout direction for the tab's content, either in a row or column format.
-   */
-  direction?: 'row' | 'column';
-
-  selectedColor?: string;
-
-  unselectedColor?: string;
-
-  accessibilityLabelForSelectedCard?: string;
-};
-
-export type TabViewRef = {
-  goToPage: (page: number) => void;
-};

package/src/libs/Template/HeaderSliderBanner/index.tsx

@@ -1,86 +0,0 @@
-import React, {FC} from 'react';
-import {Animated, TouchableOpacity} from 'react-native';
-import {Carousel} from '@momo-kits/carousel';
-import {Image, Pagination, Spacing} from '@momo-kits/foundation';
-import {HeaderSliderBannerProps} from './types';
-
-const HeaderSliderBanner: FC<HeaderSliderBannerProps> = ({
-  animatedValue = new Animated.Value(0),
-  paginationBottom = 56,
-  data = [],
-  activeIndex = 0,
-  paginationProps,
-  carouselProps,
-  onSnapToItem,
-  onPressItem,
-  paginationType = 'black_white',
-}) => {
-  const scale = animatedValue.interpolate({
-    inputRange: [-300, 0, 300],
-    outputRange: [4, 1, 1],
-    extrapolate: 'clamp',
-  });
-  const opacity = animatedValue.interpolate({
-    inputRange: [0, 150, 300],
-    outputRange: [1, 0.5, 0],
-    extrapolate: 'clamp',
-  });
-  const translateY = animatedValue.interpolate({
-    inputRange: [-300, 0],
-    outputRange: [-80, -2],
-    extrapolate: 'clamp',
-  });
-
-  const paginationOpacity = animatedValue.interpolate({
-    inputRange: [-40, 0],
-    outputRange: [0, 1],
-  });
-
-  const renderItem = (info: {item: any; index: number}) => {
-    const {item, index} = info;
-    return (
-      <TouchableOpacity disabled={!onPressItem} onPress={onPressItem}>
-        <Image
-          style={{width: '100%', height: '100%'}}
-          key={`Header banner ${item}_${index}`}
-          source={{
-            uri: item,
-          }}
-        />
-      </TouchableOpacity>
-    );
-  };
-
-  return (
-    <Animated.View
-      style={{
-        height: 210,
-        opacity: opacity,
-        transform: [{scale}, {translateY}],
-      }}>
-      <Carousel
-        {...carouselProps}
-        full={true}
-        data={data}
-        onSnapToItem={onSnapToItem}
-        renderItem={renderItem}
-      />
-      <Animated.View
-        style={{
-          position: 'absolute',
-          bottom: paginationBottom - Spacing.S,
-          alignSelf: 'center',
-          opacity: paginationOpacity,
-        }}>
-        <Pagination
-          {...paginationProps}
-          activeIndex={activeIndex}
-          dataLength={data.length}
-          type={paginationType}
-        />
-      </Animated.View>
-    </Animated.View>
-  );
-};
-
-export default HeaderSliderBanner;

package/src/libs/Template/HeaderSliderBanner/types.ts

@@ -1,16 +0,0 @@
-import {PaginationProps} from '@momo-kits/foundation';
-import {CarouselProps} from '@momo-kits/carousel';
-import {Animated} from 'react-native';
-import AnimatedValue = Animated.AnimatedValue;
-
-export type HeaderSliderBannerProps = {
-  animatedValue: AnimatedValue;
-  data: string[];
-  onSnapToItem: (index: number) => void;
-  activeIndex: number;
-  paginationProps?: PaginationProps;
-  carouselProps?: CarouselProps;
-  paginationBottom?: 8 | 24 | 56;
-  onPressItem?: () => void;
-  paginationType: 'black_white' | 'number';
-};

package/src/libs/Template/TrustBanner/CustomAvatar.tsx

@@ -1,39 +0,0 @@
-import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
-import styles from './styles';
-import {ApplicationContext, Colors, Image, Text} from '@momo-kits/foundation';
-import {CustomAvatarProps} from './types';
-
-const CustomAvatar: FC<CustomAvatarProps> = ({image, text, style}) => {
-  const {theme} = useContext(ApplicationContext);
-
-  const renderContent = () => {
-    if (text) {
-      return (
-        <Text
-          color={theme.colors.primary}
-          typography={'description_xs_regular'}>
-          {text}
-        </Text>
-      );
-    }
-
-    return <Image style={styles.avatarImage} source={{uri: image}} />;
-  };
-
-  return (
-    <View
-      style={[
-        styles.customAvatar,
-        {
-          backgroundColor: Colors.black_01,
-          borderColor: theme.colors.border.default,
-        },
-        style,
-      ]}>
-      {renderContent()}
-    </View>
-  );
-};
-
-export default CustomAvatar;

package/src/libs/Template/TrustBanner/index.tsx

@@ -1,161 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { FC, useContext, useEffect } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import { TrustBannerCallbackParams, TrustBannerProps } from './types';
-import styles from './styles';
-import {
-  ApplicationContext,
-  Icon,
-  Image,
-  MiniAppContext,
-  Styles,
-  Text,
-} from '@momo-kits/foundation';
-// @ts-ignore
-import MaxApi from '@momo-platform/api';
-
-const defaultData = {
-  content: {
-    vi: 'An toàn tài sản & Bảo mật thông tin của bạn là ưu tiên hàng đầu của MoMo.',
-    en: "Ensuring financial security and data privacy is MoMo's highest priority.",
-  },
-  subContent: {
-    vi: 'Tìm hiểu thêm',
-    en: 'Learn more',
-  },
-  pciImage: 'https://static.momocdn.net/app/img/kits/trustBanner/pci_dss.png',
-  sslImage: 'https://static.momocdn.net/app/img/kits/trustBanner/ssl.png',
-  momoImage: 'https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png',
-  urlConfig: 'login_and_security',
-  icons: [
-    'https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png',
-    'https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png',
-    'https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png',
-    'https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png',
-  ],
-  titleWeb: {
-    vi: 'Thông tin',
-    en: 'Information',
-  },
-};
-
-const TrustBanner: FC<TrustBannerProps> = ({
-  style,
-  screenName = '',
-  serviceName = '',
-  trackEvent,
-}) => {
-  const context = useContext<any>(MiniAppContext);
-  const {
-    theme,
-    translate = (data: { vi: string; en: string }) => {
-      return data.vi;
-    },
-  } = useContext(ApplicationContext);
-
-  const {
-    sslImage,
-    pciImage,
-    momoImage,
-    urlConfig,
-    content,
-    subContent,
-    titleWeb,
-  } = context?.designSystemConfig?.config?.trustBanner || defaultData;
-
-  const translationSubContent = translate(subContent) || subContent.vi;
-  const translationContent = translate(content);
-
-  //to check for old version of translation, need to be removed in next sprints.
-  const finalSubContent =
-    typeof translationSubContent === 'string'
-      ? translationSubContent
-      : subContent.vi;
-  const finalContent =
-    typeof translationContent === 'string' ? translationContent : content.vi;
-
-  const trackingParams: TrustBannerCallbackParams = {
-    screen_name: screenName,
-    service_name: serviceName,
-    component_name: 'logo_trust',
-  };
-
-  useEffect(() => {
-    trackEvent?.('service_component_displayed', trackingParams);
-  }, []);
-
-  const _onPress = () => {
-    trackEvent?.('service_component_clicked', { ...trackingParams, urlConfig });
-    if (urlConfig.indexOf('https') > -1) {
-      const openWebData = {
-        url: urlConfig,
-        title: translate(titleWeb) || subContent.vi,
-      };
-      MaxApi.openWeb(openWebData);
-    } else {
-      MaxApi.startFeatureCode(urlConfig, {}, () => {});
-    }
-  };
-
-  const renderFooter = () => {
-    return (
-      <View style={stylesInside.footerContainer}>
-        <View style={Styles.row}>
-          <Text typography={'action_xs_bold'} color={'#eb2f96'}>
-            {finalSubContent}
-          </Text>
-          <Icon
-            source={'arrow_chevron_right_small'}
-            color={'#eb2f96'}
-            size={20}
-          />
-        </View>
-        <View style={styles.imageList}>
-          <Image
-            resizeMode={'contain'}
-            style={styles.pciImage}
-            source={{ uri: pciImage }}
-          />
-          <Image
-            resizeMode={'contain'}
-            style={styles.image}
-            source={{ uri: sslImage }}
-          />
-        </View>
-      </View>
-    );
-  };
-
-  return (
-    <TouchableOpacity
-      onPress={_onPress}
-      activeOpacity={0.7}
-      style={[style, styles.container]}
-    >
-      <Image
-        style={styles.momoImage}
-        resizeMode={'contain'}
-        source={{
-          uri: momoImage,
-        }}
-      />
-      <View style={styles.flex}>
-        <Text
-          style={styles.message}
-          color={theme.colors.text.secondary}
-          typography={'description_default_regular'}
-          numberOfLines={2}
-        >
-          {finalContent}
-        </Text>
-        {renderFooter()}
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-const stylesInside = StyleSheet.create({
-  footerContainer: { flexDirection: 'row', justifyContent: 'space-between' },
-});
-
-export default TrustBanner;

package/src/libs/Template/TrustBanner/styles.ts

@@ -1,48 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '@momo-kits/foundation';
-
-export default StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    padding: Spacing.M,
-    borderRadius: Radius.S,
-    backgroundColor: Colors.blue_10,
-    width: '100%',
-  },
-  flex: {flex: 1},
-  momoImage: {
-    width: 64,
-    height: 64,
-    marginRight: Spacing.S,
-  },
-  image: {
-    width: 52,
-    height: 20,
-  },
-  imageList: {
-    flexDirection: 'row',
-  },
-  pciImage: {
-    marginRight: Spacing.XS,
-    width: 25,
-    height: 20,
-  },
-  message: {marginBottom: Spacing.S},
-  footer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  customAvatar: {
-    width: 24,
-    height: 24,
-    borderWidth: 1,
-    borderRadius: Radius.L,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: -6,
-  },
-  iconList: {
-    flexDirection: 'row',
-  },
-  avatarImage: {width: '100%', height: '100%'},
-});

package/src/libs/Template/TrustBanner/types.ts

@@ -1,50 +0,0 @@
-import {ViewStyle} from 'react-native';
-
-export type TrustBannerCallbackParams = {
-  service_name: string;
-  screen_name: string;
-  component_name: string;
-  urlConfig?: string;
-};
-
-export type TrustBannerProps = {
-  /**
-   * Optional. Styles to customize the appearance of the banner. Can be a single
-   * style object or an array of style objects.
-   */
-  style?: ViewStyle | ViewStyle[];
-
-  /**
-   * Optional. The name of the screen where the banner is displayed. This can be
-   * used to identify the context in which the banner appears.
-   */
-  screenName?: string;
-
-  /**
-   * Optional. The name of the service or feature the banner is associated with.
-   * This helps in providing contextual information within the banner content.
-   */
-  serviceName?: string;
-
-  /**
-   * Optional. A callback function can be openWeb or startFeatureCode,
-   * return params:
-   *   service_name,
-   *   screen_name,
-   *   component_name,
-   *   url_config,
-   *   feature_code,
-   */
-  onPress?: (params: TrustBannerCallbackParams) => void;
-
-  /**
-   * Optional. instance of maxApi trackEvent function.
-   */
-  trackEvent?: (eventName: string, params: TrustBannerCallbackParams) => void;
-};
-
-export type CustomAvatarProps = {
-  image?: string;
-  text?: string;
-  style?: ViewStyle[] | ViewStyle;
-};

package/src/libs/Template/index.tsx

@@ -1,4 +0,0 @@
-import HeaderSliderBanner from './HeaderSliderBanner';
-import TrustBanner from './TrustBanner';
-
-export {HeaderSliderBanner, TrustBanner};

package/src/libs/Template/package.json

@@ -1,18 +0,0 @@
-{
-    "name": "@momo-kits/template",
-    "version": "0.157.1-beta.4",
-    "private": false,
-    "main": "index.tsx",
-    "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "@momo-kits/carousel": "*",
-        "react": "*",
-        "react-native": "*",
-        "@momo-platform/api": "0.1.67-rc.3"
-    },
-    "license": "MoMo",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "dependencies": {}
-}

package/src/libs/Template/publish.sh

@@ -1,17 +0,0 @@
-#!/bin/bash
-
-if [ "$1" == "stable" ]; then
-  npm version $(npm view @momo-kits/foundation@stable version)
-  npm version patch
-  npm publish --tag stable --access=public
-elif [ "$1" == "latest" ]; then
-  npm publish --tag latest --access=public
-elif [ "$1" == "beta" ]; then
-  npm publish --tag beta --access=public
-else
-  npm publish --tag alpha --access=public
-fi
-
-PACKAGE_NAME=$(npm pkg get name)
-NEW_PACKAGE_VERSION=$(npm pkg get version)
-