@momo-kits/foundation 0.169.5 → 0.169.6-beta.1

package/Application/__tests__/modalLayout.test.ts

@@ -0,0 +1,128 @@
+// document/__mocks__ shadows react-native with react-native-web for the doc site
+jest.mock('react-native', () => jest.requireActual('react-native'));
+
+import { getModalLayout } from '../modalLayout';
+
+const NO_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+
+describe('getModalLayout', () => {
+  it('keeps the phone look', () => {
+    const layout = getModalLayout({
+      width: 390,
+      height: 844,
+      insets: { top: 47, right: 0, bottom: 34, left: 0 },
+      isDuo: false,
+    });
+    expect(layout.isFoldable).toBe(false);
+    expect(layout.popup.width).toBe(342);
+    expect(layout.popup.maxHeight).toBeUndefined();
+    expect(layout.popup.radius).toBe(16);
+    expect(layout.sheet.width).toBeUndefined();
+    expect(layout.sheet.maxHeight).toBeUndefined();
+    expect(layout.sheet.radius).toBe(12);
+    expect(layout.scrimOpacity).toBe(0.6);
+  });
+
+  it('keeps the phone look in landscape', () => {
+    const layout = getModalLayout({
+      width: 844,
+      height: 390,
+      insets: { top: 0, right: 47, bottom: 21, left: 47 },
+      isDuo: false,
+    });
+    expect(layout.isFoldable).toBe(false);
+    expect(layout.popup.width).toBe(844 - 48);
+    expect(layout.popup.maxHeight).toBeUndefined();
+    expect(layout.popup.radius).toBe(16);
+    expect(layout.sheet.width).toBeUndefined();
+    expect(layout.scrimOpacity).toBe(0.6);
+  });
+
+  it('caps popup and sheet on a wide foldable window', () => {
+    const layout = getModalLayout({
+      width: 884,
+      height: 1104,
+      insets: { top: 24, right: 0, bottom: 20, left: 0 },
+      isDuo: false,
+    });
+    expect(layout.isFoldable).toBe(true);
+    expect(layout.popup).toMatchObject({
+      width: 450,
+      minWidth: 280,
+      maxWidth: 450,
+      maxHeight: 600,
+      margin: 24,
+      radius: 24,
+    });
+    expect(layout.sheet).toMatchObject({
+      width: 653,
+      maxHeight: 1104 - 24 - 12,
+      minHeight: 230,
+      margin: 12,
+      radius: 24,
+    });
+    expect(layout.scrimOpacity).toBe(0.2);
+  });
+
+  it('limits popup height to the safe area minus 48', () => {
+    const layout = getModalLayout({
+      width: 900,
+      height: 600,
+      insets: { top: 24, right: 0, bottom: 20, left: 0 },
+      isDuo: false,
+    });
+    expect(layout.popup.maxHeight).toBe(600 - 24 - 20 - 48);
+  });
+
+  it('places modals left of the control column on the iPhone Duo outer display', () => {
+    const layout = getModalLayout({
+      width: 420,
+      height: 760,
+      insets: { top: 0, right: 64, bottom: 20, left: 0 },
+      isDuo: true,
+    });
+    expect(layout.isFoldable).toBe(true);
+    expect(layout.placement).toEqual({ x: 0, y: 0, width: 356, height: 740 });
+    expect(layout.popup.margin).toBe(12);
+    expect(layout.popup.width).toBe(356 - 24);
+    expect(layout.sheet.width).toBe(356 - 24);
+  });
+
+  it('never grows past the margins when the space is under the min width', () => {
+    const layout = getModalLayout({
+      width: 300,
+      height: 600,
+      insets: NO_INSETS,
+      isDuo: true,
+    });
+    expect(layout.popup.width).toBe(300 - 24);
+    expect(layout.popup.minWidth).toBe(300 - 24);
+    expect(layout.sheet.width).toBe(300 - 24);
+  });
+
+  it('moves to the right half when iPhone Duo is half folded', () => {
+    const layout = getModalLayout({
+      width: 1000,
+      height: 800,
+      insets: NO_INSETS,
+      isDuo: true,
+      hinge: { x: 495, y: 0, width: 10, height: 800 },
+    });
+    expect(layout.placement).toEqual({ x: 505, y: 0, width: 495, height: 800 });
+    expect(layout.popup.margin).toBe(12);
+    expect(layout.popup.width).toBe(450);
+    expect(layout.sheet.width).toBe(495 - 24);
+  });
+
+  it('ignores a division off the iPhone Duo', () => {
+    const layout = getModalLayout({
+      width: 1000,
+      height: 800,
+      insets: NO_INSETS,
+      isDuo: false,
+      hinge: { x: 495, y: 0, width: 10, height: 800 },
+    });
+    expect(layout.placement.x).toBe(0);
+    expect(layout.popup.margin).toBe(24);
+  });
+});

