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

package/src/libs/ProgressInfo/ProgressInfoIcon.tsx

@@ -0,0 +1,88 @@
+import {
+  Colors,
+  Icon,
+  Text,
+  useScaleSize,
+  Radius,
+} from '@momo-kits/foundation';
+import React, { FC } from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import styles from './styles';
+import { ProgressInfoItemIcon } from './types';
+
+const ProgressInfoIcon: FC<ProgressInfoItemIcon> = ({
+  size = 'large',
+  backgroundColor,
+  borderColor,
+  style,
+  useNumber,
+  customIcon,
+  index,
+}) => {
+  const size16 = useScaleSize(16);
+  const scaledRadiusM = useScaleSize(Radius.M);
+
+  let iconStyle: ViewStyle = styles.stepIcon;
+  let checkIconSize = 16;
+  let contentIconSize = 8;
+
+  if (size === 'small') {
+    iconStyle = StyleSheet.flatten([
+      styles.stepIcon,
+      {
+        width: size16,
+        height: size16,
+        borderRadius: scaledRadiusM,
+      },
+    ]);
+    checkIconSize = 12;
+    contentIconSize = 6;
+  }
+
+  const renderIcon = () => {
+    // useNumber is true, render number
+    if (useNumber) {
+      return (
+        <Text
+          style={{ position: 'absolute' }}
+          typography={'header_xs_semibold'}
+          color={Colors.pink_MoMo_Branding}
+        >
+          {index + 1}
+        </Text>
+      );
+    }
+
+    // customIcon is true, render customIcon
+    if (customIcon) {
+      return (
+        <Icon
+          size={checkIconSize}
+          color={Colors.pink_MoMo_Branding}
+          source={customIcon}
+        />
+      );
+    }
+    // render default Icon
+    return (
+      <View
+        style={[styles.currIcon, { width: contentIconSize, aspectRatio: 1 }]}
+      />
+    );
+  };
+
+  return (
+    <View
+      style={[
+        iconStyle,
+        styles.center,
+        { backgroundColor, borderColor },
+        style,
+      ]}
+    >
+      {renderIcon()}
+    </View>
+  );
+};
+
+export default ProgressInfoIcon;

package/src/libs/ProgressInfo/ProgressInfoVertical.tsx

@@ -0,0 +1,85 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {ProgressInfoItem, ProgressInfoProps} from './types';
+import {ApplicationContext, Colors, Spacing, Text} from '@momo-kits/foundation';
+import ProgressInfoIcon from './ProgressInfoIcon';
+import styles from './styles';
+
+const ProgressInfoVertical: FC<ProgressInfoProps> = ({
+  steps,
+  size,
+  useNumber = false,
+  showDescription = true,
+  showTitle = true,
+  customIcon,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const renderStepItem = (i: ProgressInfoItem, ii: number) => {
+    const {description, title} = steps[ii];
+
+    const lineColor = theme.colors.primary + '33';
+
+    return (
+      <View
+        key={`Step ${ii}`}
+        style={{
+          flexDirection: 'row',
+        }}>
+        <View
+          style={{
+            alignItems: 'center',
+            marginRight: Spacing.M,
+            minHeight: 48,
+          }}>
+          <ProgressInfoIcon
+            size={size}
+            backgroundColor={Colors.pink_08}
+            borderColor={Colors.pink_08}
+            useNumber={useNumber}
+            customIcon={customIcon}
+            index={ii}
+          />
+          {ii !== steps.length - 1 && (
+            <View style={[styles.lineVertical, {backgroundColor: lineColor}]} />
+          )}
+        </View>
+        <View style={{flex: 1}}>
+          <View
+            style={[
+              {
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              },
+            ]}>
+            {showTitle && (
+              <Text
+                numberOfLines={2}
+                style={{marginRight: Spacing.S, flex: 1}}
+                typography={'header_xs_semibold'}>
+                {title}
+              </Text>
+            )}
+          </View>
+          {showDescription && (
+            <Text
+              color={Colors.black_12}
+              typography={'description_default_regular'}>
+              {description}
+            </Text>
+          )}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={{width: '100%'}}>
+      {steps.map((i, ii) => {
+        return renderStepItem(i, ii);
+      })}
+    </View>
+  );
+};
+
+export default ProgressInfoVertical;

package/src/libs/ProgressInfo/index.tsx

@@ -0,0 +1,22 @@
+import React, {FC} from 'react';
+import {ProgressInfoItem, ProgressInfoProps} from './types';
+import ProgressInfoHorizontal from './ProgressInfoHorizontal';
+import ProgressInfoVertical from './ProgressInfoVertical';
+
+const ProgressInfo: FC<ProgressInfoProps> = ({
+  horizontal = false,
+  ...props
+}) => {
+  return (
+    <>
+      {horizontal ? (
+        <ProgressInfoHorizontal {...props} />
+      ) : (
+        <ProgressInfoVertical {...props} />
+      )}
+    </>
+  );
+};
+
+export {ProgressInfo};
+export type {ProgressInfoProps, ProgressInfoItem};

package/src/libs/ProgressInfo/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@momo-kits/progress-info",
+    "version": "0.157.1-beta.4",
+    "private": false,
+    "main": "index.tsx",
+    "dependencies": {},
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    }
+}

