@momo-kits/foundation 0.167.1-duo.1 → 0.167.1-duo.2

package/Layout/utils.ts

@@ -1,5 +1,10 @@
-import React, { Fragment, ReactElement } from 'react';
-import { useWindowDimensions } from 'react-native';
+import React, { Fragment, ReactElement, useContext } from 'react';
+import { Platform, useWindowDimensions, ViewStyle } from 'react-native';
+import {
+  EdgeInsets,
+  SafeAreaInsetsContext,
+} from 'react-native-safe-area-context';
+import { Spacing } from '../Consts';
 
 /**
  * validate children type
@@ -38,10 +43,280 @@ const validateChildren = (
   }
 };
 
+/**
+ * Header geometry
+ * - barHeight: navigation bar row below the status bar
+ * - iPhoneMinHeight: header never shorter than this on iPhone (landscape, iPhone Duo)
+ * - statusBarMinInset: a smaller top inset means the status bar is not on the top edge
+ * - largeWidth / largeMargin: @react-navigation/elements Header gives its content row
+ *   5pt side margins on iOS from 414pt wide
+ */
+const HeaderMetrics = {
+  barHeight: 52,
+  iPhoneMinHeight: 72,
+  statusBarMinInset: 20,
+  largeWidth: 414,
+  largeMargin: 5,
+};
+
+/**
+ * iPhone Duo geometry, iOS 27.1 (Xcode 27.1 simulator)
+ * - maxAspectRatio: both displays are near 1.42 (inner) and 1.45 (outer), every slab
+ *   iPhone is 1.77 or taller
+ * - innerMinHeight: window height from which the inner display is in use (outer display
+ *   is 466pt tall in landscape, inner display 669pt)
+ * - controlSize / itemPitch: vertical bar of 48pt circular controls, item groups as 48pt
+ *   wide capsules at a 50pt pitch, 12pt from the strip's inner edge and 12pt apart
+ * - firstItemTop: with the status bar in the strip, the first control sits under the
+ *   camera, clock and connectivity cluster (cluster ends near y 151 on the outer display,
+ *   y 98 on the inner display in landscape)
+ */
+const DuoMetrics = {
+  maxAspectRatio: 1.6,
+  innerMinHeight: 600,
+  controlSize: 48,
+  itemPitch: 50,
+  firstItemTop: 170,
+  firstItemTopLandscape: 120,
+};
+
+const NO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+
+const isIPhone = () =>
+  Platform.OS === 'ios' && Platform.constants.interfaceIdiom === 'phone';
+
+/**
+ * Header height and the room it keeps above the bar row for the status bar. On iPhone the
+ * header is at least iPhoneMinHeight, and with the status bar off the top edge the row
+ * spans the whole header, so the title stays vertically centered.
+ */
+const getHeaderLayout = (topInset: number) => {
+  const height = HeaderMetrics.barHeight + topInset;
+  if (!isIPhone()) {
+    return { headerHeight: height, headerStatusBarHeight: topInset };
+  }
+
+  return {
+    headerHeight: Math.max(height, HeaderMetrics.iPhoneMinHeight),
+    headerStatusBarHeight:
+      topInset < HeaderMetrics.statusBarMinInset ? 0 : topInset,
+  };
+};
+
+export type SideBarEdge = 'left' | 'right';
+
+export type SideBarLayout = {
+  /**
+   * Edge holding the side bar, the one with the larger safe-area inset.
+   */
+  edge: SideBarEdge;
+
+  /**
+   * Width of the side bar column, the safe-area inset on that edge.
+   */
+  width: number;
+
+  /**
+   * Window y of the first side bar item, below the navigation bar and the side status bar.
+   */
+  top: number;
+};
+
+export type ScreenLayout = {
+  /**
+   * Window width, from useWindowDimensions.
+   */
+  width: number;
+
+  /**
+   * Window height, from useWindowDimensions.
+   */
+  height: number;
+
+  /**
+   * `true` when running on iPhone Duo, outer or inner display.
+   */
+  isIPhoneDuo: boolean;
+
+  /**
+   * Raw safe-area insets.
+   */
+  insets: EdgeInsets;
+
+  /**
+   * Horizontal insets the screen content keeps clear of. 0 outside iPhone Duo.
+   */
+  insetLeft: number;
+  insetRight: number;
+
+  /**
+   * Width available to the screen content: window width minus the horizontal insets.
+   */
+  contentWidth: number;
+
+  /**
+   * Header height: the top safe-area inset plus the navigation bar row, at least 72pt on iPhone.
+   */
+  headerHeight: number;
+
+  /**
+   * Room above the navigation bar row for the status bar, the rest of headerHeight is
+   * the row, which centers the title vertically. 0 when the status bar is not on top.
+   */
+  headerStatusBarHeight: number;
+
+  /**
+   * Side column holding the back button and the toolkit, when iPhone Duo moves the
+   * bars to the side. `undefined` while the bars stay horizontal.
+   */
+  sideBar?: SideBarLayout;
+};
+
+/**
+ * Detect iPhone Duo from the window shape and the safe area: a phone idiom window
+ * near square, or a phone with asymmetric side insets (slab iPhones report equal
+ * left / right insets in landscape, iPhone Duo moves the status bar to one side).
+ */
+const isIPhoneDuoLayout = (
+  width: number,
+  height: number,
+  insets: EdgeInsets,
+) => {
+  if (!isIPhone()) {
+    return false;
+  }
+
+  const shortSide = Math.min(width, height);
+  const aspectRatio = shortSide > 0 ? Math.max(width, height) / shortSide : 0;
+  const isSquare = aspectRatio > 0 && aspectRatio < DuoMetrics.maxAspectRatio;
+
+  return isSquare || insets.left !== insets.right;
+};
+
+/**
+ * Screen layout for the current window: iPhone Duo detection, horizontal content insets,
+ * content width and the side bar. Follows the window through fold, unfold, rotation and
+ * Split View since it reads useWindowDimensions and the safe-area context.
+ */
+const useScreenLayout = (): ScreenLayout => {
+  const { width, height } = useWindowDimensions();
+  const insets = useContext(SafeAreaInsetsContext) ?? NO_INSETS;
+
+  const headerLayout = getHeaderLayout(insets.top);
+  const isIPhoneDuo = isIPhoneDuoLayout(width, height, insets);
+  if (!isIPhoneDuo) {
+    return {
+      width,
+      height,
+      isIPhoneDuo,
+      insets,
+      insetLeft: 0,
+      insetRight: 0,
+      contentWidth: width,
+      ...headerLayout,
+    };
+  }
+
+  const sideInset = Math.max(insets.left, insets.right);
+  let sideBar: SideBarLayout | undefined;
+  // narrower strips cannot host a control 12pt from the inner edge
+  if (sideInset >= DuoMetrics.controlSize + Spacing.M) {
+    let top = insets.top + HeaderMetrics.barHeight + Spacing.M;
+    if (insets.top < HeaderMetrics.statusBarMinInset) {
+      // status bar lives in the strip: start under its cluster, as the native bar does
+      const isInnerLandscape =
+        width > height && height >= DuoMetrics.innerMinHeight;
+      top = isInnerLandscape
+        ? DuoMetrics.firstItemTopLandscape
+        : DuoMetrics.firstItemTop;
+    }
+
+    sideBar = {
+      edge: insets.right >= insets.left ? 'right' : 'left',
+      width: sideInset,
+      top,
+    };
+  }
+
+  return {
+    width,
+    height,
+    isIPhoneDuo,
+    insets,
+    insetLeft: insets.left,
+    insetRight: insets.right,
+    contentWidth: width - insets.left - insets.right,
+    ...headerLayout,
+    sideBar,
+  };
+};
+
+/**
+ * Side margin @react-navigation/elements Header adds to its content row
+ */
+const getHeaderMargin = (width: number) =>
+  Platform.OS === 'ios' && width >= HeaderMetrics.largeWidth
+    ? HeaderMetrics.largeMargin
+    : 0;
+
+/**
+ * Absolute style that floats a header item into the side bar, relative to the header
+ * container (left or right) rendering it, 12pt from the strip's inner edge.
+ * `undefined` while there is no side bar.
+ * @param container header container rendering the item
+ * @param slot position in the side bar, 0 for back, 1 for the toolkit below it
+ */
+const useSideBarItemStyle = (
+  container: 'left' | 'right',
+  slot: number,
+): ViewStyle | undefined => {
+  const { width, insets, headerStatusBarHeight, sideBar } = useScreenLayout();
+  if (!sideBar) {
+    return undefined;
+  }
+
+  const margin = getHeaderMargin(width);
+  const columnLeft = sideBar.edge === 'left' ? 0 : width - sideBar.width;
+  const top =
+    sideBar.top -
+    headerStatusBarHeight +
+    slot * (DuoMetrics.controlSize + Spacing.M);
+  const innerEdgeStyle: ViewStyle =
+    sideBar.edge === 'right'
+      ? { alignItems: 'flex-start', paddingLeft: Spacing.M }
+      : { alignItems: 'flex-end', paddingRight: Spacing.M };
+
+  if (container === 'left') {
+    return {
+      position: 'absolute',
+      top,
+      left: columnLeft - margin - insets.left,
+      width: sideBar.width,
+      ...innerEdgeStyle,
+    };
+  }
+
+  const containerRight = width - margin - insets.right;
+  return {
+    position: 'absolute',
+    top,
+    right: containerRight - (columnLeft + sideBar.width),
+    width: sideBar.width,
+    ...innerEdgeStyle,
+  };
+};
+
 const useGridSystem = () => {
-  const windowSize = useWindowDimensions();
-  const numberOfColumns = windowSize.width > 600 ? 24 : 12;
+  const { contentWidth } = useScreenLayout();
+  const numberOfColumns = contentWidth > 600 ? 24 : 12;
   return { numberOfColumns };
 };
 
