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

package/src/foundations/Popup/types.ts

@@ -1,96 +0,0 @@
-import React from 'react';
-
-export type PopupNotifyProps = {
-  /**
-   * `id`: Optional. id component_name for tracking component.
-   */
-  id?: string;
-  /**
-   * `image`: Optional. Represents the URL or path of the image to be displayed in the PopupNotify component.
-   */
-  image?: string;
-
-  /**
-   * `title`: Represents the title text to be displayed in the PopupNotify component.
-   */
-  title: string;
-
-  /**
-   * `description`: Represents the description text to be displayed in the PopupNotify component.
-   */
-  description?: string | React.ReactNode;
-
-  /**
-   * `error`: Optional. Represents additional error text to be displayed in the PopupNotify component.
-   */
-  error?: string;
-
-  /**
-   * `secondary`: Optional. Represents the secondary action that can be performed from the PopupNotify component.
-   */
-  secondary?: PopupAction;
-
-  /**
-   * `primary`: Represents the primary action that can be performed from the PopupNotify component.
-   */
-  primary: PopupAction;
-
-  /**
-   * `buttonDirection`: Optional. Represents the direction in which the action buttons are laid out.
-   * - 'row': Buttons are laid out horizontally.
-   * - 'column': Buttons are laid out vertically.
-   * - 'auto': The layout is automatically determined by title length.
-   */
-  buttonDirection?: PopupActionDirection;
-
-  /**
-   * `onIconClose`: Optional. A callback function that is called when the close icon in the PopupNotify component is pressed.
-   */
-  onIconClose?: () => void;
-
-  /**
-   * onRequestClose on request close for modal
-   */
-  onRequestClose?: (callback?: () => void) => void;
-};
-
-export type PopupPromotionProps = {
-  /**
-   * `id`: Optional. id component_name for tracking component.
-   */
-  id?: string;
-
-  /**
-   * `image`: Represents the URL or path of the image to be displayed in the PopupPromotion component.
-   */
-  image: string;
-
-  /**
-   * `onClose`: Optional. A callback function that is called when the PopupPromotion component is closed.
-   */
-  onIconClose?: () => void;
-
-  /**
-   * `onActionClick`: Optional. A callback function that is called when the PopupPromotion component is closed.
-   */
-  onActionClick?: () => void;
-
-  /**
-   * onRequestClose on request close for modal
-   */
-  onRequestClose?: (callback?: () => void) => void;
-};
-
-type PopupAction = {
-  /**
-   * `title`: Represents the title text of the action button.
-   */
-  title: string;
-
-  /**
-   * `onPress`: A callback function that is called when the action button is pressed.
-   */
-  onPress: () => void;
-};
-
-type PopupActionDirection = 'row' | 'column' | 'auto';

package/src/foundations/Radio/index.tsx

@@ -1,108 +0,0 @@
-import React, { FC, useContext } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-
-import { RadioProps } from './types';
-import { Text } from '../Text';
-import styles from './styles';
-import { useComponentId } from '../Application';
-import {
-  ApplicationContext,
-  ComponentContext,
-  MiniAppContext,
-} from '../Context';
-import { Spacing } from '../Consts';
-
-const Radio: FC<RadioProps> = ({
-  value,
-  groupValue,
-  disabled = false,
-  onChange,
-  label,
-  style,
-  params,
-  accessibilityState,
-  accessibilityLabel,
-  ...props
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-  const selected = value === groupValue;
-  const componentName = 'Radio';
-  const { componentId } = useComponentId(
-    `${componentName}${label ? `/${label}` : ''}`,
-    accessibilityLabel,
-  );
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-  let disabledStyle = {};
-  let checkBoxStyle = {
-    borderWidth: 2,
-    borderColor: theme.colors.text.default,
-  };
-
-  if (selected) {
-    checkBoxStyle = {
-      borderWidth: 6,
-      borderColor: theme.colors.primary,
-    };
-  }
-  if (disabled) {
-    disabledStyle = {
-      borderColor: selected
-        ? theme.colors.background.tonal
-        : theme.colors.text.disable,
-    };
-  }
-
-  return (
-    <ComponentContext.Provider
-      value={{
-        componentName,
-        componentId,
-        params,
-        state: disabled ? 'disabled' : 'enabled',
-        action: 'click',
-      }}
-    >
-      <TouchableOpacity
-        {...props}
-        disabled={disabled}
-        onPress={onChange}
-        style={[
-          style,
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-          showBaseLineDebug && styles.debugBaseLine,
-        ]}
-        accessibilityState={{
-          checked: selected,
-          disabled: disabled as boolean,
-          ...accessibilityState,
-        }}
-        accessibilityLabel={componentId}
-      >
-        <View
-          style={[
-            styles.radio,
-            checkBoxStyle,
-            disabledStyle,
-            { marginRight: label ? Spacing.S : 0 },
-          ]}
-        />
-        {!!label && (
-          <Text
-            typography={'body_default_regular'}
-            style={styles.radioText}
-            accessibilityLabel={componentId + '|text'}
-          >
-            {label}
-          </Text>
-        )}
-      </TouchableOpacity>
-    </ComponentContext.Provider>
-  );
-};
-
-export { Radio };

package/src/foundations/Radio/styles.ts

@@ -1,15 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Radius, Spacing, Colors } from '../Consts';
-
-export default StyleSheet.create({
-  radio: {
-    height: 20,
-    width: 20,
-    borderRadius: Radius.M,
-  },
-  container: { flex: 1 },
-  radioText: {
-    marginRight: Spacing.M,
-  },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});

