@momo-kits/foundation 0.109.1 → 0.110.1-beta.1

package/Application/BottomTab/BottomTabBar.tsx

@@ -16,7 +16,7 @@ import {
   View,
 } from 'react-native';
 import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {Radius} from '../../Consts';
+import {Colors, Radius} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {FloatingButtonProps} from '../types';
@@ -207,7 +207,7 @@ export default function BottomTabBar({
   return (
     <Animated.View
       style={[
-        styles.tabBar,
+        floatingButton ? styles.tabBarFloatingButton : styles.tabBar,
         {
           backgroundColor: theme.colors.background.surface,
           borderTopColor: theme.colors.border.default,
@@ -253,6 +253,17 @@ const styles = StyleSheet.create({
     borderTopWidth: StyleSheet.hairlineWidth,
     elevation: 8,
   },
+  tabBarFloatingButton: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 1,
+    shadowColor: Colors.black_20,
+    shadowOffset: {width: 0, height: -2},
+    shadowOpacity: 0.05,
+    shadowRadius: 3,
+    elevation: 8,
+  },
   floatingContainer: {
     position: 'absolute',
     alignItems: 'center',

package/Application/BottomTab/index.tsx

@@ -7,7 +7,7 @@ import {EventArg} from '@react-navigation/core';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Colors} from '../../Consts';
 import {Icon} from '../../Icon';
-import {Text} from '../../Text';
+import {exportFontFamily, Text} from '../../Text';
 import {ApplicationContext} from '../index';
 import StackScreen from '../StackScreen';
 import {BottomTabProps, NavigationScreenProps} from '../types';
@@ -146,7 +146,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 lineHeight: Platform.OS === 'android' ? 17 : 14,
                 fontWeight: 'bold',
                 alignSelf: 'center',
-                fontFamily: `${theme.font}-Bold`,
+                fontFamily: exportFontFamily('bold'),
                 left: isDot ? 8 : 4,
                 top: isDot ? -2 : -6,
                 backgroundColor: isNum ? Colors.red_03 : Colors.orange_03,

package/Application/Components/BottomSheetHelpCenter.tsx

@@ -71,6 +71,8 @@ const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
           appName: context?.name?.['en'],
           buildNumber: context?.buildNumber,
         },
+        newUi: true,
+        stepFeedback: 1,
       });
     });
   };

package/Application/Components/HeaderBackground.tsx

@@ -1,6 +1,6 @@
 import LinearGradient from 'react-native-linear-gradient';
 import {Animated, Platform, StyleSheet, View} from 'react-native';
-import React, {useContext} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import {HeaderBackgroundProps} from '../types';
 import {ApplicationContext} from '../index';
 import {Colors, Styles} from '../../Consts';
@@ -13,13 +13,23 @@ const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
  */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
-  animatedValue,
+  animatedValue = new Animated.Value(0),
   useGradient = true,
   useShadowHeader = true,
   gradientColor,
   headerBackground,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const {theme, navigator} = useContext(ApplicationContext);
+  const [configHeader, setConfigHeader] = useState(null);
+
+  useEffect(() => {
+    navigator?.maxApi?.getFeatureById('platform_config', (config: any) => {
+      const header = config?.navigationBar?.headerBar;
+      if (header) {
+        setConfigHeader(header);
+      }
+    });
+  }, []);
 
   const linearGradientColor = gradientColor ?? theme.colors.gradient;
 
@@ -59,7 +69,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
             {!!headerImage && (
               <Image
                 style={styles.headerBackground}
-                source={{uri: headerImage}}
+                source={{uri: configHeader || headerImage}}
                 loading={false}
               />
             )}

package/Application/Components/HeaderExtendHeader.tsx

