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

package/src/libs/Chip/index.tsx

@@ -1,164 +0,0 @@
-import React, { FC, useContext, useMemo } from 'react';
-import {
-  ApplicationContext,
-  Colors,
-  Icon,
-  MiniAppContext,
-  Radius,
-  ScreenContext,
-  Spacing,
-  Text,
-  Typography,
-  useScaleSize,
-} from '@momo-kits/foundation';
-import { TouchableOpacity, View } from 'react-native';
-import styles from './styles';
-import { ChipProps } from './types';
-
-const Chip: FC<ChipProps> = ({
-  label = 'Label',
-  iconLeft,
-  iconRight,
-  selected = false,
-  style,
-  onPress,
-  size = 'large',
-  iconLeftColor,
-  iconRightColor,
-  itemContainerStyle,
-  backgroundColor,
-  accessibilityLabel,
-  accessibilityState,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const scaledRadiusL = useScaleSize(Radius.L);
-  const scaledPaddingH = useScaleSize(Spacing.S);
-  const scaledHeight32 = useScaleSize(32);
-  const scaledHeight24 = useScaleSize(24);
-  const scaledSize16 = useScaleSize(16);
-  const scaledMargin = useScaleSize(Spacing.XS);
-
-  const app = useContext<any>(MiniAppContext);
-  const screen = useContext<any>(ScreenContext);
-  const componentName = 'Chip';
-
-  const componentId = useMemo(() => {
-    if (accessibilityLabel) {
-      return accessibilityLabel;
-    }
-    let id = `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${label}`;
-    return id;
-  }, [componentName, accessibilityLabel, app, screen, label]);
-
-  let textColor = theme.colors.text.default;
-  let bgColor = backgroundColor ?? Colors.black_03;
-  let iconLeftColorSelected = iconLeftColor;
-  let iconRightColorSelected = iconRightColor;
-
-  if (selected) {
-    textColor = theme.colors.primary;
-    bgColor = theme.colors.background.selected;
-    iconLeftColorSelected = theme.colors.primary;
-    iconRightColorSelected = theme.colors.primary;
-  }
-
-  let typo: Typography = 'label_default_medium';
-  let chipStyle = [
-    styles.chip,
-    {
-      borderRadius: scaledRadiusL,
-      paddingHorizontal: scaledPaddingH,
-      height: scaledHeight32,
-    },
-  ];
-  let iconSize = 20;
-  if (size === 'small') {
-    chipStyle = [
-      styles.chip,
-      {
-        borderRadius: scaledRadiusL,
-        paddingHorizontal: scaledPaddingH,
-        height: scaledHeight24,
-      },
-    ];
-    iconSize = 16;
-    typo = 'label_s_medium';
-  }
-
-  const renderOverlay = () => {
-    return (
-      <View
-        style={[
-          styles.chipOverlay,
-          { borderRadius: scaledRadiusL },
-          {
-            borderColor: theme.colors.secondary,
-          },
-        ]}
-      />
-    );
-  };
-
-  return (
-    <View style={[style, styles.wrapper]} accessibilityLabel={componentId}>
-      <TouchableOpacity
-        onPress={onPress}
-        style={[
-          itemContainerStyle,
-          chipStyle,
-          {
-            backgroundColor: bgColor,
-            maxWidth: '100%',
-            flexShrink: 1,
-          },
-        ]}
-        accessibilityLabel={componentId + '|touch'}
-        accessibilityState={{ checked: selected, ...accessibilityState }}
-      >
-        {!!iconLeft && (
-          <Icon
-            source={iconLeft}
-            color={iconLeftColorSelected}
-            size={iconSize}
-            style={{
-              width: scaledSize16,
-              height: scaledSize16,
-              marginRight: label ? Spacing.XS : scaledMargin,
-            }}
-          />
-        )}
-        {label && (
-          <Text
-            typography={typo}
-            color={textColor}
-            numberOfLines={1}
-            style={{
-              flexShrink: 1,
-            }}
-            accessibilityLabel={componentId + '|text'}
-          >
-            {label}
-          </Text>
-        )}
-        {!!iconRight && (
-          <Icon
-            source={iconRight}
-            color={iconRightColorSelected}
-            size={iconSize}
-            style={[
-              styles.icon,
-              {
-                marginLeft: scaledMargin,
-              },
-            ]}
-            accessibilityLabel={componentId + '|icon'}
-          />
-        )}
-        {selected && renderOverlay()}
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export { Chip };
-export type { ChipProps };

package/src/libs/Chip/package.json

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

@@ -1,20 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  wrapper: { flexDirection: 'row' },
-  chip: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  chipOverlay: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: -1,
-    borderWidth: 2,
-  },
-  icon: {},
-});

