@momo-kits/foundation 1.0.0 → 1.0.3

package/Consts/theme.ts

@@ -0,0 +1,121 @@
+import {Context, Theme} from '../Navigation/types';
+import {Colors} from './colors+spacing+radius';
+
+const defaultTheme: Theme = {
+  dark: false,
+  colors: {
+    primary: Colors.pink_03,
+    secondary: Colors.pink_07,
+    background: {
+      default: '#f2f2f6',
+      surface: Colors.black_01,
+      tonal: Colors.pink_09,
+      pressed: '#fef4fa',
+      selected: Colors.pink_10,
+      disable: '#ebebf2',
+    },
+    text: {
+      default: Colors.black_17,
+      secondary: Colors.black_15,
+      hint: Colors.black_12,
+      disable: Colors.black_08,
+    },
+    border: {
+      default: Colors.black_04,
+      disable: Colors.black_02,
+    },
+    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 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, defaultDarkTheme};

package/ContentLoader/index.tsx

@@ -1,23 +1,19 @@
 import React, {useContext, useEffect, useMemo, useRef} from 'react';
 import {Animated, Platform, useWindowDimensions, View} from 'react-native';
-import {
-  ContentLoaderTypes,
-  LinearGradient,
-  NavigationContext,
-  Styles,
-} from '../index';
+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(NavigationContext);
+  const {theme} = useContext(ApplicationContext);
   const beginShimmerPosition = useRef(new Animated.Value(-1)).current;
-  const {style} = props;
 
   const shimmerColors = [
-    theme.colors.border + '40',
-    theme.colors.border + '80',
-    theme.colors.border,
+    theme.colors.text.disable + '40',
+    theme.colors.text.disable + '80',
+    theme.colors.text.disable,
   ];
   const location = [0.3, 0.5, 0.7];
   const linearTranslate = beginShimmerPosition.interpolate({

package/Icon/index.tsx

@@ -1,30 +1,33 @@
 import React, {useContext} from 'react';
-import {IconProps, Image, NavigationContext} from '../index';
-import SourceSets from './icon.json';
+import {IconProps, Image, ApplicationContext} from '../index';
+import IconSources from './icon.json';
 
-const Icon: React.FC<IconProps> = ({name, source, size, color}) => {
-  const {theme} = useContext(NavigationContext);
+const Icon: React.FC<IconProps> = ({source, size, color}) => {
+  const {theme} = useContext(ApplicationContext);
 
+  /**
+   * get icon source maps or remote http
+   */
   const getIconSource = (): any => {
-    if (name) {
-      let icon: {[key: string]: object} = SourceSets;
-      return icon[name] ?? icon.ic_warning;
+    if (source && !source.includes('http')) {
+      let icon: {[key: string]: object} = IconSources;
+      return icon[source] ?? icon.ic_warning;
     }
-    return source;
+    return {uri: source};
   };
 
   return (
     <Image
       source={getIconSource()}
       style={{width: size, height: size}}
-      tintColor={color ?? theme.colors.text}
+      tintColor={color ?? theme.colors.text.default}
     />
   );
 };
 
 Icon.defaultProps = {
-  name: 'ic_back',
+  source: 'ic_back',
   size: 24,
 };
 
-export {Icon};
+export {Icon, IconSources};

package/Icon/types.ts

@@ -1,8 +1,5 @@
-import {Source} from 'react-native-fast-image';
-
 export type IconProps = {
-  name?: string;
-  source?: Source | number | undefined;
+  source?: string;
   size?: number;
   color?: string;
 };

package/IconButton/index.tsx

@@ -1,127 +1,127 @@
 import React, {useContext} from 'react';
-import {StyleSheet, TouchableOpacity, View} from 'react-native';
-import {NavigationContext, Colors, Icon, IconButtonProps} from '../index';
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+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> = ({
-  style,
   type,
   icon,
   size,
-  shape,
+  onPress,
   ...rest
 }) => {
-  const {theme} = useContext(NavigationContext);
+  const {theme} = useContext(ApplicationContext);
 
   /**
-   * export size style
+   * get size icon button
    */
   const getSizeStyle = () => {
-    switch (size) {
-      case 'large':
-        return styles.large;
-      case 'small':
-        return styles.small;
-
-      default:
-        return styles.small;
+    if (size === 'small') {
+      return styles.small;
     }
+    return styles.large;
   };
 
   /**
-   * export size style
-   */
-  const getIconSize = () => {
-    switch (size) {
-      case 'large':
-        return 24;
-      case 'small':
-        return 16;
-
-      default:
-        return 16;
-    }
-  };
-
-  /**
-   * export type style
+   * get style for icon button by type
    */
   const getTypeStyle = () => {
     switch (type) {
+      case 'disabled':
+        return {
+          backgroundColor: theme.colors.background.disable,
+        };
       case 'primary':
         return {backgroundColor: theme.colors.primary};
-      case 'tonal':
-        return {backgroundColor: theme.colors.primary + '33'};
       case 'secondary':
-        return {borderColor: theme.colors.border, borderWidth: 1};
+        return {
+          backgroundColor: theme.colors.background.surface,
+          borderWidth: 1,
+          borderColor: theme.colors.border.default,
+        };
       case 'outline':
         return {
+          backgroundColor: theme.colors.background.surface,
           borderWidth: 1,
           borderColor: theme.colors.primary,
         };
-      case 'disabled':
-        return {backgroundColor: theme.colors.border};
+      case 'tonal':
+        return {
+          backgroundColor: theme.colors.background.tonal,
+        };
+      case 'danger':
+        return {
+          backgroundColor: theme.colors.error.primary,
+        };
       default:
         return {backgroundColor: theme.colors.primary};
     }
   };
 
+  /**
+   * get color for icon
+   */
   const getIconColor = () => {
     switch (type) {
+      case 'disabled':
+        return theme.colors.text.disable;
       case 'primary':
         return Colors.black_01;
+      case 'danger':
+        return Colors.black_01;
       case 'tonal':
         return theme.colors.primary;
       case 'secondary':
-        return theme.colors.text;
+        return theme.colors.text.default;
       case 'outline':
         return theme.colors.primary;
-      case 'disabled':
-        return theme.colors.text + '4D';
       default:
         return Colors.black_01;
     }
   };
 
-  const buttonStyle = StyleSheet.flatten([
-    getSizeStyle(),
-    getTypeStyle(),
-    shape === 'rectangle' && {borderRadius: 8},
-    style,
-  ]);
+  /**
+   * handle press
+   * @param e
+   */
+  const onPressButton = (e: GestureResponderEvent) => {
+    if (type === 'disabled') {
+      return () => {};
+    }
+    onPress?.(e);
+  };
+
+  const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
+  const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
+  const iconSize = size === 'small' ? 16 : 24;
 
   return (
     <TouchableOpacity
       {...rest}
-      disabled={type === 'disabled'}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
       style={buttonStyle}>
-      <Icon name={icon} size={getIconSize()} color={getIconColor()} />
+      <Icon size={iconSize} source={icon} color={getIconColor()} />
     </TouchableOpacity>
   );
 };
 
 IconButton.defaultProps = {
-  icon: 'close',
   type: 'primary',
-  size: 'small',
-  shape: 'circle',
-  children: <View />,
+  disabled: false,
 };
 
-const styles = StyleSheet.create({
-  large: {
-    height: 48,
-    width: 48,
-    borderRadius: 24,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  small: {
-    height: 36,
-    width: 36,
-    borderRadius: 18,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
 export {IconButton};

package/IconButton/styles.ts

@@ -0,0 +1,19 @@
+import {StyleSheet} from 'react-native';
+import {Radius} from '../Consts';
+
+export default StyleSheet.create({
+  large: {
+    width: 48,
+    height: 48,
+    borderRadius: Radius.XL,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  small: {
+    width: 40,
+    height: 40,
+    borderRadius: Radius.XL,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/Image/index.tsx

@@ -1,24 +1,21 @@
 import React, {useContext, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage from 'react-native-fast-image';
-import {
-  ContentLoader,
-  Icon,
-  ImageProps,
-  NavigationContext,
-  Styles,
-  Text,
-} from '../index';
+
 import styles from './styles';
+import {ImageProps} from './types';
+import {ApplicationContext} from '../Navigation';
+import {ContentLoader} from '../ContentLoader';
+import {Icon} from '../Icon';
+import {Styles} from '../Consts';
 
-const Image: React.FC<ImageProps> = props => {
-  const {theme} = useContext(NavigationContext);
-  const {style, placeholder, error, source} = props;
+const Image: React.FC<ImageProps> = ({style, placeholder, source, ...rest}) => {
+  const {theme} = useContext(ApplicationContext);
   const [loading, setLoading] = useState(typeof source === 'object');
   const [fail, setFail] = useState(false);
 
   /**
-   * render content
+   * render content loading | fail | rendered
    * @returns {JSX.Element}
    */
   const renderContent = () => {
@@ -27,18 +24,21 @@ const Image: React.FC<ImageProps> = props => {
         <ContentLoader style={[StyleSheet.absoluteFill, styles.image]} />
       );
       if (fail) {
-        content = error ?? (
-          <View
-            style={[Styles.flexCenter, {backgroundColor: theme.colors.border}]}>
-            <Icon name="error-outline" />
-            <Text typography="subtitle" style={Styles.textCenter}>
-              Can't load image
-            </Text>
+        content = (
+          <View style={Styles.flexCenter}>
+            <Icon source="error-outline" />
           </View>
         );
       }
       return (
-        <View style={[StyleSheet.absoluteFill, styles.image]}>{content}</View>
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            styles.image,
+            {backgroundColor: theme.colors.background.disable},
+          ]}>
+          {content}
+        </View>
       );
     }
   };
@@ -46,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/Image/types.ts

@@ -2,5 +2,4 @@ import {FastImageProps} from 'react-native-fast-image';
 
 export interface ImageProps extends FastImageProps {
   placeholder?: boolean;
-  error?: boolean;
 }

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;