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

package/src/libs/Chip/index.tsx

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

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

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

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

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

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

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

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

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