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

…SRN-340-implementación-del-componente-typography

.gitignore

@@ -68,4 +68,8 @@ dist/
 
 # Static storybook page
 .storybook_static
-.docs
+.docs
+
+# Environments handler
+/env.json
+.env

CHANGELOG.md

@@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.10.3] - 2024-10-24
+
+### Fixed
+
+- Adjusted action button and close button's sizing for toast component
+
+## [1.10.2] - 2024-10-23
+
+### Fixed
+
+- Fixed shadow and pressed shadow for base card list component
+
+## [1.10.1] - 2024-10-22
+
+### Fixed
+
+- Fixed shadow for base card list component
+
+## [1.10.0] - 2024-10-14
+
+### Fixed
+
+- Fixed an error with layout buttons
+
+### Added
+
+- Added swipe item selection list component
+- Added MainCardList component.
+
 ## [1.9.0] - 2024-07-22
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.9.0",
+	"version": "1.10.3",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",

src/components/atoms/BaseCardList/index.tsx

@@ -18,10 +18,14 @@ const BaseCardList: FC<BaseCardListProps> = ({children, isSelected = false, styl
 			borderRadius: 20,
 			width: '100%',
 			padding: 16,
+			elevation: 2,
+			shadowColor: palette.black.main,
 		},
 		selectedContainer: {
 			borderWidth: 2,
 			borderColor: palette.primary.main,
+			elevation: 4,
+			shadowColor: palette.primary.main,
 		},
 	});
 

src/components/atoms/RadioButton/index.tsx

