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

package/src/foundations/Badge/index.tsx

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

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

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

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

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