@mounaji_npm/booking-calendar 0.1.0

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@mounaji_npm/booking-calendar",
+  "version": "0.1.0",
+  "description": "Lightweight month-grid calendar component for rental bookings management",
+  "keywords": ["calendar", "booking", "rentals", "react", "saas", "mounaji"],
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "main": "./dist/mounajibookingcalendar.umd.cjs",
+  "module": "./dist/mounajibookingcalendar.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/mounajibookingcalendar.es.js",
+      "require": "./dist/mounajibookingcalendar.umd.cjs"
+    }
+  },
+  "files": ["dist", "src", "DOCS.md"],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^6.0.0"
+  }
+}

package/src/index.jsx

@@ -0,0 +1,159 @@
+import React, { useMemo, useState, useCallback } from 'react';
+
+/**
+ * BookingCalendar
+ * A lightweight month-grid calendar for rental bookings.
+ *
+ * Props:
+ *  - bookings:      Array<{ id, unit_id?, check_in, check_out, status, guest_name? }>
+ *  - units?:        Array<{ id, name }> (optional; when provided shows a unit column header)
+ *  - month?:        Date (defaults to today)
+ *  - onMonthChange? (next: Date) => void
+ *  - onSelectDay?   (date: Date) => void
+ *  - onSelectBooking?(booking) => void
+ *  - statuses?:     color map for status -> css color
+ */
+
+const WEEK = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];
+
+const STATUS_COLORS = {
+  confirmed: '#16a34a',
+  pending:   '#f59e0b',
+  blocked:   '#6b7280',
+  cancelled: '#ef4444'
+};
+
+const fmt = (d) => {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+};
+
+const parse = (s) => (s ? new Date(s + 'T00:00:00') : null);
+
+function dayKey(d) { return fmt(d); }
+
+/** Returns true if booking range overlaps a given date. */
+function bookingOnDate(booking, date) {
+  const start = parse(typeof booking.check_in === 'string' ? booking.check_in.slice(0, 10) : booking.check_in);
+  const end   = parse(typeof booking.check_out === 'string' ? booking.check_out.slice(0, 10) : booking.check_out);
+  if (!start || !end) return false;
+  const cur = fmt(date);
+  return cur >= fmt(start) && cur <= fmt(end);
+}
+
+export function BookingCalendar({
+  bookings = [],
+  units,
+  month: monthProp,
+  onMonthChange,
+  onSelectDay,
+  onSelectBooking,
+  statuses = STATUS_COLORS
+}) {
+  const [month, setMonth] = useState(monthProp ?? new Date());
+
+  const cells = useMemo(() => {
+    const first = new Date(month.getFullYear(), month.getMonth(), 1);
+    const startDay = first.getDay();
+    const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+    const arr = [];
+    for (let i = 0; i < startDay; i++) arr.push(null);
+    for (let d = 1; d <= daysInMonth; d++) arr.push(new Date(month.getFullYear(), month.getMonth(), d));
+    while (arr.length % 7 !== 0) arr.push(null);
+    return arr;
+  }, [month]);
+
+  const bookingsByDay = useMemo(() => {
+    const map = new Map();
+    for (const date of cells.filter(Boolean)) {
+      const k = dayKey(date);
+      map.set(k, bookings.filter(b => bookingOnDate(b, date)));
+    }
+    return map;
+  }, [cells, bookings]);
+
+  const prevMonth = useCallback(() => {
+    const m = new Date(month);
+    m.setMonth(m.getMonth() - 1);
+    setMonth(m);
+    onMonthChange?.(m);
+  }, [month, onMonthChange]);
+
+  const nextMonth = useCallback(() => {
+    const m = new Date(month);
+    m.setMonth(m.getMonth() + 1);
+    setMonth(m);
+    onMonthChange?.(m);
+  }, [month, onMonthChange]);
+
+  const label = useMemo(
+    () => month.toLocaleDateString('es-AR', { month: 'long', year: 'numeric' }),
+    [month]
+  );
+
+  return (
+    <div className="mn-booking-calendar" style={{ fontFamily: 'system-ui, sans-serif' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+        <button onClick={prevMonth} aria-label="Mes anterior">‹</button>
+        <strong style={{ textTransform: 'capitalize' }}>{label}</strong>
+        <button onClick={nextMonth} aria-label="Mes siguiente">›</button>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
+        {WEEK.map(w => (
+          <div key={w} style={{ textAlign: 'center', fontWeight: 600, padding: '4px 0', fontSize: 12, color: '#6b7280' }}>{w}</div>
+        ))}
+
+        {cells.map((date, i) => {
+          if (!date) return <div key={i} style={{ minHeight: 72, background: '#f9fafb', borderRadius: 6 }} />;
+          const k = dayKey(date);
+          const dayBookings = bookingsByDay.get(k) ?? [];
+          const isToday = fmt(date) === fmt(new Date());
+          return (
+            <div
+              key={i}
+              onClick={() => onSelectDay?.(date)}
+              style={{
+                minHeight: 72,
+                border: '1px solid #e5e7eb',
+                borderRadius: 6,
+                padding: 4,
+                cursor: 'pointer',
+                background: isToday ? '#eff6ff' : '#fff'
+              }}
+            >
+              <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 2 }}>{date.getDate()}</div>
+              {dayBookings.slice(0, 2).map(b => (
+                <div
+                  key={b.id}
+                  onClick={(e) => { e.stopPropagation(); onSelectBooking?.(b); }}
+                  title={b.guest_name || b.status}
+                  style={{
+                    fontSize: 10,
+                    color: '#fff',
+                    background: statuses[b.status] || '#3b82f6',
+                    borderRadius: 4,
+                    padding: '1px 4px',
+                    marginBottom: 2,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap'
+                  }}
+                >
+                  {b.guest_name || b.status}
+                </div>
+              ))}
+              {dayBookings.length > 2 && (
+                <div style={{ fontSize: 10, color: '#6b7280' }}>+{dayBookings.length - 2} más</div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default BookingCalendar;