@momo-kits/foundation 0.161.1-beta.1 → 0.161.2-beta.1

package/Badge/Badge.tsx

@@ -18,8 +18,8 @@ const Badge: FC<BadgeProps> = ({
   const { componentId } = useComponentId('Badge', accessibilityLabel);
   const scaledSize = useScaleSize(16);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
-
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  
   const styles = StyleSheet.create({
     badge: {
       paddingHorizontal: Spacing.XS,
@@ -84,13 +84,7 @@ const Badge: FC<BadgeProps> = ({
   }
 
   return (
-    <View
-      style={[
-        style,
-        styles.badgeContainer,
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-    >
+    <View style={[style, styles.badgeContainer, showBaseLineDebug && styles.debugBaseLine]}>
       <View
         style={[styles.badge, { backgroundColor: badgeColor }]}
         accessibilityLabel={componentId}

package/Badge/BadgeDot.tsx

@@ -9,7 +9,7 @@ const BadgeDot: FC<BadgeDotProps> = ({ size = 'large', style }) => {
   let dotStyle;
   let dotContainerStyle;
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   if (size === 'large') {
     dotStyle = styles.dot;

package/Badge/BadgeDotAnimation.tsx

@@ -1,93 +1,75 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, View } from 'react-native';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
 import { BadgeDotProps } from './types';
 import styles from './styles';
 
 const DURATION = 500;
 
 const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
-  // Refs for animated values
-  const scaleAnim = useRef(new Animated.Value(1)).current;
-  const waveScaleAnim = useRef(new Animated.Value(1)).current;
-  const waveOpacityAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useSharedValue(1);
+  const waveScaleAnim = useSharedValue(1);
+  const waveOpacityAnim = useSharedValue(0);
 
   const dotStyle =
     size === 'small' ? styles.dotAnimationSmall : styles.dotAnimation;
   const waveStyle = size === 'small' ? styles.waveSmall : styles.wave;
 
   useEffect(() => {
-    // Infinite loop animation for the scale and wave effect
-    const animation = Animated.loop(
-      Animated.parallel([
-        // Dot pulse animation
-        Animated.sequence([
-          Animated.spring(scaleAnim, {
-            toValue: 1, // Scale up slightly
-            friction: 5, // Controls the "bounciness" of the spring
-            tension: 30, // Controls the "stiffness" of the spring
-            useNativeDriver: true,
-          }),
-          Animated.spring(scaleAnim, {
-            toValue: 1.1,
-            friction: 5,
-            tension: 30,
-            useNativeDriver: true,
-          }),
-        ]), // Wave animation
-        Animated.sequence([
-          Animated.timing(waveScaleAnim, {
-            toValue: 2.5,
-            duration: DURATION * 3,
-            useNativeDriver: true,
-          }),
-          Animated.timing(waveScaleAnim, {
-            toValue: 1, // Reset wave size
-            duration: 0,
-            useNativeDriver: true,
-          }),
-        ]), // Wave opacity animation
-        Animated.sequence([
-          Animated.timing(waveOpacityAnim, {
-            toValue: 0.3, // Wave becomes visible
-            duration: DURATION * 2,
-            useNativeDriver: true,
-          }),
-          Animated.timing(waveOpacityAnim, {
-            toValue: 0, // Wave fades out
-            duration: DURATION,
-            useNativeDriver: true,
-          }),
-        ]),
-      ]),
-    );
-    animation.start();
+    const springCfg = { damping: 5, stiffness: 30, mass: 1 };
 
+    scaleAnim.value = withRepeat(
+      withSequence(
+        withSpring(1, springCfg),
+        withSpring(1.1, springCfg),
+      ),
+      -1,
+      false,
+    );
+    waveScaleAnim.value = withRepeat(
+      withSequence(
+        withTiming(2.5, { duration: DURATION * 3 }),
+        withTiming(1, { duration: 0 }),
+      ),
+      -1,
+      false,
+    );
+    waveOpacityAnim.value = withRepeat(
+      withSequence(
+        withTiming(0.3, { duration: DURATION * 2 }),
+        withTiming(0, { duration: DURATION }),
+      ),
+      -1,
+      false,
+    );
     return () => {
-      animation.stop();
+      cancelAnimation(scaleAnim);
+      cancelAnimation(waveScaleAnim);
+      cancelAnimation(waveOpacityAnim);
     };
   }, [scaleAnim, waveOpacityAnim, waveScaleAnim]);
 
+  const waveAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: waveScaleAnim.value }],
+    opacity: waveOpacityAnim.value,
+  }));
+
+  const dotAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scaleAnim.value }],
+  }));
+
   return (
     <View style={[styles.dotAnimationContainer, style]}>
-      {/* Wave Animation */}
-      <Animated.View
-        style={[
-          waveStyle,
-          {
-            transform: [{ scale: waveScaleAnim }],
-            opacity: waveOpacityAnim,
-          },
-        ]}
-      />
-      {/* Dot Animation */}
-      <Animated.View
-        style={[
-          dotStyle,
-          {
-            transform: [{ scale: scaleAnim }],
-          },
-        ]}
-      />
+      <Animated.View style={[waveStyle, waveAnimatedStyle]} />
+      <Animated.View style={[dotStyle, dotAnimatedStyle]} />
     </View>
   );
 };

