@momo-kits/foundation 0.150.2-phuc.13 → 0.150.2-scaleSize.35

package/Switch/index.tsx

@@ -1,9 +1,10 @@
-import React, {FC} from 'react';
-import {TouchableOpacity, View} from 'react-native';
-import {SwitchProps} from './types';
+import React, { FC } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { SwitchProps } from './types';
 import styles from './styles';
-import {Colors} from '../Consts';
-import {ComponentContext, useComponentId} from '../Application';
+import { Colors } from '../Consts';
+import { useComponentId } from '../Application';
+import { ComponentContext } from '../Context';
 
 const Switch: FC<SwitchProps> = ({
   value = false,
@@ -18,7 +19,7 @@ const Switch: FC<SwitchProps> = ({
   const circleAlign = value ? 'flex-end' : 'flex-start';
   const componentName = 'Switch';
 
-  const {componentId} = useComponentId(componentName, accessibilityLabel);
+  const { componentId } = useComponentId(componentName, accessibilityLabel);
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
@@ -32,7 +33,8 @@ const Switch: FC<SwitchProps> = ({
         params,
         state: disabled ? 'disabled' : 'enabled',
         action: 'click',
-      }}>
+      }}
+    >
       <TouchableOpacity
         {...props}
         disabled={disabled}
@@ -46,14 +48,17 @@ const Switch: FC<SwitchProps> = ({
         style={[
           style,
           styles.container,
-          {backgroundColor, alignItems: circleAlign},
-        ]}>
-        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
-          <View style={[styles.circleSmall, {backgroundColor}]} />
+          { backgroundColor, alignItems: circleAlign },
+        ]}
+      >
+        <View
+          style={[styles.circle, { backgroundColor: circleBackgroundColor }]}
+        >
+          <View style={[styles.circleSmall, { backgroundColor }]} />
         </View>
       </TouchableOpacity>
     </ComponentContext.Provider>
   );
 };
 
-export {Switch};
+export { Switch };

package/Text/index.tsx

@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import { Text as RNText, TextProps as RNTextProps, View } from 'react-native';
 import styles from './styles';
 import { Typography, TypographyWeight } from './types';
