@momo-kits/foundation 0.157.1-beta.2 → 0.157.1-beta.5-viewboundary-test

package/Application/Components/HeaderRight.tsx

@@ -111,7 +111,7 @@ const HeaderToolkitAction: React.FC<any> = ({
         undefined,
       );
     } else {
-      navigator?.maxApi?.dispatchFunction?.('goHome');
+      navigator?.maxApi?.dispatchFunction?.('dismissAll');
     }
   };
 

package/CheckBox/index.tsx

@@ -1,11 +1,5 @@
-import React, { FC, useContext, useEffect } from 'react';
+import React, { FC, useContext } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import Animated, {
-  interpolateColor,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
 import { CheckBoxProps } from './types';
 import styles from './styles';
 import { useComponentId } from '../Application';
@@ -16,7 +10,6 @@ import {
 } from '../Context';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
-import { getSpringConfig } from '../Animation';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -26,7 +19,6 @@ const CheckBox: FC<CheckBoxProps> = ({
   label,
   indeterminate,
   params,
-  animationSpec,
   accessibilityState,
   ...props
 }) => {
@@ -34,6 +26,8 @@ const CheckBox: FC<CheckBoxProps> = ({
   const context = useContext<any>(MiniAppContext);
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
+  let borderColor = theme.colors.text.default;
+  let backgroundColor = 'transparent';
   const componentName = 'CheckBox';
   const { componentId } = useComponentId(
     `${componentName}${label ? `/${label}` : ''}`,
@@ -42,47 +36,19 @@ const CheckBox: FC<CheckBoxProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const progress = useSharedValue(haveValue ? 1 : 0);
-  const springConfig = animationSpec ?? getSpringConfig('expressive', 'fast');
+  if (haveValue) {
+    borderColor = theme.colors.primary;
+    backgroundColor = theme.colors.primary;
+  }
 
-  useEffect(() => {
-    progress.value = withSpring(haveValue ? 1 : 0, springConfig);
-  }, [haveValue, springConfig.stiffness, springConfig.damping]);
-
-  const boxAnimatedStyle = useAnimatedStyle(() => {
-    const borderColor = disabled
-      ? interpolateColor(
-          progress.value,
-          [0, 1],
-          [theme.colors.border.disable, theme.colors.background.tonal],
-        )
-      : interpolateColor(
-          progress.value,
-          [0, 1],
-          [theme.colors.text.default, theme.colors.primary],
-        );
-    const backgroundColor = disabled
-      ? interpolateColor(
-          progress.value,
-          [0, 1],
-          ['transparent', theme.colors.background.tonal],
-        )
-      : interpolateColor(
-          progress.value,
-          [0, 1],
-          ['transparent', theme.colors.primary],
-        );
-    return {
-      borderColor,
-      backgroundColor,
-      borderWidth: 1,
-    };
-  });
-
-  const iconAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: progress.value,
-    transform: [{ scale: progress.value }],
-  }));
+  if (disabled) {
+    borderColor = theme.colors.border.disable;
+    backgroundColor = 'transparent';
+    if (haveValue) {
+      borderColor = theme.colors.background.tonal;
+      backgroundColor = theme.colors.background.tonal;
+    }
+  }
 
   return (
     <ComponentContext.Provider
@@ -111,17 +77,20 @@ const CheckBox: FC<CheckBoxProps> = ({
           showBaseLineDebug && styles.debugBaseLine,
         ]}
       >
-        <Animated.View style={[styles.checkbox, boxAnimatedStyle]}>
+        <View
+          style={[
+            { borderColor, backgroundColor, borderWidth: 1 },
+            styles.checkbox,
+          ]}
+        >
           {haveValue && (
-            <Animated.View style={iconAnimatedStyle} pointerEvents="none">
-              <Icon
-                color={theme.colors.background.surface}
-                size={20}
-                source={iconSource}
-              />
-            </Animated.View>
+            <Icon
+              color={theme.colors.background.surface}
+              size={20}
+              source={iconSource}
+            />
           )}
-        </Animated.View>
+        </View>
         {!!label && (
           <Text typography={'body_default_regular'} style={styles.label}>
             {label}

package/CheckBox/types.ts

@@ -34,9 +34,4 @@ export interface CheckBoxProps extends TouchableOpacityProps {
    * Optional. Params auto tracking component.
    */
   params?: any;
-
-  /**
-   * Optional. Spring config for check animation.
-   */
-  animationSpec?: import('../Animation').SpringConfig;
 }

package/FoundationList/index.tsx

@@ -1,57 +1,12 @@
-import React, { forwardRef, useCallback } from 'react';
+import React from 'react';
 import { FlashList, FlashListProps } from '@shopify/flash-list';
-import Animated from 'react-native-reanimated';
 import { FlatListProps } from 'react-native';
-import type { FoundationListProps, FoundationListRef } from './types';
 
-type CombinedListProps<ItemT> = Omit<FoundationListProps, 'renderItem'> &
-  FlatListProps<ItemT> &
-  Partial<FlashListProps<ItemT>> & {
-    renderItem?: FlashListProps<ItemT>['renderItem'];
-  };
+type CombinedListProps<ItemT> = FlatListProps<ItemT> &
+  Partial<FlashListProps<ItemT>>;
 
-const FoundationListInner = <ItemT,>(
-  props: CombinedListProps<ItemT>,
-  ref: React.Ref<FoundationListRef>
-) => {
-  const { animationConfig, renderItem: renderItemProp, ...rest } = props;
-
-  const renderItem = useCallback(
-    (args: Parameters<NonNullable<typeof renderItemProp>>[0]) => {
-      const content = renderItemProp?.(args);
-      if (!content) return null;
-
-      if (!animationConfig?.entering && !animationConfig?.exiting) {
-        return content;
-      }
-
-      const entering =
-        typeof animationConfig.entering === 'function'
-          ? animationConfig.entering(args.index)
-          : animationConfig.entering;
-
-      return (
-        <Animated.View
-          entering={entering as any}
-          exiting={animationConfig.exiting as any}
-        >
-          {content}
-        </Animated.View>
-      );
-    },
-    [renderItemProp, animationConfig]
-  );
-
-  const finalRenderItem =
-    animationConfig && renderItemProp ? renderItem : renderItemProp;
-
-  return (
-    <FlashList ref={ref} {...rest} renderItem={finalRenderItem} />
-  );
+const FoundationList = <ItemT,>(props: CombinedListProps<ItemT>) => {
+  return <FlashList {...props} />;
 };
 
-const FoundationList = forwardRef(FoundationListInner) as <ItemT>(
-  props: CombinedListProps<ItemT> & { ref?: React.Ref<FoundationListRef> }
-) => React.ReactElement;
-
 export { FoundationList };

package/FoundationList/types.ts

@@ -1,26 +1,6 @@
 import { FlashListProps, FlashListRef } from '@shopify/flash-list';
 
-/**
- * Animation builder for list item enter/exit.
- * Use Reanimated's FadeInUp, FadeIn, FadeOut, etc.
- */
-export type ListItemAnimationBuilder =
-  | { duration: (ms: number) => any; delay: (ms: number) => any }
-  | ((index: number) => any);
-
-interface FoundationListProps extends FlashListProps<any> {
-  /**
-   * Optional. Animation config for list items.
-   * - entering: Animation when item appears (e.g. FadeInUp.duration(300).delay(index * 40))
-   * - exiting: Animation when item is removed
-   * Note: Call listRef.current?.prepareForLayoutAnimationRender() before inserting/removing items.
-   * Layout transitions (reorder) are not supported by FlashList.
-   */
-  animationConfig?: {
-    entering?: ListItemAnimationBuilder;
-    exiting?: ListItemAnimationBuilder;
-  };
-}
+interface FoundationListProps extends FlashListProps<any> {}
 
 interface FoundationListRef extends FlashListRef<any> {}
 

package/IconButton/index.tsx

@@ -1,15 +1,9 @@
 import React, { useContext } from 'react';
 import {
-  GestureResponderEvent,
   StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
 import {
   ApplicationContext,
   ComponentContext,
@@ -47,30 +41,13 @@ const IconButton: React.FC<IconButtonProps> = ({
   icon,
   size,
   params,
-  onPressIn,
-  onPressOut,
   ...rest
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const pressAnim = useSharedValue(0);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const handlePressIn = (e: GestureResponderEvent) => {
-    onPressIn?.(e);
-    pressAnim.value = withTiming(1, { duration: 100 });
-  };
-
-  const handlePressOut = (e: GestureResponderEvent) => {
-    onPressOut?.(e);
-    pressAnim.value = withTiming(0, { duration: 100 });
-  };
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: 1 - pressAnim.value * 0.1 }],
-  }));
-
   /**
    * get size icon button
    */
@@ -156,13 +133,9 @@ const IconButton: React.FC<IconButtonProps> = ({
         {...rest}
         disabled={type === 'disabled'}
         activeOpacity={activeOpacity}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
         style={[buttonStyle, showBaseLineDebug && styles.debugBaseLine]}
       >
-        <Animated.View style={animatedStyle}>
-          <Icon size={iconSize} source={icon} color={getIconColor()} />
-        </Animated.View>
+        <Icon size={iconSize} source={icon} color={getIconColor()} />
       </TouchableOpacity>
     </ComponentContext.Provider>
   );

package/Radio/index.tsx

@@ -1,12 +1,6 @@
-import React, { FC, useContext, useEffect } from 'react';
-import { TouchableOpacity } from 'react-native';
-import Animated, {
-  interpolate,
-  interpolateColor,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
+import React, { FC, useContext } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
 import { RadioProps } from './types';
 import { Text } from '../Text';
 import styles from './styles';
@@ -17,7 +11,6 @@ import {
   MiniAppContext,
 } from '../Context';
 import { Spacing } from '../Consts';
-import { getSpringConfig } from '../Animation';
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -27,7 +20,6 @@ const Radio: FC<RadioProps> = ({
   label,
   style,
   params,
-  animationSpec,
   accessibilityState,
   accessibilityLabel,
   ...props
@@ -42,33 +34,25 @@ const Radio: FC<RadioProps> = ({
   );
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  let disabledStyle = {};
+  let checkBoxStyle = {
+    borderWidth: 2,
+    borderColor: theme.colors.text.default,
+  };
 
-  const progress = useSharedValue(selected ? 1 : 0);
-  const springConfig = animationSpec ?? getSpringConfig('expressive', 'fast');
-
-  useEffect(() => {
-    progress.value = withSpring(selected ? 1 : 0, springConfig);
-  }, [selected, springConfig.stiffness, springConfig.damping]);
-
-  const radioAnimatedStyle = useAnimatedStyle(() => {
-    const borderWidth = interpolate(progress.value, [0, 1], [2, 6]);
-    const borderColor = disabled
-      ? interpolateColor(
-          progress.value,
-          [0, 1],
-          [theme.colors.text.disable, theme.colors.background.tonal],
-        )
-      : interpolateColor(
-          progress.value,
-          [0, 1],
-          [theme.colors.text.default, theme.colors.primary],
-        );
-    return {
-      borderWidth,
-      borderColor,
-      marginRight: label ? Spacing.S : 0,
+  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
@@ -99,7 +83,14 @@ const Radio: FC<RadioProps> = ({
         }}
         accessibilityLabel={componentId}
       >
-        <Animated.View style={[styles.radio, radioAnimatedStyle]} />
+        <View
+          style={[
+            styles.radio,
+            checkBoxStyle,
+            disabledStyle,
+            { marginRight: label ? Spacing.S : 0 },
+          ]}
+        />
         {!!label && (
           <Text
             typography={'body_default_regular'}

package/Radio/types.ts

@@ -28,9 +28,4 @@ export interface RadioProps extends TouchableOpacityProps {
    * Optional. Params auto tracking component.
    */
   params?: any;
-
-  /**
-   * Optional. Spring config for selection animation.
-   */
-  animationSpec?: import('../Animation').SpringConfig;
 }

package/Switch/index.tsx

@@ -1,22 +1,10 @@
-import React, { FC, useContext, useEffect } from 'react';
+import React, { FC, useContext } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import Animated, {
-  interpolateColor,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
 import { SwitchProps } from './types';
 import styles from './styles';
 import { Colors } from '../Consts';
 import { useComponentId } from '../Application';
-import {
-  ComponentContext,
-  MiniAppContext,
-} from '../Context';
-import { getSpringConfig } from '../Animation';
-
-const THUMB_OFFSET = 16;
+import { ComponentContext, MiniAppContext } from '../Context';
 
 const Switch: FC<SwitchProps> = ({
   value = false,
@@ -24,52 +12,22 @@ const Switch: FC<SwitchProps> = ({
   disabled = false,
   style,
   params,
-  animationSpec,
   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;
 
-  const progress = useSharedValue(value ? 1 : 0);
-
-  const springConfig = animationSpec ?? getSpringConfig('expressive', 'fast');
-
-  useEffect(() => {
-    progress.value = withSpring(value ? 1 : 0, springConfig);
-  }, [value, springConfig.stiffness, springConfig.damping]);
-
-  const trackAnimatedStyle = useAnimatedStyle(() => {
-    const trackColor = disabled
-      ? interpolateColor(
-          progress.value,
-          [0, 1],
-          [Colors.black_05, Colors.green_09]
-        )
-      : interpolateColor(
-          progress.value,
-          [0, 1],
-          [Colors.black_07, Colors.green_03]
-        );
-    return { backgroundColor: trackColor };
-  });
-
-  const thumbAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: progress.value * THUMB_OFFSET }],
-  }));
-
-  const circleBgColor = value ? Colors.black_01 : Colors.black_03;
-  const innerDotColor = disabled
-    ? value
-      ? Colors.green_09
-      : Colors.black_05
-    : value
-      ? Colors.green_03
-      : Colors.black_07;
+  let backgroundColor = value ? Colors.green_03 : Colors.black_07;
+  if (disabled) {
+    backgroundColor = value ? Colors.green_09 : Colors.black_05;
+  }
 
   return (
     <ComponentContext.Provider
@@ -93,23 +51,15 @@ const Switch: FC<SwitchProps> = ({
         style={[
           style,
           styles.container,
-          // { circleBgColor},
+          { backgroundColor, alignItems: circleAlign },
           showBaseLineDebug && styles.debugBaseLine,
         ]}
       >
-        <Animated.View style={[styles.track, trackAnimatedStyle]}>
-          <Animated.View
-            style={[
-              styles.circle,
-              { backgroundColor: circleBgColor },
-              thumbAnimatedStyle,
-            ]}
-          >
-            <View
-              style={[styles.circleSmall, { backgroundColor: innerDotColor }]}
-            />
-          </Animated.View>
-        </Animated.View>
+        <View
+          style={[styles.circle, { backgroundColor: circleBackgroundColor }]}
+        >
+          <View style={[styles.circleSmall, { backgroundColor }]} />
+        </View>
       </TouchableOpacity>
     </ComponentContext.Provider>
   );

package/Switch/styles.ts

@@ -8,13 +8,6 @@ export default StyleSheet.create({
     borderRadius: 20,
     justifyContent: 'center',
     paddingHorizontal: 4,
-    // overflow: 'hidden',
-  },
-  track: {
-    width: 30,
-    height: 24,
-    borderRadius: 12,
-    justifyContent: 'center',
   },
   circle: {
     width: 14,

package/Switch/types.ts

@@ -1,5 +1,4 @@
 import {TouchableOpacityProps} from 'react-native';
-import type {SpringConfig} from '../Animation';
 
 export interface SwitchProps extends TouchableOpacityProps {
   /**
@@ -17,9 +16,4 @@ export interface SwitchProps extends TouchableOpacityProps {
    * Optional. Params auto tracking component.
    */
   params?: any;
-
-  /**
-   * Optional. Spring config for thumb/track animation. Uses default tokens when not provided.
-   */
-  animationSpec?: SpringConfig;
 }

package/ViewBoundary/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { NativeModules, ViewStyle, StyleProp } from 'react-native';
+import { MiniAppContext } from '../Context';
+
+export interface ViewBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  fallbackStyle?: StyleProp<ViewStyle>;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface ViewBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ViewBoundary extends React.Component<ViewBoundaryProps, ViewBoundaryState> {
+  static contextType = MiniAppContext;
+
+  constructor(props: ViewBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ViewBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.props.onError?.(error, errorInfo);
+
+    const context = (this as any).context ?? {};
+
+    try {
+      NativeModules.MiniAppModule?.onJSWidgetCrash({
+        hostId: context.hostId ?? '',
+        appId: context.appId ?? '',
+        code: context.code ?? '',
+        buildNumber: context.buildNumber ?? '',
+        tag: 'ViewBoundary',
+        error: {
+          errorName: error.name,
+          errorMessage: error.message,
+          componentStack: errorInfo?.componentStack?.substring(0, 500) ?? '',
+        },
+      });
+      console.info('[ViewBoundary] onJSWidgetCrash success!');
+    } catch (_e) {
+      console.warn('[ViewBoundary] onJSWidgetCrash failed:', _e);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback !== undefined) {
+        return this.props.fallback;
+      }
+      return null;
+    }
+    return this.props.children;
+  }
+}
+
+export { ViewBoundary };

package/index.ts

@@ -43,9 +43,9 @@ export * from './Loader';
 export * from './Loader/types';
 export * from './Title';
 export * from './Title/types';
-export * from './Animation';
 export * from './Badge';
 export * from './Badge/types';
 export * from './FoundationList';
 export * from './FoundationList/types';
+export * from './ViewBoundary';
 export { TouchableOpacity };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.157.1-beta.2",
+    "version": "0.157.1-beta.5-viewboundary-test",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Animation/index.ts

@@ -1 +0,0 @@
-export * from './tokens';

package/Animation/tokens.ts

@@ -1,117 +0,0 @@
-/**
- * Animation tokens inspired by M3 Material Motion and Motion.dev
- * Spring/timing configs for consistent animation across components
- */
-
-export type SpringConfig = {
-  stiffness: number;
-  damping: number;
-  mass?: number;
-};
-
-export type TimingConfig = {
-  duration: number;
-  easing?: 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'linear';
-};
-
-export type MotionScheme = 'expressive' | 'standard';
-
-/**
- * M3 Expressive - overshoots final values, adds bounce
- * Use for hero moments and key interactions
- */
-export const EXPRESSIVE_FAST: SpringConfig = {
-  stiffness: 400,
-  damping: 15,
-  mass: 1,
-};
-
-export const EXPRESSIVE_DEFAULT: SpringConfig = {
-  stiffness: 300,
-  damping: 20,
-  mass: 1,
-};
-
-export const EXPRESSIVE_SLOW: SpringConfig = {
-  stiffness: 200,
-  damping: 25,
-  mass: 1,
-};
-
-/**
- * M3 Standard - minimal bounce, utilitarian
- * Use for utilitarian products
- */
-export const STANDARD_FAST: SpringConfig = {
-  stiffness: 500,
-  damping: 30,
-  mass: 1,
-};
-
-export const STANDARD_DEFAULT: SpringConfig = {
-  stiffness: 400,
-  damping: 35,
-  mass: 1,
-};
-
-export const STANDARD_SLOW: SpringConfig = {
-  stiffness: 300,
-  damping: 40,
-  mass: 1,
-};
-
-/**
- * Timing config for opacity, color (effects)
- * No overshoot for effects
- */
-export const TIMING_FAST: TimingConfig = {
-  duration: 150,
-  easing: 'easeOut',
-};
-
-export const TIMING_DEFAULT: TimingConfig = {
-  duration: 250,
-  easing: 'easeInOut',
-};
-
-export const TIMING_SLOW: TimingConfig = {
-  duration: 400,
-  easing: 'easeInOut',
-};
-
-/**
- * Get spring config by scheme and speed
- */
-export function getSpringConfig(
-  scheme: MotionScheme = 'expressive',
-  speed: 'fast' | 'default' | 'slow' = 'fast'
-): SpringConfig {
-  if (scheme === 'expressive') {
-    switch (speed) {
-      case 'fast':
-        return { ...EXPRESSIVE_FAST };
-      case 'slow':
-        return { ...EXPRESSIVE_SLOW };
-      default:
-        return { ...EXPRESSIVE_DEFAULT };
-    }
-  }
-  switch (speed) {
-    case 'fast':
-      return { ...STANDARD_FAST };
-    case 'slow':
-      return { ...STANDARD_SLOW };
-    default:
-      return { ...STANDARD_DEFAULT };
-  }
-}
-
-/**
- * Create custom spring config with overrides
- */
-export function createSpringConfig(
-  base: SpringConfig,
-  overrides?: Partial<SpringConfig>
-): SpringConfig {
-  return { ...base, ...overrides };
-}