@momo-kits/foundation 0.75.1-beta.3

package/Button/index.tsx

@@ -0,0 +1,247 @@
+import React, {FC, useContext} from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+import {Text} from '../Text';
+import {Typography} from '../Text/types';
+import {Colors} from '../Consts';
+import styles from './styles';
+import {Icon} from '../Icon';
+
+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;
+  onPress: () => void;
+}
+
+const Button: FC<ButtonProps> = ({
+  type,
+  size,
+  useTintColor,
+  full,
+  iconRight,
+  iconLeft,
+  title,
+  onPress,
+  ...rest
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const getSizeStyle = () => {
+    const styleSheet: {[key: string]: any} = styles;
+    return styleSheet[size ?? 'small'];
+  };
+
+  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,
+        };
+      case 'text':
+        return {};
+      default:
+        return {backgroundColor: 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 = (): Typography => {
+    switch (size) {
+      case 'large':
+        return 'action_default';
+      case 'medium':
+        return 'action_s';
+      case 'small':
+        return 'action_xs';
+
+      default:
+        return 'action_default';
+    }
+  };
+
+  const getTextColor = (): string => {
+    switch (type) {
+      case 'disabled':
+        return theme.colors.text.disable;
+      case 'primary':
+        return Colors.black_01;
+      case 'secondary':
+        return theme.colors.text.default;
+      case 'outline':
+        return theme.colors.primary;
+      case 'tonal':
+        return theme.colors.primary;
+      case 'danger':
+        return Colors.black_01;
+      case 'text':
+        return theme.colors.primary;
+      default:
+        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 (iconLeft) {
+      const iconSize = getIconSize();
+      const marginRight = getIconSpace();
+      const color = useTintColor ? getTextColor() : undefined;
+
+      return (
+        <View
+          style={[
+            styles.leading,
+            {width: iconSize, height: iconSize, marginRight},
+          ]}>
+          <Icon color={color} source={iconLeft} size={iconSize} />
+        </View>
+      );
+    }
+  };
+
+  /**
+   * render trailing
+   */
+  const renderTrailing = () => {
+    const marginLeft = getIconSpace();
+    const color = useTintColor ? getTextColor() : undefined;
+    if (iconRight) {
+      const iconSize = getIconSize();
+      return (
+        <View
+          style={[
+            styles.trailing,
+            {width: iconSize, height: iconSize, marginLeft},
+          ]}>
+          <Icon color={color} source={iconRight} size={iconSize} />
+        </View>
+      );
+    }
+  };
+
+  const buttonStyle = StyleSheet.flatten([
+    getSizeStyle(),
+    getTypeStyle(),
+    full && {width: '100%'},
+  ]);
+
+  const onPressButton = () => {
+    if (type === 'disabled') {
+      return () => {};
+    }
+    onPress?.();
+  };
+
+  const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
+
+  return (
+    <TouchableOpacity
+      {...rest}
+      accessibilityLabel={`Button/${title}`}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      {renderLeading()}
+      {renderTitle()}
+      {renderTrailing()}
+    </TouchableOpacity>
+  );
+};
+
+Button.defaultProps = {
+  type: 'primary',
+  size: 'large',
+  full: true,
+  disabled: false,
+  title: 'Button',
+  useTintColor: true,
+};
+
+export {Button};

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/CheckBox/index.tsx

@@ -0,0 +1,61 @@
+import React, {FC, useContext} from 'react';
+import {TouchableOpacity, View} from 'react-native';
+import {CheckBoxProps} from './types';
+import styles from './styles';
+import {ApplicationContext} from '../Navigation';
+import {Text} from '../Text';
+import {Icon} from '../Icon';
+
+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 = indeterminated ? 'ic_minus' : 'ic_checked';
+
+  if (disabled) {
+    borderColor = haveValue
+      ? theme.colors.background.tonal
+      : theme.colors.border.disable;
+    backgroundColor = haveValue
+      ? theme.colors.background.tonal
+      : theme.colors.background.surface;
+  }
+  const checkboxStyle = {borderColor, backgroundColor, borderWidth: 1};
+
+  const onChangeValue = () => {
+    onChange?.(!value);
+  };
+  return (
+    <TouchableOpacity
+      accessibilityLabel={`CheckBox/${label}`}
+      activeOpacity={0.8}
+      onPress={onChangeValue}
+      disabled={disabled}
+      style={[style, styles.container]}>
+      <View style={[checkboxStyle, styles.checkbox]}>
+        {haveValue && (
+          <Icon
+            color={theme.colors.background.surface}
+            size={20}
+            source={iconSource}
+          />
+        )}
+      </View>
+      {!!label && <Text typography={'description_default'}>{label}</Text>}
+    </TouchableOpacity>
+  );
+};
+
+CheckBox.defaultProps = {
+  disabled: false,
+};
+
+export {CheckBox};

package/CheckBox/styles.ts

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

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

@@ -0,0 +1,214 @@
+import {Platform} from 'react-native';
+
+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 = {
+  XXS: 2,
+  XS: 4,
+  S: 8,
+  M: 12,
+  L: 16,
+  XL: 24,
+};
+
+const Radius = {
+  XXS: 2,
+  XS: 4,
+  S: 8,
+  M: 12,
+  L: 16,
+  XL: 24,
+};
+
+const Shadow = {
+  Dark: Platform.select({
+    ios: {
+      shadowColor: Colors.black_17,
+      shadowOffset: {
+        width: 2,
+        height: 2,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 10,
+    },
+    android: {
+      shadowColor: Colors.black_20,
+      shadowOffset: {
+        width: 0,
+        height: 3,
+      },
+      shadowOpacity: 0.29,
+      shadowRadius: 4.65,
+
+      elevation: 7,
+    },
+  }),
+
+  Light: Platform.select({
+    ios: {
+      shadowColor: Colors.black_17,
+      shadowOffset: {
+        width: 2,
+        height: 2,
+      },
+      shadowOpacity: 0.07,
+      shadowRadius: 10,
+    },
+    android: {
+      shadowColor: Colors.black_10,
+      shadowOffset: {
+        width: 1,
+        height: 3,
+      },
+      shadowOpacity: 0.29,
+      shadowRadius: 4.65,
+
+      elevation: 6,
+    },
+  }),
+};
+
+export {Colors, Spacing, Radius, Shadow};

package/Consts/index.ts

@@ -0,0 +1,3 @@
+export * from './colors+spacing+radius';
+export * from './theme';
+export * from './styles';

package/Consts/styles.ts

@@ -0,0 +1,78 @@
+import {StyleSheet} from 'react-native';
+
+const Styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  flexCenter: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rowSpace: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  rowCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rowWrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  columnSpace: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  columnSpaceRight: {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+  },
+  columnCenter: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  columnCenterRight: {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  //paddingHorizontal
+  paddingHorizontal4: {
+    paddingHorizontal: 4,
+  },
+  paddingHorizontal8: {
+    paddingHorizontal: 8,
+  },
+  paddingHorizontal16: {
+    paddingHorizontal: 16,
+  },
+  paddingHorizontal24: {
+    paddingHorizontal: 24,
+  },
+  //paddingVertical
+  paddingVertical4: {
+    paddingVertical: 4,
+  },
+  paddingVertical8: {
+    paddingVertical: 8,
+  },
+  paddingVertical16: {
+    paddingVertical: 16,
+  },
+  paddingVertical24: {
+    paddingVertical: 24,
+  },
+});
+
+export {Styles};