React AgroInnova Components

Componentes para integrar y hacer más robustas tus herramientas del sector agro.

Instalación

npm install react-agroinnova-components
# o
yarn add react-agroinnova-components

Uso

import { AgriChatbotUI } from 'react-agroinnova-components';
// Importar los estilos
import 'react-agroinnova-components/dist/index.css';

function App() {
  return (
    <div>
      <h1>Mi Aplicación</h1>
      <AgriChatbotUI apiKey='tu-api-key' />
    </div>
  );
}

Configuración de Tailwind CSS

Si estás usando Tailwind CSS en tu proyecto, asegúrate de incluir la ruta de los componentes en tu configuración:

// tailwind.config.js
module.exports = {
  // ...
  content: [
    // ... otras rutas
    './node_modules/react-agroinnova-components/**/*.{js,jsx,ts,tsx}',
  ],
  // ... resto de la configuración
};

Solución de problemas

Error: import_util.default.inherits is not a function

Si encuentras este error al usar la librería, es porque hay un problema con la importación del módulo util de Node.js en el entorno del navegador. Para resolverlo, puedes:

1. Importar el polyfill de util directamente:

import { AgriChatbotUI, util } from 'react-agroinnova-components';

// Ahora puedes usar util.inherits, util.format, etc.

2. Configurar tu bundler para manejar el módulo util:

Si estás usando webpack, puedes añadir esta configuración a tu webpack.config.js:

module.exports = {
  // ...
  resolve: {
    fallback: {
      util: require.resolve('util/'),
    },
  },
  // ...
};

Si estás usando Vite, puedes añadir esta configuración a tu vite.config.js:

import { defineConfig } from 'vite';

export default defineConfig({
  // ...
  resolve: {
    alias: {
      util: 'util/',
    },
  },
  // ...
});

Error: Los estilos no se aplican correctamente

Si los estilos no se están aplicando correctamente, asegúrate de:

1. Importar los estilos CSS de la librería:

import 'react-agroinnova-components/dist/index.css';

2. Configurar Tailwind CSS para incluir los componentes:

// tailwind.config.js
module.exports = {
  content: [
    // ... otras rutas
    './node_modules/react-agroinnova-components/**/*.{js,jsx,ts,tsx}',
  ],
};

Características

• Chatbot para consultas sobre productos agrícolas
• Interfaz de usuario moderna y responsive
• Soporte para temas claros y oscuros
• Personalizable con tu propio logo

Props

| Prop | Tipo | Descripción | | ------ | --------- | ----------------------------------------------------------------------- | | apiKey | string | Clave de API para autenticar las solicitudes al servidor | | logo | ReactNode | (Opcional) Componente o elemento para reemplazar el logo predeterminado |

Licencia

MIT

Contribuir

Las contribuciones son bienvenidas. Por favor, abre un issue para discutir los cambios que te gustaría hacer.