pull master

.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',
 	},
 };

.gitignore

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

.ondevice/storybook.requires.js

@@ -14,7 +14,7 @@ global.STORIES = [
 		directory: './storybook/stories',
 		files: '**/*.stories.?(ts|tsx|js|jsx)',
 		importPathMatcher:
-			'^\\.[\\\\/](?:storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
+			'^\\.[\\\\/](?:storybook[\\\\/]stories(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
 	},
 ];
 
@@ -55,6 +55,7 @@ const getStories = () => {
 		'./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

@@ -7,10 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.0] - 2023-12-06
 ### 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
 

index.js

@@ -4,7 +4,8 @@ import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
 import Storybook from './storybook';
+import {LOAD_STORYBOOK} from './env.json';
 
-const Component = __DEV__ ? Storybook : App;
+const Component = LOAD_STORYBOOK ? Storybook : App;
 
 AppRegistry.registerComponent(appName, () => Component);

package.json

@@ -1,15 +1,17 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
 	"files": [
 		"dist"
 	],
 	"scripts": {
-		"android": "sb-rn-get-stories --config-path .ondevice && react-native run-android",
-		"ios": "sb-rn-get-stories --config-path .ondevice && react-native run-ios",
+		"android": "node scripts/set-app-mode.js app && react-native run-android",
+		"ios": "node scripts/set-app-mode.js app && react-native run-ios",
+		"storybook:android": "node scripts/set-app-mode.js storybook && sb-rn-get-stories --config-path .ondevice && react-native run-android",
+		"storybook:ios": "node scripts/set-app-mode.js storybook && sb-rn-get-stories --config-path .ondevice && react-native run-ios",
 		"start": "react-native start",
 		"test": "jest",
 		"lint": "eslint .",
@@ -18,7 +20,7 @@
 		"test:commit": "jest --colors --bail --findRelatedTests",
 		"test:coverage": "tsc --noEmit && jest --collectCoverage --detectOpenHandles",
 		"build": "rm -rf dist && tsc && cp -r android ios dist",
-		"storybook": "react-native-storybook-server",
+		"storybook-server": "react-native-storybook-server",
 		"storybook-watcher": "sb-rn-watcher --config-path .ondevice",
 		"update-stories": "sb-rn-get-stories --config-path .ondevice",
 		"storybook-web": " npm run storybook-web-build && start-storybook -p 6006 --config-dir ./.storybook",

scripts/set-app-mode.js

@@ -0,0 +1,10 @@
+const fs = require('fs');
+
+const mode = process.argv[2];
+
+const modes = {
+	app: 0,
+	storybook: 1,
+};
+
+fs.writeFileSync('env.json', `{LOAD_STORYBOOK:${!!modes[mode]}}`);

src/components/Input/index.tsx

@@ -20,7 +20,6 @@ import {
 } from './utils';
 import {moderateScale, horizontalScale} from '../../scale';
 
-// 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

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

src/index.ts

@@ -19,6 +19,7 @@ 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';
 import * as getScale from './scale';
 
@@ -42,6 +43,7 @@ export {
 	SwipeUpView,
 	Carousel,
 	ProgressBar,
+	List,
 	BaseButton,
 	getScale,
 };

storybook/stories/List/List.stories.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import List from '../../../src/components/List';
+import {StyleSheet, Text, View} from 'react-native';
+import {white} from '../../../src/theme/palette';
+
+export default {
+	title: 'Components/List',
+	argTypes: {
+		type: {
+			options: ['flatList', 'scrollView'],
+			control: {type: 'select'},
+		},
+	},
+};
+
+const fakeData = [
+	{
+		id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+		title: 'First Item',
+	},
+	{
+		id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+		title: 'Second Item',
+	},
+	{
+		id: '58694a0f-3da1-471f-bd96-145571e29d72',
+		title: 'Third Item',
+	},
+	{
+		id: '4e8372e6-5c86-4b0c-9f17-1a1d56b9a0e1',
+		title: 'Fourth Item',
+	},
+	{
+		id: '8f4c57e8-2763-498d-9c99-720a1f4eae03',
+		title: 'Fifth Item',
+	},
+	{
+		id: 'f6fe346e-80b8-4f91-8f27-2a3d49d18e9b',
+		title: 'Sixth Item',
+	},
+	{
+		id: '9c2ec5bb-89b1-4a7d-9759-2f7d3187b3a2',
+		title: 'Seventh Item',
+	},
+	{
+		id: '2d8c54fb-1a7b-4e5a-946d-789864cf05c3',
+		title: 'Eighth Item',
+	},
+	{
+		id: '7e1e9e6d-586b-4b2e-90a2-21f20c1b6b9e',
+		title: 'Ninth Item',
+	},
+	{
+		id: 'b4962f5f-e7e1-4d0f-923a-7941e86c7c90',
+		title: 'Tenth Item',
+	},
+];
+
+const styles = StyleSheet.create({
+	container: {
+		height: 400,
+		borderRadius: 6,
+		overflow: 'scroll',
+	},
+	wrapperChildren: {
+		padding: 20,
+		backgroundColor: white.main,
+		marginBottom: 2,
+	},
+});
+
+const renderComponent = ({item}) => (
+	<View key={item.id} style={styles.wrapperChildren}>
+		<Text>{item.title}</Text>
+	</View>
+);
+
+export const DefaultProps = (props) => (
+	<List {...props} style={styles.container} keyExtractor={(item) => item.id} />
+);
+
+DefaultProps.storyName = 'Default List';
+
+DefaultProps.args = {
+	data: fakeData,
+	type: 'flatList',
+	renderComponent,
+};