@momo-kits/foundation 0.74.2-react-native.1

package/Assets/language.json

@@ -0,0 +1,202 @@
+{
+  "vi": {
+    "errorCode": "Mã lỗi: ",
+    "seeMore": "Xem thêm",
+    "cancel": "Huỷ",
+    "done": "Xong",
+    "confirm": "Xác nhận",
+    "month": "tháng",
+    "day": "ngày",
+    "choose": "Chọn",
+    "sent": "Đã gửi",
+    "received": "Đã tiếp nhận",
+    "processing": "Đang xử lý",
+    "processed": "Đã xử lý",
+    "addImg": "Thêm hình",
+    "chooseBtn": "Chọn button",
+    "imgEg": "Hình ảnh tham khảo",
+    "filter": "Sắp xếp",
+    "shipping": "Đang giao hàng",
+    "men": "Nam",
+    "women": "Nữ",
+    "more": "Khác",
+    "expDate": "Ngày hết hạn",
+    "exp": "HSD",
+    "inActive": "Chưa kích hoạt",
+    "voucherRemindHour": "Hết hạn sau {hours} giờ",
+    "voucherRemindMinute": "Hết hạn sau {minutes} phút",
+    "voucherRemindSecond": "Hết hạn sau {seconds} giây",
+    "voucherRemindDay": "Hết hạn sau {days} ngày",
+    "chooseRoundtrip": "Chọn vé khứ hồi",
+    "depart": "Ngày đi",
+    "return": "Ngày về",
+    "departing": "Đi",
+    "returning": "Về",
+    "jan": "Tháng 1",
+    "feb": "Tháng 2",
+    "mar": "Tháng 3",
+    "apr": "Tháng 4",
+    "may": "Tháng 5",
+    "jun": "Tháng 6",
+    "jul": "Tháng 7",
+    "aug": "Tháng 8",
+    "sep": "Tháng 9",
+    "oct": "Tháng 10",
+    "nov": "Tháng 11",
+    "dec": "Tháng 12",
+    "mon": "T2",
+    "tue": "T3",
+    "wed": "T4",
+    "thu": "T5",
+    "fri": "T6",
+    "sat": "T7",
+    "sun": "CN",
+    "showLunar": "Hiển thị lịch âm",
+    "newYear": "Tết Dương lịch",
+    "valentine": "Ngày Lễ Tình nhân",
+    "womenDay": "Ngày Quốc tế Phụ nữ",
+    "liberationDay": "Ngày giải phóng Miền Nam thống nhất đất nước",
+    "laborDay": "Ngày Quốc tế Lao động",
+    "childrenDay": "Ngày Quốc tế Thiếu nhi",
+    "nationalDay": "Quốc khánh nước CHXHCN Việt Nam",
+    "womenDayVN": "Ngày Phụ nữ Việt Nam",
+    "teacherDay": "Ngày Nhà giáo Việt Nam",
+    "christmasEve": "Ngày Lễ Giáng Sinh",
+    "christmas": "Ngày Lễ Giáng Sinh",
+    "lunarNewYear": "Tết Nguyên Đán",
+    "hungKingDay": "Giỗ Tổ Hùng Vương",
+    "balance": "Số dư trong ví",
+    "chooseDate": "Chọn ngày tháng năm",
+    "year": "năm",
+    "hour": "giờ",
+    "minute": "phút",
+    "from": "Từ",
+    "to": "Đến",
+    "connected": "Đã kết nối",
+    "disconnected": "Mất kết nối",
+    "hide": "Ẩn",
+    "viewAllTitle": "Xem tất cả",
+    "headerTitle": "Lịch sử thanh toán",
+    "SHORTEN": "THU GỌN",
+    "viewMoreBank": "XEM THÊM (${otherItemCount} ngân hàng)",
+    "transaction_success": "Thành công",
+    "transaction_fail": "Thất bại",
+    "transaction_processing": "Đang xử lý",
+    "viewMore": "Xem thêm",
+    "shorten": "Thu gọn",
+    "Payment": "Thanh toán ${serviceName}",
+    "currencyUnit": "đ",
+    "Month": "Tháng",
+    "save": "Lưu",
+    "favoriteIn": "Thêm dịch vụ yêu thích",
+    "favoriteOut": "Xóa dịch vụ yêu thích",
+    "deviceIn": "Thêm vào thiết bị",
+    "setting": "Cài đặt",
+    "transaction": "Lịch sử giao dịch",
+    "share": "Chia sẽ dịch vụ",
+    "information": "Thông tin chung",
+    "tutorial": "Hướng dẫn sử dụng",
+    "question": "Câu hỏi thường gặp",
+    "support": "Trung tâm hỗ trợ"
+  },
+  "en": {
+    "seeMore": "See more",
+    "cancel": "Cancel",
+    "done": "Done",
+    "confirm": "Confirm",
+    "month": "month",
+    "day": "day",
+    "choose": "Choose",
+    "sent": "Sent",
+    "received": "Received",
+    "processing": "Processing",
+    "processed": "Done",
+    "addImg": "Add image",
+    "chooseBtn": "Choose button",
+    "imgEg": "Example images",
+    "filter": "Filter",
+    "shipping": "Shipping",
+    "men": "Men",
+    "women": "Women",
+    "more": "More",
+    "expDate": "Expiration date",
+    "exp": "EXP",
+    "inActive": "Not Activated",
+    "voucherRemindHour": "Revoke after {hours} hours",
+    "voucherRemindMinute": "Revoke after {minutes} minutes",
+    "voucherRemindSecond": "Revoke after {seconds} seconds",
+    "voucherRemindDay": "Revoke after {days} days",
+    "chooseRoundtrip": "Choose roundtrip ticket",
+    "depart": "Departing",
+    "return": "Returning",
+    "departing": "De",
+    "returning": "Re",
+    "jan": "January",
+    "feb": "February",
+    "mar": "March",
+    "apr": "April",
+    "may": "May",
+    "jun": "June",
+    "jul": "July",
+    "aug": "August",
+    "sep": "September",
+    "oct": "October",
+    "nov": "November",
+    "dec": "December",
+    "mon": "Mon",
+    "tue": "Tue",
+    "wed": "Wed",
+    "thu": "Thu",
+    "fri": "Fri",
+    "sat": "Sat",
+    "sun": "Sun",
+    "showLunar": "Show Lunar Calendar",
+    "newYear": "New Year's Day",
+    "valentine": "Valentine's Day",
+    "womenDay": "International Women's Day",
+    "liberationDay": "Liberation Day",
+    "laborDay": "Internation Labor's Day",
+    "childrenDay": "International Labor's Day",
+    "nationalDay": "National Day",
+    "womenDayVN": "Vietnamese Women's Day",
+    "teacherDay": "Teacher's Day",
+    "christmasEve": "Christmas Eve",
+    "christmas": "Christmas Day",
+    "lunarNewYear": "Lunar New Year",
+    "hungKingDay": "Hung Kings' Festival",
+    "balance": "Wallet Balance",
+    "chooseDate": "Choose date",
+    "year": "year",
+    "hour": "hour",
+    "minute": "minute",
+    "from": "From",
+    "to": "To",
+    "connected": "Connected",
+    "disconnected": "Disconnected",
+    "hide": "Hide",
+    "viewAllTitle": "View all",
+    "headerTitle": "Transaction history",
+    "SHORTEN": "SHORTEN",
+    "viewMoreBank": "VIEW MORE (${otherItemCount} banks)",
+    "transaction_success": "Success",
+    "transaction_fail": "Fail",
+    "transaction_processing": "Processing",
+    "viewMore": "View more",
+    "shorten": "Shorten",
+    "Payment": "${serviceName} payment",
+    "currencyUnit": "VND",
+    "Month": "Month",
+    "save": "Save",
+    "favoriteIn": "Add to favorite services",
+    "favoriteOut": "Remove to favorite services",
+    "deviceIn": "Add to device",
+    "setting": "Settings",
+    "transaction": "Transaction History",
+    "share": "Share",
+    "information": "Information",
+    "tutorial": "Instruction",
+    "question": "FAQ",
+    "support": "Support center",
+    "errorCode": "Error code: "
+  }
+}

