@momo-kits/foundation 1.0.1 → 1.0.3

package/Button/index.tsx

@@ -1,8 +1,8 @@
 import React, {FC, useContext} from 'react';
 import {
-  GestureResponderEvent,
   StyleSheet,
   TouchableOpacity,
+  TouchableOpacityProps,
   View,
 } from 'react-native';
 import {ApplicationContext} from '../Navigation';
@@ -10,25 +10,43 @@ import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors} from '../Consts';
 import styles from './styles';
-import {ButtonProps} from './types';
 import {Image} from '../Image';
 
-const Button: FC<ButtonProps> = props => {
+export interface ButtonProps extends TouchableOpacityProps {
+  type?:
+    | 'primary'
+    | 'secondary'
+    | 'tonal'
+    | 'outline'
+    | 'danger'
+    | 'text'
+    | 'disabled';
+  size?: 'large' | 'medium' | 'small';
+  full?: boolean;
+  iconRight?: string;
+  iconLeft?: string;
+  title: string;
+  useTintColor?: boolean;
+}
+
+const Button: FC<ButtonProps> = ({
+  type,
+  size,
+  useTintColor,
+  full,
+  iconRight,
+  iconLeft,
+  title,
+  onPress,
+  ...rest
+}) => {
   const {theme} = useContext(ApplicationContext);
-  const {type, size, useTintColor, full, iconRight, iconLeft, title, onPress} =
-    props;
 
-  /**
-   * export size style
-   */
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
   };
 
-  /**
-   * export type style
-   */
   const getTypeStyle = () => {
     switch (type) {
       case 'disabled':
@@ -39,13 +57,13 @@ const Button: FC<ButtonProps> = props => {
         return {backgroundColor: theme.colors.primary};
       case 'secondary':
         return {
-          backgroundColor: theme.colors.background.disable,
+          backgroundColor: theme.colors.background.surface,
           borderWidth: 1,
           borderColor: theme.colors.border.default,
         };
       case 'outline':
         return {
-          backgroundColor: Colors.black_01,
+          backgroundColor: theme.colors.background.surface,
           borderWidth: 1,
           borderColor: theme.colors.primary,
         };
@@ -58,9 +76,7 @@ const Button: FC<ButtonProps> = props => {
           backgroundColor: theme.colors.error.primary,
         };
       case 'text':
-        return {
-          backgroundColor: Colors.black_01,
-        };
+        return {};
       default:
         return {backgroundColor: theme.colors.primary};
     }
@@ -137,9 +153,9 @@ const Button: FC<ButtonProps> = props => {
   };
 
   /**
-   * render Text
+   * render title
    */
-  const renderText = () => {
+  const renderTitle = () => {
     const typography = getTypography();
     const color = getTextColor();
     return (
@@ -204,7 +220,7 @@ const Button: FC<ButtonProps> = props => {
     full && {width: '100%'},
   ]);
 
-  const onPressButton = (e: GestureResponderEvent) => {
+  const onPressButton = (e: any) => {
     if (type === 'disabled') {
       return () => {};
     }
@@ -212,14 +228,15 @@ const Button: FC<ButtonProps> = props => {
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
+
   return (
     <TouchableOpacity
-      {...props}
+      {...rest}
       activeOpacity={activeOpacity}
       onPress={onPressButton}
       style={buttonStyle}>
       {renderLeading()}
-      {renderText()}
+      {renderTitle()}
       {renderTrailing()}
     </TouchableOpacity>
   );
@@ -234,4 +251,4 @@ Button.defaultProps = {
   useTintColor: true,
 };
 
-export default Button;
+export {Button};

package/CheckBox/index.tsx

@@ -13,13 +13,15 @@ const IC_CHECKED_DEFAULT =
   'https://img.mservice.com.vn/app/img/kits/checked_ic.png';
 const CheckBox: FC<CheckBoxProps> = props => {
   const {theme} = useContext(ApplicationContext);
-  const {value, disabled, onChange, label, indeterminated} = props;
+  const {value, disabled, onChange, style, label, indeterminated} = props;
 
   const haveValue = value || indeterminated;
   let borderColor = haveValue
     ? theme.colors.primary
     : theme.colors.text.default;
-  let backgroundColor = haveValue ? theme.colors.primary : Colors.black_01;
+  let backgroundColor = haveValue
+    ? theme.colors.primary
+    : theme.colors.background.surface;
 
   let iconSource = value ? IC_CHECKED_DEFAULT : undefined;
 
@@ -33,7 +35,7 @@ const CheckBox: FC<CheckBoxProps> = props => {
       : theme.colors.border.disable;
     backgroundColor = haveValue
       ? theme.colors.background.disable
-      : Colors.black_01;
+      : theme.colors.background.surface;
   }
   const checkboxStyle = {borderColor, backgroundColor, borderWidth: 1};
 
@@ -45,7 +47,7 @@ const CheckBox: FC<CheckBoxProps> = props => {
       activeOpacity={0.8}
       onPress={onChangeValue}
       disabled={disabled}
-      style={styles.container}>
+      style={[style, styles.container]}>
       <View style={[checkboxStyle, styles.checkbox]}>
         <Image style={styles.icon} source={{uri: iconSource}} />
       </View>
@@ -54,4 +56,8 @@ const CheckBox: FC<CheckBoxProps> = props => {
   );
 };
 
+CheckBox.defaultProps = {
+  disabled: false,
+};
+
 export {CheckBox};

package/CheckBox/types.ts

@@ -1,7 +1,10 @@
-export interface CheckBoxProps {
+import {ViewStyle} from 'react-native';
+
+export type CheckBoxProps = {
   value: boolean;
   disabled?: boolean;
   label?: string;
   onChange: (value: boolean) => void;
-  indeterminated: boolean;
-}
+  indeterminated?: boolean;
+  style?: ViewStyle;
+};

package/Consts/theme.ts

@@ -57,9 +57,65 @@ const defaultTheme: Theme = {
   },
 };
 
+const defaultDarkTheme: Theme = {
+  dark: true,
+  colors: {
+    primary: '#ff79b0',
+    secondary: '#ffacdc',
+    background: {
+      default: '#121212', // Dark background
+      surface: '#1e1e1e', // Slightly lighter surface background
+      tonal: '#171717', // Tonal background
+      pressed: '#1a1a1a', // Pressed state background
+      selected: '#1a1a1a', // Selected state background
+      disable: '#303030', // Disabled state background
+    },
+    text: {
+      default: '#ffffff', // White text for better contrast
+      secondary: '#b0b0b0', // Light gray secondary text
+      hint: '#727272', // Hint text color
+      disable: '#505050', // Disabled text color
+    },
+    border: {
+      default: '#2a2a2a', // Darker borders
+      disable: '#242424', // Disabled state border color
+    },
+    success: {
+      primary: Colors.green_03,
+      secondary: Colors.green_07,
+      container: Colors.green_08,
+    },
+    warning: {
+      primary: Colors.orange_03,
+      secondary: Colors.orange_07,
+      container: Colors.orange_08,
+    },
+    error: {
+      primary: Colors.red_03,
+      secondary: Colors.red_07,
+      container: Colors.red_08,
+    },
+    highlight: {
+      primary: Colors.mint_03,
+      secondary: Colors.mint_07,
+      container: Colors.mint_08,
+    },
+    interactive: {
+      primary: Colors.blue_03,
+      secondary: Colors.blue_07,
+      container: Colors.blue_08,
+    },
+  },
+  font: 'SFProText',
+  assets: {
+    headerBackground:
+      'https://static.momocdn.net/app/img/app/img/header-background.png',
+  },
+};
+
 const defaultContext: Context = {
   theme: defaultTheme,
   navigator: undefined,
 };
 
-export {defaultContext, defaultTheme};
+export {defaultContext, defaultTheme, defaultDarkTheme};

package/ContentLoader/index.tsx

@@ -5,11 +5,10 @@ import {ApplicationContext} from '../Navigation';
 import LinearGradient from 'react-native-linear-gradient';
 import {Styles} from '../Consts';
 import styles from './styles';
-const ContentLoader: React.FC<ContentLoaderTypes> = props => {
+const ContentLoader: React.FC<ContentLoaderTypes> = ({style}) => {
   const {width} = useWindowDimensions();
   const {theme} = useContext(ApplicationContext);
   const beginShimmerPosition = useRef(new Animated.Value(-1)).current;
-  const {style} = props;
 
   const shimmerColors = [
     theme.colors.text.disable + '40',

package/Icon/index.tsx

@@ -5,6 +5,9 @@ import IconSources from './icon.json';
 const Icon: React.FC<IconProps> = ({source, size, color}) => {
   const {theme} = useContext(ApplicationContext);
 
+  /**
+   * get icon source maps or remote http
+   */
   const getIconSource = (): any => {
     if (source && !source.includes('http')) {
       let icon: {[key: string]: object} = IconSources;

package/IconButton/index.tsx

@@ -3,13 +3,19 @@ import {
   GestureResponderEvent,
   StyleSheet,
   TouchableOpacity,
+  TouchableOpacityProps,
 } from 'react-native';
-import {IconButtonProps} from './types';
 import {ApplicationContext} from '../Navigation';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
 
+export interface IconButtonProps extends TouchableOpacityProps {
+  icon: string;
+  type?: 'primary' | 'tonal' | 'secondary' | 'danger' | 'outline' | 'disabled';
+  size?: 'large' | 'small';
+}
+
 const IconButton: React.FC<IconButtonProps> = ({
   type,
   icon,
@@ -19,12 +25,19 @@ const IconButton: React.FC<IconButtonProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
 
+  /**
+   * get size icon button
+   */
   const getSizeStyle = () => {
     if (size === 'small') {
       return styles.small;
     }
     return styles.large;
   };
+
+  /**
+   * get style for icon button by type
+   */
   const getTypeStyle = () => {
     switch (type) {
       case 'disabled':
@@ -35,13 +48,13 @@ const IconButton: React.FC<IconButtonProps> = ({
         return {backgroundColor: theme.colors.primary};
       case 'secondary':
         return {
-          backgroundColor: Colors.black_01,
+          backgroundColor: theme.colors.background.surface,
           borderWidth: 1,
           borderColor: theme.colors.border.default,
         };
       case 'outline':
         return {
-          backgroundColor: Colors.black_01,
+          backgroundColor: theme.colors.background.surface,
           borderWidth: 1,
           borderColor: theme.colors.primary,
         };
@@ -58,6 +71,9 @@ const IconButton: React.FC<IconButtonProps> = ({
     }
   };
 
+  /**
+   * get color for icon
+   */
   const getIconColor = () => {
     switch (type) {
       case 'disabled':
@@ -77,6 +93,10 @@ const IconButton: React.FC<IconButtonProps> = ({
     }
   };
 
+  /**
+   * handle press
+   * @param e
+   */
   const onPressButton = (e: GestureResponderEvent) => {
     if (type === 'disabled') {
       return () => {};
@@ -85,9 +105,9 @@ const IconButton: React.FC<IconButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-
   const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
   const iconSize = size === 'small' ? 16 : 24;
+
   return (
     <TouchableOpacity
       {...rest}

package/Image/index.tsx

@@ -9,14 +9,13 @@ import {ContentLoader} from '../ContentLoader';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 
-const Image: React.FC<ImageProps> = props => {
+const Image: React.FC<ImageProps> = ({style, placeholder, source, ...rest}) => {
   const {theme} = useContext(ApplicationContext);
-  const {style, placeholder, source} = props;
   const [loading, setLoading] = useState(typeof source === 'object');
   const [fail, setFail] = useState(false);
 
   /**
-   * render content
+   * render content loading | fail | rendered
    * @returns {JSX.Element}
    */
   const renderContent = () => {
@@ -47,7 +46,8 @@ const Image: React.FC<ImageProps> = props => {
   return (
     <View style={[styles.container, style]}>
       <FastImage
-        {...props}
+        {...rest}
+        source={source}
         style={styles.image}
         onLoad={() => {
           setFail(false);

package/Input/Input.tsx

@@ -0,0 +1,161 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TextInputProps,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+import styles from './styles';
+import {Text} from '../Text';
+import {Image} from '../Image';
+import {getBorderColor, renderFloatingView} from './common';
+import {InputProps} from './index';
+
+const errorMessageIcon =
+  'https://img.mservice.com.vn/app/img/kits/error_mess_icon.png';
+const ic_clear =
+  'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_close_circle_full.png';
+const MAX_LENGTH = 100;
+
+const Input: FC<InputProps> = ({
+  value,
+  onChangeText,
+  floatingValue,
+  floatingIcon,
+  size,
+  placeholder,
+  onBlur,
+  onFocus,
+  errorMessage,
+  icon,
+  disabled,
+  floatingIconColor,
+  iconColor,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
+
+  const onClearText = () => {
+    inputRef?.current?.clear();
+  };
+
+  const _onChangeText = (text: string) => {
+    onChangeText?.(text);
+  };
+  const getSizeStyle = () => {
+    if (size === 'small') {
+      return styles.smallContainer;
+    }
+    return styles.container;
+  };
+
+  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+
+  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  const renderInputView = () => {
+    const disabledColor = theme.colors.text.disable;
+    let textColor = theme.colors.text.default;
+    let placeholderColor = theme.colors.text.hint;
+    let iconTintColor = iconColor;
+
+    if (disabled) {
+      textColor = disabledColor;
+      placeholderColor = disabledColor;
+      iconTintColor = disabledColor;
+    }
+
+    return (
+      <View
+        style={[
+          getSizeStyle(),
+          getBorderColor(focused, errorMessage, disabled),
+          styles.inputWrapper,
+        ]}>
+        {renderFloatingView(
+          floatingValue,
+          floatingIconColor,
+          disabled,
+          floatingIcon,
+        )}
+        <View style={styles.inputView}>
+          <TextInput
+            editable={!disabled}
+            textAlignVertical="top"
+            ref={inputRef}
+            style={[
+              styles.input,
+              {
+                color: textColor,
+              },
+            ]}
+            value={value}
+            onChangeText={_onChangeText}
+            onFocus={_onFocus}
+            onBlur={_onBlur}
+            placeholder={placeholder}
+            selectionColor={theme.colors.primary}
+            placeholderTextColor={placeholderColor}
+          />
+        </View>
+        <View style={styles.iconView}>
+          {focused && (
+            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
+              <Image
+                tintColor={theme.colors.text.hint}
+                source={{uri: ic_clear}}
+                style={styles.iconClose}
+              />
+            </TouchableOpacity>
+          )}
+          {icon && (
+            <Image
+              tintColor={iconTintColor}
+              source={{uri: icon}}
+              style={styles.icon}
+            />
+          )}
+        </View>
+      </View>
+    );
+  };
+
+  const renderErrorView = () => {
+    if (errorMessage) {
+      return (
+        <View style={styles.errorView}>
+          <Image style={styles.errorIcon} source={{uri: errorMessageIcon}} />
+          <Text color={theme.colors.error.primary} typography={'description_s'}>
+            {errorMessage}
+          </Text>
+        </View>
+      );
+    }
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      {renderInputView()}
+      {renderErrorView()}
+    </View>
+  );
+};
+
+Input.defaultProps = {
+  size: 'large',
+  maxLength: MAX_LENGTH,
+  disabled: false,
+};
+
+export default Input;

package/Input/TextArea.tsx

@@ -3,15 +3,16 @@ import {
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
+  TextInputProps,
   TouchableOpacity,
   View,
 } from 'react-native';
 import styles from './styles';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {TextAreaProps} from './types';
 import {ApplicationContext} from '../Navigation';
-import {Colors} from '../Consts';
+import {getBorderColor, renderFloatingView} from './common';
+import {TextAreaProps} from './index';
 
 const errorMessageIcon =
   'https://img.mservice.com.vn/app/img/kits/error_mess_icon.png';
@@ -19,6 +20,7 @@ const ic_clear =
   'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_close_circle_full.png';
 const DEFAULT_HEIGHT = 112;
 const MAX_LENGTH = 300;
+
 const TextArea: FC<TextAreaProps> = props => {
   const {theme} = useContext(ApplicationContext);
   const {
@@ -59,56 +61,6 @@ const TextArea: FC<TextAreaProps> = props => {
     setFocused(false);
     onBlur?.(e);
   };
-  const getBorderColor = () => {
-    let borderColor = theme.colors.border.default;
-
-    if (focused) {
-      borderColor = theme.colors.primary;
-    }
-
-    if (!!errorMessage) {
-      borderColor = theme.colors.error.primary;
-    }
-
-    if (disabled) {
-      borderColor = theme.colors.border.disable;
-    }
-
-    return {borderColor};
-  };
-
-  const renderFloatingView = () => {
-    if (floatingValue) {
-      let floatingTextColor = theme.colors.text.hint;
-      let floatingIconTintColor = floatingIconColor;
-      if (disabled) {
-        floatingTextColor = theme.colors.text.disable;
-        floatingIconTintColor = theme.colors.text.disable;
-      }
-
-      return (
-        <View
-          style={[
-            styles.floatingView,
-            {
-              backgroundColor: Colors.black_01,
-              zIndex: 10,
-            },
-          ]}>
-          <Text color={floatingTextColor} typography={'label_s'}>
-            {floatingValue}
-          </Text>
-          {floatingIcon && (
-            <Image
-              tintColor={floatingIconTintColor}
-              source={{uri: floatingIcon}}
-              style={styles.floatingIcon}
-            />
-          )}
-        </View>
-      );
-    }
-  };
 
   const renderCountingView = () => {
     return (
@@ -132,11 +84,19 @@ const TextArea: FC<TextAreaProps> = props => {
     return (
       <View
         style={[
-          getBorderColor(),
+          getBorderColor(focused, errorMessage, disabled),
           styles.textAreaWrapper,
-          {height: height || DEFAULT_HEIGHT},
+          {
+            height: height || DEFAULT_HEIGHT,
+            backgroundColor: theme.colors.background.surface,
+          },
         ]}>
-        {renderFloatingView()}
+        {renderFloatingView(
+          floatingValue,
+          floatingIconColor,
+          disabled,
+          floatingIcon,
+        )}
         <View style={styles.rowArea}>
           <View style={styles.textAreaView}>
             <TextInput