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

package/src/libs/Avatar/index.tsx

@@ -1,146 +0,0 @@
-import React, {FC, useContext, useMemo} from 'react';
-import {View} from 'react-native';
-import {AvatarProps} from './types';
-import {
-  ApplicationContext,
-  Colors,
-  Icon,
-  Image,
-  MiniAppContext,
-  ScreenContext,
-  Spacing,
-  Text,
-} from '@momo-kits/foundation';
-import styles from './styles';
-
-const logo = 'https://static.momocdn.net/app/img/kits/logo_momo_circle.png';
-const iconSupportDefault =
-  'https://static.momocdn.net/app/img/kits/_indicator.png';
-
-const Avatar: FC<AvatarProps> = ({
-  size = 32,
-  name,
-  rounded = true,
-  showIconMomo = false,
-  showIconSupport = false,
-  iconSupport = iconSupportDefault,
-  image,
-  accessibilityLabel,
-}) => {
-  const app = useContext<any>(MiniAppContext);
-  const screen = useContext<any>(ScreenContext);
-  const componentName = 'Avatar';
-
-  const componentId = useMemo(() => {
-    if (accessibilityLabel) {
-      return accessibilityLabel;
-    }
-    return `${app.appId}/${app.code}/${screen.screenName}/${componentName}${
-      name ? `/${name}` : ''
-    }`;
-  }, [componentName, accessibilityLabel, app, screen, name]);
-
-  const {theme} = useContext(ApplicationContext);
-  const borderRadius = rounded ? size / 2 : Spacing.XS;
-
-  const getShortName = (name: string) => {
-    const words = name.split(' ');
-    const lastTwoWords = words.slice(-2);
-    return lastTwoWords.map(word => word.charAt(0).toUpperCase()).join('');
-  };
-
-  const getIconSize = () => {
-    switch (size) {
-      case 24: {
-        return 16;
-      }
-      case 32: {
-        return 16;
-      }
-      case 40: {
-        return 24;
-      }
-      case 48: {
-        return 32;
-      }
-      case 56: {
-        return 32;
-      }
-      case 72: {
-        return 40;
-      }
-      default: {
-        return 16;
-      }
-    }
-  };
-
-  const iconSize = getIconSize();
-  const shouldShowIconTop = showIconMomo && rounded;
-  const shouldShowIconBottom = showIconSupport && rounded;
-  const supportIconSize = {
-    width: getIconSize() / 2,
-    height: getIconSize() / 2,
-    borderRadius: getIconSize() / 4,
-  };
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          width: size,
-          height: size,
-          backgroundColor: Colors.pink_09,
-          borderColor: theme.colors.border.default,
-          borderRadius: borderRadius,
-        },
-      ]}
-      accessibilityLabel={componentId}>
-      {!!name && !image && (
-        <Text
-          color={Colors.pink_03}
-          typography={'description_xs_regular'}
-          accessibilityLabel={componentId + '|text'}>
-          {getShortName(name)}
-        </Text>
-      )}
-      {!name && !image && (
-        <Icon
-          size={iconSize}
-          source={'basic_person'}
-          color={Colors.pink_03}
-          accessibilityLabel={componentId + '|icon'}
-        />
-      )}
-      {!!image && (
-        <Image
-          source={{uri: image}}
-          style={[
-            styles.image,
-            {
-              borderRadius,
-            },
-          ]}
-          accessibilityLabel={componentId + '|img'}
-        />
-      )}
-      {shouldShowIconTop && (
-        <Image
-          source={{uri: logo}}
-          style={[styles.icon, supportIconSize, {top: -1, right: -1}]}
-          accessibilityLabel={componentId + '|top-icon'}
-        />
-      )}
-      {shouldShowIconBottom && (
-        <Image
-          source={{uri: iconSupport}}
-          style={[styles.icon, supportIconSize, {bottom: -1, right: -1}]}
-          accessibilityLabel={componentId + '|bottom-icon'}
-        />
-      )}
-    </View>
-  );
-};
-
-export {Avatar};

package/src/libs/Avatar/package.json