package/Badge/Badge.tsx

@@ -0,0 +1,56 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+
+import {ApplicationContext} from '../Application';
+import {BadgeProps} from './types';
+import styles from './styles';
+import {Colors} from '../Consts';
+import {Text} from '../Text';
+
+const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const isValidatedColor = () => {
+    const colorKeys = Object.keys(Colors);
+    const colorValue = Object.values(Colors);
+    if (backgroundColor) {
+      const colorIndex = colorValue.indexOf(backgroundColor);
+      if (colorIndex !== -1) {
+        if (colorKeys[colorIndex]?.includes('_03')) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+
+  const isNumber = () => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(label));
+  };
+
+  const formatTitle = () => {
+    if (isNumber() && Number(label) > 99) {
+      return '99+';
+    }
+    return label.toString();
+  };
+
+  let badgeColor = isNumber()
+    ? theme.colors.error.primary
+    : theme.colors.warning.primary;
+
+  if (backgroundColor && isValidatedColor()) {
+    badgeColor = backgroundColor;
+  }
+
+  return (
+    <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
+      <Text color={Colors.black_01} typography={'action_xs_bold'}>
+        {formatTitle()}
+      </Text>
+    </View>
+  );
+};
+
+export default Badge;

package/Badge/BadgeDot.tsx

