@momo-kits/foundation 0.169.7-beta.2 → 0.169.7-beta.4

package/Application/__tests__/KitAdoptionStore.test.ts

@@ -0,0 +1,110 @@
+import { AdoptionStore } from '../KitAdoption/AdoptionStore';
+import type { ScreenSnapshot } from '../KitAdoption/types';
+
+/** Snapshot with the given K/R/O counts for one app and screen. */
+const makeSnapshot = (
+  screen: string,
+  counts: { K: number; R: number; O: number },
+  appId = 'app-1',
+): ScreenSnapshot => ({
+  counts,
+  kit: {},
+  rn: {},
+  other: {},
+  top_transparent: [],
+  fibers: 0,
+  truncated: false,
+  status: 'ok',
+  app_id: appId,
+  screen_name: screen,
+  platform: 'ios',
+  ts: 0,
+  walk_ms: 0,
+});
+
+describe('AdoptionStore save', () => {
+  it('keeps the existing snapshot when it has more nodes', () => {
+    const store = new AdoptionStore();
+    store.save(makeSnapshot('Home', { K: 3, R: 0, O: 0 }));
+    store.save(makeSnapshot('Home', { K: 1, R: 0, O: 0 }));
+
+    expect(store.getAll()).toHaveLength(1);
+    expect(store.getAll()[0].counts.K).toBe(3);
+  });
+
+  it('replaces the existing snapshot when the new one has more nodes', () => {
+    const store = new AdoptionStore();
+    store.save(makeSnapshot('Home', { K: 1, R: 0, O: 0 }));
+    store.save(makeSnapshot('Home', { K: 2, R: 2, O: 1 }));
+
+    expect(store.getAll()[0].counts).toEqual({ K: 2, R: 2, O: 1 });
+  });
+
+  it('keys snapshots by app and screen', () => {
+    const store = new AdoptionStore();
+    store.save(makeSnapshot('Home', { K: 1, R: 0, O: 0 }, 'app-1'));
+    store.save(makeSnapshot('Home', { K: 1, R: 0, O: 0 }, 'app-2'));
+
+    expect(store.getAll()).toHaveLength(2);
+  });
+
+  it('getLatest returns the most recently saved screen', () => {
+    const store = new AdoptionStore();
+    store.save(makeSnapshot('Home', { K: 1, R: 0, O: 0 }));
+    store.save(makeSnapshot('Detail', { K: 1, R: 0, O: 0 }));
+
+    expect(store.getLatest()?.screen_name).toBe('Detail');
+  });
+
+  it('clear empties the store and getLatest', () => {
+    const store = new AdoptionStore();
+    store.save(makeSnapshot('Home', { K: 1, R: 0, O: 0 }));
+    store.clear();
+
+    expect(store.getAll()).toEqual([]);
+    expect(store.getLatest()).toBeUndefined();
+  });
+});
+
+describe('AdoptionStore subscribe', () => {
+  it('notifies listeners on save and stops after unsubscribe', () => {
+    const store = new AdoptionStore();
+    const listener = jest.fn();
+    const unsubscribe = store.subscribe(listener);
+
+    store.save(makeSnapshot('Home', { K: 1, R: 0, O: 0 }));
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    unsubscribe();
+    store.save(makeSnapshot('Detail', { K: 1, R: 0, O: 0 }));
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('AdoptionStore active measurer', () => {
+  it('remeasureActive calls the active measurer', () => {
+    const store = new AdoptionStore();
+    const measure = jest.fn();
+    store.setActive(measure);
+
+    store.remeasureActive();
+
+    expect(measure).toHaveBeenCalledTimes(1);
+  });
+
+  it('clearActive only clears the measurer that is still active', () => {
+    const store = new AdoptionStore();
+    const first = jest.fn();
+    const second = jest.fn();
+    store.setActive(first);
+    store.setActive(second);
+
+    store.clearActive(first);
+    store.remeasureActive();
+    expect(second).toHaveBeenCalledTimes(1);
+
+    store.clearActive(second);
+    store.remeasureActive();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+});

package/Application/__tests__/KitAdoptionStructural.test.ts

@@ -0,0 +1,193 @@
+import { createElement } from 'react';
+
+import { FIBER_TAG } from '../KitAdoption/constants';
+import type { FiberLike, WalkResult } from '../KitAdoption/types';
+import {
+  createRegistries,
+  getAdoptionTrackingParams,
+  isAdoptionTrackingEnabled,
+  walkScreen,
+} from '../KitAdoption/utils';
+
+const Button = () => null;
+const RNView = () => null;
+const RNFlatList = () => null;
+const Cell = () => null;
+const Item = () => null;
+const Wrapper = () => null;
+
+const registries = createRegistries([{ Button }], {
+  View: RNView,
+  FlatList: RNFlatList,
+});
+
+const makeFiber = (overrides: Partial<FiberLike> = {}): FiberLike => ({
+  tag: FIBER_TAG.FunctionComponent,
+  type: undefined,
+  child: null,
+  sibling: null,
+  return: null,
+  alternate: null,
+  memoizedProps: {},
+  ...overrides,
+});
+
+/** Sets children of parent (child, sibling, return links) and returns parent. */
+const link = (parent: FiberLike, children: FiberLike[]): FiberLike => {
+  children.forEach((child, index) => {
+    child.return = parent;
+    child.sibling = children[index + 1] ?? null;
+  });
+  parent.child = children[0] ?? null;
+  return parent;
+};
+
+const hostView = (): FiberLike =>
+  makeFiber({ tag: FIBER_TAG.HostComponent, type: 'RCTView' });
+
+const walkStructural = (root: FiberLike): WalkResult =>
+  walkScreen(root, registries, undefined, undefined, true);
+
+const makeResult = (status: WalkResult['status']): WalkResult => ({
+  counts: { K: 3, R: 2, O: 1 },
+  kit: {},
+  rn: {},
+  other: {},
+  top_transparent: [],
+  fibers: 6,
+  truncated: false,
+  status,
+});
+
+describe('KitAdoption walkScreen structural mode', () => {
+  it('counts a kit component once and skips internals outside its slots', () => {
+    const button = link(makeFiber({ type: Button }), [
+      link(makeFiber({ type: RNView }), [hostView()]),
+    ]);
+
+    const result = walkStructural(button);
+
+    expect(result.counts).toEqual({ K: 1, R: 0, O: 0 });
+    expect(result.kit).toEqual({ Button: 1 });
+  });
+
+  it('counts an app element passed as children of a kit component', () => {
+    const child = createElement(RNView);
+    const internal = link(makeFiber({ type: RNView }), [
+      makeFiber({ type: RNView, memoizedProps: child.props }),
+    ]);
+    const button = link(
+      makeFiber({ type: Button, memoizedProps: { children: child } }),
+      [internal],
+    );
+
+    const result = walkStructural(button);
+
+    expect(result.counts).toEqual({ K: 1, R: 1, O: 0 });
+  });
+
+  it('counts an RN View once, skips its host internal and counts app children', () => {
+    const child = createElement(Button);
+    const view = link(
+      makeFiber({ type: RNView, memoizedProps: { children: child } }),
+      [
+        link(hostView(), [
+          makeFiber({ type: Button, memoizedProps: child.props }),
+        ]),
+      ],
+    );
+
+    const result = walkStructural(view);
+
+    expect(result.counts).toEqual({ K: 1, R: 1, O: 0 });
+    expect(result.rn).toEqual({ RNView: 1 });
+  });
+
+  it('counts the rendered item of a list cell as a slot', () => {
+    const itemElement = createElement(Item);
+    const item = makeFiber({ type: Button, memoizedProps: itemElement.props });
+    const wrapperView = link(
+      makeFiber({
+        type: RNView,
+        memoizedProps: { children: [itemElement, null] },
+      }),
+      [item],
+    );
+    const provider = link(makeFiber({ tag: FIBER_TAG.ContextProvider }), [
+      wrapperView,
+    ]);
+    const cell = link(
+      makeFiber({
+        tag: FIBER_TAG.ClassComponent,
+        type: Cell,
+        memoizedProps: { cellKey: 'k', index: 0, item: {} },
+      }),
+      [provider],
+    );
+    const list = link(makeFiber({ type: RNFlatList }), [cell]);
+
+    const result = walkStructural(list);
+
+    expect(result.counts).toEqual({ K: 1, R: 1, O: 0 });
+    expect(result.rn).toEqual({ RNFlatList: 1 });
+  });
+
+  it('counts an O host component once and its app children', () => {
+    const child = createElement(Button);
+    const host = link(
+      makeFiber({
+        tag: FIBER_TAG.HostComponent,
+        type: 'custom-host',
+        memoizedProps: { children: child },
+      }),
+      [makeFiber({ type: Button, memoizedProps: child.props })],
+    );
+
+    const result = walkStructural(host);
+
+    expect(result.counts).toEqual({ K: 1, R: 0, O: 1 });
+  });
+
+  it('keeps counting internals when structural mode is off', () => {
+    const button = link(makeFiber({ type: RNView }), [
+      link(makeFiber({ type: Wrapper }), [makeFiber({ type: RNView })]),
+    ]);
+
+    expect(walkStructural(button).counts.R).toBe(1);
+    expect(
+      walkScreen(button, registries, undefined, undefined, false).counts.R,
+    ).toBe(2);
+  });
+});
+
+describe('KitAdoption tracking helpers', () => {
+  it('enables tracking only for designSystemConfig.isWhiteList === true', () => {
+    expect(
+      isAdoptionTrackingEnabled({ designSystemConfig: { isWhiteList: true } }),
+    ).toBe(true);
+    expect(
+      isAdoptionTrackingEnabled({
+        designSystemConfig: { isWhiteList: 'true' },
+      }),
+    ).toBe(false);
+    expect(isAdoptionTrackingEnabled({ designSystemConfig: {} })).toBe(false);
+    expect(isAdoptionTrackingEnabled({})).toBe(false);
+    expect(isAdoptionTrackingEnabled(undefined)).toBe(false);
+    expect(isAdoptionTrackingEnabled('x')).toBe(false);
+  });
+
+  it('maps an ok result to analytics params', () => {
+    expect(getAdoptionTrackingParams(makeResult('ok'))).toEqual({
+      num_design_system: 3,
+      num_rn: 2,
+      num_other: 1,
+    });
+  });
+
+  it('returns undefined for any other status or no result', () => {
+    expect(getAdoptionTrackingParams(makeResult('error'))).toBeUndefined();
+    expect(getAdoptionTrackingParams(makeResult('dev_bundle'))).toBeUndefined();
+    expect(getAdoptionTrackingParams(makeResult('truncated'))).toBeUndefined();
+    expect(getAdoptionTrackingParams(undefined)).toBeUndefined();
+  });
+});

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,15 +73,11 @@ type ModalLayoutInput = {
   hinge?: ReservedRegion;
 };
 
-/**
- * `value` limited to the `[min, max]` range.
- */
-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,
@@ -95,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 = {
@@ -117,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,
     };
   }
@@ -130,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 {
@@ -145,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,
@@ -156,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/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]}>