package/Application/modalLayout.ts

@@ -73,12 +73,11 @@ type ModalLayoutInput = {
   hinge?: ReservedRegion;
 };
 
-const clamp = (value: number, min: number, max: number) => {
-  return Math.min(Math.max(value, min), max);
-};
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
 
 /**
- * Modal geometry for a window, pure so it can be tested without a device.
+ * Modal geometry for a window, pure so it can be tested without a device
  */
 const getModalLayout = ({
   width,
@@ -92,9 +91,8 @@ const getModalLayout = ({
   const isFoldable = isDuo || shortSide >= FOLDABLE_MIN_WIDTH;
   const isDuoOuter = isDuo && shortSide < FOLDABLE_MIN_WIDTH;
   const hingeRight = hinge ? hinge.x + hinge.width : 0;
-  const hasHinge = !!hinge && hinge.x > 0;
-  const isHingeInWindow = hingeRight < width - insets.right;
-  const isHalfFolded = isDuo && hasHinge && isHingeInWindow;
+  const isHalfFolded =
+    isDuo && !!hinge && hinge.x > 0 && hingeRight < width - insets.right;
 
   const safeLeft = isHalfFolded ? hingeRight : insets.left;
   const placement = {
@@ -114,9 +112,9 @@ const getModalLayout = ({
         minWidth: popupWidth,
         maxWidth: popupWidth,
         margin: Spacing.XL,
-        radius: Radius.XL,
+        radius: Radius.L,
       },
-      sheet: { margin: 0, radius: Radius.XL },
+      sheet: { margin: 0, radius: Radius.M },
       scrimOpacity: SCRIM_OPACITY,
     };
   }
@@ -127,7 +125,6 @@ const getModalLayout = ({
 
   const sheetMargin = Spacing.M;
   const sheetSpace = placement.width - sheetMargin * 2;
-  const sheetMinWidth = Math.min(SHEET_MIN_WIDTH, sheetSpace);
   const sheetMaxHeight = height - insets.top - Spacing.M;
 
   return {
@@ -142,7 +139,11 @@ const getModalLayout = ({
       radius: Radius.XL,
     },
     sheet: {
-      width: clamp(sheetSpace, sheetMinWidth, SHEET_MAX_WIDTH),
+      width: clamp(
+        sheetSpace,
+        Math.min(SHEET_MIN_WIDTH, sheetSpace),
+        SHEET_MAX_WIDTH,
+      ),
       maxHeight: sheetMaxHeight,
       minHeight: Math.min(SHEET_MIN_HEIGHT, sheetMaxHeight),
       margin: sheetMargin,
@@ -153,8 +154,8 @@ const getModalLayout = ({
 };
 
 /**
- * Modal geometry for the current window; follows fold, unfold, rotation and
- * the iPhone Duo hinge.
+ * Modal geometry for the current window, follows fold, unfold, rotation and the
+ * iPhone Duo hinge
  */
 const useModalLayout = (): ModalLayout => {
   const { width, height } = useWindowDimensions();

package/Application/navigationOptions.tsx

@@ -133,15 +133,13 @@ const exportHeaderTitle = (
     };
   } else if (typeof params.headerTitle === 'string') {
     return {
-      headerTitle: (props: any) => {
-        return (
-          <HeaderTitle
-            {...props}
-            children={params.headerTitle}
-            animatedValue={animatedValue}
-          />
-        );
-      },
+      headerTitle: (props: any) => (
+        <HeaderTitle
+          {...props}
+          children={params.headerTitle}
+          animatedValue={animatedValue}
+        />
+      ),
     };
   }
   return {};
@@ -158,17 +156,15 @@ const getOptions = (
   let options: StackNavigationOptions = {};
 
   if (hasCustomHeaderLeft(params)) {
-    let headerLeft: any = (props: any) => {
-      return (
-        <HeaderLeft
-          {...props}
-          preventBack={params.preventBack}
-          onPressLeftHeader={params.onPressLeftHeader}
-          onBackHandler={params.onBackHandler}
-          floating
-        />
-      );
-    };
+    let headerLeft: any = (props: any) => (
+      <HeaderLeft
+        {...props}
+        preventBack={params.preventBack}
+        onPressLeftHeader={params.onPressLeftHeader}
+        onBackHandler={params.onBackHandler}
+        floating
+      />
+    );
     if (params.hiddenBack) {
       headerLeft = null;
       options.headerTitleContainerStyle = {
@@ -207,7 +203,7 @@ const getOptions = (
     };
   }
 
-  // Only ever turns swipe back off; screens opt in via gestureEnabled.
+  // only ever turns swipe back off, screens opt in via gestureEnabled
   if (params.gestureEnabled === undefined && hasCustomBackHandling(params)) {
     options.gestureEnabled = false;
   }

package/Application/types.tabs.ts

@@ -36,7 +36,6 @@ export type BottomTabProps = {
 };
 
 export type FloatingButtonProps = {
-  container?: React.ReactNode;
   icon: string | React.ReactNode;
   label: string;
   onPress: () => void;

package/Badge/Badge.tsx

@@ -7,11 +7,6 @@ import { BadgeProps } from './types';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Text, useScaleSize } from '../Text';
 
-/**
- * Label or count badge; counts over 99 show "99+". Counts use the error color,
- * labels the warning color, and `backgroundColor` applies only if it's a
- * `Colors.*_03` token.
- */
 const Badge: FC<BadgeProps> = ({
   label = '',
   style,

package/Badge/BadgeDot.tsx

@@ -4,7 +4,6 @@ import { BadgeDotProps } from './types';
 import styles from './styles';
 import { MiniAppContext } from '../Context';
 
-/** Static red notification dot with a white ring, `large` or `small`. */
 const BadgeDot: FC<BadgeDotProps> = ({ size = 'large', style }) => {
   const context = useContext<any>(MiniAppContext);
   let dotStyle;

package/Badge/BadgeDotAnimation.tsx

@@ -14,10 +14,6 @@ import styles from './styles';
 
 const DURATION = 500;
 
-/**
- * Red notification dot that pulses with a spring and emits an expanding,
- * fading wave ring, looping until unmounted.
- */
 const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
   const scaleAnim = useSharedValue(1);
   const waveScaleAnim = useSharedValue(1);
@@ -61,18 +57,14 @@ const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
     };
   }, [scaleAnim, waveOpacityAnim, waveScaleAnim]);
 
-  const waveAnimatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ scale: waveScaleAnim.value }],
-      opacity: waveOpacityAnim.value,
-    };
-  });
+  const waveAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: waveScaleAnim.value }],
+    opacity: waveOpacityAnim.value,
+  }));
 
-  const dotAnimatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ scale: scaleAnim.value }],
-    };
-  });
+  const dotAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scaleAnim.value }],
+  }));
 
   return (
     <View style={[styles.dotAnimationContainer, style]}>

package/Badge/BadgeRibbon.tsx

@@ -8,10 +8,6 @@ import { Text } from '../Text';
 import { Colors } from '../Consts';
 import { Image } from '../Image';
 
-/**
- * Corner ribbon label in the warning color, skewed or `isRound`. Right-corner
- * ribbons are rotated 180deg with the text counter-rotated to stay upright.
- */
 const BadgeRibbon: FC<BadgeRibbonProps> = ({
   position = 'top_right',
   label = 'Label',
@@ -37,16 +33,39 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
   const textTransform = useMemo(() => [{ rotateZ: textRotate }], [textRotate]);
 
   const ribbonTail = isUpTail ? <UpTail /> : <DownTail />;
-  const renderRoundContent = () => {
-    return (
+  const renderRoundContent = () => (
+    <View
+      collapsable={false}
+      style={[
+        styles.ribbonContent,
+        {
+          backgroundColor: theme.colors.warning.primary,
+          marginTop: textMargin,
+        },
+      ]}
+    >
+      <View
+        collapsable={false}
+        style={[styles.ribbonLabelWrapper, { transform: textTransform }]}
+      >
+        <Text
+          style={styles.ribbonLabel}
+          color={Colors.black_01}
+          typography="label_xs_medium"
+        >
+          {label}
+        </Text>
+      </View>
+    </View>
+  );
+
+  const renderSkewContent = () => (
+    <View style={[styles.ribbonSkewRow, { marginTop: skewMargin }]}>
       <View
         collapsable={false}
         style={[
-          styles.ribbonContent,
-          {
-            backgroundColor: theme.colors.warning.primary,
-            marginTop: textMargin,
-          },
+          styles.ribbonSkewContent,
+          { backgroundColor: theme.colors.warning.primary },
         ]}
       >
         <View
@@ -62,41 +81,14 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
           </Text>
         </View>
       </View>
-    );
-  };
-
-  const renderSkewContent = () => {
-    return (
-      <View style={[styles.ribbonSkewRow, { marginTop: skewMargin }]}>
-        <View
-          collapsable={false}
-          style={[
-            styles.ribbonSkewContent,
-            { backgroundColor: theme.colors.warning.primary },
-          ]}
-        >
-          <View
-            collapsable={false}
-            style={[styles.ribbonLabelWrapper, { transform: textTransform }]}
-          >
-            <Text
-              style={styles.ribbonLabel}
-              color={Colors.black_01}
-              typography="label_xs_medium"
-            >
-              {label}
-            </Text>
-          </View>
-        </View>
-        <Image
-          source={{
-            uri: 'https://static.momocdn.net/app/img/kits/utils/Tail_4x.png',
-          }}
-          style={styles.skew}
-        />
-      </View>
-    );
-  };
+      <Image
+        source={{
+          uri: 'https://static.momocdn.net/app/img/kits/utils/Tail_4x.png',
+        }}
+        style={styles.skew}
+      />
+    </View>
+  );
 
   const content = isRound ? renderRoundContent() : renderSkewContent();
 

package/Badge/Shape.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import styles from './styles';
 import {Image} from '../Image';
 
-/** Ribbon tail image pointing up (the down tail rotated 180deg). */
 const UpTail = () => {
   return (
     <Image
@@ -15,7 +14,6 @@ const UpTail = () => {
   );
 };
 
-/** Ribbon tail image pointing down. */
 const DownTail = () => {
   return (
     <Image

package/Badge/types.ts

@@ -1,7 +1,7 @@
 import {ViewStyle} from 'react-native';
 
 /**
- * Props for a Badge component. It displays a short label or a number count.
+ * Props for a general Badge component. It can display a wide range of badges including simple labels, numbers, or dots.
  */
 export type BadgeProps = {
   /**
@@ -20,7 +20,7 @@ export type BadgeProps = {
   backgroundColor?: string;
 
   /**
-   * Optional. Overrides the generated component ID used for accessibility and QA.
+   *
    */
   accessibilityLabel?: string;
 };

package/Button/index.tsx

@@ -63,11 +63,6 @@ export interface ButtonProps extends TouchableOpacityProps {
   params?: any;
 }
 
-/**
- * Design-system button: `type` sets the colors, `size` the height and text,
- * and `loading` swaps an icon slot for a spinner. Primary buttons use the mini
- * app gradient from `config.navigationBar.buttonColors` when set.
- */
 const Button: FC<ButtonProps> = ({
   type = 'primary',
   size = 'large',
@@ -95,21 +90,33 @@ const Button: FC<ButtonProps> = ({
     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 });
   };
 
+  /**
+   * export size style
+   */
   const getSizeStyle = () => {
     const styleSheet: { [key: string]: any } = styles;
     return styleSheet[size ?? 'small'];
   };
 
+  /**
+   * render title
+   */
   const renderTitle = () => {
     const typography = getTypography(size);
     const textColor = getTextColor(type, theme, color);
@@ -120,6 +127,10 @@ const Button: FC<ButtonProps> = ({
     );
   };
 
+  /**
+   * render icon
+   * @param position
+   */
   const renderIcon = (position: 'left' | 'right') => {
     const iconSize = getIconSize(size);
     const space = getIconSpace(size);

package/Button/utils.ts

@@ -4,8 +4,10 @@ import { Typography } from '../Text/types';
 import { ButtonProps } from './index';
 
 /**
- * Whether the loading spinner belongs in the `isLeft` icon slot: it takes the
- * right slot when there is a right icon, otherwise the left one.
+ * determine loading position
+ * @param left
+ * @param right
+ * @param isLeft
  */
 export const shouldShowLoading = (
   left?: string,
@@ -21,8 +23,7 @@ export const shouldShowLoading = (
 };
 
 /**
- * Background and border of a button `type`; `color` (mini app button color)
- * overrides the outline border.
+ * export type style
  */
 export const getTypeStyle = (
   type: ButtonProps['type'],
@@ -63,7 +64,9 @@ export const getTypeStyle = (
   }
 };
 
-/** Icon size for a button `size`. */
+/**
+ * export icon size
+ */
 export const getIconSize = (size: ButtonProps['size']) => {
   switch (size) {
     case 'large':
@@ -76,7 +79,9 @@ export const getIconSize = (size: ButtonProps['size']) => {
   }
 };
 
-/** Gap between icon and title for a button `size`. */
+/**
+ * export icon space
+ */
 export const getIconSpace = (size: ButtonProps['size']) => {
   switch (size) {
     case 'large':
@@ -89,7 +94,9 @@ export const getIconSpace = (size: ButtonProps['size']) => {
   }
 };
 
-/** Title typography for a button `size`. */
+/**
+ * export typography style
+ */
 export const getTypography = (size: ButtonProps['size']): Typography => {
   switch (size) {
     case 'large':
@@ -104,8 +111,7 @@ export const getTypography = (size: ButtonProps['size']): Typography => {
 };
 
 /**
- * Title and icon color of a button `type`; `color` (mini app button color)
- * overrides the outline and text types.
+ * export text color
  */
 export const getTextColor = (
   type: ButtonProps['type'],

package/CheckBox/index.tsx

@@ -11,10 +11,6 @@ import {
 import { Text } from '../Text';
 import { Icon } from '../Icon';
 
-/**
- * Checkbox with an optional label. `indeterminate` shows a minus icon and is
- * styled and announced as checked.
- */
 const CheckBox: FC<CheckBoxProps> = ({
   value,
   disabled = false,

package/Consts/theme.ts

@@ -62,22 +62,22 @@ const defaultDarkTheme: Theme = {
     secondary: Colors.pink_08,
     gradient: '#FDCADE',
     background: {
-      default: '#121212',
-      surface: '#1e1e1e',
+      default: '#121212', // Dark background
+      surface: '#1e1e1e', // Slightly lighter surface background
       tonal: Colors.pink_10,
-      pressed: '#1a1a1a',
+      pressed: '#1a1a1a', // Pressed state background
       selected: Colors.pink_11,
-      disable: '#303030',
+      disable: '#303030', // Disabled state background
     },
     text: {
-      default: '#ffffff',
-      secondary: '#b0b0b0',
-      hint: '#727272',
-      disable: '#505050',
+      default: '#ffffff', // White text for better contrast
+      secondary: '#b0b0b0', // Light gray secondary text
+      hint: '#727272', // Hint text color
+      disable: '#505050', // Disabled text color
     },
     border: {
-      default: '#2a2a2a',
-      disable: '#242424',
+      default: '#2a2a2a', // Darker borders
+      disable: '#242424', // Disabled state border color
     },
     success: {
       primary: Colors.green_03,

package/Context/index.ts

@@ -5,7 +5,6 @@ import { defaultContext } from '../Consts';
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
 
-// Shared by the host app via `Platform`; standalone falls back to a local one.
 const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;

package/Divider/DashDivider.tsx

@@ -11,7 +11,6 @@ export interface DashDividerProps {
   style?: ViewStyle;
 }
 
-/** 1px dashed horizontal line in the default border color. */
 const DashDivider: React.FC<DashDividerProps> = ({ style }) => {
   const { theme } = useContext(ApplicationContext);
   const borderColor = theme.colors.border.default;

package/Divider/index.tsx

@@ -18,10 +18,6 @@ export interface DividerProps {
   type?: 'dash' | 'default';
 }
 
-/**
- * 1px horizontal line in the default border color. `type='dash'` renders
- * `DashDivider`, which always has a 4px vertical margin.
- */
 const Divider: React.FC<DividerProps> = ({
   style,
   useMargin = true,

package/FoundationList/index.tsx

@@ -5,10 +5,6 @@ import { FlatListProps } from 'react-native';
 type CombinedListProps<ItemT> = FlatListProps<ItemT> &
   Partial<FlashListProps<ItemT>>;
 
-/**
- * FlashList typed to also accept FlatList props, so FlatList call sites can
- * switch to it without type changes.
- */
 const FoundationList = <ItemT,>(props: CombinedListProps<ItemT>) => {
   return <FlashList {...props} />;
 };