correccion 1 - crear componente button

janis-commerce · Apr 17, 2024 · 1281fa1 · 1281fa1
1 parent 9bbb575
commit 1281fa1
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 69 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)}
 							/>