@momo-kits/foundation 0.80.8 → 0.81.1-beta.0

package/Badge/Badge.tsx

@@ -0,0 +1,56 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+
+import {ApplicationContext} from '../Application';
+import {BadgeProps} from './types';
+import styles from './styles';
+import {Colors} from '../Consts';
+import {Text} from '../Text';
+
+const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const isValidatedColor = () => {
+    const colorKeys = Object.keys(Colors);
+    const colorValue = Object.values(Colors);
+    if (backgroundColor) {
+      const colorIndex = colorValue.indexOf(backgroundColor);
+      if (colorIndex !== -1) {
+        if (colorKeys[colorIndex]?.includes('_03')) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+
+  const isNumber = () => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(label));
+  };
+
+  const formatTitle = () => {
+    if (isNumber() && Number(label) > 99) {
+      return '99+';
+    }
+    return label.toString();
+  };
+
+  let badgeColor = isNumber()
+    ? theme.colors.error.primary
+    : theme.colors.warning.primary;
+
+  if (backgroundColor && isValidatedColor()) {
+    badgeColor = backgroundColor;
+  }
+
+  return (
+    <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
+      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
+        {formatTitle()}
+      </Text>
+    </View>
+  );
+};
+
+export default Badge;

package/Badge/BadgeDot.tsx

@@ -0,0 +1,11 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {BadgeDotProps} from './types';
+import styles from './styles';
+
+const BadgeDot: FC<BadgeDotProps> = ({size = 'large', style}) => {
+  const dotStyle = size === 'small' ? styles.dotSmall : styles.dot;
+  return <View style={[style, dotStyle]} />;
+};
+
+export default BadgeDot;

package/Badge/BadgeRibbon.tsx

