@momo-kits/foundation 0.81.52 → 0.81.53-beta.0

package/Radio/index.tsx

@@ -4,8 +4,9 @@ import {TouchableOpacity, View} from 'react-native';
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
+import {formatNameLength} from '../Application/utils';
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -14,6 +15,8 @@ const Radio: FC<RadioProps> = ({
   onChange,
   label,
   style,
+  params,
+  accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const selected = value === groupValue;
@@ -38,26 +41,38 @@ const Radio: FC<RadioProps> = ({
   }
 
   return (
-    <TouchableOpacity
-      onPress={onChange}
-      disabled={disabled}
-      style={[
-        style,
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-        },
-      ]}>
-      <View
+    <ComponentContext.Provider
+      value={{
+        componentName: 'Radio',
+        params,
+        state: disabled ? 'disabled' : 'enabled',
+        componentId: accessibilityLabel,
+        componentLabel: formatNameLength(label || ''),
+        componentValue: selected,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        onPress={onChange}
+        disabled={disabled}
         style={[
-          styles.radio,
-          checkBoxStyle,
-          disabledStyle,
-          {marginRight: label ? Spacing.XS : 0},
-        ]}
-      />
-      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-    </TouchableOpacity>
+          style,
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+        ]}>
+        <View
+          style={[
+            styles.radio,
+            checkBoxStyle,
+            disabledStyle,
+            {marginRight: label ? Spacing.XS : 0},
+          ]}
+        />
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 

package/Radio/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type RadioProps = {
+export interface RadioProps extends TouchableOpacityProps {
   /**
    * `value`: Represents the value associated with the Radio component.
    * It is used to determine whether the Radio component is selected or not in comparison with the `groupValue`.
@@ -35,4 +35,6 @@ export type RadioProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-};
+
+  params?: any;
+}

package/Switch/index.tsx

@@ -3,9 +3,16 @@ import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
+import {ComponentContext} from '../Application';
 
-const Switch: FC<SwitchProps> = props => {
-  const {value, onChange, disabled, style} = props;
+const Switch: FC<SwitchProps> = ({
+  value = false,
+  onChange,
+  disabled = false,
+  style,
+  params,
+  accessibilityLabel,
+}) => {
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
@@ -15,23 +22,30 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   return (
-    <TouchableOpacity
-      disabled={disabled}
-      onPress={() => onChange?.(!value)}
-      style={[
-        style,
-        styles.container,
-        {backgroundColor, alignItems: circleAlign},
-      ]}>
-      <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
-        <View style={[styles.circleSmall, {backgroundColor}]} />
-      </View>
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'Switch',
+        params,
+        state: disabled ? 'disabled' : 'enabled',
+        componentId: accessibilityLabel,
+        componentValue: value,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
+        onPress={() => onChange?.(!value)}
+        style={[
+          style,
+          styles.container,
+          {backgroundColor, alignItems: circleAlign},
+        ]}>
+        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+          <View style={[styles.circleSmall, {backgroundColor}]} />
+        </View>
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 
-Switch.defaultProps = {
-  value: false,
-  disabled: false,
-};
 export {Switch};

package/Switch/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type SwitchProps = {
+export interface SwitchProps extends TouchableOpacityProps {
   /**
    * `value`: Represents whether the Switch component is currently in the 'on' (`true`) or 'off' (`false`) state.
    */
@@ -23,4 +23,6 @@ export type SwitchProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-};
+
+  params?: any;
+}

package/Tag/styles.ts

@@ -1,19 +1,20 @@
 import {StyleSheet} from 'react-native';
 import {Radius, Spacing} from '../Consts';
+import {scaleSize} from '../Text';
 
 export default StyleSheet.create({
   container: {
     paddingHorizontal: Spacing.S,
     borderRadius: Radius.S,
     flexDirection: 'row',
-    height: 24,
+    height: scaleSize(24),
     alignItems: 'center',
     justifyContent: 'center',
   },
   mediumContainer: {
     paddingHorizontal: Spacing.S,
     borderRadius: Radius.S,
-    height: 18,
+    height: scaleSize(18),
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'center',

package/Text/index.tsx

@@ -51,8 +51,24 @@ export interface TextProps extends RNTextProps {
    */
   color?: string;
 }
+
+const deprecatedValues: Typography[] = [
+  'headline_default',
+  'headline_l',
+  'headline_xl',
+  'title_default',
+  'title_xs',
+  'title_s',
+  'header_default',
+  'paragraph_default',
+  'paragraph_bold',
+  'paragraph_italic',
+  'label_xxs',
+  'action_s',
+];
+
 const Text: React.FC<TextProps> = ({
-  typography,
+  typography = 'body_default_regular',
   color,
   children,
   style,
@@ -94,6 +110,13 @@ const Text: React.FC<TextProps> = ({
   };
 
   const textStyle = getTypoStyle(typography);
+
+  if (deprecatedValues.includes(typography)) {
+    console.warn(
+      `Warning: The typography value "${typography}" is deprecated.`,
+    );
+  }
+
   return (
     <RNText
       {...rest}
@@ -103,8 +126,4 @@ const Text: React.FC<TextProps> = ({
   );
 };
 
-Text.defaultProps = {
-  typography: 'body_default_regular',
-};
-
 export {Text, scaleSize};

package/Text/styles.ts

@@ -1,11 +1,11 @@
 export default {
-  headline_default_bold: {fontSize: 24, lineHeight: 32, fontWeight: '700'},
-  header_m_bold: {fontSize: 18, lineHeight: 28, fontWeight: '700'},
+  headline_default_bold: {fontSize: 24, lineHeight: 34, fontWeight: '700'},
+  header_m_bold: {fontSize: 18, lineHeight: 26, fontWeight: '700'},
   header_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
   header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
-  header_xs_semibold: {fontSize: 12, lineHeight: 16, fontWeight: '600'},
+  header_xs_semibold: {fontSize: 12, lineHeight: 18, fontWeight: '600'},
   body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
-  body_regularstrikethrought: {
+  body_default_regularstrikethrought: {
     fontSize: 14,
     lineHeight: 20,
     fontWeight: '400',
@@ -13,12 +13,12 @@ export default {
   },
   description_default_regular: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 18,
     fontWeight: '400',
   },
   description_default_regularstrikethrought: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 18,
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
@@ -30,11 +30,11 @@ export default {
     textDecorationLine: 'line-through',
   },
   label_default_medium: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
-  label_s_medium: {fontSize: 12, lineHeight: 16, fontWeight: '500'},
+  label_s_medium: {fontSize: 12, lineHeight: 18, fontWeight: '500'},
   label_xs_medium: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
   action_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
   action_s_bold: {fontSize: 14, lineHeight: 20, fontWeight: '700'},
-  action_xs_bold: {fontSize: 12, lineHeight: 16, fontWeight: '700'},
+  action_xs_bold: {fontSize: 12, lineHeight: 18, fontWeight: '700'},
   action_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
   /**non-support**/
   headline_default: {

package/Title/index.tsx

@@ -1,129 +1,196 @@
 import React, {FC, useContext, useState} from 'react';
-import {
-  LayoutChangeEvent,
-  NativeSyntheticEvent,
-  Text as RNText,
-  TextLayoutEventData,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {TitleProps} from './types';
+import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
 import {Icon} from '../Icon';
-import styles from './styles';
-import {ApplicationContext} from '../Application';
-import {Colors, Spacing} from '../Consts';
 import {scaleSize, Text} from '../Text';
+import {ApplicationContext} from '../Application';
+import {Badge} from '../Badge';
+import {Colors} from '../Consts';
+import styles from './styles';
+import {TitleProps} from './types';
+import {Typography} from '../Text/types';
 
 const Title: FC<TitleProps> = ({
-  size = 'large',
-  type = 'section',
-  onPressAction,
-  actionTitle,
   title = 'Title',
-  titleFlex = true,
-  showAction = true,
+  type = 'section',
+  size = 'medium',
   icon,
   description,
-  usePadding = true,
+  iconColor = null,
+  iconAlign = 'top',
+  showRightAction = false,
+  showTrailingAction = false,
+  badgeLabel,
+  buttonTitle,
+  onPressRightAction = () => {},
+  onPressTrailingAction = () => {},
+  buttonSize = 'small',
+  textOnly = false,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [textLines, setTextLines] = useState(0);
-  const typeStyle =
-    type === 'screen' ? styles.screen : styles[`${type}_${size}`];
-  const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
-  const marginStyle =
-    type === 'section' && usePadding ? {marginTop: Spacing.S} : {};
-  const numberOfLines = type === 'section' ? 1 : 2;
+  const [badgeWidth, setBadgeWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  const styleSheet: {
+    [key: string]: any;
+  } = styles;
+  const typography = `${type}_${size}`;
+  const isSection = type === 'section';
+  const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
+  const buttonTypo: Typography =
+    buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
+  const flexStyle = showTrailingAction && {maxWidth: '70%'};
 
-  const renderAction = () => {
-    return !!actionTitle && titleFlex ? (
-      <TouchableOpacity onPress={onPressAction}>
-        <Text typography={'action_s_bold'} color={theme.colors.primary}>
-          {actionTitle}
-        </Text>
-      </TouchableOpacity>
-    ) : (
-      <TouchableOpacity
-        style={[
-          {backgroundColor: theme.colors.primary + '0F'},
-          styles.actionIcon,
-          {width: scaleSize(22), height: scaleSize(22)},
-        ]}
-        onPress={onPressAction}>
-        <Icon
-          size={scaleSize(22)}
-          color={theme.colors.primary}
-          source={'arrow_chevron_right_small'}
-        />
-      </TouchableOpacity>
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    let iconStyle: ViewStyle = {
+      justifyContent: 'flex-start',
+    };
+
+    if (iconAlign === 'middle') {
+      iconStyle = {justifyContent: 'center'};
+    }
+
+    if (iconAlign === 'bottom') {
+      iconStyle = {justifyContent: 'flex-end'};
+    }
+
+    return (
+      <View style={[styles.iconView, iconStyle]}>
+        <Icon color={iconColor} source={icon} />
+      </View>
     );
   };
 
-  const renderSemiAction = () => {
-    if (textLines > 1) return null;
+  const renderContent = () => {
+    return (
+      <View style={styles.contentView}>
+        <View
+          onLayout={e => {
+            if (e.nativeEvent.layout.width !== contentWidth) {
+              setContentWidth(e.nativeEvent.layout.width);
+            }
+          }}
+          style={[styles.iconLeftView, flexStyle]}>
+          <RNText
+            numberOfLines={numberOfLines}
+            style={[
+              styleSheet[typography],
+              styles.title,
+              {
+                maxWidth:
+                  contentWidth > 0 ? contentWidth - badgeWidth : undefined,
+              },
+            ]}>
+            {title}
+          </RNText>
+          {badgeLabel && (
+            <View
+              onLayout={e => {
+                if (e.nativeEvent.layout.width !== badgeWidth) {
+                  setBadgeWidth(e.nativeEvent.layout.width);
+                }
+              }}
+              style={{
+                alignItems: 'center',
+              }}>
+              <Badge style={styles.badge} label={badgeLabel} />
+            </View>
+          )}
+          {renderActionLeft()}
+        </View>
+        {description && (
+          <Text
+            style={styles.description}
+            color={theme.colors.text.secondary}
+            typography={'description_default_regular'}>
+            {description}
+          </Text>
+        )}
+      </View>
+    );
+  };
+
+  const renderActionLeft = () => {
     return (
       <TouchableOpacity
-        style={[
-          {backgroundColor: Colors.black_06},
-          styles.actionIcon,
-          {width: scaleSize(18), height: scaleSize(18)},
-        ]}
-        onPress={onPressAction}>
-        <Icon
-          size={scaleSize(18)}
-          color={theme.colors.text.default}
-          source={'arrow_chevron_right_small'}
-        />
+        onPress={onPressTrailingAction}
+        style={styles.iconLeftView}>
+        {showTrailingAction && !showRightAction && (
+          <View
+            style={[
+              styles.iconLeft,
+              {
+                backgroundColor: isSection
+                  ? Colors.black_06 + '99'
+                  : Colors.black_06 + '4D',
+              },
+            ]}>
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={scaleSize(18)}
+              color={theme.colors.text.default}
+            />
+          </View>
+        )}
       </TouchableOpacity>
     );
   };
-  const onLayout = (e: LayoutChangeEvent) => {
-    setContainerWidth(e.nativeEvent.layout.width);
-  };
 
-  const onTextLayout = (e: NativeSyntheticEvent<TextLayoutEventData>) => {
-    setTextLines(e.nativeEvent.lines.length);
-  };
+  const renderActionRight = () => {
+    if (!showRightAction || showTrailingAction) return false;
 
-  return (
-    <View onLayout={onLayout} style={[styles.wrapper, marginStyle]}>
-      {!!icon && type !== 'screen' && (
-        <Icon style={styles.icon} source={icon} />
-      )}
-      <View style={{flex: 1, flexDirection: 'row'}}>
-        <View style={styles.textContent}>
-          <View
-            style={{
-              flexDirection: 'row',
-              maxWidth: containerWidth - scaleSize(22),
-            }}>
-            <RNText
-              onTextLayout={onTextLayout}
-              numberOfLines={numberOfLines}
-              style={[
-                typeStyle,
-                {
-                  fontFamily: `${theme.font}-${titleWeight}`,
-                  color: theme.colors.text.default,
-                  marginRight: Spacing.S,
-                },
-              ]}>
-              {title}
-            </RNText>
-            {!titleFlex && renderSemiAction()}
-          </View>
-          {!!description && type !== 'screen' && (
-            <Text
-              numberOfLines={1}
-              typography={'description_default_regular'}
-              color={theme.colors.text.secondary}>
-              {description}
+    const lineHeight = styleSheet[typography].lineHeight;
+
+    return (
+      <View
+        style={{
+          height: lineHeight,
+          justifyContent: 'center',
+        }}>
+        {!buttonTitle ? (
+          <TouchableOpacity
+            onPress={onPressRightAction}
+            style={[
+              styles.iconRight,
+              {
+                backgroundColor: theme.colors.primary + '0F',
+              },
+            ]}>
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={scaleSize(22)}
+              color={theme.colors.primary}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity onPress={onPressRightAction}>
+            <Text color={theme.colors.primary} typography={buttonTypo}>
+              {buttonTitle}
             </Text>
-          )}
-        </View>
-        {showAction && titleFlex && type !== 'screen' && renderAction()}
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
+  if (textOnly) {
+    return (
+      <View style={isSection && styles.margin}>
+        <RNText
+          numberOfLines={numberOfLines}
+          style={[styleSheet[typography], styles.title]}>
+          {title}
+        </RNText>
       </View>
+    );
+  }
+
+  return (
+    <View style={[style, styles.wrapper, isSection && styles.margin]}>
+      {renderIcon()}
+      {renderContent()}
+      {renderActionRight()}
     </View>
   );
 };

package/Title/styles.ts

@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import {scaleSize} from '../Text';
-import {Radius, Spacing} from '../Consts';
+import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   card_small: {
@@ -27,10 +27,6 @@ export default StyleSheet.create({
     fontSize: scaleSize(24),
     lineHeight: scaleSize(34),
   },
-  screen: {
-    fontSize: scaleSize(36),
-    lineHeight: scaleSize(44),
-  },
   actionIcon: {
     borderRadius: Radius.M,
     alignItems: 'center',
@@ -41,12 +37,43 @@ export default StyleSheet.create({
     borderRadius: Radius.XS,
   },
   wrapper: {
-    width: '100%',
     flexDirection: 'row',
-    alignItems: 'center',
   },
-  textContent: {
+  margin: {
+    marginTop: Spacing.S,
+  },
+  iconView: {
     marginRight: Spacing.S,
-    flex: 1,
+  },
+  iconRight: {
+    width: 22,
+    height: 22,
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: Spacing.S,
+  },
+  iconLeft: {
+    width: 18,
+    height: 18,
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: Spacing.XS,
+  },
+  iconLeftView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  contentView: {marginRight: Spacing.S, flex: 1},
+  title: {
+    fontWeight: 'bold',
+    color: Colors.black_17,
+  },
+  badge: {
+    marginLeft: Spacing.XS,
+  },
+  description: {
+    marginTop: Spacing.XS,
   },
 });