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

package/src/libs/Avatar/index.tsx

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

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

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

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

@@ -0,0 +1,57 @@
+/**
+ * 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

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

@@ -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/src/libs/Badge/BadgeRibbon.tsx

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

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

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

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

@@ -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/Badge/styles.ts

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

@@ -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[];
+};