@momo-kits/foundation 0.76.1-beta.2 → 0.77.1-optimize.2

package/Button/index.tsx

@@ -1,16 +1,21 @@
 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} from '../Consts';
+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 {
   /**
@@ -55,24 +60,48 @@ export interface ButtonProps extends TouchableOpacityProps {
    */
   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;
+
+  params?: any;
 }
 
 const Button: FC<ButtonProps> = ({
-  type,
-  size,
-  useTintColor,
-  full,
+  type = 'primary',
+  size = 'large',
+  useTintColor = true,
+  full = true,
   iconRight,
   iconLeft,
-  title,
+  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'];
@@ -96,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 {
@@ -151,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';
     }
   };
 
@@ -171,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;
     }
@@ -200,11 +229,27 @@ const Button: FC<ButtonProps> = ({
    * render leading
    */
   const renderLeading = () => {
-    if (iconLeft) {
-      const iconSize = getIconSize();
-      const marginRight = getIconSpace();
-      const color = useTintColor ? getTextColor() : undefined;
+    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={[
@@ -221,8 +266,9 @@ const Button: FC<ButtonProps> = ({
    * render trailing
    */
   const renderTrailing = () => {
-    const marginLeft = getIconSpace();
     const color = useTintColor ? getTextColor() : undefined;
+    const marginLeft = getIconSpace();
+
     if (iconRight) {
       const iconSize = getIconSize();
       return (
@@ -253,26 +299,31 @@ 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>
   );
 };
 
-Button.defaultProps = {
-  type: 'primary',
-  size: 'large',
-  full: true,
-  disabled: false,
-  title: 'Button',
-  useTintColor: true,
-};
-
 export {Button};

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,60 +2,75 @@ 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> = props => {
+const CheckBox: FC<CheckBoxProps> = ({
+  value,
+  disabled = false,
+  onChange,
+  style,
+  label,
+  indeterminate,
+  params,
+  accessibilityLabel,
+}) => {
   const {theme} = useContext(ApplicationContext);
-  const {value, disabled, onChange, style, label, indeterminated} = props;
+  const haveValue = value || indeterminate;
+  const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
+  let borderColor = theme.colors.text.default;
+  let backgroundColor = theme.colors.background.surface;
 
-  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 (haveValue) {
+    borderColor = theme.colors.primary;
+    backgroundColor = theme.colors.primary;
+  }
 
   if (disabled) {
-    borderColor = haveValue
-      ? theme.colors.background.tonal
-      : theme.colors.border.disable;
-    backgroundColor = haveValue
-      ? theme.colors.background.tonal
-      : theme.colors.background.surface;
+    borderColor = theme.colors.border.disable;
+    backgroundColor = theme.colors.background.surface;
+    if (haveValue) {
+      borderColor = theme.colors.background.tonal;
+      backgroundColor = theme.colors.background.tonal;
+    }
   }
-  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>
+    <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/styles.ts

@@ -11,5 +11,5 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  container: {flexDirection: 'row'},
+  container: {flexDirection: 'row', alignItems: 'center'},
 });

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`).
    */
@@ -28,11 +28,13 @@ export type CheckBoxProps = {
    * which is typically used to represent a "mixed" or "partial" selection state.
    * Defaults to `false` if not provided.
    */
-  indeterminated?: boolean;
+  indeterminate?: boolean;
 
   /**
    * Optional. Used to apply custom styling to the CheckBox component.
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-};
+
+  params?: any;
+}

package/Consts/colors+spacing+radius.ts

@@ -152,6 +152,10 @@ const Spacing = {
   M: 12,
   L: 16,
   XL: 24,
+  XXL: 32,
+  Size3XL: 48,
+  Size4XL: 56,
+  Size5XL: 64,
 };
 
 const Radius = {
@@ -209,6 +213,20 @@ const Shadow = {
       elevation: 6,
     },
   }),
+
+  Pink: Platform.select({
+    ios: {
+      shadowColor: '#e27eb5',
+      shadowOffset: {width: 0, height: 6},
+      shadowOpacity: 0.25,
+      shadowRadius: 8,
+    },
+    android: {
+      elevation: 16,
+      shadowColor: '#e27eb5',
+      shadowOpacity: 0.25,
+    },
+  }),
 };
 
 export {Colors, Spacing, Radius, Shadow};

package/Consts/styles.ts

@@ -47,32 +47,6 @@ const Styles = StyleSheet.create({
     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};

package/Consts/theme.ts

@@ -116,6 +116,10 @@ const defaultDarkTheme: Theme = {
 const defaultContext: Context = {
   theme: defaultTheme,
   navigator: undefined,
+  showGrid: false,
+  translate: (key: string) => {
+    return key;
+  },
 };
 
 export {defaultContext, defaultTheme, defaultDarkTheme};

package/Divider/index.tsx

@@ -1,6 +1,7 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
 import {ApplicationContext} from '../Application';
+import {Spacing} from '../Consts';
 
 const Divider = () => {
   const {theme} = useContext(ApplicationContext);
@@ -11,6 +12,7 @@ const Divider = () => {
         height: 1,
         width: '100%',
         backgroundColor: theme.colors.border.default,
+        marginVertical: Spacing.XS,
       }}
     />
   );

package/Icon/index.tsx

@@ -1,10 +1,16 @@
 import React, {useContext} from 'react';
 import IconSources from '../Assets/icon.json';
+import IconBankSources from '../Assets/icon_bank.json';
 import {IconProps} from './types';
 import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
 
-const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
+const Icon: React.FC<IconProps> = ({
+  source = 'ic_back',
+  size = 24,
+  color,
+  style = {},
+}) => {
   const {theme} = useContext(ApplicationContext);
 
   /**
@@ -18,20 +24,18 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
     return {uri: source};
   };
 
+  const tintColorProps = color !== null && {
+    tintColor: color ?? theme.colors.text.default,
+  };
+
   return (
     <Image
-      accessibilityLabel={`Icon/${getIconSource()?.uri}`}
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
-      tintColor={color ?? theme.colors.text.default}
+      {...tintColorProps}
     />
   );
 };
 
-Icon.defaultProps = {
-  source: 'ic_back',
-  size: 24,
-};
-
-export {Icon, IconSources};
+export {Icon, IconSources, IconBankSources};

package/Icon/types.ts

@@ -1,4 +1,5 @@
-import {ViewStyle} from 'react-native';
+import {ImageStyle} from 'react-native-fast-image';
+import {StyleProp} from "react-native";
 
 export type IconProps = {
   /**
@@ -17,11 +18,11 @@ export type IconProps = {
    *  Optional. Represents the color of the icon.
    * It can be any valid color in @momo-kits/foundation.
    */
-  color?: string;
+  color?: string | null;
 
   /**
    *  Optional. Used to apply custom styling to the Icon component.
    * Accepts an object of style properties.
    */
-  style?: ViewStyle;
+  style?: StyleProp<ImageStyle>;
 };

package/IconButton/index.tsx

@@ -5,7 +5,7 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
@@ -26,13 +26,17 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * Optional. Defines the size of the IconButton.
    */
   size?: 'large' | 'small';
+
+  params?: any;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
-  type,
+  type = 'primary',
   icon,
   size,
   onPress,
+  params,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -121,20 +125,25 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      accessibilityLabel={`IconButton/${icon}`}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      <Icon size={iconSize} source={icon} color={getIconColor()} />
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'IconButton',
+        params,
+        state: type === 'disabled' ? 'disabled' : 'enabled',
+        componentId: accessibilityLabel,
+        componentValue: icon,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        accessibilityLabel={accessibilityLabel}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        <Icon size={iconSize} source={icon} color={getIconColor()} />
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 
-IconButton.defaultProps = {
-  type: 'primary',
-  disabled: false,
-};
-
 export {IconButton};