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

package/Switch/index.tsx

@@ -0,0 +1,37 @@
+import React, {FC} from 'react';
+import {TouchableOpacity, View} from 'react-native';
+import {SwitchProps} from './types';
+import styles from './styles';
+import {Colors} from '../Consts';
+
+const Switch: FC<SwitchProps> = props => {
+  const {value, onChange, disabled, style} = props;
+  const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
+  const circleAlign = value ? 'flex-end' : 'flex-start';
+
+  let backgroundColor = value ? Colors.green_03 : Colors.black_07;
+  if (disabled) {
+    backgroundColor = value ? Colors.green_09 : Colors.black_05;
+  }
+
+  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>
+  );
+};
+
+Switch.defaultProps = {
+  value: false,
+  disabled: false,
+};
+export {Switch};

package/Switch/styles.ts

@@ -0,0 +1,23 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    width: 38,
+    height: 24,
+    borderRadius: 20,
+    justifyContent: 'center',
+    paddingHorizontal: 4,
+  },
+  circle: {
+    width: 14,
+    height: 14,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circleSmall: {
+    width: 6,
+    height: 6,
+    borderRadius: 4,
+  },
+});

package/Switch/types.ts

@@ -0,0 +1,26 @@
+import {ViewStyle} from 'react-native';
+
+export type SwitchProps = {
+  /**
+   * `value`: Represents whether the Switch component is currently in the 'on' (`true`) or 'off' (`false`) state.
+   */
+  value: boolean;
+
+  /**
+   * `onChange`: A callback function that is called when the value of the Switch component changes.
+   * It receives the new value of the Switch as a parameter.
+   */
+  onChange: (value: boolean) => void;
+
+  /**
+   * `disabled`: Optional. If `true`, the user won't be able to interact with the Switch component.
+   * Defaults to `false` if not provided.
+   */
+  disabled?: boolean;
+
+  /**
+   * `style`: Optional. Used to apply custom styling to the Switch component.
+   * Accepts an object of style properties.
+   */
+  style?: ViewStyle;
+};

package/Tag/index.tsx

@@ -0,0 +1,79 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {TagProps} from './types';
+import styles from './styles';
+import {Colors} from '../Consts';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
+
+const backgroundColor = {
+  default: Colors.black_04,
+  orange: Colors.orange_08,
+  green: Colors.green_08,
+  red: Colors.red_08,
+  blue: Colors.blue_08,
+  grey: Colors.black_04,
+};
+
+const textColor = {
+  default: Colors.black_17,
+  orange: Colors.orange_03,
+  green: Colors.green_03,
+  red: Colors.red_03,
+  blue: Colors.blue_03,
+  grey: Colors.black_12,
+};
+
+const Tag: FC<TagProps> = ({
+  label = 'Label',
+  icon,
+  color = 'default',
+  size = 'large',
+  style,
+  customColor,
+}) => {
+  let labelColor = textColor[color];
+  let tagColor = backgroundColor[color];
+  let sizeStyle = styles.mediumContainer;
+  //Check if custom color is [color]_03 (only check in dev mode)
+  const validateCustomColor = (color: string) => {
+    if (__DEV__) {
+      const colorCore: {[key: string]: string} = Colors;
+      const primaryColors = Object.keys(Colors)
+        .map(i => {
+          if (i.includes('_03')) {
+            return colorCore[i];
+          }
+        })
+        .filter(color => color);
+      return primaryColors.includes(color);
+    }
+    return true;
+  };
+
+  if (size === 'large') {
+    sizeStyle = styles.container;
+  }
+  if (customColor && validateCustomColor(customColor)) {
+    labelColor = Colors.black_01;
+    tagColor = customColor;
+  }
+
+  return (
+    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
+      {!!icon && (
+        <Icon
+          style={styles.icon}
+          size={16}
+          source={icon as string}
+          color={labelColor}
+        />
+      )}
+      <Text color={labelColor} typography={'label_s_medium'}>
+        {label}
+      </Text>
+    </View>
+  );
+};
+
+export {Tag};

