@momo-kits/foundation 0.169.4-beta.4 → 0.169.4-beta.6

package/Application/__tests__/KitAdoption.integration.test.tsx

@@ -0,0 +1,235 @@
+jest.unmock('react-native');
+
+/* Native packages are stubbed: the real modules are ESM or need native code under jest. */
+jest.mock('react-native-reanimated', () => {
+  const { View, Text, Image } = require('react-native');
+  const Animated = {
+    View,
+    Text,
+    Image,
+    createAnimatedComponent: (component: unknown) => component,
+  };
+  return {
+    __esModule: true,
+    default: Animated,
+    ...Animated,
+    useSharedValue: (value: unknown) => ({ value }),
+    useAnimatedStyle: () => ({}),
+    useDerivedValue: (fn: () => unknown) => ({ value: fn() }),
+    withTiming: (value: unknown) => value,
+    withSpring: (value: unknown) => value,
+    runOnJS: (fn: unknown) => fn,
+    interpolate: () => 0,
+  };
+});
+jest.mock('react-native-fast-image', () => {
+  const mockReact = require('react');
+  const FastImageStub = (props: Record<string, unknown>) =>
+    mockReact.createElement('FastImage', props);
+  return { __esModule: true, default: FastImageStub };
+});
+jest.mock('react-native-linear-gradient', () => {
+  const mockReact = require('react');
+  const LinearGradientStub = (props: Record<string, unknown>) =>
+    mockReact.createElement('LinearGradient', props);
+  return { __esModule: true, default: LinearGradientStub };
+});
+jest.mock('lottie-react-native', () => {
+  const mockReact = require('react');
+  const LottieStub = () => null;
+  return { __esModule: true, default: mockReact.forwardRef(LottieStub) };
+});
+jest.mock('../../Application', () => ({
+  useComponentId: () => ({ componentId: 'test-id' }),
+}));
+
+import React, { Fragment, type ElementType, type ReactNode } from 'react';
+import {
+  FlatList,
+  Image,
+  Text as RNText,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { act, create, type ReactTestRenderer } from 'react-test-renderer';
+
+import { Button as FoundationButton } from '../../Button';
+import { Text as FoundationText } from '../../Text';
+import {
+  createRegistries,
+  getCurrentFiber,
+  walkScreen,
+} from '../KitAdoption/utils';
+import type { FiberLike, WalkResult } from '../KitAdoption/types';
+
+/**
+ * Production jsx of the React build. Elements made with it carry no
+ * `_debugStack`, the same as mini-app code shipped as a prod bundle. Loaded by
+ * resolved path: the react `exports` map blocks cjs/ under jest.
+ */
+const reactEntry = (
+  require as unknown as { resolve: (id: string) => string }
+).resolve('react');
+const prodJsxRuntime = require(reactEntry.replace(
+  /index\.js$/,
+  'cjs/react-jsx-runtime.production.js',
+)) as {
+  jsx: (
+    type: ElementType,
+    props: Record<string, unknown>,
+  ) => React.ReactElement;
+};
+
+/** Builds an element with the prod jsx runtime, the way a mini-app prod bundle does. */
+const prodJsx = (
+  type: ElementType,
+  props: Record<string, unknown>,
+  ...children: ReactNode[]
+): React.ReactElement => {
+  if (children.length === 0) return prodJsxRuntime.jsx(type, props);
+  return prodJsxRuntime.jsx(type, {
+    ...props,
+    children: children.length > 1 ? children : children[0],
+  });
+};
+
+/** Test-only probe: exposes its fiber so the measurement starts from the real tree. */
+class Probe extends React.Component<{ children?: ReactNode }> {
+  render(): ReactNode {
+    return this.props.children;
+  }
+}
+
+/**
+ * Kit registry built from the components this test renders. The full foundation
+ * index cannot load under jest (navigation and native-only packages), so it is
+ * not used. TouchableOpacity is listed as the foundation re-export, which must not count as kit.
+ */
+const registries = createRegistries(
+  [{ Button: FoundationButton, Text: FoundationText }, { TouchableOpacity }],
+  require('react-native') as Record<string, unknown>,
+);
+
+/** Renders the tree under a Probe and walks the probe's child, as AdoptionProbe does. */
+const measure = (tree: ReactNode): WalkResult => {
+  let instance: Probe | null = null;
+  let renderer: ReactTestRenderer | undefined;
+  act(() => {
+    renderer = create(
+      <Probe
+        ref={(value: Probe | null) => {
+          instance = value;
+        }}
+      >
+        {tree}
+      </Probe>,
+    );
+  });
+  const fiber = (instance as unknown as { _reactInternals: FiberLike })
+    ._reactInternals;
+  const root = getCurrentFiber(fiber).child;
+  if (!root) throw new Error('probe rendered no child fiber');
+  const result = walkScreen(root, registries);
+  act(() => {
+    renderer?.unmount();
+  });
+  return result;
+};
+
+/** Shorthand for the K/R/O triple the demo screen prints. */
+const kro = (result: WalkResult): string =>
+  `K${result.counts.K} R${result.counts.R} O${result.counts.O}`;
+
+describe('KitAdoption integration (prod-built app tree over dev host)', () => {
+  it('a. kit-only tree: kit components counted, their internals not', () => {
+    const result = measure(
+      prodJsx(
+        View,
+        {},
+        prodJsx(FoundationText, {}, 'a'),
+        prodJsx(FoundationButton, { title: 'b' }),
+      ),
+    );
+
+    expect(kro(result)).toBe('K2 R1 O0');
+    expect(result.status).toBe('ok');
+    expect(result.kit).toEqual({ Text: 1, Button: 1 });
+  });
+
+  it('b. app wrapper is transparent, each use of the kit inside it is counted', () => {
+    // Two buttons are siblings, so they sit under one dev root, like a real screen.
+    // The probe walks a single root and not its siblings (see walkScreen).
+    function MyButton(props: { title: string }): React.ReactElement {
+      return prodJsx(FoundationButton, props);
+    }
+    function Screen(): React.ReactElement {
+      return prodJsx(
+        Fragment,
+        {},
+        prodJsx(MyButton, { title: '1' }),
+        prodJsx(MyButton, { title: '2' }),
+      );
+    }
+    const result = measure(<Screen />);
+
+    expect(result.counts.K).toBe(2);
+    expect(kro(result)).toBe('K2 R0 O0');
+    expect(result.top_transparent).toEqual([{ name: 'MyButton', count: 2 }]);
+  });
+
+  it('c. raw react-native primitives written by the app count as R', () => {
+    const result = measure(
+      prodJsx(
+        View,
+        {},
+        prodJsx(RNText, {}, 'x'),
+        prodJsx(Image, { source: { uri: 'https://example.com/a.png' } }),
+        prodJsx(TouchableOpacity, {}),
+      ),
+    );
+
+    expect(kro(result)).toBe('K0 R4 O0');
+  });
+
+  it('d. app child in a kit container counts K, the container internals do not', () => {
+    const result = measure(
+      prodJsx(FoundationText, {}, prodJsx(FoundationText, {}, 'child')),
+    );
+
+    expect(kro(result)).toBe('K2 R0 O0');
+    expect(result.kit).toEqual({ Text: 2 });
+  });
+
+  it('e. FlatList counts R once, each renderItem element counts K', () => {
+    const items = ['one', 'two', 'three'];
+    const result = measure(
+      prodJsx(FlatList, {
+        data: items,
+        keyExtractor: (item: string) => item,
+        renderItem: ({ item }: { item: string }) =>
+          prodJsx(FoundationText, {}, item),
+      }),
+    );
+
+    expect(kro(result)).toBe('K3 R1 O0');
+    expect(result.rn).toEqual({ FlatList: 1 });
+  });
+
+  it('f. foundation re-export of TouchableOpacity counts as R, not K', () => {
+    const result = measure(prodJsx(TouchableOpacity, {}, 'x'));
+
+    expect(kro(result)).toBe('K0 R1 O0');
+  });
+
+  it('g. an all-dev tree is reported as dev_bundle', () => {
+    const result = measure(
+      <View>
+        <RNText>x</RNText>
+      </View>,
+    );
+
+    expect(result.status).toBe('dev_bundle');
+    expect(result.counts).toEqual({ K: 0, R: 0, O: 0 });
+    expect(result.fibers).toBeGreaterThan(0);
+  });
+});

package/Application/__tests__/KitAdoption.test.ts

@@ -0,0 +1,260 @@
+import { createElement, Fragment } from 'react';
+
+import { FIBER_TAG, REACT_MEMO_TYPE } from '../KitAdoption/constants';
+import type { FiberLike } from '../KitAdoption/types';
+import {
+  createRegistries,
+  getCurrentFiber,
+  walkScreen,
+} from '../KitAdoption/utils';
+
+const STACK = 'dev-stack';
+
+const Button = () => null;
+const Card = () => null;
+const Chip = () => null;
+const MyButton = () => null;
+const Plain = () => null;
+const RNView = () => null;
+const Text = () => null;
+const TouchableOpacity = () => null;
+
+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;
+};
+
+/** Linear chain of plain app fibers, returned from the top. */
+const buildChain = (length: number): FiberLike => {
+  let head = makeFiber({ type: Plain });
+  for (let i = 1; i < length; i += 1) {
+    head = link(makeFiber({ type: Plain }), [head]);
+  }
+  return head;
+};
+
+describe('KitAdoption walkScreen', () => {
+  it('counts a kit component once and skips its host-internal fibers', () => {
+    const internalView = makeFiber({
+      tag: FIBER_TAG.HostComponent,
+      type: 'RCTView',
+      _debugStack: STACK,
+    });
+    const button = link(makeFiber({ type: Button }), [internalView]);
+    const myButton = link(makeFiber({ type: MyButton }), [button]);
+
+    const result = walkScreen(
+      myButton,
+      createRegistries([{ Button }], { View: RNView }),
+    );
+
+    expect(result.counts.K).toBe(1);
+    expect(result.counts.R).toBe(0);
+    expect(result.kit.Button).toBe(1);
+    expect(result.top_transparent).toEqual([{ name: 'MyButton', count: 1 }]);
+    expect(result.status).toBe('ok');
+  });
+
+  it('counts a raw RN View written by the app as R', () => {
+    const result = walkScreen(
+      makeFiber({ type: RNView }),
+      createRegistries([{ Button }], { View: RNView }),
+    );
+
+    expect(result.counts.R).toBe(1);
+    expect(result.counts.K).toBe(0);
+  });
+
+  it('counts an app Text inside a kit Card as K and ignores the Card host view', () => {
+    const cardInternalView = makeFiber({
+      tag: FIBER_TAG.HostComponent,
+      type: 'RCTView',
+      _debugStack: STACK,
+    });
+    const appText = makeFiber({ type: Text });
+    const card = link(makeFiber({ type: Card }), [cardInternalView, appText]);
+
+    const result = walkScreen(
+      card,
+      createRegistries([{ Card, Text: Text }], { Text: Text }),
+    );
+
+    expect(result.counts.K).toBe(2);
+    expect(result.counts.R).toBe(0);
+    expect(result.kit.Card).toBe(1);
+    expect(result.kit.Text).toBe(1);
+  });
+
+  it('counts a lib unit once and only the slot children the app passed in', () => {
+    const slotElement = createElement(Button, { label: 'slot' });
+    const internalButton = makeFiber({ type: Button, memoizedProps: {} });
+    const slotFiber = makeFiber({
+      type: Button,
+      memoizedProps: slotElement.props,
+    });
+    const chip = link(
+      makeFiber({ type: Chip, memoizedProps: { children: slotElement } }),
+      [internalButton, slotFiber],
+    );
+
+    const result = walkScreen(chip, createRegistries([{ Button }], {}));
+
+    expect(result.counts.K).toBe(2);
+    expect(result.kit.Chip).toBe(1);
+    expect(result.kit.Button).toBe(1);
+  });
+
+  it('treats the children of a Fragment passed into a lib unit as slots', () => {
+    const first = createElement(Button, { label: 'first' });
+    const second = createElement(Button, { label: 'second' });
+    const fragment = createElement(Fragment, null, first, second);
+    const chip = link(
+      makeFiber({ type: Chip, memoizedProps: { children: fragment } }),
+      [
+        makeFiber({ type: Button, memoizedProps: {} }),
+        makeFiber({ type: Button, memoizedProps: first.props }),
+        makeFiber({ type: Button, memoizedProps: second.props }),
+      ],
+    );
+
+    const result = walkScreen(chip, createRegistries([{ Button }], {}));
+
+    expect(result.kit.Button).toBe(2);
+    expect(result.counts.K).toBe(3);
+  });
+
+  it('does not count the TouchableOpacity re-export as kit', () => {
+    const registries = createRegistries([{ TouchableOpacity }], {
+      TouchableOpacity,
+    });
+
+    const result = walkScreen(
+      makeFiber({ type: TouchableOpacity }),
+      registries,
+    );
+
+    expect(result.counts.K).toBe(0);
+    expect(result.counts.R).toBe(1);
+  });
+
+  it('reports truncated when the walk exceeds the fiber limit', () => {
+    const result = walkScreen(
+      buildChain(10),
+      createRegistries([], {}),
+      undefined,
+      5,
+    );
+
+    expect(result.truncated).toBe(true);
+    expect(result.status).toBe('truncated');
+    expect(result.fibers).toBe(5);
+  });
+
+  it('reports dev_bundle when every fiber carries a dev stack', () => {
+    const child = makeFiber({
+      tag: FIBER_TAG.HostComponent,
+      type: 'RCTView',
+      _debugStack: STACK,
+    });
+    const root = link(
+      makeFiber({
+        tag: FIBER_TAG.HostComponent,
+        type: 'RCTView',
+        _debugStack: STACK,
+      }),
+      [child],
+    );
+
+    const result = walkScreen(root, createRegistries([{ Button }], {}));
+
+    expect(result.status).toBe('dev_bundle');
+    expect(result.counts).toEqual({ K: 0, R: 0, O: 0 });
+    expect(result.fibers).toBe(2);
+  });
+
+  it('does not count the inner fiber of a host-created memo as app code', () => {
+    const innerView = makeFiber({ type: RNView });
+    const hostMemo = link(
+      makeFiber({
+        tag: FIBER_TAG.MemoComponent,
+        type: { $$typeof: REACT_MEMO_TYPE, type: RNView },
+        _debugStack: STACK,
+      }),
+      [innerView],
+    );
+    const hostKit = link(
+      makeFiber({ type: Button, _debugStack: STACK }),
+      [hostMemo],
+    );
+
+    const result = walkScreen(
+      hostKit,
+      createRegistries([{ Button }], { View: RNView }),
+    );
+
+    expect(result.counts.R).toBe(0);
+    expect(result.counts.K).toBe(0);
+  });
+
+  it('counts an app-authored memo wrapping a kit component exactly once', () => {
+    const innerButton = makeFiber({ type: Button });
+    const appMemo = link(
+      makeFiber({
+        tag: FIBER_TAG.MemoComponent,
+        type: { $$typeof: REACT_MEMO_TYPE, type: Button },
+      }),
+      [innerButton],
+    );
+
+    const result = walkScreen(
+      appMemo,
+      createRegistries([{ Button }], {}),
+    );
+
+    expect(result.counts.K).toBe(1);
+    expect(result.kit.Button).toBe(1);
+  });
+});
+
+describe('KitAdoption getCurrentFiber', () => {
+  it('returns the alternate when the fiber hangs off a stale HostRoot', () => {
+    const alternate = makeFiber({ type: Plain });
+    const fiber = makeFiber({ type: Plain, alternate });
+    const committedRoot = makeFiber({ tag: FIBER_TAG.HostRoot });
+    link(
+      makeFiber({
+        tag: FIBER_TAG.HostRoot,
+        stateNode: { current: committedRoot },
+      }),
+      [fiber],
+    );
+
+    expect(getCurrentFiber(fiber)).toBe(alternate);
+  });
+
+  it('returns the fiber itself when its HostRoot is the committed one', () => {
+    const alternate = makeFiber({ type: Plain });
+    const fiber = makeFiber({ type: Plain, alternate });
+    const hostRoot = makeFiber({ tag: FIBER_TAG.HostRoot });
+    link(hostRoot, [fiber]);
+    hostRoot.stateNode = { current: hostRoot };
+
+    expect(getCurrentFiber(fiber)).toBe(fiber);
+  });
+});

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__/modalLayout.test.ts

