pulled master and solved conflicts

.ondevice/storybook.requires.js

@@ -48,6 +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/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'),

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added progress bar component
+- Added base button component
+- Added list component
 
 ## [1.1.1] - 2023-10-31
 

src/components/BaseButton/index.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import {create} from 'react-test-renderer';
+import {Text, View} from 'react-native';
+import {palette} from '../../theme/palette';
+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},
+};
+
+describe('BaseButton Component', () => {
+	describe('return null when', () => {
+		it('when hasnt minimum props needed', () => {
+			const {toJSON} = create(<BaseButton />);
+			expect(toJSON()).toBeNull();
+		});
+	});
+
+	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', () => {
+			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} />);
+			expect(toJSON()).toBeTruthy();
+		});
+	});
+});

src/components/BaseButton/index.tsx

@@ -0,0 +1,91 @@
+import React, {FC} from 'react';
+import {Pressable, PressableProps, ViewStyle, StyleSheet} from 'react-native';
+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;
+	borderRadius?: number;
+	pressedColor?: string;
+	style?: ViewStyle;
+	iconStyle?: ViewStyle;
+	textStyle?: ViewStyle;
+	children?: React.ReactNode;
+}
+
+const BaseButton: FC<BaseButtonProps> = ({
+	title = null,
+	icon = null,
+	iconRight = false,
+	disabled = false,
+	borderRadius = 0,
+	pressedColor,
+	style,
+	iconStyle,
+	textStyle,
+	children = null,
+	...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;
+	const styles = StyleSheet.create({
+		container: {
+			display: 'flex',
+			flexDirection: 'row',
+			alignItems: 'center',
+			justifyContent: 'center',
+			paddingHorizontal: 16,
+			paddingVertical: 10,
+			borderRadius,
+			backgroundColor: bgColor,
+		},
+		icon: {
+			color: palette.base.white,
+			paddingRight: iconPaddingRight,
+			paddingLeft: iconPaddingLeft,
+		},
+		title: {
+			fontSize: 14,
+			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>
+	);
+};
+
+export default BaseButton;

src/components/Icon/index.tsx

@@ -13,6 +13,7 @@ interface Props {
 	name: string;
 	color?: string;
 	size?: number;
+	style?: any;
 }
 
 const Icon: FC<Props> = ({name, color = primary.main, size = 16, ...props}) => {

src/index.ts

@@ -20,6 +20,7 @@ import {
 import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
+import BaseButton from './components/BaseButton';
 
 export {
 	Text,
@@ -42,4 +43,5 @@ export {
 	Carousel,
 	ProgressBar,
 	List,
+	BaseButton,
 };

storybook/stories/BaseButton/BaseButton.stories.js

@@ -0,0 +1,80 @@
+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,
+};