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] 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: {