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

package/src/foundations/Badge/index.tsx

@@ -0,0 +1,8 @@
+import Badge from './Badge';
+import BadgeDot from './BadgeDot';
+import BadgeRibbon from './BadgeRibbon';
+import BadgeDotAnimation from './BadgeDotAnimation';
+import {BadgeProps, BadgeDotProps, BadgeRibbonProps} from './types';
+
+export {Badge, BadgeRibbon, BadgeDot, BadgeDotAnimation};
+export type {BadgeProps, BadgeDotProps, BadgeRibbonProps};

package/src/foundations/Badge/styles.ts

@@ -0,0 +1,125 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
+import {scaleSize} from '../Text';
+
+const DOT_SIZE = 16;
+
+const DOT_SMALL_SIZE = 10;
+
+export default StyleSheet.create({
+  badge: {
+    paddingHorizontal: Spacing.XS,
+    borderRadius: Radius.M,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: scaleSize(16) - 2,
+    minWidth: scaleSize(16) - 2,
+    flexDirection: 'row',
+    alignSelf: 'baseline',
+  },
+  badgeContainer: {
+    borderRadius: Radius.M,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: scaleSize(16),
+    minWidth: scaleSize(16),
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+    backgroundColor: 'transparent',
+    alignSelf: 'baseline',
+  },
+  dotAnimationContainer: {
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dot: {
+    width: DOT_SIZE - 2,
+    height: DOT_SIZE - 2,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SIZE / 2,
+  },
+  dotSmall: {
+    width: DOT_SMALL_SIZE - 2,
+    height: DOT_SMALL_SIZE - 2,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SMALL_SIZE / 2,
+  },
+  dotContainer: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+    borderRadius: DOT_SIZE / 2,
+    backgroundColor: 'transparent',
+  },
+  dotSmallContainer: {
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+    borderRadius: DOT_SIZE / 2,
+    backgroundColor: 'transparent',
+  },
+  dotAnimation: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SIZE / 2,
+    borderWidth: 0,
+  },
+  dotAnimationSmall: {
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SMALL_SIZE / 2,
+    borderWidth: 0,
+  },
+  wave: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SIZE / 2,
+    opacity: 0,
+    position: 'absolute',
+    borderWidth: 0,
+  },
+  waveSmall: {
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SMALL_SIZE / 2,
+    borderWidth: 0,
+    position: 'absolute',
+  },
+  ribbon: {
+    alignSelf: 'baseline',
+    flexDirection: 'row',
+    height: 20,
+    overflow: 'hidden',
+  },
+  ribbonContent: {
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomRightRadius: 12,
+    borderTopRightRadius: 12,
+    paddingRight: 6,
+  },
+  ribbonSkewContent: {
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ribbonLabel: {
+    color: Colors.black_01,
+  },
+  skew: {width: 8, height: 16},
+  tail: {width: 5, height: 20},
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});

package/src/foundations/Badge/types.ts

