cpk-ui 0.0.7 → 0.1.0

package/components/uis/Button/Button.js

@@ -137,14 +137,22 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
         type,
         loading,
     ]);
+    function resolveStyle(style) {
+        if (Array.isArray(style)) {
+            return style.find((s) => !!s);
+        }
+        return style || undefined;
+    }
+    const viewStyle = resolveStyle(compositeStyles.container);
+    const textStyle = resolveStyle(compositeStyles.text);
     const ChildView = (_jsxs(_Fragment, { children: [cloneElemWithDefaultColors({
                 element: startElement,
-                backgroundColor: compositeStyles.container?.[0]?.backgroundColor,
-                color: compositeStyles.text?.[0]?.color,
+                backgroundColor: viewStyle?.backgroundColor,
+                color: textStyle?.color,
             }), !text || typeof text === 'string' ? (_jsx(Text, { style: compositeStyles.text, children: text })) : (text), cloneElemWithDefaultColors({
                 element: endElement,
-                backgroundColor: compositeStyles.container?.[0]?.backgroundColor,
-                color: compositeStyles.text?.[0]?.color,
+                backgroundColor: viewStyle?.backgroundColor,
+                color: textStyle?.color,
             })] }));
     return (_jsx(TouchableHighlight, { activeOpacity: activeOpacity, delayPressIn: 30, disabled: innerDisabled || loading || !onPress, hitSlop: hitSlop, onPress: onPress, ref: Platform.select({
             web: ref,

package/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,
       })}
     </>
   );

package/components/uis/EditText/EditText.js

@@ -3,13 +3,13 @@ import { forwardRef, isValidElement, useCallback, useMemo, useRef, useState, } f
 import { Platform, Text, TextInput, TouchableWithoutFeedback, View, } from 'react-native';
 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 const EditText = forwardRef(({ testID, textInputProps, style, styles, label, error, startElement, endElement, multiline = false, value = '', placeholder, placeholderColor, onChange, onChangeText, onFocus, onBlur, onSubmitEditing, numberOfLines, maxLength, hideCounter = false, autoComplete, autoCapitalize = 'none', secureTextEntry = false, editable = true, direction = 'column', decoration = 'underline', colors = {}, required = false, }, ref) => {
     EditText.displayName = 'EditText';
-    const { theme } = useCPK();
+    const { theme } = useTheme();
     const webRef = useRef(null);
     const [focused, setFocused] = useState(false);
     const defaultInputRef = useRef(null);

package/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();
       });
 

package/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);

package/package.json

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

package/utils/guards.js

@@ -1,12 +1,12 @@
-import React, { cloneElement } from "react";
-import { Button, Image, Pressable, Text, TextInput, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, View, } from "react-native";
-import { Icon } from "../components/uis/Icon/Icon";
+import React, { cloneElement } from 'react';
+import { Button, Image, Pressable, Text, TextInput, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, View, } from 'react-native';
+import { Icon } from '../components/uis/Icon/Icon';
 const getRootElementStyleType = (element) => {
     if (React.isValidElement(element)) {
         if (element.type === Text ||
             element.type === TextInput ||
             element.type === Icon) {
-            return "TextStyle";
+            return 'TextStyle';
         }
         if (element.type === Image ||
             element.type === View ||
@@ -15,10 +15,10 @@ const getRootElementStyleType = (element) => {
             element.type === TouchableOpacity ||
             element.type === Pressable ||
             element.type === TouchableWithoutFeedback) {
-            return "ViewStyle";
+            return 'ViewStyle';
         }
     }
-    return "unknown";
+    return 'unknown';
 };
 /**
  * This function applies default colors to cloned element.
@@ -30,10 +30,10 @@ export const cloneElemWithDefaultColors = ({ element, color, backgroundColor, st
     return element
         ? cloneElement(element, {
             style: [
-                getRootElementStyleType(element) === "TextStyle" && {
+                getRootElementStyleType(element) === 'TextStyle' && {
                     color,
                 },
-                getRootElementStyleType(element) === "ViewStyle" && {
+                getRootElementStyleType(element) === 'ViewStyle' && {
                     borderColor: color,
                     backgroundColor: backgroundColor,
                 },

package/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;