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

package/src/libs/DateTimePicker/utils.ts

@@ -1,114 +0,0 @@
-const itemSize = 42;
-
-const paddingNum = (num: number) => {
-  return num > 9 ? String(num) : `0${num}`;
-};
-const getDaysInMonth = (
-  year: number,
-  month: number,
-  minDate: Date,
-  maxDate: Date,
-) => {
-  const daysInMonth = new Date(year, month, 0).getDate();
-
-  let startDay = 1;
-  let endDay = daysInMonth;
-
-  if (year === minDate.getFullYear() && month === minDate.getMonth() + 1) {
-    startDay = minDate.getDate();
-  }
-  if (year === maxDate.getFullYear() && month === maxDate.getMonth() + 1) {
-    endDay = maxDate.getDate();
-  }
-
-  const days = [];
-  for (let day = startDay; day <= endDay; day++) {
-    days.push(paddingNum(day));
-  }
-
-  return days;
-};
-
-const getMonths = (minDate: Date, maxDate: Date, currentYear: number) => {
-  let startMonth = 1;
-  let endMonth = 12;
-
-  if (currentYear === minDate.getFullYear()) {
-    startMonth = minDate.getMonth() + 1;
-  }
-  if (currentYear === maxDate.getFullYear()) {
-    endMonth = maxDate.getMonth() + 1;
-  }
-
-  const months = [];
-  for (let month = startMonth; month <= endMonth; month++) {
-    months.push(paddingNum(month));
-  }
-
-  return months;
-};
-
-const getYears = (minDate: Date, maxDate: Date) => {
-  const startYear = minDate.getFullYear();
-  const endYear = maxDate.getFullYear();
-  const years = [];
-
-  for (let year = startYear; year <= endYear; year++) {
-    years.push(year.toString());
-  }
-  return years;
-};
-
-const getHours = (hourMode: 12 | 24) => {
-  const hours = [];
-  for (let i = 0; i < hourMode; i++) {
-    let hour = i;
-    if (hourMode === 12) {
-      hour = i + 1;
-    }
-    hours.push(paddingNum(hour));
-  }
-  return hours;
-};
-
-const getMinutes = (interval: number) => {
-  const minutes = [];
-  for (let min = 0; min < 60; min += interval) {
-    minutes.push(paddingNum(min));
-  }
-
-  return minutes;
-};
-
-const timeMode = ['', '', 'AM', 'PM', '', ''];
-
-function debounce<T extends (...args: any[]) => any>(func: T, delay: number) {
-  let timer: ReturnType<typeof setTimeout>;
-
-  const debounced = function (
-    this: ThisParameterType<T>,
-    ...args: Parameters<T>
-  ) {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func.apply(this, args);
-    }, delay);
-  };
-
-  debounced.cancel = () => {
-    clearTimeout(timer);
-  };
-
-  return debounced;
-}
-
-export {
-  getDaysInMonth,
-  getMonths,
-  getYears,
-  getHours,
-  getMinutes,
-  timeMode,
-  debounce,
-  itemSize,
-};

package/src/libs/Information/index.tsx

