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

package/src/foundations/Title/index.tsx

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

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

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

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

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

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

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

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

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

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

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