cpk-ui 0.0.3 → 0.0.5

package/components/uis/Hr/Hr.js

@@ -0,0 +1,12 @@
+import styled from '@emotion/native';
+import { isEmptyObject } from '../../../utils/theme';
+export const Hr = styled.View `
+  height: 0.5px;
+  width: 100%;
+  background-color: ${({ theme }) => {
+    if (isEmptyObject(theme)) {
+        return theme.role.border;
+    }
+    return theme.role.border;
+}};
+`;

package/components/uis/Hr/Hr.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {RenderAPI} from '@testing-library/react-native';
+import {render} from '@testing-library/react-native';
+
+import {createComponent} from '../../../../test/testUtils';
+import {Hr} from './Hr';
+
+let testingLib: RenderAPI;
+
+const Component = (): JSX.Element =>
+  createComponent(
+    <View>
+      <Hr />
+    </View>,
+  );
+
+describe('[Hr]', () => {
+  it('should render without crashing', () => {
+    testingLib = render(Component());
+
+    const json = testingLib.toJSON();
+
+    expect(json).toBeTruthy();
+  });
+});

package/components/uis/Hr/Hr.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/native';
+import {isEmptyObject} from '../../../utils/theme';
+
+export const Hr = styled.View`
+  height: 0.5px;
+  width: 100%;
+  background-color: ${({theme}) => {
+    if (isEmptyObject(theme)) {
+      return theme.role.border;
+    }
+
+    return theme.role.border;
+  }};
+`;

package/components/uis/Typography/Typography.js

@@ -15,11 +15,10 @@ const createBaseText = (colorResolver, fallbackColor) => styled.Text `
     return colorResolver(theme);
 }};
 `;
-// Common Text Component Factory
-const createTextComponent = (BaseText, fontSize, lineHeight) => withTheme(({ style, children, theme, ...props }) => (_jsx(BaseText, { ...props, theme: theme, style: [
+const createTextComponent = (BaseText, fontSize, lineHeight) => withTheme(({ style, children, theme, ...props }) => (_jsx(BaseText, { ...props, style: [
         css `
-            font-size: ${fontSize + 'px'};
-            line-height: ${lineHeight + 'px'};
+            font-size: ${fontSize}px;
+            line-height: ${lineHeight}px;
           `,
         { includeFontPadding: false },
         style,

package/components/uis/Typography/Typography.tsx

@@ -22,8 +22,10 @@ const createBaseText = (
 `;
 
 // Common Text Component Factory
+type TextComponentType = ReturnType<typeof styled.Text>;
+
 const createTextComponent = (
-  BaseText: ReturnType<typeof styled.Text>,
+  BaseText: TextComponentType,
   fontSize: number,
   lineHeight: number,
 ) =>
@@ -40,11 +42,10 @@ const createTextComponent = (
     }) => (
       <BaseText
         {...props}
-        theme={theme}
         style={[
           css`
-            font-size: ${fontSize + 'px'};
-            line-height: ${lineHeight + 'px'};
+            font-size: ${fontSize}px;
+            line-height: ${lineHeight}px;
           `,
           {includeFontPadding: false},
           style,
@@ -53,7 +54,7 @@ const createTextComponent = (
         {children}
       </BaseText>
     ),
-  );
+  ) as unknown as TextComponentType;
 
 // Standard and Inverted Base Components
 const StandardBaseText = createBaseText((theme) => theme.text.basic, 'gray');

package/index.js

@@ -8,6 +8,7 @@ export * from './components/uis/Accordion/Accordion';
 export * from './components/uis/Button/Button';
 export * from './components/uis/Checkbox/Checkbox';
 export * from './components/uis/EditText/EditText';
+export * from './components/uis/Hr/Hr';
 export * from './components/uis/Icon/Icon';
 export * from './components/uis/IconButton/IconButton';
 export * from './components/uis/LoadingIndicator/LoadingIndicator';

package/index.tsx

@@ -10,6 +10,7 @@ export * from './components/uis/Accordion/Accordion';
 export * from './components/uis/Button/Button';
 export * from './components/uis/Checkbox/Checkbox';
 export * from './components/uis/EditText/EditText';
+export * from './components/uis/Hr/Hr';
 export * from './components/uis/Icon/Icon';
 export * from './components/uis/IconButton/IconButton';
 export * from './components/uis/LoadingIndicator/LoadingIndicator';

package/package.json

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