@momo-kits/foundation 0.75.1-beta.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: '#dfdfe6',
+      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: Colors.pink_04,
+    secondary: Colors.pink_08,
+    background: {
+      default: '#121212', // Dark background
+      surface: '#1e1e1e', // Slightly lighter surface background
+      tonal: Colors.pink_10,
+      pressed: '#1a1a1a', // Pressed state background
+      selected: Colors.pink_11,
+      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/Divider/index.tsx

@@ -0,0 +1,19 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+
+const Divider = () => {
+  const {theme} = useContext(ApplicationContext);
+
+  return (
+    <View
+      style={{
+        height: 1,
+        width: '100%',
+        backgroundColor: theme.colors.border.default,
+      }}
+    />
+  );
+};
+
+export {Divider};

package/Icon/index.tsx

@@ -0,0 +1,37 @@
+import React, {useContext} from 'react';
+import IconSources from '../Assets/icon.json';
+import {IconProps} from './types';
+import {ApplicationContext} from '../Navigation';
+import {Image} from '../Image';
+
+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]: {uri: string}} = IconSources;
+      return icon[source] ?? icon.ic_warning;
+    }
+    return {uri: source};
+  };
+
+  return (
+    <Image
+      accessibilityLabel={`Icon/${getIconSource()}`}
+      loading={false}
+      source={getIconSource()}
+      style={[style, {width: size, height: size}]}
+      tintColor={color ?? theme.colors.text.default}
+    />
+  );
+};
+
+Icon.defaultProps = {
+  source: 'ic_back',
+  size: 24,
+};
+
+export {Icon, IconSources};

package/Icon/types.ts

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

package/IconButton/index.tsx

@@ -0,0 +1,128 @@
+import React, {useContext} from 'react';
+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> = ({
+  type,
+  icon,
+  size,
+  onPress,
+  ...rest
+}) => {
+  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':
+        return {
+          backgroundColor: theme.colors.background.disable,
+        };
+      case 'primary':
+        return {backgroundColor: theme.colors.primary};
+      case 'secondary':
+        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 '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.default;
+      case 'outline':
+        return theme.colors.primary;
+      default:
+        return Colors.black_01;
+    }
+  };
+
+  /**
+   * 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}
+      accessibilityLabel={`IconButton/${icon}`}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      <Icon size={iconSize} source={icon} color={getIconColor()} />
+    </TouchableOpacity>
+  );
+};
+
+IconButton.defaultProps = {
+  type: 'primary',
+  disabled: false,
+};
+
+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

@@ -0,0 +1,80 @@
+import React, {useContext, useState} from 'react';
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
+import FastImage from 'react-native-fast-image';
+import styles from './styles';
+import {ApplicationContext} from '../Navigation';
+import {Skeleton} from '../Skeleton';
+import {Icon} from '../Icon';
+import {Styles} from '../Consts';
+import {FastImagePropsWithoutStyle} from './types';
+
+export interface ImageProps extends FastImagePropsWithoutStyle {
+  style?: StyleProp<ViewStyle>;
+  loading?: boolean;
+  accessibilityLabel?: string;
+}
+
+const Image: React.FC<ImageProps> = ({
+  style,
+  source,
+  accessibilityLabel,
+  ...rest
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [loading, setLoading] = useState(rest.loading);
+  const [fail, setFail] = useState(false);
+
+  /**
+   * render content loading | fail | rendered
+   * @returns {JSX.Element}
+   */
+  const renderContent = () => {
+    if (loading || fail) {
+      let content = (
+        <Skeleton style={[StyleSheet.absoluteFill, styles.image]} />
+      );
+      if (fail) {
+        content = (
+          <View style={Styles.flexCenter}>
+            <Icon source="media_fail" color={theme.colors.text.disable} />
+          </View>
+        );
+      }
+      return (
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            styles.image,
+            {backgroundColor: theme.colors.background.disable},
+          ]}>
+          {content}
+        </View>
+      );
+    }
+  };
+
+  return (
+    <View
+      style={[styles.container, style]}
+      accessibilityLabel={`Image/${accessibilityLabel ?? source}`}>
+      <FastImage
+        {...rest}
+        source={source}
+        style={styles.image}
+        onLoad={() => {
+          setFail(false);
+          setLoading(rest.loading);
+        }}
+        onLoadEnd={() => setLoading(false)}
+        onError={() => setFail(true)}
+      />
+      {renderContent()}
+    </View>
+  );
+};
+
+Image.defaultProps = {
+  loading: true,
+};
+
+export {Image};