@@ -1,129 +0,0 @@
-import React, {FC, useContext, useMemo} from 'react';
-import {TouchableOpacity, View} from 'react-native';
-import {InformationProps} from './types';
-import styles from './styles';
-import {
-  Colors,
-  Icon,
-  Image,
-  MiniAppContext,
-  ScreenContext,
-  Text,
-} from '@momo-kits/foundation';
-
-const Information: FC<InformationProps> = ({
-  title,
-  description = 'Description',
-  state = 'default',
-  image,
-  onPressCTA,
-  showIcon = true,
-  CTA,
-  style,
-  showIconClose = true,
-  onPressClose,
-  accessibilityLabel,
-}) => {
-  const app = useContext<any>(MiniAppContext);
-  const screen = useContext<any>(ScreenContext);
-  const componentName = 'Information';
-  const componentId = useMemo(() => {
-    if (accessibilityLabel) {
-      return accessibilityLabel;
-    }
-    return `${app.appId}/${app.code}/${screen.screenName}/${componentName}${
-      title ? `/${title}` : ''
-    }`;
-  }, [componentName, accessibilityLabel, app, screen, title]);
-
-  const getTypeStyle = () => {
-    let borderColor = Colors.blue_07;
-    let backgroundColor = Colors.blue_10;
-    let color = Colors.blue_03;
-    let iconSource = 'notifications_info';
-
-    if (state === 'warning') {
-      borderColor = Colors.yellow_06;
-      backgroundColor = Colors.yellow_09;
-      color = Colors.orange_03;
-      iconSource = '24_notifications_alert_triangle';
-    }
-
-    if (state === 'error') {
-      borderColor = Colors.red_07;
-      backgroundColor = Colors.red_10;
-      color = Colors.red_03;
-      iconSource = '24_notifications_alert_octagon';
-    }
-
-    return {borderColor, backgroundColor, color, iconSource};
-  };
-
-  const {backgroundColor, borderColor, color, iconSource} = getTypeStyle();
-
-  return (
-    <View
-      style={[style, {backgroundColor, borderColor}, styles.container]}
-      accessibilityLabel={componentId}>
-      <View style={styles.row}>
-        {!!image && (
-          <Image
-            source={{uri: image}}
-            style={styles.image}
-            accessibilityLabel={componentId + '|img'}
-          />
-        )}
-        {!image && showIcon && (
-          <Icon
-            color={color}
-            style={styles.icon}
-            size={16}
-            source={iconSource}
-            accessibilityLabel={componentId + '|icon'}
-          />
-        )}
-        <View style={styles.flex}>
-          {!!title && (
-            <Text
-              typography={'label_default_medium'}
-              accessibilityLabel={componentId + '|title-text'}>
-              {title}
-            </Text>
-          )}
-          <Text
-            typography={'description_default_regular'}
-            accessibilityLabel={componentId + '|description-text'}>
-            {description}
-          </Text>
-        </View>
-        {showIconClose && (
-          <TouchableOpacity
-            onPress={onPressClose}
-            accessibilityLabel={componentId + '|close-icon-touch'}>
-            <Icon
-              size={16}
-              source={'navigation_close'}
-              style={styles.closeIcon}
-            />
-          </TouchableOpacity>
-        )}
-      </View>
-
-      {!!CTA && (
-        <TouchableOpacity
-          style={styles.cta}
-          onPress={onPressCTA}
-          accessibilityLabel={componentId + '|cta-touch'}>
-          <Text
-            color={color}
-            typography={'action_xs_bold'}
-            accessibilityLabel={componentId + '|cta-text'}>
-            {CTA}
-          </Text>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
-
-export {Information};

package/src/libs/Information/package.json

@@ -1,16 +0,0 @@
-{
-    "name": "@momo-kits/information",
-    "version": "0.157.1-beta.4",
-    "private": false,
-    "main": "index.tsx",
-    "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "react": "*",
-        "react-native": "*"
-    },
-    "license": "MoMo",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "dependencies": {}
-}

package/src/libs/Information/publish.sh

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

package/src/libs/Information/styles.ts

@@ -1,34 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Radius, Spacing} from '@momo-kits/foundation';
-
-export default StyleSheet.create({
-  container: {
-    borderRadius: Radius.S,
-    borderWidth: 0.5,
-    padding: Spacing.M,
-    width: '100%',
-  },
-  image: {
-    width: 40,
-    height: 40,
-    borderRadius: Radius.XS,
-    marginRight: Spacing.S,
-  },
-  icon: {
-    marginRight: Spacing.S,
-    marginTop: Spacing.XXS,
-  },
-  closeIcon: {
-    marginTop: Spacing.XXS,
-  },
-  row: {
-    flexDirection: 'row',
-  },
-  cta: {
-    width: '100%',
-    alignItems: 'flex-end',
-  },
-  flex: {
-    flex: 1,
-  },
-});

package/src/libs/Information/types.ts

@@ -1,79 +0,0 @@
-import {ViewStyle} from 'react-native';
-
-/**
- * Props for the Information component. This component is typically used to display a piece of
- * information with optional actions for the user. It can represent various states and levels
- * of importance or urgency.
- */
-export type InformationProps = {
-  /**
-   * Optional. The title for the information block, often used to emphasize the main theme or
-   * to indicate the reason for the message. If not provided, only the description will be shown.
-   */
-  title?: string;
-
-  /**
-   * The main content text of the information block. This text provides the necessary details
-   * and is essential for understanding the context of the message.
-   */
-  description: string;
-
-  /**
-   * Optional. The text for the Call To Action (CTA) button. This is intended to prompt the user
-   * to take some specified action like "Retry", "Learn More", or "Dismiss".
-   */
-  CTA?: string;
-
-  /**
-   * Optional. A callback function that is triggered when the CTA button is pressed. This is
-   * used to handle the user's response to the proposed call to action.
-   */
-  onPressCTA?: () => void;
-
-  /**
-   * Optional. The URL or local file path of an image to be displayed. This is typically used
-   * to provide visual context or support to the information being presented.
-   */
-  image?: string;
-
-  /**
-   * Optional. Specifies the state of the information block, which may influence the block's
-   * styling, such as color coding. The 'default' state is neutral, while 'warning' and 'error'
-   * represent increasing levels of urgency or attention.
-   * Defaults to 'default' if not provided.
-   */
-  state?: 'default' | 'warning' | 'error';
-
-  /**
-   * Optional. If `true`, an icon is displayed within the information block, often used to
-   * visually reinforce the state or content of the block. The type of icon is typically
-   * influenced by the `state` prop.
-   * Defaults to `false` if not provided.
-   */
-  showIcon?: boolean;
-
-  /**
-   * Optional. If `true`, a close icon is displayed, usually in the upper corner of the information
-   * block, indicating that the user can dismiss or remove the block from view.
-   * Defaults to `false` if not provided.
-   */
-  showIconClose?: boolean;
-
-  /**
-   * Optional. A callback function that is triggered when the close icon is pressed. This is
-   * used to handle the dismissal of the information block, often removing it from display.
-   */
-  onPressClose?: () => void;
-
-  /**
-   * Optional. Custom styles to apply to the Information component. Can be used to adjust
-   * the visual presentation or layout beyond the default and state-based styling.
-   */
-  style?: ViewStyle;
-
-  /**
-   * Optional. Assigns an accessibility label to the Information component for automated testing
-   * and screen readers. This label should provide a concise description of the information block.
-   */
-  accessibilityLabel?: string;
-};

package/src/libs/Logo/index.tsx

@@ -1,39 +0,0 @@
-import React, {FC} from 'react';
-import {View} from 'react-native';
-import {LogoProps} from './types';
-import {Colors, Image} from '@momo-kits/foundation';
-import styles from './styles';
-
-const Logo: FC<LogoProps> = ({
-  type = 'image',
-  useShadow = true,
-  useBorder = true,
-  useBackground = true,
-  backgroundColor = Colors.black_01,
-  shadowColor = '#d9d9d9',
-  borderColor = '#e2e2e2',
-  source,
-  style,
-}) => {
-  const isIcon = type === 'icon';
-  const containerStyle = !isIcon ? styles.image : styles.icon;
-  const shadowStyle = useShadow ? [styles.shadow, {shadowColor}] : {};
-  const backgroundStyle = useBackground && !isIcon ? {backgroundColor} : {};
-  const borderStyle = useBorder && !isIcon ? {borderColor, borderWidth: 2} : {};
-
-  return (
-    <View
-      style={[
-        style,
-        styles.container,
-        containerStyle,
-        backgroundStyle,
-        shadowStyle,
-        borderStyle,
-      ]}>
-      <Image source={{uri: source}} style={styles.logo} />
-    </View>
-  );
-};
-
-export {Logo};

package/src/libs/Logo/package.json

@@ -1,17 +0,0 @@
-{
-    "name": "@momo-kits/logo",
-    "version": "0.157.1-beta.4",
-    "private": false,
-    "main": "index.tsx",
-    "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "react": "*",
-        "react-native": "*"
-    },
-    "devDependencies": {},
-    "license": "MoMo",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "dependencies": {}
-}

package/src/libs/Logo/publish.sh

@@ -1,16 +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)