package/Badge/BadgeRibbon.tsx

@@ -19,7 +19,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
   const isRight = position === 'top_right' || position === 'bottom_right';
   const isUpTail = position === 'bottom_left' || position === 'top_right';
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const ribbonRotate = useMemo(() => (isRight ? '180deg' : '0deg'), [isRight]);
   const textRotate = ribbonRotate;

package/Button/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useContext, useRef } from 'react';
 import {
-  Animated,
   StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
@@ -29,8 +28,6 @@ import Reanimated, {
   withTiming,
 } from 'react-native-reanimated';
 
-const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
-
 export interface ButtonProps extends TouchableOpacityProps {
   /**
    * Defines the visual style of the button.
@@ -77,7 +74,7 @@ const Button: FC<ButtonProps> = ({
   const animationRef = useRef<LottieView>(null);
   const pressAnim = useSharedValue(0);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const componentName = 'Button';
   const { componentId } = useComponentId(
@@ -355,11 +352,11 @@ const Button: FC<ButtonProps> = ({
         onPressOut={animateOut}
       >
         <Reanimated.View style={[buttonStyle, animatedStyle]}>
-          {renderIcon('left')}
+        {renderIcon('left')}
           {renderTitle()}
           {renderIcon('right')}
           {gradientPros && (
-            <AnimationLinear {...gradientPros} style={styles.gradientView} />
+            <LinearGradient {...gradientPros} style={styles.gradientView} />
           )}
           {gradientPros && <View style={styles.strokeView} />}
         </Reanimated.View>

package/CheckBox/index.tsx

@@ -34,7 +34,7 @@ const CheckBox: FC<CheckBoxProps> = ({
     props.accessibilityLabel,
   );
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   if (haveValue) {
     borderColor = theme.colors.primary;

package/Context/index.ts

@@ -9,6 +9,9 @@ const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
 const SkeletonContext = createContext({ loading: false });
+const ScaleSizeContext = createContext<{ scaleSizeMaxRate?: number }>({
+  scaleSizeMaxRate: undefined,
+});
 const TrackingScopeContext = createContext<{ scopeName?: string }>({
   scopeName: undefined,
 });
@@ -20,4 +23,5 @@ export {
   ComponentContext,
   SkeletonContext,
   TrackingScopeContext,
+  ScaleSizeContext,
 };

package/Icon/index.tsx

@@ -17,7 +17,7 @@ const Icon: React.FC<IconProps> = ({
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
    * get icon source maps or remote http

package/IconButton/index.tsx

@@ -46,7 +46,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
    * get size icon button

package/Image/index.tsx

@@ -28,6 +28,11 @@ const Image: React.FC<ImageProps> = ({
   source,
   loading = true,
   children,
+  onProgress,
+  onLoadStart,
+  onLoad,
+  onLoadEnd,
+  onError,
   ...rest
 }) => {
   const { theme } = useContext(ApplicationContext);
@@ -37,7 +42,7 @@ const Image: React.FC<ImageProps> = ({
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   let accessibilityLabel: any = `img|${getImageName(source)}`;
   if (component?.componentId) {
@@ -84,17 +89,20 @@ const Image: React.FC<ImageProps> = ({
         style,
         showBaseLineDebug && styles.debugBaseLine,
       ]}
-      onProgress={() => {
+      onProgress={event => {
         error.current = false;
         if (status !== 'loading' && loading) {
           setStatus('loading');
         }
+        onProgress?.(event);
       }}
       onLoadStart={() => {
         error.current = false;
+        onLoadStart?.();
       }}
-      onLoad={() => {
+      onLoad={event => {
         error.current = false;
+        onLoad?.(event);
       }}
       onLoadEnd={() => {
         let current: Status = 'success';
@@ -102,9 +110,11 @@ const Image: React.FC<ImageProps> = ({
           current = 'error';
         }
         setStatus(prevState => (prevState !== current ? current : prevState));
+        onLoadEnd?.();
       }}
       onError={() => {
         error.current = true;
+        onError?.();
       }}
     >
       {renderContent()}

package/Input/Input.tsx

@@ -81,7 +81,7 @@ const Input = forwardRef(
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'Input';
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputDropDown.tsx

@@ -43,7 +43,7 @@ const InputDropDown = ({
   const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
   const componentName = 'InputDropDown';
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const { componentId } = useComponentId(
     `${componentName}/${placeholder}`,

package/Input/InputMoney.tsx

@@ -76,7 +76,7 @@ const InputMoney = forwardRef(
     const inputRef = useRef<TextInput>(null);
     const componentName = 'InputMoney';
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputOTP.tsx

@@ -8,13 +8,22 @@ import React, {
   useState,
 } from 'react';
 import {
-  Animated,
   PixelRatio,
   TextInput,
   TextInputFocusEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
 import { useComponentId } from '../Application';
 import { Spacing, Styles } from '../Consts';
 import { useScaleSize, Text } from '../Text';
@@ -32,37 +41,43 @@ import {
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   const DURATION = 300;
   const { theme } = useContext(ApplicationContext);
-  const opacity = useRef(new Animated.Value(0)).current;
+  const opacity = useSharedValue(0);
 
   useEffect(() => {
-    Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: DURATION,
-          useNativeDriver: true,
-        }),
-        Animated.delay(DURATION * 2),
-        Animated.timing(opacity, {
-          toValue: 0,
-          duration: DURATION,
-          useNativeDriver: true,
-        }),
-      ]),
-    ).start();
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: DURATION, easing: Easing.linear }),
+        withDelay(
+          DURATION * 2,
+          withTiming(0, { duration: DURATION, easing: Easing.linear }),
+        ),
+      ),
+      -1,
+      false,
+    );
+    return () => {
+      cancelAnimation(opacity);
+    };
   }, [opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
   const spacingStyle = !isNaN(Number(length)) &&
     index !== Number(length) - 1 && { marginRight: Spacing.L };
 
   return (
     <View style={[Styles.rowCenter, spacingStyle]}>
       <Animated.View
-        style={{
-          height: useScaleSize(12),
-          width: 1,
-          backgroundColor: theme.colors.primary,
-          opacity,
-        }}
+        style={[
+          {
+            height: useScaleSize(12),
+            width: 1,
+            backgroundColor: theme.colors.primary,
+          },
+          animatedStyle,
+        ]}
       />
       <Text color={theme.colors.text.hint} typography={'body_default_regular'}>
         -
@@ -99,7 +114,7 @@ const InputOTP = forwardRef(
 
     const componentName = 'InputOTP';
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputPhoneNumber.tsx

@@ -73,7 +73,7 @@ const InputPhoneNumber = forwardRef(
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'InputPhoneNumber';
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputSearch.tsx

@@ -146,7 +146,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   const context = useContext<any>(MiniAppContext);
   const scaledFontSize = useScaleSize(14);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const [focused, setFocused] = useState(false);
   const [internalText, setInternalText] = useState(defaultValue || '');

package/Input/InputTextArea.tsx

@@ -21,7 +21,7 @@ import { ErrorView, FloatingView, getBorderColor, MAX_LENGTH } from './common';
 import { InputTextAreaProps } from './index';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
-import { useComponentId } from '../Application';
+import { setAutomationID, useComponentId } from '../Application';
 
 const InputTextArea = forwardRef(
   (
@@ -57,7 +57,7 @@ const InputTextArea = forwardRef(
     const context = useContext<any>(MiniAppContext);
     const DEFAULT_HEIGHT = useScaleSize(104);
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
     const scaledFontSize = useScaleSize(14);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
@@ -121,6 +121,8 @@ const InputTextArea = forwardRef(
 
       return (
         <View
+          accessible={false}
+          importantForAccessibility="no"
           style={[
             styles.textAreaWrapper,
             {
@@ -139,11 +141,15 @@ const InputTextArea = forwardRef(
             componentId={componentId}
           />
           <View style={styles.rowArea}>
-            <View style={styles.textAreaView}>
+            <View
+              accessible={false}
+              importantForAccessibility="no"
+              style={styles.textAreaView}
+            >
               <SystemTextInput
                 {...props}
                 ref={inputRef}
-                accessibilityLabel={`${componentId}`}
+                {...setAutomationID(componentId)}
                 accessibilityState={{
                   disabled: disabled,
                   ...props.accessibilityState,