cpk-ui 0.1.8 → 0.1.9

package/components/uis/Typography/Typography.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Text } from 'react-native';
 import { isEmptyObject } from '../../../utils/theme';
 import { withTheme } from '../../../providers/ThemeProvider';
 import { light } from '../../../utils/colors';
 import styled, { css } from '@emotion/native';
-// Base Styled Component Factory
 const createBaseText = (colorResolver, fallbackColor) => styled.Text `
-  font-family: ${({ fontWeight }) => fontWeight === 'bold'
-    ? 'Pretendard-Bold'
-    : fontWeight === 'thin'
-        ? 'Pretendard-Thin'
-        : 'Pretendard'};
+  font-family: ${({ fontWeight }) => {
+    const { normal, thin = normal, bold = normal } = getFontFamilies();
+    switch (fontWeight) {
+        case 'bold':
+            return bold;
+        case 'thin':
+            return thin;
+        default:
+            return normal;
+    }
+}};
   color: ${({ theme }) => {
     if (!theme || isEmptyObject(theme)) {
         return fallbackColor;
@@ -28,10 +31,8 @@ const createTextComponent = ({ BaseText, fontSize, lineHeight, fontWeight, }) =>
         { includeFontPadding: false },
         style,
     ], children: children })));
-// Standard and Inverted Base Components
 const StandardBaseText = createBaseText((theme) => theme.text.basic, 'gray');
 const InvertedBaseText = createBaseText((theme) => theme.text.contrast, light.text.contrast);
-// Standard Typography Components
 const Title = createTextComponent({
     BaseText: StandardBaseText,
     fontSize: 36,
@@ -88,7 +89,6 @@ const Body4 = createTextComponent({
     fontSize: 12,
     lineHeight: 16.4,
 });
-// Inverted Typography Components
 const InvertedTitle = createTextComponent({
     BaseText: InvertedBaseText,
     fontSize: 36,
@@ -145,6 +145,15 @@ const InvertedBody4 = createTextComponent({
     fontSize: 12,
     lineHeight: 16.4,
 });
+let currentFontFamilies = {
+    normal: 'Pretendard',
+    thin: 'Pretendard-Thin',
+    bold: 'Pretendard-Bold',
+};
+export const setFontFamily = (fontFamilies) => {
+    currentFontFamilies = { ...currentFontFamilies, ...fontFamilies };
+};
+export const getFontFamilies = () => currentFontFamilies;
 export const Typography = {
     Title,
     Heading1,
@@ -169,18 +178,3 @@ export const TypographyInverted = {
     Body3: InvertedBody3,
     Body4: InvertedBody4,
 };
-export const setFontFamily = (fontFamily) => {
-    const style = {
-        includeFontPadding: false,
-        fontFamily,
-    };
-    // @ts-ignore
-    let oldRender = Text.render;
-    // @ts-ignore
-    Text.render = (...args) => {
-        let origin = oldRender.call(this, ...args);
-        return React.cloneElement(origin, {
-            style: [style, origin.props.style],
-        });
-    };
-};

package/components/uis/Typography/Typography.tsx

@@ -1,23 +1,32 @@
 import React, {ReactNode} from 'react';
 import {StyleProp, Text} from 'react-native';
-
 import {CpkTheme, isEmptyObject} from '../../../utils/theme';
 import {withTheme} from '../../../providers/ThemeProvider';
 import {light} from '../../../utils/colors';
 import {type TextStyle} from 'react-native';
 import styled, {css} from '@emotion/native';
 
-// Base Styled Component Factory
+type FontFamilyOptions = {
+  normal: string;
+  thin?: string;
+  bold?: string;
+};
+
 const createBaseText = (
   colorResolver: (theme: CpkTheme) => string,
   fallbackColor: string,
 ) => styled.Text<{theme?: CpkTheme; fontWeight?: 'normal' | 'bold' | 'thin'}>`
-  font-family: ${({fontWeight}) =>
-    fontWeight === 'bold'
-      ? 'Pretendard-Bold'
-      : fontWeight === 'thin'
-        ? 'Pretendard-Thin'
-        : 'Pretendard'};
+  font-family: ${({fontWeight}) => {
+    const {normal, thin = normal, bold = normal} = getFontFamilies();
+    switch (fontWeight) {
+      case 'bold':
+        return bold;
+      case 'thin':
+        return thin;
+      default:
+        return normal;
+    }
+  }};
   color: ${({theme}) => {
     if (!theme || isEmptyObject(theme)) {
       return fallbackColor;
@@ -26,7 +35,6 @@ const createBaseText = (
   }};
 `;
 
-// Common Text Component Factory
 type TextComponentType = ReturnType<typeof styled.Text>;
 
 const createTextComponent = ({
@@ -68,14 +76,12 @@ const createTextComponent = ({
     ),
   ) as unknown as TextComponentType;
 
-// Standard and Inverted Base Components
 const StandardBaseText = createBaseText((theme) => theme.text.basic, 'gray');
 const InvertedBaseText = createBaseText(
   (theme) => theme.text.contrast,
   light.text.contrast,
 );
 
-// Standard Typography Components
 const Title = createTextComponent({
   BaseText: StandardBaseText,
   fontSize: 36,
@@ -142,7 +148,6 @@ const Body4 = createTextComponent({
   lineHeight: 16.4,
 });
 
-// Inverted Typography Components
 const InvertedTitle = createTextComponent({
   BaseText: InvertedBaseText,
   fontSize: 36,
@@ -209,6 +214,18 @@ const InvertedBody4 = createTextComponent({
   lineHeight: 16.4,
 });
 
+let currentFontFamilies: FontFamilyOptions = {
+  normal: 'Pretendard',
+  thin: 'Pretendard-Thin',
+  bold: 'Pretendard-Bold',
+};
+
+export const setFontFamily = (fontFamilies: FontFamilyOptions): void => {
+  currentFontFamilies = {...currentFontFamilies, ...fontFamilies};
+};
+
+export const getFontFamilies = (): FontFamilyOptions => currentFontFamilies;
+
 export const Typography = {
   Title,
   Heading1,
@@ -234,22 +251,3 @@ export const TypographyInverted = {
   Body3: InvertedBody3,
   Body4: InvertedBody4,
 };
-
-export const setFontFamily = (fontFamily: string): void => {
-  const style = {
-    includeFontPadding: false,
-    fontFamily,
-  };
-
-  // @ts-ignore
-  let oldRender = Text.render;
-
-  // @ts-ignore
-  Text.render = (...args: any) => {
-    let origin = oldRender.call(this, ...args);
-
-    return React.cloneElement(origin, {
-      style: [style, origin.props.style],
-    });
-  };
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpk-ui",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "main": "index",
   "react-native": "index",
   "module": "index",