From c5deb644c7cdeb4b3ecaff2b6c410b2bd1f1eb74 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Fri, 12 Apr 2024 12:32:23 -0300
Subject: [PATCH 01/20] crear componente button

---
 App.tsx                                  |   7 +-
 env.json                                 |   2 +-
 src/components/BaseButton/index.test.tsx |  64 ++--------
 src/components/BaseButton/index.tsx      |  80 ++----------
 src/components/Button/index.test.tsx     |   0
 src/components/Button/index.tsx          | 148 +++++++++++++++++++++++
 src/components/Button/utils/index.ts     |   3 +
 src/index.ts                             |   2 +
 8 files changed, 174 insertions(+), 132 deletions(-)
 create mode 100644 src/components/Button/index.test.tsx
 create mode 100644 src/components/Button/index.tsx
 create mode 100644 src/components/Button/utils/index.ts

diff --git a/App.tsx b/App.tsx
index fc82556..2ec347d 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
+import Button from './src/components/Button';
 
 const App = () => (
-	<View>
-		<Text>UI native</Text>
+	<View style={{padding: 20}}>
+		<Button value='Button normal' icon='box' isLoading={false} onPressIn={() => {console.log('anda mierda')}} />
 	</View>
 );
 
diff --git a/env.json b/env.json
index 4e60c2c..f1e5770 100644
--- a/env.json
+++ b/env.json
@@ -1 +1 @@
-{"LOAD_STORYBOOK": true, "WEB_MODE": false}
\ No newline at end of file
+{"LOAD_STORYBOOK": false, "WEB_MODE": false}
\ No newline at end of file
diff --git a/src/components/BaseButton/index.test.tsx b/src/components/BaseButton/index.test.tsx
index 0806874..eea8c3b 100644
--- a/src/components/BaseButton/index.test.tsx
+++ b/src/components/BaseButton/index.test.tsx
@@ -1,19 +1,11 @@
 import React from 'react';
 import {create} from 'react-test-renderer';