package/Image/styles.ts

@@ -0,0 +1,13 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+});

package/Image/types.ts

@@ -0,0 +1,3 @@
+import {FastImageProps} from 'react-native-fast-image';
+
+export type FastImagePropsWithoutStyle = Omit<FastImageProps, 'style'>;

package/Input/Input.tsx

@@ -0,0 +1,142 @@
+import React, {FC, useContext, useEffect, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+import styles from './styles';
+import {
+  checkTyping,
+  ErrorView,
+  FloatingView,
+  getBorderColor,
+  getSizeStyle,
+} 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,
+  required,
+  defaultValue,
+  ...props
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
+
+  const inputRef = useRef<any>(null);
+
+  const onClearText = () => {
+    inputRef?.current?.clear();
+    _onChangeText('');
+  };
+
+  const _onChangeText = (text: string) => {
+    checkTyping(text, haveValue, setHaveValue);
+    onChangeText?.(text);
+  };
+
+  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(size),
+          getBorderColor(focused, errorMessage, disabled),
+          styles.inputWrapper,
+          {backgroundColor: theme.colors.background.surface},
+        ]}>
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          required={required}
+          floatingIcon={floatingIcon}
+        />
+        <View style={styles.inputView}>
+          <TextInput
+            {...props}
+            editable={!disabled}
+            textAlignVertical="top"
+            ref={inputRef}
+            style={[
+              styles.input,
+              {
+                color: textColor,
+              },
+            ]}
+            textBreakStrategy="highQuality"
+            value={value}
+            onChangeText={_onChangeText}
+            onFocus={_onFocus}
+            onBlur={_onBlur}
+            placeholder={placeholder}
+            selectionColor={theme.colors.primary}
+            placeholderTextColor={placeholderColor}
+          />
+        </View>
+        <View style={styles.iconView}>
+          {focused && haveValue && (
+            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
+              />
+            </TouchableOpacity>
+          )}
+          {!!icon && <Icon color={iconTintColor} source={icon} size={24} />}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.wrapper} accessibilityLabel={`Input`}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} />
+    </View>
+  );
+};
+
+Input.defaultProps = {
+  size: 'small',
+};
+
+export default Input;

package/Input/InputMoney.tsx

@@ -0,0 +1,132 @@
+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 {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {InputMoneyProps} from './index';
+import {Icon} from '../Icon';
+import {formatMoneyToNumber, formatNumberToMoney} from './utils';
+
+const InputMoney: FC<InputMoneyProps> = ({
+  onChangeText,
+  floatingValue,
+  floatingIcon,
+  size = 'small',
+  onBlur,
+  onFocus,
+  errorMessage,
+  icon,
+  disabled,
+  floatingIconColor,
+  iconColor,
+  required,
+  ...props
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<any>(null);
+  const [value, setValue] = useState('');
+  const onClearText = () => {
+    inputRef?.current?.clear();
+    setValue('');
+    onChangeText?.('');
+  };
+  const _onChangeText = (text: string) => {
+    if (text.length < value.length && value.indexOf(text) === 0) {
+      text = value.slice(0, -2) + 'đ';
+    }
+    const valueFormat = formatMoneyToNumber(text, 'đ');
+    setValue(formatNumberToMoney(valueFormat, 'đ'));
+    onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
+  };
+
+  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(size),
+          getBorderColor(focused, errorMessage, disabled),
+          styles.inputWrapper,
+          {backgroundColor: theme.colors.background.surface},
+        ]}>
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          required={required}
+          floatingIcon={floatingIcon}
+        />
+        <View style={styles.inputView}>
+          <TextInput
+            {...props}
+            editable={!disabled}
+            textAlignVertical="top"
+            ref={inputRef}
+            keyboardType={'number-pad'}
+            style={[
+              styles.moneyInput,
+              {
+                color: textColor,
+              },
+            ]}
+            value={value}
+            onChangeText={_onChangeText}
+            onFocus={_onFocus}
+            onBlur={_onBlur}
+            selectionColor={theme.colors.primary}
+            placeholderTextColor={placeholderColor}
+            placeholder={'0đ'}
+          />
+        </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 && <Icon color={iconTintColor} source={icon} />}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.wrapper} accessibilityLabel={`InputMoney`}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} />
+    </View>
+  );
+};
+
+export default InputMoney;