@@ -0,0 +1,125 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {DownTail, UpTail} from './Shape';
+import styles from './styles';
+import {BadgeRibbonProps} from './types';
+import {ApplicationContext} from '../Application';
+import {Text} from '../Text';
+import {Colors} from '../Consts';
+import {Image} from '../Image';
+
+const BadgeRibbon: FC<BadgeRibbonProps> = ({
+  position = 'top_right',
+  label = 'Label',
+  isRound = false,
+  style = {},
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  let ribbonRotate = '0deg';
+  let textRotate = '0deg';
+  let ribbonTail = <DownTail />;
+  let textMargin = 0;
+  let skewMargin = 0;
+
+  if (position === 'top_right' || position === 'bottom_right') {
+    ribbonRotate = '180deg';
+    textRotate = '180deg';
+  }
+
+  if (position === 'bottom_left' || position === 'top_right') {
+    textMargin = 4;
+    ribbonTail = <UpTail />;
+    skewMargin = 4;
+  }
+
+  const renderRoundContent = () => {
+    return (
+      <View
+        style={[
+          styles.ribbonContent,
+          {
+            backgroundColor: theme.colors.warning.primary,
+            marginTop: textMargin,
+          },
+        ]}>
+        <Text
+          style={[
+            styles.ribbonLabel,
+            {
+              transform: [
+                {
+                  rotate: textRotate,
+                },
+              ],
+            },
+          ]}
+          color={Colors.black_01}
+          typography={'label_xs_medium'}>
+          {label}
+        </Text>
+      </View>
+    );
+  };
+
+  const renderSkewContent = () => {
+    return (
+      <View
+        style={{
+          flexDirection: 'row',
+          marginTop: skewMargin,
+        }}>
+        <View
+          style={[
+            styles.ribbonSkewContent,
+            {
+              backgroundColor: theme.colors.warning.primary,
+            },
+          ]}>
+          <Text
+            style={[
+              styles.ribbonLabel,
+              {
+                transform: [
+                  {
+                    rotate: textRotate,
+                  },
+                ],
+              },
+            ]}
+            color={Colors.black_01}
+            typography={'label_xs_medium'}>
+            {label}
+          </Text>
+        </View>
+        <Image
+          source={{
+            uri: 'https://static.momocdn.net/app/img/kits/utils/Tail_4x.png',
+          }}
+          style={styles.skew}
+        />
+      </View>
+    );
+  };
+
+  const content = isRound ? renderRoundContent() : renderSkewContent();
+
+  return (
+    <View
+      style={[
+        style,
+        styles.ribbon,
+        {
+          transform: [
+            {
+              rotate: ribbonRotate,
+            },
+          ],
+        },
+      ]}>
+      {ribbonTail}
+      {content}
+    </View>
+  );
+};
+
+export default BadgeRibbon;

package/Badge/Shape.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from './styles';
+import {Image} from '../Image';
+
+const UpTail = () => {
+  return (
+    <Image
+      resizeMode={'stretch'}
+      source={{
+        uri: 'https://static.momocdn.net/app/img/kits/utils/Head_down_4x.png',
+      }}
+      style={[styles.tail, {transform: [{rotate: '180deg'}]}]}
+    />
+  );
+};
+
+const DownTail = () => {
+  return (
+    <Image
+      resizeMode={'stretch'}
+      source={{
+        uri: 'https://static.momocdn.net/app/img/kits/utils/Head_4x.png',
+      }}
+      style={styles.tail}
+    />
+  );
+};
+
+export {UpTail, DownTail};

package/Badge/index.tsx

@@ -0,0 +1,7 @@
+import Badge from './Badge';
+import BadgeDot from './BadgeDot';
+import BadgeRibbon from './BadgeRibbon';
+import {BadgeProps, BadgeDotProps, BadgeRibbonProps} from './types';
+
+export {Badge, BadgeRibbon, BadgeDot};
+export type {BadgeProps, BadgeDotProps, BadgeRibbonProps};

package/Badge/styles.ts

@@ -0,0 +1,58 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
+import {scaleSize} from '../Text';
+
+export default StyleSheet.create({
+  badge: {
+    paddingHorizontal: Spacing.XS,
+    borderRadius: Radius.M,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: scaleSize(16),
+    minWidth: scaleSize(16),
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+    alignSelf: 'baseline',
+  },
+  dot: {
+    width: 16,
+    height: 16,
+    borderWidth: 2,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: 8,
+  },
+  dotSmall: {
+    width: 10,
+    height: 10,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: 5,
+  },
+  ribbon: {
+    alignSelf: 'baseline',
+    flexDirection: 'row',
+    height: 20,
+    overflow: 'hidden',
+  },
+  ribbonContent: {
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomRightRadius: 12,
+    borderTopRightRadius: 12,
+    paddingRight: 6,
+  },
+  ribbonSkewContent: {
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ribbonLabel: {
+    color: Colors.black_01,
+  },
+  skew: {width: 8, height: 16},
+  tail: {width: 5, height: 20},
+});

package/Badge/types.ts

@@ -0,0 +1,63 @@
+import {ViewStyle} from 'react-native';
+
+/**
+ * Props for a general Badge component. It can display a wide range of badges including simple labels, numbers, or dots.
+ */
+export type BadgeProps = {
+  /**
+   * Optional. The text to display on the badge. This could be a number or string, depending on the badge's purpose.
+   */
+  label?: string | number;
+
+  /**
+   * Optional. Custom styles to apply to the badge component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+
+  /**
+   * Optional. Custom background badge.
+   */
+  backgroundColor?: string;
+};
+
+/**
+ * Props for a BadgeDot component. It specifically represents a dot-style badge, typically used for notification indicators.
+ */
+export type BadgeDotProps = {
+  /**
+   * Optional. The size of the dot, either 'small' or 'large'. This allows for better visual alignment with different UI elements.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Optional. Custom styles to apply to the badge dot component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+};
+
+/**
+ * Props for a BadgeRibbon component. It represents a more specialized badge in the shape of a ribbon, allowing for placement around containers.
+ */
+export type BadgeRibbonProps = {
+  /**
+   * The text to display on the ribbon-style badge. Unlike other badges, ribbons typically carry more descriptive text.
+   */
+  label: string;
+
+  /**
+   * Optional. Determines the placement of the ribbon on its parent container. The position can be any corner of the container.
+   * Defaults to 'top_right' if not specified.
+   */
+  position?: 'top_right' | 'top_left' | 'bottom_right' | 'bottom_left';
+
+  /**
+   * Optional. If true, the edges of the ribbon badge will be rounded. This is purely a stylistic choice.
+   * Defaults to `false` if not provided, resulting in a flat-edged ribbon.
+   */
+  isRound?: boolean;
+
+  /**
+   * Optional. Custom styles to apply to the ribbon badge component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+};

package/Button/index.tsx

@@ -1,11 +1,13 @@
 import React, {FC, useContext} from 'react';
 import {
+  Animated,
   StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import LinearGradient from 'react-native-linear-gradient';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
@@ -13,6 +15,8 @@ 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.
@@ -54,7 +58,7 @@ export interface ButtonProps extends TouchableOpacityProps {
   /**
    *  If true, the icon of button will use the tint color provided by its container.
    */
-  useTintColor?: boolean;
+  tintColor?: string;
 
   /**
    *  If true, the icon of button will use be show indicator loading.
@@ -65,21 +69,39 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  A callback function that is called when the button is pressed.
    */
   onPress: () => void;
+
+  params?: any;
 }
 
 const Button: FC<ButtonProps> = ({
   type = 'primary',
   size = 'large',
-  useTintColor = true,
+  tintColor = null,
   full = true,
   iconRight,
   iconLeft,
   loading = false,
   title = 'Button',
   onPress,
+  params,
+  accessibilityLabel,
   ...rest
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const {theme, config} = useContext(ApplicationContext);
+  const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
+  let gradientPros;
+  let state = 'enabled';
+  if (loading) {
+    state = 'loading';
+  }
+  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'];
@@ -103,7 +125,7 @@ const Button: FC<ButtonProps> = ({
         return {
           backgroundColor: theme.colors.background.surface,
           borderWidth: 1,
-          borderColor: theme.colors.primary,
+          borderColor: color ?? theme.colors.primary,
         };
       case 'tonal':
         return {
@@ -158,14 +180,14 @@ const Button: FC<ButtonProps> = ({
   const getTypography = (): Typography => {
     switch (size) {
       case 'large':
-        return 'action_default';
+        return 'action_default_bold';
       case 'medium':
-        return 'action_s';
+        return 'action_s_bold';
       case 'small':
-        return 'action_xs';
+        return 'action_xs_bold';
 
       default:
-        return 'action_default';
+        return 'action_default_bold';
     }
   };
 
@@ -178,13 +200,13 @@ const Button: FC<ButtonProps> = ({
       case 'secondary':
         return theme.colors.text.default;
       case 'outline':
-        return theme.colors.primary;
+        return color ?? theme.colors.primary;
       case 'tonal':
         return theme.colors.primary;
       case 'danger':
         return Colors.black_01;
       case 'text':
-        return theme.colors.primary;
+        return color ?? theme.colors.primary;
       default:
         return Colors.black_01;
     }
@@ -195,9 +217,9 @@ const Button: FC<ButtonProps> = ({
    */
   const renderTitle = () => {
     const typography = getTypography();
-    const color = getTextColor();
+    const textColor = getTextColor();
     return (
-      <Text typography={typography} color={color} numberOfLines={1}>
+      <Text typography={typography} color={textColor} numberOfLines={1}>
         {title}
       </Text>
     );
@@ -209,7 +231,7 @@ const Button: FC<ButtonProps> = ({
   const renderLeading = () => {
     const iconSize = getIconSize();
     const marginRight = getIconSpace();
-    const color = useTintColor ? getTextColor() : undefined;
+    const textColor = tintColor ?? getTextColor();
 
     if (loading) {
       return (
@@ -223,7 +245,7 @@ const Button: FC<ButtonProps> = ({
               borderRadius: Spacing.M,
             },
           ]}>
-          <Loader type="spinner" color={color} />
+          <Loader type="spinner" color={getTextColor()} />
         </View>
       );
     }
@@ -234,7 +256,7 @@ const Button: FC<ButtonProps> = ({
             styles.leading,
             {width: iconSize, height: iconSize, marginRight},
           ]}>
-          <Icon color={color} source={iconLeft} size={iconSize} />
+          <Icon color={textColor} source={iconLeft} size={iconSize} />
         </View>
       );
     }
@@ -244,7 +266,7 @@ const Button: FC<ButtonProps> = ({
    * render trailing
    */
   const renderTrailing = () => {
-    const color = useTintColor ? getTextColor() : undefined;
+    const textColor = tintColor ?? getTextColor();
     const marginLeft = getIconSpace();
 
     if (iconRight) {
@@ -255,7 +277,7 @@ const Button: FC<ButtonProps> = ({
             styles.trailing,
             {width: iconSize, height: iconSize, marginLeft},
           ]}>
-          <Icon color={color} source={iconRight} size={iconSize} />
+          <Icon color={textColor} source={iconRight} size={iconSize} />
         </View>
       );
     }
@@ -277,16 +299,30 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      accessibilityLabel={`Button/${title}`}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      {renderLeading()}
-      {renderTitle()}
-      {renderTrailing()}
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'Button',
+        params,
+        state: state,
+        componentId: accessibilityLabel,
+        componentValue: title,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        accessibilityLabel={accessibilityLabel}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        {renderLeading()}
+        {renderTitle()}
+        {renderTrailing()}
+        {gradientPros && (
+          <AnimationLinear {...gradientPros} style={styles.gradientView} />
+        )}
+        {gradientPros && <View style={styles.strokeView} />}
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 

package/Button/styles.ts

@@ -38,4 +38,23 @@ export default StyleSheet.create({
     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

@@ -2,17 +2,20 @@ 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 {ApplicationContext, ComponentContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import {formatNameLength} from '../Application/utils';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
-  disabled,
+  disabled = false,
   onChange,
   style,
   label,
   indeterminate,
+  params,
+  accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const haveValue = value || indeterminate;
@@ -35,32 +38,39 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <TouchableOpacity
-      accessibilityLabel={`CheckBox/${label}/${value}`}
-      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={'description_default'}>{label}</Text>}
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'CheckBox',
+        params,
+        state: disabled ? 'disabled' : 'filled',
+        componentId: accessibilityLabel,
+        action: 'click',
+        componentLabel: formatNameLength(label || ''),
+        componentValue: indeterminate ? 'undetermined' : value,
+      }}>
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        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>
+    </ComponentContext.Provider>
   );
 };
 
-CheckBox.defaultProps = {
-  disabled: false,
-};
-
 export {CheckBox};

package/CheckBox/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type CheckBoxProps = {
+export interface CheckBoxProps extends TouchableOpacityProps {
   /**
    * Represents whether the CheckBox is currently checked (`true`) or unchecked (`false`).
    */
@@ -35,4 +35,6 @@ export type CheckBoxProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-};
+
+  params?: any;
+}