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

package/src/foundations/Text/index.tsx

@@ -1,241 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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 };