package/src/foundations/Radio/types.ts

@@ -1,31 +0,0 @@
-import {TouchableOpacityProps} from 'react-native';
-
-export interface RadioProps extends TouchableOpacityProps {
-  /**
-   * `value`: Represents the value associated with the Radio component.
-   * It is used to determine whether the Radio component is selected or not in comparison with the `groupValue`.
-   */
-  value: any;
-
-  /**
-   * `label`: Optional. Represents the text label displayed next to the Radio component.
-   */
-  label?: string;
-
-  /**
-   * `onChange`: A callback function that is called when the value of the Radio component changes.
-   * It is triggered when the user interacts with the Radio component.
-   */
-  onChange: () => void;
-
-  /**
-   * `groupValue`: Represents the value of the selected Radio component within a group of Radio components.
-   * The Radio component for which `value` equals `groupValue` will be selected.
-   */
-  groupValue: any;
-
-  /**
-   * Optional. Params auto tracking component.
-   */
-  params?: any;
-}

package/src/foundations/Skeleton/index.tsx

@@ -1,118 +0,0 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Animated,
-  Easing,
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  UIManager,
-  View,
-} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { SkeletonTypes } from './types';
-import { Colors, Styles } from '../Consts';
-import styles from './styles';
-import { ScreenContext, SkeletonContext } from '../Context';
-
-const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
-  const screen = useContext<any>(ScreenContext);
-  const [width, setWidth] = useState(0);
-  const PRIMARY_COLOR = Colors.black_05;
-  const HIGHLIGHT_COLOR1 = Colors.black_05;
-  const HIGHLIGHT_COLOR2 = Colors.black_03;
-  const beginShimmerPosition = useRef(new Animated.Value(0)).current;
-
-  const shimmerColors = [HIGHLIGHT_COLOR1, HIGHLIGHT_COLOR2, HIGHLIGHT_COLOR1];
-  const linearTranslate = beginShimmerPosition.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-width, width],
-  });
-  const animatedValue = useMemo(() => {
-    return Animated.loop(
-      Animated.timing(beginShimmerPosition, {
-        toValue: 1,
-        duration: 1000,
-        easing: Easing.linear,
-        useNativeDriver: Platform.OS !== 'web',
-      }),
-    );
-  }, [beginShimmerPosition]);
-
-  useEffect(() => {
-    animatedValue.start();
-    screen?.onLoading?.(true);
-    return () => {
-      animatedValue.stop();
-      screen?.onLoading?.(false);
-    };
-  }, [animatedValue, screen]);
-
-  const onLayout = (newWidth: number) => {
-    if (newWidth !== width) {
-      setWidth(newWidth);
-    }
-  };
-
-  return (
-    <View style={[styles.container, style]}>
-      <View
-        onLayout={e => onLayout(e.nativeEvent.layout.width)}
-        style={[Styles.flex, { backgroundColor: PRIMARY_COLOR }]}
-      >
-        <Animated.View
-          style={{
-            transform: [{ translateX: linearTranslate }],
-            width: '60%',
-            height: '100%',
-          }}
-        >
-          <LinearGradient
-            style={[StyleSheet.absoluteFill]}
-            colors={shimmerColors}
-            start={{
-              x: 0,
-              y: 0,
-            }}
-            end={{
-              x: 1,
-              y: 0,
-            }}
-          />
-        </Animated.View>
-      </View>
-    </View>
-  );
-};
-
-const SkeletonProvider: React.FC<{ loading: boolean; children: any }> = ({
-  loading = true,
-  children,
-}) => {
-  const [previous, setPrevious] = useState(loading);
-
-  useEffect(() => {
-    if (previous !== loading) {
-      if (Platform.OS === 'android') {
-        if (UIManager.setLayoutAnimationEnabledExperimental) {
-          UIManager.setLayoutAnimationEnabledExperimental(true);
-        }
-      }
-      LayoutAnimation.configureNext({
-        duration: 500,
-        create: {
-          type: LayoutAnimation.Types.easeInEaseOut,
-          property: LayoutAnimation.Properties.opacity,
-        },
-      });
-      setPrevious(loading);
-    }
-  }, [loading, previous]);
-
-  return (
-    <SkeletonContext.Provider value={{ loading: previous }}>
-      {children}
-    </SkeletonContext.Provider>
-  );
-};
-
-export { Skeleton, SkeletonProvider };

