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

…into JUIP-133-añadir-posibilidad-de-intercambiar-entre-storybook-y-app

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
 		'react/static-property-placement': 'off',
 		'react/jsx-props-no-spreading': 'off',
 		'no-param-reassign': 'off',
+		'no-shadow': 'off',
 		'no-console': 'error',
 	},
 };

.ondevice/storybook.requires.js

@@ -48,12 +48,14 @@ 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'),
 		'./storybook/stories/DesignStystem/Icons.stories.js': require('../storybook/stories/DesignStystem/Icons.stories.js'),
 		'./storybook/stories/Image/Image.stories.js': require('../storybook/stories/Image/Image.stories.js'),
 		'./storybook/stories/Input/Input.stories.js': require('../storybook/stories/Input/Input.stories.js'),
+		'./storybook/stories/List/List.stories.js': require('../storybook/stories/List/List.stories.js'),
 		'./storybook/stories/Loading/Loading.stories.js': require('../storybook/stories/Loading/Loading.stories.js'),
 		'./storybook/stories/LoadingFullScreen/LoadingFullScreen.stories.js': require('../storybook/stories/LoadingFullScreen/LoadingFullScreen.stories.js'),
 		'./storybook/stories/ProgressBar/ProgressBar.stories.js': require('../storybook/stories/ProgressBar/ProgressBar.stories.js'),

CHANGELOG.md

@@ -10,6 +10,9 @@ 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
+- Added possibility to change between app mode and storybook app mode
 
 ## [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/components/Input/index.tsx

@@ -19,7 +19,6 @@ import {
 	showStatusMessage,
 } from './utils';
 
-// eslint-disable-next-line no-shadow
 export enum keyboardTypes {
 	default = 'default',
 	numberPad = 'number-pad',

src/components/List/index.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {create} from 'react-test-renderer';
+import {Text, View} from 'react-native';
+import List, {TypeList} from './';
+
+const data = [
+	{id: 1, nombre: 'nombre1'},
+	{id: 2, nombre: 'nombre2'},
+];
+
+const renderComponent = ({item}) => (
+	<View key={item.id}>
+		<Text>{item.nombre}</Text>
+	</View>
+);
+
+describe('List component', () => {
+	describe('returns null when ', () => {
+		it('data is not correct', () => {
+			const {toJSON} = create(<List data={undefined} renderComponent={renderComponent} />);
+			expect(toJSON()).toBeNull();
+		});
+	});
+
+	describe('render correctlt when', () => {
+		it('data is array type and type is flatList per default', () => {
+			const {toJSON} = create(<List data={data} renderComponent={renderComponent} />);
+			expect(toJSON()).toBeTruthy();
+		});
+
+		it('data is array type and type is scrollView', () => {
+			const {toJSON} = create(
+				<List data={data} type={TypeList.ScrollView} renderComponent={renderComponent} />
+			);
+			expect(toJSON()).toBeTruthy();
+		});
+	});
+});

src/components/List/index.tsx

@@ -0,0 +1,35 @@
+import React, {FC} from 'react';
+import {FlatList, ScrollView, FlatListProps, ScrollViewProps} from 'react-native';
+
+type TypeData = string | number | object | [] | React.ReactElement;
+type RCProps = {
+	item: TypeData;
+	index: number;
+};
+type TypeRenderComponent = ({item, index}: RCProps) => React.ReactElement;
+export enum TypeList {
+	FlatList = 'flatList',
+	ScrollView = 'scrollView',
+}
+
+interface ListProps {
+	data: TypeData[] | undefined;
+	renderComponent: TypeRenderComponent;
+	type?: TypeList;
+}
+type MergedProps = ListProps & (FlatListProps<TypeData> | ScrollViewProps);
+
+const List: FC<MergedProps> = ({data, renderComponent, type = TypeList.FlatList, ...props}) => {
+	if (!data?.length) {
+		return null;
+	}
+
+	const FlatListComponent = () => <FlatList data={data} renderItem={renderComponent} {...props} />;
+	const ScrollViewComponent = () => (
+		<ScrollView {...props}>{data.map((item, index) => renderComponent({item, index}))}</ScrollView>
+	);
+
+	return type === TypeList.FlatList ? <FlatListComponent /> : <ScrollViewComponent />;
+};
+
+export default List;

src/components/Select/index.tsx

@@ -6,7 +6,6 @@ import ChevronIcon from './Components/Icons/Chevron';
 import DeleteIcon from './Components/Icons/Delete';
 import Dropdown from './Components/Dropdown';
 
-// eslint-disable-next-line no-shadow
 enum KeyboardTypes {
 	Default = 'default',
 	NumberPad = 'number-pad',

src/index.ts

@@ -19,6 +19,8 @@ import {
 } from './components/SwipeUp/childComponents';
 import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
+import List from './components/List';
+import BaseButton from './components/BaseButton';
 
 export {
 	Text,
@@ -40,4 +42,6 @@ export {
 	SwipeUpView,
 	Carousel,
 	ProgressBar,
+	List,
+	BaseButton,
 };