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

package/src/foundations/Title/index.tsx

@@ -1,285 +0,0 @@
-import React, { FC, useContext, useState } from 'react';
-import {
-  Text as RNText,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native';
-import { Icon } from '../Icon';
-import { useScaleSize, Text } from '../Text';
-import { useComponentId } from '../Application';
-import { ApplicationContext, MiniAppContext } from '../Context';
-import { Badge } from '../Badge';
-import { Colors } from '../Consts';
-import styles from './styles';
-import { TitleProps } from './types';
-import { Typography } from '../Text/types';
-
-const Title: FC<TitleProps> = ({
-  accessibilityLabel,
-  title = 'Title',
-  type = 'section',
-  size = 'medium',
-  icon,
-  description,
-  iconColor = null,
-  iconAlign = 'top',
-  showRightAction = false,
-  showTrailingAction = false,
-  badgeLabel,
-  buttonTitle,
-  onPressRightAction = () => {},
-  onPressTrailingAction = () => {},
-  buttonSize = 'small',
-  textOnly = false,
-  style,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-  const [badgeWidth, setBadgeWidth] = useState(0);
-  const [contentWidth, setContentWidth] = useState(0);
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  const size18 = useScaleSize(18);
-  const size22 = useScaleSize(22);
-  // Dynamic styles using useScaleSize hook
-  const dynamicStyles = {
-    card_small: {
-      fontSize: useScaleSize(14),
-      lineHeight: useScaleSize(20),
-    },
-    card_medium: {
-      fontSize: useScaleSize(16),
-      lineHeight: useScaleSize(22),
-    },
-    card_large: {
-      fontSize: useScaleSize(18),
-      lineHeight: useScaleSize(26),
-    },
-    section_medium: {
-      fontSize: useScaleSize(20),
-      lineHeight: useScaleSize(28),
-    },
-    section_small: {
-      fontSize: useScaleSize(16),
-      lineHeight: useScaleSize(22),
-    },
-    section_large: {
-      fontSize: useScaleSize(24),
-      lineHeight: useScaleSize(34),
-    },
-  };
-
-  const styleSheet: {
-    [key: string]: any;
-  } = { ...styles, ...dynamicStyles };
-  const typography = `${type}_${size}`;
-  const isSection = type === 'section';
-  const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
-  const buttonTypo: Typography =
-    buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
-  const flexStyle: ViewStyle = showTrailingAction ? { maxWidth: '95%' } : {};
-  const componentName = 'Title';
-
-  const { componentId } = useComponentId(
-    `${componentName}/${title}`,
-    accessibilityLabel,
-  );
-
-  const renderIcon = () => {
-    if (!icon) return null;
-
-    let iconStyle: ViewStyle = {
-      justifyContent: 'flex-start',
-    };
-
-    if (iconAlign === 'middle') {
-      iconStyle = { justifyContent: 'center' };
-    }
-
-    if (iconAlign === 'bottom') {
-      iconStyle = { justifyContent: 'flex-end' };
-    }
-
-    return (
-      <View
-        accessibilityLabel={componentId + '|icon'}
-        style={[styles.iconView, iconStyle]}
-      >
-        <Icon color={iconColor} source={icon} />
-      </View>
-    );
-  };
-
-  const renderContent = () => {
-    return (
-      <View style={styles.contentView}>
-        <View
-          onLayout={e => {
-            if (e.nativeEvent.layout.width !== contentWidth) {
-              setContentWidth(e.nativeEvent.layout.width);
-            }
-          }}
-          style={[styles.iconLeftView, flexStyle]}
-        >
-          <RNText
-            allowFontScaling={false}
-            accessibilityLabel={componentId + '|title-text'}
-            numberOfLines={numberOfLines}
-            style={[
-              styleSheet[typography],
-              styles.title,
-              {
-                maxWidth:
-                  contentWidth > 0 ? contentWidth - badgeWidth : undefined,
-              },
-            ]}
-          >
-            {title}
-          </RNText>
-          {badgeLabel && (
-            <View
-              onLayout={e => {
-                if (e.nativeEvent.layout.width !== badgeWidth) {
-                  setBadgeWidth(e.nativeEvent.layout.width);
-                }
-              }}
-              style={{
-                alignItems: 'center',
-              }}
-            >
-              <Badge
-                style={styles.badge}
-                label={badgeLabel}
-                accessibilityLabel={componentId + '|badge'}
-              />
-            </View>
-          )}
-          {renderActionLeft()}
-        </View>
-        {description && (
-          <Text
-            accessibilityLabel={componentId + '|description-text'}
-            style={styles.description}
-            color={theme.colors.text.secondary}
-            typography={'description_default_regular'}
-          >
-            {description}
-          </Text>
-        )}
-      </View>
-    );
-  };
-
-  const renderActionLeft = () => {
-    return (
-      <TouchableOpacity
-        accessibilityLabel={componentId + '|trailing-touch'}
-        onPress={onPressTrailingAction}
-        style={styles.iconLeftView}
-        hitSlop={{ top: 10, bottom: 10, left: 50, right: 10 }}
-      >
-        {showTrailingAction && !showRightAction && (
-          <View
-            style={[
-              styles.iconLeft,
-              {
-                backgroundColor: isSection
-                  ? Colors.black_06 + '99'
-                  : Colors.black_06 + '4D',
-              },
-            ]}
-          >
-            <Icon
-              source={'arrow_chevron_right_small'}
-              size={size18}
-              color={theme.colors.text.default}
-            />
-          </View>
-        )}
-      </TouchableOpacity>
-    );
-  };
-
-  const renderActionRight = () => {
-    if (!showRightAction || showTrailingAction) return false;
-
-    const lineHeight = styleSheet[typography].lineHeight;
-
-    return (
-      <View
-        style={{
-          height: lineHeight,
-          justifyContent: 'center',
-        }}
-      >
-        {!buttonTitle ? (
-          <TouchableOpacity
-            onPress={onPressRightAction}
-            style={[
-              styles.iconRight,
-              {
-                backgroundColor: theme.colors.primary + '0F',
-              },
-            ]}
-            accessibilityLabel={componentId + '|label-right-action-touch'}
-          >
-            <Icon
-              source={'arrow_chevron_right_small'}
-              size={size22}
-              color={theme.colors.primary}
-            />
-          </TouchableOpacity>
-        ) : (
-          <TouchableOpacity
-            onPress={onPressRightAction}
-            accessibilityLabel={componentId + '|label-right-action-touch'}
-          >
-            <Text
-              color={theme.colors.primary}
-              typography={buttonTypo}
-              accessibilityLabel={componentId + '|label-right-action-text'}
-            >
-              {buttonTitle}
-            </Text>
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  };
-
-  if (textOnly) {
-    return (
-      <View style={isSection && styles.margin}>
-        <RNText
-          allowFontScaling={false}
-          accessibilityLabel={componentId + '|title-text'}
-          numberOfLines={numberOfLines}
-          style={[styleSheet[typography], styles.title]}
-        >
-          {title}
-        </RNText>
-      </View>
-    );
-  }
-
-  return (
-    <View
-      style={[
-        style,
-        styles.wrapper,
-        isSection && styles.margin,
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-      accessibilityLabel={componentId}
-    >
-      {renderIcon()}
-      {renderContent()}
-      {renderActionRight()}
-    </View>
-  );
-};
-
-export { Title };
-export type { TitleProps };

package/src/foundations/Title/styles.ts

@@ -1,55 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Colors, Radius, Spacing } from '../Consts';
-
-export default StyleSheet.create({
-  actionIcon: {
-    borderRadius: Radius.M,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {
-    marginRight: Spacing.S,
-    borderRadius: Radius.XS,
-  },
-  wrapper: {
-    flexDirection: 'row',
-  },
-  margin: {
-    marginTop: Spacing.S,
-  },
-  iconView: {
-    marginRight: Spacing.S,
-  },
-  iconRight: {
-    width: 22,
-    height: 22,
-    borderRadius: Radius.M,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: Spacing.S,
-  },
-  iconLeft: {
-    width: 18,
-    height: 18,
-    borderRadius: Radius.M,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: Spacing.XS,
-  },
-  iconLeftView: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  contentView: { marginRight: Spacing.S, flex: 1 },
-  title: {
-    fontWeight: 'bold',
-    color: Colors.black_17,
-  },
-  badge: {
-    marginLeft: Spacing.XS,
-  },
-  description: {
-    marginTop: Spacing.XS,
-  },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});

package/src/foundations/Title/types.ts

@@ -1,21 +0,0 @@
-import {ViewStyle} from 'react-native';
-
-export type TitleProps = {
-  type?: 'card' | 'section';
-  size?: 'small' | 'medium' | 'large';
-  title: string;
-  icon?: string;
-  description?: string;
-  iconColor?: string;
-  iconAlign?: 'top' | 'middle' | 'bottom';
-  showRightAction?: boolean;
-  showTrailingAction?: boolean;
-  badgeLabel?: string;
-  buttonTitle?: string;
-  buttonSize?: 'small' | 'large';
-  onPressRightAction?: () => void;
-  onPressTrailingAction?: () => void;
-  textOnly?: boolean;
-  style?: ViewStyle;
-  accessibilityLabel?: string;
-};

package/src/foundations/index.ts

@@ -1,50 +0,0 @@
-/**
- * native export
- */
-import { TouchableOpacity } from 'react-native';
-
-export * from 'react-native-linear-gradient';
-export * from 'react-native-safe-area-context';
-
-/**
- * foundation component
- */
-export * from './Consts';
-export * from './Context';
-export * from './Layout';
-export * from './Layout/types';
-export * from './Popup';
-export * from './Popup/types';
-export * from './Text';
-export * from './Text/types';
-export * from './Button';
-export * from './Application';
-export * from './Application/types';
-export * from './Icon';
-export * from './Icon/types';
-export * from './IconButton';
-export * from './Image';
-export * from './Image/types';
-export * from './Skeleton';
-export * from './Skeleton/types';
-export * from './CheckBox';
-export * from './CheckBox/types';
-export * from './Radio';
-export * from './Radio/types';
-export * from './Switch';
-export * from './Switch/types';
-export * from './Input';
-export * from './Divider';
-export * from './Tag';
-export * from './Tag/types';
-export * from './Pagination';
-export * from './Pagination/types';
-export * from './Loader';
-export * from './Loader/types';
-export * from './Title';
-export * from './Title/types';
-export * from './Badge';
-export * from './Badge/types';
-export * from './FoundationList';
-export * from './FoundationList/types';
-export { TouchableOpacity };

package/src/foundations/package.json

@@ -1,35 +0,0 @@
-{
-    "name": "@momo-kits/foundation",
-    "version": "0.157.1-beta.4",
-    "description": "React Native Component Kits",
-    "main": "index.ts",
-    "scripts": {},
-    "keywords": [
-        "@momo-kits/foundation"
-    ],
-    "dependencies": {
-        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-        "@react-navigation/bottom-tabs": "7.4.2",
-        "@react-navigation/core": "7.12.1",
-        "@react-navigation/elements": "2.5.2",
-        "@react-navigation/native": "7.1.14",
-        "@react-navigation/routers": "7.4.1",
-        "@react-navigation/stack": "7.4.2",
-        "react-native-gesture-handler": "2.27.1",
-        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-        "react-native-reanimated": "4.1.0",
-        "react-native-safe-area-context": "5.5.2",
-        "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.2.4"
-    },
-    "peerDependencies": {
-        "react-native": "*"
-    },
-    "devDependencies": {
-        "@types/color": "3.0.6"
-    },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "license": "MoMo"
-}

package/src/foundations/publish.sh

@@ -1,17 +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/AutoComplete/index.tsx

@@ -1,88 +0,0 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
-import { FlatList, TouchableOpacity } from 'react-native';
-import { Divider, Shadow, Text } from '@momo-kits/foundation';
-import { AutoCompleteProps, SuggestItem } from './types';
-import styles from './styles';
-
-const AutoComplete: FC<AutoCompleteProps> = ({
-  data = [],
-  query = '',
-  onPressItem,
-  maxItemShow = 5,
-  searchKey = 'title',
-}) => {
-  const [haveSelected, setHaveSelected] = useState(false);
-
-  const removeDiacritics = (str: string) => {
-    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-  };
-
-  const sanitizeInput = (str: string) => {
-    return str.replace(/[\\/*+?().{}[\]^$|]/g, '');
-  };
-
-  const onSearch = useCallback((query: string) => {
-    const sanitizedText = sanitizeInput(query);
-    const normalizedText = removeDiacritics(sanitizedText.trim().toLowerCase());
-    const regex = new RegExp(normalizedText, 'i');
-
-    const filtered: (string | SuggestItem)[] = data
-      .filter((item: string | SuggestItem) => {
-        if (typeof item === 'string') {
-          return regex.test(removeDiacritics(item.toLowerCase()));
-        } else {
-          return regex.test(removeDiacritics(item?.[searchKey].toLowerCase()));
-        }
-      })
-      .slice(0, maxItemShow);
-    return filtered;
-  }, [data, maxItemShow, searchKey]);
-
-  useEffect(() => {
-    setHaveSelected(false);
-    onSearch(query);
-    return () => {};
-  }, [query, onSearch]);
-
-  const onSelected = (title: string, value: null | string | undefined) => {
-    setHaveSelected(true);
-    onPressItem?.(title, value);
-  };
-
-  const _renderItem = ({ item }: { item: string | SuggestItem }) => {
-    const title = typeof item === 'string' ? item : item.title;
-    const value = typeof item === 'string' ? null : item.value;
-
-    return (
-      <TouchableOpacity
-        onPress={() => onSelected(title, value)}
-        style={styles.item}
-      >
-        <Text numberOfLines={1} typography={'body_default_regular'}>
-          {title}
-        </Text>
-        {!!value && (
-          <Text numberOfLines={1} typography={'body_default_regular'}>
-            {value}
-          </Text>
-        )}
-      </TouchableOpacity>
-    );
-  };
-
-  const filteredData = onSearch(query);
-
-  if (filteredData.length === 0 || query.length === 0 || haveSelected)
-    return null;
-  return (
-    <FlatList
-      keyExtractor={(item, index) => index.toString()}
-      ItemSeparatorComponent={() => <Divider />}
-      style={[styles.flatList, Shadow.Light]}
-      data={filteredData}
-      renderItem={_renderItem}
-    />
-  );
-};
-
-export { AutoComplete };

package/src/libs/AutoComplete/package.json

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

@@ -1,15 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Radius, Spacing} from '@momo-kits/foundation';
-
-export default StyleSheet.create({
-  flatList: {
-    backgroundColor: 'white',
-    borderRadius: Radius.S,
-    paddingHorizontal: Spacing.M,
-  },
-  item: {
-    paddingVertical: Spacing.M,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-});

package/src/libs/AutoComplete/types.ts

@@ -1,60 +0,0 @@
-import {ReactElement} from 'react';
-
-/**
- * Represents a suggested item in the autocomplete list. Each item has a title for display
- * and a value that represents the underlying data.
- */
-export type SuggestItem = {
-  title: string; // The display text for a suggestion item.
-  value: string; // The underlying value or identifier for this item.
-};
-
-/**
- * Props for configuring the AutoComplete component.
- */
-export type AutoCompleteProps = {
-  /**
-   * An array of strings or `SuggestItem` objects that will be used to create the
-   * autocomplete dropdown list.
-   */
-  data: Array<string | SuggestItem>;
-
-  /**
-   * The current text in the autocomplete input field. This is used to determine
-   * which suggestions to display.
-   */
-  query: string;
-
-  /**
-   * Optional. The maximum number of items to display in the dropdown list. If not
-   * provided, all matching items will be shown.
-   */
-  maxItemShow?: number;
-
-  /**
-   * Optional. A function to render the UI of each item in the dropdown list.
-   * This is useful for adding custom styling or formatting to the displayed items.
-   */
-  renderItem?: (data: string) => ReactElement;
-
-  /**
-   * A function that is called when a user selects an item from the autocomplete list.
-   * It receives two arguments: the display text of the selected item and its corresponding value.
-   */
-  onPressItem?: (item: string, value: null | string | undefined) => void;
-
-  /**
-   * Indicates whether the 'title' or 'value' of a `SuggestItem` should be used for
-   * searching. This affects which items are filtered into the dropdown list as the
-   * user types in the input field.
-   */
-  searchKey: 'title' | 'value';
-};
-
-/**
- * Props for representing individual items in the autocomplete suggestions list.
- */
-export type ListItemProps = {
-  item: string; // The content or data of the list item, to be rendered in the list.
-  index: number; // Represents the position of this item within the list.
-};