Merge branch 'JUIP-115-añadir-compatibilidad-de-componentes-con-style…

…d-components'

.ondevice/storybook.requires.js

@@ -14,7 +14,7 @@ global.STORIES = [
     directory: "./storybook/stories",
     files: "**/*.stories.?(ts|tsx|js|jsx)",
     importPathMatcher:
-      "^\\.[\\\\/](?:storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+      "^\\.[\\\\/](?:storybook[\\\\/]stories(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
   },
 ];
 

CHANGELOG.MD

@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fixed export components
 - Fixed an error when locally linking the package with a react native app
+- Fixed the error when components are styled using styled-components
 
 ### Removed
 

src/components/Avatar/index.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, ViewStyle} from 'react-native';
 import Image from '../Image';
 import Text from '../Text';
 import {formatPlaceholder} from './utils/formatPlaceholder/index';
@@ -21,6 +21,7 @@ export interface AvatarProps {
 	customSize?: number;
 	imageUrl?: string;
 	onErrorImg?: () => void;
+	style?: ViewStyle;
 }
 
 const styles = StyleSheet.create({
@@ -45,6 +46,7 @@ const Avatar = ({
 	placeholder,
 	customSize,
 	onErrorImg,
+	style,
 	...props
 }: AvatarProps) => {
 	const [showInitials, setShowInitials] = useState(false);
@@ -72,6 +74,7 @@ const Avatar = ({
 					height: getSize(size, customSize),
 					width: getSize(size, customSize),
 				},
+				style,
 			]}
 			{...props}>
 			{!!imageUrl && !showInitials && (

src/components/CheckBox/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, TouchableOpacity, StyleSheet} from 'react-native';
+import {View, TouchableOpacity, StyleSheet, ViewStyle} from 'react-native';
 import {base, grey, primary} from '../../theme/palette';
 import Icon from './icon/CheckedIcon';
 
@@ -11,6 +11,7 @@ interface CheckBoxProps {
 	iconCheckColor?: string;
 	borderRadius?: number;
 	disabled?: boolean;
+	style?: ViewStyle;
 }
 
 const getCheckBoxScale = (size: number, divisor: number): number => size / divisor;
@@ -23,6 +24,7 @@ const CheckBox = ({
 	iconCheckColor = base.white,
 	borderRadius,
 	disabled = false,
+	style,
 	...props
 }: CheckBoxProps) => {
 	const hasBorderRadius = !borderRadius ? getCheckBoxScale(customSize, 4) : borderRadius;
@@ -57,7 +59,7 @@ const CheckBox = ({
 		<TouchableOpacity
 			disabled={disabled}
 			activeOpacity={0.6}
-			style={styles.touchableOpacity}
+			style={[styles.touchableOpacity, style]}
 			{...props}>
 			<View style={isChecked}>{checked && <Icon color={iconCheckColor} size={customSize} />}</View>
 		</TouchableOpacity>

src/components/Input/index.tsx

@@ -1,5 +1,5 @@
 import React, {LegacyRef, useEffect, useState} from 'react';
-import {TextInput, StyleSheet, View, Text, KeyboardType} from 'react-native';
+import {TextInput, StyleSheet, View, Text, KeyboardType, TextStyle} from 'react-native';
 import {
 	Status,
 	getBorderColor,
@@ -37,6 +37,7 @@ interface InputProps {
 	onSubmitEditing?: () => void;
 	onFocus?: () => void;
 	onBlur?: () => void;
+	style?: TextStyle;
 }
 
 const Input = React.forwardRef<TextInput, InputProps>(
@@ -56,6 +57,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
 			onSubmitEditing = () => {},
 			onFocus = () => {},
 			onBlur = () => {},
+			style,
 			...props
 		}: InputProps,
 		ref: LegacyRef<TextInput>
@@ -135,7 +137,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
 				<View style={styles.inputWrapper}>
 					{isLabelVisible && <Text style={styles.label}>{label}</Text>}
 					<TextInput
-						style={styles.input}
+						style={[styles.input, style]}
 						ref={ref}
 						onFocus={onFocusHandler}
 						onBlur={onBlurHandler}

src/components/Loading/index.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useRef, FC} from 'react';
-import {StyleSheet, View, Animated, Easing, ColorValue} from 'react-native';
+import {StyleSheet, View, Animated, Easing, ColorValue, ViewStyle} from 'react-native';
 import {primary, white} from '../../theme/palette';
 
 interface Params {
@@ -13,6 +13,7 @@ interface Props {
 	size?: number;
 	duration?: number;
 	children?: React.ReactNode | null;
+	style?: ViewStyle;
 }
 
 const startRotationAnimation = ({duration, rotationDegree, timingAnimation}: Params): void =>
@@ -31,6 +32,7 @@ const Loading: FC<Props> = ({
 	size = 64,
 	duration = 1000,
 	children = null,
+	style,
 	...props
 }) => {
 	const rotationDegree = useRef(new Animated.Value(0)).current;
@@ -81,7 +83,7 @@ const Loading: FC<Props> = ({
 	}
 
 	return (
-		<View style={styles.container} {...props}>
+		<View style={[styles.container, style]} {...props}>
 			<Animated.View style={{...styles.spinner, ...animationSpinnerStyle}} />
 			{children}
 		</View>

src/index.ts

@@ -6,5 +6,6 @@ import Svg from './components/Svg';
 import Loading from './components/Loading';
 import StatusChip from './components/StatusChip';
 import Input from './components/Input';
+import {palette} from './theme/palette';
 
-export {Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input};
+export {Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, palette};