crear componente icon

.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)?)$",
   },
 ];
 
@@ -50,6 +50,7 @@ const getStories = () => {
     "./storybook/stories/Avatar/Avatar.stories.js": require("../storybook/stories/Avatar/Avatar.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/Loading/Loading.stories.js": require("../storybook/stories/Loading/Loading.stories.js"),

.storybook/main.js

@@ -13,4 +13,5 @@ module.exports = {
 		autodocs: 'tag',
 	},
 	typescript: {reactDocgen: false},
+	staticDirs: ['../src/fonts/'],
 };

.storybook/preview-head.html

@@ -7,3 +7,16 @@
 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
 
 <!-- Or you can load custom head-tag JavaScript: -->
+
+<style>
+   @font-face {
+     font-family: 'janis-font-icon';
+     src: url('./janis-font-icon.ttf') format('truetype');
+     font-style: normal;
+     font-weight: normal;
+   }
+</style>
+
+
+
+

android/app/build.gradle

@@ -195,6 +195,8 @@ dependencies {
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
 
+    implementation project(':react-native-vector-icons')
+
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.fbjni'
     }
@@ -225,3 +227,4 @@ task copyDownloadableDepsToLibs(type: Copy) {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

android/settings.gradle

@@ -1,3 +1,6 @@
 rootProject.name = 'ui-native'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
+
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

package.json

@@ -63,6 +63,7 @@
 		"@testing-library/react-native": "^7.2.0",
 		"@types/jest": "^25.2.3",
 		"@types/react-native": "^0.63.2",
+		"@types/react-native-vector-icons": "^6.4.14",
 		"@types/react-test-renderer": "^16.9.2",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.32.0",
@@ -90,8 +91,8 @@
 		"react-test-renderer": "17.0.2",
 		"setup-env": "^2.0.0",
 		"storybook": "^6.5.4",
-		"webpack": "^5.52.0",
-		"typescript": "^5.1.6"
+		"typescript": "^5.1.6",
+		"webpack": "^5.52.0"
 	},
 	"resolutions": {
 		"@types/react": "^16"
@@ -112,6 +113,7 @@
 		"@storybook/cli": "^6.5.4",
 		"react-native-safe-area-context": "^4.6.4",
 		"react-native-svg": "12.1.1",
+		"react-native-vector-icons": "^9.2.0",
 		"react-native-web": "^0.15.0"
 	}
 }

react-native.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+	dependencies: {
+		'react-native-vector-icons': {
+			platforms: {
+				ios: null,
+			},
+		},
+	},
+};

src/components/Icon/index.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Icon from './index';
+import {create} from 'react-test-renderer';
+
+describe('Icon component', () => {
+	it('render correctly', () => {
+		const {toJSON} = create(<Icon name="iso_janis" />);
+
+		expect(toJSON()).toBeTruthy();
+	});
+
+	it('return null when name no exist', () => {
+		const {toJSON} = create(<Icon name={''} />);
+
+		expect(toJSON()).toBeNull();
+	});
+});

src/components/Icon/index.tsx

@@ -0,0 +1,25 @@
+import React, {FC} from 'react';
+import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
+import icoMoonConfig from './assets/fonts/selection.json';
+import {primary} from '../../theme/palette';
+
+const IconComponent = createIconSetFromIcoMoon(
+	icoMoonConfig,
+	'janis-font-icon',
+	'janis-font-icon.ttf'
+);
+
+interface Props {
+	name: string;
+	color?: string;
+	size?: number;
+}
+
+const Icon: FC<Props> = ({name, color = primary.main, size = 16, ...props}) => {
+	if (!name) {
+		return null;
+	}
+	return <IconComponent name={name} color={color} size={size} {...props} />;
+};
+
+export default Icon;

src/index.ts

@@ -6,5 +6,6 @@ import Svg from './components/Svg';
 import Loading from './components/Loading';
 import StatusChip from './components/StatusChip';
 import Input from './components/Input';
+import Icon from './components/Icon';
 
-export {Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input};
+export {Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, Icon};

storybook/decorators/CenterView/index.js

@@ -1,16 +1,27 @@
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {ScrollView, StyleSheet, View} from 'react-native';
 
 const CenterView = ({children}) => {
-	return <View style={styles.main}>{children}</View>;
+	return (
+		<ScrollView contentContainerStyle={styles.scrollView}>
+			<View style={styles.main}>{children}</View>
+		</ScrollView>
+	);
 };
 
 const styles = StyleSheet.create({
+	scrollView: {
+		paddingVertical: 25,
+		paddingHorizontal: 10,
+		backgroundColor: '#F5FCFF',
+	},
 	main: {
 		flex: 1,
+		display: 'flex',
+		flexWrap: 'wrap',
+		flexDirection: 'row',
 		justifyContent: 'center',
 		alignItems: 'center',
-		backgroundColor: '#F5FCFF',
 	},
 });