JUIP-148 Crear componente Button

[dam788]

LINK DE TICKET:

https://janiscommerce.atlassian.net/browse/JUIP-143

DESCRIPCIÓN DEL REQUERIMIENTO:

Contexto
Actualmente tenemos un boton en la libreria que lo conocemos como BaseButton que hace todo.

Necesidad
Crear un nuevo componente de botón que pueda ser utilizado dentro de la librería de componentes existente. Este botón debe tener la capacidad de aceptar varias propiedades para personalizar su apariencia y comportamiento, incluyendo variantes de estilo, colores personalizados y la opción de incluir un icono.

¿Qué necesitamos lograr con este botón? Nuestro objetivo es desarrollar un botón versátil que pueda adaptarse a diferentes estilos de diseño y necesidades de nuestras aplicaciones. Queremos que sea una herramienta poderosa que nos ayude a mantener una apariencia coherente en todas nuestras aplicaciones, al tiempo que nos permite reutilizar fácilmente el código.
Características del botón:

Estilos adaptables:

El botón debe admitir dos estilos diferentes: "outlined" , "contained" y “text“. Esto nos permitirá usarlo en una variedad de contextos y respetar las especificaciones de diseño de cada aplicación.

Personalización de colores:

Utilizaremos la paleta de colores existente, que incluye colores primarios, secundarios, grises y de estado. Esto asegurará que el botón se integre perfectamente en nuestras aplicaciones y mantenga una apariencia coherente en todo momento.

Soporte para iconos:

El botón debe ser capaz de incluir un icono, ya sea antes o después del texto. La inclusión de iconos es opcional, pero necesaria en ciertos casos.

Objetivos:

Facilitar el trabajo del equipo al proporcionar un botón que sea fácil de integrar y personalizar en nuestras aplicaciones.

Promover la reutilización de código y mantener una apariencia coherente en todas nuestras aplicaciones.

Brindar una oportunidad de aprendizaje y crecimiento para el desarrollador encargado de esta tarea.

Que vamos a conseguir con esto?
No vamos a usar mas el BaseButton exportandolo desde la libreria, sino que el componente Button lo usara internamente como base para extender y usaremos en las distintas apps el componente Button. (Tener en cuenta comentario mas abajo que el cambio tiene que ser retro)

Contar con un boton nuevo que permita mediante props mostrarlo segun el diseño planteado en los rediseños.

DESCRIPCIÓN DE LA SOLUCIÓN:

• se modificó BaseButton para llevarlo a la minima expresión del cual podemos extender para crear nuevos desarrollo de botón según convenga.
• Se creó el componente Button el cual posee las siguientes props:

CÓMO SE PUEDE PROBAR?

Desde ui-native:

• Copiamos esto en App.tsx:

import React from 'react';
import {View} from 'react-native';
import Button from './src/components/Button';

const App = () => (
	<View style={{padding: 20, flexDirection: 'row'}}>
		<Button
			value={null}
			icon="box"
			isLoading={false}
			type={'main'}
			variant={'contained'}
			color={'primary'}
			// iconPosition={'right}
			disabled={false}
			// style={}
		/>
		<Button
			value="Button with Box Icon"
			icon="box"
			isLoading={false}
			type={'main'}
			variant={'outlined'}
			color={'primary'}
			iconPosition={'left'}
			disabled={false}
			style={{marginLeft: 6, flex: 1}}
			iconStyle={{color: 'red', fontSize: 30}}
		/>
	</View>
);

export default App;

• Ahora tiramos los comandos: npm start y npm run android

Desde storybook:

• Tirar comando: npm start y npm run storybook:android

Desde una de la app:

• Tirar comando yalc push && yalc publish en ui-native .
• En la app que quieras probar: yalc add @janiscommerce/ui-native y npm i.

SCREENSHOTS:

LINK PR QA:

DATOS EXTRA A TENER EN CUENTA:

Figma -> LINK

CHANGELOG:

[pablonortiz]

Lo estuve probando en Delivery y lo vi bien, me parece perfecto cómo fuiste sacando la lógica en distintas utils y constantes, lo que dejo el componente bastante limpio y legible

[GonzaFran]

@dam788 lo probé en WMS y lo vi muy bueno, lo único que agregaría sería que, en las props, te sugiera opciones para usar en las propiedades [variant, color, iconPosition, etc.], algo así:

Fijate que pablo lo había armado para el componente avatar. Si es fácil de adaptar buenisimo, si es mucho laburo dejalo así, pero creo que facilita mucho su uso si te sugiere valores para las props.
Cualquier cosa avisame y lo vuelvo a ver.

[coveralls]

Pull Request Test Coverage Report for Build 9403895608

Details

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

---

Totals
Change from base Build 8191728363:	0.0%
Covered Lines:	506
Relevant Lines:	506

---

💛 - Coveralls

[Maukr]

Hola @dam788 3 cosas que noté haciendo pruebas:
1- El type secondary y type primary cambian el alto del botón, esto es esperado?
Prueba:

		<Button
			value="Button with Box Icon"
			icon="box"
			isLoading={false}
			type={'secondary'}
			variant={'outlined'}
			color={'primary'}
			iconPosition={'left'}
			disabled={false}
			style={{marginLeft: 6}}
		/>
		<Button
			value="Button with Box Icon"
			icon="box"
			isLoading={false}
			type={'main'}
			variant={'outlined'}
			color={'primary'}
			iconPosition={'left'}
			disabled={false}
			style={{marginLeft: 6}}
		/>

