@momo-kits/foundation 0.77.8-beta.5 → 0.77.8-beta.6

package/Application/NavigationContainer.tsx

@@ -21,10 +21,12 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   theme,
   options,
   maxApi,
+  localization,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
+  const [language, setLanguage] = useState<'vi' | 'en'>('vi');
 
   useEffect(() => {
     const subscription = DeviceEventEmitter.addListener(
@@ -38,13 +40,32 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    const listener = maxApi?.observer?.('language', (lang: 'vi' | 'en') => {
+      setLanguage(lang);
+    });
+    return () => {
+      listener?.();
+    };
+  }, []);
+
   navigator.current.maxApi = maxApi;
 
+  const translate = (key: string) => {
+    return localization?.[language]?.[key] || '';
+  };
+
   return (
     <SafeAreaProvider>
       <BottomSheetModalProvider>
         <ApplicationContext.Provider
-          value={{theme, navigator: navigator.current, showGrid}}>
+          value={{
+            theme,
+            navigator: navigator.current,
+            showGrid,
+            language,
+            translate,
+          }}>
           <ReactNavigationContainer
             theme={{
               ...theme,

package/Application/types.ts

@@ -1,5 +1,5 @@
-import {Animated, ScrollViewProps, ViewProps} from 'react-native';
-import React, {ReactNode} from 'react';
+import {Animated} from 'react-native';
+import React from 'react';
 import Navigator from './Navigator';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
@@ -65,6 +65,17 @@ export type Context = {
   theme: Theme;
   navigator?: Navigator;
   showGrid?: boolean;
+  language: 'vi' | 'en';
+  translate: (key: string) => string;
+};
+
+export type LocalizationObject = {
+  vi: {
+    [key: string]: string;
+  };
+  en: {
+    [key: string]: string;
+  };
 };
 
 export type NavigationContainerProps = {
@@ -72,6 +83,7 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi?: any;
+  localization: LocalizationObject;
 };
 
 export type NavigationScreenProps = {
@@ -80,19 +92,6 @@ export type NavigationScreenProps = {
   navigation: Navigation;
 };
 
-export interface ScreenProps extends ViewProps {
-  navigation?: Navigation;
-  enableKeyboardAvoidingView?: boolean;
-  headerBackground?: string;
-  scrollable?: boolean;
-  useAnimatedHeader?: boolean;
-  useExtendedHeader?: boolean;
-  scrollViewProps?: ScrollViewProps;
-  footerComponent?: ReactNode;
-  marginHeader?: number;
-  backgroundColor?: string;
-}
-
 export type ScreenParams = {
   [key: string]: any;
   screen: Screen;

package/Divider/index.tsx

@@ -1,6 +1,7 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
 import {ApplicationContext} from '../Application';
+import {Spacing} from '../Consts';
 
 const Divider = () => {
   const {theme} = useContext(ApplicationContext);
@@ -11,6 +12,7 @@ const Divider = () => {
         height: 1,
         width: '100%',
         backgroundColor: theme.colors.border.default,
+        marginVertical: Spacing.XS,
       }}
     />
   );

package/Layout/Card.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
-import {Dimensions, View} from 'react-native';
+import {Dimensions, View, ViewProps} from 'react-native';
 import {useGridSystem, validateChildren} from './utils';
-import {CardProps, GridContextProps} from './types';
+import {GridContextProps} from './types';
 import {GridContext, GridSystem} from './index';
 import Item from './Item';
 import {Image} from '../Image';
@@ -9,6 +9,13 @@ import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {Colors, Spacing} from '../Consts';
 
+export interface CardProps extends ViewProps {
+  /**
+   * Optional. Background image for the card.
+   */
+  backgroundImage?: string;
+}
+
 const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();

package/Layout/Item.tsx

@@ -1,11 +1,24 @@
 import React, {useContext} from 'react';
-import {View} from 'react-native';
+import {View, ViewProps} from 'react-native';
 
-import {ItemProps} from './types';
 import {GridContext} from './index';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
 
+type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface ItemProps 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;
+}
+
 const Item: React.FC<ItemProps> = ({
   widthSpan,
   heightSpan,

package/Layout/Screen.tsx

@@ -1,13 +1,71 @@
-import {Animated, KeyboardAvoidingView, Platform, View} from 'react-native';
+import {
+  Animated,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollViewProps,
+  View,
+  ViewProps,
+} from 'react-native';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import React, {useContext, useEffect, useRef} from 'react';
-import {ScreenProps} from '../Application/types';
+import React, {ReactNode, useContext, useEffect, useRef} from 'react';
 import {Spacing, Styles} from '../Consts';
 import {Card, Section, validateChildren} from './index';
 import {ApplicationContext, HeaderTitle} from '../Application';
 import Navigation from '../Application/Navigation';
 
+export interface ScreenProps extends ViewProps {
+  /**
+   * Optional. Navigation object for handling navigation actions.
+   */
+  navigation?: Navigation;
+
+  /**
+   * Optional. If `true`, enable keyboard avoiding view for the screen.
+   */
+  enableKeyboardAvoidingView?: boolean;
+
+  /**
+   * Optional. Background color of the header.
+   */
+  headerBackground?: string;
+
+  /**
+   * Optional. If `true`, the screen content is scrollable.
+   */
+  scrollable?: boolean;
+
+  /**
+   * Optional. If `true`, use an animated header for the screen.
+   */
+  useAnimatedHeader?: boolean;
+
+  /**
+   * Optional. If `true`, use an extended header for the screen.
+   */
+  useExtendedHeader?: boolean;
+
+  /**
+   * Optional. Props for the underlying ScrollView component when `scrollable` is `true`.
+   */
+  scrollViewProps?: ScrollViewProps;
+
+  /**
+   * Optional. ReactNode representing the footer component of the screen.
+   */
+  footerComponent?: ReactNode;
+
+  /**
+   * Optional. Margin for the header component.
+   */
+  marginHeader?: number;
+
+  /**
+   * Optional. Background color of the screen.
+   */
+  backgroundColor?: string;
+}
+
 const Screen: React.FC<ScreenProps> = ({
   children,
   enableKeyboardAvoidingView = false,

package/Layout/Section.tsx

@@ -1,13 +1,37 @@
 import React, {useContext} from 'react';
-import {Dimensions, View} from 'react-native';
+import {Dimensions, View, ViewProps} from 'react-native';
 import {useGridSystem, validateChildren} from './utils';
-import {GridContextProps, SectionProps} from './types';
+import {GridContextProps} from './types';
 import {GridContext} from './index';
 import Item from './Item';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {Image} from '../Image';
 
+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;
+
+  /**
+   * Optional. Background color for the Section component.
+   */
+  backgroundColor?: string;
+
+  /**
+   * Optional. Background image for the Section component.
+   */
+  backgroundImage?: string;
+}
+
 const Section: React.FC<SectionProps> = ({
   children,
   useMargin = true,
@@ -116,7 +140,16 @@ const Section: React.FC<SectionProps> = ({
   };
 
   return (
-    <GridContext.Provider value={gridContext}>
+    <GridContext.Provider
+      value={{
+        numberOfColumns,
+        gutterSize,
+        margin,
+        sizePerSpan,
+        getSizeSpan: span => {
+          return span * sizePerSpan + (span - 1) * gutterSize;
+        },
+      }}>
       <View
         accessibilityLabel={`Section`}
         style={{

package/Layout/types.ts

@@ -1,7 +1,3 @@
-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.
@@ -28,36 +24,3 @@ export type GridContextProps = {
    */
   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;
-
-  backgroundColor?: string;
-
-  backgroundImage?: string;
-}
-
-export interface ItemProps 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;
-}
-
-export interface CardProps extends ViewProps {
-  backgroundImage?: string;
-}

package/Loader/types.ts

@@ -1,13 +1,35 @@
 import {ViewStyle} from 'react-native';
 
 export type LoaderProps = {
+  /**
+   * Optional. Type of loader, can be 'dot' or 'spinner'.
+   */
   type?: 'dot' | 'spinner';
+
+  /**
+   * Optional. Color for the loader.
+   */
   color?: string;
+
+  /**
+   * Optional. Style or styles for the loader component.
+   */
   style?: ViewStyle | ViewStyle[];
 };
 
 export type ProgressBarProps = {
+  /**
+   * Required. Percentage value to display on the progress bar.
+   */
   percent: number;
+
+  /**
+   * Optional. Color for the progress bar.
+   */
   color?: string;
+
+  /**
+   * Optional. Style or styles for the progress bar component.
+   */
   style?: ViewStyle | ViewStyle[];
 };

package/Popup/PopupNotify.tsx

@@ -10,8 +10,8 @@ import {Icon} from '../Icon';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
-  title,
-  description,
+  title = 'Title',
+  description = 'Description',
   information,
   secondary,
   primary,
@@ -206,12 +206,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PopupNotify.defaultProps = {
-  title: 'Title',
-  primary: {
-    title: 'Primary',
-    onPress: () => {},
-  },
-};
-
 export default PopupNotify;

package/Skeleton/types.ts

@@ -1,3 +1,6 @@
 export type SkeletonTypes = {
+  /**
+   * Optional. Custom styles for the Skeleton component.
+   */
   style?: object;
 };

package/package.json

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