@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
 
 	row: {
 		flexDirection: 'row',
-		justifyContent: 'flex-start',
+		justifyContent: 'space-between',
 	},
 	reverseRow: {
 		flexDirection: 'row-reverse',

src/components/molecules/Button/index.test.tsx

@@ -15,6 +15,14 @@ jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 
 describe('Button component', () => {
+	describe('it does not render', () => {
+		it('as there is no value nor icon', () => {
+			const ButtonComponent = create(<Button />).toJSON();
+
+			expect(ButtonComponent).toBeFalsy();
+		});
+	});
+
 	describe('it renders correctly', () => {
 		it('when it has valie as minimum prop', () => {
 			const {root} = create(<Button value={validData.value} />);

src/components/molecules/Button/index.tsx

@@ -66,14 +66,18 @@ const Button: FC<ButtonProps> = ({
 	color = 'primary',
 	iconPosition = 'left',
 	isLoading = false,
-	value = 'Button',
+	value = '',
 	icon = null,
 	disabled = false,
 	style,
 	iconStyle,
 	textStyle,
 	...props
 }) => {
+	if (!value && !icon) {
+		return null;
+	}
+
 	const validDisabled = disabled || isLoading;
 	const hasIconAndText = !!icon && !!value;
 	const borderRadius = variant === 'text' ? 6 : 50;
@@ -89,12 +93,12 @@ const Button: FC<ButtonProps> = ({
 	});
 	const styles = StyleSheet.create(buttonStyles);
 
-	const LoadingCompontent = <Loading isLoading={isLoading} color={styles.loadingColor} size={24} />;
+	const LoadingComponent = <Loading isLoading={isLoading} color={styles.loadingColor} size={24} />;
 
 	const WrapperComponent = (
 		<View style={styles.direction}>
 			{icon && <Icon name={icon} style={[styles.icon, iconStyle]} size={24} />}
-			{value && <Text style={[styles.text, textStyle]}>{value}</Text>}
+			{!!value && <Text style={[styles.text, textStyle]}>{value}</Text>}
 		</View>
 	);
 
@@ -105,7 +109,7 @@ const Button: FC<ButtonProps> = ({
 			borderRadius={borderRadius}
 			disabled={validDisabled}
 			{...props}>
-			{isLoading ? LoadingCompontent : WrapperComponent}
+			{isLoading ? LoadingComponent : WrapperComponent}
 		</BaseButton>
 	);
 };

src/components/molecules/Button/utils/getButtonStyles/index.test.ts

@@ -42,9 +42,17 @@ describe('getMixedButtonStyles util', () => {
 				fontWeight: '500',
 				textAlign: 'center',
 				color: '#C4C6CC',
+				fontFamily: 'Roboto-Medium',
+				letterSpacing: 0,
 				fontSize: 29,
 			},
-			icon: {fontWeight: '500', textAlign: 'center', color: '#C4C6CC'},
+			icon: {
+				fontWeight: '500',
+				fontFamily: 'Roboto-Medium',
+				letterSpacing: 0,
+				textAlign: 'center',
+				color: '#C4C6CC',
+			},
 			loadingColor: '#2979FF',
 		});
 	});
@@ -70,9 +78,17 @@ describe('getMixedButtonStyles util', () => {
 				fontWeight: '500',
 				textAlign: 'center',
 				color: '#fff',
+				fontFamily: 'Roboto-Medium',
+				letterSpacing: 0,
 				fontSize: 29,
 			},
-			icon: {fontWeight: '500', textAlign: 'center', color: '#fff'},
+			icon: {
+				fontWeight: '500',
+				textAlign: 'center',
+				color: '#fff',
+				fontFamily: 'Roboto-Medium',
+				letterSpacing: 0,
+			},
 			loadingColor: '#2979FF',
 		});
 	});

src/components/molecules/Button/utils/getButtonStyles/utils/styleConfigs/index.ts

@@ -108,6 +108,8 @@ export const styleConfig = {
 	text: {
 		fontWeight: '500',
 		textAlign: 'center',
+		fontFamily: 'Roboto-Medium',
+		letterSpacing: 0,
 	},
 	icon: {
 		margin: {

src/components/molecules/ItemSelectionButton/index.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {create} from 'react-test-renderer';
+import ItemSelectionButton from './index';
+import CheckBox from 'atoms/CheckBox';
+import RadioButton from 'atoms/RadioButton';
+import {TouchableOpacity} from 'react-native';
+
+describe('ItemSelectionButton component', () => {
+	describe('does not render', () => {
+		it('as name prop is not passed', () => {
+			const {toJSON} = create(<ItemSelectionButton name="" />);
+
+			expect(toJSON()).toBeNull();
+		});
+	});
+
+	it('should render with checkbox at the right', () => {
+		const ItemSelectionButtonComp = create(
+			<ItemSelectionButton name="Warehouse" rightSelection />
+		).root;
+		const CheckboxComp = ItemSelectionButtonComp.findByType(CheckBox);
+
+		expect(CheckboxComp).toBeTruthy();
+	});
+
+	it('should render with checkbox at the left and press it', () => {
+		const ItemSelectionButtonComp = create(
+			<ItemSelectionButton name="Warehouse" leftSelection />
+		).root;
+
+		const Touchable = ItemSelectionButtonComp.findByType(TouchableOpacity);
+		const {onPress: onSelection} = Touchable.props;
+
+		onSelection();
+
+		const CheckboxComp = ItemSelectionButtonComp.findByType(CheckBox);
+
+		expect(CheckboxComp).toBeTruthy();
+	});
+
+	it('should render with radioButton at the right', () => {
+		const ItemSelectionButtonComp = create(
+			<ItemSelectionButton name="Warehouse" radioButton rightSelection />
+		).root;
+		const RadioButtonComp = ItemSelectionButtonComp.findByType(RadioButton);
+
+		expect(RadioButtonComp).toBeTruthy();
+	});
+
+	it('should render with radioButton at the left', () => {
+		const ItemSelectionButtonComp = create(
+			<ItemSelectionButton name="Warehouse" radioButton leftSelection />
+		).root;
+		const RadioButtonComp = ItemSelectionButtonComp.findByType(RadioButton);
+
+		expect(RadioButtonComp).toBeTruthy();
+	});
+});

src/components/molecules/ItemSelectionButton/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import RadioButton from 'atoms/RadioButton';
+import CheckBox from 'atoms/CheckBox';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import Text from 'atoms/Text';
+import {palette} from 'theme/palette';
+import {horizontalScale, moderateScale, scaledForDevice, verticalScale} from 'scale';
+
+export interface ItemSelectionButtonProps {
+	name: string;
+	selected?: boolean;
+	radioButton?: boolean;
+	leftSelection?: boolean;
+	rightSelection?: boolean;
+	onSelection?: () => {};
+}
+
+const validPaddingHorizontal = scaledForDevice(16, horizontalScale);
+const validMarginVertical = scaledForDevice(13, moderateScale);
+
+const styles = StyleSheet.create({
+	container: {
+		justifyContent: 'center',
+	},
+	radioButtonContainer: {
+		display: 'flex',
+		height: verticalScale(48),
+		borderRadius: verticalScale(4),
+	},
+	checkBoxContainer: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		paddingHorizontal: validPaddingHorizontal,
+		marginVertical: validMarginVertical,
+		alignItems: 'center',
+		height: 'auto',
+	},
+	text: {
+		fontSize: 16,
+		fontWeight: '400',
+		color: palette.black.main,
+		textTransform: 'capitalize',
+	},
+	separator: {
+		alignSelf: 'center',
+		borderBottomColor: palette.grey[200],
+		borderBottomWidth: verticalScale(1),
+		width: '90%',
+	},
+});
+
+const ItemSelectionButton: React.FC<ItemSelectionButtonProps> = ({
+	name,
+	selected = false,
+	radioButton = false,
+	leftSelection = false,
+	rightSelection = false,
+	onSelection = () => {},
+}) => {
+	if (!name) {
+		return null;
+	}
+
+	const checkPosition = rightSelection || (!rightSelection && !leftSelection) ? 'right' : 'left';
+
+	const renderSelectionComponent = () => {
+		if (!radioButton) {
+			return <CheckBox onPress={onSelection as () => {}} checked={selected} customSize={24} />;
+		}
+
+		return (
+			<RadioButton
+				onPress={onSelection as () => {}}
+				selected={selected}
+				checkPosition={checkPosition}
+				checkSize="md">
+				<Text style={styles.text}>{name}</Text>
+			</RadioButton>
+		);
+	};
+
+	return (
+		<View style={styles.container}>
+			<TouchableOpacity
+				style={[
+					radioButton && styles.radioButtonContainer,
+					!radioButton && styles.checkBoxContainer,
+				]}
+				onPress={onSelection}>
+				{leftSelection && !rightSelection && renderSelectionComponent()}
+				{!radioButton && <Text style={styles.text}>{name}</Text>}
+				{((rightSelection && !leftSelection) || (!rightSelection && !leftSelection)) &&
+					renderSelectionComponent()}
+			</TouchableOpacity>
+			<View style={styles.separator} />
+		</View>
+	);
+};
+
+export default ItemSelectionButton;