package/src/libs/ProgressInfo/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/ProgressInfo/styles.ts

@@ -0,0 +1,46 @@
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+import {StyleSheet} from 'react-native';
+export default StyleSheet.create({
+  stepIcon: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    borderRadius: Radius.L,
+  },
+  lineHorizontal: {
+    height: 2,
+    flex: 1,
+  },
+  lineVertical: {
+    width: 2,
+    minHeight: 20,
+    flex: 1,
+  },
+  radiusLeft: {
+    borderTopLeftRadius: Radius.S,
+    borderBottomLeftRadius: Radius.S,
+  },
+  radiusRight: {
+    borderTopRightRadius: Radius.S,
+    borderBottomRightRadius: Radius.S,
+  },
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rowStep: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  title: {
+    marginBottom: Spacing.XS,
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+  currIcon: {
+    backgroundColor: Colors.pink_MoMo_Branding,
+    borderRadius: Radius.L,
+    aspectRatio: 1,
+  },
+});

package/src/libs/ProgressInfo/types.ts

@@ -0,0 +1,60 @@
+import {ViewStyle} from 'react-native';
+
+export type ProgressInfoItem = {
+  /**
+   * The title of the step, briefly describing the purpose or task of this stage.
+   */
+  title: string;
+
+  /**
+   * Optional. More detailed text about this particular step.
+   * It can provide users with guidance on what to expect or what's required.
+   */
+  description?: string;
+};
+
+/**
+ * Properties for the StepIcon component, which displays an icon
+ * representing a step within the Steps component.
+ */
+export type ProgressInfoItemIcon = {
+  /**
+   * Optional. Specifies the size of the step icon. If not provided, a default size is used.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Optional. The background color of the step icon.
+   * If not provided, a default background color is used.
+   */
+  backgroundColor?: string;
+
+  /**
+   * Optional. The border color of the step icon.
+   * If not provided, a default border color is used.
+   */
+  borderColor?: string;
+
+  /**
+   * Optional. Custom styles to apply to the StepIcon component.
+   * Can be used to adjust the visual presentation or layout.
+   */
+  style?: ViewStyle;
+
+  index: number;
+
+  useNumber?: boolean;
+
+  customIcon?: string;
+};
+
+export type ProgressInfoProps = {
+  steps: ProgressInfoItem[];
+  horizontal?: boolean;
+  size?: 'small' | 'large';
+  useNumber?: boolean;
+  align?: 'left' | 'right' | 'center' | 'stretch' | undefined;
+  showDescription?: boolean;
+  showTitle?: boolean;
+  customIcon?: string;
+};

package/src/libs/ProgressInfo/yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@momo-platform/versions@4.1.11":
+  version "4.1.11"
+  resolved "http://nexus.mservice.com.vn:8081/repository/momo-app/@momo-platform/versions/-/versions-4.1.11.tgz#568fc894f442e60ef01d0eb831f258f6e8816c4b"
+  integrity sha512-fuxvotZA5spYHnGx0Ufl9RUK3Z/0PZQfJY34AZE7ckAlChINYXfNxE7lVMZUhVU6DmZwKP7ILjXXb9M3ienbLg==

package/src/libs/Rating/index.tsx