package/src/foundations/Skeleton/styles.ts

@@ -1,5 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-export default StyleSheet.create({
-  container: {overflow: 'hidden', width: '100%', height: '100%'},
-});

package/src/foundations/Skeleton/types.ts

@@ -1,6 +0,0 @@
-export type SkeletonTypes = {
-  /**
-   * Optional. Custom styles for the Skeleton component.
-   */
-  style?: object;
-};

package/src/foundations/Switch/index.tsx

@@ -1,68 +0,0 @@
-import React, { FC, useContext } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { SwitchProps } from './types';
-import styles from './styles';
-import { Colors } from '../Consts';
-import { useComponentId } from '../Application';
-import { ComponentContext, MiniAppContext } from '../Context';
-
-const Switch: FC<SwitchProps> = ({
-  value = false,
-  onChange,
-  disabled = false,
-  style,
-  params,
-  accessibilityLabel,
-  ...props
-}) => {
-  const context = useContext<any>(MiniAppContext);
-  const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
-  const circleAlign = value ? 'flex-end' : 'flex-start';
-  const componentName = 'Switch';
-
-  const { componentId } = useComponentId(componentName, accessibilityLabel);
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  let backgroundColor = value ? Colors.green_03 : Colors.black_07;
-  if (disabled) {
-    backgroundColor = value ? Colors.green_09 : Colors.black_05;
-  }
-
-  return (
-    <ComponentContext.Provider
-      value={{
-        componentName,
-        params,
-        state: disabled ? 'disabled' : 'enabled',
-        action: 'click',
-      }}
-    >
-      <TouchableOpacity
-        {...props}
-        disabled={disabled}
-        accessibilityState={{
-          checked: value,
-          disabled: disabled === null ? false : disabled,
-          ...props.accessibilityState,
-        }}
-        accessibilityLabel={componentId}
-        onPress={() => onChange?.(!value)}
-        style={[
-          style,
-          styles.container,
-          { backgroundColor, alignItems: circleAlign },
-          showBaseLineDebug && styles.debugBaseLine,
-        ]}
-      >
-        <View
-          style={[styles.circle, { backgroundColor: circleBackgroundColor }]}
-        >
-          <View style={[styles.circleSmall, { backgroundColor }]} />
-        </View>
-      </TouchableOpacity>
-    </ComponentContext.Provider>
-  );
-};
-
-export { Switch };

package/src/foundations/Switch/styles.ts