-import {Text, View} from 'react-native';
-import {palette} from '../../theme/palette';
+import {View, Text, Pressable} from 'react-native';
 import BaseButton from './';
 
 const validData = {
-	title: 'test title',
-	icon: 'plus_circle',
-	iconRight: true,
-	disabled: true,
 	borderRadius: 15,
-	pressedColor: palette.success.main,
-	style: {backgroundColor: palette.black.main},
-	iconStyle: {backgroundColor: palette.black.main},
-	textStyle: {color: palette.black.main},
+	children: <View><Text>Button</Text></View>,
 };
 
 describe('BaseButton Component', () => {
@@ -25,54 +17,12 @@ describe('BaseButton Component', () => {
 	});
 
 	describe('render correctly when has minimum props needed, example', () => {
-		it('title', () => {
-			const {toJSON} = create(<BaseButton title={validData.title} />);
-			expect(toJSON()).toBeTruthy();
-		});
-
-		it('icon', () => {
-			const {toJSON} = create(<BaseButton icon={validData.icon} />);
-			expect(toJSON()).toBeTruthy();
-		});
-
-		it('children', () => {
+			it('when hasnt minimum props needed', () => {
 			const {toJSON} = create(
-				<BaseButton>
-					<View>
-						<Text>Valid Children</Text>
-					</View>
-				</BaseButton>
-			);
-			expect(toJSON()).toBeTruthy();
-		});
-	});
-
-	describe('Icon', () => {
-		it('is renders right icon when iconRight prop is true', () => {
-			const {toJSON} = create(
-				<BaseButton title={validData.title} icon={validData.icon} iconRight={validData.iconRight} />
-			);
-			expect(toJSON()).toBeTruthy();
-		});
-
-		it('is renders left icon when iconRight prop is not passed', () => {
-			const {toJSON} = create(<BaseButton title={validData.title} icon={validData.icon} />);
-			expect(toJSON()).toBeTruthy();
-		});
-	});
-
-	describe('pressedColor', () => {
-		it('it changes when pressedColor props is an string color format', () => {
-			const {toJSON} = create(
-				<BaseButton title={validData.title} pressedColor={validData.pressedColor} />
-			);
-			expect(toJSON()).toBeTruthy();
-		});
-	});
-
-	describe('is disabled', () => {
-		it('when disabled props is true', () => {
-			const {toJSON} = create(<BaseButton title={validData.title} disabled={validData.disabled} />);
+			<BaseButton borderRadius={validData.borderRadius}>
+				{validData.children}
+			</BaseButton>);
+			
 			expect(toJSON()).toBeTruthy();
 		});
 	});
diff --git a/src/components/BaseButton/index.tsx b/src/components/BaseButton/index.tsx
index 8472ab5..229041b 100644
--- a/src/components/BaseButton/index.tsx
+++ b/src/components/BaseButton/index.tsx
@@ -1,99 +1,37 @@
-import React, {FC} from 'react';
-import {Pressable, PressableProps, ViewStyle, StyleSheet, TextStyle} from 'react-native';
+import React, {FC, ReactNode} from 'react';
+import {Pressable, PressableProps, StyleSheet, ViewStyle} from 'react-native';
 import {moderateScale, horizontalScale, scaledForDevice} from '../../scale';
-import {palette} from '../../theme/palette';
-import Text from '../Text';
-import Icon from '../Icon';
 
-interface PressableStyleProp {
-	pressed: boolean;
-}
-
-interface BaseButtonProps extends PressableProps {
-	title?: string | null;
-	icon?: string;
-	iconRight?: boolean;
-	disabled?: boolean;
+export interface BaseButtonProps extends PressableProps {
 	borderRadius?: number;
-	pressedColor?: string;
-	style?: ViewStyle;
-	iconStyle?: ViewStyle;
-	textStyle?: TextStyle;
-	children?: React.ReactNode;
+	children?: ReactNode | null;
+	style?: any;
 }
 
 const BaseButton: FC<BaseButtonProps> = ({
-	title = null,
-	icon = null,
-	iconRight = false,
-	disabled = false,
-	borderRadius = 0,
-	pressedColor,
-	style,
-	iconStyle,
-	textStyle,
+	borderRadius = 50,
 	children = null,
+	style,
 	...props
 }) => {
-	if (!title && !icon && !children) {
-		return null;
-	}
-
-	const bgColor = !disabled ? palette.primary.main : palette.grey[200];
-	const iconPaddingLeft = iconRight && title ? 8 : 0;
-	const iconPaddingRight = !iconRight && title ? 8 : 0;
+	if(!children) return null;
 
 	const validatePaddingVertical = scaledForDevice(10, moderateScale);
 	const validatePaddingHorizontal = scaledForDevice(16, horizontalScale);
-	const validateFontSize = scaledForDevice(14, moderateScale);
 	const validateBorderRadius = scaledForDevice(borderRadius, moderateScale);
-	const validatePaddingRightIcon = scaledForDevice(iconPaddingRight, horizontalScale);
-	const validatePaddingLeftIcon = scaledForDevice(iconPaddingLeft, horizontalScale);
 
 	const styles = StyleSheet.create({
 		container: {
-			display: 'flex',
-			flexDirection: 'row',
 			alignItems: 'center',
 			justifyContent: 'center',
 			paddingHorizontal: validatePaddingHorizontal,
 			paddingVertical: validatePaddingVertical,
 			borderRadius: validateBorderRadius,
-			backgroundColor: bgColor,
-		},
-		icon: {
-			color: palette.base.white,
-			paddingRight: validatePaddingRightIcon,
-			paddingLeft: validatePaddingLeftIcon,
-		},
-		title: {
-			fontSize: validateFontSize,
-			fontWeight: '500',
-			textAlign: 'center',
-			color: palette.base.white,
 		},
 	});
 
-	const noChildren = () => (
-		<>
-			{icon && !iconRight && <Icon name={icon} style={[styles.icon, iconStyle]} size={24} />}
-			{title && <Text style={[styles.title, textStyle]}>{title}</Text>}
-			{icon && iconRight && <Icon name={icon} style={[styles.icon, iconStyle]} size={24} />}
-		</>
-	);
-
-	/* istanbul ignore next */
-	const PressableStyle = ({pressed}: PressableStyleProp) => {
-		const backgroundColor = pressedColor ?? palette.primary.dark;
-		const pressedBgColor = pressed ? [{backgroundColor}] : [];
-
-		return [styles.container, style, ...pressedBgColor];
-	};
-
 	return (
-		<Pressable style={PressableStyle} disabled={disabled} {...props}>
-			{children ?? noChildren}
-		</Pressable>
+		<Pressable style={[styles.container, style]} {...props}>{children}</Pressable>
 	);
 };
 
diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
new file mode 100644
index 0000000..36e24d3
--- /dev/null
+++ b/src/components/Button/index.tsx
@@ -0,0 +1,148 @@
+import React, {FC, useCallback, useState} from 'react';
+import {ViewStyle, StyleSheet, TextStyle, View} from 'react-native';
+import {moderateScale, scaledForDevice} from '../../scale';
+import BaseButton, { BaseButtonProps } from '../BaseButton';
+import Loading from '../Loading';
+import {palette} from '../../theme/palette';
+import Text from '../Text';
+import Icon from '../Icon';
+import { getMixedButtonStyles } from './utils';
+
+export enum Types {
+	Main = 'main',
+	Secondary = 'secondary',
+}
+
+export enum Variants {
+	Contained = 'contained',
+	Outlined = 'outlined',
+	Text ='text',
+}
+
+export enum Colors {
+	Primary = 'primary',
+	Secondary = 'secondary',
+	Black = 'black',
+	Success = 'success',
+	Error = 'error',
+	Warning = 'warning',
+	Alert = 'alert',
+}
+
+export enum IconPosition {
+	Left = 'left',
+	Right = 'rigth',
+	Top = 'top',
+	Bottom = 'bottom',
+}
+
+interface ButtonProps extends BaseButtonProps {
+	type: Types,
+	variant: Variants;
+	color: Colors;
+	isLoading?: boolean;
+	value?: string | null;
+	icon?: string;
+	iconPosition?: IconPosition;
+	disabled?: boolean;
+	borderRadius?: number;
+	style?: ViewStyle;
+	iconStyle?: ViewStyle;
+	textStyle?: TextStyle;
+	pressedColor?: string;
+	onPressIn?:  () => void;
+	onPressOut?:  () => void;
+}
+
+const Button: FC<ButtonProps> = ({
+	type = Types.Main,
+	variant = Variants.Contained,
+	color = Colors.Primary,
+	iconPosition = IconPosition.Left,
+	isLoading = false,
+	value = null,
+	icon = null,
+	disabled = false,
+	style,
+	iconStyle,
+	textStyle,
+	pressedColor,
+	onPressIn = () => {},
+	onPressOut = () => {},
+	...props
+}) => {
+	const [isPressed, setIsPressed] = useState<Boolean>(false);
+
+	const params = {
+		type,
+		variant,
+		color,
+		iconPosition,
+		isLoading,
+		disabled,
+	};
+	const buttonStyle = getMixedButtonStyles(params)
+
+	const pressedStyle = isPressed ? palette.primary.dark : palette.primary.main;
+	const bgColor = !disabled ? pressedStyle : palette.grey[200];
+	
+	const validateFontSize = scaledForDevice(14, moderateScale);	
+
+
+	const styles = StyleSheet.create({
+		container: {
+			backgroundColor: bgColor,
+		},
+		wrapperDirection: {
+			flexDirection: 'row',
+			justifyContent: 'center',
+			alignItems: 'center'
+		},
+		icon: {
+			color: palette.base.white,
+		},
+		text: {
+			fontSize: validateFontSize,
+			fontWeight: '500',
+			textAlign: 'center',
+			color: palette.base.white,
+		},
+	});		
+	
+	const handleOnPressIn = () => {
+		setIsPressed(true)
+		onPressIn();
+	}
+
+	const handleOnPressOut = () => {
+		setIsPressed(false);
+		onPressOut();
+	};
+
+	const LoadingCompontent = (
+		<Loading  
+			isLoading={isLoading}
+			color = {palette.primary.light}
+			size = {24}
+		/> 
+	);
+
+	const ButtonWrapper = (
+		<View style={styles.wrapperDirection}>
+			{icon && <Icon name={icon} style={[styles.icon, iconStyle]} size={24} />}
+			{value && <Text style={[styles.text, textStyle]}>{value}</Text>}
+		</View>
+	);
+
+	return (
+		<BaseButton 
+			style={[styles.container, style]}
+			onPressIn={useCallback(handleOnPressIn, [setIsPressed, isPressed])}
+			onPressOut={useCallback(handleOnPressOut, [setIsPressed, isPressed])}
+			{...props}>
+			{isLoading ? LoadingCompontent : ButtonWrapper}
+		</BaseButton>
+	);
+};
+
+export default Button;
\ No newline at end of file
diff --git a/src/components/Button/utils/index.ts b/src/components/Button/utils/index.ts
new file mode 100644
index 0000000..dc7943b
--- /dev/null
+++ b/src/components/Button/utils/index.ts
@@ -0,0 +1,3 @@
+export const getMixedButtonStyles = (params) => {
+return params
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index b807275..3e11a15 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,6 +21,7 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
+import Button from './components/Button/index';
 import FullScreenMessage from './components/FullScreenMessage';
 import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
 import * as getScale from './scale';
@@ -47,6 +48,7 @@ export {
 	ProgressBar,
 	List,
 	BaseButton,
+	Button,
 	getScale,
 	LayoutWithBottomButtons,
 	FullScreenMessage,

From 98afd40d35bb06435a90a4fba1ea6e7fd9792bf2 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Fri, 12 Apr 2024 12:32:50 -0300
Subject: [PATCH 02/20] crear componente button

---
 src/components/Button/utils/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Button/utils/index.ts b/src/components/Button/utils/index.ts
index dc7943b..fa5648a 100644
--- a/src/components/Button/utils/index.ts
+++ b/src/components/Button/utils/index.ts
@@ -1,3 +1,4 @@
 export const getMixedButtonStyles = (params) => {
+
 return params
 }
\ No newline at end of file

From 04a17f476b1183b6eed486db663b19bf90bd3359 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Fri, 12 Apr 2024 19:40:54 -0300
Subject: [PATCH 03/20] crear componente button

---
 src/components/Button/index.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 36e24d3..43a5195 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -37,9 +37,9 @@ export enum IconPosition {
 }
 
 interface ButtonProps extends BaseButtonProps {
-	type: Types,
-	variant: Variants;
-	color: Colors;
+	type?: Types,
+	variant?: Variants;
+	color?: Colors;
 	isLoading?: boolean;
 	value?: string | null;
 	icon?: string;
@@ -86,14 +86,12 @@ const Button: FC<ButtonProps> = ({
 	const pressedStyle = isPressed ? palette.primary.dark : palette.primary.main;
 	const bgColor = !disabled ? pressedStyle : palette.grey[200];
 	
-	const validateFontSize = scaledForDevice(14, moderateScale);	
-
 
 	const styles = StyleSheet.create({
 		container: {
 			backgroundColor: bgColor,
 		},
-		wrapperDirection: {
+		directionWrapper: {
 			flexDirection: 'row',
 			justifyContent: 'center',
 			alignItems: 'center'
@@ -102,7 +100,7 @@ const Button: FC<ButtonProps> = ({
 			color: palette.base.white,
 		},
 		text: {
-			fontSize: validateFontSize,
+			fontSize: scaledForDevice(14, moderateScale),
 			fontWeight: '500',
 			textAlign: 'center',
 			color: palette.base.white,
@@ -127,8 +125,8 @@ const Button: FC<ButtonProps> = ({
 		/> 
 	);
 
-	const ButtonWrapper = (
-		<View style={styles.wrapperDirection}>
+	const WrapperComponent = (
+		<View style={styles.directionWrapper}>
 			{icon && <Icon name={icon} style={[styles.icon, iconStyle]} size={24} />}
 			{value && <Text style={[styles.text, textStyle]}>{value}</Text>}
 		</View>
@@ -140,7 +138,7 @@ const Button: FC<ButtonProps> = ({
 			onPressIn={useCallback(handleOnPressIn, [setIsPressed, isPressed])}
 			onPressOut={useCallback(handleOnPressOut, [setIsPressed, isPressed])}
 			{...props}>
-			{isLoading ? LoadingCompontent : ButtonWrapper}
+			{isLoading ? LoadingCompontent : WrapperComponent}
 		</BaseButton>
 	);
 };

From 767c58cbb96b15ee3ccd5224458a44d9777dc7ea Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Fri, 12 Apr 2024 19:43:03 -0300
Subject: [PATCH 04/20] crear componente button

---
 App.tsx                              | 13 ++++-
 src/components/Button/index.tsx      | 52 +++++--------------
 src/components/Button/theme/index.ts | 77 ++++++++++++++++++++++++++++
 src/components/Button/theme/types.ts |  5 ++
 src/components/Button/utils/index.ts | 76 +++++++++++++++++++++++++--
 src/components/Button/utils/types.ts | 28 ++++++++++
 6 files changed, 208 insertions(+), 43 deletions(-)
 create mode 100644 src/components/Button/theme/index.ts
 create mode 100644 src/components/Button/theme/types.ts
 create mode 100644 src/components/Button/utils/types.ts

diff --git a/App.tsx b/App.tsx
index 2ec347d..1e83220 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,10 +1,19 @@
 import React from 'react';
 import {View} from 'react-native';
-import Button from './src/components/Button';
+import Button, { Color, Type, Variant, IconPosition } from './src/components/Button';
 
 const App = () => (
 	<View style={{padding: 20}}>
-		<Button value='Button normal' icon='box' isLoading={false} onPressIn={() => {console.log('anda mierda')}} />
+		<Button 
+			value='Button normal'
+			icon='box'
+			isLoading={false}
+			type={Type.Main}
+			variant={Variant.Contained}
+			color={Color.Success}
+			iconPosition={IconPosition.Left}
+			disabled={false}
+		/>
 	</View>
 );
 
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 43a5195..89231c6 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,28 +1,25 @@
 import React, {FC, useCallback, useState} from 'react';
 import {ViewStyle, StyleSheet, TextStyle, View} from 'react-native';
-import {moderateScale, scaledForDevice} from '../../scale';
 import BaseButton, { BaseButtonProps } from '../BaseButton';
 import Loading from '../Loading';
-import {palette} from '../../theme/palette';
 import Text from '../Text';
 import Icon from '../Icon';
 import { getMixedButtonStyles } from './utils';
 
-export enum Types {
+export enum Type {
 	Main = 'main',
 	Secondary = 'secondary',
 }
 
-export enum Variants {
+export enum Variant {
 	Contained = 'contained',
 	Outlined = 'outlined',
 	Text ='text',
 }
 
-export enum Colors {
+export enum Color {
 	Primary = 'primary',
 	Secondary = 'secondary',
-	Black = 'black',
 	Success = 'success',
 	Error = 'error',
 	Warning = 'warning',
@@ -37,9 +34,9 @@ export enum IconPosition {
 }
 
 interface ButtonProps extends BaseButtonProps {
-	type?: Types,
-	variant?: Variants;
-	color?: Colors;
+	type?: Type,
+	variant?: Variant;
+	color?: Color;
 	isLoading?: boolean;
 	value?: string | null;
 	icon?: string;
@@ -55,9 +52,9 @@ interface ButtonProps extends BaseButtonProps {
 }
 
 const Button: FC<ButtonProps> = ({
-	type = Types.Main,
-	variant = Variants.Contained,
-	color = Colors.Primary,
+	type = Type.Main,
+	variant = Variant.Contained,
+	color = Color.Primary,
 	iconPosition = IconPosition.Left,
 	isLoading = false,
 	value = null,
@@ -79,33 +76,11 @@ const Button: FC<ButtonProps> = ({
 		color,
 		iconPosition,
 		isLoading,
+		isPressed,
 		disabled,
 	};
 	const buttonStyle = getMixedButtonStyles(params)
-
-	const pressedStyle = isPressed ? palette.primary.dark : palette.primary.main;
-	const bgColor = !disabled ? pressedStyle : palette.grey[200];
-	
-
-	const styles = StyleSheet.create({
-		container: {
-			backgroundColor: bgColor,
-		},
-		directionWrapper: {
-			flexDirection: 'row',
-			justifyContent: 'center',
-			alignItems: 'center'
-		},
-		icon: {
-			color: palette.base.white,
-		},
-		text: {
-			fontSize: scaledForDevice(14, moderateScale),
-			fontWeight: '500',
-			textAlign: 'center',
-			color: palette.base.white,
-		},
-	});		
+	const styles = StyleSheet.create(buttonStyle);		
 	
 	const handleOnPressIn = () => {
 		setIsPressed(true)
@@ -120,13 +95,13 @@ const Button: FC<ButtonProps> = ({
 	const LoadingCompontent = (
 		<Loading  
 			isLoading={isLoading}
-			color = {palette.primary.light}
+			color = {buttonStyle.loadingColor}
 			size = {24}
 		/> 
 	);
 
 	const WrapperComponent = (
-		<View style={styles.directionWrapper}>
+		<View style={styles.direction}>
 			{icon && <Icon name={icon} style={[styles.icon, iconStyle]} size={24} />}
 			{value && <Text style={[styles.text, textStyle]}>{value}</Text>}
 		</View>
@@ -137,6 +112,7 @@ const Button: FC<ButtonProps> = ({
 			style={[styles.container, style]}
 			onPressIn={useCallback(handleOnPressIn, [setIsPressed, isPressed])}
 			onPressOut={useCallback(handleOnPressOut, [setIsPressed, isPressed])}
+			disabled={disabled || isLoading}
 			{...props}>
 			{isLoading ? LoadingCompontent : WrapperComponent}
 		</BaseButton>
diff --git a/src/components/Button/theme/index.ts b/src/components/Button/theme/index.ts
new file mode 100644
index 0000000..cd1b706
--- /dev/null
+++ b/src/components/Button/theme/index.ts
@@ -0,0 +1,77 @@
+import { alert, base, black, error, grey, primary, success, warning} from '../../../theme/palette';
+import type { SelectedColor } from './types';
+
+export const themeColors = {
+    primary: {
+        light: base.white,
+        main: primary.main,
+        dark: primary.dark,
+    },
+    secondary: {
+        light: base.white,
+        main: black.main,
+        dark: black.dark,
+    },
+    success: {
+        light: base.white,
+        main: success.main,
+        dark: success.dark,
+    },
+    error: {
+        light: base.white,
+        main: error.main,
+        dark: error.dark,
+    },
+    warning: {
+        light: base.white,
+        main: warning.main,
+        dark: warning.dark,
+    },
+    alert: {
+        light: base.white,
+        main: alert.main,
+        dark: alert.dark,
+    }
+}
+
+export const mixedColors = (selectedColor: SelectedColor) => {
+    return {
+        mainBgColor: {
+            contained:  selectedColor.main,
+            outlined: selectedColor.light,
+            text: 'transparent'
+        },
+        mainBorderColor: {
+            contained:  'transparent',
+            outlined: grey[300],
+            text: 'transparent'
+        },
+        pressedBgColor: {
+            contained:  selectedColor.dark,
+            outlined: selectedColor.light,
+            text: 'transparent'
+        },
+        pressedBorderColor: {
+            contained:  'transparent',
+            outlined: selectedColor.main,
+            text: 'transparent'
+        },
+        disabledBgColor: {
+            contained:  grey[200],
+            outlined: grey[100],
+            text: 'transparent'
+        },
+        disabledBorderColor: {
+            main: {
+                contained: 'transparent',
+                outlined: 'transparent',
+                text: 'transparent'
+            },
+            secondary: {
+                contained: 'transparent',
+                outlined: grey[300],
+                text: 'transparent'
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/Button/theme/types.ts b/src/components/Button/theme/types.ts
new file mode 100644
index 0000000..3b7d52b
--- /dev/null
+++ b/src/components/Button/theme/types.ts
@@ -0,0 +1,5 @@
+export interface SelectedColor {
+    light: string,
+    main: string,
+    dark: string,
+}
\ No newline at end of file
diff --git a/src/components/Button/utils/index.ts b/src/components/Button/utils/index.ts
index fa5648a..202c5d7 100644
--- a/src/components/Button/utils/index.ts
+++ b/src/components/Button/utils/index.ts
@@ -1,4 +1,74 @@
-export const getMixedButtonStyles = (params) => {
+import { moderateScale, scaledForDevice } from "../../../scale"
+import { palette } from "../../../theme/palette"
+import { themeColors, mixedColors } from "../theme";
+import type { ContainerStyle, Params, ReturnStyles } from "./types";
 
-return params
-}
\ No newline at end of file
+const containerStyle = ({isPressed, disabled, isLoading, color, variant, type}: ContainerStyle) => {
+	const selectedColor = themeColors[color];
+	const {
+		mainBgColor,
+		mainBorderColor,
+		pressedBgColor,
+		pressedBorderColor,
+		disabledBgColor,
+		disabledBorderColor
+	} = mixedColors(selectedColor);
+
+	// main and pressed button colors
+	const mainColor = isPressed ? pressedBgColor[variant] : mainBgColor[variant];
+	const borderColor = isPressed ? pressedBorderColor[variant] : mainBorderColor[variant];
+	
+	// disabled button colors
+	const backgroundDisabled = disabledBgColor[variant]
+	const borderDisabled = disabledBorderColor[type][variant]
+
+	const selectHeight = {
+		main: scaledForDevice(50, moderateScale),
+		secondary: scaledForDevice(42, moderateScale),
+	}
+
+	const height = variant === 'text' ? scaledForDevice(35, moderateScale) : selectHeight[type]
+
+	return {
+		borderWidth: 1,
+		borderColor: disabled || isLoading ? borderDisabled : borderColor,
+		backgroundColor: disabled || isLoading ? backgroundDisabled : mainColor,
+		// elevation: 5,
+		height,
+	}
+}
+
+const directionWrapperStyle = (params = {}) => {
+
+
+	
+	return {
+		flexDirection: 'row',
+		justifyContent: 'center',
+		alignItems: 'center'
+	}
+}
+
+const iconStyle = (params = {}) => {
+	return {
+		color: palette.base.white,
+	}
+}
+
+const textStyle = (params = {}) => {
+	return  {
+		fontSize: scaledForDevice(14, moderateScale),
+		fontWeight: '500',
+		textAlign: 'center',
+		color: palette.base.white,
+	}
+}
+
+
+export const getMixedButtonStyles = (params: Params): ReturnStyles  => ({
+    container: containerStyle(params),
+	direction: directionWrapperStyle(params),
+	icon: iconStyle(params),
+	text: textStyle(params),
+	loadingColor: themeColors[params.color].main,
+})
diff --git a/src/components/Button/utils/types.ts b/src/components/Button/utils/types.ts
new file mode 100644
index 0000000..4cd052b
--- /dev/null
+++ b/src/components/Button/utils/types.ts
@@ -0,0 +1,28 @@
+import type { Color, IconPosition, Type, Variant } from "../";
+
+export interface Params {
+	type: Type,
+	variant: Variant,
+	color: Color,
+	iconPosition: IconPosition,
+	isLoading: Boolean,
+	isPressed: Boolean,
+	disabled: Boolean,
+}
+
+export interface ReturnStyles {
+	container: object;
+	direction: object;
+	icon: object;
+	text: object;
+	loadingColor: any;
+}
+
+export interface ContainerStyle {
+	isPressed: Boolean,
+	disabled: Boolean,
+	isLoading: Boolean,
+	color: Color,
+	variant: Variant,
+	type: Type,
+}
\ No newline at end of file

From a5d3718935bc458c7dd27a7b2389a5b1934037f6 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Mon, 15 Apr 2024 17:14:33 -0300
Subject: [PATCH 05/20] crear componente button

---
 App.tsx                                       |   7 +-
 src/components/BaseButton/index.tsx           |   6 +-
 src/components/Button/constants/index.ts      |  13 ++
 src/components/Button/index.test.tsx          |   3 +
 src/components/Button/index.tsx               |   5 +-
 src/components/Button/theme/configs/index.ts  | 136 ++++++++++++++++++
 src/components/Button/theme/index.ts          |  45 +-----
 src/components/Button/theme/types.ts          |   5 -
 .../Button/{utils/types.ts => types/index.ts} |  26 ++++
 src/components/Button/utils/index.ts          | 127 +++++++++-------
 10 files changed, 265 insertions(+), 108 deletions(-)
 create mode 100644 src/components/Button/constants/index.ts
 create mode 100644 src/components/Button/theme/configs/index.ts
 delete mode 100644 src/components/Button/theme/types.ts
 rename src/components/Button/{utils/types.ts => types/index.ts} (53%)

diff --git a/App.tsx b/App.tsx
index 1e83220..40f986c 100644
--- a/App.tsx
+++ b/App.tsx
@@ -9,10 +9,11 @@ const App = () => (
 			icon='box'
 			isLoading={false}
 			type={Type.Main}
-			variant={Variant.Contained}
-			color={Color.Success}
-			iconPosition={IconPosition.Left}
+			variant={Variant.Outlined}
+			color={Color.Primary}
+			// iconPosition={IconPosition.Right}
 			disabled={false}
+			style={{width: '100%'}}
 		/>
 	</View>
 );
diff --git a/src/components/BaseButton/index.tsx b/src/components/BaseButton/index.tsx
index 229041b..9259997 100644
--- a/src/components/BaseButton/index.tsx
+++ b/src/components/BaseButton/index.tsx
@@ -9,23 +9,19 @@ export interface BaseButtonProps extends PressableProps {
 }
 
 const BaseButton: FC<BaseButtonProps> = ({
-	borderRadius = 50,
+	borderRadius = 0,
 	children = null,
 	style,
 	...props
 }) => {
 	if(!children) return null;
 
-	const validatePaddingVertical = scaledForDevice(10, moderateScale);
-	const validatePaddingHorizontal = scaledForDevice(16, horizontalScale);
 	const validateBorderRadius = scaledForDevice(borderRadius, moderateScale);
 
 	const styles = StyleSheet.create({
 		container: {
 			alignItems: 'center',
 			justifyContent: 'center',
-			paddingHorizontal: validatePaddingHorizontal,
-			paddingVertical: validatePaddingVertical,
 			borderRadius: validateBorderRadius,
 		},
 	});
diff --git a/src/components/Button/constants/index.ts b/src/components/Button/constants/index.ts
new file mode 100644
index 0000000..3749844
--- /dev/null
+++ b/src/components/Button/constants/index.ts
@@ -0,0 +1,13 @@
+const verticalHeights = ['top', 'bottom'];
+const defaultColor = 'primary';
+const defaultType = 'main';
+const defaultVariant = 'contained';
+const defaultIconPosition = 'left';
+
+export {
+    verticalHeights,
+    defaultColor,
+    defaultType,
+    defaultVariant,
+    defaultIconPosition
+}
\ No newline at end of file
diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx
index e69de29..5568dfe 100644
--- a/src/components/Button/index.test.tsx
+++ b/src/components/Button/index.test.tsx
@@ -0,0 +1,3 @@
+describe('Button', () => {
+    /* global expect */
+});
\ No newline at end of file
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 89231c6..e12b4b7 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -28,7 +28,7 @@ export enum Color {
 
 export enum IconPosition {
 	Left = 'left',
-	Right = 'rigth',
+	Right = 'right',
 	Top = 'top',
 	Bottom = 'bottom',
 }
@@ -69,6 +69,7 @@ const Button: FC<ButtonProps> = ({
 	...props
 }) => {
 	const [isPressed, setIsPressed] = useState<Boolean>(false);
+	const hasIconAndText = !!icon && !!value;
 
 	const params = {
 		type,
@@ -78,6 +79,7 @@ const Button: FC<ButtonProps> = ({
 		isLoading,
 		isPressed,
 		disabled,
+		hasIconAndText,
 	};
 	const buttonStyle = getMixedButtonStyles(params)
 	const styles = StyleSheet.create(buttonStyle);		
@@ -113,6 +115,7 @@ const Button: FC<ButtonProps> = ({
 			onPressIn={useCallback(handleOnPressIn, [setIsPressed, isPressed])}
 			onPressOut={useCallback(handleOnPressOut, [setIsPressed, isPressed])}
 			disabled={disabled || isLoading}
+			borderRadius={50}
 			{...props}>
 			{isLoading ? LoadingCompontent : WrapperComponent}
 		</BaseButton>
diff --git a/src/components/Button/theme/configs/index.ts b/src/components/Button/theme/configs/index.ts
new file mode 100644
index 0000000..b61edac
--- /dev/null
+++ b/src/components/Button/theme/configs/index.ts
@@ -0,0 +1,136 @@
+import { moderateScale, scaledForDevice } from '../../../../scale';
+import { base, black, grey} from '../../../../theme/palette';
+import { SelectedColor } from "../../types"
+
+export const colorConfig = (selectedColor: SelectedColor) => {
+    return {
+        main: {
+            background: {
+                contained:  selectedColor.main,
+                outlined: selectedColor.light,
+                text: 'transparent'
+            },
+            border: {
+                contained:  'transparent',
+                outlined: grey[300],
+                text: 'transparent'
+            },
+            text: {
+                main: {
+                    contained:  base.white,
+                    outlined: black.main,
+                    text: selectedColor.main,
+                },
+                secondary: {
+                    contained:  base.white,
+                    outlined: selectedColor.main,
+                    text: black.main,  
+                }
+            },
+        },
+        pressed: {
+            background: {
+                contained:  selectedColor.dark,
+                outlined: selectedColor.light,
+                text: grey[100],
+            },
+            border: {
+                contained:  'transparent',
+                outlined: selectedColor.main,
+                text: 'transparent',
+            },
+            text: {
+                main: {
+                    contained:  base.white,
+                    outlined: black.main,
+                    text: selectedColor.main,
+                },
+                secondary: {
+                    contained:  base.white,
+                    outlined: selectedColor.main,
+                    text: selectedColor.dark,  
+                }
+            }
+        },
+        disabled: {
+            background: {
+                contained:  grey[200],
+                outlined: grey[100],
+                text: 'transparent'
+            },
+            border: {
+                main: {
+                    contained: 'transparent',
+                    outlined: 'transparent',
+                    text: 'transparent'
+                },
+                secondary: {
+                    contained: 'transparent',
+                    outlined: grey[300],
+                    text: 'transparent'
+                }
+            },
+            text: {
+                main: {
+                    contained:  grey[400],
+                    outlined: grey[300],
+                    text: grey[300],
+                },
+                secondary: {
+                    contained:  grey[400],
+                    outlined: grey[300],
+                    text: grey[300],
+                }
+            },
+        },
+    }
+}
+
+export const stlyeConfig = {
+    container: {
+        height: {
+            main: scaledForDevice(50, moderateScale),
+            secondary: scaledForDevice(42, moderateScale),
+        },
+        shadow : {
+            // android
+            shadowColor: '#000',
+            elevation: 5,
+            // IOS
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            shadowOffset: {
+            width: 0,
+            height: scaledForDevice(3, moderateScale),
+            },
+        }
+    },
+    directionWrapper: {
+        center: {
+            justifyContent: 'center',
+            alignItems: 'center'
+	    },
+        flexDirection: {
+            left: 'row',
+            right: 'row-reverse',
+            top: 'column',
+            bottom: 'column-reverse',
+        }
+    },
+    text: {
+		fontWeight: '500',
+		textAlign: 'center',
+    },
+    icon: {
+        margin: {
+            top: {},
+            bottom: {},
+            left: {
+                right: scaledForDevice(8, moderateScale)
+            },
+            right: {
+                marginLeft: scaledForDevice(8, moderateScale)
+            },
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/Button/theme/index.ts b/src/components/Button/theme/index.ts
index cd1b706..9bab965 100644
--- a/src/components/Button/theme/index.ts
+++ b/src/components/Button/theme/index.ts
@@ -1,5 +1,4 @@
-import { alert, base, black, error, grey, primary, success, warning} from '../../../theme/palette';
-import type { SelectedColor } from './types';
+import { alert, base, black, error, primary, success, warning} from '../../../theme/palette';
 
 export const themeColors = {
     primary: {
@@ -32,46 +31,4 @@ export const themeColors = {
         main: alert.main,
         dark: alert.dark,
     }
-}
-
-export const mixedColors = (selectedColor: SelectedColor) => {
-    return {
-        mainBgColor: {
-            contained:  selectedColor.main,
-            outlined: selectedColor.light,
-            text: 'transparent'
-        },
-        mainBorderColor: {
-            contained:  'transparent',
-            outlined: grey[300],
-            text: 'transparent'
-        },
-        pressedBgColor: {
-            contained:  selectedColor.dark,
-            outlined: selectedColor.light,
-            text: 'transparent'
-        },
-        pressedBorderColor: {
-            contained:  'transparent',
-            outlined: selectedColor.main,
-            text: 'transparent'
-        },
-        disabledBgColor: {
-            contained:  grey[200],
-            outlined: grey[100],
-            text: 'transparent'
-        },
-        disabledBorderColor: {
-            main: {
-                contained: 'transparent',
-                outlined: 'transparent',
-                text: 'transparent'
-            },
-            secondary: {
-                contained: 'transparent',
-                outlined: grey[300],
-                text: 'transparent'
-            }
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/components/Button/theme/types.ts b/src/components/Button/theme/types.ts
deleted file mode 100644
index 3b7d52b..0000000
--- a/src/components/Button/theme/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface SelectedColor {
-    light: string,
-    main: string,
-    dark: string,
-}
\ No newline at end of file
diff --git a/src/components/Button/utils/types.ts b/src/components/Button/types/index.ts
similarity index 53%
rename from src/components/Button/utils/types.ts
rename to src/components/Button/types/index.ts
index 4cd052b..a245546 100644
--- a/src/components/Button/utils/types.ts
+++ b/src/components/Button/types/index.ts
@@ -1,5 +1,11 @@
 import type { Color, IconPosition, Type, Variant } from "../";
 
+export interface SelectedColor {
+    light: string,
+    main: string,
+    dark: string,
+}
+
 export interface Params {
 	type: Type,
 	variant: Variant,
@@ -25,4 +31,24 @@ export interface ContainerStyle {
 	color: Color,
 	variant: Variant,
 	type: Type,
+	iconPosition: IconPosition,
+}
+
+export interface TextStyle {
+	type: Type,
+	variant: Variant,
+	color: Color,
+	disabled: Boolean,
+	isLoading: Boolean,
+	isPressed: Boolean,
+	hasIconAndText?: Boolean,
+	iconPosition: IconPosition,
+}
+
+export interface LoadingStyle {
+	color: Color,
+}
+
+export interface DirectionStyle {
+	iconPosition: IconPosition,
 }
\ No newline at end of file
diff --git a/src/components/Button/utils/index.ts b/src/components/Button/utils/index.ts
index 202c5d7..30c19fc 100644
--- a/src/components/Button/utils/index.ts
+++ b/src/components/Button/utils/index.ts
@@ -1,74 +1,101 @@
 import { moderateScale, scaledForDevice } from "../../../scale"
-import { palette } from "../../../theme/palette"
-import { themeColors, mixedColors } from "../theme";
-import type { ContainerStyle, Params, ReturnStyles } from "./types";
-
-const containerStyle = ({isPressed, disabled, isLoading, color, variant, type}: ContainerStyle) => {
-	const selectedColor = themeColors[color];
-	const {
-		mainBgColor,
-		mainBorderColor,
-		pressedBgColor,
-		pressedBorderColor,
-		disabledBgColor,
-		disabledBorderColor
-	} = mixedColors(selectedColor);
+import { colorConfig, stlyeConfig } from "../theme/configs";
+import { themeColors } from "../theme";
+import { defaultColor, defaultIconPosition, defaultType, defaultVariant, verticalHeights } from '../constants';
+import type { ContainerStyle, DirectionStyle,  LoadingStyle,  Params, ReturnStyles, TextStyle } from "../types";
 
-	// main and pressed button colors
-	const mainColor = isPressed ? pressedBgColor[variant] : mainBgColor[variant];
-	const borderColor = isPressed ? pressedBorderColor[variant] : mainBorderColor[variant];
+const containerStyle = ({isPressed, disabled: isDisabled, isLoading, color, variant, type, iconPosition}: ContainerStyle) => {
+	const selectedColor = themeColors[color] || themeColors[defaultColor];
+	const {main, pressed, disabled} = colorConfig(selectedColor);
 	
-	// disabled button colors
-	const backgroundDisabled = disabledBgColor[variant]
-	const borderDisabled = disabledBorderColor[type][variant]
+	const {container} = stlyeConfig;
 
-	const selectHeight = {
-		main: scaledForDevice(50, moderateScale),
-		secondary: scaledForDevice(42, moderateScale),
-	}
+	const mainBgColor = main.background[variant] || main.background[defaultVariant];
+	const mainBorderColor = main.border[variant] || main.border[defaultVariant];
 
-	const height = variant === 'text' ? scaledForDevice(35, moderateScale) : selectHeight[type]
+	const pressedBgColor = pressed.background[variant] || pressed.background[defaultVariant];
+	const pressedBorderColor = pressed.border[variant] || pressed.border[defaultVariant];
+	
+	const disabledBgColor = disabled.background[variant] || disabled.background[defaultVariant];
+	const disabledBorderColor = disabled.border[type][variant] || disabled.border[defaultType][defaultVariant];
+	
+	const containerHeight = container.height[type] || container.height[defaultType];
+	const containerShadow = container.shadow;
+
+	// main and pressed button colors
+	const mainColor = isPressed ? pressedBgColor : mainBgColor;
+	const borderColor = isPressed ? pressedBorderColor : mainBorderColor;
+
+	// validation of height
+	const hasVerticalHeight = verticalHeights.includes(iconPosition);
+
+	// validation of shadow
+	const hasShadow = type === 'secondary' && variant === 'outlined';
 
 	return {
 		borderWidth: 1,
-		borderColor: disabled || isLoading ? borderDisabled : borderColor,
-		backgroundColor: disabled || isLoading ? backgroundDisabled : mainColor,
-		// elevation: 5,
-		height,
+		borderColor: isDisabled || isLoading ? disabledBorderColor : borderColor,
+		backgroundColor: isDisabled || isLoading ? disabledBgColor : mainColor,
+		...(!hasVerticalHeight && {height: variant !== 'text' ? containerHeight : scaledForDevice(35, moderateScale)}),
+		...(hasVerticalHeight && {padding: scaledForDevice(10, moderateScale)}),
+		...(hasShadow && containerShadow)
 	}
-}
+};
 
-const directionWrapperStyle = (params = {}) => {
+const directionWrapperStyle = ({iconPosition}: DirectionStyle ) => {
+	const {directionWrapper} = stlyeConfig;
 
+	const flexDirection = 
+		directionWrapper.flexDirection[iconPosition] || directionWrapper.flexDirection[defaultIconPosition];
+	const flexCenter = directionWrapper.center || {};
 
-	
 	return {
-		flexDirection: 'row',
-		justifyContent: 'center',
-		alignItems: 'center'
+		...flexCenter,
+		flexDirection,
 	}
-}
+};
+
+const baseTextStyle = ({type, variant, color, disabled: isDisabled, isLoading, isPressed}: TextStyle) => {
+	const selectedColor = themeColors[color] || themeColors[defaultColor];
+	const {main, pressed, disabled} = colorConfig(selectedColor);
+	
+	const {text: textStyle} = stlyeConfig;
+
+	const mainTextColor = main.text[type][variant] || main.text[defaultType][defaultVariant];
+	const pressedTextColor = pressed.text[type][variant] || pressed.text[defaultType][defaultVariant];
+	const disabledTextColor = disabled.text[type][variant] || disabled.text[defaultType][defaultVariant];
+
+	const mainColor = isPressed ? pressedTextColor : mainTextColor;
 
-const iconStyle = (params = {}) => {
 	return {
-		color: palette.base.white,
+		...textStyle,
+		color: isDisabled || isLoading ? disabledTextColor : mainColor,
 	}
-}
-
-const textStyle = (params = {}) => {
-	return  {
-		fontSize: scaledForDevice(14, moderateScale),
-		fontWeight: '500',
-		textAlign: 'center',
-		color: palette.base.white,
+};
+const textStyle = (params : TextStyle) => ({
+	...baseTextStyle(params),
+	fontSize: scaledForDevice(14, moderateScale),
+});
+const iconStyle  = (params: TextStyle) => {
+	const {hasIconAndText, iconPosition} = params;
+	const {icon} = stlyeConfig;
+
+	return {
+		...baseTextStyle(params),
+		...(!!hasIconAndText && icon.margin[iconPosition] || {})
 	}
-}
+};
+
+const loadingColor = ({color}: LoadingStyle) => {
+	const selectedColor = themeColors[color] || themeColors[defaultColor];
+	return selectedColor.main;
+};
 
 
 export const getMixedButtonStyles = (params: Params): ReturnStyles  => ({
     container: containerStyle(params),
 	direction: directionWrapperStyle(params),
-	icon: iconStyle(params),
 	text: textStyle(params),
-	loadingColor: themeColors[params.color].main,
-})
+	icon: iconStyle(params),
+	loadingColor: loadingColor(params),
+});

From 4d9f0830dcf3d837b2ec02bb28d2fe29f3d8955f Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Mon, 15 Apr 2024 18:07:34 -0300
Subject: [PATCH 06/20] crear componente button

---
 App.tsx                                       | 19 +++++++++++++++----
 src/components/Button/index.tsx               |  3 ++-
 src/components/Button/theme/configs/index.ts  | 12 ++++++------
 src/components/Button/utils/index.ts          |  3 ++-
 .../Select/Components/Modal/index.tsx         |  7 +++----
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/App.tsx b/App.tsx
index 40f986c..74d3298 100644
--- a/App.tsx
+++ b/App.tsx
@@ -3,17 +3,28 @@ import {View} from 'react-native';
 import Button, { Color, Type, Variant, IconPosition } from './src/components/Button';
 
 const App = () => (
-	<View style={{padding: 20}}>
+	<View style={{padding: 20, flexDirection: 'row'}}>
 		<Button 
-			value='Button normal'
+			// value='CANCEL'
 			icon='box'
 			isLoading={false}
 			type={Type.Main}
-			variant={Variant.Outlined}
+			variant={Variant.Contained}
 			color={Color.Primary}
 			// iconPosition={IconPosition.Right}
 			disabled={false}
-			style={{width: '100%'}}
+			// style={}
+		/>
+				<Button 
+			value='Button'
+			icon='box'
+			isLoading={false}
+			type={Type.Main}
+			variant={Variant.Outlined}
+			color={Color.Primary}
+			iconPosition={IconPosition.Left}
+			disabled={false}
+			style={{marginLeft: 6}}
 		/>
 	</View>
 );
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index e12b4b7..1556649 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -70,6 +70,7 @@ const Button: FC<ButtonProps> = ({
 }) => {
 	const [isPressed, setIsPressed] = useState<Boolean>(false);
 	const hasIconAndText = !!icon && !!value;
+	const borderRadius = variant === 'text' ? 6 : 50;
 
 	const params = {
 		type,
@@ -115,7 +116,7 @@ const Button: FC<ButtonProps> = ({
 			onPressIn={useCallback(handleOnPressIn, [setIsPressed, isPressed])}
 			onPressOut={useCallback(handleOnPressOut, [setIsPressed, isPressed])}
 			disabled={disabled || isLoading}
-			borderRadius={50}
+			borderRadius={borderRadius}
 			{...props}>
 			{isLoading ? LoadingCompontent : WrapperComponent}
 		</BaseButton>
diff --git a/src/components/Button/theme/configs/index.ts b/src/components/Button/theme/configs/index.ts
index b61edac..e49e604 100644
--- a/src/components/Button/theme/configs/index.ts
+++ b/src/components/Button/theme/configs/index.ts
@@ -1,5 +1,5 @@
 import { moderateScale, scaledForDevice } from '../../../../scale';
-import { base, black, grey} from '../../../../theme/palette';
+import { base, black, grey, white} from '../../../../theme/palette';
 import { SelectedColor } from "../../types"
 
 export const colorConfig = (selectedColor: SelectedColor) => {
@@ -19,12 +19,12 @@ export const colorConfig = (selectedColor: SelectedColor) => {
                 main: {
                     contained:  base.white,
                     outlined: black.main,
-                    text: selectedColor.main,
+                    text: black.main,
                 },
                 secondary: {
                     contained:  base.white,
                     outlined: selectedColor.main,
-                    text: black.main,  
+                    text: selectedColor.main,  
                 }
             },
         },
@@ -32,7 +32,7 @@ export const colorConfig = (selectedColor: SelectedColor) => {
             background: {
                 contained:  selectedColor.dark,
                 outlined: selectedColor.light,
-                text: grey[100],
+                text: white.main,
             },
             border: {
                 contained:  'transparent',
@@ -43,7 +43,7 @@ export const colorConfig = (selectedColor: SelectedColor) => {
                 main: {
                     contained:  base.white,
                     outlined: black.main,
-                    text: selectedColor.main,
+                    text: black.main,
                 },
                 secondary: {
                     contained:  base.white,
@@ -126,7 +126,7 @@ export const stlyeConfig = {
             top: {},
             bottom: {},
             left: {
-                right: scaledForDevice(8, moderateScale)
+                marginRight: scaledForDevice(8, moderateScale)
             },
             right: {
                 marginLeft: scaledForDevice(8, moderateScale)
diff --git a/src/components/Button/utils/index.ts b/src/components/Button/utils/index.ts
index 30c19fc..3d6cfac 100644
--- a/src/components/Button/utils/index.ts
+++ b/src/components/Button/utils/index.ts
@@ -36,8 +36,9 @@ const containerStyle = ({isPressed, disabled: isDisabled, isLoading, color, vari
 		borderWidth: 1,
 		borderColor: isDisabled || isLoading ? disabledBorderColor : borderColor,
 		backgroundColor: isDisabled || isLoading ? disabledBgColor : mainColor,
+		paddingHorizontal: scaledForDevice(type === 'main' ? 12 : 8, moderateScale) ,
+		...(hasVerticalHeight && {paddingVertical: scaledForDevice(10, moderateScale)}),
 		...(!hasVerticalHeight && {height: variant !== 'text' ? containerHeight : scaledForDevice(35, moderateScale)}),
-		...(hasVerticalHeight && {padding: scaledForDevice(10, moderateScale)}),
 		...(hasShadow && containerShadow)
 	}
 };
diff --git a/src/components/Select/Components/Modal/index.tsx b/src/components/Select/Components/Modal/index.tsx
index dee184a..4d84eb8 100644
--- a/src/components/Select/Components/Modal/index.tsx
+++ b/src/components/Select/Components/Modal/index.tsx
@@ -1,9 +1,9 @@
 import React, {FC} from 'react';
 import {Modal as ModalComponent, StyleSheet, View} from 'react-native';
 import {base, primary, white} from '../../../../theme/palette';
-import BaseButton from '../../../BaseButton';
 import {DropdownProps} from '../Dropdown';
 import {moderateScale, scaledForDevice} from '../../../../scale';
+import Button from '../../../Button';
 
 interface ModalProps extends DropdownProps {
 	isMulti: boolean;
@@ -67,9 +67,8 @@ const Modal: FC<ModalProps> = ({show, setShow, isMulti, modalAcceptText, childre
 					<View style={styles.containerModal}>{children}</View>
 					{isMulti && (
 						<View style={styles.buttonWrapper}>
-							<BaseButton
-								title={modalAcceptText}
-								iconRight={false}
+							<Button
+								value={modalAcceptText}
 								pressedColor={white.main}
 								style={styles.button}
 								textStyle={styles.buttonText}

From b6336734b634583991efa85aa5f6a1e99f2cc490 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Tue, 16 Apr 2024 14:12:24 -0300
Subject: [PATCH 07/20] crear componente button - falta storybooks

---
 App.tsx                                       |  1 +
 src/components/BaseButton/index.test.tsx      |  2 +-
 src/components/Button/constants/index.ts      |  8 +-
 src/components/Button/index.test.tsx          | 81 ++++++++++++++++-
 src/components/Button/index.tsx               |  9 +-
 src/components/Button/types/index.ts          |  1 +
 src/components/Button/utils/index.test.ts     | 88 +++++++++++++++++++
 src/components/Button/utils/index.ts          | 82 ++++++++++++-----
 .../Select/Components/Modal/index.tsx         | 11 +--
 9 files changed, 246 insertions(+), 37 deletions(-)
 create mode 100644 src/components/Button/utils/index.test.ts

diff --git a/App.tsx b/App.tsx
index 74d3298..ce48de1 100644
--- a/App.tsx
+++ b/App.tsx
@@ -25,6 +25,7 @@ const App = () => (
 			iconPosition={IconPosition.Left}
 			disabled={false}
 			style={{marginLeft: 6}}
+			iconStyle={{color: 'red', fontSize: 30}}
 		/>
 	</View>
 );
diff --git a/src/components/BaseButton/index.test.tsx b/src/components/BaseButton/index.test.tsx
index eea8c3b..f6b6e15 100644
--- a/src/components/BaseButton/index.test.tsx
+++ b/src/components/BaseButton/index.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {create} from 'react-test-renderer';
-import {View, Text, Pressable} from 'react-native';
+import {View, Text} from 'react-native';
 import BaseButton from './';
 
 const validData = {
diff --git a/src/components/Button/constants/index.ts b/src/components/Button/constants/index.ts
index 3749844..b6148dd 100644
--- a/src/components/Button/constants/index.ts
+++ b/src/components/Button/constants/index.ts
@@ -1,4 +1,7 @@
 const verticalHeights = ['top', 'bottom'];
+const validTypes= ['main', 'secondary']
+const validVariants = ['contained', 'outlined', 'text'];
+const validIconPositions = ['top', 'bottom', 'left', 'right'];
 const defaultColor = 'primary';
 const defaultType = 'main';
 const defaultVariant = 'contained';
@@ -6,8 +9,11 @@ const defaultIconPosition = 'left';
 
 export {
     verticalHeights,
+    validTypes,
+    validVariants,
+    validIconPositions,
     defaultColor,
     defaultType,
     defaultVariant,
-    defaultIconPosition
+    defaultIconPosition,
 }
\ No newline at end of file
diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx
index 5568dfe..67ad043 100644
--- a/src/components/Button/index.test.tsx
+++ b/src/components/Button/index.test.tsx
@@ -1,3 +1,80 @@
-describe('Button', () => {
-    /* global expect */
+import React from 'react';
+import {create} from 'react-test-renderer';
+import {Text} from 'react-native';
+import Icon from '../Icon';
+import BaseButton from '../BaseButton';
+import Loading from '../Loading';
+import Button, { Color, IconPosition, Type, Variant } from './';
+
+const validData = {
+	type: Type.Main,
+	variant: Variant.Contained,
+	color: Color.Primary,
+	isLoading: true,
+	value: 'Button Test',
+	icon: 'box',
+	iconPosition: IconPosition.Left,
+};
+
+const setIsPressed = jest.fn();
+const spyUseState = jest.spyOn(React, 'useState');
+jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+
+describe('Button component', () => {
+    describe('returns null', () => {
+        it('when value and icon props are not passed to the Button component', () => {
+			const {toJSON} = create(<Button />);
+			expect(toJSON()).toBeNull();
+        });
+    });
+
+    describe('it renders correctly', () => {
+        it('when it has valie as minimum prop', () => {
+			const {root} = create(<Button value={validData.value} />);
+			const TitleComp = root.findByType(Text);
+            const {children} = TitleComp.props;
+
+            expect(children).toEqual(validData.value);
+        });
+
+
+        it('when it has icon as minimum prop', () => {
+			const {root} = create(<Button icon={validData.icon} />);
+			const IconComp = root.findByType(Icon);
+            const {name} = IconComp.props;
+
+            expect(name).toEqual(validData.icon);
+        });
+
+        it('when it is pressed', () => {
+            spyUseState.mockReturnValueOnce([false, setIsPressed]);
+
+			const {root} = create(
+                <Button 
+                    type={Type.Main}
+                    variant={Variant.Contained}
+                    color={Color.Primary}
+                    value="Button Test"
+                    icon="box"
+                    iconPosition={IconPosition.Left}
+                />);
+
+            const ButtonComp = root.findByType(BaseButton)
+            const {onPressIn, onPressOut} = ButtonComp.props;
+           
+            onPressIn();
+            onPressOut();
+           
+            expect(setIsPressed).toBeCalledTimes(2);
+        });
+
+        it('when isLoading is true, show an loading spinner', () => {
+            const {root} = create(<Button icon={validData.icon} isLoading={validData.isLoading} />);
+            const LoadingComp = root.findByType(Loading)
+            const {isLoading} = LoadingComp.props;
+
+            expect(isLoading).toEqual(validData.isLoading);
+        })
+    }); 
 });
\ No newline at end of file
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 1556649..132eef1 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -42,11 +42,9 @@ interface ButtonProps extends BaseButtonProps {
 	icon?: string;
 	iconPosition?: IconPosition;
 	disabled?: boolean;
-	borderRadius?: number;
 	style?: ViewStyle;
-	iconStyle?: ViewStyle;
+	iconStyle?: TextStyle;
 	textStyle?: TextStyle;
-	pressedColor?: string;
 	onPressIn?:  () => void;
 	onPressOut?:  () => void;
 }
@@ -63,11 +61,12 @@ const Button: FC<ButtonProps> = ({
 	style,
 	iconStyle,
 	textStyle,
-	pressedColor,
 	onPressIn = () => {},
 	onPressOut = () => {},
 	...props
 }) => {
+	if(!icon && !value) return null;
+
 	const [isPressed, setIsPressed] = useState<Boolean>(false);
 	const hasIconAndText = !!icon && !!value;
 	const borderRadius = variant === 'text' ? 6 : 50;
@@ -86,7 +85,7 @@ const Button: FC<ButtonProps> = ({
 	const styles = StyleSheet.create(buttonStyle);		
 	
 	const handleOnPressIn = () => {
-		setIsPressed(true)
+		setIsPressed(true);
 		onPressIn();
 	}
 
diff --git a/src/components/Button/types/index.ts b/src/components/Button/types/index.ts
index a245546..60fbf56 100644
--- a/src/components/Button/types/index.ts
+++ b/src/components/Button/types/index.ts
@@ -14,6 +14,7 @@ export interface Params {
 	isLoading: Boolean,
 	isPressed: Boolean,
 	disabled: Boolean,
+	hasIconAndText?: Boolean,
 }
 
 export interface ReturnStyles {
diff --git a/src/components/Button/utils/index.test.ts b/src/components/Button/utils/index.test.ts
new file mode 100644
index 0000000..4f352c5
--- /dev/null
+++ b/src/components/Button/utils/index.test.ts
@@ -0,0 +1,88 @@
+import { getMixedButtonStyles } from ".";
+import { Color, IconPosition, Type, Variant } from "..";
+
+const props = {
+	type: Type.Secondary,
+	variant: Variant.Outlined,
+	color: Color.Secondary,
+	iconPosition: IconPosition.Top,
+	isLoading: true,
+	isPressed: true,
+	disabled: true,
+	hasIconAndText: true,
+}
+
+const failedProps = {
+	type: undefined,
+	variant: undefined,
+	color: undefined,
+	iconPosition: undefined,
+	isLoading: false,
+	isPressed: false,
+	disabled: false,
+	hasIconAndText: false,
+}
+
+describe('getMixedButtonStyles util', () => {
+    it('return styles when params are passed correclty', () => {
+        const response = getMixedButtonStyles(props);
+        expect(response).toEqual(
+            {
+                container: {
+                    borderWidth: 1,
+                    borderColor: '#C4C6CC',
+                    backgroundColor: '#DDDFE2',
+                    paddingHorizontal: 16.5,
+                    paddingVertical: 21,
+                    shadowColor: '#000',
+                    elevation: 5,
+                    shadowOpacity: 0.25,
+                    shadowRadius: 3.84,
+                    shadowOffset: { width: 0, height: 6.5 }
+                },
+                direction: {
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    flexDirection: 'column'
+                },
+                text: {
+                    fontWeight: '500',
+                    textAlign: 'center',
+                    color: '#C4C6CC',
+                    fontSize: 29
+                },
+                icon: { fontWeight: '500', textAlign: 'center', color: '#C4C6CC' },
+                loadingColor: '#2F2F2F'
+            }
+        )
+    });
+
+    it('returns default styles when params is not correct or no exist', () => {
+        // @ts-ignore 
+        const response = getMixedButtonStyles(failedProps);
+        expect(response).toEqual(
+            {
+                container: {
+                borderWidth: 1,
+                borderColor: 'transparent',
+                backgroundColor: '#2979FF',
+                paddingHorizontal: 16.5,
+                height: 104
+                },
+                direction: {
+                justifyContent: 'center',
+                alignItems: 'center',
+                flexDirection: 'row'
+                },
+                text: {
+                fontWeight: '500',
+                textAlign: 'center',
+                color: '#fff',
+                fontSize: 29
+                },
+                icon: { fontWeight: '500', textAlign: 'center', color: '#fff' },
+                loadingColor: '#2979FF'
+            }
+        )
+    });
+});
\ No newline at end of file
diff --git a/src/components/Button/utils/index.ts b/src/components/Button/utils/index.ts
index 3d6cfac..2488afd 100644
--- a/src/components/Button/utils/index.ts
+++ b/src/components/Button/utils/index.ts
@@ -1,25 +1,52 @@
 import { moderateScale, scaledForDevice } from "../../../scale"
 import { colorConfig, stlyeConfig } from "../theme/configs";
 import { themeColors } from "../theme";
-import { defaultColor, defaultIconPosition, defaultType, defaultVariant, verticalHeights } from '../constants';
-import type { ContainerStyle, DirectionStyle,  LoadingStyle,  Params, ReturnStyles, TextStyle } from "../types";
-
-const containerStyle = ({isPressed, disabled: isDisabled, isLoading, color, variant, type, iconPosition}: ContainerStyle) => {
+import { 
+	defaultColor,
+	validTypes,
+	validVariants,
+	validIconPositions,
+	defaultIconPosition,
+	defaultType,
+	defaultVariant,
+	verticalHeights
+} from '../constants';
+import type { 
+	ContainerStyle,
+	DirectionStyle,
+	LoadingStyle,
+	Params,
+	ReturnStyles,
+	TextStyle
+} from "../types";
+
+const containerStyle = ({
+	disabled: isDisabled,
+	isPressed,
+	isLoading,
+	color,
+	variant,
+	type,
+	iconPosition
+}: ContainerStyle) => {
 	const selectedColor = themeColors[color] || themeColors[defaultColor];
 	const {main, pressed, disabled} = colorConfig(selectedColor);
-	
+
 	const {container} = stlyeConfig;
 
-	const mainBgColor = main.background[variant] || main.background[defaultVariant];
-	const mainBorderColor = main.border[variant] || main.border[defaultVariant];
+	const validType = !!validTypes.includes(type) ? type : defaultType;
+	const validVariant = !!validVariants.includes(variant) ? variant : defaultVariant;
 
-	const pressedBgColor = pressed.background[variant] || pressed.background[defaultVariant];
-	const pressedBorderColor = pressed.border[variant] || pressed.border[defaultVariant];
-	
-	const disabledBgColor = disabled.background[variant] || disabled.background[defaultVariant];
-	const disabledBorderColor = disabled.border[type][variant] || disabled.border[defaultType][defaultVariant];
+	const mainBgColor = main.background[validVariant];
+	const mainBorderColor = main.border[validVariant];
+
+	const pressedBgColor = pressed.background[validVariant];
+	const pressedBorderColor = pressed.border[validVariant];
 	
-	const containerHeight = container.height[type] || container.height[defaultType];
+	const disabledBgColor = disabled.background[validVariant];
+	const disabledBorderColor = disabled.border[validType][validVariant];
+
+	const containerHeight = container.height[validType];
 	const containerShadow = container.shadow;
 
 	// main and pressed button colors
@@ -46,9 +73,12 @@ const containerStyle = ({isPressed, disabled: isDisabled, isLoading, color, vari
 const directionWrapperStyle = ({iconPosition}: DirectionStyle ) => {
 	const {directionWrapper} = stlyeConfig;
 
-	const flexDirection = 
-		directionWrapper.flexDirection[iconPosition] || directionWrapper.flexDirection[defaultIconPosition];
-	const flexCenter = directionWrapper.center || {};
+	const flexCenter = directionWrapper.center;
+
+	const validIconPosition = !!validIconPositions.includes(iconPosition) 
+		? iconPosition 
+		: defaultIconPosition;
+	const flexDirection = directionWrapper.flexDirection[validIconPosition];
 
 	return {
 		...flexCenter,
@@ -56,15 +86,25 @@ const directionWrapperStyle = ({iconPosition}: DirectionStyle ) => {
 	}
 };
 
-const baseTextStyle = ({type, variant, color, disabled: isDisabled, isLoading, isPressed}: TextStyle) => {
+const baseTextStyle = ({
+	disabled: isDisabled,
+	type,
+	variant,
+	color,
+	isLoading,
+	isPressed
+}: TextStyle) => {
 	const selectedColor = themeColors[color] || themeColors[defaultColor];
 	const {main, pressed, disabled} = colorConfig(selectedColor);
 	
 	const {text: textStyle} = stlyeConfig;
 
-	const mainTextColor = main.text[type][variant] || main.text[defaultType][defaultVariant];
-	const pressedTextColor = pressed.text[type][variant] || pressed.text[defaultType][defaultVariant];
-	const disabledTextColor = disabled.text[type][variant] || disabled.text[defaultType][defaultVariant];
+	const validType = !!validTypes.includes(type) ? type : defaultType;
+	const validVariant = !!validVariants.includes(variant) ? variant : defaultVariant;
+
+	const mainTextColor = main.text[validType][validVariant];
+	const pressedTextColor = pressed.text[validType][validVariant];
+	const disabledTextColor = disabled.text[validType][validVariant];
 
 	const mainColor = isPressed ? pressedTextColor : mainTextColor;
 
@@ -73,10 +113,12 @@ const baseTextStyle = ({type, variant, color, disabled: isDisabled, isLoading, i
 		color: isDisabled || isLoading ? disabledTextColor : mainColor,
 	}
 };
+
 const textStyle = (params : TextStyle) => ({
 	...baseTextStyle(params),
 	fontSize: scaledForDevice(14, moderateScale),
 });
+
 const iconStyle  = (params: TextStyle) => {
 	const {hasIconAndText, iconPosition} = params;
 	const {icon} = stlyeConfig;
diff --git a/src/components/Select/Components/Modal/index.tsx b/src/components/Select/Components/Modal/index.tsx
index 4d84eb8..da637b4 100644
--- a/src/components/Select/Components/Modal/index.tsx
+++ b/src/components/Select/Components/Modal/index.tsx
@@ -3,7 +3,7 @@ import {Modal as ModalComponent, StyleSheet, View} from 'react-native';
 import {base, primary, white} from '../../../../theme/palette';
 import {DropdownProps} from '../Dropdown';
 import {moderateScale, scaledForDevice} from '../../../../scale';
-import Button from '../../../Button';
+import Button, { Type, Variant } from '../../../Button';
 
 interface ModalProps extends DropdownProps {
 	isMulti: boolean;
@@ -49,12 +49,7 @@ const Modal: FC<ModalProps> = ({show, setShow, isMulti, modalAcceptText, childre
 			left: validLeft,
 			top: validTop,
 		},
-		button: {
-			backgroundColor: base.white,
-		},
 		buttonText: {
-			color: primary.main,
-			fontSize: validFontSize,
 			fontWeight: '700',
 			textTransform: 'uppercase',
 		},
@@ -69,8 +64,8 @@ const Modal: FC<ModalProps> = ({show, setShow, isMulti, modalAcceptText, childre
 						<View style={styles.buttonWrapper}>
 							<Button
 								value={modalAcceptText}
-								pressedColor={white.main}
-								style={styles.button}
+								variant={Variant.Text}
+								type={Type.Secondary}
 								textStyle={styles.buttonText}
 								onPress={() => setShow(false)}
 							/>

From aab7b5495820f74e2dd31a86102c63da2133b75c Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Tue, 16 Apr 2024 16:58:35 -0300
Subject: [PATCH 08/20] crear componente button

---
 .ondevice/storybook.requires.js               |   2 +-
 App.tsx                                       |  29 +-
 src/components/BaseButton/index.test.tsx      |  15 +-
 src/components/BaseButton/index.tsx           |  19 +-
 src/components/Button/constants/index.ts      |  20 +-
 src/components/Button/index.test.tsx          |  81 +++---
 src/components/Button/index.tsx               |  44 ++-
 src/components/Button/theme/configs/index.ts  | 260 +++++++++---------
 src/components/Button/theme/index.ts          |  64 ++---
 src/components/Button/types/index.ts          |  60 ++--
 src/components/Button/utils/index.test.ts     | 130 +++++----
 src/components/Button/utils/index.ts          |  65 ++---
 .../Select/Components/Modal/index.tsx         |   5 +-
 .../stories/BaseButton/BaseButton.stories.js  |  80 ------
 storybook/stories/Button/Button.stories.js    | 116 ++++++++
 15 files changed, 494 insertions(+), 496 deletions(-)
 delete mode 100644 storybook/stories/BaseButton/BaseButton.stories.js
 create mode 100644 storybook/stories/Button/Button.stories.js

diff --git a/.ondevice/storybook.requires.js b/.ondevice/storybook.requires.js
index 59b7e1d..d808394 100644
--- a/.ondevice/storybook.requires.js
+++ b/.ondevice/storybook.requires.js
@@ -48,7 +48,7 @@ try {
 const getStories = () => {
 	return {
 		'./storybook/stories/Avatar/Avatar.stories.js': require('../storybook/stories/Avatar/Avatar.stories.js'),
-		'./storybook/stories/BaseButton/BaseButton.stories.js': require('../storybook/stories/BaseButton/BaseButton.stories.js'),
+		'./storybook/stories/Button/Button.stories.js': require('../storybook/stories/Button/Button.stories.js'),
 		'./storybook/stories/Carousel/Carousel.stories.js': require('../storybook/stories/Carousel/Carousel.stories.js'),
 		'./storybook/stories/CheckBox/CheckBox.stories.js': require('../storybook/stories/CheckBox/CheckBox.stories.js'),
 		'./storybook/stories/DesignStystem/Colors.stories.js': require('../storybook/stories/DesignStystem/Colors.stories.js'),
diff --git a/App.tsx b/App.tsx
index ce48de1..fc82556 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,32 +1,9 @@
 import React from 'react';
-import {View} from 'react-native';
-import Button, { Color, Type, Variant, IconPosition } from './src/components/Button';
+import {View, Text} from 'react-native';
 
 const App = () => (
-	<View style={{padding: 20, flexDirection: 'row'}}>
-		<Button 
-			// value='CANCEL'
-			icon='box'
-			isLoading={false}
-			type={Type.Main}
-			variant={Variant.Contained}
-			color={Color.Primary}
-			// iconPosition={IconPosition.Right}
-			disabled={false}
-			// style={}
-		/>
-				<Button 
-			value='Button'
-			icon='box'
-			isLoading={false}
-			type={Type.Main}
-			variant={Variant.Outlined}
-			color={Color.Primary}
-			iconPosition={IconPosition.Left}
-			disabled={false}
-			style={{marginLeft: 6}}
-			iconStyle={{color: 'red', fontSize: 30}}
-		/>
+	<View>
+		<Text>UI native</Text>
 	</View>
 );
 
diff --git a/src/components/BaseButton/index.test.tsx b/src/components/BaseButton/index.test.tsx
index f6b6e15..c52d92c 100644
--- a/src/components/BaseButton/index.test.tsx
+++ b/src/components/BaseButton/index.test.tsx
@@ -5,7 +5,11 @@ import BaseButton from './';
 
 const validData = {
 	borderRadius: 15,
-	children: <View><Text>Button</Text></View>,
+	children: (
+		<View>
+			<Text>Button</Text>
+		</View>
+	),
 };
 
 describe('BaseButton Component', () => {
@@ -17,12 +21,11 @@ describe('BaseButton Component', () => {
 	});
 
 	describe('render correctly when has minimum props needed, example', () => {
-			it('when hasnt minimum props needed', () => {
+		it('when hasnt minimum props needed', () => {
 			const {toJSON} = create(
-			<BaseButton borderRadius={validData.borderRadius}>
-				{validData.children}
-			</BaseButton>);
-			
+				<BaseButton borderRadius={validData.borderRadius}>{validData.children}</BaseButton>
+			);
+
 			expect(toJSON()).toBeTruthy();
 		});
 	});
diff --git a/src/components/BaseButton/index.tsx b/src/components/BaseButton/index.tsx
index 9259997..759cea3 100644
--- a/src/components/BaseButton/index.tsx
+++ b/src/components/BaseButton/index.tsx
@@ -1,6 +1,6 @@
 import React, {FC, ReactNode} from 'react';
-import {Pressable, PressableProps, StyleSheet, ViewStyle} from 'react-native';
-import {moderateScale, horizontalScale, scaledForDevice} from '../../scale';
+import {Pressable, PressableProps, StyleSheet} from 'react-native';
+import {moderateScale, scaledForDevice} from '../../scale';
 
 export interface BaseButtonProps extends PressableProps {
 	borderRadius?: number;
@@ -8,13 +8,10 @@ export interface BaseButtonProps extends PressableProps {
 	style?: any;
 }
 
-const BaseButton: FC<BaseButtonProps> = ({
-	borderRadius = 0,
-	children = null,
-	style,
-	...props
-}) => {
-	if(!children) return null;
+const BaseButton: FC<BaseButtonProps> = ({borderRadius = 0, children = null, style, ...props}) => {
+	if (!children) {
+		return null;
+	}
 
 	const validateBorderRadius = scaledForDevice(borderRadius, moderateScale);
 
@@ -27,7 +24,9 @@ const BaseButton: FC<BaseButtonProps> = ({
 	});
 
 	return (
-		<Pressable style={[styles.container, style]} {...props}>{children}</Pressable>
+		<Pressable style={[styles.container, style]} {...props}>
+			{children}
+		</Pressable>
 	);
 };
 
diff --git a/src/components/Button/constants/index.ts b/src/components/Button/constants/index.ts
index b6148dd..1b9c7a1 100644
--- a/src/components/Button/constants/index.ts
+++ b/src/components/Button/constants/index.ts
@@ -1,5 +1,5 @@
 const verticalHeights = ['top', 'bottom'];
-const validTypes= ['main', 'secondary']
+const validTypes = ['main', 'secondary'];
 const validVariants = ['contained', 'outlined', 'text'];
 const validIconPositions = ['top', 'bottom', 'left', 'right'];
 const defaultColor = 'primary';
@@ -8,12 +8,12 @@ const defaultVariant = 'contained';
 const defaultIconPosition = 'left';
 
 export {
-    verticalHeights,
-    validTypes,
-    validVariants,
-    validIconPositions,
-    defaultColor,
-    defaultType,
-    defaultVariant,
-    defaultIconPosition,
-}
\ No newline at end of file
+	verticalHeights,
+	validTypes,
+	validVariants,
+	validIconPositions,
+	defaultColor,
+	defaultType,
+	defaultVariant,
+	defaultIconPosition,
+};
diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx
index 67ad043..94deb19 100644
--- a/src/components/Button/index.test.tsx
+++ b/src/components/Button/index.test.tsx
@@ -4,7 +4,7 @@ import {Text} from 'react-native';
 import Icon from '../Icon';
 import BaseButton from '../BaseButton';
 import Loading from '../Loading';
-import Button, { Color, IconPosition, Type, Variant } from './';
+import Button, {Color, IconPosition, Type, Variant} from './';
 
 const validData = {
 	type: Type.Main,
@@ -22,59 +22,52 @@ jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 
 describe('Button component', () => {
-    describe('returns null', () => {
-        it('when value and icon props are not passed to the Button component', () => {
-			const {toJSON} = create(<Button />);
-			expect(toJSON()).toBeNull();
-        });
-    });
-
-    describe('it renders correctly', () => {
-        it('when it has valie as minimum prop', () => {
+	describe('it renders correctly', () => {
+		it('when it has valie as minimum prop', () => {
 			const {root} = create(<Button value={validData.value} />);
 			const TitleComp = root.findByType(Text);
-            const {children} = TitleComp.props;
-
-            expect(children).toEqual(validData.value);
-        });
+			const {children} = TitleComp.props;
 
+			expect(children).toEqual(validData.value);
+		});
 
-        it('when it has icon as minimum prop', () => {
+		it('when it has icon as minimum prop', () => {
 			const {root} = create(<Button icon={validData.icon} />);
 			const IconComp = root.findByType(Icon);
-            const {name} = IconComp.props;
+			const {name} = IconComp.props;
 
-            expect(name).toEqual(validData.icon);
-        });
+			expect(name).toEqual(validData.icon);
+		});
 
-        it('when it is pressed', () => {
-            spyUseState.mockReturnValueOnce([false, setIsPressed]);
+		it('when it is pressed', () => {
+			spyUseState.mockReturnValueOnce([false, setIsPressed]);
 
 			const {root} = create(
-                <Button 
-                    type={Type.Main}
-                    variant={Variant.Contained}
-                    color={Color.Primary}
-                    value="Button Test"
-                    icon="box"
-                    iconPosition={IconPosition.Left}
-                />);
+				<Button
+					type={Type.Main}
+					variant={Variant.Contained}
+					color={Color.Primary}
+					value="Button Test"
+					icon="box"
+					iconPosition={IconPosition.Left}
+				/>
+			);
+
+			const ButtonComp = root.findByType(BaseButton);
+			const {onPressIn, onPressOut} = ButtonComp.props;
+
+			onPressIn();
+			onPressOut();
 
-            const ButtonComp = root.findByType(BaseButton)
-            const {onPressIn, onPressOut} = ButtonComp.props;
-           
-            onPressIn();
-            onPressOut();
-           
-            expect(setIsPressed).toBeCalledTimes(2);
-        });
+			expect(setIsPressed).toBeCalledTimes(2);
+		});
 
-        it('when isLoading is true, show an loading spinner', () => {
-            const {root} = create(<Button icon={validData.icon} isLoading={validData.isLoading} />);
-            const LoadingComp = root.findByType(Loading)
-            const {isLoading} = LoadingComp.props;
+		it('when isLoading is true, show an loading spinner', () => {
+			const {root} = create(<Button icon={validData.icon} isLoading={validData.isLoading} />);
+			const LoadingComp = root.findByType(Loading);
+			const {isLoading} = LoadingComp.props;
 
-            expect(isLoading).toEqual(validData.isLoading);
-        })
-    }); 
-});
\ No newline at end of file
+			expect(isLoading).toEqual(validData.isLoading);
+		});
+	});
+});
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 132eef1..43819c7 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,10 +1,10 @@
 import React, {FC, useCallback, useState} from 'react';
 import {ViewStyle, StyleSheet, TextStyle, View} from 'react-native';
-import BaseButton, { BaseButtonProps } from '../BaseButton';
+import BaseButton, {BaseButtonProps} from '../BaseButton';
 import Loading from '../Loading';
 import Text from '../Text';
 import Icon from '../Icon';
-import { getMixedButtonStyles } from './utils';
+import {getMixedButtonStyles} from './utils';
 
 export enum Type {
 	Main = 'main',
@@ -14,7 +14,7 @@ export enum Type {
 export enum Variant {
 	Contained = 'contained',
 	Outlined = 'outlined',
-	Text ='text',
+	Text = 'text',
 }
 
 export enum Color {
@@ -34,7 +34,7 @@ export enum IconPosition {
 }
 
 interface ButtonProps extends BaseButtonProps {
-	type?: Type,
+	type?: Type;
 	variant?: Variant;
 	color?: Color;
 	isLoading?: boolean;
@@ -45,8 +45,8 @@ interface ButtonProps extends BaseButtonProps {
 	style?: ViewStyle;
 	iconStyle?: TextStyle;
 	textStyle?: TextStyle;
-	onPressIn?:  () => void;
-	onPressOut?:  () => void;
+	onPressIn?: () => void;
+	onPressOut?: () => void;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -55,7 +55,7 @@ const Button: FC<ButtonProps> = ({
 	color = Color.Primary,
 	iconPosition = IconPosition.Left,
 	isLoading = false,
-	value = null,
+	value = 'Button',
 	icon = null,
 	disabled = false,
 	style,
@@ -65,8 +65,6 @@ const Button: FC<ButtonProps> = ({
 	onPressOut = () => {},
 	...props
 }) => {
-	if(!icon && !value) return null;
-
 	const [isPressed, setIsPressed] = useState<Boolean>(false);
 	const hasIconAndText = !!icon && !!value;
 	const borderRadius = variant === 'text' ? 6 : 50;
@@ -81,25 +79,21 @@ const Button: FC<ButtonProps> = ({
 		disabled,
 		hasIconAndText,
 	};
-	const buttonStyle = getMixedButtonStyles(params)
-	const styles = StyleSheet.create(buttonStyle);		
-	
-	const handleOnPressIn = () => {
+	const buttonStyle = getMixedButtonStyles(params);
+	const styles = StyleSheet.create(buttonStyle);
+
+	const handleOnPressIn = useCallback(() => {
 		setIsPressed(true);
 		onPressIn();
-	}
+	}, [onPressIn]);
 
-	const handleOnPressOut = () => {
+	const handleOnPressOut = useCallback(() => {
 		setIsPressed(false);
 		onPressOut();
-	};
+	}, [onPressOut]);
 
 	const LoadingCompontent = (
-		<Loading  
-			isLoading={isLoading}
-			color = {buttonStyle.loadingColor}
-			size = {24}
-		/> 
+		<Loading isLoading={isLoading} color={buttonStyle.loadingColor} size={24} />
 	);
 
 	const WrapperComponent = (
@@ -110,10 +104,10 @@ const Button: FC<ButtonProps> = ({
 	);
 
 	return (
-		<BaseButton 
+		<BaseButton
 			style={[styles.container, style]}
-			onPressIn={useCallback(handleOnPressIn, [setIsPressed, isPressed])}
-			onPressOut={useCallback(handleOnPressOut, [setIsPressed, isPressed])}
+			onPressIn={handleOnPressIn}
+			onPressOut={handleOnPressOut}
 			disabled={disabled || isLoading}
 			borderRadius={borderRadius}
 			{...props}>
@@ -122,4 +116,4 @@ const Button: FC<ButtonProps> = ({
 	);
 };
 
-export default Button;
\ No newline at end of file
+export default Button;
diff --git a/src/components/Button/theme/configs/index.ts b/src/components/Button/theme/configs/index.ts
index e49e604..cc915fe 100644
--- a/src/components/Button/theme/configs/index.ts
+++ b/src/components/Button/theme/configs/index.ts
@@ -1,136 +1,136 @@
-import { moderateScale, scaledForDevice } from '../../../../scale';
-import { base, black, grey, white} from '../../../../theme/palette';
-import { SelectedColor } from "../../types"
+import {moderateScale, scaledForDevice} from '../../../../scale';
+import {base, black, grey, white} from '../../../../theme/palette';
+import {SelectedColor} from '../../types';
 
 export const colorConfig = (selectedColor: SelectedColor) => {
-    return {
-        main: {
-            background: {
-                contained:  selectedColor.main,
-                outlined: selectedColor.light,
-                text: 'transparent'
-            },
-            border: {
-                contained:  'transparent',
-                outlined: grey[300],
-                text: 'transparent'
-            },
-            text: {
-                main: {
-                    contained:  base.white,
-                    outlined: black.main,
-                    text: black.main,
-                },
-                secondary: {
-                    contained:  base.white,
-                    outlined: selectedColor.main,
-                    text: selectedColor.main,  
-                }
-            },
-        },
-        pressed: {
-            background: {
-                contained:  selectedColor.dark,
-                outlined: selectedColor.light,
-                text: white.main,
-            },
-            border: {
-                contained:  'transparent',
-                outlined: selectedColor.main,
-                text: 'transparent',
-            },
-            text: {
-                main: {
-                    contained:  base.white,
-                    outlined: black.main,
-                    text: black.main,
-                },
-                secondary: {
-                    contained:  base.white,
-                    outlined: selectedColor.main,
-                    text: selectedColor.dark,  
-                }
-            }
-        },
-        disabled: {
-            background: {
-                contained:  grey[200],
-                outlined: grey[100],
-                text: 'transparent'
-            },
-            border: {
-                main: {
-                    contained: 'transparent',
-                    outlined: 'transparent',
-                    text: 'transparent'
-                },
-                secondary: {
-                    contained: 'transparent',
-                    outlined: grey[300],
-                    text: 'transparent'
-                }
-            },
-            text: {
-                main: {
-                    contained:  grey[400],
-                    outlined: grey[300],
-                    text: grey[300],
-                },
-                secondary: {
-                    contained:  grey[400],
-                    outlined: grey[300],
-                    text: grey[300],
-                }
-            },
-        },
-    }
-}
+	return {
+		main: {
+			background: {
+				contained: selectedColor.main,
+				outlined: selectedColor.light,
+				text: 'transparent',
+			},
+			border: {
+				contained: 'transparent',
+				outlined: grey[300],
+				text: 'transparent',
+			},
+			text: {
+				main: {
+					contained: base.white,
+					outlined: black.main,
+					text: black.main,
+				},
+				secondary: {
+					contained: base.white,
+					outlined: selectedColor.main,
+					text: selectedColor.main,
+				},
+			},
+		},
+		pressed: {
+			background: {
+				contained: selectedColor.dark,
+				outlined: selectedColor.light,
+				text: white.main,
+			},
+			border: {
+				contained: 'transparent',
+				outlined: selectedColor.main,
+				text: 'transparent',
+			},
+			text: {
+				main: {
+					contained: base.white,
+					outlined: black.main,
+					text: black.main,
+				},
+				secondary: {
+					contained: base.white,
+					outlined: selectedColor.main,
+					text: selectedColor.dark,
+				},
+			},
+		},
+		disabled: {
+			background: {
+				contained: grey[200],
+				outlined: grey[100],
+				text: 'transparent',
+			},
+			border: {
+				main: {
+					contained: 'transparent',
+					outlined: 'transparent',
+					text: 'transparent',
+				},
+				secondary: {
+					contained: 'transparent',
+					outlined: grey[300],
+					text: 'transparent',
+				},
+			},
+			text: {
+				main: {
+					contained: grey[400],
+					outlined: grey[300],
+					text: grey[300],
+				},
+				secondary: {
+					contained: grey[400],
+					outlined: grey[300],
+					text: grey[300],
+				},
+			},
+		},
+	};
+};
 
 export const stlyeConfig = {
-    container: {
-        height: {
-            main: scaledForDevice(50, moderateScale),
-            secondary: scaledForDevice(42, moderateScale),
-        },
-        shadow : {
-            // android
-            shadowColor: '#000',
-            elevation: 5,
-            // IOS
-            shadowOpacity: 0.25,
-            shadowRadius: 3.84,
-            shadowOffset: {
-            width: 0,
-            height: scaledForDevice(3, moderateScale),
-            },
-        }
-    },
-    directionWrapper: {
-        center: {
-            justifyContent: 'center',
-            alignItems: 'center'
-	    },
-        flexDirection: {
-            left: 'row',
-            right: 'row-reverse',
-            top: 'column',
-            bottom: 'column-reverse',
-        }
-    },
-    text: {
+	container: {
+		height: {
+			main: scaledForDevice(50, moderateScale),
+			secondary: scaledForDevice(42, moderateScale),
+		},
+		shadow: {
+			// android
+			shadowColor: '#000',
+			elevation: 5,
+			// IOS
+			shadowOpacity: 0.25,
+			shadowRadius: 3.84,
+			shadowOffset: {
+				width: 0,
+				height: scaledForDevice(3, moderateScale),
+			},
+		},
+	},
+	directionWrapper: {
+		center: {
+			justifyContent: 'center',
+			alignItems: 'center',
+		},
+		flexDirection: {
+			left: 'row',
+			right: 'row-reverse',
+			top: 'column',
+			bottom: 'column-reverse',
+		},
+	},
+	text: {
 		fontWeight: '500',
 		textAlign: 'center',
-    },
-    icon: {
-        margin: {
-            top: {},
-            bottom: {},
-            left: {
-                marginRight: scaledForDevice(8, moderateScale)
-            },
-            right: {
-                marginLeft: scaledForDevice(8, moderateScale)
-            },
-        }
-    }
-}
\ No newline at end of file
+	},
+	icon: {
+		margin: {
+			top: {},
+			bottom: {},
+			left: {
+				marginRight: scaledForDevice(8, moderateScale),
+			},
+			right: {
+				marginLeft: scaledForDevice(8, moderateScale),
+			},
+		},
+	},
+};
diff --git a/src/components/Button/theme/index.ts b/src/components/Button/theme/index.ts
index 9bab965..f80ffee 100644
--- a/src/components/Button/theme/index.ts
+++ b/src/components/Button/theme/index.ts
@@ -1,34 +1,34 @@
-import { alert, base, black, error, primary, success, warning} from '../../../theme/palette';
+import {alert, base, black, error, primary, success, warning} from '../../../theme/palette';
 
 export const themeColors = {
-    primary: {
-        light: base.white,
-        main: primary.main,
-        dark: primary.dark,
-    },
-    secondary: {
-        light: base.white,
-        main: black.main,
-        dark: black.dark,
-    },
-    success: {
-        light: base.white,
-        main: success.main,
-        dark: success.dark,
-    },
-    error: {
-        light: base.white,
-        main: error.main,
-        dark: error.dark,
-    },
-    warning: {
-        light: base.white,
-        main: warning.main,
-        dark: warning.dark,
-    },
-    alert: {
-        light: base.white,
-        main: alert.main,
-        dark: alert.dark,
-    }
-}
\ No newline at end of file
+	primary: {
+		light: base.white,
+		main: primary.main,
+		dark: primary.dark,
+	},
+	secondary: {
+		light: base.white,
+		main: black.main,
+		dark: black.dark,
+	},
+	success: {
+		light: base.white,
+		main: success.main,
+		dark: success.dark,
+	},
+	error: {
+		light: base.white,
+		main: error.main,
+		dark: error.dark,
+	},
+	warning: {
+		light: base.white,
+		main: warning.main,
+		dark: warning.dark,
+	},
+	alert: {
+		light: base.white,
+		main: alert.main,
+		dark: alert.dark,
+	},
+};
diff --git a/src/components/Button/types/index.ts b/src/components/Button/types/index.ts
index 60fbf56..0712ed6 100644
--- a/src/components/Button/types/index.ts
+++ b/src/components/Button/types/index.ts
@@ -1,20 +1,20 @@
-import type { Color, IconPosition, Type, Variant } from "../";
+import type {Color, IconPosition, Type, Variant} from '../';
 
 export interface SelectedColor {
-    light: string,
-    main: string,
-    dark: string,
+	light: string;
+	main: string;
+	dark: string;
 }
 
 export interface Params {
-	type: Type,
-	variant: Variant,
-	color: Color,
-	iconPosition: IconPosition,
-	isLoading: Boolean,
-	isPressed: Boolean,
-	disabled: Boolean,
-	hasIconAndText?: Boolean,
+	type: Type;
+	variant: Variant;
+	color: Color;
+	iconPosition: IconPosition;
+	isLoading: Boolean;
+	isPressed: Boolean;
+	disabled: Boolean;
+	hasIconAndText?: Boolean;
 }
 
 export interface ReturnStyles {
@@ -26,30 +26,30 @@ export interface ReturnStyles {
 }
 
 export interface ContainerStyle {
-	isPressed: Boolean,
-	disabled: Boolean,
-	isLoading: Boolean,
-	color: Color,
-	variant: Variant,
-	type: Type,
-	iconPosition: IconPosition,
+	isPressed: Boolean;
+	disabled: Boolean;
+	isLoading: Boolean;
+	color: Color;
+	variant: Variant;
+	type: Type;
+	iconPosition: IconPosition;
 }
 
 export interface TextStyle {
-	type: Type,
-	variant: Variant,
-	color: Color,
-	disabled: Boolean,
-	isLoading: Boolean,
-	isPressed: Boolean,
-	hasIconAndText?: Boolean,
-	iconPosition: IconPosition,
+	type: Type;
+	variant: Variant;
+	color: Color;
+	disabled: Boolean;
+	isLoading: Boolean;
+	isPressed: Boolean;
+	hasIconAndText?: Boolean;
+	iconPosition: IconPosition;
 }
 
 export interface LoadingStyle {
-	color: Color,
+	color: Color;
 }
 
 export interface DirectionStyle {
-	iconPosition: IconPosition,
-}
\ No newline at end of file
+	iconPosition: IconPosition;
+}
diff --git a/src/components/Button/utils/index.test.ts b/src/components/Button/utils/index.test.ts
index 4f352c5..7f9df56 100644
--- a/src/components/Button/utils/index.test.ts
+++ b/src/components/Button/utils/index.test.ts
@@ -1,7 +1,7 @@
-import { getMixedButtonStyles } from ".";
-import { Color, IconPosition, Type, Variant } from "..";
+import {getMixedButtonStyles} from '.';
+import {Color, IconPosition, Type, Variant} from '..';
 
-const props = {
+const validParams = {
 	type: Type.Secondary,
 	variant: Variant.Outlined,
 	color: Color.Secondary,
@@ -10,9 +10,9 @@ const props = {
 	isPressed: true,
 	disabled: true,
 	hasIconAndText: true,
-}
+};
 
-const failedProps = {
+const failedParams = {
 	type: undefined,
 	variant: undefined,
 	color: undefined,
@@ -21,68 +21,64 @@ const failedProps = {
 	isPressed: false,
 	disabled: false,
 	hasIconAndText: false,
-}
+};
 
 describe('getMixedButtonStyles util', () => {
-    it('return styles when params are passed correclty', () => {
-        const response = getMixedButtonStyles(props);
-        expect(response).toEqual(
-            {
-                container: {
-                    borderWidth: 1,
-                    borderColor: '#C4C6CC',
-                    backgroundColor: '#DDDFE2',
-                    paddingHorizontal: 16.5,
-                    paddingVertical: 21,
-                    shadowColor: '#000',
-                    elevation: 5,
-                    shadowOpacity: 0.25,
-                    shadowRadius: 3.84,
-                    shadowOffset: { width: 0, height: 6.5 }
-                },
-                direction: {
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    flexDirection: 'column'
-                },
-                text: {
-                    fontWeight: '500',
-                    textAlign: 'center',
-                    color: '#C4C6CC',
-                    fontSize: 29
-                },
-                icon: { fontWeight: '500', textAlign: 'center', color: '#C4C6CC' },
-                loadingColor: '#2F2F2F'
-            }
-        )
-    });
+	it('return styles when params are passed correclty', () => {
+		const response = getMixedButtonStyles(validParams);
+		expect(response).toEqual({
+			container: {
+				borderWidth: 1,
+				borderColor: '#C4C6CC',
+				backgroundColor: '#DDDFE2',
+				paddingHorizontal: 16.5,
+				paddingVertical: 21,
+				shadowColor: '#000',
+				elevation: 5,
+				shadowOpacity: 0.25,
+				shadowRadius: 3.84,
+				shadowOffset: {width: 0, height: 6.5},
+			},
+			direction: {
+				justifyContent: 'center',
+				alignItems: 'center',
+				flexDirection: 'column',
+			},
+			text: {
+				fontWeight: '500',
+				textAlign: 'center',
+				color: '#C4C6CC',
+				fontSize: 29,
+			},
+			icon: {fontWeight: '500', textAlign: 'center', color: '#C4C6CC'},
+			loadingColor: '#2F2F2F',
+		});
+	});
 
-    it('returns default styles when params is not correct or no exist', () => {
-        // @ts-ignore 
-        const response = getMixedButtonStyles(failedProps);
-        expect(response).toEqual(
-            {
-                container: {
-                borderWidth: 1,
-                borderColor: 'transparent',
-                backgroundColor: '#2979FF',
-                paddingHorizontal: 16.5,
-                height: 104
-                },
-                direction: {
-                justifyContent: 'center',
-                alignItems: 'center',
-                flexDirection: 'row'
-                },
-                text: {
-                fontWeight: '500',
-                textAlign: 'center',
-                color: '#fff',
-                fontSize: 29
-                },
-                icon: { fontWeight: '500', textAlign: 'center', color: '#fff' },
-                loadingColor: '#2979FF'
-            }
-        )
-    });
-});
\ No newline at end of file
+	it('returns default styles when params is not correct or no exist', () => {
+		// @ts-ignore
+		const response = getMixedButtonStyles(failedParams);
+		expect(response).toEqual({
+			container: {
+				borderWidth: 1,
+				borderColor: 'transparent',
+				backgroundColor: '#2979FF',
+				paddingHorizontal: 16.5,
+				height: 104,
+			},
+			direction: {
+				justifyContent: 'center',
+				alignItems: 'center',
+				flexDirection: 'row',
+			},
+			text: {
+				fontWeight: '500',
+				textAlign: 'center',
+				color: '#fff',
+				fontSize: 29,
+			},
+			icon: {fontWeight: '500', textAlign: 'center', color: '#fff'},
+			loadingColor: '#2979FF',
+		});
+	});
+});
diff --git a/src/components/Button/utils/index.ts b/src/components/Button/utils/index.ts
index 2488afd..b137180 100644
--- a/src/components/Button/utils/index.ts
+++ b/src/components/Button/utils/index.ts
@@ -1,7 +1,7 @@
-import { moderateScale, scaledForDevice } from "../../../scale"
-import { colorConfig, stlyeConfig } from "../theme/configs";
-import { themeColors } from "../theme";
-import { 
+import {moderateScale, scaledForDevice} from '../../../scale';
+import {colorConfig, stlyeConfig} from '../theme/configs';
+import {themeColors} from '../theme';
+import {
 	defaultColor,
 	validTypes,
 	validVariants,
@@ -9,16 +9,16 @@ import {
 	defaultIconPosition,
 	defaultType,
 	defaultVariant,
-	verticalHeights
+	verticalHeights,
 } from '../constants';
-import type { 
+import type {
 	ContainerStyle,
 	DirectionStyle,
 	LoadingStyle,
 	Params,
 	ReturnStyles,
-	TextStyle
-} from "../types";
+	TextStyle,
+} from '../types';
 
 const containerStyle = ({
 	disabled: isDisabled,
@@ -27,22 +27,22 @@ const containerStyle = ({
 	color,
 	variant,
 	type,
-	iconPosition
+	iconPosition,
 }: ContainerStyle) => {
 	const selectedColor = themeColors[color] || themeColors[defaultColor];
 	const {main, pressed, disabled} = colorConfig(selectedColor);
 
 	const {container} = stlyeConfig;
 
-	const validType = !!validTypes.includes(type) ? type : defaultType;
-	const validVariant = !!validVariants.includes(variant) ? variant : defaultVariant;
+	const validType = validTypes.includes(type) ? type : defaultType;
+	const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
 
 	const mainBgColor = main.background[validVariant];
 	const mainBorderColor = main.border[validVariant];
 
 	const pressedBgColor = pressed.background[validVariant];
 	const pressedBorderColor = pressed.border[validVariant];
-	
+
 	const disabledBgColor = disabled.background[validVariant];
 	const disabledBorderColor = disabled.border[validType][validVariant];
 
@@ -63,27 +63,29 @@ const containerStyle = ({
 		borderWidth: 1,
 		borderColor: isDisabled || isLoading ? disabledBorderColor : borderColor,
 		backgroundColor: isDisabled || isLoading ? disabledBgColor : mainColor,
-		paddingHorizontal: scaledForDevice(type === 'main' ? 12 : 8, moderateScale) ,
+		paddingHorizontal: scaledForDevice(type === 'main' ? 12 : 8, moderateScale),
 		...(hasVerticalHeight && {paddingVertical: scaledForDevice(10, moderateScale)}),
-		...(!hasVerticalHeight && {height: variant !== 'text' ? containerHeight : scaledForDevice(35, moderateScale)}),
-		...(hasShadow && containerShadow)
-	}
+		...(!hasVerticalHeight && {
+			height: variant !== 'text' ? containerHeight : scaledForDevice(35, moderateScale),
+		}),
+		...(hasShadow && containerShadow),
+	};
 };
 
-const directionWrapperStyle = ({iconPosition}: DirectionStyle ) => {
+const directionWrapperStyle = ({iconPosition}: DirectionStyle) => {
 	const {directionWrapper} = stlyeConfig;
 
 	const flexCenter = directionWrapper.center;
 
-	const validIconPosition = !!validIconPositions.includes(iconPosition) 
-		? iconPosition 
+	const validIconPosition = validIconPositions.includes(iconPosition)
+		? iconPosition
 		: defaultIconPosition;
 	const flexDirection = directionWrapper.flexDirection[validIconPosition];
 
 	return {
 		...flexCenter,
 		flexDirection,
-	}
+	};
 };
 
 const baseTextStyle = ({
@@ -92,15 +94,15 @@ const baseTextStyle = ({
 	variant,
 	color,
 	isLoading,
-	isPressed
+	isPressed,
 }: TextStyle) => {
 	const selectedColor = themeColors[color] || themeColors[defaultColor];
 	const {main, pressed, disabled} = colorConfig(selectedColor);
-	
+
 	const {text: textStyle} = stlyeConfig;
 
-	const validType = !!validTypes.includes(type) ? type : defaultType;
-	const validVariant = !!validVariants.includes(variant) ? variant : defaultVariant;
+	const validType = validTypes.includes(type) ? type : defaultType;
+	const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
 
 	const mainTextColor = main.text[validType][validVariant];
 	const pressedTextColor = pressed.text[validType][validVariant];
@@ -111,22 +113,22 @@ const baseTextStyle = ({
 	return {
 		...textStyle,
 		color: isDisabled || isLoading ? disabledTextColor : mainColor,
-	}
+	};
 };
 
-const textStyle = (params : TextStyle) => ({
+const textStyle = (params: TextStyle) => ({
 	...baseTextStyle(params),
 	fontSize: scaledForDevice(14, moderateScale),
 });
 
-const iconStyle  = (params: TextStyle) => {
+const iconStyle = (params: TextStyle) => {
 	const {hasIconAndText, iconPosition} = params;
 	const {icon} = stlyeConfig;
 
 	return {
 		...baseTextStyle(params),
-		...(!!hasIconAndText && icon.margin[iconPosition] || {})
-	}
+		...((!!hasIconAndText && icon.margin[iconPosition]) || {}),
+	};
 };
 
 const loadingColor = ({color}: LoadingStyle) => {
@@ -134,9 +136,8 @@ const loadingColor = ({color}: LoadingStyle) => {
 	return selectedColor.main;
 };
 
-
-export const getMixedButtonStyles = (params: Params): ReturnStyles  => ({
-    container: containerStyle(params),
+export const getMixedButtonStyles = (params: Params): ReturnStyles => ({
+	container: containerStyle(params),
 	direction: directionWrapperStyle(params),
 	text: textStyle(params),
 	icon: iconStyle(params),
diff --git a/src/components/Select/Components/Modal/index.tsx b/src/components/Select/Components/Modal/index.tsx
index da637b4..401872a 100644
--- a/src/components/Select/Components/Modal/index.tsx
+++ b/src/components/Select/Components/Modal/index.tsx
@@ -1,9 +1,9 @@
 import React, {FC} from 'react';
 import {Modal as ModalComponent, StyleSheet, View} from 'react-native';
-import {base, primary, white} from '../../../../theme/palette';
+import {base} from '../../../../theme/palette';
 import {DropdownProps} from '../Dropdown';
 import {moderateScale, scaledForDevice} from '../../../../scale';
-import Button, { Type, Variant } from '../../../Button';
+import Button, {Type, Variant} from '../../../Button';
 
 interface ModalProps extends DropdownProps {
 	isMulti: boolean;
@@ -18,7 +18,6 @@ const Modal: FC<ModalProps> = ({show, setShow, isMulti, modalAcceptText, childre
 	const validPaddingHorizontal = scaledForDevice(20, moderateScale);
 	const validLeft = scaledForDevice(8, moderateScale);
 	const validTop = scaledForDevice(4, moderateScale);
-	const validFontSize = scaledForDevice(13, moderateScale);
 
 	const styles = StyleSheet.create({
 		background: {
diff --git a/storybook/stories/BaseButton/BaseButton.stories.js b/storybook/stories/BaseButton/BaseButton.stories.js
deleted file mode 100644
index a83b21b..0000000
--- a/storybook/stories/BaseButton/BaseButton.stories.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, {useState} from 'react';
-import BaseButton from '../../../src/components/BaseButton';
-import CheckBox from '../../../src/components/CheckBox';
-import {StyleSheet, View, Text} from 'react-native';
-import {palette} from '../../../src/theme/palette';
-
-export default {
-	title: 'Components/BaseButton',
-	argTypes: {
-		icon: {
-			options: {None: null, 'Plus Circle': 'plus_circle'},
-			control: {type: 'select'},
-		},
-		borderRadius: {control: 'number', min: 0},
-	},
-};
-
-export const DefaultProps = (props) => <BaseButton {...props} />;
-
-DefaultProps.storyName = 'Default props';
-
-DefaultProps.args = {
-	title: 'Button',
-	icon: 'plus_circle',
-	disabled: false,
-	iconRight: false,
-	borderRadius: 25,
-};
-
-export const WithChildren = (props) => {
-	const [isChecked, setIsChecked] = useState(false);
-
-	const styles = StyleSheet.create({
-		container: {
-			display: 'flex',
-			flexDirection: 'row',
-			justifyContent: 'center',
-			alignItems: 'center',
-			marginVertical: 4,
-			borderRadius: 20,
-			padding: 5,
-			width: '100%',
-		},
-		text: {
-			color: isChecked ? palette.primary.dark : palette.grey[600],
-			paddingHorizontal: 10,
-			fontWeight: 'bold',
-			textAlign: 'center',
-		},
-	});
-
-	return (
-		<BaseButton
-			android_ripple={{color: palette.primary.main}}
-			onPress={() => setIsChecked(!isChecked)}
-			{...props}>
-			<View style={styles.container}>
-				<CheckBox style={styles.check} checked={isChecked} />
-				<Text style={styles.text}>Custom Children</Text>
-			</View>
-		</BaseButton>
-	);
-};
-
-WithChildren.storyName = 'With Children Components';
-
-WithChildren.args = {
-	title: '',
-	icon: null,
-	disabled: false,
-	iconRight: false,
-	borderRadius: 4,
-	style: {
-		width: 200,
-		backgroundColor: palette.white.main,
-		borderColor: palette.grey[400],
-		borderWidth: 1,
-	},
-	pressedColor: palette.white.dark,
-};
diff --git a/storybook/stories/Button/Button.stories.js b/storybook/stories/Button/Button.stories.js
new file mode 100644
index 0000000..ec1c7bf
--- /dev/null
+++ b/storybook/stories/Button/Button.stories.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import Button from '../../../src/components/Button';
+
+export default {
+	title: 'Components/Button',
+	argTypes: {
+		icon: {
+			control: {type: 'select'},
+			options: {
+				None: null,
+				Box: 'box',
+				Check: 'check_bold',
+				Cross: 'cross_bold',
+				Keyboard: 'keyboard',
+			},
+		},
+		type: {
+			control: {type: 'select'},
+			options: {
+				Main: 'main',
+				Secondary: 'secondary',
+			},
+		},
+		variant: {
+			control: {type: 'select'},
+			options: {
+				Contained: 'contained',
+				Outlined: 'outlined',
+				Text: 'text',
+			},
+		},
+		iconPosition: {
+			control: {type: 'select'},
+			options: {
+				Top: 'top',
+				Bottom: 'bottom',
+				Left: 'left',
+				Right: 'right',
+			},
+		},
+		color: {
+			control: {type: 'select'},
+			options: {
+				Primary: 'primary',
+				Secondary: 'bottom',
+				Success: 'success',
+				Error: 'error',
+				Warni: 'warning',
+				Alert: 'alert',
+			},
+		},
+	},
+};
+
+export const PrimartButtonProps = (props) => <Button {...props} />;
+
+PrimartButtonProps.storyName = 'Primary Button';
+
+PrimartButtonProps.args = {
+	value: 'Main button press',
+	icon: 'box',
+	type: 'main',
+	variant: 'contained',
+	iconPosition: 'left',
+	color: 'primary',
+	isLoading: false,
+	disabled: false,
+	style: {flex: 1},
+};
+
+export const SecondaryButtonProps = (props) => <Button {...props} />;
+
+SecondaryButtonProps.storyName = 'Secondary Button';
+
+SecondaryButtonProps.args = {
+	value: 'Main button press',
+	icon: 'box',
+	type: 'secondary',
+	variant: 'contained',
+	iconPosition: 'left',
+	color: 'primary',
+	isLoading: false,
+	disabled: false,
+	style: {flex: 1},
+};
+
+export const CameraButtonProps = (props) => <Button {...props} />;
+
+CameraButtonProps.storyName = 'Camera Button';
+
+CameraButtonProps.args = {
+	value: 'Manual Entry',
+	icon: 'keyboard',
+	type: 'main',
+	variant: 'contained',
+	iconPosition: 'left',
+	color: 'secondary',
+	isLoading: false,
+	disabled: false,
+	style: {flex: 1},
+};
+
+export const TextButtonProps = (props) => <Button {...props} />;
+
+TextButtonProps.storyName = 'Title Button';
+
+TextButtonProps.args = {
+	value: 'ACCEPT',
+	type: 'secondary',
+	variant: 'text',
+	iconPosition: 'left',
+	color: 'primary',
+	isLoading: false,
+	disabled: false,
+	textStyle: {fontWeight: '700'},
+};

From 9bbb5752f86877191f0140e800705632ef8b5850 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Tue, 16 Apr 2024 17:38:59 -0300
Subject: [PATCH 09/20] crear componente button

---
 src/components/Button/theme/configs/index.ts | 12 ------------
 src/components/Button/utils/index.test.ts    |  5 -----
 src/components/Button/utils/index.ts         |  5 -----
 3 files changed, 22 deletions(-)

diff --git a/src/components/Button/theme/configs/index.ts b/src/components/Button/theme/configs/index.ts
index cc915fe..5260932 100644
--- a/src/components/Button/theme/configs/index.ts
+++ b/src/components/Button/theme/configs/index.ts
@@ -92,18 +92,6 @@ export const stlyeConfig = {
 			main: scaledForDevice(50, moderateScale),
 			secondary: scaledForDevice(42, moderateScale),
 		},
-		shadow: {
-			// android
-			shadowColor: '#000',
-			elevation: 5,
-			// IOS
-			shadowOpacity: 0.25,
-			shadowRadius: 3.84,
-			shadowOffset: {
-				width: 0,
-				height: scaledForDevice(3, moderateScale),
-			},
-		},
 	},
 	directionWrapper: {
 		center: {
diff --git a/src/components/Button/utils/index.test.ts b/src/components/Button/utils/index.test.ts
index 7f9df56..72dd890 100644
--- a/src/components/Button/utils/index.test.ts
+++ b/src/components/Button/utils/index.test.ts
@@ -33,11 +33,6 @@ describe('getMixedButtonStyles util', () => {
 				backgroundColor: '#DDDFE2',
 				paddingHorizontal: 16.5,
 				paddingVertical: 21,
-				shadowColor: '#000',
-				elevation: 5,
-				shadowOpacity: 0.25,
-				shadowRadius: 3.84,
-				shadowOffset: {width: 0, height: 6.5},
 			},
 			direction: {
 				justifyContent: 'center',
diff --git a/src/components/Button/utils/index.ts b/src/components/Button/utils/index.ts
index b137180..74ea6cc 100644
--- a/src/components/Button/utils/index.ts
+++ b/src/components/Button/utils/index.ts
@@ -47,7 +47,6 @@ const containerStyle = ({
 	const disabledBorderColor = disabled.border[validType][validVariant];
 
 	const containerHeight = container.height[validType];
-	const containerShadow = container.shadow;
 
 	// main and pressed button colors
 	const mainColor = isPressed ? pressedBgColor : mainBgColor;
@@ -56,9 +55,6 @@ const containerStyle = ({
 	// validation of height
 	const hasVerticalHeight = verticalHeights.includes(iconPosition);
 
-	// validation of shadow
-	const hasShadow = type === 'secondary' && variant === 'outlined';
-
 	return {
 		borderWidth: 1,
 		borderColor: isDisabled || isLoading ? disabledBorderColor : borderColor,
@@ -68,7 +64,6 @@ const containerStyle = ({
 		...(!hasVerticalHeight && {
 			height: variant !== 'text' ? containerHeight : scaledForDevice(35, moderateScale),
 		}),
-		...(hasShadow && containerShadow),
 	};
 };
 

From 1281fa12f018a7d9d7e8087b931fe3ab5280b9ae Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Wed, 17 Apr 2024 11:47:55 -0300
Subject: [PATCH 10/20] correccion 1 - crear componente button

---
 src/components/Button/index.test.tsx          | 14 ++--
 src/components/Button/index.tsx               | 74 +++++++++++--------
 src/components/Button/theme/configs/index.ts  |  2 +-
 src/components/Button/types/index.ts          | 30 ++++----
 src/components/Button/utils/index.test.ts     | 10 +--
 src/components/Button/utils/index.ts          | 10 +--
 .../Select/Components/Modal/index.tsx         |  6 +-
 7 files changed, 77 insertions(+), 69 deletions(-)

diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx
index 94deb19..3338232 100644
--- a/src/components/Button/index.test.tsx
+++ b/src/components/Button/index.test.tsx
@@ -4,16 +4,12 @@ import {Text} from 'react-native';
 import Icon from '../Icon';
 import BaseButton from '../BaseButton';
 import Loading from '../Loading';
-import Button, {Color, IconPosition, Type, Variant} from './';
+import Button from './';
 
 const validData = {
-	type: Type.Main,
-	variant: Variant.Contained,
-	color: Color.Primary,
 	isLoading: true,
 	value: 'Button Test',
 	icon: 'box',
-	iconPosition: IconPosition.Left,
 };
 
 const setIsPressed = jest.fn();
@@ -44,12 +40,12 @@ describe('Button component', () => {
 
 			const {root} = create(
 				<Button
-					type={Type.Main}
-					variant={Variant.Contained}
-					color={Color.Primary}
+					type={'main'}
+					variant={'contained'}
+					color={'primary'}
 					value="Button Test"
 					icon="box"
-					iconPosition={IconPosition.Left}
+					iconPosition={'left'}
 				/>
 			);
 
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 43819c7..581e589 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -6,41 +6,53 @@ import Text from '../Text';
 import Icon from '../Icon';
 import {getMixedButtonStyles} from './utils';
 
-export enum Type {
-	Main = 'main',
-	Secondary = 'secondary',
-}
+export const types = {
+	main: 'main',
+	secondary: 'secondary',
+};
 
-export enum Variant {
-	Contained = 'contained',
-	Outlined = 'outlined',
-	Text = 'text',
-}
+export const variant = {
+	contained: 'contained',
+	outlined: 'outlined',
+	text: 'text',
+};
 
-export enum Color {
-	Primary = 'primary',
-	Secondary = 'secondary',
-	Success = 'success',
-	Error = 'error',
-	Warning = 'warning',
-	Alert = 'alert',
-}
+export const color = {
+	primary: 'primary',
+	secondary: 'secondary',
+	success: 'success',
+	error: 'error',
+	warning: 'warning',
+	alert: 'alert',
+};
 
-export enum IconPosition {
-	Left = 'left',
-	Right = 'right',
-	Top = 'top',
-	Bottom = 'bottom',
-}
+export const iconPosition = {
+	top: 'top',
+	bottom: 'bottom',
+	left: 'left',
+	right: 'right',
+};
+
+export type buttonType = typeof types;
+export type keyType = keyof buttonType;
+
+export type buttonVariant = typeof variant;
+export type keyVariant = keyof buttonVariant;
+
+export type buttonColor = typeof color;
+export type keyColor = keyof buttonColor;
+
+export type buttonIconPosition = typeof iconPosition;
+export type keyIconPosition = keyof buttonIconPosition;
 
 interface ButtonProps extends BaseButtonProps {
-	type?: Type;
-	variant?: Variant;
-	color?: Color;
+	type?: keyType;
+	variant?: keyVariant;
+	color?: keyColor;
 	isLoading?: boolean;
 	value?: string | null;
 	icon?: string;
-	iconPosition?: IconPosition;
+	iconPosition?: keyIconPosition;
 	disabled?: boolean;
 	style?: ViewStyle;
 	iconStyle?: TextStyle;
@@ -50,10 +62,10 @@ interface ButtonProps extends BaseButtonProps {
 }
 
 const Button: FC<ButtonProps> = ({
-	type = Type.Main,
-	variant = Variant.Contained,
-	color = Color.Primary,
-	iconPosition = IconPosition.Left,
+	type = 'main',
+	variant = 'contained',
+	color = 'primary',
+	iconPosition = 'left',
 	isLoading = false,
 	value = 'Button',
 	icon = null,
diff --git a/src/components/Button/theme/configs/index.ts b/src/components/Button/theme/configs/index.ts
index 5260932..cd18b4c 100644
--- a/src/components/Button/theme/configs/index.ts
+++ b/src/components/Button/theme/configs/index.ts
@@ -86,7 +86,7 @@ export const colorConfig = (selectedColor: SelectedColor) => {
 	};
 };
 
-export const stlyeConfig = {
+export const styleConfig = {
 	container: {
 		height: {
 			main: scaledForDevice(50, moderateScale),
diff --git a/src/components/Button/types/index.ts b/src/components/Button/types/index.ts
index 0712ed6..ca25843 100644
--- a/src/components/Button/types/index.ts
+++ b/src/components/Button/types/index.ts
@@ -1,4 +1,4 @@
-import type {Color, IconPosition, Type, Variant} from '../';
+import type {keyColor, keyIconPosition, keyType, keyVariant} from '../';
 
 export interface SelectedColor {
 	light: string;
@@ -7,10 +7,10 @@ export interface SelectedColor {
 }
 
 export interface Params {
-	type: Type;
-	variant: Variant;
-	color: Color;
-	iconPosition: IconPosition;
+	type: keyType;
+	variant: keyVariant;
+	color: keyColor;
+	iconPosition: keyIconPosition;
 	isLoading: Boolean;
 	isPressed: Boolean;
 	disabled: Boolean;
@@ -29,27 +29,27 @@ export interface ContainerStyle {
 	isPressed: Boolean;
 	disabled: Boolean;
 	isLoading: Boolean;
-	color: Color;
-	variant: Variant;
-	type: Type;
-	iconPosition: IconPosition;
+	color: keyColor;
+	variant: keyVariant;
+	type: keyType;
+	iconPosition: keyIconPosition;
 }
 
 export interface TextStyle {
-	type: Type;
-	variant: Variant;
-	color: Color;
+	type: keyType;
+	variant: keyVariant;
+	color: keyColor;
 	disabled: Boolean;
 	isLoading: Boolean;
 	isPressed: Boolean;
 	hasIconAndText?: Boolean;
-	iconPosition: IconPosition;
+	iconPosition: keyIconPosition;
 }
 
 export interface LoadingStyle {
-	color: Color;
+	color: keyColor;
 }
 
 export interface DirectionStyle {
-	iconPosition: IconPosition;
+	iconPosition: keyIconPosition;
 }
diff --git a/src/components/Button/utils/index.test.ts b/src/components/Button/utils/index.test.ts
index 72dd890..f2108e5 100644
--- a/src/components/Button/utils/index.test.ts
+++ b/src/components/Button/utils/index.test.ts
@@ -1,11 +1,10 @@
 import {getMixedButtonStyles} from '.';
-import {Color, IconPosition, Type, Variant} from '..';
 
 const validParams = {
-	type: Type.Secondary,
-	variant: Variant.Outlined,
-	color: Color.Secondary,
-	iconPosition: IconPosition.Top,
+	type: 'secondary',
+	variant: 'outlined',
+	color: 'secondary',
+	iconPosition: 'top',
 	isLoading: true,
 	isPressed: true,
 	disabled: true,
@@ -25,6 +24,7 @@ const failedParams = {
 
 describe('getMixedButtonStyles util', () => {
 	it('return styles when params are passed correclty', () => {
+		// @ts-ignore
 		const response = getMixedButtonStyles(validParams);
 		expect(response).toEqual({
 			container: {
diff --git a/src/components/Button/utils/index.ts b/src/components/Button/utils/index.ts
index 74ea6cc..9a9e2f4 100644
--- a/src/components/Button/utils/index.ts
+++ b/src/components/Button/utils/index.ts
@@ -1,5 +1,5 @@
 import {moderateScale, scaledForDevice} from '../../../scale';
-import {colorConfig, stlyeConfig} from '../theme/configs';
+import {colorConfig, styleConfig} from '../theme/configs';
 import {themeColors} from '../theme';
 import {
 	defaultColor,
@@ -32,7 +32,7 @@ const containerStyle = ({
 	const selectedColor = themeColors[color] || themeColors[defaultColor];
 	const {main, pressed, disabled} = colorConfig(selectedColor);
 
-	const {container} = stlyeConfig;
+	const {container} = styleConfig;
 
 	const validType = validTypes.includes(type) ? type : defaultType;
 	const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
@@ -68,7 +68,7 @@ const containerStyle = ({
 };
 
 const directionWrapperStyle = ({iconPosition}: DirectionStyle) => {
-	const {directionWrapper} = stlyeConfig;
+	const {directionWrapper} = styleConfig;
 
 	const flexCenter = directionWrapper.center;
 
@@ -94,7 +94,7 @@ const baseTextStyle = ({
 	const selectedColor = themeColors[color] || themeColors[defaultColor];
 	const {main, pressed, disabled} = colorConfig(selectedColor);
 
-	const {text: textStyle} = stlyeConfig;
+	const {text: textStyle} = styleConfig;
 
 	const validType = validTypes.includes(type) ? type : defaultType;
 	const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
@@ -118,7 +118,7 @@ const textStyle = (params: TextStyle) => ({
 
 const iconStyle = (params: TextStyle) => {
 	const {hasIconAndText, iconPosition} = params;
-	const {icon} = stlyeConfig;
+	const {icon} = styleConfig;
 
 	return {
 		...baseTextStyle(params),
diff --git a/src/components/Select/Components/Modal/index.tsx b/src/components/Select/Components/Modal/index.tsx
index 401872a..0690e5a 100644
--- a/src/components/Select/Components/Modal/index.tsx
+++ b/src/components/Select/Components/Modal/index.tsx
@@ -3,7 +3,7 @@ import {Modal as ModalComponent, StyleSheet, View} from 'react-native';
 import {base} from '../../../../theme/palette';
 import {DropdownProps} from '../Dropdown';
 import {moderateScale, scaledForDevice} from '../../../../scale';
-import Button, {Type, Variant} from '../../../Button';
+import Button from '../../../Button';
 
 interface ModalProps extends DropdownProps {
 	isMulti: boolean;
@@ -63,8 +63,8 @@ const Modal: FC<ModalProps> = ({show, setShow, isMulti, modalAcceptText, childre
 						<View style={styles.buttonWrapper}>
 							<Button
 								value={modalAcceptText}
-								variant={Variant.Text}
-								type={Type.Secondary}
+								variant={'text'}
+								type={'secondary'}
 								textStyle={styles.buttonText}
 								onPress={() => setShow(false)}
 							/>

From a04f55d1ce474f60b40da1ed19a6ef11882a5551 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Wed, 17 Apr 2024 11:51:44 -0300
Subject: [PATCH 11/20] correccion 1 - crear componente button

---
 storybook/stories/Button/Button.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/stories/Button/Button.stories.js b/storybook/stories/Button/Button.stories.js
index ec1c7bf..d4ad955 100644
--- a/storybook/stories/Button/Button.stories.js
+++ b/storybook/stories/Button/Button.stories.js
@@ -45,7 +45,7 @@ export default {
 				Secondary: 'bottom',
 				Success: 'success',
 				Error: 'error',
-				Warni: 'warning',
+				Warning: 'warning',
 				Alert: 'alert',
 			},
 		},

From 3e23eb765cb6d7e1172f57facdc11bbd19bb43e0 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Wed, 17 Apr 2024 12:16:17 -0300
Subject: [PATCH 12/20] correccion 1 - crear componente button

---
 storybook/stories/Button/Button.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/stories/Button/Button.stories.js b/storybook/stories/Button/Button.stories.js
index d4ad955..bd54bc6 100644
--- a/storybook/stories/Button/Button.stories.js
+++ b/storybook/stories/Button/Button.stories.js
@@ -42,7 +42,7 @@ export default {
 			control: {type: 'select'},
 			options: {
 				Primary: 'primary',
-				Secondary: 'bottom',
+				Secondary: 'secondary',
 				Success: 'success',
 				Error: 'error',
 				Warning: 'warning',

From fe652c10ac916d6fda143a74e3f8f500a06da31b Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Fri, 31 May 2024 14:02:35 -0300
Subject: [PATCH 13/20] correcciones - crear componente button

---
 App.tsx                                       | 30 ++++++-
 src/components/BaseButton/index.test.tsx      |  7 +-
 src/components/BaseButton/index.tsx           | 17 +++-
 src/components/Button/constants/index.ts      | 19 -----
 src/components/Button/index.test.tsx          | 26 ------
 src/components/Button/index.tsx               | 42 +++-------
 src/components/Button/theme/index.ts          | 34 --------
 src/components/Button/types/index.ts          |  6 +-
 .../utils/{ => getButtonStyles}/index.test.ts | 12 +--
 .../utils/{ => getButtonStyles}/index.ts      | 81 ++++++++-----------
 .../getButtonStyles/utils/constants/index.ts  |  6 ++
 .../utils/defaultValues/index.ts              |  6 ++
 .../utils/styleConfigs}/index.ts              | 10 +--
 13 files changed, 114 insertions(+), 182 deletions(-)
 delete mode 100644 src/components/Button/constants/index.ts
 delete mode 100644 src/components/Button/theme/index.ts
 rename src/components/Button/utils/{ => getButtonStyles}/index.test.ts (83%)
 rename src/components/Button/utils/{ => getButtonStyles}/index.ts (60%)
 create mode 100644 src/components/Button/utils/getButtonStyles/utils/constants/index.ts
 create mode 100644 src/components/Button/utils/getButtonStyles/utils/defaultValues/index.ts
 rename src/components/Button/{theme/configs => utils/getButtonStyles/utils/styleConfigs}/index.ts (89%)

diff --git a/App.tsx b/App.tsx
index fc82556..2351c23 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,9 +1,33 @@
+/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
+import Button from './src/components/Button';
 
 const App = () => (
-	<View>
-		<Text>UI native</Text>
+	<View style={{padding: 20, flexDirection: 'row'}}>
+		<Button
+			value="Box Container"
+			icon="box"
+			type={'main'}
+			variant={'outlined'}
+			color="warning"
+			isLoading={false}
+			// iconPosition={'right'}
+			disabled={false}
+			style={{flex: 1}}
+		/>
+		<Button
+			value="Button with Box Icon"
+			icon="box"
+			isLoading={false}
+			type={'main'}
+			variant={'outlined'}
+			color={'primary'}
+			// iconPosition="right"
+			disabled={false}
+			style={{flex: 1}}
+			// iconStyle={{color: 'red', fontSize: 30}}
+		/>
 	</View>
 );
 
diff --git a/src/components/BaseButton/index.test.tsx b/src/components/BaseButton/index.test.tsx
index c52d92c..565f4b5 100644
--- a/src/components/BaseButton/index.test.tsx
+++ b/src/components/BaseButton/index.test.tsx
@@ -20,13 +20,12 @@ describe('BaseButton Component', () => {
 		});
 	});
 
-	describe('render correctly when has minimum props needed, example', () => {
+	describe('render correctly when has minimum props needed', () => {
 		it('when hasnt minimum props needed', () => {
-			const {toJSON} = create(
+			const {root} = create(
 				<BaseButton borderRadius={validData.borderRadius}>{validData.children}</BaseButton>
 			);
-
-			expect(toJSON()).toBeTruthy();
+			expect(root).toBeTruthy();
 		});
 	});
 });
diff --git a/src/components/BaseButton/index.tsx b/src/components/BaseButton/index.tsx
index 759cea3..9fdc1b3 100644
--- a/src/components/BaseButton/index.tsx
+++ b/src/components/BaseButton/index.tsx
@@ -5,10 +5,17 @@ import {moderateScale, scaledForDevice} from '../../scale';
 export interface BaseButtonProps extends PressableProps {
 	borderRadius?: number;
 	children?: ReactNode | null;
+	pressedStyle?: ReactNode;
 	style?: any;
 }
 
-const BaseButton: FC<BaseButtonProps> = ({borderRadius = 0, children = null, style, ...props}) => {
+const BaseButton: FC<BaseButtonProps> = ({
+	borderRadius = 0,
+	children = null,
+	style,
+	pressedStyle,
+	...props
+}) => {
 	if (!children) {
 		return null;
 	}
@@ -24,7 +31,13 @@ const BaseButton: FC<BaseButtonProps> = ({borderRadius = 0, children = null, sty
 	});
 
 	return (
-		<Pressable style={[styles.container, style]} {...props}>
+		<Pressable
+			style={({pressed}) => [
+				styles.container,
+				style,
+				pressed && /* istanbul ignore next */ pressedStyle,
+			]}
+			{...props}>
 			{children}
 		</Pressable>
 	);
diff --git a/src/components/Button/constants/index.ts b/src/components/Button/constants/index.ts
deleted file mode 100644
index 1b9c7a1..0000000
--- a/src/components/Button/constants/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-const verticalHeights = ['top', 'bottom'];
-const validTypes = ['main', 'secondary'];
-const validVariants = ['contained', 'outlined', 'text'];
-const validIconPositions = ['top', 'bottom', 'left', 'right'];
-const defaultColor = 'primary';
-const defaultType = 'main';
-const defaultVariant = 'contained';
-const defaultIconPosition = 'left';
-
-export {
-	verticalHeights,
-	validTypes,
-	validVariants,
-	validIconPositions,
-	defaultColor,
-	defaultType,
-	defaultVariant,
-	defaultIconPosition,
-};
diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx
index 3338232..281f056 100644
--- a/src/components/Button/index.test.tsx
+++ b/src/components/Button/index.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {create} from 'react-test-renderer';
 import {Text} from 'react-native';
 import Icon from '../Icon';
-import BaseButton from '../BaseButton';
 import Loading from '../Loading';
 import Button from './';
 
@@ -12,8 +11,6 @@ const validData = {
 	icon: 'box',
 };
 
-const setIsPressed = jest.fn();
-const spyUseState = jest.spyOn(React, 'useState');
 jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 
@@ -35,29 +32,6 @@ describe('Button component', () => {
 			expect(name).toEqual(validData.icon);
 		});
 
-		it('when it is pressed', () => {
-			spyUseState.mockReturnValueOnce([false, setIsPressed]);
-
-			const {root} = create(
-				<Button
-					type={'main'}
-					variant={'contained'}
-					color={'primary'}
-					value="Button Test"
-					icon="box"
-					iconPosition={'left'}
-				/>
-			);
-
-			const ButtonComp = root.findByType(BaseButton);
-			const {onPressIn, onPressOut} = ButtonComp.props;
-
-			onPressIn();
-			onPressOut();
-
-			expect(setIsPressed).toBeCalledTimes(2);
-		});
-
 		it('when isLoading is true, show an loading spinner', () => {
 			const {root} = create(<Button icon={validData.icon} isLoading={validData.isLoading} />);
 			const LoadingComp = root.findByType(Loading);
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 581e589..2306b6c 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,10 +1,10 @@
-import React, {FC, useCallback, useState} from 'react';
+import React, {FC} from 'react';
 import {ViewStyle, StyleSheet, TextStyle, View} from 'react-native';
 import BaseButton, {BaseButtonProps} from '../BaseButton';
+import getButtonStyles from './utils/getButtonStyles';
 import Loading from '../Loading';
 import Text from '../Text';
 import Icon from '../Icon';
-import {getMixedButtonStyles} from './utils';
 
 export const types = {
 	main: 'main',
@@ -19,7 +19,7 @@ export const variant = {
 
 export const color = {
 	primary: 'primary',
-	secondary: 'secondary',
+	black: 'black',
 	success: 'success',
 	error: 'error',
 	warning: 'warning',
@@ -55,10 +55,9 @@ interface ButtonProps extends BaseButtonProps {
 	iconPosition?: keyIconPosition;
 	disabled?: boolean;
 	style?: ViewStyle;
+	pressedStyle?: ViewStyle;
 	iconStyle?: TextStyle;
 	textStyle?: TextStyle;
-	onPressIn?: () => void;
-	onPressOut?: () => void;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -67,46 +66,30 @@ const Button: FC<ButtonProps> = ({
 	color = 'primary',
 	iconPosition = 'left',
 	isLoading = false,
-	value = 'Button',
+	value = '',
 	icon = null,
 	disabled = false,
 	style,
 	iconStyle,
 	textStyle,
-	onPressIn = () => {},
-	onPressOut = () => {},
 	...props
 }) => {
-	const [isPressed, setIsPressed] = useState<Boolean>(false);
+	const validDisabled = disabled || isLoading;
 	const hasIconAndText = !!icon && !!value;
 	const borderRadius = variant === 'text' ? 6 : 50;
 
-	const params = {
+	const buttonStyles = getButtonStyles({
 		type,
 		variant,
 		color,
 		iconPosition,
 		isLoading,
-		isPressed,
 		disabled,
 		hasIconAndText,
-	};
-	const buttonStyle = getMixedButtonStyles(params);
-	const styles = StyleSheet.create(buttonStyle);
-
-	const handleOnPressIn = useCallback(() => {
-		setIsPressed(true);
-		onPressIn();
-	}, [onPressIn]);
+	});
+	const styles = StyleSheet.create(buttonStyles);
 
-	const handleOnPressOut = useCallback(() => {
-		setIsPressed(false);
-		onPressOut();
-	}, [onPressOut]);
-
-	const LoadingCompontent = (
-		<Loading isLoading={isLoading} color={buttonStyle.loadingColor} size={24} />
-	);
+	const LoadingCompontent = <Loading isLoading={isLoading} color={styles.loadingColor} size={24} />;
 
 	const WrapperComponent = (
 		<View style={styles.direction}>
@@ -118,10 +101,9 @@ const Button: FC<ButtonProps> = ({
 	return (
 		<BaseButton
 			style={[styles.container, style]}
-			onPressIn={handleOnPressIn}
-			onPressOut={handleOnPressOut}
-			disabled={disabled || isLoading}
+			pressedStyle={!validDisabled && styles.pressed}
 			borderRadius={borderRadius}
+			disabled={validDisabled}
 			{...props}>
 			{isLoading ? LoadingCompontent : WrapperComponent}
 		</BaseButton>
diff --git a/src/components/Button/theme/index.ts b/src/components/Button/theme/index.ts
deleted file mode 100644
index f80ffee..0000000
--- a/src/components/Button/theme/index.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {alert, base, black, error, primary, success, warning} from '../../../theme/palette';
-
-export const themeColors = {
-	primary: {
-		light: base.white,
-		main: primary.main,
-		dark: primary.dark,
-	},
-	secondary: {
-		light: base.white,
-		main: black.main,
-		dark: black.dark,
-	},
-	success: {
-		light: base.white,
-		main: success.main,
-		dark: success.dark,
-	},
-	error: {
-		light: base.white,
-		main: error.main,
-		dark: error.dark,
-	},
-	warning: {
-		light: base.white,
-		main: warning.main,
-		dark: warning.dark,
-	},
-	alert: {
-		light: base.white,
-		main: alert.main,
-		dark: alert.dark,
-	},
-};
diff --git a/src/components/Button/types/index.ts b/src/components/Button/types/index.ts
index ca25843..f45a18f 100644
--- a/src/components/Button/types/index.ts
+++ b/src/components/Button/types/index.ts
@@ -1,7 +1,6 @@
 import type {keyColor, keyIconPosition, keyType, keyVariant} from '../';
 
 export interface SelectedColor {
-	light: string;
 	main: string;
 	dark: string;
 }
@@ -12,7 +11,6 @@ export interface Params {
 	color: keyColor;
 	iconPosition: keyIconPosition;
 	isLoading: Boolean;
-	isPressed: Boolean;
 	disabled: Boolean;
 	hasIconAndText?: Boolean;
 }
@@ -20,13 +18,13 @@ export interface Params {
 export interface ReturnStyles {
 	container: object;
 	direction: object;
+	pressed: object;
 	icon: object;
 	text: object;
 	loadingColor: any;
 }
 
 export interface ContainerStyle {
-	isPressed: Boolean;
 	disabled: Boolean;
 	isLoading: Boolean;
 	color: keyColor;
@@ -41,7 +39,7 @@ export interface TextStyle {
 	color: keyColor;
 	disabled: Boolean;
 	isLoading: Boolean;
-	isPressed: Boolean;
+
 	hasIconAndText?: Boolean;
 	iconPosition: keyIconPosition;
 }
diff --git a/src/components/Button/utils/index.test.ts b/src/components/Button/utils/getButtonStyles/index.test.ts
similarity index 83%
rename from src/components/Button/utils/index.test.ts
rename to src/components/Button/utils/getButtonStyles/index.test.ts
index f2108e5..8f68645 100644
--- a/src/components/Button/utils/index.test.ts
+++ b/src/components/Button/utils/getButtonStyles/index.test.ts
@@ -1,4 +1,4 @@
-import {getMixedButtonStyles} from '.';
+import getButtonStyles from './';
 
 const validParams = {
 	type: 'secondary',
@@ -6,7 +6,6 @@ const validParams = {
 	color: 'secondary',
 	iconPosition: 'top',
 	isLoading: true,
-	isPressed: true,
 	disabled: true,
 	hasIconAndText: true,
 };
@@ -17,7 +16,6 @@ const failedParams = {
 	color: undefined,
 	iconPosition: undefined,
 	isLoading: false,
-	isPressed: false,
 	disabled: false,
 	hasIconAndText: false,
 };
@@ -25,7 +23,7 @@ const failedParams = {
 describe('getMixedButtonStyles util', () => {
 	it('return styles when params are passed correclty', () => {
 		// @ts-ignore
-		const response = getMixedButtonStyles(validParams);
+		const response = getButtonStyles(validParams);
 		expect(response).toEqual({
 			container: {
 				borderWidth: 1,
@@ -34,6 +32,7 @@ describe('getMixedButtonStyles util', () => {
 				paddingHorizontal: 16.5,
 				paddingVertical: 21,
 			},
+			pressed: {borderColor: '#2979FF', backgroundColor: '#fff'},
 			direction: {
 				justifyContent: 'center',
 				alignItems: 'center',
@@ -46,13 +45,13 @@ describe('getMixedButtonStyles util', () => {
 				fontSize: 29,
 			},
 			icon: {fontWeight: '500', textAlign: 'center', color: '#C4C6CC'},
-			loadingColor: '#2F2F2F',
+			loadingColor: '#2979FF',
 		});
 	});
 
 	it('returns default styles when params is not correct or no exist', () => {
 		// @ts-ignore
-		const response = getMixedButtonStyles(failedParams);
+		const response = getButtonStyles(failedParams);
 		expect(response).toEqual({
 			container: {
 				borderWidth: 1,
@@ -61,6 +60,7 @@ describe('getMixedButtonStyles util', () => {
 				paddingHorizontal: 16.5,
 				height: 104,
 			},
+			pressed: {borderColor: 'transparent', backgroundColor: '#1759FF'},
 			direction: {
 				justifyContent: 'center',
 				alignItems: 'center',
diff --git a/src/components/Button/utils/index.ts b/src/components/Button/utils/getButtonStyles/index.ts
similarity index 60%
rename from src/components/Button/utils/index.ts
rename to src/components/Button/utils/getButtonStyles/index.ts
index 9a9e2f4..0a7b037 100644
--- a/src/components/Button/utils/index.ts
+++ b/src/components/Button/utils/getButtonStyles/index.ts
@@ -1,36 +1,26 @@
-import {moderateScale, scaledForDevice} from '../../../scale';
-import {colorConfig, styleConfig} from '../theme/configs';
-import {themeColors} from '../theme';
+import {moderateScale, scaledForDevice} from '../../../../scale';
+import {palette} from '../../../../theme/palette';
+import {colorConfig, styleConfig} from './utils/styleConfigs';
+import {validTypes, validVariants, validIconPositions, verticalHeights} from './utils/constants';
 import {
 	defaultColor,
-	validTypes,
-	validVariants,
-	validIconPositions,
 	defaultIconPosition,
 	defaultType,
 	defaultVariant,
-	verticalHeights,
-} from '../constants';
-import type {
-	ContainerStyle,
-	DirectionStyle,
-	LoadingStyle,
-	Params,
-	ReturnStyles,
-	TextStyle,
-} from '../types';
+} from './utils/defaultValues';
+
+import type {ContainerStyle, DirectionStyle, Params, ReturnStyles, TextStyle} from '../../types';
 
 const containerStyle = ({
 	disabled: isDisabled,
-	isPressed,
 	isLoading,
 	color,
 	variant,
 	type,
 	iconPosition,
 }: ContainerStyle) => {
-	const selectedColor = themeColors[color] || themeColors[defaultColor];
-	const {main, pressed, disabled} = colorConfig(selectedColor);
+	const selectedColor = palette[color] || palette[defaultColor];
+	const {main, disabled} = colorConfig(selectedColor);
 
 	const {container} = styleConfig;
 
@@ -40,25 +30,18 @@ const containerStyle = ({
 	const mainBgColor = main.background[validVariant];
 	const mainBorderColor = main.border[validVariant];
 
-	const pressedBgColor = pressed.background[validVariant];
-	const pressedBorderColor = pressed.border[validVariant];
-
 	const disabledBgColor = disabled.background[validVariant];
 	const disabledBorderColor = disabled.border[validType][validVariant];
 
 	const containerHeight = container.height[validType];
 
-	// main and pressed button colors
-	const mainColor = isPressed ? pressedBgColor : mainBgColor;
-	const borderColor = isPressed ? pressedBorderColor : mainBorderColor;
-
 	// validation of height
 	const hasVerticalHeight = verticalHeights.includes(iconPosition);
 
 	return {
 		borderWidth: 1,
-		borderColor: isDisabled || isLoading ? disabledBorderColor : borderColor,
-		backgroundColor: isDisabled || isLoading ? disabledBgColor : mainColor,
+		borderColor: isDisabled || isLoading ? disabledBorderColor : mainBorderColor,
+		backgroundColor: isDisabled || isLoading ? disabledBgColor : mainBgColor,
 		paddingHorizontal: scaledForDevice(type === 'main' ? 12 : 8, moderateScale),
 		...(hasVerticalHeight && {paddingVertical: scaledForDevice(10, moderateScale)}),
 		...(!hasVerticalHeight && {
@@ -67,6 +50,18 @@ const containerStyle = ({
 	};
 };
 
+const pressedStyle = ({variant, color}: ContainerStyle) => {
+	const selectedColor = palette[color] || palette[defaultColor];
+	const {pressed} = colorConfig(selectedColor);
+
+	const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
+
+	return {
+		borderColor: pressed.border[validVariant],
+		backgroundColor: pressed.background[validVariant],
+	};
+};
+
 const directionWrapperStyle = ({iconPosition}: DirectionStyle) => {
 	const {directionWrapper} = styleConfig;
 
@@ -83,16 +78,9 @@ const directionWrapperStyle = ({iconPosition}: DirectionStyle) => {
 	};
 };
 
-const baseTextStyle = ({
-	disabled: isDisabled,
-	type,
-	variant,
-	color,
-	isLoading,
-	isPressed,
-}: TextStyle) => {
-	const selectedColor = themeColors[color] || themeColors[defaultColor];
-	const {main, pressed, disabled} = colorConfig(selectedColor);
+const baseTextStyle = ({disabled: isDisabled, type, variant, color, isLoading}: TextStyle) => {
+	const selectedColor = palette[color] || palette[defaultColor];
+	const {main, disabled} = colorConfig(selectedColor);
 
 	const {text: textStyle} = styleConfig;
 
@@ -100,14 +88,11 @@ const baseTextStyle = ({
 	const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
 
 	const mainTextColor = main.text[validType][validVariant];
-	const pressedTextColor = pressed.text[validType][validVariant];
 	const disabledTextColor = disabled.text[validType][validVariant];
 
-	const mainColor = isPressed ? pressedTextColor : mainTextColor;
-
 	return {
 		...textStyle,
-		color: isDisabled || isLoading ? disabledTextColor : mainColor,
+		color: isDisabled || isLoading ? disabledTextColor : mainTextColor,
 	};
 };
 
@@ -126,15 +111,13 @@ const iconStyle = (params: TextStyle) => {
 	};
 };
 
-const loadingColor = ({color}: LoadingStyle) => {
-	const selectedColor = themeColors[color] || themeColors[defaultColor];
-	return selectedColor.main;
-};
-
-export const getMixedButtonStyles = (params: Params): ReturnStyles => ({
+const getButtonStyles = (params: Params): ReturnStyles => ({
 	container: containerStyle(params),
+	pressed: pressedStyle(params),
 	direction: directionWrapperStyle(params),
 	text: textStyle(params),
 	icon: iconStyle(params),
-	loadingColor: loadingColor(params),
+	loadingColor: palette.primary.main,
 });
+
+export default getButtonStyles;
diff --git a/src/components/Button/utils/getButtonStyles/utils/constants/index.ts b/src/components/Button/utils/getButtonStyles/utils/constants/index.ts
new file mode 100644
index 0000000..5c19923
--- /dev/null
+++ b/src/components/Button/utils/getButtonStyles/utils/constants/index.ts
@@ -0,0 +1,6 @@
+const verticalHeights = ['top', 'bottom'];
+const validTypes = ['main', 'secondary'];
+const validVariants = ['contained', 'outlined', 'text'];
+const validIconPositions = ['top', 'bottom', 'left', 'right'];
+
+export {verticalHeights, validTypes, validVariants, validIconPositions};
diff --git a/src/components/Button/utils/getButtonStyles/utils/defaultValues/index.ts b/src/components/Button/utils/getButtonStyles/utils/defaultValues/index.ts
new file mode 100644
index 0000000..b1aa416
--- /dev/null
+++ b/src/components/Button/utils/getButtonStyles/utils/defaultValues/index.ts
@@ -0,0 +1,6 @@
+const defaultColor = 'primary';
+const defaultType = 'main';
+const defaultVariant = 'contained';
+const defaultIconPosition = 'left';
+
+export {defaultColor, defaultType, defaultVariant, defaultIconPosition};
diff --git a/src/components/Button/theme/configs/index.ts b/src/components/Button/utils/getButtonStyles/utils/styleConfigs/index.ts
similarity index 89%
rename from src/components/Button/theme/configs/index.ts
rename to src/components/Button/utils/getButtonStyles/utils/styleConfigs/index.ts
index cd18b4c..9c51ffa 100644
--- a/src/components/Button/theme/configs/index.ts
+++ b/src/components/Button/utils/getButtonStyles/utils/styleConfigs/index.ts
@@ -1,13 +1,13 @@
-import {moderateScale, scaledForDevice} from '../../../../scale';
-import {base, black, grey, white} from '../../../../theme/palette';
-import {SelectedColor} from '../../types';
+import {moderateScale, scaledForDevice} from '../../../../../../scale';
+import {base, black, grey, white} from '../../../../../../theme/palette';
+import {SelectedColor} from '../../../../types';
 
 export const colorConfig = (selectedColor: SelectedColor) => {
 	return {
 		main: {
 			background: {
 				contained: selectedColor.main,
-				outlined: selectedColor.light,
+				outlined: base.white,
 				text: 'transparent',
 			},
 			border: {
@@ -31,7 +31,7 @@ export const colorConfig = (selectedColor: SelectedColor) => {
 		pressed: {
 			background: {
 				contained: selectedColor.dark,
-				outlined: selectedColor.light,
+				outlined: base.white,
 				text: white.main,
 			},
 			border: {

From 510f588ca42fbe873d0c14e6ea7949da65053653 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Fri, 31 May 2024 14:03:45 -0300
Subject: [PATCH 14/20] correcciones - crear componente button

---
 App.tsx | 30 +++---------------------------
 1 file changed, 3 insertions(+), 27 deletions(-)

diff --git a/App.tsx b/App.tsx
index 2351c23..fc82556 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,33 +1,9 @@
-/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import {View} from 'react-native';
-import Button from './src/components/Button';
+import {View, Text} from 'react-native';
 
 const App = () => (
-	<View style={{padding: 20, flexDirection: 'row'}}>
-		<Button
-			value="Box Container"
-			icon="box"
-			type={'main'}
-			variant={'outlined'}
-			color="warning"
-			isLoading={false}
-			// iconPosition={'right'}
-			disabled={false}
-			style={{flex: 1}}
-		/>
-		<Button
-			value="Button with Box Icon"
-			icon="box"
-			isLoading={false}
-			type={'main'}
-			variant={'outlined'}
-			color={'primary'}
-			// iconPosition="right"
-			disabled={false}
-			style={{flex: 1}}
-			// iconStyle={{color: 'red', fontSize: 30}}
-		/>
+	<View>
+		<Text>UI native</Text>
 	</View>
 );
 

From 6ef5b294a60ace3074897e874751782e3f8c1982 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Fri, 31 May 2024 14:05:00 -0300
Subject: [PATCH 15/20] correcciones - crear componente button

---
 src/components/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 2306b6c..4f22ed7 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -66,7 +66,7 @@ const Button: FC<ButtonProps> = ({
 	color = 'primary',
 	iconPosition = 'left',
 	isLoading = false,
-	value = '',
+	value = 'Button',
 	icon = null,
 	disabled = false,
 	style,

From 6d95cf2a6ce9d028e106cdb3b88f88888e20d2df Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Fri, 31 May 2024 14:09:04 -0300
Subject: [PATCH 16/20] correcciones en crear componente button

---
 src/components/Button/index.tsx                      | 2 +-
 src/components/Button/types/index.ts                 | 6 +++---
 src/components/Button/utils/getButtonStyles/index.ts | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 4f22ed7..f27c0bc 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -84,7 +84,7 @@ const Button: FC<ButtonProps> = ({
 		color,
 		iconPosition,
 		isLoading,
-		disabled,
+		isDisabled: disabled,
 		hasIconAndText,
 	});
 	const styles = StyleSheet.create(buttonStyles);
diff --git a/src/components/Button/types/index.ts b/src/components/Button/types/index.ts
index f45a18f..ad2aae2 100644
--- a/src/components/Button/types/index.ts
+++ b/src/components/Button/types/index.ts
@@ -11,7 +11,7 @@ export interface Params {
 	color: keyColor;
 	iconPosition: keyIconPosition;
 	isLoading: Boolean;
-	disabled: Boolean;
+	isDisabled: Boolean;
 	hasIconAndText?: Boolean;
 }
 
@@ -25,7 +25,7 @@ export interface ReturnStyles {
 }
 
 export interface ContainerStyle {
-	disabled: Boolean;
+	isDisabled: Boolean;
 	isLoading: Boolean;
 	color: keyColor;
 	variant: keyVariant;
@@ -37,7 +37,7 @@ export interface TextStyle {
 	type: keyType;
 	variant: keyVariant;
 	color: keyColor;
-	disabled: Boolean;
+	isDisabled: Boolean;
 	isLoading: Boolean;
 
 	hasIconAndText?: Boolean;
diff --git a/src/components/Button/utils/getButtonStyles/index.ts b/src/components/Button/utils/getButtonStyles/index.ts
index 0a7b037..e383cf8 100644
--- a/src/components/Button/utils/getButtonStyles/index.ts
+++ b/src/components/Button/utils/getButtonStyles/index.ts
@@ -12,7 +12,7 @@ import {
 import type {ContainerStyle, DirectionStyle, Params, ReturnStyles, TextStyle} from '../../types';
 
 const containerStyle = ({
-	disabled: isDisabled,
+	isDisabled,
 	isLoading,
 	color,
 	variant,
@@ -78,7 +78,7 @@ const directionWrapperStyle = ({iconPosition}: DirectionStyle) => {
 	};
 };
 
-const baseTextStyle = ({disabled: isDisabled, type, variant, color, isLoading}: TextStyle) => {
+const baseTextStyle = ({isDisabled, type, variant, color, isLoading}: TextStyle) => {
 	const selectedColor = palette[color] || palette[defaultColor];
 	const {main, disabled} = colorConfig(selectedColor);
 

From 07a170d15d985fb82ada842d920a21f86ad49152 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Mon, 3 Jun 2024 10:23:31 -0300
Subject: [PATCH 17/20] correcciones en crear componente button

---
 storybook/stories/Button/Button.stories.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/storybook/stories/Button/Button.stories.js b/storybook/stories/Button/Button.stories.js
index bd54bc6..0823cd9 100644
--- a/storybook/stories/Button/Button.stories.js
+++ b/storybook/stories/Button/Button.stories.js
@@ -42,7 +42,7 @@ export default {
 			control: {type: 'select'},
 			options: {
 				Primary: 'primary',
-				Secondary: 'secondary',
+				Black: 'black',
 				Success: 'success',
 				Error: 'error',
 				Warning: 'warning',
@@ -78,7 +78,7 @@ SecondaryButtonProps.args = {
 	type: 'secondary',
 	variant: 'contained',
 	iconPosition: 'left',
-	color: 'primary',
+	color: 'black',
 	isLoading: false,
 	disabled: false,
 	style: {flex: 1},
@@ -94,7 +94,7 @@ CameraButtonProps.args = {
 	type: 'main',
 	variant: 'contained',
 	iconPosition: 'left',
-	color: 'secondary',
+	color: 'black',
 	isLoading: false,
 	disabled: false,
 	style: {flex: 1},

From e529061a0b05b3d8cfe1bc97e24fc425d5369376 Mon Sep 17 00:00:00 2001
From: Damian Morales <damian.morales@janis.im>
Date: Thu, 6 Jun 2024 12:43:45 -0300
Subject: [PATCH 18/20] correccion color loading en storybook web - componente
 button

---
 .storybook/preview-head.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 2b28e9d..22ea202 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -15,6 +15,11 @@
      font-style: normal;
      font-weight: normal;
    }
+
+  #story--components-button--camera-button-props svg {
+    stroke: #2979FF;
+    overflow: visible;
+  }
 </style>
  
  

From bcf0e08835b835f6369f28b97470fc1a25b64569 Mon Sep 17 00:00:00 2001
From: christian97dd <christian.dediego@fizzmod.com>
Date: Thu, 6 Jun 2024 14:07:49 -0300
Subject: [PATCH 19/20] merged button component

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3070c1c..474b0ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,11 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.7.0] - 2024-06-06
+
+- Added Button component.
+
 ## [1.6.0] - 2024-03-07
 
 - Added FullScreenMessage component.
 
 ## [1.5.0] - 2024-02-14
+
 ### Added
 
 - Added LayoutWithBottomButtons component.

From ad0c0f559d04320c4b236502bf19dcc8a9451e88 Mon Sep 17 00:00:00 2001
From: christian97dd <christian.dediego@fizzmod.com>
Date: Thu, 6 Jun 2024 14:08:10 -0300
Subject: [PATCH 20/20] 1.7.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3f3aaa4..eda46a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.6.0",
+	"version": "1.7.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@janiscommerce/ui-native",
-			"version": "1.6.0",
+			"version": "1.7.0",
 			"license": "ISC",
 			"dependencies": {
 				"@gorhom/bottom-sheet": "^4.5.1",
diff --git a/package.json b/package.json
index fd4bf2a..c736951 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.6.0",
+	"version": "1.7.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",