@momo-kits/foundation 0.109.1-optimize.17-beta.19 → 0.109.1-optimize.18

package/Application/BottomTab/BottomTabBar.tsx

@@ -16,7 +16,7 @@ import {
   View,
 } from 'react-native';
 import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {Colors, Radius} from '../../Consts';
+import {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={[
-        floatingButton ? styles.tabBarFloatingButton : styles.tabBar,
+        styles.tabBar,
         {
           backgroundColor: theme.colors.background.surface,
           borderTopColor: theme.colors.border.default,
@@ -253,17 +253,6 @@ 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 {exportFontFamily, Text} from '../../Text';
+import {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: exportFontFamily('bold'),
+                fontFamily: `${theme.font}-Bold`,
                 left: isDot ? 8 : 4,
                 top: isDot ? -2 : -6,
                 backgroundColor: isNum ? Colors.red_03 : Colors.orange_03,

package/Application/Components/HeaderBackground.tsx

@@ -13,7 +13,7 @@ const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
  */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
-  animatedValue = new Animated.Value(0),
+  animatedValue,
   useGradient = true,
   useShadowHeader = true,
   gradientColor,

package/Application/Components/HeaderExtendHeader.tsx

@@ -46,7 +46,6 @@ 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],
@@ -95,9 +94,7 @@ const HeaderExtendHeader: React.FC<{
         <Animated.View style={{height: height}} />
         <Animated.View
           style={[
-            isIos && useShadowHeader
-              ? styles.shadowHeader
-              : styles.dividerHeader,
+            useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
             {
               backgroundColor: theme.colors.background.surface,
               opacity: opacityBackground,
@@ -247,14 +244,8 @@ const styles = StyleSheet.create({
         shadowRadius: 10,
       },
       android: {
-        shadowColor: Colors.black_17,
-        shadowOffset: {
-          width: 3,
-          height: 3,
-        },
-        shadowOpacity: 0.12,
-        shadowRadius: 10,
-        elevation: 10,
+        borderBottomWidth: 1,
+        borderColor: Colors.black_04,
       },
     }),
   },

package/Application/Components/HeaderRight.tsx

@@ -65,7 +65,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (useShortcut) {
       checkAppIsFavorite();
     }
-  }, [useShortcut, useMore, tools]);
+  }, []);
 
   let buttonStyle: ViewStyle = {};
   if (tintColor === Colors.black_01) {
@@ -147,9 +147,6 @@ 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: (
@@ -160,7 +157,7 @@ const HeaderToolkitAction: React.FC<any> = ({
             />
             <View>
               <Text typography={'label_default_medium'}>{appName}</Text>
-              {isShowDescription && (
+              {!!appDescription && (
                 <Text
                   typography={'description_default_regular'}
                   color={Colors.black_12}>

package/Application/Components/HeaderTitle.tsx

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native';
 import {ApplicationContext, MiniAppContext} from '../index';
-import {exportFontFamily, scaleSize, Text} from '../../Text';
+import {scaleSize, Text} from '../../Text';
 import {Colors, Spacing, Styles} from '../../Consts';
 import {TitleJourneyProps, TitleLocationProps, TitleUserProps} from '../types';
 import {Image} from '../../Image';
@@ -17,6 +17,7 @@ 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],
@@ -32,11 +33,7 @@ const HeaderTitle: React.FC<any> = props => {
         accessibilityLabel={'title_navigation_header'}
         style={[
           styles.title,
-          {
-            fontFamily: exportFontFamily('bold', 'action_xs_bold'),
-            opacity,
-            color: props.tintColor,
-          },
+          {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
         ]}
         numberOfLines={1}
       />
@@ -194,18 +191,13 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
   tintColor,
   onPress,
 }) => {
-  const {width} = Dimensions.get('screen');
-  const startWidth = width * 0.25;
-  const endWidth = width * 0.75 - 212;
   return (
-    <TouchableOpacity style={styles.headerTitleContainer} onPress={onPress}>
+    <TouchableOpacity
+      style={[styles.headerTitleContainer, {overflow: 'hidden'}]}
+      onPress={onPress}>
       <View style={styles.rowJourney}>
         <View style={Styles.row}>
-          <Text
-            typography="action_xs_bold"
-            style={{maxWidth: startWidth}}
-            color={tintColor}
-            numberOfLines={1}>
+          <Text typography="action_xs_bold" color={tintColor} numberOfLines={1}>
             {start}
           </Text>
           <Icon
@@ -216,7 +208,6 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
           />
           {!!end && (
             <Text
-              style={{maxWidth: endWidth}}
               typography="action_xs_bold"
               color={tintColor}
               numberOfLines={1}>

package/Application/StackScreen.tsx

@@ -239,7 +239,12 @@ const StackScreen: React.FC<ScreenParams> = props => {
           }, 2000);
         },
       }}>
-      <Component heightHeader={heightHeader} {...data} />
+      <Component
+        {...data}
+        heightHeader={heightHeader}
+        onScreenLoad={onScreenLoad}
+        onScreenInteraction={onScreenInteraction}
+      />
       {showGrid && <GridSystem />}
     </ScreenContext.Provider>
   );

package/Input/Input.tsx

@@ -17,7 +17,7 @@ import {
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {exportFontFamily, Text} from '../Text';
+import {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,
+      fontWeight = 'Regular',
       secureTextEntry,
       keyboardType,
       style,
@@ -93,17 +93,12 @@ 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: _setText,
+        setText: (text: string) => _onChangeText(text),
       };
     });
 
@@ -223,7 +218,7 @@ const Input = forwardRef(
                 styles.input,
                 {
                   color: textColor,
-                  fontFamily: exportFontFamily(fontWeight ?? 'regular'),
+                  fontFamily: `${theme.font}-${fontWeight}`,
                 },
                 secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
               ]}

package/Input/InputSearch.tsx

@@ -165,17 +165,12 @@ 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: _setText,
+      setText: (text: string) => _onChangeText(text),
     };
   });
 
@@ -213,7 +208,6 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         ]}
         value={value}
         onChangeText={_onChangeText}
-        defaultValue={defaultValue}
         onFocus={_onFocus}
         onBlur={_onBlur}
         placeholder={placeholder}

package/Input/index.tsx

@@ -110,7 +110,7 @@ export interface InputProps extends TextInputProps {
   /**
    * Optional. Represents the font weight of the text in the Input component.
    */
-  fontWeight?: string;
+  fontWeight?: 'Regular' | 'Bold';
 
   /**
    * Optional. params for element tracking.

package/Layout/Screen.tsx

@@ -344,8 +344,12 @@ const Screen = forwardRef(
     const setSearchHeader = (params: SearchHeaderProps) => {
       const options: StackNavigationOptions = {
         headerRight: undefined,
-        headerTitle: () => (
-          <SearchHeader {...params} animatedValue={animatedValue.current} />
+        headerTitle: (props: any) => (
+          <SearchHeader
+            {...props}
+            {...params}
+            animatedValue={animatedValue.current}
+          />
         ),
       };
 

package/Radio/index.tsx

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

package/Radio/styles.ts

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

package/Text/index.tsx

@@ -33,20 +33,6 @@ 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: '',
@@ -64,12 +50,6 @@ 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[] = [
@@ -87,61 +67,49 @@ 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 textStyle = getTypoStyle(typography, fontFamily);
+  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);
 
   if (deprecatedValues.includes(typography)) {
     console.warn(
@@ -153,42 +121,10 @@ 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>
   );
 };
 
-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};
+export {Text, scaleSize};

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: '95%'};
+  const flexStyle = showTrailingAction && {maxWidth: '70%'};
 
   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:', error);
+    console.error('Error during scan or calculation:', error);
   }
 };
 

package/package.json

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

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "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"
+  }
+}

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}`
   );
 }