@momo-kits/foundation 1.0.0

package/Button/index.tsx

@@ -0,0 +1,307 @@
+import React, {useContext} from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {NavigationContext, Colors, Styles, Text} from '../index';
+import styles from './styles';
+
+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;
+    }
+  };
+
+  /**
+   * export type style
+   */
+  const getTypeStyle = () => {
+    if (disabled) {
+      return {
+        backgroundColor: theme.colors.border,
+      };
+    }
+    switch (type) {
+      case 'primary':
+        return {backgroundColor: theme.colors.primary};
+      case 'secondary':
+        return {
+          backgroundColor: theme.colors.card,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+        };
+      case 'outline':
+        return {
+          backgroundColor: theme.colors.card,
+          borderWidth: 1,
+          borderColor: theme.colors.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
+   */
+  const getIconSize = () => {
+    switch (size) {
+      case 'large':
+        return 24;
+      case 'medium':
+      case 'small':
+        return 16;
+
+      default:
+        return 24;
+    }
+  };
+
+  /**
+   * export icon size
+   */
+  const getIconSpace = () => {
+    switch (size) {
+      case 'large':
+      case 'medium':
+        return 8;
+      case 'small':
+        return 4;
+
+      default:
+        return 8;
+    }
+  };
+
+  /**
+   * export typography style
+   */
+  const getTypography = () => {
+    switch (size) {
+      case 'large':
+        return 'h4';
+      case 'medium':
+        return 'title';
+      case 'small':
+        return 'subtitle';
+
+      default:
+        return 'h4';
+    }
+  };
+
+  /**
+   * render Text
+   */
+  const renderText = () => {
+    const typography = getTypography();
+    if (disabled) {
+      return (
+        <Text
+          typography={typography}
+          weight="bold"
+          type="secondary"
+          numberOfLines={1}
+          style={textStyle}>
+          {children}
+        </Text>
+      );
+    }
+    switch (type) {
+      case 'primary':
+        return (
+          <Text
+            typography={typography}
+            weight="bold"
+            color="white"
+            numberOfLines={1}
+            style={textStyle}>
+            {children}
+          </Text>
+        );
+      case 'secondary':
+        return (
+          <Text
+            typography={typography}
+            weight="bold"
+            numberOfLines={1}
+            style={textStyle}>
+            {children}
+          </Text>
+        );
+      case 'outline':
+        return (
+          <Text
+            typography={typography}
+            weight="bold"
+            color="primary"
+            numberOfLines={1}
+            style={textStyle}>
+            {children}
+          </Text>
+        );
+      case 'text':
+        return (
+          <Text
+            typography={typography}
+            type="secondary"
+            weight="bold"
+            numberOfLines={1}
+            style={textStyle}>
+            {children}
+          </Text>
+        );
+
+      default:
+        return (
+          <Text
+            typography={typography}
+            weight="bold"
+            numberOfLines={1}
+            style={textStyle}>
+            {children}
+          </Text>
+        );
+    }
+  };
+
+  /**
+   * render leading
+   */
+  const renderLeading = () => {
+    if (leading) {
+      const iconSize = getIconSize();
+      const marginRight = getIconSpace();
+      return (
+        <View
+          style={[
+            styles.leading,
+            {width: iconSize, height: iconSize, marginRight},
+          ]}>
+          {leading}
+        </View>
+      );
+    }
+  };
+
+  /**
+   * render trailing
+   */
+  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 iconSize = getIconSize();
+      return (
+        <View
+          style={[
+            styles.trailing,
+            {width: iconSize, height: iconSize, marginLeft},
+          ]}>
+          {trailing}
+        </View>
+      );
+    }
+  };
+
+  const buttonStyle = StyleSheet.flatten([
+    getSizeStyle(),
+    getTypeStyle(),
+    full && {width: '100%'},
+    style,
+  ]);
+
+  return (
+    <TouchableOpacity {...props} style={buttonStyle}>
+      {renderLeading()}
+      {renderText()}
+      {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: {},
+  type: 'primary',
+  size: 'large',
+  full: true,
+  disabled: false,
+  leading: null,
+  trailing: null,
+  loading: false,
+  children: 'Button',
+};
+
+export default Index;

package/Button/styles.ts

@@ -0,0 +1,41 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  large: {
+    height: 48,
+    borderRadius: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    minWidth: 128,
+  },
+  medium: {
+    height: 36,
+    borderRadius: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    minWidth: 80,
+  },
+  small: {
+    height: 28,
+    borderRadius: 6,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    minWidth: 60,
+  },
+  leading: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  trailing: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/Button/types.ts

@@ -0,0 +1,18 @@
+import {
+  TouchableNativeFeedbackProps,
+  TouchableOpacityProps,
+} from 'react-native';
+
+export type ButtonType =
+  | 'primary'
+  | 'secondary'
+  | 'tonal'
+  | 'outline'
+  | 'disable'
+  | 'text';
+
+export type ButtonSize = 'large' | 'medium' | 'small';
+
+export interface ButtonProps
+  extends TouchableOpacityProps,
+    TouchableNativeFeedbackProps {}

package/CheckBox/index.js

@@ -0,0 +1,74 @@
+import React, {useContext} from 'react';
+import {TouchableOpacity} from 'react-native';
+import PropTypes from 'prop-types';
+import {ApplicationContext, Index} from '@components';
+
+const Index = props => {
+  const {theme} = useContext(ApplicationContext);
+  const {style, value, disabled, size, shape, onPress} = props;
+
+  /**
+   * export icon name
+   */
+  const getIconName = () => {
+    switch (shape) {
+      case 'circle':
+        if (value) {
+          return 'checkbox-marked-circle';
+        }
+        return 'checkbox-blank-circle-outline';
+      case 'rectangle':
+        if (value) {
+          return 'checkbox-marked';
+        }
+        return 'checkbox-blank-outline';
+
+      default:
+        return 'checkbox-blank-outline';
+    }
+  };
+
+  /**
+   * export icon color
+   */
+  const getIconColor = () => {
+    if (disabled) {
+      return theme.colors.textSecondary;
+    }
+    if (value) {
+      return theme.colors.primary;
+    }
+    return theme.colors.text;
+  };
+
+  return (
+    <TouchableOpacity disabled={disabled} onPress={onPress}>
+      <Index
+        name={getIconName()}
+        size={size}
+        color={getIconColor()}
+        style={style}
+      />
+    </TouchableOpacity>
+  );
+};
+
+Index.propTypes = {
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  value: PropTypes.bool,
+  disabled: PropTypes.bool,
+  size: PropTypes.number,
+  onPress: PropTypes.func,
+  shape: PropTypes.oneOf(['circle', 'rectangle']),
+};
+
+Index.defaultProps = {
+  style: {},
+  value: false,
+  disabled: false,
+  size: 24,
+  onPress: () => {},
+  shape: 'circle',
+};
+
+export default Index;

package/CheckBox/styles.js

@@ -0,0 +1,3 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({});

package/Consts/colors+spacing+radius.ts

@@ -0,0 +1,162 @@
+const Colors = {
+  black_01: '#ffffff',
+  black_02: '#f9f9f9',
+  black_03: '#f0f0f0',
+  black_04: '#e8e8e8',
+  black_05: '#e5e5e5',
+  black_06: '#d8d8d8',
+  black_07: '#cccccc',
+  black_08: '#c6c6c6',
+  black_09: '#b9b9b9',
+  black_10: '#a0a0a0',
+  black_11: '#878787',
+  black_12: '#727272',
+  black_13: '#646464',
+  black_14: '#565656',
+  black_15: '#484848',
+  black_16: '#404040',
+  black_17: '#303233',
+  black_18: '#242424',
+  black_19: '#18191a',
+  black_20: '#000000',
+  pink_01: '#bc2678',
+  pink_02: '#d42a87',
+  pink_03: '#eb2f96',
+  pink_04: '#ed43a0',
+  pink_05: '#ef59ab',
+  pink_06: '#f382c0',
+  pink_07: '#f7acd5',
+  pink_08: '#fbd5ea',
+  pink_09: '#fdeaf4',
+  pink_10: '#fef4fa',
+  pink_11: '#fef8fc',
+  pink_MoMo_Branding: '#a50064',
+  violet_01: '#7822c0',
+  violet_02: '#8726d8',
+  violet_03: '#962af0',
+  violet_04: '#a03ff1',
+  violet_05: '#ab55f3',
+  violet_06: '#c07ff6',
+  violet_07: '#d5aaf9',
+  violet_08: '#ead4fc',
+  violet_09: '#f4e9fd',
+  violet_10: '#faf4fe',
+  violet_11: '#fcf8fe',
+  violet_11_stroke: '#dfe1e5',
+  indigo_01: '#3e3ccc',
+  indigo_02: '#4644e6',
+  indigo_03: '#4e4bff',
+  indigo_04: '#5f5dff',
+  indigo_05: '#716fff',
+  indigo_06: '#9593ff',
+  indigo_07: '#b8b7ff',
+  indigo_08: '#dcdbff',
+  indigo_09: '#ededff',
+  indigo_10: '#f6f6ff',
+  indigo_11: '#f9f9ff',
+  blue_01: '#0062cc',
+  blue_02: '#006ee6',
+  blue_03: '#007aff',
+  blue_04: '#1987ff',
+  blue_05: '#3395ff',
+  blue_06: '#66afff',
+  blue_07: '#99caff',
+  blue_08: '#cce4ff',
+  blue_09: '#e5f1ff',
+  blue_10: '#f2f8ff',
+  blue_11: '#f7fbff',
+  mint_01: '#0f9b9b',
+  mint_02: '#11afaf',
+  mint_03: '#13c2c2',
+  mint_04: '#2ac8c8',
+  mint_05: '#42cece',
+  mint_06: '#71dada',
+  mint_07: '#a1e7e7',
+  mint_08: '#d0f3f3',
+  mint_09: '#e7f8f8',
+  mint_10: '#f3fcfc',
+  mint_11: '#f8fdfd',
+  green_01: '#2a9f47',
+  green_02: '#2fb350',
+  green_03: '#34c759',
+  green_04: '#48cc69',
+  green_05: '#5dd27a',
+  green_06: '#85dd9b',
+  green_07: '#aee9bd',
+  green_08: '#d6f4de',
+  green_09: '#eaf9ee',
+  green_10: '#f5fcf6',
+  green_11: '#f9fdfa',
+  lime_01: '#80ae0e',
+  lime_02: '#90c30f',
+  lime_03: '#a0d911',
+  lime_04: '#a9dc28',
+  lime_05: '#b3e141',
+  lime_06: '#c6e870',
+  lime_07: '#d9f0a0',
+  lime_08: '#ecf7cf',
+  lime_09: '#f5fbe7',
+  lime_10: '#fafdf3',
+  lime_11: '#fcfef8',
+  yellow_01: '#cca300',
+  yellow_02: '#e6b800',
+  yellow_03: '#ffcc00',
+  yellow_04: '#ffd119',
+  yellow_05: '#ffd633',
+  yellow_06: '#ffe066',
+  yellow_07: '#ffeb99',
+  yellow_08: '#fff5cc',
+  yellow_09: '#fff9e5',
+  yellow_10: '#fffcf2',
+  yellow_11: '#fffdf7',
+  gold_01: '#c87012',
+  gold_02: '#e17e14',
+  gold_03: '#fa8c16',
+  gold_04: '#fa972d',
+  gold_05: '#fba345',
+  gold_06: '#fcba73',
+  gold_07: '#fdd1a2',
+  gold_08: '#fee8d0',
+  gold_09: '#fef3e7',
+  gold_10: '#fff9f3',
+  gold_11: '#fefbf8',
+  orange_01: '#c84316',
+  orange_02: '#e14c19',
+  orange_03: '#fa541c',
+  orange_04: '#fa6532',
+  orange_05: '#fb7649',
+  orange_06: '#fc9877',
+  orange_07: '#fdbba4',
+  orange_08: '#feddd2',
+  orange_09: '#feede8',
+  orange_10: '#fff6f3',
+  orange_11: '#fefaf8',
+  red_01: '#c41b24',
+  red_02: '#dd1f29',
+  red_03: '#f5222d',
+  red_04: '#f63842',
+  red_05: '#f74e57',
+  red_06: '#f97a81',
+  red_07: '#fba7ab',
+  red_08: '#fdd3d5',
+  red_09: '#fee8ea',
+  red_10: '#fef4f4',
+  red_11: '#fef8f8',
+};
+const Spacing = {
+  XS: 2,
+  S: 4,
+  M: 12,
+  L: 16,
+  XL: 24,
+};
+
+const Radius = {
+  XS: 2,
+  S: 4,
+  M: 12,
+  L: 16,
+  XL: 24,
+};
+
+export {Colors, Spacing, Radius};

package/Consts/index.ts

@@ -0,0 +1,76 @@
+import {Context, Theme} from '../Navigation/types';
+
+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 './styles';