-export { useGridSystem, validateChildren };
+export {
+  DuoMetrics,
+  getHeaderMargin,
+  useGridSystem,
+  useScreenLayout,
+  useSideBarItemStyle,
+  validateChildren,
+};

package/Popup/PopupNotify.tsx

@@ -13,7 +13,7 @@ import { Icon } from '../Icon';
 import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
-import { runOnJS } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -50,7 +50,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       onRequestClose?.(callback);
     } else {
       navigator?.pop();
-      runOnJS(() => callback?.())();
+      scheduleOnRN(() => callback?.());
     }
   };
 

package/Text/index.tsx

@@ -7,10 +7,6 @@ import {
   MiniAppContext,
   SkeletonContext,
 } from '../Context';
-import {
-  NEW_DEFAULT_FONT_FAMILY,
-  useResolvedFontFamily,
-} from '../Consts/designSystemFont';
 import { scaleSize, useScaleSize } from './utils';
 import { Skeleton } from '../Skeleton';
 
@@ -118,8 +114,7 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
   const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
   const { fontWeight, fontSize, fontStyle, lineHeight } = typoStyle;
   const style = FontStyle[fontStyle ?? 'normal'];
-  const font = useResolvedFontFamily(newFontFamily ?? theme.font);
-  const resolvedDefaultFamily = useResolvedFontFamily(NEW_DEFAULT_FONT_FAMILY);
+  const font = newFontFamily ?? theme.font;
   let fontFamily: string;
 
   switch (font) {
@@ -148,11 +143,7 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
       break;
     }
     default: {
-      fontFamily = `${resolvedDefaultFamily}-${
-        resolvedDefaultFamily === NEW_DEFAULT_FONT_FAMILY
-          ? MomoTrustSans[fontWeight]
-          : SFProText[fontWeight]
-      }`;
+      fontFamily = `${font}-${SFProText[fontWeight]}${style}`;
     }
   }
 