package/Tag/styles.ts

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

package/Tag/types.ts

@@ -0,0 +1,36 @@
+import {ViewStyle} from 'react-native';
+
+export type TagProps = {
+  /**
+   * `label`: Represents the text label displayed on the Tag component.
+   */
+  label: string;
+
+  /**
+   * `size`: Optional. Defines the size of the Tag component.
+   * Defaults to 'medium' if not provided.
+   */
+  size?: 'medium' | 'large';
+
+  /**
+   * `icon`: Optional. Represents the name or key of the icon to be displayed in the Tag component.
+   */
+  icon?: string;
+
+  /**
+   * `color`: Optional. Defines the color style of the Tag component.
+   */
+  color?: 'default' | 'orange' | 'green' | 'red' | 'blue' | 'grey';
+
+  /**
+   * `style`: Optional. Used to apply custom styling to the Tag component.
+   * Accepts an object of style properties.
+   */
+  style?: ViewStyle;
+
+  /**
+   * `customColor`: Optional. Represents a custom color string (e.g., hex, rgb, rgba, etc.)
+   * that can be applied to the Tag component.
+   */
+  customColor?: string;
+};

package/Text/index.tsx

@@ -0,0 +1,110 @@
+import React, {useContext} from 'react';
+import {Text as RNText, TextProps as RNTextProps} from 'react-native';
+import styles from './styles';
+import {Typography, TypographyWeight} from './types';
+import {ApplicationContext} from '../Application';
+import {scaleSize} from './utils';
+
+const SFProText: TypographyWeight = {
+  100: 'Thin',
+  200: 'Ultralight',
+  300: 'Light',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Semibold',
+  700: 'Bold',
+  800: 'Heavy',
+  900: 'Black',
+  normal: 'Regular',
+  bold: 'Bold',
+};
+
+const AlegreyaSans: TypographyWeight = {
+  100: 'Thin',
+  200: 'Thin',
+  300: 'Thin',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Medium',
+  700: 'Bold',
+  800: 'Black',
+  900: 'Black',
+  normal: 'Regular',
+  bold: 'Bold',
+};
+
+const FontStyle: {[key: string]: string} = {
+  italic: 'Italic',
+  normal: '',
+};
+
+export interface TextProps extends RNTextProps {
+  /**
+   * Represents the typography style applied to the Text component.
+   * It defines the appearance of the text in terms of font size, weight, line height etc.
+   */
+  typography: Typography;
+
+  /**
+   * Optional. Represents the color of the text in the Text component.
+   * It can be any valid color string (e.g., hex, rgb, rgba, etc.).
+   */
+  color?: string;
+}
+const Text: React.FC<TextProps> = ({
+  typography,
+  color,
+  children,
+  style,
+  ...rest
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const getTypoStyle = (typo: Typography) => {
+    const styleSheet: {
+      [key: string]: any;
+    } = styles;
+    const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
+    const {fontWeight, fontSize, fontStyle, lineHeight} = typoStyle;
+    const style = FontStyle[fontStyle ?? 'normal'];
+    let fontFamily: string;
+
+    switch (theme.font) {
+      case 'SFProText': {
+        fontFamily = `${theme.font}-${SFProText[fontWeight]}${style}`;
+        break;
+      }
+      case 'AlegreyaSans': {
+        fontFamily = `${theme.font}-${AlegreyaSans[fontWeight]}${style}`;
+        break;
+      }
+      default: {
+        fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
+      }
+    }
+
+    return {
+      ...typoStyle,
+      fontFamily,
+      fontSize: scaleSize(fontSize),
+      lineHeight: scaleSize(lineHeight),
+      fontStyle,
+      fontWeight,
+    };
+  };
+
+  const textStyle = getTypoStyle(typography);
+  return (
+    <RNText
+      {...rest}
+      style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
+      {children ?? ''}
+    </RNText>
+  );
+};
+
+Text.defaultProps = {
+  typography: 'body_default_regular',
+};
+
+export {Text, scaleSize};

package/Text/styles.ts

@@ -0,0 +1,73 @@
+export default {
+  headline_default_bold: {fontSize: 24, lineHeight: 32, fontWeight: '700'},
+  header_m_bold: {fontSize: 18, lineHeight: 28, 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'},
+  body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
+  body_regularstrikethrought: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  description_default_regular: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '400',
+  },
+  description_default_regularstrikethrought: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  description_xs_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_xs_regularstrikethrought: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  label_default_medium: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
+  label_s_medium: {fontSize: 12, lineHeight: 16, 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_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
+  /**non-support**/
+  headline_default: {
+    fontSize: 28,
+    lineHeight: 34,
+    fontWeight: '600',
+  },
+  headline_s: {fontSize: 24, lineHeight: 32, fontWeight: '600'},
+  headline_l: {fontSize: 32, lineHeight: 36, fontWeight: '600'},
+  headline_xl: {fontSize: 36, lineHeight: 44, fontWeight: '600'},
+  title_default: {fontSize: 20, lineHeight: 28, fontWeight: '700'},
+  title_xs: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
+  title_s: {fontSize: 18, lineHeight: 28, fontWeight: '700'},
+  header_default: {fontSize: 15, lineHeight: 22, fontWeight: '600'},
+  header_xs: {fontSize: 12, lineHeight: 16, fontWeight: '600'},
+  header_s: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
+  paragraph_default: {fontSize: 15, lineHeight: 22, fontWeight: '400'},
+  paragraph_bold: {fontSize: 15, lineHeight: 22, fontWeight: '700'},
+  paragraph_italic: {
+    fontSize: 15,
+    lineHeight: 22,
+    fontWeight: '400',
+    fontStyle: 'italic',
+  },
+  description_default: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
+  description_xs: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_s: {fontSize: 12, lineHeight: 16, fontWeight: '400'},
+  label_default: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
+  label_xxs: {fontSize: 8, lineHeight: 12, fontWeight: '500'},
+  label_xs: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
+  label_s: {fontSize: 12, lineHeight: 16, fontWeight: '500'},
+  action_default: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
+  action_xxs: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
+  action_xs: {fontSize: 12, lineHeight: 16, fontWeight: '700'},
+  action_s: {fontSize: 15, lineHeight: 22, fontWeight: '700'},
+};

package/Text/types.ts

@@ -0,0 +1,34 @@
+export type TypographyWeight = {
+  [key: string]: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  normal: string;
+  bold: string;
+};
+
+export type Typography =
+  | 'headline_default_bold'
+  | 'header_m_bold'
+  | 'header_default_bold'
+  | 'header_s_semibold'
+  | 'header_xs_semibold'
+  | 'body_default_regular'
+  | 'body_regularstrikethrought'
+  | 'description_default_regular'
+  | 'description_default_regularstrikethrought'
+  | 'description_xs_regular'
+  | 'description_xs_regularstrikethrought'
+  | 'label_default_medium'
+  | 'label_s_medium'
+  | 'label_xs_medium'
+  | 'action_default_bold'
+  | 'action_s_bold'
+  | 'action_xs_bold'
+  | 'action_xxs_bold';

package/Text/utils.ts

@@ -0,0 +1,14 @@
+import {Dimensions} from 'react-native';
+
+const deviceWidth = Dimensions.get('window').width;
+const DEFAULT_SCREEN_SIZE = 375;
+const scaleSize = (size: number) => {
+  const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
+
+  if (scaleRate > 1) {
+    return Math.min(Math.round(size * scaleRate), size + 3);
+  }
+
+  return size;
+};
+export {scaleSize};

package/Title/index.tsx

@@ -0,0 +1,132 @@
+import React, {FC, useContext, useState} from 'react';
+import {
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  Text as RNText,
+  TextLayoutEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {TitleProps} from './types';
+import {Icon} from '../Icon';
+import styles from './styles';
+import {ApplicationContext} from '../Application';
+import {Colors, Spacing} from '../Consts';
+import {scaleSize, Text} from '../Text';
+
+const Title: FC<TitleProps> = ({
+  size = 'large',
+  type = 'section',
+  onPressAction,
+  actionTitle,
+  title = 'Title',
+  titleFlex = true,
+  showAction = true,
+  icon,
+  description,
+  usePadding = true,
+}) => {
+  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 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 renderSemiAction = () => {
+    if (textLines > 1) return null;
+    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'}
+        />
+      </TouchableOpacity>
+    );
+  };
+  const onLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  };
+
+  const onTextLayout = (e: NativeSyntheticEvent<TextLayoutEventData>) => {
+    setTextLines(e.nativeEvent.lines.length);
+  };
+
+  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}
+            </Text>
+          )}
+        </View>
+        {showAction && titleFlex && type !== 'screen' && renderAction()}
+      </View>
+    </View>
+  );
+};
+
+export {Title};
+export type {TitleProps};

