0.1.0

crossplatformkorea · Dec 25, 2024 · 35ed417 · 35ed417
1 parent 7667dc0
commit 35ed417
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 24 deletions.
diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cpk-ui",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "index",
   "react-native": "index",
   "module": "index",

diff --git a/src/components/uis/Button/Button.tsx b/src/components/uis/Button/Button.tsx
@@ -285,12 +285,24 @@ export function Button({
     ],
   );
 
+  function resolveStyle<T>(
+    style: StyleProp<T>
+  ): T | undefined {
+    if (Array.isArray(style)) {
+      return style.find((s): s is T => !!s);
+    }
+    return style as T || undefined;
+  }
+
+  const viewStyle = resolveStyle<ViewStyle>(compositeStyles.container);
+  const textStyle = resolveStyle<TextStyle>(compositeStyles.text);
+
   const ChildView = (
     <>
       {cloneElemWithDefaultColors({
         element: startElement,
-        backgroundColor: compositeStyles.container?.[0]?.backgroundColor,
-        color: compositeStyles.text?.[0]?.color,
+        backgroundColor: viewStyle?.backgroundColor,
+        color: textStyle?.color,
       })}
       {!text || typeof text === 'string' ? (
         <Text style={compositeStyles.text}>{text}</Text>
@@ -299,8 +311,8 @@ export function Button({
       )}
       {cloneElemWithDefaultColors({
         element: endElement,
-        backgroundColor: compositeStyles.container?.[0]?.backgroundColor,
-        color: compositeStyles.text?.[0]?.color,
+        backgroundColor: viewStyle?.backgroundColor,
+        color: textStyle?.color,
       })}
     </>
   );

diff --git a/src/components/uis/EditText/EditText.test.tsx b/src/components/uis/EditText/EditText.test.tsx
@@ -1,3 +1,5 @@
+import '@testing-library/jest-native/extend-expect';
+
 import React from 'react';
 import {Text} from 'react-native';
 import RNWebHooks from 'react-native-web-hooks';
@@ -7,7 +9,7 @@ import {act, fireEvent, render} from '@testing-library/react-native';
 import {createComponent} from '../../../../test/testUtils';
 import type {EditTextProps} from './EditText';
 import {EditText} from './EditText';
-import { light } from '../../../utils/colors';
+import {light} from '../../../utils/colors';
 
 jest.mock('react-native-web-hooks', () => ({
   useHover: () => false,
@@ -33,9 +35,7 @@ describe('[EditText]', () => {
     describe('label', () => {
       it('renders label text', async () => {
         testingLib = render(Component({label: 'label text'}));
-
         const label = testingLib.getByText('label text');
-
         expect(label).toBeTruthy();
       });
 

diff --git a/src/components/uis/EditText/EditText.tsx b/src/components/uis/EditText/EditText.tsx
@@ -23,10 +23,10 @@ import {
 import {useHover} from 'react-native-web-hooks';
 import {css} from '@emotion/native';
 
-import {useCPK} from '../../../providers';
 import {Icon} from '../Icon/Icon';
 import {cloneElemWithDefaultColors} from '../../../utils/guards';
 import {Global} from '@emotion/react';
+import {useTheme} from '../../../providers/ThemeProvider';
 
 export type EditTextStyles = {
   container?: StyleProp<ViewStyle>;
@@ -148,7 +148,7 @@ export const EditText = forwardRef<TextInput, EditTextProps>(
   ): JSX.Element => {
     EditText.displayName = 'EditText';
 
-    const {theme} = useCPK();
+    const {theme} = useTheme();
     const webRef = useRef<View>(null);
     const [focused, setFocused] = useState(false);
     const defaultInputRef = useRef(null);

diff --git a/src/utils/guards.ts b/src/utils/guards.ts
@@ -1,5 +1,5 @@
-import React, { cloneElement } from "react";
-import type { ViewStyle } from "react-native";
+import React, {cloneElement} from 'react';
+import type {ColorValue, ViewStyle} from 'react-native';
 import {
   Button,
   Image,
@@ -10,19 +10,19 @@ import {
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
-} from "react-native";
-import { Icon } from "../components/uis/Icon/Icon";
+} from 'react-native';
+import {Icon} from '../components/uis/Icon/Icon';
 
 const getRootElementStyleType = (
-  element: JSX.Element
-): "TextStyle" | "ViewStyle" | "unknown" => {
+  element: JSX.Element,
+): 'TextStyle' | 'ViewStyle' | 'unknown' => {
   if (React.isValidElement(element)) {
     if (
       element.type === Text ||
       element.type === TextInput ||
       element.type === Icon
     ) {
-      return "TextStyle";
+      return 'TextStyle';
     }
 
     if (
@@ -34,11 +34,11 @@ const getRootElementStyleType = (
       element.type === Pressable ||
       element.type === TouchableWithoutFeedback
     ) {
-      return "ViewStyle";
+      return 'ViewStyle';
     }
   }
 
-  return "unknown";
+  return 'unknown';
 };
 
 type CloneElemColorsParams = {
@@ -51,13 +51,13 @@ type CloneElemColorsParams = {
    * If not passed, default color will be applied.
    * Invalid if element is ViewStyle.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * Background color to be applied.
    * If not passed, default color will be applied.
    * Invalid if element is TextStyle.
    */
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
   /**
    * Extra style to be applied.
    */
@@ -79,14 +79,14 @@ export const cloneElemWithDefaultColors = ({
   return element
     ? cloneElement(element, {
         style: [
-          getRootElementStyleType(element) === "TextStyle" && {
+          getRootElementStyleType(element) === 'TextStyle' && {
             color,
           },
-          getRootElementStyleType(element) === "ViewStyle" && {
+          getRootElementStyleType(element) === 'ViewStyle' && {
             borderColor: color,
             backgroundColor: backgroundColor,
           },
-          { ...style, ...element.props.style },
+          {...style, ...element.props.style},
         ],
       })
     : null;