crear componente icon

[dam788]

Link de Tarea:
https://janiscommerce.atlassian.net/browse/JUIP-85

Link de Subatarea:
https://janiscommerce.atlassian.net/browse/JUIP-119

Contexto:
Actualmente no contamos con un componente Icon reutilizable, por lo que nos obliga en todas las apps a tener código repetido, y en caso de querer hacer alguna modificación, se deberá cambiar en las 3 apps por igual.

Necesidad:
Tener el componente Icon reutilizable disponible en el package UI para facilitar su escalabilidad

Props que debe aceptar:

Prop	Default	Requerido	Tipo	Obs
name		true	string
color	#2979FF	false	string	tomar el color por default de la paleta del package
size	16	false	number

Análisis funcional

1. Instalar el package react-native-vector-icons
2. Seguir la instalación para android y ios GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling. : necesitamos el archivo iconmoon.ttf y selection.json. El asset se puede descargar desde:
   - Assets Apps
3. Crear el componente Icon
4. Crear muestrario de iconos en Icon.stories.js

Como se puede probar?:

• Linkear package con yalc -> https://janiscommerce.atlassian.net/wiki/spaces/JAPP/pages/2341765125/C+mo+trabajo+con+el+package+UI
• importar componente dentro de alguna app de janis:

import {Icon} from '@janiscommerce/ui-native';

...
<Icon name="iso_janis" size={60} />

Screenshoots

[pablonortiz]

Acá habría que agregar:

argTypes: { color: { control: {type: 'color'}, }, },

para que el controlador del color sea un color picker

[pablonortiz]

Estuve viendo el storybook-web pero no se están viendo los iconos, estuve probando un par de cosas y puede ser que porque cuándo se generan los archivos de .storybook_static, en el iframe.html queda la ubicación de '../assets/public/janis-font-icon.ttf'.

Me parece que lo mejor sería agregar la propiedad staticDirs: ['../src/fonts'], dentro del main.js de .storybook, esto hace que cuándo se generen los archivos de storybook-web, también se van a estar agregando las fuentes custom que tengamos en esa carpeta fonts

Y también modificar el preview-head.html para que, en vez de estar tomando ../assets/public/janis-font-icon.ttf cómo lo está haciendo, tome ../janis-font-icon.ttf. Igualmente probé y todavía no están apareciendo los iconos en web, pero me parece que por ese lado se podría encarar.

[coveralls]

Pull Request Test Coverage Report for Build 6484798199

• 5 of 5 (100.0%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 100.0%

---

Totals
Change from base Build 6356436753:	0.0%
Covered Lines:	171
Relevant Lines:	171

---

💛 - Coveralls

[GonzaFran]

El componente funciona excelente, faltaría pullearse master a la branch para corregir este problema que está pasando cuando tratas de ver los colores desde android. Falta eso nada más y estaríamos.

[christian97dd]

Dami!, estuve probando de linkear delivery con ui native eliminando la fuente de íconos para ver si seguía funcionando. No funcionó :p

La semana que viene nos juntamos para ver como podemos hacer, porque estuve probando también un par de alternativas, pero no funcionaron