@@ -34,7 +34,7 @@ const HeaderExtendHeader: React.FC<{
   headerType = 'default',
   animatedValue,
   heightHeader,
-  headerRightWidth = 0,
+  headerRightWidth = 73,
   inputSearchProps,
   inputSearchRef,
   useShadowHeader = true,
@@ -46,6 +46,7 @@ const HeaderExtendHeader: React.FC<{
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
+  const isIos = Platform.OS === 'ios';
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],
@@ -94,7 +95,9 @@ const HeaderExtendHeader: React.FC<{
         <Animated.View style={{height: height}} />
         <Animated.View
           style={[
-            useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
+            isIos && useShadowHeader
+              ? styles.shadowHeader
+              : styles.dividerHeader,
             {
               backgroundColor: theme.colors.background.surface,
               opacity: opacityBackground,
@@ -244,8 +247,14 @@ const styles = StyleSheet.create({
         shadowRadius: 10,
       },
       android: {
-        borderBottomWidth: 1,
-        borderColor: Colors.black_04,
+        shadowColor: Colors.black_17,
+        shadowOffset: {
+          width: 3,
+          height: 3,
+        },
+        shadowOpacity: 0.12,
+        shadowRadius: 10,
+        elevation: 10,
       },
     }),
   },

package/Application/Components/HeaderRight.tsx

@@ -15,25 +15,15 @@ import {scaleSize, Text} from '../../Text';
 import {BottomSheetHelpCenter} from './BottomSheetHelpCenter';
 import {Image} from '../../Image';
 
-const WHITE_LIST = [
-  'vn.momo.appx',
-  'vn.momo.transactionhistory',
-  'vn.momo.promotionhub',
-];
-
 /**
  * main component for header right
  */
 const HeaderRight: React.FC<any> = props => {
   const {headerRight = {}} = props;
   const {useOnBoarding = false, buttonOnBoarding, onPress} = headerRight;
-  const context = useContext<any>(MiniAppContext);
   const {translate} = useContext(ApplicationContext);
 
-  if (
-    WHITE_LIST.includes(context?.appId) &&
-    typeof props.headerRight === 'function'
-  ) {
+  if (typeof props.headerRight === 'function') {
     return props.headerRight(props);
   }
 
@@ -61,7 +51,7 @@ const HeaderRight: React.FC<any> = props => {
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   preventClose,
-  useShortcut = true,
+  useShortcut = false,
   useMore = false,
   tools = [],
 }) => {
@@ -75,7 +65,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (useShortcut) {
       checkAppIsFavorite();
     }
-  }, []);
+  }, [useShortcut, useMore, tools]);
 
   let buttonStyle: ViewStyle = {};
   if (tintColor === Colors.black_01) {
@@ -157,6 +147,9 @@ const HeaderToolkitAction: React.FC<any> = ({
   const onPressHelpCenter = () => {
     const appName = translate?.(context?.name);
     const appDescription = translate?.(context?.description);
+    const isShowDescription =
+      context?.description && Object.keys(context?.description).length > 0;
+
     navigator?.showBottomSheet({
       options: {
         header: (
@@ -167,11 +160,13 @@ const HeaderToolkitAction: React.FC<any> = ({
             />
             <View>
               <Text typography={'label_default_medium'}>{appName}</Text>
-              <Text
-                typography={'description_default_regular'}
-                color={Colors.black_12}>
-                {appDescription}
-              </Text>
+              {isShowDescription && (
+                <Text
+                  typography={'description_default_regular'}
+                  color={Colors.black_12}>
+                  {appDescription}
+                </Text>
+              )}
             </View>
           </View>
         ),
@@ -207,7 +202,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   const showIconMore = tools && totalTools > 1;
   const isHaveOneTool = tools && totalTools === 1;
 
-  if (showIconMore || (useMore && isHaveOneTool)) {
+  if (showIconMore || useMore) {
     iconShortcut = 'navigation_more_icon';
     shortcutOnPress = onPressIconMore;
   } else if (isHaveOneTool) {

package/Application/Components/HeaderTitle.tsx

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native';
 import {ApplicationContext, MiniAppContext} from '../index';
-import {scaleSize, Text} from '../../Text';
+import {exportFontFamily, scaleSize, Text} from '../../Text';
 import {Colors, Spacing, Styles} from '../../Consts';
 import {TitleJourneyProps, TitleLocationProps, TitleUserProps} from '../types';
 import {Image} from '../../Image';
@@ -17,7 +17,6 @@ import {Icon} from '../../Icon';
  * default header title used for nav
  */
 const HeaderTitle: React.FC<any> = props => {
-  const {theme} = useContext(ApplicationContext);
   const opacity = props.animatedValue?.interpolate(
     props.interpolate ?? {
       inputRange: [0, 200],
@@ -33,7 +32,11 @@ const HeaderTitle: React.FC<any> = props => {
         accessibilityLabel={'title_navigation_header'}
         style={[
           styles.title,
-          {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
+          {
+            fontFamily: exportFontFamily('bold', 'action_xs_bold'),
+            opacity,
+            color: props.tintColor,
+          },
         ]}
         numberOfLines={1}
       />

package/Application/Components/SearchHeader.tsx

@@ -7,7 +7,16 @@ import {ApplicationContext, MiniAppContext} from '../index';
 import {Text} from '../../Text';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
-  ({animatedValue, buttonText = 'Huỷ', onPressButtonText, ...props}, ref) => {
+  (
+    {
+      animatedValue,
+      buttonText = 'Huỷ',
+      onPressButtonText,
+      renderButtons,
+      ...props
+    },
+    ref
+  ) => {
     const {theme, navigator} = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
 
@@ -75,9 +84,13 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
             />
           </Animated.View>
         </View>
-        <TouchableOpacity onPress={goBackSafe} style={styles.searchAction}>
-          <Text typography={'action_default_bold'}>{buttonText}</Text>
-        </TouchableOpacity>
+        {renderButtons && typeof renderButtons === 'function' ? (
+          renderButtons()
+        ) : (
+          <TouchableOpacity onPress={goBackSafe} style={styles.searchAction}>
+            <Text typography={'action_default_bold'}>{buttonText}</Text>
+          </TouchableOpacity>
+        )}
       </View>
     );
   }

package/Application/Localize.ts

@@ -30,7 +30,7 @@ class Localize {
   }
 
   translateData(data: {vi: string; en: string}) {
-    return data[this.currentLanguage] || JSON.stringify(data);
+    return data[this.currentLanguage] ?? JSON.stringify(data);
   }
 
   addTranslations(translations: LocalizationObject) {

package/Application/Navigation.ts

@@ -3,10 +3,12 @@ import {NavigationOptions} from './types';
 import {getOptions} from './utils';
 import {StackNavigationOptions} from '@react-navigation/stack';
 
-const WHITE_LIST = [
+export const WHITE_LIST = [
   'vn.momo.appx',
   'vn.momo.transactionhistory',
   'vn.momo.promotionhub',
+  'vn.momo.payment',
+  'vn.momo.ekyc',
 ];
 
 class Navigation {

package/Application/StackScreen.tsx

@@ -138,7 +138,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
         type: 'ERROR',
       });
       if (
-        ['uat', 'staging'].includes(context.environment) &&
+        context.debugLastElement &&
         lastElement.current?.children?.current?.length > 0
       ) {
         Alert.alert(

package/Application/types.ts

@@ -1,6 +1,6 @@
 import {EventArg} from '@react-navigation/core';
 import {StackNavigationOptions} from '@react-navigation/stack';
-import React from 'react';
+import React, {ReactNode} from 'react';
 import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Localize from './Localize';
@@ -99,7 +99,7 @@ export type Tool = {
 export type NavigationContainerProps = {
   screen: Screen;
   options?: NavigationOptions;
-  theme: Theme;
+  theme?: Theme;
   maxApi: any;
   initialParams?: any;
   localize: Localize;
@@ -271,4 +271,5 @@ export interface SearchHeaderProps extends InputSearchProps {
   animatedValue?: Animated.Value;
   headerRightWidth?: 0 | 74 | 110 | number;
   leftPosition?: 12 | 48 | number;
+  renderButtons?: () => ReactNode;
 }

package/Input/Input.tsx

@@ -17,7 +17,7 @@ import {
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {Text} from '../Text';
+import {exportFontFamily, Text} from '../Text';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import styles from './styles';
@@ -51,7 +51,7 @@ const Input = forwardRef(
       loading = false,
       leadingIcon,
       leadingIconColor,
-      fontWeight = 'Regular',
+      fontWeight,
       secureTextEntry,
       keyboardType,
       style,
@@ -60,6 +60,8 @@ const Input = forwardRef(
       accessibilityLabel,
       editable = true,
       onPressFloatingIcon,
+      onPressLeadingIcon,
+      showClearIcon = true,
       ...props
     }: InputProps,
     ref
@@ -91,12 +93,17 @@ const Input = forwardRef(
       onBlur?.(e);
     };
 
+    const _setText = (text: string) => {
+      inputRef?.current?.setNativeProps({text});
+      _onChangeText(text);
+    };
+
     useImperativeHandle(ref, () => {
       return {
         clear: onClearText,
         focus: () => inputRef.current?.focus(),
         blur: () => inputRef.current?.blur(),
-        setText: (text: string) => _onChangeText(text),
+        setText: _setText,
       };
     });
 
@@ -196,11 +203,13 @@ const Input = forwardRef(
           <View style={styles.inputView}>
             {!!leadingIcon && (
               <View style={styles.leadingIconContainer}>
-                <Icon
-                  color={leadingIconColor}
-                  source={leadingIcon}
-                  size={size === 'small' ? 24 : 32}
-                />
+                <TouchableOpacity onPress={onPressLeadingIcon}>
+                  <Icon
+                    color={leadingIconColor}
+                    source={leadingIcon}
+                    size={size === 'small' ? 24 : 32}
+                  />
+                </TouchableOpacity>
               </View>
             )}
             <TextInput
@@ -214,7 +223,7 @@ const Input = forwardRef(
                 styles.input,
                 {
                   color: textColor,
-                  fontFamily: `${theme.font}-${fontWeight}`,
+                  fontFamily: exportFontFamily(fontWeight ?? 'regular'),
                 },
                 secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
               ]}
@@ -230,7 +239,7 @@ const Input = forwardRef(
             />
           </View>
           <View style={styles.iconView}>
-            {focused && haveValue && (
+            {showClearIcon && focused && haveValue && (
               <TouchableOpacity
                 style={styles.iconWrapper}
                 onPress={onClearText}>

package/Input/InputMoney.tsx

@@ -54,6 +54,9 @@ const InputMoney = forwardRef(
       hintText,
       value: _value,
       onPressFloatingIcon,
+      placeholder = '0đ',
+      currency = 'đ',
+      showClearIcon = true,
       ...props
     }: InputMoneyProps,
     ref
@@ -67,13 +70,13 @@ const InputMoney = forwardRef(
     useEffect(() => {
       if (_value) {
         setValue(validateText(_value));
-        onChangeText?.(formatMoneyToNumber(_value, 'đ').toString());
+        onChangeText?.(formatMoneyToNumber(_value, currency).toString());
       }
     }, [_value]);
 
     const validateText = (text: string) => {
-      const valueFormat = formatMoneyToNumber(text, 'đ');
-      return formatNumberToMoney(valueFormat, 'đ');
+      const valueFormat = formatMoneyToNumber(text, currency);
+      return formatNumberToMoney(valueFormat, currency);
     };
 
     const [value, setValue] = useState(
@@ -88,10 +91,10 @@ const InputMoney = forwardRef(
 
     const _onChangeText = (text: string) => {
       if (text.length < value.length && value.indexOf(text) === 0) {
-        text = value.slice(0, -2) + 'đ';
+        text = value.slice(0, -2) + currency;
       }
       setValue(validateText(text));
-      onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
+      onChangeText?.(formatMoneyToNumber(text, currency).toString());
     };
 
     useImperativeHandle(ref, () => {
@@ -160,11 +163,11 @@ const InputMoney = forwardRef(
               onBlur={_onBlur}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
-              placeholder={'0đ'}
+              placeholder={placeholder}
             />
           </View>
           <View style={styles.iconView}>
-            {focused && (
+            {showClearIcon && focused && (
               <TouchableOpacity
                 style={styles.iconWrapper}
                 onPress={onClearText}>

package/Input/InputSearch.tsx

@@ -165,12 +165,17 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     onChangeText?.(text);
   };
 
+  const _setText = (text: string) => {
+    inputRef?.current?.setNativeProps({text});
+    _onChangeText(text);
+  };
+
   useImperativeHandle(ref, () => {
     return {
       clear: onClearText,
       focus: () => inputRef.current?.focus(),
       blur: () => inputRef.current?.blur(),
-      setText: (text: string) => _onChangeText(text),
+      setText: _setText,
     };
   });
 
@@ -208,6 +213,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         ]}
         value={value}
         onChangeText={_onChangeText}
+        defaultValue={defaultValue}
         onFocus={_onFocus}
         onBlur={_onBlur}
         placeholder={placeholder}

package/Input/index.tsx

@@ -97,6 +97,11 @@ export interface InputProps extends TextInputProps {
    */
   leadingIcon?: string;
 
+  /**
+   * Optional. callback function to be called when the leading icon is pressed.
+   */
+  onPressLeadingIcon?: () => void;
+
   /**
    * Optional. Represents the color of the leading icon in the Input component.
    */
@@ -105,7 +110,7 @@ export interface InputProps extends TextInputProps {
   /**
    * Optional. Represents the font weight of the text in the Input component.
    */
-  fontWeight?: 'Regular' | 'Bold';
+  fontWeight?: string;
 
   /**
    * Optional. params for element tracking.
@@ -117,7 +122,15 @@ export interface InputProps extends TextInputProps {
    */
   hintText?: string;
 
-  onPressFloatingIcon?: (e: GestureResponderEvent) => void;
+  /**
+   * Optional. Represents the style of the Input component.
+   */
+  onPressFloatingIcon?: () => void;
+
+  /**
+   * Optional. Represents the style of the Input component.
+   */
+  showClearIcon?: boolean;
 }
 
 export interface InputTextAreaProps extends Omit<InputProps, 'size'> {
@@ -200,7 +213,9 @@ export interface InputSearchProps extends TextInputProps {
   onPress?: (e: GestureResponderEvent) => void;
 }
 
-export interface InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
+export interface InputMoneyProps extends InputProps {
+  currency?: string;
+}
 
 export interface InputOTPProps
   extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {

package/Layout/Screen.tsx

@@ -162,7 +162,7 @@ const Screen = forwardRef(
       headerComponent: Header,
       footerComponent: Footer,
       layoutOffset = -56,
-      headerRightWidth = 110,
+      headerRightWidth = 73,
       backgroundColor,
       headerType = 'default',
       floatingButtonProps,
@@ -344,13 +344,8 @@ const Screen = forwardRef(
     const setSearchHeader = (params: SearchHeaderProps) => {
       const options: StackNavigationOptions = {
         headerRight: undefined,
-        headerLeft: () => {},
-        headerTitle: (props: any) => (
-          <SearchHeader
-            {...props}
-            {...params}
-            animatedValue={animatedValue.current}
-          />
+        headerTitle: () => (
+          <SearchHeader {...params} animatedValue={animatedValue.current} />
         ),
       };
 

package/Radio/index.tsx

@@ -64,10 +64,10 @@ const Radio: FC<RadioProps> = ({
             styles.radio,
             checkBoxStyle,
             disabledStyle,
-            {marginRight: label ? Spacing.XS : 0},
+            {marginRight: label ? Spacing.S : 0},
           ]}
         />
-        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+        {!!label && <Text typography={'body_default_regular'} style={styles.radioText}>{label}</Text>}
       </TouchableOpacity>
     </ComponentContext.Provider>
   );

package/Radio/styles.ts

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import {Radius} from '../Consts';
+import {Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   radio: {
@@ -8,4 +8,7 @@ export default StyleSheet.create({
     borderRadius: Radius.M,
   },
   container: {flex: 1},
+  radioText: {
+    marginRight: Spacing.M,
+  }
 });

package/Text/index.tsx

@@ -33,6 +33,20 @@ const AlegreyaSans: TypographyWeight = {
   bold: 'Bold',
 };
 
+const MomoTrustSans: TypographyWeight = {
+  100: 'Light',
+  200: 'Light',
+  300: 'Light',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Medium',
+  700: 'Medium',
+  800: 'Medium',
+  900: 'Medium',
+  normal: 'Regular',
+  bold: 'Medium',
+};
+
 const FontStyle: {[key: string]: string} = {
   italic: 'Italic',
   normal: '',
@@ -50,6 +64,12 @@ export interface TextProps extends RNTextProps {
    * It can be any valid color string (e.g., hex, rgb, rgba, etc.).
    */
   color?: string;
+
+  /**
+   * Optional. Represents the font-family of the text in the Text component.
+   * Ex: MomoSignature, MomoTrustDisplay
+   */
+  fontFamily?: string;
 }
 
 const deprecatedValues: Typography[] = [
@@ -67,49 +87,61 @@ const deprecatedValues: Typography[] = [
   'action_s',
 ];
 
+const getTypoStyle = (typo: Typography, newFontFamily?: string) => {
+  const {theme} = useContext(ApplicationContext);
+  const styleSheet: {
+    [key: string]: any;
+  } = styles;
+  const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
+  const {fontWeight, fontSize, fontStyle, lineHeight} = typoStyle;
+  const style = FontStyle[fontStyle ?? 'normal'];
+  const font = newFontFamily ?? theme.font;
+  let fontFamily: string;
+
+  switch (font) {
+    case 'SFProText': {
+      fontFamily = `${font}-${SFProText[fontWeight]}${style}`;
+      break;
+    }
+    case 'AlegreyaSans': {
+      fontFamily = `${font}-${AlegreyaSans[fontWeight]}${style}`;
+      break;
+    }
+    case 'MomoTrustSans': {
+      fontFamily = `${font}-${MomoTrustSans[fontWeight]}${style}`;
+      break;
+    }
+    case 'MomoTrustDisplay':
+    case 'MomoSignature': {
+      fontFamily = font;
+      break;
+    }
+    default: {
+      fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
+    }
+  }
+
+  return {
+    ...typoStyle,
+    fontFamily,
+    fontSize: scaleSize(fontSize),
+    lineHeight: scaleSize(lineHeight),
+    fontStyle,
+    fontWeight,
+  };
+};
+
 const Text: React.FC<TextProps> = ({
   typography = 'body_default_regular',
   color,
   children,
   style,
+  fontFamily,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
 
-  const getTypoStyle = (typo: Typography) => {
-    const styleSheet: {
-      [key: string]: any;
-    } = styles;
-    const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
-    const {fontWeight, fontSize, fontStyle, lineHeight} = typoStyle;
-    const style = FontStyle[fontStyle ?? 'normal'];
-    let fontFamily: string;
-
-    switch (theme.font) {
-      case 'SFProText': {
-        fontFamily = `${theme.font}-${SFProText[fontWeight]}${style}`;
-        break;
-      }
-      case 'AlegreyaSans': {
-        fontFamily = `${theme.font}-${AlegreyaSans[fontWeight]}${style}`;
-        break;
-      }
-      default: {
-        fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
-      }
-    }
-
-    return {
-      ...typoStyle,
-      fontFamily,
-      fontSize: scaleSize(fontSize),
-      lineHeight: scaleSize(lineHeight),
-      fontStyle,
-      fontWeight,
-    };
-  };
-
-  const textStyle = getTypoStyle(typography);
+  const textStyle = getTypoStyle(typography, fontFamily);
 
   if (deprecatedValues.includes(typography)) {
     console.warn(
@@ -121,10 +153,42 @@ const Text: React.FC<TextProps> = ({
     <RNText
       {...rest}
       {...getAccessibilityID(rest.accessibilityLabel)}
-      style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
+      style={[
+        style,
+        textStyle,
+        {
+          color: color ?? theme.colors.text.default,
+        },
+      ]}>
       {children ?? ''}
     </RNText>
   );
 };
 
-export {Text, scaleSize};
+const exportFontFamily = (
+  fontWeight: string,
+  typography?: Typography,
+  fontFamily?: string
+): string => {
+  let newFontFamily;
+
+  switch (fontWeight) {
+    case 'bold': {
+      typography = 'action_xs_bold';
+      break;
+    }
+    case 'regular': {
+      typography = 'body_default_regular';
+      break;
+    }
+    default: {
+      typography = 'body_default_regular';
+    }
+  }
+
+  newFontFamily = getTypoStyle(typography, fontFamily).fontFamily;
+
+  return newFontFamily;
+};
+
+export {Text, scaleSize, exportFontFamily, getTypoStyle};

package/Title/index.tsx

@@ -38,7 +38,7 @@ const Title: FC<TitleProps> = ({
   const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
   const buttonTypo: Typography =
     buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
-  const flexStyle = showTrailingAction && {maxWidth: '70%'};
+  const flexStyle = showTrailingAction && {maxWidth: '95%'};
 
   const renderIcon = () => {
     if (!icon) return null;

package/code-scanner.js

@@ -153,7 +153,7 @@ const main = async () => {
     sendMessage(result);
     console.log(result);
   } catch (error) {
-    console.error('Error during scan or calculation:', error);
+    console.error('Error during scan:', error);
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.109.1",
+  "version": "0.110.1-beta.1",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},

package/verify.js

@@ -27,7 +27,7 @@ if (
 
 if (packageVersion > iOSAppTarget || packageVersion > androidAppTarget) {
   throw new Error(
-    `\x1b[41m Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`
+    `\x1b[41m Package ${packageInfo.name} version:${packageInfo.version} require deploymentTarget ${packageVersion}`
   );
 }
 

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "rootDir": ".",
-    "allowUnreachableCode": false,
-    "allowUnusedLabels": false,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
-    "lib": ["esnext"],
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitReturns": false,
-    "noImplicitUseStrict": false,
-    "noStrictGenericChecks": false,
-    "noUncheckedIndexedAccess": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "esnext"
-  }
-}