@momo-kits/foundation 0.77.8-beta.3 → 0.77.8-beta.4

package/Application/BottomTab.tsx

@@ -8,17 +8,27 @@ import {ApplicationContext} from './index';
 
 const Tab = createBottomTabNavigator();
 
-const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners}) => {
+const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners, navigation}) => {
   const {theme} = useContext(ApplicationContext);
+
+  const defaultListener = {
+    focus: (item: any) => {
+      const focusItem = tabs.find(i => item.target.includes(i.name));
+      if (focusItem?.options) {
+        navigation?.setOptions?.(focusItem.options);
+      }
+    },
+  };
+
   return (
-    <Tab.Navigator>
+    <Tab.Navigator backBehavior={'firstRoute'}>
       {tabs.map(item => {
         return (
           <Tab.Screen
             key={item.name}
             name={item.name}
             component={item.screen}
-            listeners={listeners}
+            listeners={listeners ?? defaultListener}
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (

package/Application/ModalScreen.tsx

@@ -1,4 +1,11 @@
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   KeyboardAvoidingView,
   Platform,
@@ -6,7 +13,7 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {SafeAreaView} from 'react-native-safe-area-context';
 import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
 import Navigation from './Navigation';
 import {BottomSheetParams, ModalParams} from './types';
@@ -84,7 +91,11 @@ const Modal: React.FC<ModalParams> = props => {
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const {screen, options}: BottomSheetParams = props.route.params;
+  const {
+    screen,
+    options,
+    useSnap = true,
+  }: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -94,11 +105,36 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   delete params.screen;
 
-  const snapPoints = useMemo(() => ['50%', '90%'], []);
-  const {bottom} = useSafeAreaInsets();
+  const [contentHeight, setContentHeight] = useState(undefined);
+  const snapPoints = useMemo(() => {
+    if (useSnap) {
+      return ['50%', '90%'];
+    }
+    return [contentHeight ?? '50%'];
+  }, [contentHeight]);
+
   const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
 
+  let handleOnLayout;
+  if (useSnap) {
+    handleOnLayout = useCallback(
+      ({
+        nativeEvent: {
+          layout: {height},
+        },
+      }) => {
+        setContentHeight(height);
+      },
+      [],
+    );
+  }
+
+  let backgroundColor = theme.colors.background.default;
+  if (options?.surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
   useEffect(() => {
     bottomSheetRef.current?.present();
     return () => {
@@ -114,11 +150,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     />
   );
 
-  let backgroundColor = theme.colors.background.default;
-  if (options?.surface) {
-    backgroundColor = theme.colors.background.surface;
-  }
-
   return (
     <SafeAreaView style={Styles.flex}>
       <BottomSheetModal
@@ -131,9 +162,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         }}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View
-          style={{paddingBottom: bottom}}
-          accessibilityLabel={'BottomSheet'}>
+        <View onLayout={handleOnLayout} accessibilityLabel={'BottomSheet'}>
           <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View

package/Application/types.ts

@@ -108,6 +108,7 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
+  useSnap?: boolean;
 }
 
 export type NavigationButtonProps = {
@@ -171,10 +172,12 @@ export type BottomTabItemProps = {
   showDot?: boolean;
   badgeLabel?: string;
   screen: Screen;
+  options: NavigationOptions;
 };
 
 export type BottomTabProps = {
   tabs: BottomTabItemProps[];
+  navigation: Navigation;
   listeners?: {
     tabPress?: any;
     focus?: any;

package/CheckBox/index.tsx

@@ -36,7 +36,7 @@ const CheckBox: FC<CheckBoxProps> = ({
 
   return (
     <TouchableOpacity
-      accessibilityLabel={`CheckBox/${label}`}
+      accessibilityLabel={`CheckBox/${label}/${value}`}
       activeOpacity={0.8}
       onPress={() => onChange?.(!value)}
       disabled={disabled}

package/CheckBox/styles.ts

@@ -11,5 +11,5 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  container: {flexDirection: 'row'},
+  container: {flexDirection: 'row', alignItems: 'center'},
 });

package/Input/Input.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext, useEffect, useRef, useState} from 'react';
+import React, {FC, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -28,6 +28,7 @@ const Input: FC<InputProps> = ({
   floatingIconColor,
   iconColor,
   required,
+  errorSpacing,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -71,10 +72,10 @@ const Input: FC<InputProps> = ({
     return (
       <View
         style={[
-          getSizeStyle(size),
-          getBorderColor(focused, errorMessage, disabled),
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
+          getSizeStyle(size),
+          getBorderColor(theme, focused, errorMessage, disabled),
         ]}>
         <FloatingView
           floatingValue={floatingValue}
@@ -126,7 +127,7 @@ const Input: FC<InputProps> = ({
   return (
     <View style={styles.wrapper} accessibilityLabel={`Input/${floatingValue}`}>
       {renderInputView()}
-      <ErrorView errorMessage={errorMessage} />
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
     </View>
   );
 };

package/Input/InputMoney.tsx

@@ -26,6 +26,7 @@ const InputMoney: FC<InputMoneyProps> = ({
   floatingIconColor,
   iconColor,
   required,
+  errorSpacing,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -71,10 +72,10 @@ const InputMoney: FC<InputMoneyProps> = ({
     return (
       <View
         style={[
-          getSizeStyle(size),
-          getBorderColor(focused, errorMessage, disabled),
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
+          getSizeStyle(size),
+          getBorderColor(theme, focused, errorMessage, disabled),
         ]}>
         <FloatingView
           floatingValue={floatingValue}
@@ -127,7 +128,7 @@ const InputMoney: FC<InputMoneyProps> = ({
       style={styles.wrapper}
       accessibilityLabel={`InputMoney/${floatingValue}`}>
       {renderInputView()}
-      <ErrorView errorMessage={errorMessage} />
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
     </View>
   );
 };

package/Input/InputSearch.tsx

@@ -55,18 +55,6 @@ const InputSearch: FC<InputSearchProps> = ({
     onChangeText?.(text);
   };
 
-  const getBorderColor = () => {
-    let borderColor = showBorder
-      ? theme.colors.border.default
-      : theme.colors.background.surface;
-
-    if (focused) {
-      borderColor = theme.colors.primary;
-    }
-
-    return {borderColor};
-  };
-
   const renderInputView = () => {
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
@@ -135,11 +123,13 @@ const InputSearch: FC<InputSearchProps> = ({
       accessibilityLabel={`InputSearch/${placeholder}`}>
       <View
         style={[
-          getBorderColor(),
           styles.searchInputWrapper,
           {
             backgroundColor: theme.colors.background.surface,
+            borderColor: theme.colors.background.surface,
           },
+          showBorder && {borderColor: theme.colors.border.default},
+          focused && {borderColor: theme.colors.primary},
         ]}>
         <Icon
           source={'navigation_search'}

package/Input/InputTextArea.tsx

@@ -34,6 +34,7 @@ const InputTextArea: FC<InputTextAreaProps> = ({
   placeholder,
   maxLength,
   required,
+  errorSpacing,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -83,12 +84,12 @@ const InputTextArea: FC<InputTextAreaProps> = ({
     return (
       <View
         style={[
-          getBorderColor(focused, errorMessage, disabled),
           styles.textAreaWrapper,
           {
             height: height || DEFAULT_HEIGHT,
             backgroundColor: theme.colors.background.surface,
           },
+          getBorderColor(theme, focused, errorMessage, disabled),
         ]}>
         <FloatingView
           floatingValue={floatingValue}
@@ -143,7 +144,7 @@ const InputTextArea: FC<InputTextAreaProps> = ({
       style={styles.wrapper}
       accessibilityLabel={`InputTextArea/${floatingValue}`}>
       {renderInputView()}
-      <ErrorView errorMessage={errorMessage} />
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
     </View>
   );
 };

package/Input/common.tsx

@@ -5,6 +5,7 @@ import React, {FC, useContext} from 'react';
 import {ApplicationContext} from '../Application';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
+import {Theme} from '../Application/types';
 
 type FloatingViewProps = {
   floatingValue?: string;
@@ -18,12 +19,11 @@ export const DEFAULT_HEIGHT = 112;
 export const MAX_LENGTH = 300;
 
 export const getBorderColor = (
+  theme: Theme,
   focused: boolean,
   errorMessage?: string,
   disabled?: boolean,
 ) => {
-  const {theme} = useContext(ApplicationContext);
-
   let borderColor = theme.colors.border.default;
 
   if (focused) {
@@ -47,7 +47,10 @@ export const getSizeStyle = (size?: 'small' | 'large') => {
   }
   return styles.container;
 };
-export const ErrorView: FC<{errorMessage?: string}> = ({errorMessage}) => {
+export const ErrorView: FC<{errorMessage?: string; errorSpacing?: boolean}> = ({
+  errorMessage,
+  errorSpacing,
+}) => {
   const {theme} = useContext(ApplicationContext);
   const errorColor = theme.colors.error.primary;
   if (errorMessage) {
@@ -66,7 +69,10 @@ export const ErrorView: FC<{errorMessage?: string}> = ({errorMessage}) => {
       </View>
     );
   }
-  return null;
+  if (errorSpacing) {
+    return <View style={[styles.errorView, {height: 18}]} />;
+  }
+  return <View />;
 };
 
 export const FloatingView: FC<FloatingViewProps> = ({

package/Input/index.tsx

@@ -52,6 +52,13 @@ export interface InputProps extends TextInputProps {
    * Defaults to `false` if not provided.
    */
   required?: boolean;
+
+  /**
+   * Optional. If `true`,
+   * include spacing when Input not have error message.
+   * Defaults to `false` if not provided.
+   */
+  errorSpacing?: boolean;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<

package/Layout/GridSystem.tsx

@@ -51,7 +51,7 @@ const GridSystem: React.FC<any> = ({
             bottom: Spacing.M,
           },
         ]}>
-        {list.map((i, index) => {
+        {list.map((_, index) => {
           return (
             <View style={{flexDirection: 'row'}} key={index.toString()}>
               {index != -0 && <View style={{width: grid.gutterSize}} />}

package/Layout/Screen.tsx

@@ -5,9 +5,8 @@ import React, {useContext, useEffect, useRef} from 'react';
 import {ScreenProps} from '../Application/types';
 import {Spacing, Styles} from '../Consts';
 import {Card, Section, validateChildren} from './index';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, HeaderTitle} from '../Application';
 import Navigation from '../Application/Navigation';
-import {HeaderTitle} from '../Application/Components';
 
 const Screen: React.FC<ScreenProps> = ({
   children,
@@ -70,7 +69,6 @@ const Screen: React.FC<ScreenProps> = ({
         const stackNavigation = new Navigation(current?.getParent(), theme);
         stackNavigation?.setOptions({
           animatedValue: animatedValue.current,
-          headerTransparent: true,
         });
       });
     }
@@ -130,8 +128,20 @@ const Screen: React.FC<ScreenProps> = ({
           </View>
         );
       });
+    } else {
+      const item: any = children;
+      const space = item?.props?.useMargin === false ? 0 : Spacing.M;
+      return (
+        <View
+          key={`ScreenItem`}
+          style={{
+            marginTop: space,
+            flex: item?.props?.expanded ? 1 : undefined,
+          }}>
+          {children}
+        </View>
+      );
     }
-    return results;
   };
 
   return (

package/Layout/index.ts

@@ -11,7 +11,7 @@ const GridContext = createContext<GridContextProps>({
   gutterSize: 12,
   margin: 12,
   sizePerSpan: 0,
-  getSizeSpan: span => 0,
+  getSizeSpan: () => 0,
 });
 
 export {GridContext, Card, Section, GridSystem, validateChildren, Item};

package/Layout/utils.ts

@@ -62,15 +62,12 @@ const useGridSystem = () => {
   );
 
   useEffect(() => {
-    const subscription: any = Dimensions.addEventListener(
-      'change',
-      ({window}: any) => {
-        const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
-        if (newColumns != numberOfColumns) {
-          setNumberOfColumns(newColumns);
-        }
-      },
-    );
+    const subscription: any = Dimensions.addEventListener('change', () => {
+      const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
+      if (newColumns != numberOfColumns) {
+        setNumberOfColumns(newColumns);
+      }
+    });
     return () => subscription?.remove();
   }, []);
 

package/Loader/DotLoader.tsx

@@ -14,12 +14,12 @@ const DotLoader: FC<ViewProps> = ({style}) => {
     theme.colors.primary,
   ];
 
-  let source = animation;
-  source.assets[0].layers[0].shapes[0].it.forEach(item => {
+  let source: any = animation;
+  source.assets[0].layers[0].shapes[0].it.forEach((item: any) => {
     if (item.ty === 'fl' && item.c) {
-      item.c.k.forEach((fillItem, index) => {
+      item.c.k.forEach((fillItem: any, index: number) => {
         if (typeof fillItem !== 'number') {
-          fillItem.s = hexToRGBA(arrayColor[index]);
+          fillItem.s = hexToRGBA(arrayColor[index] as string);
         }
       });
     }

package/Loader/Spinner.tsx

@@ -8,9 +8,9 @@ import {ApplicationContext} from '../Application';
 const Spinner: FC<ViewProps> = ({style}) => {
   const {theme} = useContext(ApplicationContext);
 
-  let source = animation;
-  source.assets[0].layers.forEach(layer => {
-    layer.shapes[0].it.forEach(item => {
+  let source: any = animation;
+  source.assets[0].layers.forEach((layer: any) => {
+    layer.shapes[0].it.forEach((item: any) => {
       if (item.ty === 'fl' && item.c) {
         item.c.k = hexToRGBA(theme.colors.primary);
       }

package/Pagination/PaginationWhiteDot.tsx

@@ -1,16 +1,14 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {View} from 'react-native';
 import {ChildPaginationProps} from './types';
 import styles from './styles';
 import Dot from './Dot';
 import {Colors, Spacing} from '../Consts';
-import {ApplicationContext} from '../Application';
 
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
 }) => {
-  const {theme} = useContext(ApplicationContext);
   const renderDots = () => {
     const dots = [];
     for (let i = 0; i < dataLength; i++) {

package/Popup/types.ts

@@ -1,3 +1,6 @@
+import {TextStyle} from 'react-native';
+import React from 'react';
+
 export type PopupNotifyProps = {
   /**
    * `image`: Optional. Represents the URL or path of the image to be displayed in the PopupNotify component.
@@ -12,7 +15,7 @@ export type PopupNotifyProps = {
   /**
    * `description`: Represents the description text to be displayed in the PopupNotify component.
    */
-  description: string;
+  description: string | React.ReactNode;
 
   /**
    * `information`: Optional. Represents additional information text to be displayed in the PopupNotify component.
@@ -67,4 +70,9 @@ type PopupAction = {
   onPress: () => void;
 };
 
+export type HighlightText = {
+  text: string;
+  style: TextStyle;
+};
+
 type PopupActionDirection = 'row' | 'column' | 'auto';

package/Radio/index.tsx

@@ -39,7 +39,7 @@ const Radio: FC<RadioProps> = ({
 
   return (
     <TouchableOpacity
-      accessibilityLabel={`Radio/${label}`}
+      accessibilityLabel={`Radio/${label}/${value}`}
       onPress={onChange}
       disabled={disabled}
       style={[

package/Text/index.tsx

@@ -3,7 +3,6 @@ import {Text as RNText, TextProps as RNTextProps} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
 import {ApplicationContext} from '../Application';
-import {GridContext} from '../Layout';
 import {scaleSize} from './utils';
 
 const SFProText: TypographyWeight = {
@@ -51,22 +50,14 @@ export interface TextProps extends RNTextProps {
    * 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,
   children,
   style,
-  widthSpan,
   ...rest
 }) => {
-  const grid = useContext(GridContext);
   const {theme} = useContext(ApplicationContext);
 
   const getTypoStyle = (typo: Typography) => {
@@ -101,17 +92,11 @@ const Text: React.FC<TextProps> = ({
   };
 
   const textStyle = getTypoStyle(typography);
-  const spanStyle = widthSpan ? {width: grid.getSizeSpan(widthSpan)} : {};
   return (
     <RNText
       {...rest}
       accessibilityLabel={`Text/${children}`}
-      style={[
-        style,
-        textStyle,
-        spanStyle,
-        {color: color ?? theme.colors.text.default},
-      ]}>
+      style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
       {children ?? ''}
     </RNText>
   );

package/package.json

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

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "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",
+    "verbatimModuleSyntax": false
+  }
+}