@momo-kits/foundation 0.75.1-beta.3 → 0.75.1-beta.7

package/Button/index.tsx

@@ -13,6 +13,9 @@ import styles from './styles';
 import {Icon} from '../Icon';
 
 export interface ButtonProps extends TouchableOpacityProps {
+  /**
+   * Defines the visual style of the button.
+   */
   type?:
     | 'primary'
     | 'secondary'
@@ -21,12 +24,40 @@ export interface ButtonProps extends TouchableOpacityProps {
     | 'danger'
     | 'text'
     | 'disabled';
+
+  /**
+   *  Defines the size of the button.
+   */
   size?: 'large' | 'medium' | 'small';
+
+  /**
+   * If true, the button will take the full width of its container.
+   */
   full?: boolean;
+
+  /**
+   *  Specifies the name of the icon that should be placed on the right side of the button.
+   */
   iconRight?: string;
+
+  /**
+   *  Specifies the name of the icon that should be placed on the left side of the button.
+   */
   iconLeft?: string;
+
+  /**
+   * Represents the text that will be displayed on the button.
+   */
   title: string;
+
+  /**
+   *  If true, the icon of button will use the tint color provided by its container.
+   */
   useTintColor?: boolean;
+
+  /**
+   *  A callback function that is called when the button is pressed.
+   */
   onPress: () => void;
 }
 

package/CheckBox/types.ts

@@ -1,10 +1,38 @@
 import {ViewStyle} from 'react-native';
 
 export type CheckBoxProps = {
+  /**
+   * Represents whether the CheckBox is currently checked (`true`) or unchecked (`false`).
+   */
   value: boolean;
+
+  /**
+   *  Optional. If `true`, the user won't be able to interact with the CheckBox.
+   * Defaults to `false` if not provided.
+   */
   disabled?: boolean;
+
+  /**
+   *  Optional. Represents the text label displayed next to the CheckBox.
+   */
   label?: string;
+
+  /**
+   *  A callback function that is called when the value of the CheckBox changes.
+   * Receives the new value of the CheckBox as a parameter.
+   */
   onChange: (value: boolean) => void;
+
+  /**
+   *  Optional. If `true`, the CheckBox will be in an indeterminate state,
+   * which is typically used to represent a "mixed" or "partial" selection state.
+   * Defaults to `false` if not provided.
+   */
   indeterminated?: boolean;
+
+  /**
+   * Optional. Used to apply custom styling to the CheckBox component.
+   * Accepts an object of style properties.
+   */
   style?: ViewStyle;
 };

package/Consts/index.ts

@@ -1,3 +1,4 @@
 export * from './colors+spacing+radius';
 export * from './theme';
 export * from './styles';
+export const GRIDVIEW = false;

package/Icon/types.ts

@@ -1,8 +1,27 @@
 import {ViewStyle} from 'react-native';
 
 export type IconProps = {
+  /**
+   * Represents the identifier or the path for the icon image source.
+   * It is a required property.
+   */
   source: string;
+
+  /**
+   * Optional. Represents the size of the icon.
+   * It can be used to set the width and height of the icon.
+   */
   size?: number;
+
+  /**
+   *  Optional. Represents the color of the icon.
+   * It can be any valid color in @momo-kits/foundation.
+   */
   color?: string;
+
+  /**
+   *  Optional. Used to apply custom styling to the Icon component.
+   * Accepts an object of style properties.
+   */
   style?: ViewStyle;
 };

package/IconButton/index.tsx

@@ -11,8 +11,20 @@ import {Icon} from '../Icon';
 import styles from './styles';
 
 export interface IconButtonProps extends TouchableOpacityProps {
+  /**
+   * Represents the name or key of the icon to be displayed on the IconButton.
+   * It is a required property.
+   */
   icon: string;
+
+  /**
+   * Optional. Defines the visual style of the IconButton.
+   */
   type?: 'primary' | 'tonal' | 'secondary' | 'danger' | 'outline' | 'disabled';
+
+  /**
+   * Optional. Defines the size of the IconButton.
+   */
   size?: 'large' | 'small';
 }
 

package/Input/Input.tsx

@@ -8,15 +8,10 @@ import {
 } from 'react-native';
 import {ApplicationContext} from '../Navigation';
 import styles from './styles';
-import {
-  checkTyping,
-  ErrorView,
-  FloatingView,
-  getBorderColor,
-  getSizeStyle,
-} from './common';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import {Icon} from '../Icon';
+import {checkTyping} from './utils';
 
 const Input: FC<InputProps> = ({
   value,
@@ -33,12 +28,11 @@ const Input: FC<InputProps> = ({
   floatingIconColor,
   iconColor,
   required,
-  defaultValue,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [focused, setFocused] = useState(false);
-  const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
+  const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
 
   const inputRef = useRef<any>(null);
 

package/Input/InputSearch.tsx

@@ -11,7 +11,7 @@ import {ApplicationContext} from '../Navigation';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
-import {checkTyping} from './common';
+import {checkTyping} from './utils';
 
 const InputSearch: FC<InputSearchProps> = ({
   placeholder,

package/Input/common.tsx

@@ -116,10 +116,3 @@ export const FloatingView: FC<FloatingViewProps> = ({
   }
   return null;
 };
-
-export const checkTyping = (text: string, value: boolean, setValue: any) => {
-  let typing = text?.length > 0;
-  if (typing != value) {
-    setValue(typing);
-  }
-};

package/Input/index.tsx

@@ -5,14 +5,52 @@ import InputMoney from './InputMoney';
 import {TextInputProps} from 'react-native';
 
 export interface InputProps extends TextInputProps {
+  /**
+   *  Optional. Defines the size of the Input component.
+   */
   size?: 'small' | 'large';
+
+  /**
+   * Optional. Represents the value for the floating title in the Input component.
+   */
   floatingValue?: string;
+
+  /**
+   * Optional. Represents the name or key of the floating icon to be displayed in the Input component.
+   */
   floatingIcon?: string;
+
+  /**
+   * Optional. Represents the error message to be displayed below the Input component when there is an error.
+   */
   errorMessage?: string;
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
   icon?: string;
+
+  /**
+   * Optional. If `true`, the user won't be able to interact with the Input component.
+   * Defaults to `false` if not provided.
+   */
   disabled?: boolean;
+
+  /**
+   * Optional. Represents the color of the floating icon in the Input component.
+   */
   floatingIconColor?: string;
+
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
   iconColor?: string;
+
+  /**
+   * Optional. If `true`, the Input component is marked as required,
+   * indicating that the user must provide a value before submitting a form.
+   * Defaults to `false` if not provided.
+   */
   required?: boolean;
 }
 
@@ -27,12 +65,29 @@ type InputPropsOmitForSearch = Omit<
 type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
 export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
+  /**
+   * Optional. Defines the height of the InputTextArea component.
+   * It can be used to set a specific height for the text area.
+   */
   height?: number;
 }
 
 export interface InputSearchProps extends InputPropsOmitForSearch {
+  /**
+   * Optional. Represents the text to be displayed on the search button within the InputSearch component.
+   */
   buttonText?: string;
+
+  /**
+   * Optional. If `true`, the text on the search button will be displayed.
+   * Defaults to `false` if not provided.
+   */
   showButtonText?: boolean;
+
+  /**
+   * Optional. If `true`, a border will be displayed around the InputSearch component.
+   * Defaults to `true` if not provided.
+   */
   showBorder?: boolean;
 }
 

package/Input/utils.ts

@@ -59,5 +59,11 @@ const formatMoneyToNumber = (money: string, currencyUnit: string) => {
 
   return Number(money);
 };
+const checkTyping = (text: string, value: boolean, setValue: any) => {
+  let typing = text?.length > 0;
+  if (typing != value) {
+    setValue(typing);
+  }
+};
 
-export {formatMoneyToNumber, formatNumberToMoney};
+export {formatMoneyToNumber, formatNumberToMoney, checkTyping};

package/Layout/Card.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native';
 
 import {CardProps, GridContextProps} from './types';
 import {GridContext} from './index';
+import {GRIDVIEW} from '../Consts';
 
 const Card: React.FC<CardProps> = ({
   widthSpan = 12,
@@ -72,7 +73,7 @@ const Card: React.FC<CardProps> = ({
       <GridContext.Provider value={gridContext}>
         {children}
       </GridContext.Provider>
-      {__DEV__ && renderOverlay()}
+      {GRIDVIEW && renderOverlay()}
     </View>
   );
 };

package/Layout/Section.tsx

@@ -4,6 +4,7 @@ import {validateChildren} from './utils';
 import Card from './Card';
 import {GridContextProps, SectionProps} from './types';
 import {GridContext} from './index';
+import {GRIDVIEW} from '../Consts';
 
 const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
   const numberOfColumns = 12;
@@ -129,7 +130,7 @@ const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
           flexWrap: 'wrap',
         }}>
         {renderView(validateChildren(children, Card))}
-        {__DEV__ && renderOverlay()}
+        {GRIDVIEW && renderOverlay()}
       </View>
     </GridContext.Provider>
   );

package/Layout/types.ts

@@ -3,19 +3,59 @@ import {ViewProps} from 'react-native';
 type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
 export type GridContextProps = {
+  /**
+   * Represents the number of columns in the grid.
+   */
   numberOfColumns: number;
+
+  /**
+   * Represents the size of the gutter between grid items.
+   */
   gutterSize: number;
+
+  /**
+   * Optional. Represents the margin around the grid.
+   */
   margin?: number;
+
+  /**
+   * Represents the size (width or height) per span number.
+   */
   sizePerSpan: number;
+
+  /**
+   * A function that receives a span number and returns the calculated size for that span.
+   */
   getSizeSpan: (span: number) => number;
 };
 export interface SectionProps extends ViewProps {
+  /**
+   * Optional. If `true`, the Section component will be displayed in an expanded state.
+   * Defaults to `false` if not provided.
+   */
   expanded?: boolean;
+
+  /**
+   * Optional. If `true`, margin will be applied to the Section component.
+   * Defaults to `false` if not provided.
+   */
   useMargin?: boolean;
 }
 
 export interface CardProps extends ViewProps {
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
   widthSpan: SpanNumber;
+
+  /**
+   * Optional. Represents the height of the Card component in terms of span numbers (1-12).
+   */
   heightSpan?: SpanNumber;
+
+  /**
+   * Optional. If `true`, padding will be applied to the Card component.
+   * Defaults to `false` if not provided.
+   */
   usePadding?: boolean;
 }

package/Navigation/Components.tsx

@@ -13,11 +13,11 @@ import {Image} from '../Image';
 import {
   HeaderBackgroundProps,
   HeaderBackProps,
+  HeaderToolkitProps,
   TitleCustomProps,
 } from './types';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {requestApi} from './utils';
 import Observer from './Observer';
 import {PopupNotify} from '../Popup';
 
@@ -74,6 +74,7 @@ const styles = StyleSheet.create({
 });
 
 const HeaderTitle: React.FC<any> = props => {
+  const {theme} = useContext(ApplicationContext);
   const opacity = props.animatedValue?.interpolate({
     inputRange: [0, 200],
     outputRange: [0, 1],
@@ -83,12 +84,20 @@ const HeaderTitle: React.FC<any> = props => {
     <Animated.Text
       {...props}
       accessibilityLabel={`HeaderTitle/${props.children}`}
-      style={[styles.title, {opacity, color: props.tintColor}]}
+      style={[
+        styles.title,
+        {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
+      ]}
     />
   );
 };
 
-const HeaderLeft: React.FC<HeaderBackProps> = ({tintColor, preventBack}) => {
+const HeaderLeft: React.FC<HeaderBackProps> = ({
+  tintColor,
+  preventBack,
+  useBorder,
+  backgroundColor,
+}) => {
   const {navigator} = useContext(ApplicationContext);
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
@@ -125,6 +134,8 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({tintColor, preventBack}) => {
         tintColor={tintColor}
         onPress={goBack}
         accessibilityLabel={'Back'}
+        useBorder={useBorder}
+        backgroundColor={backgroundColor}
       />
     </View>
   );
@@ -137,9 +148,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
   let headerImage = theme.assets?.headerBackground;
-  let borderBottomWidth = 0;
   if (image === null) {
-    borderBottomWidth = 1;
     headerImage = undefined;
   }
   const opacity = animatedValue?.interpolate({
@@ -155,7 +164,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
         {
           backgroundColor: backgroundColor ?? theme.colors.background.default,
           overflow: 'hidden',
-          borderBottomWidth: borderBottomWidth,
+          borderBottomWidth: headerImage ? 0 : 1,
           borderColor: theme.colors.border.default,
           opacity,
         },
@@ -207,12 +216,15 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
       console.warn(
         'element type of NavigationButton, Please migrate to use NavigationButton of kits.',
       );
+      return <View />;
     }
   };
   const renderAction = () => {
     if (Array.isArray(children)) {
       return children.map((child, index) => {
-        validType(child);
+        if (__DEV__) {
+          validType(child);
+        }
         return (
           <React.Fragment key={index}>
             {React.cloneElement(child, {...restProps})}
@@ -227,62 +239,80 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   return <View style={styles.headerRightButton}>{renderAction()}</View>;
 };
 
-const HeaderToolkitAction: React.FC<any> = ({tintColor, utilityToolConfig}) => {
-  const {appCode, hidden, type, onAction} = utilityToolConfig ?? {};
-  const {theme} = useContext(ApplicationContext);
-  const [showUtility, setShowUtility] = useState(hidden === false);
+const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const [toolConfig, setToolConfig] = useState<HeaderToolkitProps>();
+  const {appCode, hidden, type, onAction} = toolConfig ?? {};
 
   let backgroundColor;
   if (tintColor != Colors.black_01) {
     backgroundColor = theme.colors.background.surface;
   }
 
+  useEffect(() => {
+    navigator?.getToolkit().then(toolConfig => {
+      setToolConfig(toolConfig);
+    });
+  }, []);
+
   useEffect(() => {
     let addFavorite: any;
     let removeFavorite: any;
-    if (appCode && type === 'addFavorite') {
+    if (appCode) {
       const addSchema = `observerToolkit_addFavorite_${appCode}`;
       const removeSchema = `observerToolkit_removeFavorite_${appCode}`;
-      addFavorite = Observer?.getInstance(addSchema);
-      removeFavorite = Observer?.getInstance(removeSchema);
-
-      addFavorite?.attach((data: any) => {
-        if (data?.status) {
-          setShowUtility(false);
-        }
-      });
-      removeFavorite?.attach((data: any) => {
-        if (data?.status) {
-          setShowUtility(true);
-        }
-      });
+      addFavorite = navigator?.requestApi(
+        'observer',
+        [addSchema],
+        (data: any) => {
+          if (data?.status) {
+            setToolConfig({
+              ...(toolConfig as HeaderToolkitProps),
+              hidden: true,
+            });
+          }
+        },
+      );
+      addFavorite = navigator?.requestApi(
+        'observer',
+        [removeSchema],
+        (data: any) => {
+          if (data?.status) {
+            setToolConfig({
+              ...(toolConfig as HeaderToolkitProps),
+              hidden: false,
+            });
+          }
+        },
+      );
     }
+
     return () => {
       addFavorite?.();
       removeFavorite?.();
     };
-  }, []);
+  }, [appCode]);
 
   const onUtilityTool = () => {
     onAction?.('onUtilityTool');
-    requestApi(type, [undefined], undefined);
+    navigator?.requestApi(type, undefined, undefined);
   };
 
   const onMore = () => {
     onAction?.('onMore');
-    requestApi('showToolkit', [utilityToolConfig], undefined);
+    navigator?.requestApi('showToolkit', [toolConfig], undefined);
   };
 
   const onClose = () => {
     onAction?.('onClose');
-    requestApi('dismiss', [], undefined);
+    navigator?.requestApi('dismiss', undefined, undefined);
   };
 
   const renderUtilityTool = () => {
-    if (showUtility) {
+    if (toolConfig?.hidden === false) {
       return (
         <NavigationButton
-          icon={type}
+          icon={type as string}
           tintColor={tintColor}
           onPress={onUtilityTool}
         />
@@ -290,33 +320,39 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor, utilityToolConfig}) => {
     }
   };
 
-  return (
-    <View style={styles.headerRightButton}>
-      {renderUtilityTool()}
-      <View
-        style={[
-          styles.toolkitContainer,
-          {
-            backgroundColor: backgroundColor ?? '#00000066',
-            borderWidth: backgroundColor ? 0.5 : 0,
-          },
-        ]}>
-        <TouchableOpacity accessibilityLabel={'Toolkit/More'} onPress={onMore}>
-          <Icon color={tintColor} source="navigation_more_horiz" size={20} />
-        </TouchableOpacity>
-        <View style={[styles.divider, {backgroundColor: tintColor}]} />
-        <TouchableOpacity
-          accessibilityLabel={'Toolkit/Close'}
-          onPress={onClose}>
-          <Icon
-            color={tintColor}
-            source="16_navigation_close_circle"
-            size={20}
-          />
-        </TouchableOpacity>
+  if (toolConfig) {
+    return (
+      <View style={styles.headerRightButton}>
+        {renderUtilityTool()}
+        <View
+          style={[
+            styles.toolkitContainer,
+            {
+              backgroundColor: backgroundColor ?? '#00000066',
+              borderWidth: backgroundColor ? 0.5 : 0,
+            },
+          ]}>
+          <TouchableOpacity
+            accessibilityLabel={'Toolkit/More'}
+            onPress={onMore}>
+            <Icon color={tintColor} source="navigation_more_horiz" size={20} />
+          </TouchableOpacity>
+          <View style={[styles.divider, {backgroundColor: tintColor}]} />
+          <TouchableOpacity
+            accessibilityLabel={'Toolkit/Close'}
+            onPress={onClose}>
+            <Icon
+              color={tintColor}
+              source="16_navigation_close_circle"
+              size={20}
+            />
+          </TouchableOpacity>
+        </View>
       </View>
-    </View>
-  );
+    );
+  }
+
+  return <View />;
 };
 
 export {

package/Navigation/ModalScreen.tsx

@@ -18,6 +18,7 @@ import {
   NavigationButton,
   NavigationContainer,
 } from './index';
+import {HeaderBackground, HeaderLeft} from './Components';
 
 const ModalScreen: React.FC<any> = props => {
   useEffect(() => {
@@ -114,7 +115,6 @@ const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
   if (options?.surface) {
     backgroundColor = theme.colors.background.surface;
   }
-  const sheetTheme = {...theme, assets: undefined};
 
   return (
     <SafeAreaView style={Styles.flex}>
@@ -141,11 +141,30 @@ const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
               />
             </View>
             <NavigationContainer
-              theme={sheetTheme}
+              theme={{
+                ...theme,
+                assets: {...theme.assets, headerBackground: undefined},
+              }}
               screen={props => <Component {...props} {...params} />}
               options={{
                 ...options,
-                ...{headerLeft: null, headerTransparent: false},
+                ...{
+                  headerLeft: (props: any) => {
+                    if (props.canGoBack) {
+                      return (
+                        <HeaderLeft
+                          {...props}
+                          useBorder={false}
+                          backgroundColor="transparent"
+                        />
+                      );
+                    }
+                  },
+                  headerBackground: () => (
+                    <HeaderBackground backgroundColor={backgroundColor} />
+                  ),
+                  headerTransparent: false,
+                },
                 headerTitleAlign: 'center',
                 headerRight: props => (
                   <HeaderRightAction>

package/Navigation/Navigation.ts

@@ -2,6 +2,7 @@ import {NavigationProp} from '@react-navigation/native';
 import {NavigationOptions, Theme} from './types';
 import {HeaderRightAction} from './index';
 import {getOptions} from './utils';
+import {HeaderToolkitAction} from './Components';
 
 class Navigation {
   instance: NavigationProp<any>;
@@ -15,9 +16,12 @@ class Navigation {
   verifyParams = (params: NavigationOptions) => {
     if (params.headerRight) {
       const headerRight = params.headerRight?.();
-      if (headerRight.type !== HeaderRightAction) {
+      if (
+        headerRight?.type !== HeaderRightAction &&
+        headerRight?.type !== HeaderToolkitAction
+      ) {
         console.warn(
-          'headerRight not return element type of HeaderRightAction, Please migrate to use HeaderRightAction of kits.',
+          'headerRight not return element type of HeaderRightAction | HeaderToolkitAction, Please migrate to use of kits.',
         );
       }
     }
@@ -29,7 +33,9 @@ class Navigation {
   };
 
   setOptions = (params: NavigationOptions) => {
-    params = this.verifyParams(params);
+    if (__DEV__) {
+      params = this.verifyParams(params);
+    }
     params = getOptions(params, this.theme);
     this.instance.setOptions(params);
   };

package/Navigation/NavigationContainer.tsx

@@ -11,7 +11,7 @@ import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {GridSystem} from '../Layout';
-import {defaultContext} from '../Consts';
+import {defaultContext, GRIDVIEW} from '../Consts';
 import {NavigationContainerProps} from './types';
 
 const Stack = createStackNavigator();
@@ -21,15 +21,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme,
   options,
+  maxApi,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
-
-  useEffect(() => {
-    if (options) {
-      navigationRef.current?.setParams({options: options});
-    }
-  }, []);
+  navigator.current.maxApi = maxApi;
 
   return (
     <SafeAreaProvider>
@@ -39,7 +35,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
           <ReactNavigationContainer
             theme={{
               ...theme,
-              dark: false,
               colors: {
                 ...theme.colors,
                 background: theme.colors.background.default,
@@ -56,7 +51,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
                 name="Stack"
                 component={StackScreen}
                 initialParams={{screen}}
-                options={getStackOptions(theme)}
+                options={{...getStackOptions(theme), ...options}}
               />
               <Stack.Screen
                 name="Dialog"
@@ -74,7 +69,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
           </ReactNavigationContainer>
         </ApplicationContext.Provider>
       </BottomSheetModalProvider>
-      {__DEV__ && <GridSystem />}
+      {GRIDVIEW && <GridSystem />}
     </SafeAreaProvider>
   );
 };

package/Navigation/Navigator.ts

@@ -1,10 +1,15 @@
 import {StackActions} from '@react-navigation/native';
-import {BottomSheetParams, ModalParams, ScreenParams} from './types';
-import {requestApi} from './utils';
+import {
+  BottomSheetParams,
+  HeaderToolkitProps,
+  ModalParams,
+  ScreenParams,
+} from './types';
 
 class Navigator {
   ref?: any;
-  utilityToolConfig: any;
+  toolkitConfig?: HeaderToolkitProps;
+  maxApi?: any;
 
   constructor(navigation: any) {
     this.ref = navigation;
@@ -43,17 +48,28 @@ class Navigator {
     this.ref.current.dispatch(StackActions.popToTop());
   };
 
-  getToolkit = async () => {
-    if (this.utilityToolConfig) return this.utilityToolConfig;
+  requestApi = (func: any, args: any = [], callback: any) => {
+    if (this.maxApi) {
+      this.maxApi[func]?.(...args, callback);
+    } else {
+      const instance: any = global;
+      instance?.miniAppApi?.dispatch?.(func, ...args, callback);
+    }
+  };
+  getToolkit = async (): Promise<HeaderToolkitProps | undefined> => {
     return new Promise(resolve => {
-      requestApi('getToolkit', [null], (result: any) => {
-        if (result === true) {
-          requestApi('getToolkitConfig', [null], (config: any) => {
-            this.utilityToolConfig = {
+      if (this.toolkitConfig) {
+        resolve(this.toolkitConfig);
+        return;
+      }
+      this.requestApi('getToolkit', [undefined], (result: boolean) => {
+        if (result) {
+          this.requestApi('getToolkitConfig', [undefined], (config: any) => {
+            this.toolkitConfig = {
               ...config?.utilityToolConfig,
               appCode: config?.appCode,
             };
-            resolve(this.utilityToolConfig);
+            resolve(this.toolkitConfig);
           });
         } else {
           resolve(undefined);

package/Navigation/StackScreen.tsx

@@ -2,7 +2,6 @@ import React, {useContext, useEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext} from './NavigationContainer';
-import {HeaderToolkitAction} from './Components';
 
 const StackScreen: React.FC<any> = props => {
   const {route, navigation} = props;
@@ -17,18 +16,6 @@ const StackScreen: React.FC<any> = props => {
   delete params.screen;
 
   useEffect(() => {
-    navigator?.getToolkit().then(utilityToolConfig => {
-      if (utilityToolConfig) {
-        params.navigation.setOptions({
-          headerRight: (props: any) => (
-            <HeaderToolkitAction
-              {...props}
-              utilityToolConfig={utilityToolConfig}
-            />
-          ),
-        });
-      }
-    });
     if (options) {
       params.navigation.setOptions(options);
     }

package/Navigation/types.ts

@@ -67,6 +67,7 @@ export type NavigationContainerProps = {
   screen: React.ElementType;
   options?: NavigationOptions;
   theme: Theme;
+  maxApi?: any;
 };
 
 export interface ScreenContainerProps extends ViewProps {
@@ -115,10 +116,9 @@ export type NavigationOptions = {
   animatedValue?: Animated.Value;
 };
 
-export type HeaderBackProps = {
-  tintColor?: string;
+export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
-};
+}
 
 export type HeaderBackgroundProps = {
   image?: string | null;
@@ -136,6 +136,14 @@ export type TitleCustomProps = {
   content?: React.ReactNode;
 };
 
+export type HeaderToolkitProps = {
+  [key: string]: any;
+  appCode: string;
+  hidden: boolean;
+  type: string;
+  onAction?: (action: string) => void;
+};
+
 export type BottomTabItemProps = {
   label: string;
   icon: string;

package/Navigation/utils.tsx

@@ -3,41 +3,16 @@ import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import {DeviceEventEmitter} from 'react-native';
 import {
   HeaderBackground,
   HeaderCustom,
   HeaderLeft,
   HeaderTitle,
+  HeaderToolkitAction,
 } from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
 
-const requestApi = (func: any, args: any = [], callback: any) => {
-  const instance: any = global;
-  if (instance?.miniAppApi?.dispatch) {
-    instance?.miniAppApi?.dispatch?.(func, ...args, callback);
-  } else {
-    let listener: any;
-    const responseId = new Date().getTime();
-    const responseListener = `KIT_RESPONSE_MESSAGE_${responseId}`;
-    const TIME_OUT = 5000;
-    const timeout = setTimeout(() => {
-      listener?.remove?.();
-    }, TIME_OUT);
-    listener = DeviceEventEmitter.addListener(responseListener, result => {
-      listener?.remove?.();
-      clearTimeout(timeout);
-      callback?.(result);
-    });
-    DeviceEventEmitter.emit('KITS_REQUEST_MESSAGE', {
-      func,
-      args,
-      responseListener,
-    });
-  }
-};
-
 const getTintColor = (theme: Theme): any => {
   if (theme.assets?.headerBackground) {
     return {
@@ -55,6 +30,7 @@ const getStackOptions = (theme: Theme): StackNavigationOptions => {
     headerTitle: HeaderTitle,
     headerBackground: HeaderBackground,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
     ...getTintColor(theme),
   };
 };
@@ -158,10 +134,4 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-export {
-  requestApi,
-  getStackOptions,
-  getDialogOptions,
-  getModalOptions,
-  getOptions,
-};
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Pagination/types.ts

@@ -2,8 +2,23 @@ import {ScrollView, ScrollViewProps, ViewStyle} from 'react-native';
 import {Ref} from 'react';
 
 export type PaginationProps = {
+  /**
+   * Optional. Defines the visual style of the Pagination component.
+   * - 'default': Represents the default style.
+   * - 'black_white': Represents a pagination that have black background.
+   * - 'number': Represents a style where pages are represented by numbers.
+   * - 'scroll': Represents a scrollable style.
+   */
   type?: 'default' | 'black_white' | 'number' | 'scroll';
+
+  /**
+   * Represents the currently active (selected) index in the Pagination component.
+   */
   activeIndex: number;
+
+  /**
+   * Represents the total number of items (pages) in the Pagination component.
+   */
   dataLength: number;
 };
 
@@ -13,6 +28,10 @@ export type DotProps = {
 };
 
 export interface ScrollIndicatorProps extends ScrollViewProps {
+  /**
+   * Optional. Represents a reference to the ScrollView component.
+   * It can be used to access the instance methods of the ScrollView.
+   */
   scrollViewRef?: Ref<ScrollView>;
 }
 

package/Popup/PopupNotify.tsx

@@ -183,7 +183,7 @@ const styles = StyleSheet.create({
   },
   contentAction: {
     paddingHorizontal: Spacing.XL,
-    paddingBottom: Spacing.L,
+    paddingBottom: Spacing.XL,
   },
   buttonSpace: {
     width: Spacing.S,

package/Popup/types.ts

@@ -1,21 +1,69 @@
 export type PopupNotifyProps = {
+  /**
+   * `image`: Optional. Represents the URL or path of the image to be displayed in the PopupNotify component.
+   */
   image?: string;
+
+  /**
+   * `title`: Represents the title text to be displayed in the PopupNotify component.
+   */
   title: string;
+
+  /**
+   * `description`: Represents the description text to be displayed in the PopupNotify component.
+   */
   description: string;
+
+  /**
+   * `information`: Optional. Represents additional information text to be displayed in the PopupNotify component.
+   */
   information?: string;
+
+  /**
+   * `secondary`: Optional. Represents the secondary action that can be performed from the PopupNotify component.
+   */
   secondary?: PopupAction;
+
+  /**
+   * `primary`: Represents the primary action that can be performed from the PopupNotify component.
+   */
   primary: PopupAction;
+
+  /**
+   * `buttonDirection`: Optional. Represents the direction in which the action buttons are laid out.
+   * - 'row': Buttons are laid out horizontally.
+   * - 'column': Buttons are laid out vertically.
+   * - 'auto': The layout is automatically determined by title length.
+   */
   buttonDirection?: PopupActionDirection;
+
+  /**
+   * `onIconClose`: Optional. A callback function that is called when the close icon in the PopupNotify component is pressed.
+   */
   onIconClose?: () => void;
 };
 
 export type PopupPromotionProps = {
+  /**
+   * `image`: Represents the URL or path of the image to be displayed in the PopupPromotion component.
+   */
   image: string;
+
+  /**
+   * `onClose`: Optional. A callback function that is called when the PopupPromotion component is closed.
+   */
   onClose?: () => void;
 };
 
 type PopupAction = {
+  /**
+   * `title`: Represents the title text of the action button.
+   */
   title: string;
+
+  /**
+   * `onPress`: A callback function that is called when the action button is pressed.
+   */
   onPress: () => void;
 };
 

package/Radio/types.ts

@@ -1,10 +1,38 @@
 import {ViewStyle} from 'react-native';
 
 export type RadioProps = {
+  /**
+   * `value`: Represents the value associated with the Radio component.
+   * It is used to determine whether the Radio component is selected or not in comparison with the `groupValue`.
+   */
   value: string;
+
+  /**
+   * `disabled`: Optional. If `true`, the user won't be able to interact with the Radio component.
+   * Defaults to `false` if not provided.
+   */
   disabled?: boolean;
+
+  /**
+   * `label`: Optional. Represents the text label displayed next to the Radio component.
+   */
   label?: string;
+
+  /**
+   * `onChange`: A callback function that is called when the value of the Radio component changes.
+   * It is triggered when the user interacts with the Radio component.
+   */
   onChange: () => void;
+
+  /**
+   * `groupValue`: Represents the value of the selected Radio component within a group of Radio components.
+   * The Radio component for which `value` equals `groupValue` will be selected.
+   */
   groupValue: string;
+
+  /**
+   * `style`: Optional. Used to apply custom styling to the Radio component.
+   * Accepts an object of style properties.
+   */
   style?: ViewStyle;
 };

package/Switch/types.ts

@@ -1,8 +1,26 @@
 import {ViewStyle} from 'react-native';
 
 export type SwitchProps = {
+  /**
+   * `value`: Represents whether the Switch component is currently in the 'on' (`true`) or 'off' (`false`) state.
+   */
   value: boolean;
+
+  /**
+   * `onChange`: A callback function that is called when the value of the Switch component changes.
+   * It receives the new value of the Switch as a parameter.
+   */
   onChange: (value: boolean) => void;
+
+  /**
+   * `disabled`: Optional. If `true`, the user won't be able to interact with the Switch component.
+   * Defaults to `false` if not provided.
+   */
   disabled?: boolean;
+
+  /**
+   * `style`: Optional. Used to apply custom styling to the Switch component.
+   * Accepts an object of style properties.
+   */
   style?: ViewStyle;
 };

package/Tag/types.ts

@@ -1,10 +1,36 @@
 import {ViewStyle} from 'react-native';
 
 export type TagProps = {
+  /**
+   * `label`: Represents the text label displayed on the Tag component.
+   */
   label: string;
+
+  /**
+   * `size`: Optional. Defines the size of the Tag component.
+   * Defaults to 'medium' if not provided.
+   */
   size?: 'medium' | 'large';
+
+  /**
+   * `icon`: Optional. Represents the name or key of the icon to be displayed in the Tag component.
+   */
   icon?: string;
+
+  /**
+   * `color`: Optional. Defines the color style of the Tag component.
+   */
   color?: 'default' | 'orange' | 'green' | 'red' | 'blue' | 'grey';
+
+  /**
+   * `style`: Optional. Used to apply custom styling to the Tag component.
+   * Accepts an object of style properties.
+   */
   style?: ViewStyle;
+
+  /**
+   * `customColor`: Optional. Represents a custom color string (e.g., hex, rgb, rgba, etc.)
+   * that can be applied to the Tag component.
+   */
   customColor?: string;
 };

package/Text/index.tsx

@@ -39,11 +39,24 @@ const FontStyle: {[key: string]: string} = {
 };
 
 export interface TextProps extends RNTextProps {
+  /**
+   * Represents the typography style applied to the Text component.
+   * It defines the appearance of the text in terms of font size, weight, line height etc.
+   */
   typography: Typography;
+
+  /**
+   * Optional. Represents the color of the text in the Text component.
+   * It can be any valid color string (e.g., hex, rgb, rgba, etc.).
+   */
   color?: string;
+
+  /**
+   * Optional. Represents the width of the Text component in terms of span numbers.
+   * It can be used to set a specific width for the text based on a predefined grid system.
+   */
   widthSpan?: number;
 }
-
 const Text: React.FC<TextProps> = ({
   typography,
   color,

package/package.json

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