-import { ApplicationContext, SkeletonContext } from '../Application';
-import { scaleSize } from './utils';
+import { ApplicationContext, SkeletonContext } from '../Context';
+import { scaleSize, useScaleSize } from './utils';
 import { Skeleton } from '../Skeleton';
 
 const SFProText: TypographyWeight = {
@@ -110,8 +110,8 @@ const TypoStyles = (typo: Typography, newFontFamily?: string) => {
   return {
     ...typoStyle,
     fontFamily,
-    fontSize: scaleSize(fontSize),
-    lineHeight: scaleSize(lineHeight),
+    fontSize: useScaleSize(fontSize),
+    lineHeight: useScaleSize(lineHeight),
     fontStyle,
     fontWeight,
   };

package/Text/styles.ts

@@ -1,10 +1,11 @@
 export default {
-  headline_default_bold: {fontSize: 24, lineHeight: 34, fontWeight: '700'},
-  header_m_bold: {fontSize: 18, lineHeight: 26, fontWeight: '700'},
-  header_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
-  header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
-  header_xs_semibold: {fontSize: 12, lineHeight: 18, fontWeight: '600'},
-  body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
+  headline_l_bold: { fontSize: 28, lineHeight: 40, fontWeight: '700' },
+  headline_default_bold: { fontSize: 24, lineHeight: 34, fontWeight: '700' },
+  header_m_bold: { fontSize: 18, lineHeight: 26, fontWeight: '700' },
+  header_default_bold: { fontSize: 16, lineHeight: 22, fontWeight: '700' },
+  header_s_semibold: { fontSize: 14, lineHeight: 20, fontWeight: '600' },
+  header_xs_semibold: { fontSize: 12, lineHeight: 18, fontWeight: '600' },
+  body_default_regular: { fontSize: 14, lineHeight: 20, fontWeight: '400' },
   body_default_regularstrikethrought: {
     fontSize: 14,
     lineHeight: 20,
@@ -22,52 +23,52 @@ export default {
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
-  description_xs_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_xs_regular: { fontSize: 10, lineHeight: 14, fontWeight: '400' },
   description_xs_regularstrikethrought: {
     fontSize: 10,
     lineHeight: 14,
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
-  label_default_medium: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
-  label_s_medium: {fontSize: 12, lineHeight: 18, fontWeight: '500'},
-  label_xs_medium: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
-  action_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
-  action_s_bold: {fontSize: 14, lineHeight: 20, fontWeight: '700'},
-  action_xs_bold: {fontSize: 12, lineHeight: 18, fontWeight: '700'},
-  action_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
+  label_default_medium: { fontSize: 14, lineHeight: 20, fontWeight: '500' },
+  label_s_medium: { fontSize: 12, lineHeight: 18, fontWeight: '500' },
+  label_xs_medium: { fontSize: 10, lineHeight: 14, fontWeight: '500' },
+  action_default_bold: { fontSize: 16, lineHeight: 22, fontWeight: '700' },
+  action_s_bold: { fontSize: 14, lineHeight: 20, fontWeight: '700' },
+  action_xs_bold: { fontSize: 12, lineHeight: 18, fontWeight: '700' },
+  action_xxs_bold: { fontSize: 10, lineHeight: 14, fontWeight: '700' },
   /**non-support**/
   headline_default: {
     fontSize: 28,
     lineHeight: 34,
     fontWeight: '600',
   },
-  headline_s: {fontSize: 24, lineHeight: 32, fontWeight: '600'},
-  headline_l: {fontSize: 32, lineHeight: 36, fontWeight: '600'},
-  headline_xl: {fontSize: 36, lineHeight: 44, fontWeight: '600'},
-  title_default: {fontSize: 20, lineHeight: 28, fontWeight: '700'},
-  title_xs: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
-  title_s: {fontSize: 18, lineHeight: 28, fontWeight: '700'},
-  header_default: {fontSize: 15, lineHeight: 22, fontWeight: '600'},
-  header_xs: {fontSize: 12, lineHeight: 16, fontWeight: '600'},
-  header_s: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
-  paragraph_default: {fontSize: 15, lineHeight: 22, fontWeight: '400'},
-  paragraph_bold: {fontSize: 15, lineHeight: 22, fontWeight: '700'},
+  headline_s: { fontSize: 24, lineHeight: 32, fontWeight: '600' },
+  headline_l: { fontSize: 32, lineHeight: 36, fontWeight: '600' },
+  headline_xl: { fontSize: 36, lineHeight: 44, fontWeight: '600' },
+  title_default: { fontSize: 20, lineHeight: 28, fontWeight: '700' },
+  title_xs: { fontSize: 16, lineHeight: 22, fontWeight: '700' },
+  title_s: { fontSize: 18, lineHeight: 28, fontWeight: '700' },
+  header_default: { fontSize: 15, lineHeight: 22, fontWeight: '600' },
+  header_xs: { fontSize: 12, lineHeight: 16, fontWeight: '600' },
+  header_s: { fontSize: 14, lineHeight: 20, fontWeight: '600' },
+  paragraph_default: { fontSize: 15, lineHeight: 22, fontWeight: '400' },
+  paragraph_bold: { fontSize: 15, lineHeight: 22, fontWeight: '700' },
   paragraph_italic: {
     fontSize: 15,
     lineHeight: 22,
     fontWeight: '400',
     fontStyle: 'italic',
   },
-  description_default: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
-  description_xs: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
-  description_s: {fontSize: 12, lineHeight: 16, fontWeight: '400'},
-  label_default: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
-  label_xxs: {fontSize: 8, lineHeight: 12, fontWeight: '500'},
-  label_xs: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
-  label_s: {fontSize: 12, lineHeight: 16, fontWeight: '500'},
-  action_default: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
-  action_xxs: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
-  action_xs: {fontSize: 12, lineHeight: 16, fontWeight: '700'},
-  action_s: {fontSize: 15, lineHeight: 22, fontWeight: '700'},
+  description_default: { fontSize: 14, lineHeight: 20, fontWeight: '400' },
+  description_xs: { fontSize: 10, lineHeight: 14, fontWeight: '400' },
+  description_s: { fontSize: 12, lineHeight: 16, fontWeight: '400' },
+  label_default: { fontSize: 14, lineHeight: 20, fontWeight: '500' },
+  label_xxs: { fontSize: 8, lineHeight: 12, fontWeight: '500' },
+  label_xs: { fontSize: 10, lineHeight: 14, fontWeight: '500' },
+  label_s: { fontSize: 12, lineHeight: 16, fontWeight: '500' },
+  action_default: { fontSize: 16, lineHeight: 22, fontWeight: '700' },
+  action_xxs: { fontSize: 10, lineHeight: 14, fontWeight: '700' },
+  action_xs: { fontSize: 12, lineHeight: 16, fontWeight: '700' },
+  action_s: { fontSize: 15, lineHeight: 22, fontWeight: '700' },
 };

package/Text/types.ts

@@ -32,6 +32,7 @@ export type Typography =
   /**
    * end
    **/
+  | 'headline_l_bold'
   | 'headline_default_bold'
   | 'header_m_bold'
   | 'header_default_bold'

package/Text/utils.ts

@@ -1,31 +1,60 @@
-import {Dimensions, PixelRatio} from 'react-native';
+import { Dimensions, PixelRatio } 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;
 
+const useScaleSize = (size: number) => {
+  const context = useContext<any>(MiniAppContext);
+  const fontScale = PixelRatio.getFontScale();
+  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
+  const maxScaleRate = context?.features?.scaleSizeMaxRate || MAX_FONT_SCALE;
+
+  let fontSizeDeviceScale = size;
+  let fontSizeOSScale = size;
+
+  if (deviceScale > 1) {
+    fontSizeDeviceScale = Math.min(
+      fontSizeDeviceScale * deviceScale,
+      fontSizeDeviceScale + maxScaleRate,
+    );
+  }
+
+  if (fontScale > 1) {
+    fontSizeOSScale = Math.min(
+      fontSizeOSScale * fontScale,
+      fontSizeOSScale * maxScaleRate,
+    );
+  }
+
+  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
+};
+
 const scaleSize = (size: number) => {
   const fontScale = PixelRatio.getFontScale();
   const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
+
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
 
   if (deviceScale > 1) {
     fontSizeDeviceScale = Math.min(
       fontSizeDeviceScale * deviceScale,
-      fontSizeDeviceScale + MAX_DEVICE_SCALE
+      fontSizeDeviceScale + MAX_DEVICE_SCALE,
     );
   }
 
   if (fontScale > 1) {
     fontSizeOSScale = Math.min(
       fontSizeOSScale * fontScale,
-      fontSizeOSScale * MAX_FONT_SCALE
+      fontSizeOSScale * MAX_FONT_SCALE,
     );
   }
 
   return Math.max(fontSizeDeviceScale, fontSizeOSScale);
 };
 
-export {scaleSize};
+export { scaleSize, useScaleSize };

package/Title/index.tsx

@@ -1,13 +1,19 @@
-import React, {FC, useContext, useState} from 'react';
-import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
-import {Icon} from '../Icon';
-import {scaleSize, Text} from '../Text';
-import {ApplicationContext, useComponentId} from '../Application';
-import {Badge} from '../Badge';
-import {Colors} from '../Consts';
+import React, { FC, useContext, useState } from 'react';
+import {
+  Text as RNText,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { Icon } from '../Icon';
+import { scaleSize, Text } from '../Text';
+import { useComponentId } from '../Application';
+import { ApplicationContext } from '../Context';
+import { Badge } from '../Badge';
+import { Colors } from '../Consts';
 import styles from './styles';
-import {TitleProps} from './types';
-import {Typography} from '../Text/types';
+import { TitleProps } from './types';
+import { Typography } from '../Text/types';
 
 const Title: FC<TitleProps> = ({
   accessibilityLabel,
@@ -28,7 +34,7 @@ const Title: FC<TitleProps> = ({
   textOnly = false,
   style,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const [badgeWidth, setBadgeWidth] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
   const styleSheet: {
@@ -39,10 +45,10 @@ const Title: FC<TitleProps> = ({
   const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
   const buttonTypo: Typography =
     buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
-  const flexStyle: ViewStyle = showTrailingAction ? {maxWidth: '95%'} : {};
+  const flexStyle: ViewStyle = showTrailingAction ? { maxWidth: '95%' } : {};
   const componentName = 'Title';
 
-  const {componentId} = useComponentId(
+  const { componentId } = useComponentId(
     `${componentName}/${title}`,
     accessibilityLabel,
   );
@@ -55,17 +61,18 @@ const Title: FC<TitleProps> = ({
     };
 
     if (iconAlign === 'middle') {
-      iconStyle = {justifyContent: 'center'};
+      iconStyle = { justifyContent: 'center' };
     }
 
     if (iconAlign === 'bottom') {
-      iconStyle = {justifyContent: 'flex-end'};
+      iconStyle = { justifyContent: 'flex-end' };
     }
 
     return (
       <View
         accessibilityLabel={componentId + '|icon'}
-        style={[styles.iconView, iconStyle]}>
+        style={[styles.iconView, iconStyle]}
+      >
         <Icon color={iconColor} source={icon} />
       </View>
     );
@@ -80,7 +87,8 @@ const Title: FC<TitleProps> = ({
               setContentWidth(e.nativeEvent.layout.width);
             }
           }}
-          style={[styles.iconLeftView, flexStyle]}>
+          style={[styles.iconLeftView, flexStyle]}
+        >
           <RNText
             accessibilityLabel={componentId + '|title-text'}
             numberOfLines={numberOfLines}
@@ -91,7 +99,8 @@ const Title: FC<TitleProps> = ({
                 maxWidth:
                   contentWidth > 0 ? contentWidth - badgeWidth : undefined,
               },
-            ]}>
+            ]}
+          >
             {title}
           </RNText>
           {badgeLabel && (
@@ -103,7 +112,8 @@ const Title: FC<TitleProps> = ({
               }}
               style={{
                 alignItems: 'center',
-              }}>
+              }}
+            >
               <Badge
                 style={styles.badge}
                 label={badgeLabel}
@@ -118,7 +128,8 @@ const Title: FC<TitleProps> = ({
             accessibilityLabel={componentId + '|description-text'}
             style={styles.description}
             color={theme.colors.text.secondary}
-            typography={'description_default_regular'}>
+            typography={'description_default_regular'}
+          >
             {description}
           </Text>
         )}
@@ -132,7 +143,8 @@ const Title: FC<TitleProps> = ({
         accessibilityLabel={componentId + '|trailing-touch'}
         onPress={onPressTrailingAction}
         style={styles.iconLeftView}
-        hitSlop={{top: 10, bottom: 10, left: 50, right: 10}}>
+        hitSlop={{ top: 10, bottom: 10, left: 50, right: 10 }}
+      >
         {showTrailingAction && !showRightAction && (
           <View
             style={[
@@ -142,7 +154,8 @@ const Title: FC<TitleProps> = ({
                   ? Colors.black_06 + '99'
                   : Colors.black_06 + '4D',
               },
-            ]}>
+            ]}
+          >
             <Icon
               source={'arrow_chevron_right_small'}
               size={scaleSize(18)}
@@ -164,7 +177,8 @@ const Title: FC<TitleProps> = ({
         style={{
           height: lineHeight,
           justifyContent: 'center',
-        }}>
+        }}
+      >
         {!buttonTitle ? (
           <TouchableOpacity
             onPress={onPressRightAction}
@@ -174,7 +188,8 @@ const Title: FC<TitleProps> = ({
                 backgroundColor: theme.colors.primary + '0F',
               },
             ]}
-            accessibilityLabel={componentId + '|label-right-action-touch'}>
+            accessibilityLabel={componentId + '|label-right-action-touch'}
+          >
             <Icon
               source={'arrow_chevron_right_small'}
               size={scaleSize(22)}
@@ -184,11 +199,13 @@ const Title: FC<TitleProps> = ({
         ) : (
           <TouchableOpacity
             onPress={onPressRightAction}
-            accessibilityLabel={componentId + '|label-right-action-touch'}>
+            accessibilityLabel={componentId + '|label-right-action-touch'}
+          >
             <Text
               color={theme.colors.primary}
               typography={buttonTypo}
-              accessibilityLabel={componentId + '|label-right-action-text'}>
+              accessibilityLabel={componentId + '|label-right-action-text'}
+            >
               {buttonTitle}
             </Text>
           </TouchableOpacity>
@@ -203,7 +220,8 @@ const Title: FC<TitleProps> = ({
         <RNText
           accessibilityLabel={componentId + '|title-text'}
           numberOfLines={numberOfLines}
-          style={[styleSheet[typography], styles.title]}>
+          style={[styleSheet[typography], styles.title]}
+        >
           {title}
         </RNText>
       </View>
@@ -213,7 +231,8 @@ const Title: FC<TitleProps> = ({
   return (
     <View
       style={[style, styles.wrapper, isSection && styles.margin]}
-      accessibilityLabel={componentId}>
+      accessibilityLabel={componentId}
+    >
       {renderIcon()}
       {renderContent()}
       {renderActionRight()}
@@ -221,5 +240,5 @@ const Title: FC<TitleProps> = ({
   );
 };
 
-export {Title};
-export type {TitleProps};
+export { Title };
+export type { TitleProps };

package/index.ts

@@ -10,6 +10,7 @@ export * from 'react-native-safe-area-context';
  * foundation component
  */
 export * from './Consts';
+export * from './Context';
 export * from './Layout';
 export * from './Layout/types';
 export * from './Popup';

package/package.json

@@ -1,35 +1,36 @@
 {
-    "name": "@momo-kits/foundation",
-    "version": "0.150.2-phuc.13",
-    "description": "React Native Component Kits",
-    "main": "index.ts",
-    "scripts": {},
-    "keywords": [
-        "@momo-kits/foundation"
-    ],
-    "dependencies": {
-        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-        "@react-navigation/bottom-tabs": "7.4.2",
-        "@react-navigation/core": "7.12.1",
-        "@react-navigation/elements": "2.5.2",
-        "@react-navigation/native": "7.1.14",
-        "@react-navigation/routers": "7.4.1",
-        "@react-navigation/stack": "7.4.2",
-        "react-native-gesture-handler": "2.27.1",
-        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-        "react-native-reanimated": "4.1.0",
-        "react-native-safe-area-context": "5.5.2",
-        "@shopify/flash-list": "2.1.0"
-    },
-    "peerDependencies": {
-        "react-native": "*"
-    },
-    "devDependencies": {
-        "@momo-platform/versions": "4.1.11",
-        "@types/color": "3.0.6"
-    },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "license": "MoMo"
-}
+  "name": "@momo-kits/foundation",
+  "version": "0.150.2-scaleSize.35",
+  "description": "React Native Component Kits",
+  "main": "index.ts",
+  "scripts": {},
+  "keywords": [
+    "@momo-kits/foundation"
+  ],
+  "dependencies": {
+    "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
+    "@react-navigation/bottom-tabs": "7.4.2",
+    "@react-navigation/core": "7.12.1",
+    "@react-navigation/elements": "2.5.2",
+    "@react-navigation/native": "7.1.14",
+    "@react-navigation/routers": "7.4.1",
+    "@react-navigation/stack": "7.4.2",
+    "react-native-gesture-handler": "2.27.1",
+    "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
+    "react-native-reanimated": "4.1.0",
+    "react-native-safe-area-context": "5.5.2",
+    "@shopify/flash-list": "2.1.0",
+    "lottie-react-native": "7.2.4"
+  },
+  "peerDependencies": {
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@momo-platform/versions": "4.1.11",
+    "@types/color": "3.0.6"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MoMo"
+}

package/Application/Components/index.ts

@@ -1,7 +0,0 @@
-export * from './HeaderAnimated';
-export * from './HeaderBackground';
-export * from './HeaderExtendHeader';
-export * from './HeaderLeft';
-export * from './HeaderTitle';
-export * from './NavigationButton';
-export * from './HeaderRight';