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

package/src/libs/DateTimePicker/utils.ts

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

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

@@ -0,0 +1,16 @@
+{
+    "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

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

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

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

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

@@ -0,0 +1,17 @@
+{
+    "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

@@ -0,0 +1,16 @@
+#!/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

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

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

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