@@ -0,0 +1,68 @@
+import {ViewStyle} from 'react-native';
+
+/**
+ * Props for a general Badge component. It can display a wide range of badges including simple labels, numbers, or dots.
+ */
+export type BadgeProps = {
+  /**
+   * Optional. The text to display on the badge. This could be a number or string, depending on the badge's purpose.
+   */
+  label?: string | number;
+
+  /**
+   * Optional. Custom styles to apply to the badge component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+
+  /**
+   * Optional. Custom background badge.
+   */
+  backgroundColor?: string;
+
+  /**
+   *
+   */
+  accessibilityLabel?: string;
+};
+
+/**
+ * Props for a BadgeDot component. It specifically represents a dot-style badge, typically used for notification indicators.
+ */
+export type BadgeDotProps = {
+  /**
+   * Optional. The size of the dot, either 'small' or 'large'. This allows for better visual alignment with different UI elements.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Optional. Custom styles to apply to the badge dot component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+};
+
+/**
+ * Props for a BadgeRibbon component. It represents a more specialized badge in the shape of a ribbon, allowing for placement around containers.
+ */
+export type BadgeRibbonProps = {
+  /**
+   * The text to display on the ribbon-style badge. Unlike other badges, ribbons typically carry more descriptive text.
+   */
+  label: string;
+
+  /**
+   * Optional. Determines the placement of the ribbon on its parent container. The position can be any corner of the container.
+   * Defaults to 'top_right' if not specified.
+   */
+  position?: 'top_right' | 'top_left' | 'bottom_right' | 'bottom_left';
+
+  /**
+   * Optional. If true, the edges of the ribbon badge will be rounded. This is purely a stylistic choice.
+   * Defaults to `false` if not provided, resulting in a flat-edged ribbon.
+   */
+  isRound?: boolean;
+
+  /**
+   * Optional. Custom styles to apply to the ribbon badge component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+};

package/src/foundations/Button/index.tsx

@@ -0,0 +1,371 @@
+import React, { FC, useContext, useRef } from 'react';
+import {
+  Animated,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewStyle,
+  GestureResponderEvent,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useComponentId } from '../Application';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+  SkeletonContext,
+} from '../Context';
+import { Text } from '../Text';
+import { Typography } from '../Text/types';
+import { Colors, Spacing } from '../Consts';
+import styles from './styles';
+import { Icon } from '../Icon';
+import { Skeleton } from '../Skeleton';
+import LottieView from 'lottie-react-native';
+import Reanimated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
+
+export interface ButtonProps extends TouchableOpacityProps {
+  /**
+   * Defines the visual style of the button.
+   */
+  type?:
+    | 'primary'
+    | 'secondary'
+    | 'tonal'
+    | 'outline'
+    | 'danger'
+    | 'text'
+    | 'disabled';
+
+  /**
+   *  Defines the size of the button.
+   */
+  size?: 'large' | 'medium' | 'small';
+  full?: boolean;
+  iconRight?: string;
+  iconLeft?: string;
+  title: string;
+  tintColor?: string;
+  loading?: boolean;
+  onPress: () => void;
+  params?: any;
+}
+
+const Button: FC<ButtonProps> = ({
+  type = 'primary',
+  size = 'large',
+  tintColor = null,
+  full = true,
+  iconRight,
+  iconLeft,
+  loading = false,
+  title = 'Button',
+  params,
+  accessibilityState,
+  ...rest
+}) => {
+  const { theme, config } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+  const skeleton = useContext(SkeletonContext);
+  const animationRef = useRef<LottieView>(null);
+  const pressAnim = useSharedValue(0);
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  const componentName = 'Button';
+  const { componentId } = useComponentId(
+    `${componentName}/${title}`,
+    rest.accessibilityLabel,
+  );
+
+  /**
+   * animate press in (Reanimated)
+   */
+  const animateIn = (event: GestureResponderEvent) => {
+    rest?.onPressIn?.(event);
+    pressAnim.value = withTiming(1, { duration: 100 });
+  };
+
+  /**
+   * animate press out (Reanimated)
+   */
+  const animateOut = (event: GestureResponderEvent) => {
+    rest?.onPressOut?.(event);
+    pressAnim.value = withTiming(0, { duration: 100 });
+  };
+
+  /**
+   * determine loading position
+   * @param left
+   * @param right
+   * @param isLeft
+   */
+  const shouldShowLoading = (
+    left?: string,
+    right?: string,
+    isLeft?: boolean,
+  ): boolean => {
+    const hasLeft = !!left;
+    const hasRight = !!right;
+
+    const loadingOnLeft = (!hasLeft && !hasRight) || (hasLeft && !hasRight);
+
+    return isLeft === loadingOnLeft;
+  };
+
+  /**
+   * export size style
+   */
+  const getSizeStyle = () => {
+    const styleSheet: { [key: string]: any } = styles;
+    return styleSheet[size ?? 'small'];
+  };
+
+  /**
+   * export type style
+   */
+  const getTypeStyle = () => {
+    switch (type) {
+      case 'disabled':
+        return {
+          backgroundColor: theme.colors.background.disable,
+        };
+      case 'primary':
+        return { backgroundColor: theme.colors.primary };
+      case 'secondary':
+        return {
+          backgroundColor: theme.colors.background.surface,
+          borderWidth: 1,
+          borderColor: theme.colors.border.default,
+        };
+      case 'outline':
+        return {
+          backgroundColor: theme.colors.background.surface,
+          borderWidth: 1,
+          borderColor: color ?? theme.colors.primary,
+        };
+      case 'tonal':
+        return {
+          backgroundColor: theme.colors.background.tonal,
+        };
+      case 'danger':
+        return {
+          backgroundColor: theme.colors.error.primary,
+        };
+      case 'text':
+        return {};
+      default:
+        return { backgroundColor: theme.colors.primary };
+    }
+  };
+
+  /**
+   * export icon size
+   */
+  const getIconSize = () => {
+    switch (size) {
+      case 'large':
+        return 24;
+      case 'medium':
+      case 'small':
+        return 16;
+      default:
+        return 24;
+    }
+  };
+
+  /**
+   * export icon space
+   */
+  const getIconSpace = () => {
+    switch (size) {
+      case 'large':
+      case 'medium':
+        return 8;
+      case 'small':
+        return 4;
+      default:
+        return 8;
+    }
+  };
+
+  /**
+   * export typography style
+   */
+  const getTypography = (): Typography => {
+    switch (size) {
+      case 'large':
+        return 'action_default_bold';
+      case 'medium':
+        return 'action_s_bold';
+      case 'small':
+        return 'action_xs_bold';
+      default:
+        return 'action_default_bold';
+    }
+  };
+
+  /**
+   * export text color
+   */
+  const getTextColor = (): string => {
+    switch (type) {
+      case 'disabled':
+        return theme.colors.text.disable;
+      case 'primary':
+        return Colors.black_01;
+      case 'secondary':
+        return theme.colors.text.default;
+      case 'outline':
+        return color ?? theme.colors.primary;
+      case 'tonal':
+        return theme.colors.primary;
+      case 'danger':
+        return Colors.black_01;
+      case 'text':
+        return color ?? theme.colors.primary;
+      default:
+        return Colors.black_01;
+    }
+  };
+
+  /**
+   * render title
+   */
+  const renderTitle = () => {
+    const typography = getTypography();
+    const textColor = getTextColor();
+    return (
+      <Text typography={typography} color={textColor} numberOfLines={1}>
+        {title}
+      </Text>
+    );
+  };
+
+  /**
+   * render icon
+   * @param position
+   */
+  const renderIcon = (position: 'left' | 'right') => {
+    const iconSize = getIconSize();
+    const space = getIconSpace();
+    const textColor = tintColor ?? getTextColor();
+
+    const isLeft = position === 'left';
+    const icon = isLeft ? iconLeft : iconRight;
+
+    const style = [
+      isLeft ? styles.leading : styles.trailing,
+      {
+        width: iconSize,
+        height: iconSize,
+        marginRight: isLeft ? space : 0,
+        marginLeft: isLeft ? 0 : space,
+      },
+    ];
+
+    const showLoading = shouldShowLoading(iconLeft, iconRight, isLeft);
+
+    if (loading && showLoading) {
+      return (
+        <LottieView
+          ref={animationRef}
+          source={require('../Assets/lottie_circle_loader.json')}
+          autoPlay
+          loop
+          colorFilters={[
+            { keypath: 'loading 2.Ellipse 1.Stroke 1', color: textColor },
+            { keypath: 'loading 3.Ellipse 1.Stroke 1', color: textColor },
+            { keypath: 'base pink 2.Ellipse 1.Stroke 1', color: textColor },
+          ]}
+          style={[style, { borderRadius: Spacing.M }]}
+        />
+      );
+    }
+
+    if (icon) {
+      return (
+        <View style={style}>
+          <Icon color={textColor} source={icon} size={iconSize} />
+        </View>
+      );
+    }
+
+    return null;
+  };
+
+  const { gradient, color } = config?.navigationBar?.buttonColors ?? {};
+  const isDisabled = type === 'disabled' || loading;
+  let gradientPros;
+  if (gradient?.length > 0 && type === 'primary') {
+    gradientPros = {
+      colors: gradient,
+      start: { x: 1, y: 0.5 },
+      end: { x: 0, y: 0.5 },
+    };
+  }
+
+  const sizeStyle = getSizeStyle();
+  const typeStyle = getTypeStyle();
+  const containerStyle: ViewStyle = StyleSheet.flatten([
+    full && { width: '100%' },
+    loading && { opacity: 0.75 },
+  ]);
+  const buttonStyle = StyleSheet.flatten([sizeStyle, typeStyle]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      marginHorizontal: pressAnim.value * 2,
+    };
+  });
+
+  if (skeleton?.loading) {
+    return <Skeleton style={[buttonStyle, styles.skeleton]} />;
+  }
+
+  return (
+    <ComponentContext.Provider
+      value={{
+        componentName,
+        componentId,
+        params,
+        action: 'click',
+      }}
+    >
+      <TouchableOpacity
+        {...rest}
+        accessibilityLabel={componentId}
+        accessibilityRole="button"
+        accessibilityState={{
+          disabled: isDisabled,
+          busy: loading,
+          ...accessibilityState,
+        }}
+        disabled={isDisabled}
+        activeOpacity={0.75}
+        style={[containerStyle, showBaseLineDebug && styles.debugBaseLine]}
+        onPressIn={animateIn}
+        onPressOut={animateOut}
+      >
+        <Reanimated.View style={[buttonStyle, animatedStyle]}>
+        {renderIcon('left')}
+          {renderTitle()}
+          {renderIcon('right')}
+          {gradientPros && (
+            <AnimationLinear {...gradientPros} style={styles.gradientView} />
+          )}
+          {gradientPros && <View style={styles.strokeView} />}
+        </Reanimated.View>
+      </TouchableOpacity>
+    </ComponentContext.Provider>
+  );
+};
+
+export { Button };

package/src/foundations/Button/styles.ts

@@ -0,0 +1,65 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../Consts';
+
+export default StyleSheet.create({
+  large: {
+    height: 48,
+    borderRadius: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    minWidth: 128,
+  },
+  medium: {
+    height: 36,
+    borderRadius: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    minWidth: 80,
+  },
+  small: {
+    height: 28,
+    borderRadius: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    minWidth: 60,
+  },
+  leading: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  trailing: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gradientView: {
+    position: 'absolute',
+    zIndex: -1,
+    borderRadius: 8,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  strokeView: {
+    position: 'absolute',
+    top: 2,
+    bottom: 2,
+    left: 2,
+    right: 2,
+    borderRadius: 6,
+    borderWidth: 0.5,
+    borderColor: '#FFF9E1',
+  },
+  skeleton: {
+    paddingHorizontal: 0,
+  },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});