@momo-kits/native-kits 0.157.1-beta.9 → 0.157.1-com.1-debug

package/src/foundations/Text/index.tsx

@@ -0,0 +1,241 @@
+import React, { useContext } from 'react';
+import { Text as RNText, TextProps as RNTextProps, View } from 'react-native';
+import styles from './styles';
+import { Typography, TypographyWeight } from './types';
+import {
+  ApplicationContext,
+  MiniAppContext,
+  SkeletonContext,
+} from '../Context';
+import { scaleSize, useScaleSize } from './utils';
+import { Skeleton } from '../Skeleton';
+
+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 BarlowCondensed: TypographyWeight = {
+  100: 'Thin',
+  200: 'ExtraLight',
+  300: 'Light',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'SemiBold',
+  700: 'Bold',
+  800: 'ExtraBold',
+  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;
+
+  /**
+   * Optional. Represents the font-family of the text in the Text component.
+   * Ex: MomoSignature, MomoTrustDisplay
+   */
+  fontFamily?: string;
+
+  /**
+   * Optional. Modified max scale rate of scaleSize function in Text component, default is 1.5.
+   * Ex: 1.5, 2
+   */
+  maxScaleRate?: number;
+}
+
+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 TypoStyles = (
+  typo: Typography,
+  newFontFamily?: string,
+  maxScaleRate?: number,
+) => {
+  const { theme } = useContext(ApplicationContext);
+  const styleSheet: {
+    [key: string]: any;
+  } = styles;
+  const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
+  const { fontWeight, fontSize, fontStyle, lineHeight } = typoStyle;
+  const style = FontStyle[fontStyle ?? 'normal'];
+  const font = newFontFamily ?? theme.font;
+  let fontFamily: string;
+
+  switch (font) {
+    case 'SFProText': {
+      fontFamily = `${font}-${SFProText[fontWeight]}${style}`;
+      break;
+    }
+    case 'AlegreyaSans': {
+      fontFamily = `${font}-${AlegreyaSans[fontWeight]}${style}`;
+      break;
+    }
+    case 'BarlowCondensed': {
+      fontFamily = `${font}-${BarlowCondensed[fontWeight]}${style}`;
+      break;
+    }
+    case 'Montserrat-Bold':
+    case 'iCielPanton-Black':
+    case 'iCielBCCubano-Normal':
+    case 'MoMoTrustDisplay':
+    case 'MoMoSignature': {
+      fontFamily = font;
+      break;
+    }
+    default: {
+      fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
+    }
+  }
+
+  return {
+    ...typoStyle,
+    fontFamily,
+    fontSize: useScaleSize(fontSize, maxScaleRate),
+    lineHeight: useScaleSize(lineHeight, maxScaleRate),
+    fontStyle,
+    fontWeight,
+  };
+};
+
+const Text: React.FC<TextProps> = ({
+  typography = 'body_default_regular',
+  color,
+  children,
+  style,
+  fontFamily,
+  maxScaleRate,
+  ...rest
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+  const skeleton = useContext(SkeletonContext);
+  const textStyle = TypoStyles(typography, fontFamily, maxScaleRate);
+
+  if (deprecatedValues.includes(typography)) {
+    console.warn(
+      `Warning: The typography value "${typography}" is deprecated.`,
+    );
+  }
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  if (skeleton.loading) {
+    return (
+      <View style={style}>
+        <RNText
+          {...rest}
+          allowFontScaling={false}
+          style={[
+            textStyle,
+            {
+              color: color ?? theme.colors.text.default,
+            },
+          ]}
+        >
+          {children ?? ''}
+        </RNText>
+        <Skeleton style={{ position: 'absolute' }} />
+      </View>
+    );
+  }
+
+  return (
+    <RNText
+      {...rest}
+      allowFontScaling={false}
+      style={[
+        style,
+        textStyle,
+        showBaseLineDebug && styles.debugBaseLine,
+        {
+          color: color ?? theme.colors.text.default,
+        },
+      ]}
+    >
+      {children ?? ''}
+    </RNText>
+  );
+};
+
+const exportFontFamily = (
+  fontWeight: string,
+  typography?: Typography,
+  fontFamily?: string,
+): string => {
+  let newFontFamily;
+
+  switch (fontWeight) {
+    case 'bold':
+    case 'Bold':
+      typography = 'action_xs_bold';
+      break;
+
+    case 'regular':
+    case 'Regular':
+      typography = 'body_default_regular';
+      break;
+
+    default: {
+      typography = 'body_default_regular';
+      break;
+    }
+  }
+
+  newFontFamily = TypoStyles(typography, fontFamily).fontFamily;
+
+  return newFontFamily;
+};
+
+export { Text, scaleSize, useScaleSize, exportFontFamily };

package/src/foundations/Text/styles.ts

@@ -0,0 +1,78 @@
+import { Colors } from '../Consts';
+
+export default {
+  headline_l_bold: { fontSize: 28, lineHeight: 40, 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: 18, fontWeight: '600' },
+  body_default_regular: { fontSize: 14, lineHeight: 20, fontWeight: '400' },
+  body_default_regularstrikethrought: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  description_default_regular: {
+    fontSize: 12,
+    lineHeight: 18,
+    fontWeight: '400',
+  },
+  description_default_regularstrikethrought: {
+    fontSize: 12,
+    lineHeight: 18,
+    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: 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: 18, 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' },
+
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+};

package/src/foundations/Text/types.ts

@@ -0,0 +1,53 @@
+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 =
+  /**
+   * @deprecated
+   **/
+  | 'headline_default'
+  | 'headline_l'
+  | 'headline_xl'
+  | 'title_default'
+  | 'title_xs'
+  | 'title_s'
+  | 'header_default'
+  | 'paragraph_default'
+  | 'paragraph_bold'
+  | 'paragraph_italic'
+  | 'label_xxs'
+  | 'action_s'
+  /**
+   * end
+   **/
+  | 'headline_l_bold'
+  | 'headline_default_bold'
+  | 'header_m_bold'
+  | 'header_default_bold'
+  | 'header_s_semibold'
+  | 'header_xs_semibold'
+  | 'body_default_regular'
+  | 'body_default_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/src/foundations/Text/utils.ts

@@ -0,0 +1,63 @@
+import { Dimensions, PixelRatio, useWindowDimensions } from 'react-native';
+import { useContext } from 'react';
+import { ScaleSizeContext } from '../Context';
+
+const deviceWidth = Dimensions.get('window').width;
+const DEFAULT_SCREEN_SIZE = 375;
+const MAX_FONT_SCALE = 1.5;
+const MAX_DEVICE_SCALE = 5;
+
+const useScaleSize = (size: number, scaleRate?: number) => {
+  const scaleSizeContext = useContext<any>(ScaleSizeContext);
+  const fontScale = PixelRatio.getFontScale();
+  const windowSize = useWindowDimensions();
+  const deviceScale = windowSize.width / DEFAULT_SCREEN_SIZE;
+
+  const maxScaleRate =
+    scaleRate || scaleSizeContext?.scaleSizeMaxRate || MAX_FONT_SCALE;
+
+  let fontSizeDeviceScale = size;
+  let fontSizeOSScale = size;
+
+  if (deviceScale > 1) {
+    fontSizeDeviceScale = Math.min(
+      fontSizeDeviceScale * deviceScale,
+      fontSizeDeviceScale + MAX_DEVICE_SCALE,
+    );
+  }
+
+  if (fontScale > 1) {
+    fontSizeOSScale = Math.min(
+      fontSizeOSScale * fontScale,
+      fontSizeOSScale * maxScaleRate,
+    );
+  }
+
+  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
+};
+
+const scaleSize = (size: number) => {
+  const fontScale = PixelRatio.getFontScale();
+  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
+
+  let fontSizeDeviceScale = size;
+  let fontSizeOSScale = size;
+
+  if (deviceScale > 1) {
+    fontSizeDeviceScale = Math.min(
+      fontSizeDeviceScale * deviceScale,
+      fontSizeDeviceScale + MAX_DEVICE_SCALE,
+    );
+  }
+
+  if (fontScale > 1) {
+    fontSizeOSScale = Math.min(
+      fontSizeOSScale * fontScale,
+      fontSizeOSScale * MAX_FONT_SCALE,
+    );
+  }
+
+  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
+};
+
+export { scaleSize, useScaleSize };