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

package/src/libs/ProgressInfo/ProgressInfoIcon.tsx

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

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

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

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

@@ -1,16 +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/ProgressInfo/styles.ts

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

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

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

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

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

@@ -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/Rating/type.ts

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

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

@@ -1,35 +0,0 @@
-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);
-};