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

package/src/foundations/Popup/types.ts

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

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

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

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

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

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

package/src/foundations/Skeleton/types.ts

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

package/src/foundations/Switch/index.tsx

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

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

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

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

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