@momo-kits/foundation 0.167.1-beta.5 → 0.167.1-duo-test.1

package/Popup/utils.ts

@@ -0,0 +1,32 @@
+import { Dimensions, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Spacing } from '../Consts';
+import { getDuoTopInset, isIPhoneDuo } from '../Application/device';
+
+// width of a system alert on the iPhone Duo inner display, in both orientations
+const DUO_POPUP_MAX_WIDTH = 440;
+
+const usePopupWidth = () => {
+  const windowSize = useWindowDimensions();
+  if (!isIPhoneDuo()) {
+    return Dimensions.get('window').width - Spacing.XL * 2;
+  }
+  return Math.min(windowSize.width - Spacing.XL * 2, DUO_POPUP_MAX_WIDTH);
+};
+
+// room left for a popup on iPhone Duo, where landscape is too short for it
+const usePopupMaxHeight = () => {
+  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  if (!isIPhoneDuo()) {
+    return undefined;
+  }
+  return (
+    height -
+    getDuoTopInset(insets, width, height) -
+    insets.bottom -
+    Spacing.XL * 2
+  );
+};
+
+export { usePopupWidth, usePopupMaxHeight };

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-beta.5",
+    "version": "0.167.1-duo-test.1",
     "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"

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;