package/Text/utils.ts

@@ -2,7 +2,6 @@ import { Dimensions, PixelRatio, useWindowDimensions } from 'react-native';
 import { useContext } from 'react';
 import { MiniAppContext } from '../Context';
 
-const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
@@ -40,7 +39,7 @@ const useScaleSize = (size: number, scaleRate?: number) => {
 
 const scaleSize = (size: number) => {
   const fontScale = PixelRatio.getFontScale();
-  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
+  const deviceScale = Dimensions.get('window').width / DEFAULT_SCREEN_SIZE;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.167.1-duo.1",
+    "version": "0.167.1-duo.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -23,7 +23,8 @@
         "lottie-react-native": "7.2.4"
     },
     "peerDependencies": {
-        "react-native": "*"
+        "react-native": "*",
+        "react-native-worklets": ">=0.5.0"
     },
     "devDependencies": {
         "@types/color": "3.0.6"
@@ -32,4 +33,4 @@
         "registry": "https://registry.npmjs.org/"
     },
     "license": "MoMo"
-}
+}

package/Consts/designSystemFont.ts

@@ -1,38 +0,0 @@
-import { useContext } from 'react';
-import { MiniAppContext } from '../Context';
-
-export const NEW_DEFAULT_FONT_FAMILY = 'MomoTrustSans';
-export const LEGACY_DEFAULT_FONT_FAMILY = 'SFProText';
-
-/**
- * Font thuoc bo design system moi. Ngoai whitelist thi ha het ve font cu:
- * MoMoTrustDisplay chi duoc dung tu commit header title 5bfde6251 (DS-791),
- * truoc do header lay font theo theme.
- */
-const NEW_FONT_FAMILIES = [NEW_DEFAULT_FONT_FAMILY, 'MoMoTrustDisplay'];
-
-/**
- * Cờ whitelist design system, host đẩy xuống qua `decorateProps`
- * (`designSystemConfig.isWhiteListDesignSystem`). Ngoài whitelist thì kit giữ
- * nguyên font cũ.
- */
-export const useIsDesignSystemWhiteList = (): boolean => {
-  const context = useContext<any>(MiniAppContext);
-  return context?.designSystemConfig?.isWhiteListDesignSystem === true;
-};
-
-/**
- * Hạ font mặc định mới về font cũ khi user không nằm trong whitelist.
- * Font do caller chỉ định tường minh (MoMoSignature, AlegreyaSans...) giữ nguyên.
- */
-export const useResolvedFontFamily = (font: string): string => {
-  const isWhiteList = useIsDesignSystemWhiteList();
-  if (NEW_FONT_FAMILIES.includes(font) && !isWhiteList) {
-    return LEGACY_DEFAULT_FONT_FAMILY;
-  }
-  return font;
-};
-
-/** Tên file font Regular tương ứng với nhánh whitelist đang áp dụng. */
-export const useDefaultRegularFontFamily = (): string =>
-  `${useResolvedFontFamily(NEW_DEFAULT_FONT_FAMILY)}-Regular`;