package/src/libs/Chip/types.ts

@@ -1,72 +0,0 @@
-import {AccessibilityState, ViewStyle} from 'react-native';
-
-/**
- * Props for the Chip component. A Chip is a compact element that represents an input, attribute, or action.
- */
-export type ChipProps = {
-  /**
-   * The text to be displayed on the chip. This is typically a brief piece of information like a tag.
-   */
-  label?: string;
-
-  /**
-   * Optional. The name of the icon to be displayed on the left side of the chip's label.
-   * If not provided, no icon is rendered on the left.
-   */
-  iconLeft?: string;
-
-  /**
-   * Optional. The name of the icon to be displayed on the right side of the chip's label.
-   * If not provided, no icon is rendered on the right.
-   */
-  iconRight?: string;
-
-  /**
-   * Optional. Indicates whether the chip is selected. A selected chip may have a different style or icon.
-   * Defaults to `false` if not provided.
-   */
-  selected?: boolean;
-
-  /**
-   * Optional. Custom styles to apply to the Chip component. Can be a single style or an array of styles.
-   */
-  style?: ViewStyle | ViewStyle[];
-
-  /**
-   * Optional. A callback function triggered when the chip is pressed. This makes the chip act as a touchable element.
-   */
-  onPress?: () => void;
-
-  /**
-   * Optional. Specifies the size of the chip, influencing its padding and font size. Can be 'small' or 'large'.
-   * If not provided, a standard size is used.
-   */
-  size?: 'small' | 'large';
-
-  /**
-   * Optional. Specifies the color of the left icon. If not provided, a default icon color may be used.
-   */
-  iconLeftColor?: string;
-
-  /**
-   * Optional. Specifies the color of the right icon. If not provided, a default icon color may be used.
-   */
-  iconRightColor?: string;
-
-  itemContainerStyle?: ViewStyle;
-
-  /**
-   * Optional. Assign accessibility label to the chip for automated testing.
-   */
-  accessibilityLabel?: string;
-
-  /**
-   * Optional. Accessibility state for the chip.
-   */
-  accessibilityState?: AccessibilityState;
-
-  /**
-   * Optional. Whether to change background for the chip.
-   */
-  backgroundColor?: string;
-};

package/src/libs/Collapse/index.tsx