@@ -16,10 +16,10 @@ describe('getModalLayout', () => {
     expect(layout.isFoldable).toBe(false);
     expect(layout.popup.width).toBe(342);
     expect(layout.popup.maxHeight).toBeUndefined();
-    expect(layout.popup.radius).toBe(24);
+    expect(layout.popup.radius).toBe(16);
     expect(layout.sheet.width).toBeUndefined();
     expect(layout.sheet.maxHeight).toBeUndefined();
-    expect(layout.sheet.radius).toBe(24);
+    expect(layout.sheet.radius).toBe(12);
     expect(layout.scrimOpacity).toBe(0.6);
   });
 
@@ -33,7 +33,7 @@ describe('getModalLayout', () => {
     expect(layout.isFoldable).toBe(false);
     expect(layout.popup.width).toBe(844 - 48);
     expect(layout.popup.maxHeight).toBeUndefined();
-    expect(layout.popup.radius).toBe(24);
+    expect(layout.popup.radius).toBe(16);
     expect(layout.sheet.width).toBeUndefined();
     expect(layout.scrimOpacity).toBe(0.6);
   });

package/Application/modalLayout.ts

@@ -112,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,
     };
   }

package/Application/types.tabs.ts

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

package/Popup/PopupNotify.tsx

@@ -183,12 +183,18 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const body = (
     <>
       {!!image && (
-        <Image source={{ uri: image }} style={styles.image} />
+        <Image
+          source={{ uri: image }}
+          style={[
+            styles.image,
+            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
+          ]}
+        />
       )}
       <View style={[styles.content, isFoldable && styles.shrink]}>
         <Text
           typography={'header_default_bold'}
-          numberOfLines={2}
+          numberOfLines={3}
           accessibilityLabel={'title_popup_notify'}
           // keeps the title clear of the close button on a text only popup
           style={
@@ -244,7 +250,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           width: popupWidth,
           maxHeight,
         },
-        styles.card,
         showBaseLineDebug && styles.debugBaseLine,
       ]}
     >
@@ -257,10 +262,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
 const styles = StyleSheet.create({
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-  // clips the image and content to the card radius
-  card: { overflow: 'hidden' },
   image: {
     aspectRatio: 1.7777,
+    overflow: 'hidden',
   },
   shrink: { flexShrink: 1 },
   content: { padding: Spacing.XL },