@@ -0,0 +1,74 @@
+import {Colors, Icon} from '@momo-kits/foundation';
+import React, {FC} from 'react';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import {RatingProps} from './type';
+
+const Rating: FC<RatingProps> = ({
+  rating,
+  numOfStars,
+  onRatingChange,
+  size,
+  style,
+  ...props
+}) => {
+  const normalizedRating =
+    typeof rating === 'string' ? parseFloat(rating.replace(',', '.')) : rating;
+  const normalizedNumOfStars =
+    typeof numOfStars === 'string' ? parseFloat(numOfStars) : numOfStars;
+
+  const renderStar = (index: number) => {
+    // Full star
+    if (index < Math.floor(normalizedRating)) {
+      return 'reaction_star_full';
+    }
+    // Half star
+    if (index === Math.floor(normalizedRating) && normalizedRating % 1 !== 0) {
+      return 'reaction_star_half';
+    }
+    // Empty star
+    return 'reaction_star_non';
+  };
+
+  const tintColor = (index: number) => {
+    // Full star
+    if (index < Math.floor(normalizedRating)) {
+      return Colors.yellow_03;
+    }
+    // Half star
+    if (index === Math.floor(normalizedRating) && normalizedRating % 1 !== 0) {
+      return Colors.yellow_03;
+    }
+    // Empty star
+    return Colors.black_07;
+  };
+
+  const sizes = size === 'small' ? 16 : size === 'medium' ? 20 : 24;
+
+  return (
+    <View style={[style, styles.container]}>
+      {Array.from({length: normalizedNumOfStars}, (_, index) => (
+        <TouchableOpacity
+          key={index}
+          onPress={() => onRatingChange && onRatingChange(index + 1)}
+          disabled={!onRatingChange} // Disable interaction if no callback
+          {...props}>
+          <Icon
+            source={renderStar(index)}
+            size={sizes}
+            color={
+              tintColor(index) // Set color based on rating
+            }
+          />
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+});
+
+export {Rating};

package/src/libs/Rating/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@momo-kits/rating",
+    "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/Rating/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/Rating/type.ts

@@ -0,0 +1,25 @@
+import {TouchableOpacityProps} from 'react-native';
+
+export interface RatingProps extends TouchableOpacityProps {
+  /**
+   * `numOfStars`: Represents the number of stars in the Rating component.
+   */
+  numOfStars: number | string;
+
+  /**
+   * `rating`: Represents the rating value of the Rating component.
+   */
+  rating: number | string;
+
+  /**
+   * `onRatingChange`: A callback function that is called when the rating value of the Rating component changes.
+   * It is triggered when the user interacts with the Rating component.
+   */
+  onRatingChange: (rating: number) => void;
+
+  /**
+   * `size`: Optional. Represents the size of the Rating component.
+   * Defaults to `large` is 24 if not provided.
+   */
+  size?: 'small' | 'medium' | 'large';
+}

package/src/libs/Slider/Label.tsx

@@ -0,0 +1,33 @@
+import React, {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useImperativeHandle,
+  useState,
+} from 'react';
+import {View, ViewProps} from 'react-native';
+import {Shadow, Text} from '@momo-kits/foundation';
+import styles from './styles';
+
+export type LabelRef = {
+  setValue: (value: number) => void;
+};
+
+const Label: ForwardRefRenderFunction<LabelRef, ViewProps> = (props, ref) => {
+  const [value, _setValue] = useState(Number.NaN);
+
+  useImperativeHandle(ref, () => ({
+    setValue,
+  }));
+
+  const setValue = (newValue: number) => {
+    _setValue(newValue);
+  };
+
+  return (
+    <View {...props} style={[styles.label, Shadow.Light]}>
+      <Text typography={'label_s_medium'}>{value}</Text>
+    </View>
+  );
+};
+
+export default forwardRef(Label);

package/src/libs/Slider/helpers.ts

@@ -0,0 +1,35 @@
+export const isLowCloser = (
+  downX: number,
+  lowPosition: number,
+  highPosition: number,
+): boolean => {
+  if (lowPosition === highPosition) {
+    return downX < lowPosition;
+  }
+  const distanceFromLow = Math.abs(downX - lowPosition);
+  const distanceFromHigh = Math.abs(downX - highPosition);
+  return distanceFromLow < distanceFromHigh;
+};
+
+export const clamp = (value: number, min: number, max: number): number => {
+  return Math.min(Math.max(value, min), max);
+};
+
+export const getValueForPosition = (
+  positionInView: number,
+  containerWidth: number,
+  thumbWidth: number,
+  min: number,
+  max: number,
+  step: number,
+): number => {
+  const availableSpace = containerWidth - thumbWidth;
+  const relStepUnit = step / (max - min);
+  let relPosition = (positionInView - thumbWidth / 2) / availableSpace;
+  const relOffset = relPosition % relStepUnit;
+  relPosition -= relOffset;
+  if (relOffset / relStepUnit >= 0.5) {
+    relPosition += relStepUnit;
+  }
+  return clamp(min + Math.round(relPosition / relStepUnit) * step, min, max);
+};