crear componente icon

.ondevice/storybook.requires.js

@@ -1,64 +1,65 @@
 /* do not change this file, it is auto generated by storybook. */
 
 import {
-  configure,
-  addDecorator,
-  addParameters,
-  addArgsEnhancer,
-  clearDecorators,
-} from "@storybook/react-native";
+	configure,
+	addDecorator,
+	addParameters,
+	addArgsEnhancer,
+	clearDecorators,
+} from '@storybook/react-native';
 
 global.STORIES = [
-  {
-    titlePrefix: "",
-    directory: "./storybook/stories",
-    files: "**/*.stories.?(ts|tsx|js|jsx)",
-    importPathMatcher:
-      "^\\.[\\\\/](?:storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
-  },
+	{
+		titlePrefix: '',
+		directory: './storybook/stories',
+		files: '**/*.stories.?(ts|tsx|js|jsx)',
+		importPathMatcher:
+			'^\\.[\\\\/](?:storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
+	},
 ];
 
-import "@storybook/addon-ondevice-actions/register";
-import "@storybook/addon-ondevice-controls/register";
+import '@storybook/addon-ondevice-actions/register';
+import '@storybook/addon-ondevice-controls/register';
 
-import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs";
+import {argsEnhancers} from '@storybook/addon-actions/dist/modern/preset/addArgs';
 
-import { decorators, parameters } from "./preview";
+import {decorators, parameters} from './preview';
 
 if (decorators) {
-  if (__DEV__) {
-    // stops the warning from showing on every HMR
-    require("react-native").LogBox.ignoreLogs([
-      "`clearDecorators` is deprecated and will be removed in Storybook 7.0",
-    ]);
-  }
-  // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
-  clearDecorators();
-  decorators.forEach((decorator) => addDecorator(decorator));
+	if (__DEV__) {
+		// stops the warning from showing on every HMR
+		require('react-native').LogBox.ignoreLogs([
+			'`clearDecorators` is deprecated and will be removed in Storybook 7.0',
+		]);
+	}
+	// workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
+	clearDecorators();
+	decorators.forEach((decorator) => addDecorator(decorator));
 }
 
 if (parameters) {
-  addParameters(parameters);
+	addParameters(parameters);
 }
 
 try {
-  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
+	argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
 } catch {}
 
 const getStories = () => {
-  return {
-    "./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/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/stories/LoadingFullScreen/LoadingFullScreen.stories.js": require("../storybook/stories/LoadingFullScreen/LoadingFullScreen.stories.js"),
-    "./storybook/stories/RadioButton/RadioButton.stories.js": require("../storybook/stories/RadioButton/RadioButton.stories.js"),
-    "./storybook/stories/StatusChip/StatusChip.stories.js": require("../storybook/stories/StatusChip/StatusChip.stories.js"),
-    "./storybook/stories/Svg/Svg.stories.js": require("../storybook/stories/Svg/Svg.stories.js"),
-    "./storybook/stories/Text/Text.stories.js": require("../storybook/stories/Text/Text.stories.js"),
-  };
+	return {
+		'./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/stories/LoadingFullScreen/LoadingFullScreen.stories.js': require('../storybook/stories/LoadingFullScreen/LoadingFullScreen.stories.js'),
+		'./storybook/stories/StatusChip/StatusChip.stories.js': require('../storybook/stories/StatusChip/StatusChip.stories.js'),
+		'./storybook/stories/Svg/Svg.stories.js': require('../storybook/stories/Svg/Svg.stories.js'),
+		'./storybook/stories/Text/Text.stories.js': require('../storybook/stories/Text/Text.stories.js'),
+		'./storybook/stories/RadioButton/RadioButton.stories.js': require('../storybook/stories/RadioButton/RadioButton.stories.js'),
+	};
 };
 
 configure(getStories, module, false);

.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>
+
+
+
+

README.md

@@ -15,6 +15,24 @@ The minimum required versions for using the package are **react: 17.0.2** and **
 npm install @janiscommerce/ui-native
 ```
 
+## Icons Installation
+
+You will need to add the following lines in the **android/app/build.gradle** file:
+
+```sh
+  android {
+    ...
+    sourceSets {
+      main {
+        assets.srcDirs += [
+          'src/main/assets',
+          '../../node_modules/@janiscommerce/ui-native/dist/android/app/src/main/assets'
+        ]
+      }
+    }  
+  }
+```
+
 ## Usage Example
 
 A quick example of how to import a component and start using **@janiscommerce/ui-native**:

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')