@@ -1,25 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Colors } from '../Consts';
-
-export default StyleSheet.create({
-  container: {
-    width: 38,
-    height: 24,
-    borderRadius: 20,
-    justifyContent: 'center',
-    paddingHorizontal: 4,
-  },
-  circle: {
-    width: 14,
-    height: 14,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  circleSmall: {
-    width: 6,
-    height: 6,
-    borderRadius: 4,
-  },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});

package/src/foundations/Switch/types.ts

@@ -1,19 +0,0 @@
-import {TouchableOpacityProps} from 'react-native';
-
-export interface SwitchProps extends TouchableOpacityProps {
-  /**
-   * `value`: Represents whether the Switch component is currently in the 'on' (`true`) or 'off' (`false`) state.
-   */
-  value: boolean;
-
-  /**
-   * `onChange`: A callback function that is called when the value of the Switch component changes.
-   * It receives the new value of the Switch as a parameter.
-   */
-  onChange: (value: boolean) => void;
-
-  /**
-   * Optional. Params auto tracking component.
-   */
-  params?: any;
-}

package/src/foundations/Tag/index.tsx

@@ -1,128 +0,0 @@
-import React, { FC, useContext } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { TagProps } from './types';
-import { Colors, Radius, Spacing } from '../Consts';
-import { Icon } from '../Icon';
-import { Text, useScaleSize } from '../Text';
-import { useComponentId } from '../Application';
-import { MiniAppContext } from '../Context';
-
-const backgroundColor = {
-  default: Colors.black_04,
-  orange: Colors.orange_08,
-  green: Colors.green_08,
-  red: Colors.red_08,
-  blue: Colors.blue_08,
-  grey: Colors.black_04,
-};
-
-const textColor = {
-  default: Colors.black_17,
-  orange: Colors.orange_03,
-  green: Colors.green_03,
-  red: Colors.red_03,
-  blue: Colors.blue_03,
-  grey: Colors.black_12,
-};
-
-const Tag: FC<TagProps> = ({
-  label = 'Label',
-  icon,
-  color = 'default',
-  size = 'large',
-  style,
-  customColor,
-  accessibilityLabel,
-}) => {
-  const context = useContext<any>(MiniAppContext);
-  const scaledHeight24 = useScaleSize(24);
-  const scaledHeight18 = useScaleSize(18);
-
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  const styles = StyleSheet.create({
-    container: {
-      paddingHorizontal: Spacing.S,
-      borderRadius: Radius.S,
-      flexDirection: 'row',
-      height: scaledHeight24,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    mediumContainer: {
-      paddingHorizontal: Spacing.S,
-      borderRadius: Radius.S,
-      height: scaledHeight18,
-      alignItems: 'center',
-      flexDirection: 'row',
-      justifyContent: 'center',
-    },
-    icon: {
-      marginRight: Spacing.XS,
-    },
-    debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-  });
-
-  let labelColor = textColor[color];
-  let tagColor = backgroundColor[color];
-  let sizeStyle = styles.mediumContainer;
-  const componentName = 'Tag';
-
-  const { componentId } = useComponentId(
-    `${componentName}/${label}`,
-    accessibilityLabel,
-  );
-  //Check if custom color is [color]_03 (only check in dev mode)
-  const validateCustomColor = (color: string) => {
-    if (__DEV__) {
-      const colorCore: { [key: string]: string } = Colors;
-      const primaryColors = Object.keys(Colors)
-        .map(i => {
-          if (i.includes('_03')) {
-            return colorCore[i];
-          }
-        })
-        .filter(color => color);
-      return primaryColors.includes(color);
-    }
-    return true;
-  };
-
-  if (size === 'large') {
-    sizeStyle = styles.container;
-  }
-  if (customColor && validateCustomColor(customColor)) {
-    labelColor = Colors.black_01;
-    tagColor = customColor;
-  }
-
-  return (
-    <View
-      style={[
-        style,
-        sizeStyle,
-        { backgroundColor: tagColor },
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-      accessibilityLabel={componentId}
-    >
-      {!!icon && (
-        <Icon
-          style={styles.icon}
-          size={16}
-          source={icon as string}
-          color={labelColor}
-        />
-      )}
-      <Text
-        color={labelColor}
-        typography={'label_s_medium'}
-        accessibilityLabel={`${componentId}|text`}
-      >
-        {label}
-      </Text>
-    </View>
-  );
-};
-
-export { Tag };

package/src/foundations/Tag/types.ts

@@ -1,41 +0,0 @@
-import {ViewStyle} from 'react-native';
-
-export type TagProps = {
-  /**
-   * `label`: Represents the text label displayed on the Tag component.
-   */
-  label: string;
-
-  /**
-   * `size`: Optional. Defines the size of the Tag component.
-   * Defaults to 'medium' if not provided.
-   */
-  size?: 'medium' | 'large';
-
-  /**
-   * `icon`: Optional. Represents the name or key of the icon to be displayed in the Tag component.
-   */
-  icon?: string;
-
-  /**
-   * `color`: Optional. Defines the color style of the Tag component.
-   */
-  color?: 'default' | 'orange' | 'green' | 'red' | 'blue' | 'grey';
-
-  /**
-   * `style`: Optional. Used to apply custom styling to the Tag component.
-   * Accepts an object of style properties.
-   */
-  style?: ViewStyle;
-
-  /**
-   * `customColor`: Optional. Represents a custom color string (e.g., hex, rgb, rgba, etc.)
-   * that can be applied to the Tag component.
-   */
-  customColor?: string;
-
-  /**
-   * `accessibilityLabel`: Optional. Represents the accessibility label for the Tag component.
-   */
-  accessibilityLabel?: string;
-};