package/Layout/GridSystem.tsx

@@ -1,137 +0,0 @@
-import React, { useContext } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Dimensions, StyleSheet, View } from 'react-native';
-import { ApplicationContext } from '../Context';
-import { Colors, Spacing } from '../Consts';
-import { GridContextProps } from './types';
-import { useGridSystem } from './utils';
-
-const GridSystem: React.FC<any> = ({
-  width = Dimensions.get('window').width,
-  useMargin = true,
-  gutterSize = Spacing.M,
-  screenGrid = true,
-  gridColor = Colors.blue_07,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const { numberOfColumns } = useGridSystem();
-
-  const margin = useMargin ? Spacing.M : 0;
-  const widthSection = width - margin * 2;
-  const totalGutterSize = gutterSize * (numberOfColumns - 1);
-  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
-
-  const grid: GridContextProps = {
-    numberOfColumns,
-    gutterSize,
-    sizePerSpan,
-    getSizeSpan: span => {
-      return span * sizePerSpan + (span - 1) * gutterSize;
-    },
-  };
-  const insets = useSafeAreaInsets();
-
-  const list: number[] = [];
-  for (let i = 1; i <= grid.numberOfColumns; i++) {
-    list.push(i);
-  }
-
-  return (
-    <>
-      <View
-        pointerEvents="none"
-        style={[
-          styles.gridContainer,
-          screenGrid && insets,
-          {
-            borderColor: theme.colors.error.primary,
-            marginHorizontal: margin,
-            top: Spacing.M,
-            bottom: Spacing.M,
-          },
-        ]}
-      >
-        {list.map((_, index) => {
-          return (
-            <View style={{ flexDirection: 'row' }} key={index.toString()}>
-              {index !== 0 && <View style={{ width: grid.gutterSize }} />}
-              <View
-                key={`Grid${index.toString()}`}
-                pointerEvents="none"
-                style={[
-                  styles.gridColumn,
-                  {
-                    width: grid.sizePerSpan,
-                    backgroundColor: gridColor,
-                  },
-                ]}
-              />
-            </View>
-          );
-        })}
-      </View>
-      {screenGrid && (
-        <>
-          <View pointerEvents="none" style={styles.dangerLeftContainer} />
-          <View pointerEvents="none" style={styles.dangerRightContainer} />
-          <View
-            pointerEvents="none"
-            style={[styles.dangerTopContainer, { height: Spacing.M }]}
-          />
-          <View
-            pointerEvents="none"
-            style={[styles.dangerBottomContainer, { height: insets.bottom }]}
-          />
-        </>
-      )}
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  gridContainer: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    borderWidth: 1,
-  },
-  gridColumn: {
-    height: '100%',
-    opacity: 0.2,
-  },
-  dangerTopContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: '100%',
-    top: 0,
-    position: 'absolute',
-  },
-  dangerBottomContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: '100%',
-    bottom: 0,
-    position: 'absolute',
-  },
-  dangerLeftContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: Spacing.M,
-    height: '100%',
-    left: 0,
-    position: 'absolute',
-  },
-  dangerRightContainer: {
-    opacity: 0.2,
-    backgroundColor: Colors.red_03,
-    width: Spacing.M,
-    height: '100%',
-    right: 0,
-    position: 'absolute',
-  },
-});
-
-export default GridSystem;