@momo-kits/foundation 1.0.0 → 1.0.3

package/Button/index.tsx

@@ -1,98 +1,87 @@
-import React, {useContext} from 'react';
+import React, {FC, useContext} from 'react';
 import {
-  ActivityIndicator,
   StyleSheet,
   TouchableOpacity,
+  TouchableOpacityProps,
   View,
 } from 'react-native';
-import {NavigationContext, Colors, Styles, Text} from '../index';
+import {ApplicationContext} from '../Navigation';
+import {Text} from '../Text';
+import {Typography} from '../Text/types';
+import {Colors} from '../Consts';
 import styles from './styles';
+import {Image} from '../Image';
+
+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 Index = props => {
-  const {theme} = useContext(NavigationContext);
-  const {
-    style,
-    textStyle,
-    type,
-    size,
-    full,
-    disabled,
-    leading,
-    trailing,
-    loading,
-    children,
-  } = props;
-
-  /**
-   * export size style
-   */
   const getSizeStyle = () => {
-    switch (size) {
-      case 'large':
-        return styles.large;
-      case 'medium':
-        return styles.medium;
-      case 'small':
-        return styles.small;
-
-      default:
-        return styles.large;
-    }
+    const styleSheet: {[key: string]: any} = styles;
+    return styleSheet[size ?? 'small'];
   };
 
-  /**
-   * export type style
-   */
   const getTypeStyle = () => {
-    if (disabled) {
-      return {
-        backgroundColor: theme.colors.border,
-      };
-    }
     switch (type) {
+      case 'disabled':
+        return {
+          backgroundColor: theme.colors.background.disable,
+        };
       case 'primary':
         return {backgroundColor: theme.colors.primary};
       case 'secondary':
         return {
-          backgroundColor: theme.colors.card,
+          backgroundColor: theme.colors.background.surface,
           borderWidth: 1,
-          borderColor: theme.colors.border,
+          borderColor: theme.colors.border.default,
         };
       case 'outline':
         return {
-          backgroundColor: theme.colors.card,
+          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,
+        };
       case 'text':
         return {};
-
       default:
         return {backgroundColor: theme.colors.primary};
     }
   };
 
-  /**
-   * export loading color
-   */
-  const getLoadingColor = () => {
-    if (disabled) {
-      return theme.colors.textSecondary;
-    }
-    switch (type) {
-      case 'primary':
-        return Colors.black_01;
-      case 'secondary':
-        return theme.colors.text;
-      case 'outline':
-        return theme.colors.primary;
-      case 'text':
-        return theme.colors.primary;
-      default:
-        return theme.colors.primary;
-    }
-  };
-
   /**
    * export icon size
    */
@@ -128,109 +117,74 @@ const Index = props => {
   /**
    * export typography style
    */
-  const getTypography = () => {
+  const getTypography = (): Typography => {
     switch (size) {
       case 'large':
-        return 'h4';
+        return 'action_default';
       case 'medium':
-        return 'title';
+        return 'action_s';
       case 'small':
-        return 'subtitle';
+        return 'action_xs';
 
       default:
-        return 'h4';
+        return 'action_default';
     }
   };
 
-  /**
-   * render Text
-   */
-  const renderText = () => {
-    const typography = getTypography();
-    if (disabled) {
-      return (
-        <Text
-          typography={typography}
-          weight="bold"
-          type="secondary"
-          numberOfLines={1}
-          style={textStyle}>
-          {children}
-        </Text>
-      );
-    }
+  const getTextColor = (): string => {
     switch (type) {
+      case 'disabled':
+        return theme.colors.text.disable;
       case 'primary':
-        return (
-          <Text
-            typography={typography}
-            weight="bold"
-            color="white"
-            numberOfLines={1}
-            style={textStyle}>
-            {children}
-          </Text>
-        );
+        return Colors.black_01;
       case 'secondary':
-        return (
-          <Text
-            typography={typography}
-            weight="bold"
-            numberOfLines={1}
-            style={textStyle}>
-            {children}
-          </Text>
-        );
+        return theme.colors.text.default;
       case 'outline':
-        return (
-          <Text
-            typography={typography}
-            weight="bold"
-            color="primary"
-            numberOfLines={1}
-            style={textStyle}>
-            {children}
-          </Text>
-        );
+        return theme.colors.primary;
+      case 'tonal':
+        return theme.colors.primary;
+      case 'danger':
+        return Colors.black_01;
       case 'text':
-        return (
-          <Text
-            typography={typography}
-            type="secondary"
-            weight="bold"
-            numberOfLines={1}
-            style={textStyle}>
-            {children}
-          </Text>
-        );
-
+        return theme.colors.primary;
       default:
-        return (
-          <Text
-            typography={typography}
-            weight="bold"
-            numberOfLines={1}
-            style={textStyle}>
-            {children}
-          </Text>
-        );
+        return Colors.black_01;
     }
   };
 
+  /**
+   * render title
+   */
+  const renderTitle = () => {
+    const typography = getTypography();
+    const color = getTextColor();
+    return (
+      <Text typography={typography} color={color} numberOfLines={1}>
+        {title}
+      </Text>
+    );
+  };
+
   /**
    * render leading
    */
   const renderLeading = () => {
-    if (leading) {
+    if (iconLeft) {
       const iconSize = getIconSize();
       const marginRight = getIconSpace();
+      const color = useTintColor ? getTextColor() : undefined;
+
       return (
         <View
           style={[
             styles.leading,
             {width: iconSize, height: iconSize, marginRight},
           ]}>
-          {leading}
+          <Image
+            tintColor={color}
+            source={{uri: iconLeft}}
+            style={{width: iconSize, height: iconSize}}
+          />
         </View>
       );
     }
@@ -241,16 +195,8 @@ const Index = props => {
    */
   const renderTrailing = () => {
     const marginLeft = getIconSpace();
-    if (loading) {
-      return (
-        <View style={[styles.trailing, {marginLeft}]}>
-          <View style={Styles.flexCenter}>
-            <ActivityIndicator color={getLoadingColor()} />
-          </View>
-        </View>
-      );
-    }
-    if (trailing) {
+    const color = useTintColor ? getTextColor() : undefined;
+    if (iconRight) {
       const iconSize = getIconSize();
       return (
         <View
@@ -258,7 +204,11 @@ const Index = props => {
             styles.trailing,
             {width: iconSize, height: iconSize, marginLeft},
           ]}>
-          {trailing}
+          <Image
+            tintColor={color}
+            source={{uri: iconRight}}
+            style={{width: iconSize, height: iconSize}}
+          />
         </View>
       );
     }
@@ -268,40 +218,37 @@ const Index = props => {
     getSizeStyle(),
     getTypeStyle(),
     full && {width: '100%'},
-    style,
   ]);
 
+  const onPressButton = (e: any) => {
+    if (type === 'disabled') {
+      return () => {};
+    }
+    onPress?.(e);
+  };
+
+  const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
+
   return (
-    <TouchableOpacity {...props} style={buttonStyle}>
+    <TouchableOpacity
+      {...rest}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
       {renderLeading()}
-      {renderText()}
+      {renderTitle()}
       {renderTrailing()}
     </TouchableOpacity>
   );
 };
 
-// Index.propTypes = {
-//   textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-//   type: PropTypes.oneOf(['primary', 'secondary','' ,'outline', 'text']),
-//   size: PropTypes.oneOf(['large', 'medium', 'small']),
-//   full: PropTypes.bool,
-//   disabled: PropTypes.bool,
-//   leading: PropTypes.element,
-//   trailing: PropTypes.element,
-//   loading: PropTypes.bool,
-//   children: PropTypes.string,
-// };
-
-Index.defaultProps = {
-  textStyle: {},
+Button.defaultProps = {
   type: 'primary',
   size: 'large',
   full: true,
   disabled: false,
-  leading: null,
-  trailing: null,
-  loading: false,
-  children: 'Button',
+  title: 'Button',
+  useTintColor: true,
 };
 
-export default Index;
+export {Button};

package/CheckBox/index.tsx

@@ -0,0 +1,63 @@
+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';
+
+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, style, label, indeterminated} = props;
+
+  const haveValue = value || indeterminated;
+  let borderColor = haveValue
+    ? theme.colors.primary
+    : theme.colors.text.default;
+  let backgroundColor = haveValue
+    ? theme.colors.primary
+    : theme.colors.background.surface;
+
+  let iconSource = value ? IC_CHECKED_DEFAULT : undefined;
+
+  if (indeterminated) {
+    iconSource = IC_INDETERMINATED;
+  }
+
+  if (disabled) {
+    borderColor = haveValue
+      ? theme.colors.background.disable
+      : theme.colors.border.disable;
+    backgroundColor = haveValue
+      ? theme.colors.background.disable
+      : theme.colors.background.surface;
+  }
+  const checkboxStyle = {borderColor, backgroundColor, borderWidth: 1};
+
+  const onChangeValue = () => {
+    onChange?.(!value);
+  };
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={onChangeValue}
+      disabled={disabled}
+      style={[style, styles.container]}>
+      <View style={[checkboxStyle, styles.checkbox]}>
+        <Image style={styles.icon} source={{uri: iconSource}} />
+      </View>
+      <Text typography={'description_default'}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+CheckBox.defaultProps = {
+  disabled: false,
+};
+
+export {CheckBox};

package/CheckBox/styles.ts

@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: Radius.XS,
+    borderWidth: 2,
+    marginRight: Spacing.S,
+  },
+  container: {flexDirection: 'row'},
+  icon: {width: 20, height: 20},
+});

package/CheckBox/types.ts

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

package/Consts/colors+spacing+radius.ts

@@ -144,16 +144,18 @@ const Colors = {
   red_11: '#fef8f8',
 };
 const Spacing = {
-  XS: 2,
-  S: 4,
+  XXS: 2,
+  XS: 4,
+  S: 8,
   M: 12,
   L: 16,
   XL: 24,
 };
 
 const Radius = {
-  XS: 2,
-  S: 4,
+  XXS: 2,
+  XS: 4,
+  S: 8,
   M: 12,
   L: 16,
   XL: 24,

package/Consts/index.ts

@@ -1,76 +1,7 @@
-import {Context, Theme} from '../Navigation/types';
+export const GutterSize = 12;
+export const ScreenPadding = 12;
+export const NumberOfColumns = 12;
 
-const defaultTheme: Theme = {
-  dark: false,
-  colors: {
-    background_default: '',
-    background_surface: '',
-    background_pressed: '',
-    background_selected: '',
-    background_disable: '',
-    background_primary: '',
-    background_tonal: '',
-    text_default: '',
-    text_secondary: '',
-    text_hint: '',
-    text_disable: '',
-    text_white: '',
-    text_primary: '',
-    text_interactive: '',
-    text_highlight: '',
-    text_success: '',
-    text_warning: '',
-    text_error: '',
-    border_default: '',
-    border_disable: '',
-    border_primary: '',
-    border_primary_disable: '',
-    border_error: '',
-    border_error_disable: '',
-    border_success: '',
-    border_success_disable: '',
-  },
-  font: 'SFProText',
-};
-
-const defaultDarkTheme: Theme = {
-  dark: true,
-  colors: {
-    background_default: '',
-    background_surface: '',
-    background_pressed: '',
-    background_selected: '',
-    background_disable: '',
-    background_primary: '',
-    background_tonal: '',
-    text_default: '',
-    text_secondary: '',
-    text_hint: '',
-    text_disable: '',
-    text_white: '',
-    text_primary: '',
-    text_interactive: '',
-    text_highlight: '',
-    text_success: '',
-    text_warning: '',
-    text_error: '',
-    border_default: '',
-    border_disable: '',
-    border_primary: '',
-    border_primary_disable: '',
-    border_error: '',
-    border_error_disable: '',
-    border_success: '',
-    border_success_disable: '',
-  },
-  font: 'Raleway',
-};
-
-const defaultContext: Context = {
-  theme: defaultTheme,
-  navigator: undefined,
-};
-
-export {defaultContext, defaultTheme, defaultDarkTheme};
 export * from './colors+spacing+radius';
+export * from './theme';
 export * from './styles';

package/Consts/styles.ts

@@ -117,7 +117,7 @@ const Styles = StyleSheet.create({
     overflow: 'hidden',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 8,
+    paddingHorizontal: 4,
   },
   //text
   textCenter: {textAlign: 'center'},