@momo-kits/avatar 0.0.48-rc.2 → 0.0.48

package/index.tsx

@@ -0,0 +1,119 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {AvatarProps} from './types';
+import {
+  ApplicationContext,
+  Colors,
+  Icon,
+  Image,
+  scaleSize,
+  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,
+}) => {
+  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: scaleSize(size),
+          height: scaleSize(size),
+          backgroundColor: Colors.pink_09,
+          borderColor: theme.colors.border.default,
+          borderRadius: scaleSize(borderRadius),
+        },
+      ]}>
+      {!!name && !image && (
+        <Text color={Colors.pink_03} typography={'description_xs_regular'}>
+          {getShortName(name)}
+        </Text>
+      )}
+      {!name && !image && (
+        <Icon size={iconSize} source={'basic_person'} color={Colors.pink_03} />
+      )}
+      {!!image && (
+        <Image
+          source={{uri: image}}
+          style={[
+            styles.image,
+            {
+              borderRadius,
+            },
+          ]}
+        />
+      )}
+      {shouldShowIconTop && (
+        <Image
+          source={{uri: logo}}
+          style={[styles.icon, supportIconSize, {top: -1, right: -1}]}
+        />
+      )}
+      {shouldShowIconBottom && (
+        <Image
+          source={{uri: iconSupport}}
+          style={[styles.icon, supportIconSize, {bottom: -1, right: -1}]}
+        />
+      )}
+    </View>
+  );
+};
+
+export {Avatar};

package/package.json

@@ -1,16 +1,17 @@
 {
-  "name": "@momo-kits/avatar",
-  "version": "0.0.48-rc.2",
-  "private": false,
-  "main": "index.js",
-  "dependencies": {},
-  "peerDependencies": {
-    "react-native": ">=0.55",
-    "prop-types": "^15.7.2",
-    "react": "16.9.0",
-    "@momo-kits/core": ">=0.0.5-beta",
-    "lodash": "^4.17.15"
-  },
-  "devDependencies": {},
-  "license": "MoMo"
-}
+    "name": "@momo-kits/avatar",
+    "version": "0.0.48",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "16.9.0",
+        "react-native": ">=0.55",
+        "prop-types": "^15.7.2"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "dependencies": {}
+}

package/publish.sh

@@ -1,29 +1,23 @@
 #!/bin/bash
+
+# Prepare dist files
 rm -rf dist
 mkdir dist
-
-cp . ./dist
-
-# GET VERSION from mck_package.json
-VERSIONSTRING=( v$(jq .version package.json) )
-VERSION=(${VERSIONSTRING//[\"]/})
-echo VERSION: $VERSION
-
-rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' --exclude 'web.js' ./* dist
-
-# #babel component to dist
-#babel ./dist -d dist --copy-files
-
-#copy option
-#cp -r ./src/ dist
-
-
-#npm login
-#publish dist to npm
+rsync -r --exclude=/dist ./* dist
 cd dist
-npm publish --tag beta --access=public
+
+if [ "$1" == "beta" ]; then  # Publish beta
+  npm version $(npm view @momo-kits/avatar@beta version)
+  npm version prepatch --preid=beta
+  npm publish --tag beta --access=public
+else                         # Publish latest
+  npm version $(npm view @momo-kits/avatar version)
+  npm version patch
+  npm publish --tag latest --access=public
+fi
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
 cd ..
 rm -rf dist
-
-
-#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/avatar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/avatar"}'

package/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/types.ts

@@ -0,0 +1,52 @@
+/**
+ * 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;
+};