@momo-kits/foundation 1.0.0 → 1.0.1

package/CheckBox/types.ts

@@ -0,0 +1,7 @@
+export interface CheckBoxProps {
+  value: boolean;
+  disabled?: boolean;
+  label?: string;
+  onChange: (value: boolean) => void;
+  indeterminated: boolean;
+}

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'},

package/Consts/theme.ts

@@ -0,0 +1,65 @@
+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 defaultContext: Context = {
+  theme: defaultTheme,
+  navigator: undefined,
+};
+
+export {defaultContext, defaultTheme};

package/ContentLoader/index.tsx

@@ -1,23 +1,20 @@
 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 {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,30 @@
 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);
 
   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,65 +1,58 @@
 import React, {useContext} from 'react';
-import {StyleSheet, TouchableOpacity, View} from 'react-native';
-import {NavigationContext, Colors, Icon, IconButtonProps} from '../index';
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {IconButtonProps} from './types';
+import {ApplicationContext} from '../Navigation';
+import {Colors} from '../Consts';
+import {Icon} from '../Icon';
+import styles from './styles';
 
 const IconButton: React.FC<IconButtonProps> = ({
-  style,
   type,
   icon,
   size,
-  shape,
+  onPress,
   ...rest
 }) => {
-  const {theme} = useContext(NavigationContext);
+  const {theme} = useContext(ApplicationContext);
 
-  /**
-   * export size style
-   */
   const getSizeStyle = () => {
-    switch (size) {
-      case 'large':
-        return styles.large;
-      case 'small':
-        return styles.small;
-
-      default:
-        return styles.small;
-    }
-  };
-
-  /**
-   * export size style
-   */
-  const getIconSize = () => {
-    switch (size) {
-      case 'large':
-        return 24;
-      case 'small':
-        return 16;
-
-      default:
-        return 16;
+    if (size === 'small') {
+      return styles.small;
     }
+    return styles.large;
   };
-
-  /**
-   * export type style
-   */
   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: Colors.black_01,
+          borderWidth: 1,
+          borderColor: theme.colors.border.default,
+        };
       case 'outline':
         return {
+          backgroundColor: Colors.black_01,
           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};
     }
@@ -67,61 +60,48 @@ const IconButton: React.FC<IconButtonProps> = ({
 
   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,
-  ]);
+  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/IconButton/types.ts

@@ -4,14 +4,13 @@ export type IconButtonType =
   | 'primary'
   | 'tonal'
   | 'secondary'
+  | 'danger'
   | 'outline'
   | 'disabled';
 export type IconButtonSize = 'large' | 'small';
-export type IconButtonShape = 'circle' | 'rectangle';
 
 export interface IconButtonProps extends TouchableOpacityProps {
   icon: string;
   type?: IconButtonType;
   size?: IconButtonSize;
-  shape?: IconButtonShape;
 }

package/Image/index.tsx

@@ -1,19 +1,17 @@
 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 {theme} = useContext(ApplicationContext);
+  const {style, placeholder, source} = props;
   const [loading, setLoading] = useState(typeof source === 'object');
   const [fail, setFail] = useState(false);
 
@@ -27,18 +25,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>
       );
     }
   };

package/Image/types.ts

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