agrega paquete toast

[jllanosg]

Desc

• Instala paquete para toasts sonner
• Quita componente creado manualmente
• Agrega Componente <Toaster> a root.tsx

Uso

Se debe llamar al elemento/componente <Toaster> en alguna parte del front, para poder utilizar la función toast en cualquier componente que sea hijo de el componente donde se encuentra Toaster. (Se agregó Toaster a root.tsx).

Se pueden "pisar" los estilos predefinidos del toast, en este caso se agregó las classnames de tailwind para que tengan un color de fondo y de texto personalizados.

Para usar el toast, simplemente se debe llamar a toast.<classname>.("mensaje"); con alguno de los siguientes:

• error:

• success;

• warning:

• info:

Los colores elegidos son discutibles, se aceptan propuestas.

How to test

• Cambiarse a rama
• Usar el siguiente código:

<>
      <div className="p-4">Test Toasts</div>
      <button onClick={() => toast.error(t("err.invalidJsonFormat"))}>
        error
      </button>
      <br />
      <button onClick={() => toast.info("test")}>info</button>
      <br />

      <button onClick={() => toast.success("test")}>success</button>
      <br />

      <button onClick={() => toast.warning("test")}>warning</button>
</>

• Cambiar los estilos (opcionalmente) en root.tsx

En root.tsx se aplicó el formatter (accidentalmente) pero se dejará así para evitar problemas futuros.

[iTzGooDLife]

Siguiendo las indicaciones no logré implementar el toast, agregué al root los cambios, instalé el paquete y posteriormente intenté llamarlo en src/routes/vulnerabilities/editVulnerability.tsx:

Faltó algo?

[jllanosg]

Siguiendo las indicaciones no logré implementar el toast, agregué al root los cambios, instalé el paquete y posteriormente intenté llamarlo en src/routes/vulnerabilities/editVulnerability.tsx:

Faltó algo?

1. No es necesario que modifiques root si te cambias a la rama
2. Debes importar la función toast

[iTzGooDLife]

Siguiendo las indicaciones no logré implementar el toast, agregué al root los cambios, instalé el paquete y posteriormente intenté llamarlo en src/routes/vulnerabilities/editVulnerability.tsx: Faltó algo?

1. No es necesario que modifiques root si te cambias a la rama

2. Debes importar la función toast

Estoy realizando la prueba en mi rama (obviamente localmente), para probar la implementación real. De igual manera me cambié a la rama correspondiente y quedé atorado en el mismo problema. Puedes agregar un ejemplo incluyendo la importación y todo lo necesario si es que aún falta algo xfas

[jllanosg]

Siguiendo las indicaciones no logré implementar el toast, agregué al root los cambios, instalé el paquete y posteriormente intenté llamarlo en src/routes/vulnerabilities/editVulnerability.tsx: Faltó algo?

1. No es necesario que modifiques root si te cambias a la rama

2. Debes importar la función toast

Estoy realizando la prueba en mi rama (obviamente localmente), para probar la implementación real. De igual manera me cambié a la rama correspondiente y quedé atorado en el mismo problema. Puedes agregar un ejemplo incluyendo la importación y todo lo necesario si es que aún falta algo xfas

https://www.npmjs.com/package/sonner?activeTab=readme

[iTzGooDLife]

LGTM, pero no me deja aprobar :/

[caverav]

Qué pasó con tu regla de avisar de realizar npm install @jllanosg ? Al final no seguiremos esa regla ahora o qué?