@momo-kits/foundation 0.74.2-react-native.1

package/Button/index.tsx

@@ -0,0 +1,310 @@
+import React, {FC, useContext} from 'react';
+import {
+  Animated,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+} from 'react-native';
+
+import LinearGradient from 'react-native-linear-gradient';
+import {ApplicationContext} from '../Application';
+import {Text} from '../Text';
+import {Typography} from '../Text/types';
+import {Colors, Spacing} from '../Consts';
+import styles from './styles';
+import {Icon} from '../Icon';
+import {Loader} from '../Loader';
+
+const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
+
+export interface ButtonProps extends TouchableOpacityProps {
+  /**
+   * Defines the visual style of the button.
+   */
+  type?:
+    | 'primary'
+    | 'secondary'
+    | 'tonal'
+    | 'outline'
+    | 'danger'
+    | 'text'
+    | 'disabled';
+
+  /**
+   *  Defines the size of the button.
+   */
+  size?: 'large' | 'medium' | 'small';
+
+  /**
+   * If true, the button will take the full width of its container.
+   */
+  full?: boolean;
+
+  /**
+   *  Specifies the name of the icon that should be placed on the right side of the button.
+   */
+  iconRight?: string;
+
+  /**
+   *  Specifies the name of the icon that should be placed on the left side of the button.
+   */
+  iconLeft?: string;
+
+  /**
+   * Represents the text that will be displayed on the button.
+   */
+  title: string;
+
+  /**
+   *  If true, the icon of button will use the tint color provided by its container.
+   */
+  useTintColor?: boolean;
+
+  /**
+   *  If true, the icon of button will use be show indicator loading.
+   */
+  loading?: boolean;
+
+  /**
+   *  A callback function that is called when the button is pressed.
+   */
+  onPress: () => void;
+}
+
+const Button: FC<ButtonProps> = ({
+  type = 'primary',
+  size = 'large',
+  useTintColor = true,
+  full = true,
+  iconRight,
+  iconLeft,
+  loading = false,
+  title = 'Button',
+  onPress,
+  ...rest
+}) => {
+  const {theme, config} = useContext(ApplicationContext);
+  const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
+  let gradientPros;
+  if (gradient?.length > 0 && type == 'primary') {
+    gradientPros = {
+      colors: gradient,
+      start: {x: 1, y: 0.5},
+      end: {x: 0, y: 0.5},
+    };
+  }
+  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: color ?? 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_bold';
+      case 'medium':
+        return 'action_s_bold';
+      case 'small':
+        return 'action_xs_bold';
+
+      default:
+        return 'action_default_bold';
+    }
+  };
+
+  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 color ?? theme.colors.primary;
+      case 'tonal':
+        return theme.colors.primary;
+      case 'danger':
+        return Colors.black_01;
+      case 'text':
+        return color ?? 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 = () => {
+    const iconSize = getIconSize();
+    const marginRight = getIconSpace();
+    const color = useTintColor ? getTextColor() : undefined;
+
+    if (loading) {
+      return (
+        <View
+          style={[
+            styles.trailing,
+            {
+              width: iconSize,
+              height: iconSize,
+              marginRight,
+              borderRadius: Spacing.M,
+            },
+          ]}>
+          <Loader type="spinner" color={color} />
+        </View>
+      );
+    }
+    if (iconLeft) {
+      return (
+        <View
+          style={[
+            styles.leading,
+            {width: iconSize, height: iconSize, marginRight},
+          ]}>
+          <Icon color={color} source={iconLeft} size={iconSize} />
+        </View>
+      );
+    }
+  };
+
+  /**
+   * render trailing
+   */
+  const renderTrailing = () => {
+    const color = useTintColor ? getTextColor() : undefined;
+    const marginLeft = getIconSpace();
+
+    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}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      {renderLeading()}
+      {renderTitle()}
+      {renderTrailing()}
+      {gradientPros && (
+        <AnimationLinear {...gradientPros} style={styles.gradientView} />
+      )}
+      {gradientPros && <View style={styles.strokeView} />}
+    </TouchableOpacity>
+  );
+};
+
+export {Button};

package/Button/styles.ts

@@ -0,0 +1,60 @@
+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',
+  },
+  gradientView: {
+    position: 'absolute',
+    zIndex: -1,
+    borderRadius: 8,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  strokeView: {
+    position: 'absolute',
+    top: 2,
+    bottom: 2,
+    left: 2,
+    right: 2,
+    borderRadius: 6,
+    borderWidth: 0.5,
+    borderColor: '#FFF9E1',
+  },
+});

package/CheckBox/index.tsx

@@ -0,0 +1,65 @@
+import React, {FC, useContext} from 'react';
+import {TouchableOpacity, View} from 'react-native';
+import {CheckBoxProps} from './types';
+import styles from './styles';
+import {ApplicationContext} from '../Application';
+import {Text} from '../Text';
+import {Icon} from '../Icon';
+
+const CheckBox: FC<CheckBoxProps> = ({
+  value,
+  disabled,
+  onChange,
+  style,
+  label,
+  indeterminate,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const haveValue = value || indeterminate;
+  const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
+  let borderColor = theme.colors.text.default;
+  let backgroundColor = theme.colors.background.surface;
+
+  if (haveValue) {
+    borderColor = theme.colors.primary;
+    backgroundColor = theme.colors.primary;
+  }
+
+  if (disabled) {
+    borderColor = theme.colors.border.disable;
+    backgroundColor = theme.colors.background.surface;
+    if (haveValue) {
+      borderColor = theme.colors.background.tonal;
+      backgroundColor = theme.colors.background.tonal;
+    }
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={() => onChange?.(!value)}
+      disabled={disabled}
+      style={[style, styles.container]}>
+      <View
+        style={[
+          {borderColor, backgroundColor, borderWidth: 1},
+          styles.checkbox,
+        ]}>
+        {haveValue && (
+          <Icon
+            color={theme.colors.background.surface}
+            size={20}
+            source={iconSource}
+          />
+        )}
+      </View>
+      {!!label && <Text typography={'body_default_regular'}>{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', alignItems: 'center'},
+});

package/CheckBox/types.ts

@@ -0,0 +1,38 @@
+import {ViewStyle} from 'react-native';
+
+export type CheckBoxProps = {
+  /**
+   * Represents whether the CheckBox is currently checked (`true`) or unchecked (`false`).
+   */
+  value: boolean;
+
+  /**
+   *  Optional. If `true`, the user won't be able to interact with the CheckBox.
+   * Defaults to `false` if not provided.
+   */
+  disabled?: boolean;
+
+  /**
+   *  Optional. Represents the text label displayed next to the CheckBox.
+   */
+  label?: string;
+
+  /**
+   *  A callback function that is called when the value of the CheckBox changes.
+   * Receives the new value of the CheckBox as a parameter.
+   */
+  onChange: (value: boolean) => void;
+
+  /**
+   *  Optional. If `true`, the CheckBox will be in an indeterminate state,
+   * which is typically used to represent a "mixed" or "partial" selection state.
+   * Defaults to `false` if not provided.
+   */
+  indeterminate?: boolean;
+
+  /**
+   * Optional. Used to apply custom styling to the CheckBox component.
+   * Accepts an object of style properties.
+   */
+  style?: ViewStyle;
+};

package/Consts/colors+spacing+radius.ts

@@ -0,0 +1,218 @@
+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,
+  XXL: 32,
+  Size3XL: 48,
+  Size4XL: 56,
+  Size5XL: 64,
+};
+
+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,4 @@
+export * from './colors+spacing+radius';
+export * from './theme';
+export * from './styles';
+export const GRIDVIEW = false;