package/Title/styles.ts

@@ -0,0 +1,52 @@
+import {StyleSheet} from 'react-native';
+import {scaleSize} from '../Text';
+import {Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  card_small: {
+    fontSize: scaleSize(14),
+    lineHeight: scaleSize(20),
+  },
+  card_medium: {
+    fontSize: scaleSize(16),
+    lineHeight: scaleSize(22),
+  },
+  card_large: {
+    fontSize: scaleSize(18),
+    lineHeight: scaleSize(26),
+  },
+  section_medium: {
+    fontSize: scaleSize(20),
+    lineHeight: scaleSize(28),
+  },
+  section_small: {
+    fontSize: scaleSize(16),
+    lineHeight: scaleSize(22),
+  },
+  section_large: {
+    fontSize: scaleSize(24),
+    lineHeight: scaleSize(34),
+  },
+  screen: {
+    fontSize: scaleSize(36),
+    lineHeight: scaleSize(44),
+  },
+  actionIcon: {
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    marginRight: Spacing.S,
+    borderRadius: Radius.XS,
+  },
+  wrapper: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  textContent: {
+    marginRight: Spacing.S,
+    flex: 1,
+  },
+});

package/Title/types.ts

@@ -0,0 +1,52 @@
+export type TitleProps = {
+  /**
+   * Optional. Defines the type of Title component.
+   * 'screen' - Used for screen titles.
+   * 'section' - Used for section titles within a screen.
+   * 'card' - Used for titles within a card component.
+   */
+  type?: 'screen' | 'section' | 'card';
+
+  /**
+   * Required. The text of the title.
+   */
+  title: string;
+
+  /**
+   * Optional. A description or subtitle that appears below the title.
+   */
+  description?: string;
+
+  /**
+   * Optional. Defines the size of the Title component.
+   * 'large' - A larger, more prominent title.
+   * 'small' - A smaller, less prominent title.
+   */
+  size?: 'large' | 'medium' | 'small';
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed alongside the title.
+   */
+  icon?: string;
+
+  /**
+   * Optional. If `true`, the title will be flexible in its container, adjusting its width dynamically.
+   */
+  titleFlex?: boolean;
+
+  /**
+   * Optional. Text for an action button associated with the title.
+   */
+  actionTitle?: string;
+
+  /**
+   * Optional. Function to be called when the action associated with the title is pressed.
+   */
+  onPressAction?: () => void;
+
+  /**
+   * Optional. If `true`, an action button or icon is displayed alongside the title.
+   */
+  showAction?: boolean;
+  usePadding?: boolean;
+};