@@ -1,305 +0,0 @@
-import React, {
-  useContext,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  Animated,
-  LayoutAnimation,
-  Platform,
-  ScrollView,
-  Text as RNText,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native';
-import {
-  ApplicationContext,
-  Icon,
-  Image,
-  MiniAppContext,
-  useScaleSize,
-  ScreenContext,
-  Tag,
-  Text,
-} from '@momo-kits/foundation';
-import { CollapseHandle, CollapseImageSize, CollapseProps } from './types';
-import styles from './styles';
-
-if (Platform.OS === 'android') {
-  if (UIManager.setLayoutAnimationEnabledExperimental) {
-    UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}
-
-const Collapse = React.forwardRef<CollapseHandle, CollapseProps>(
-  (
-    {
-      image,
-      title = 'Title',
-      description,
-      onPress,
-      showBorder,
-      children,
-      imageSize = 24,
-      subTitle,
-      tagProps,
-      scrollEnabled = false,
-      scrollContentMaxHeight = 240,
-      titleSize = 'medium',
-      useBackgroundCollapseButton = false,
-      headerAlign = 'flex-start',
-      expandDefault = false,
-      disabledAnimated = false,
-      accessibilityLabel,
-      nestedScrollEnabled = false,
-      backgroundColor,
-      titleColor,
-    },
-    ref,
-  ) => {
-    const { theme } = useContext(ApplicationContext);
-    const [expanded, setExpanded] = useState(expandDefault);
-
-    // Dynamic font sizes using useScaleSize
-    const fontSize14 = useScaleSize(14);
-    const lineHeight20 = useScaleSize(20);
-    const fontSize16 = useScaleSize(16);
-    const lineHeight22 = useScaleSize(22);
-    const fontSize18 = useScaleSize(18);
-    const lineHeight26 = useScaleSize(26);
-
-    const app = useContext<any>(MiniAppContext);
-    const screen = useContext<any>(ScreenContext);
-    const componentName = 'Collapse';
-
-    const componentId = useMemo(() => {
-      if (accessibilityLabel) {
-        return accessibilityLabel;
-      }
-      return `${app.appId}/${app.code}/${screen.screenName}/${componentName}/${title}`;
-    }, [componentName, accessibilityLabel, app, screen, title]);
-
-    const iconSource = `arrow_chevron_${expanded ? 'up' : 'down'}_small`;
-
-    const borderWidth = showBorder ? 1 : 0;
-    const borderColor = theme.colors.border.default;
-
-    const getTitleTypo = () => {
-      switch (titleSize) {
-        case 'small': {
-          return {
-            fontSize: fontSize14,
-            lineHeight: lineHeight20,
-          };
-        }
-        case 'medium': {
-          return {
-            fontSize: fontSize16,
-            lineHeight: lineHeight22,
-          };
-        }
-        case 'large': {
-          return {
-            fontSize: fontSize18,
-            lineHeight: lineHeight26,
-          };
-        }
-        default: {
-          return {
-            fontSize: fontSize14,
-            lineHeight: lineHeight20,
-          };
-        }
-      }
-    };
-
-    useImperativeHandle(ref, () => ({
-      setExpanded,
-      expanded,
-    }));
-
-    const renderInfo = () => {
-      if (subTitle) {
-        return (
-          <Text
-            numberOfLines={1}
-            typography={'body_default_regular'}
-            accessibilityLabel={componentId + '|sub-title-text'}
-          >
-            {subTitle}
-          </Text>
-        );
-      }
-      if (tagProps) {
-        return (
-          <Tag
-            {...tagProps}
-            // accessibilityLabelText={componentId + '|tag-text'}
-            // accessibilityLabelContainer={componentId + '|tag-container'}
-          />
-        );
-      }
-
-      return null;
-    };
-
-    const onPressHeader = () => {
-      onPress?.(expanded);
-
-      LayoutAnimation.configureNext({
-        duration: 300,
-        create: {
-          type: LayoutAnimation.Types.easeInEaseOut,
-          property: LayoutAnimation.Properties.opacity,
-        },
-        update: { type: LayoutAnimation.Types.easeInEaseOut },
-      });
-
-      setExpanded(!expanded);
-    };
-
-    const renderCollapseIcon = () => {
-      if (useBackgroundCollapseButton) {
-        return (
-          <View
-            style={[
-              styles.iconWrapper,
-              {
-                backgroundColor: theme.colors.background.tonal,
-              },
-            ]}
-          >
-            <Icon
-              color={theme.colors.primary}
-              source={iconSource}
-              accessibilityLabel={componentId + '|icon'}
-            />
-          </View>
-        );
-      }
-      return (
-        <Icon
-          source={iconSource}
-          style={styles.icon}
-          accessibilityLabel={componentId + '|icon'}
-        />
-      );
-    };
-
-    const renderHeader = () => {
-      return (
-        <TouchableOpacity
-          activeOpacity={1}
-          onPress={onPressHeader}
-          style={[
-            styles.header,
-            {
-              alignItems: headerAlign,
-            },
-          ]}
-          accessibilityLabel={componentId + '|touch'}
-          accessibilityState={{ checked: expanded }}
-        >
-          {!!image && (
-            <Image
-              source={{ uri: image }}
-              style={[styles.image, { width: imageSize, height: imageSize }]}
-              accessibilityLabel={componentId + '|img'}
-            />
-          )}
-          <View style={[styles.headerContent]}>
-            <View style={styles.flex2}>
-              <RNText
-                style={[
-                  getTitleTypo(),
-                  {
-                    fontFamily: `${theme.font}-Semibold`,
-                    color: titleColor ?? theme.colors.text.default,
-                  },
-                ]}
-                allowFontScaling={false}
-                accessibilityLabel={componentId + '|text'}
-              >
-                {title}
-              </RNText>
-              {!!description && (
-                <Text
-                  numberOfLines={2}
-                  typography={'body_default_regular'}
-                  accessibilityLabel={componentId + '|description-text'}
-                >
-                  {description}
-                </Text>
-              )}
-            </View>
-            <View style={[styles.infoWrap, { justifyContent: headerAlign }]}>
-              {renderInfo()}
-            </View>
-          </View>
-          {renderCollapseIcon()}
-        </TouchableOpacity>
-      );
-    };
-
-    const renderContent = () => {
-      if (scrollEnabled) {
-        const ParentComponent = disabledAnimated
-          ? ScrollView
-          : Animated.ScrollView;
-        return (
-          <ParentComponent
-            scrollEnabled={scrollEnabled}
-            showsVerticalScrollIndicator={false}
-            nestedScrollEnabled={nestedScrollEnabled}
-            style={[
-              scrollEnabled && {
-                maxHeight: scrollContentMaxHeight,
-              },
-              expanded && {
-                borderTopWidth: borderWidth,
-                borderColor,
-              },
-            ]}
-          >
-            {expanded && children}
-          </ParentComponent>
-        );
-      }
-
-      const ParentComponent = disabledAnimated ? View : Animated.View;
-      return (
-        <ParentComponent
-          style={[
-            expanded && {
-              borderTopWidth: borderWidth,
-              borderColor,
-            },
-          ]}
-        >
-          {expanded && children}
-        </ParentComponent>
-      );
-    };
-    return (
-      <View
-        style={[
-          styles.root,
-          {
-            borderWidth,
-            borderColor,
-            backgroundColor: backgroundColor ?? theme.colors.background.surface,
-          },
-        ]}
-        accessibilityLabel={componentId}
-      >
-        {renderHeader()}
-        {renderContent()}
-      </View>
-    );
-  },
-);
-
-export { Collapse };
-export type { CollapseProps, CollapseImageSize };

package/src/libs/Collapse/package.json

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

@@ -1,37 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Radius, Spacing} from '@momo-kits/foundation';
-
-export default StyleSheet.create({
-  image: {
-    borderRadius: Radius.XS,
-    marginRight: Spacing.S,
-  },
-  header: {
-    flexDirection: 'row',
-    paddingHorizontal: Spacing.M,
-    paddingVertical: Spacing.S,
-    borderRadius: Radius.S,
-  },
-  headerContent: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  infoWrap: {maxWidth: 200, alignItems: 'flex-end', marginLeft: Spacing.S},
-  flex2: {flex: 2},
-  iconWrapper: {
-    width: 24,
-    height: 24,
-    borderRadius: Radius.M,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginLeft: Spacing.S,
-  },
-  icon: {
-    marginLeft: Spacing.S,
-  },
-  root: {
-    borderRadius: Radius.S,
-    overflow: 'hidden',
-  },
-});