Proyecto

Este es un proyecto creado utilizando Vite.

Descripción

Este proyecto esta relizado usando React 18, con Storybook y Rollup.

Características

• 🚀 React.
• ⚡ Rollup.
• 📦 StoryBook.
• 🎨 Soporte para CSS moderno (PostCSS, CSS Modules, Sass, etc.).
• 📦 Optimización de dependencias.
• 🔥 Hot Module Replacement (HMR) para un desarrollo más eficiente.
• 🛠️ TypeScript, TSX.

Requisitos

• Node.js (versión 18 o superior)
• npm (versión 6 o superior) o yarn (versión 1.22 o superior)

Instalación

Sigue estos pasos para configurar el proyecto en tu entorno local:

git clone https://[email protected]/ultragrouplaorg/ultragroupla/_git/smartlinks-lib-chat-assistant
cd smartlinks-lib-chat-assistant
npm install

Scripts proyecto

npm run storybook → Ejecutar el proyecto con Storybook.

npm run build → Generar el bundle con rollup.

npm run build-dev → Generar el bundle con rollup, para trabajar de manera local.

Conectar proyecto Local librería y contenedor

1. Proyecto librería:

Generamos el bundle y creamos una copia del dist.

npm run build-dev

Accedemos a la carpeta disDev y se genera el link en el bundle.

 cd distDev
 npm link

2. En la raíz del proyecto contenedor:

npm link @smartlinks/lib-chat-assistant

para verificar si fue correcta la conexion en local

npm ls @smartlinks/lib-chat-assistant

verificación:

 [email protected] D:\Usuarios\vmastudillod.ULTRAGROUPLA\Documents\smartLinks\smartlinks-web-travel-assistant
    └── @smartlinks/lib-chat-assistant@npm:[email protected] -> .\..\smartlinks-lib-chat-assistant\distDev

Librerias

FontAwesome

FontAwesome se utiliza como una dependencia de desarrollo en este proyecto. Para que funcione, debes tener instalado el Kit Package en el contenedor principal. Asegúrate de configurar tu archivo .npmrc con las variables necesarias para que funcione correctamente.

Puedes encontrar más información sobre cómo utilizar FontAwesome con React en la documentación oficial: https://docs.fontawesome.com/web/use-with/react/

También puedes consultar el siguiente enlace para obtener más información sobre cómo utilizar FontAwesome con Next: https://docs.fontawesome.com/web/use-with/react/use-with

Tailwind

Tailwind es una librería de utilidades CSS altamente personalizable que te permite construir rápidamente interfaces modernas y responsivas. Proporciona una amplia gama de clases predefinidas que puedes combinar para crear estilos únicos.

Para utilizar Tailwind en este proyecto, es importante revisar la configuración del archivo tailwind.config.js. Aquí es donde se encuentran las variables personalizadas y las configuraciones del sistema de diseño proporcionadas por la diseñadora UX/UI. Asegúrate de entender y ajustar estas variables según las necesidades del proyecto.

Puedes encontrar más información sobre cómo utilizar Tailwind en la documentación oficial: https://tailwindcss.com/