Crono Mosaico

Crono Mosaico es un componente de calendario interactivo para React, diseñado para gestionar eventos con soporte para recurrencia, diálogos de edición de eventos y vistas detalladas por hora. Está estilizado con Tailwind CSS, lo que garantiza un diseño moderno y personalizable. Este paquete es ideal para aplicaciones que requieren un calendario funcional y visualmente atractivo.

Características

• Gestión de eventos: Crea, edita y visualiza eventos con título, descripción, fechas, recurrencia y afiches.
• Recurrencia: Soporte para eventos recurrentes (diarios, semanales, mensuales).
• Vista de calendario: Navega por meses y visualiza eventos en un formato de cuadrícula.
• Diálogo de eventos: Modal para añadir o editar eventos con validación de campos.
• Vista por hora: Modal que muestra la programación horaria de un día específico.
• Estilizado con Tailwind CSS: Diseño responsive y personalizable.
• Soporte TypeScript: Incluye definiciones de tipos para una integración fluida.

Instalación

Instala el paquete vía npm:

npm install crono-mosaico

Asegúrate de tener instaladas las dependencias de pares:

npm install react react-dom prop-types

Uso

Importa el componente CalendarApp y su archivo CSS en tu aplicación React:

import CalendarApp from 'crono-mosaico';
import 'crono-mosaico/dist/index.css';

function App() {
  const handleEventChange = (events) => {
    console.log('Eventos actualizados:', events);
  };

  return (
    <CalendarApp
      initialEvents={[]}
      className="my-calendar"
      onEventChange={handleEventChange}
    />
  );
}

Props

| Prop | Tipo | Descripción | Valor por defecto | |------|------|-------------|-------------------| | initialEvents | Array | Lista inicial de eventos (objetos con title, date, fechaFin, etc.). | [] | | className | String | Clase CSS adicional para el contenedor del calendario. | '' | | onEventChange | Function | Callback que recibe la lista actualizada de eventos tras cambios. | () => {} |

Ejemplo de Evento

const events = [
  {
    id: '1',
    title: 'Reunión de equipo',
    date: '2025-05-01T10:00:00',
    fechaFin: '2025-05-01T11:00:00',
    description: 'Discusión de proyecto',
    afiche: 'https://example.com/poster.jpg',
    recurrence: 'weekly'
  }
];

Desarrollo

Requisitos previos

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

Instalación del entorno de desarrollo

Clona el repositorio:

git clone https://github.com/tu-usuario/crono-mosaico.git
cd crono-mosaico

Instala las dependencias:

npm install

Scripts disponibles

Construir el paquete:

npm run build

Genera los archivos en dist/ (cjs/index.js, esm/index.js, index.d.ts, index.css).

Ejecutar pruebas:

npm test

Usa Jest para ejecutar pruebas unitarias.

Estructura del proyecto

crono-mosaico/
├── src/
│   ├── components/
│   │   ├── CalendarApp.jsx      # Componente principal
│   │   ├── CalendarView.jsx     # Vista de calendario mensual
│   │   ├── EventDialog.jsx      # Modal para crear/editar eventos
│   │   ├── HourlyViewModal.jsx  # Modal para vista horaria
│   ├── index.js                # Punto de entrada
│   ├── index.css               # Estilos Tailwind
├── dist/                       # Archivos generados
├── tests/                      # Pruebas unitarias
├── babel.config.json           # Configuración de Babel
├── rollup.config.js            # Configuración de Rollup
├── tailwind.config.js          # Configuración de Tailwind CSS

Personalización

• Estilos: Modifica src/index.css para ajustar los estilos de Tailwind o añade tus propias clases.
• Configuración de Tailwind: Edita tailwind.config.js para personalizar colores, fuentes, etc.
• Props adicionales: Extiende CalendarApp.jsx para soportar más props según tus necesidades.

Contribuir

¡Las contribuciones son bienvenidas! Sigue estos pasos:

1. Crea un fork del repositorio.
2. Crea una rama para tu funcionalidad (git checkout -b feature/nueva-funcionalidad).
3. Realiza tus cambios y haz commit (git commit -m 'Añade nueva funcionalidad').
4. Sube los cambios (git push origin feature/nueva-funcionalidad).
5. Abre un Pull Request en GitHub.

Licencia

MIT

Contacto

Para reportar errores o sugerencias, crea un issue en GitHub.