package/src/libs/Logo/styles.ts

@@ -1,25 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-export default StyleSheet.create({
-  container: {
-    width: 28,
-    height: 28,
-  },
-  image: {
-    borderRadius: 9,
-  },
-  icon: {},
-  logo: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 7,
-  },
-  shadow: {
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 1,
-    shadowRadius: 2,
-  },
-});

package/src/libs/Logo/types.ts

@@ -1,13 +0,0 @@
-import {ViewStyle} from 'react-native';
-
-export type LogoProps = {
-  type?: 'icon' | 'image';
-  useShadow?: boolean;
-  useBorder?: boolean;
-  useBackground?: boolean;
-  backgroundColor?: string;
-  shadowColor?: string;
-  borderColor?: string;
-  source: string;
-  style?: ViewStyle | ViewStyle[];
-};

package/src/libs/ProgressInfo/ProgressInfoHorizontal.tsx

@@ -1,128 +0,0 @@
-import React, {FC} from 'react';
-import {FlexAlignType, View} from 'react-native';
-import {ProgressInfoItem, ProgressInfoProps} from './types';
-import {Colors, Spacing, Text} from '@momo-kits/foundation';
-import styles from './styles';
-import ProgressInfoIcon from './ProgressInfoIcon';
-
-type TextAlign = 'left' | 'right' | 'center';
-
-const ProgressInfoHorizontal: FC<ProgressInfoProps> = ({
-  steps,
-  size,
-  useNumber = false,
-  showDescription = true,
-  showTitle = true,
-  align,
-  customIcon,
-}) => {
-  const renderProgressItem = (i: ProgressInfoItem, ii: number) => {
-    const {title, description} = steps[ii];
-
-    let alignItems: FlexAlignType = 'center';
-    let textAlign: TextAlign = 'center';
-
-    if (align === 'left') {
-      alignItems = 'flex-start';
-      textAlign = 'left';
-    } else if (align === 'right') {
-      alignItems = 'flex-end';
-      textAlign = 'right';
-    } else if (align === 'stretch') {
-      if (ii === 0) {
-        alignItems = 'flex-start';
-        textAlign = 'left';
-      } else if (ii === steps.length - 1) {
-        textAlign = 'right';
-        alignItems = 'flex-end';
-      }
-    }
-
-    const haveMarginRight =
-      ii !== steps.length - 1 && align !== 'center' && align !== 'stretch';
-
-    return (
-      <View
-        key={`Step ${ii}`}
-        style={{
-          flex: 1,
-          alignItems,
-          marginRight: haveMarginRight ? Spacing.XS : 0,
-        }}>
-        {renderStepIcon(i, ii, align)}
-        {!!title && showTitle && (
-          <Text
-            style={[styles.title, {textAlign}]}
-            typography={'header_xs_semibold'}>
-            {title}
-          </Text>
-        )}
-        {!!description && showDescription && (
-          <Text
-            style={{textAlign}}
-            color={Colors.black_12}
-            typography={'description_default_regular'}>
-            {description}
-          </Text>
-        )}
-      </View>
-    );
-  };
-  const renderStepIcon = (
-    i: ProgressInfoItem,
-    ii: number,
-    align: string = 'center'
-  ) => {
-    const lineLeftHide = (align === 'stretch' && ii === 0) || align === 'left';
-    const lineRightHide =
-      (align === 'stretch' && ii === steps.length - 1) || align === 'right';
-
-    return (
-      <View style={styles.rowStep}>
-        {!lineLeftHide && (
-          <View
-            style={[
-              styles.lineHorizontal,
-              styles.radiusRight,
-              {
-                backgroundColor: Colors.pink_08,
-              },
-            ]}
-          />
-        )}
-        <ProgressInfoIcon
-          size={size}
-          index={ii}
-          backgroundColor={Colors.pink_08}
-          borderColor={Colors.pink_08}
-          style={{
-            marginVertical: Spacing.XS,
-          }}
-          useNumber={useNumber}
-          customIcon={customIcon}
-        />
-        {!lineRightHide && (
-          <View
-            style={[
-              styles.lineHorizontal,
-              styles.radiusLeft,
-              {
-                backgroundColor: Colors.pink_08,
-              },
-            ]}
-          />
-        )}
-      </View>
-    );
-  };
-
-  return (
-    <View style={{flexDirection: 'row'}}>
-      {steps.map((i, ii) => {
-        return renderProgressItem(i, ii);
-      })}
-    </View>
-  );
-};
-
-export default ProgressInfoHorizontal;