@@ -1,16 +0,0 @@
-{
-    "name": "@momo-kits/avatar",
-    "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/Avatar/publish.sh

@@ -1,20 +0,0 @@
-#!/bin/bash
-
-# Prepare dist files
-
-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/Avatar/styles.ts

@@ -1,18 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-export default StyleSheet.create({
-  icon: {
-    position: 'absolute',
-    overflow: 'hidden',
-  },
-
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-  },
-});

package/src/libs/Avatar/types.ts

@@ -1,57 +0,0 @@
-/**
- * Predefined set of sizes for the avatar. The numbers represent pixel values.
- */
-type AvatarSize = 24 | 32 | 40 | 48 | 56 | 72;
-
-/**
- * Props for the Avatar component, which displays an image or icon representing a user.
- */
-export type AvatarProps = {
-  /**
-   * Optional. Specifies the size of the avatar from a set of predefined sizes.
-   * If not provided, the component may use a default size.
-   */
-  size?: AvatarSize;
-
-  /**
-   * Optional. If `true`, the avatar will have rounded corners, providing a circular appearance.
-   * Defaults to `false` if not provided, resulting in a square or rectangular avatar.
-   */
-  rounded?: boolean;
-
-  /**
-   * Optional. If `true`, an icon representing "Momo" will be displayed.
-   * This is specific to the use-case where the application requires a Momo icon.
-   * Defaults to `false` if not provided.
-   */
-  showIconMomo?: boolean;
-
-  /**
-   * Optional. If `true`, a support icon will be displayed, suggesting this avatar is for support or helpdesk representation.
-   * Defaults to `false` if not provided.
-   */
-  showIconSupport?: boolean;
-
-  /**
-   * Optional. Specifies the icon for support. This is used in conjunction with `showIconSupport`.
-   * If `showIconSupport` is `true` but no `iconSupport` is provided, a default icon may be used.
-   */
-  iconSupport?: string;
-
-  /**
-   * Optional. The name associated with the avatar. This could be the user’s full name,
-   * first name, or a username, depending on the implementation.
-   */
-  name?: string;
-
-  /**
-   * Optional. The URL or local path of the image to be displayed as the avatar.
-   * If not provided, a placeholder or default avatar may be displayed.
-   */
-  image?: string;
-
-  /**
-   * Optional. Assign accessibility label to the avatar for automated testing.
-   */
-  accessibilityLabel?: string;
-};

package/src/libs/Badge/Badge.tsx

@@ -1,70 +0,0 @@
-import React, { FC, useContext } from 'react';
-import { View } from 'react-native';
-
-import { BadgeProps } from './types';
-import styles from './styles';
-import {
-  ApplicationContext,
-  Colors,
-  Text,
-  useScaleSize,
-} from '@momo-kits/foundation';
-
-const Badge: FC<BadgeProps> = ({ label = 'Label', style, backgroundColor }) => {
-  const { theme } = useContext(ApplicationContext);
-  const scaledSize = useScaleSize(16);
-
-  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,
-        {
-          height: scaledSize,
-          minWidth: scaledSize,
-        },
-        { backgroundColor: badgeColor },
-      ]}
-    >
-      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
-        {formatTitle()}
-      </Text>
-    </View>
-  );
-};
-
-export default Badge;

package/src/libs/Badge/BadgeDot.tsx

@@ -1,11 +0,0 @@
-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/src/libs/Badge/BadgeRibbon.tsx

@@ -1,122 +0,0 @@
-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, Colors, Image, Text} from '@momo-kits/foundation';
-
-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/src/libs/Badge/Shape.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import styles from './styles';
-import {Image} from '@momo-kits/foundation';
-
-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/src/libs/Badge/index.tsx

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

package/src/libs/Badge/package.json

@@ -1,16 +0,0 @@
-{
-    "name": "@momo-kits/badge",
-    "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/Badge/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/Badge/styles.ts

@@ -1,55 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '@momo-kits/foundation';
-
-export default StyleSheet.create({
-  badge: {
-    paddingHorizontal: Spacing.XS,
-    borderRadius: Radius.M,
-    justifyContent: 'center',
-    alignItems: 'center',
-    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/src/libs/Badge/types.ts

@@ -1,63 +0,0 @@
-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[];
-};