2- La prop color solo funciona para la variante por defecto? Si quiero poner success con la variante "outlined" no estaría haciendo efecto, no cambia a verde la font y el ícono.

Prueba:

<Button
			value="Button with Box Icon"
			icon="box"
			isLoading={false}
			type={'main'}
			variant={'outlined'}
			color={'success'}
			iconPosition={'left'}
			disabled={false}
			style={{marginLeft: 6}}
		/>

3- Esto es un detalle, por algún motivo en especial se definió que el "value" por defecto sea "Button"? No sería mejor que no aparezca nada así no tenemos que enviarlo como null?

[dam788]

Hola @dam788 3 cosas que noté haciendo pruebas: 1- El type secondary y type primary cambian el alto del botón, esto es esperado? Prueba:

		<Button
			value="Button with Box Icon"
			icon="box"
			isLoading={false}
			type={'secondary'}
			variant={'outlined'}
			color={'primary'}
			iconPosition={'left'}
			disabled={false}
			style={{marginLeft: 6}}
		/>
		<Button
			value="Button with Box Icon"
			icon="box"
			isLoading={false}
			type={'main'}
			variant={'outlined'}
			color={'primary'}
			iconPosition={'left'}
			disabled={false}
			style={{marginLeft: 6}}
		/>

2- La prop color solo funciona para la variante por defecto? Si quiero poner success con la variante "outlined" no estaría haciendo efecto, no cambia a verde la font y el ícono.

Prueba:

<Button
			value="Button with Box Icon"
			icon="box"
			isLoading={false}
			type={'main'}
			variant={'outlined'}
			color={'success'}
			iconPosition={'left'}
			disabled={false}
			style={{marginLeft: 6}}
		/>

3- Esto es un detalle, por algún motivo en especial se definió que el "value" por defecto sea "Button"? No sería mejor que no aparezca nada así no tenemos que enviarlo como null?

Mauro te respondo una por una:
1 - La diferencia entre un type main y secondary es:

• la altura en el main es 50 y en el secondary 42.
• cuando es variant outlined el texto en el main es black y en el secondary es el color seleccionado.
• en algunos casos muestra sombra, eso lo habia agregado pero se lo quité porque al revisar el flujo en delivery no tiene por lo que se puede intuir que la sombra se la agregan aparte por estilos.

LINK

2 - En éste caso como muestra en el link del diseño de los botones, en main no es que no hace efecto sino que éste es asi...

3 - En realidad, mi idea era que si no tenia value o icon, no se mostrara nada pero ahi surgieron dos problemas:

• Un error en los hooks cuando devuelve un null o un <></>.
• En la tabla de props que dejo fer en el ticket, puso que value es requeriada.

Entonces para solucionar ambos errores, deje por defecto el value="Button", pero teniendo en cuenta que hay botones sin texto deje abierta la posibilidad de pasarle un null (para que no se muestre el texto y solo el icono) lo cual no se si esta bien del todo. Vos decime, si queres mandamos null, y comentamos con eslint-ignore las lineas donde me salen los errores en hooks.

[christian97dd]

Dejé unos comentarios, pero por el momento dejamos un poco pausada esta tarea para poder darle foco al flujo de movimientos de productos de wms.
Mientras tanto usemos el button que tenemos en cada app y para el flujo nuevo le agregamos los bordes redondeados

[christian97dd]

ojo con tener un setState en un button, puede llegar a ser muy costoso a nivel de rerenders, tené en cuenta que estas haciendo 2 setState por cada vez que el usuario presiona un botón.
Entiendo que lo estas usando para captar cuando está presionado el botón.
Haciendo esto que dice este comentario, te ahorras el setState.
Fijate que incluso en cada app lo resolvemos de la misma manera en src/components/BaseButton/index.js línea 56

[dam788]

la idea original era esa misma, pero se complicó cuando quise extender los estilos de BaseButton a Button. Ahi dejó de funcionar y tuve que buscar una alternativa

[christian97dd]

Fijate que te estas creando una nueva paleta de colores atado unicamente al botón, no va a resultar escalable si el día de mañana lo llegasemos a necesitar en cualquier otro componente que siga el mismo lineamiento.
Según los criterios en el ticket, se definió usar el mismo theme que hoy tenemos, agregando las keys necesarias, por ejemplo:

const theme = {
  primary: {
    light: #fff
    main: #234
    dark: #sddfsdf
    text: #fff
  }
}

[christian97dd]

Fijate que cuando tenemos el isLoading, va cambiando el color del spinner según la prop color:

Siempre tenemos que mantenes el azul de janis

[dam788]

Es verdad, crei que tenia que tomar el color seleccionado. Buen punto

[WilliamSaya-lvl30]

Lo veo bien

[christian97dd]

Lo ví mucho mejor, lo único que me hace ruido es cuando se le pasa el isLoading en true, a penas se vé:

Convendría deshabilitarlo y que quede siempre el loading con el color de janis: