Merge branch 'master' of https://github.com/janis-commerce/ui-native …

…into JUIP-118-corregir-estilos-de-storybook-de-componente-input

.ondevice/storybook.requires.js

@@ -53,6 +53,7 @@ const getStories = () => {
     "./storybook/stories/Image/Image.stories.js": require("../storybook/stories/Image/Image.stories.js"),
     "./storybook/stories/Input/Input.stories.js": require("../storybook/stories/Input/Input.stories.js"),
     "./storybook/stories/Loading/Loading.stories.js": require("../storybook/stories/Loading/Loading.stories.js"),
+    "./storybook/stories/LoadingFullScreen/LoadingFullScreen.stories.js": require("../storybook/stories/LoadingFullScreen/LoadingFullScreen.stories.js"),
     "./storybook/stories/StatusChip/StatusChip.stories.js": require("../storybook/stories/StatusChip/StatusChip.stories.js"),
     "./storybook/stories/Svg/Svg.stories.js": require("../storybook/stories/Svg/Svg.stories.js"),
     "./storybook/stories/Text/Text.stories.js": require("../storybook/stories/Text/Text.stories.js"),

CHANGELOG.MD

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added component Input
 - Added readme
 - Added github action to deploy storybooks docs
+- Added component LoadingFullScreen
 
 ### Changed
 
@@ -32,7 +33,9 @@ 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
 
 - Removed standard version package and setup
+- Removed Text component inside storybooks folder, and started using it from components

package.json

@@ -90,8 +90,8 @@
 		"react-test-renderer": "17.0.2",
 		"setup-env": "^2.0.0",
 		"storybook": "^6.5.4",
-		"webpack": "^5.52.0",
-		"typescript": "^5.1.6"
+		"typescript": "^5.1.6",
+		"webpack": "^5.52.0"
 	},
 	"resolutions": {
 		"@types/react": "^16"

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

@@ -5,6 +5,7 @@ import {
 	View,
 	Text,
 	KeyboardType,
+	TextStyle,
 	NativeSyntheticEvent,
 	TextInputEndEditingEventData,
 } from 'react-native';
@@ -44,6 +45,7 @@ interface InputProps {
 	onSubmitEditing?: () => void;
 	onFocus?: () => void;
 	onBlur?: () => void;
+	style?: TextStyle;
 }
 
 const Input = React.forwardRef<TextInput, InputProps>(
@@ -63,6 +65,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
 			onSubmitEditing = () => {},
 			onFocus = () => {},
 			onBlur = () => {},
+			style,
 			...props
 		}: InputProps,
 		ref: LegacyRef<TextInput>
@@ -146,7 +149,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}
 						onEndEditing={onEndEditingHandler}

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>