@momo-kits/foundation 1.0.1 → 1.0.4

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,42 @@ 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 +56,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 +75,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 +152,9 @@ const Button: FC<ButtonProps> = props => {
   };
 
   /**
-   * render Text
+   * render title
    */
-  const renderText = () => {
+  const renderTitle = () => {
     const typography = getTypography();
     const color = getTextColor();
     return (
@@ -204,7 +219,7 @@ const Button: FC<ButtonProps> = props => {
     full && {width: '100%'},
   ]);
 
-  const onPressButton = (e: GestureResponderEvent) => {
+  const onPressButton = (e: any) => {
     if (type === 'disabled') {
       return () => {};
     }
@@ -212,14 +227,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 +250,4 @@ Button.defaultProps = {
   useTintColor: true,
 };
 
-export default Button;
+export {Button};

package/CheckBox/index.tsx

@@ -1,25 +1,25 @@
 import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
-
 import {CheckBoxProps} from './types';
-import {Text} from '@momo-kits/foundation';
 import styles from './styles';
 import Image from 'react-native-fast-image';
 import {ApplicationContext} from '../Navigation';
-import {Colors} from '../Consts';
+import {Text} from '../Text';
 
 const IC_INDETERMINATED = 'https://img.mservice.com.vn/app/img/kits/minus.png';
 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 +33,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 +45,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 +54,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

@@ -1,15 +1,14 @@
 import React, {useContext, useEffect, useMemo, useRef} from 'react';
 import {Animated, Platform, useWindowDimensions, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import {ContentLoaderTypes} from './types';
 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/icon.json

@@ -3931,5 +3931,8 @@
   },
   "header_background": {
     "uri": "https://img.mservice.com.vn/app/img/kits/navigation-bar.png"
+  },
+  "ic_error": {
+    "uri": "https://img.mservice.com.vn/app/img/kits/error_mess_icon.png"
   }
 }

package/Icon/index.tsx

@@ -1,13 +1,18 @@
 import React, {useContext} from 'react';
-import {IconProps, Image, ApplicationContext} from '../index';
 import IconSources from './icon.json';
+import {IconProps} from './types';
+import {ApplicationContext} from '../Navigation';
+import {Image} from '../Image';
 
-const Icon: React.FC<IconProps> = ({source, size, color}) => {
+const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
   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;
+      let icon: {[key: string]: {uri: string}} = IconSources;
       return icon[source] ?? icon.ic_warning;
     }
     return {uri: source};
@@ -16,7 +21,7 @@ const Icon: React.FC<IconProps> = ({source, size, color}) => {
   return (
     <Image
       source={getIconSource()}
-      style={{width: size, height: size}}
+      style={[style, {width: size, height: size}]}
       tintColor={color ?? theme.colors.text.default}
     />
   );

package/Icon/types.ts

@@ -1,5 +1,8 @@
+import {ViewStyle} from 'react-native';
+
 export type IconProps = {
-  source?: string;
+  source: string;
   size?: number;
   color?: string;
+  style?: ViewStyle;
 };

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

@@ -1,27 +1,29 @@
 import React, {useContext, useState} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import FastImage from 'react-native-fast-image';
-
 import styles from './styles';
-import {ImageProps} from './types';
 import {ApplicationContext} from '../Navigation';
 import {ContentLoader} from '../ContentLoader';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
+import {FastImagePropsWithoutStyle} from './types';
+
+export interface ImageProps extends FastImagePropsWithoutStyle {
+  style?: StyleProp<ViewStyle>;
+}
 
-const Image: React.FC<ImageProps> = props => {
+const Image: React.FC<ImageProps> = ({style, 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 = () => {
     if (loading || fail) {
-      let content = placeholder ?? (
+      let content = (
         <ContentLoader style={[StyleSheet.absoluteFill, styles.image]} />
       );
       if (fail) {
@@ -47,7 +49,8 @@ const Image: React.FC<ImageProps> = props => {
   return (
     <View style={[styles.container, style]}>
       <FastImage
-        {...props}
+        {...rest}
+        source={source}
         style={styles.image}
         onLoad={() => {
           setFail(false);
@@ -61,8 +64,4 @@ const Image: React.FC<ImageProps> = props => {
   );
 };
 
-Image.defaultProps = {
-  style: {},
-};
-
 export {Image};

package/Image/types.ts

@@ -1,5 +1,3 @@
 import {FastImageProps} from 'react-native-fast-image';
 
-export interface ImageProps extends FastImageProps {
-  placeholder?: boolean;
-}
+export type FastImagePropsWithoutStyle = Omit<FastImageProps, 'style'>;

package/Input/Input.tsx

@@ -0,0 +1,160 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  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';
+import {Icon} from '../Icon';
+
+const Input: FC<InputProps> = ({
+  value,
+  onChangeText,
+  floatingValue,
+  floatingIcon,
+  size,
+  placeholder,
+  onBlur,
+  onFocus,
+  errorMessage,
+  icon,
+  disabled,
+  floatingIconColor,
+  iconColor,
+  ...props
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<any>(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
+            {...props}
+            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}>
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
+              />
+            </TouchableOpacity>
+          )}
+          {icon && (
+            <Image
+              tintColor={iconTintColor}
+              source={{uri: icon}}
+              style={styles.icon}
+            />
+          )}
+        </View>
+      </View>
+    );
+  };
+
+  const renderErrorView = () => {
+    if (errorMessage) {
+      return (
+        <View style={styles.errorView}>
+          <View style={styles.errorIcon}>
+            <Icon
+              source="ic_error"
+              size={16}
+              color={theme.colors.error.primary}
+            />
+          </View>
+          <Text color={theme.colors.error.primary} typography={'description_s'}>
+            {errorMessage}
+          </Text>
+        </View>
+      );
+    }
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      {renderInputView()}
+      {renderErrorView()}
+    </View>
+  );
+};
+
+Input.defaultProps = {
+  size: 'large',
+};
+
+export default Input;