@@ -0,0 +1,11 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {BadgeDotProps} from './types';
+import styles from './styles';
+
+const BadgeDot: FC<BadgeDotProps> = ({size = 'large', style}) => {
+  const dotStyle = size === 'small' ? styles.dotSmall : styles.dot;
+  return <View style={[style, dotStyle]} />;
+};
+
+export default BadgeDot;

package/Badge/BadgeRibbon.tsx

@@ -0,0 +1,125 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {DownTail, UpTail} from './Shape';
+import styles from './styles';
+import {BadgeRibbonProps} from './types';
+import {ApplicationContext} from '../Application';
+import {Text} from '../Text';
+import {Colors} from '../Consts';
+import {Image} from '../Image';
+
+const BadgeRibbon: FC<BadgeRibbonProps> = ({
+  position = 'top_right',
+  label = 'Label',
+  isRound = false,
+  style = {},
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  let ribbonRotate = '0deg';
+  let textRotate = '0deg';
+  let ribbonTail = <DownTail />;
+  let textMargin = 0;
+  let skewMargin = 0;
+
+  if (position === 'top_right' || position === 'bottom_right') {
+    ribbonRotate = '180deg';
+    textRotate = '180deg';
+  }
+
+  if (position === 'bottom_left' || position === 'top_right') {
+    textMargin = 4;
+    ribbonTail = <UpTail />;
+    skewMargin = 4;
+  }
+
+  const renderRoundContent = () => {
+    return (
+      <View
+        style={[
+          styles.ribbonContent,
+          {
+            backgroundColor: theme.colors.warning.primary,
+            marginTop: textMargin,
+          },
+        ]}>
+        <Text
+          style={[
+            styles.ribbonLabel,
+            {
+              transform: [
+                {
+                  rotate: textRotate,
+                },
+              ],
+            },
+          ]}
+          color={Colors.black_01}
+          typography={'label_xs_medium'}>
+          {label}
+        </Text>
+      </View>
+    );
+  };
+
+  const renderSkewContent = () => {
+    return (
+      <View
+        style={{
+          flexDirection: 'row',
+          marginTop: skewMargin,
+        }}>
+        <View
+          style={[
+            styles.ribbonSkewContent,
+            {
+              backgroundColor: theme.colors.warning.primary,
+            },
+          ]}>
+          <Text
+            style={[
+              styles.ribbonLabel,
+              {
+                transform: [
+                  {
+                    rotate: textRotate,
+                  },
+                ],
+              },
+            ]}
+            color={Colors.black_01}
+            typography={'label_xs_medium'}>
+            {label}
+          </Text>
+        </View>
+        <Image
+          source={{
+            uri: 'https://static.momocdn.net/app/img/kits/utils/Tail_4x.png',
+          }}
+          style={styles.skew}
+        />
+      </View>
+    );
+  };
+
+  const content = isRound ? renderRoundContent() : renderSkewContent();
+
+  return (
+    <View
+      style={[
+        style,
+        styles.ribbon,
+        {
+          transform: [
+            {
+              rotate: ribbonRotate,
+            },
+          ],
+        },
+      ]}>
+      {ribbonTail}
+      {content}
+    </View>
+  );
+};
+
+export default BadgeRibbon;

package/Badge/Shape.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from './styles';
+import {Image} from '../Image';
+
+const UpTail = () => {
+  return (
+    <Image
+      resizeMode={'stretch'}
+      source={{
+        uri: 'https://static.momocdn.net/app/img/kits/utils/Head_down_4x.png',
+      }}
+      style={[styles.tail, {transform: [{rotate: '180deg'}]}]}
+    />
+  );
+};
+
+const DownTail = () => {
+  return (
+    <Image
+      resizeMode={'stretch'}
+      source={{
+        uri: 'https://static.momocdn.net/app/img/kits/utils/Head_4x.png',
+      }}
+      style={styles.tail}
+    />
+  );
+};
+
+export {UpTail, DownTail};

package/Badge/index.tsx

@@ -0,0 +1,7 @@
+import Badge from './Badge';
+import BadgeDot from './BadgeDot';
+import BadgeRibbon from './BadgeRibbon';
+import {BadgeProps, BadgeDotProps, BadgeRibbonProps} from './types';
+
+export {Badge, BadgeRibbon, BadgeDot};
+export type {BadgeProps, BadgeDotProps, BadgeRibbonProps};

package/Badge/styles.ts

@@ -0,0 +1,58 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
+import {scaleSize} from '../Text';
+
+export default StyleSheet.create({
+  badge: {
+    paddingHorizontal: Spacing.XS,
+    borderRadius: Radius.M,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: scaleSize(16),
+    minWidth: scaleSize(16),
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+    alignSelf: 'baseline',
+  },
+  dot: {
+    width: 16,
+    height: 16,
+    borderWidth: 2,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: 8,
+  },
+  dotSmall: {
+    width: 10,
+    height: 10,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: 5,
+  },
+  ribbon: {
+    alignSelf: 'baseline',
+    flexDirection: 'row',
+    height: 20,
+    overflow: 'hidden',
+  },
+  ribbonContent: {
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomRightRadius: 12,
+    borderTopRightRadius: 12,
+    paddingRight: 6,
+  },
+  ribbonSkewContent: {
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ribbonLabel: {
+    color: Colors.black_01,
+  },
+  skew: {width: 8, height: 16},
+  tail: {width: 5, height: 20},
+});

package/Badge/types.ts

@@ -0,0 +1,63 @@
+import {ViewStyle} from 'react-native';
+
+/**
+ * Props for a general Badge component. It can display a wide range of badges including simple labels, numbers, or dots.
+ */
+export type BadgeProps = {
+  /**
+   * Optional. The text to display on the badge. This could be a number or string, depending on the badge's purpose.
+   */
+  label?: string | number;
+
+  /**
+   * Optional. Custom styles to apply to the badge component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+
+  /**
+   * Optional. Custom background badge.
+   */
+  backgroundColor?: string;
+};
+
+/**
+ * Props for a BadgeDot component. It specifically represents a dot-style badge, typically used for notification indicators.
+ */
+export type BadgeDotProps = {
+  /**
+   * Optional. The size of the dot, either 'small' or 'large'. This allows for better visual alignment with different UI elements.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Optional. Custom styles to apply to the badge dot component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+};
+
+/**
+ * Props for a BadgeRibbon component. It represents a more specialized badge in the shape of a ribbon, allowing for placement around containers.
+ */
+export type BadgeRibbonProps = {
+  /**
+   * The text to display on the ribbon-style badge. Unlike other badges, ribbons typically carry more descriptive text.
+   */
+  label: string;
+
+  /**
+   * Optional. Determines the placement of the ribbon on its parent container. The position can be any corner of the container.
+   * Defaults to 'top_right' if not specified.
+   */
+  position?: 'top_right' | 'top_left' | 'bottom_right' | 'bottom_left';
+
+  /**
+   * Optional. If true, the edges of the ribbon badge will be rounded. This is purely a stylistic choice.
+   * Defaults to `false` if not provided, resulting in a flat-edged ribbon.
+   */
+  isRound?: boolean;
+
+  /**
+   * Optional. Custom styles to apply to the ribbon badge component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+};