@jordif/react-calendar-list 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 jordif
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# @jordif/react-calendar-list
+
+A lightweight, unstyled React component for rendering schedules or archives as a list of monthly calendars. Perfect for event feeds, blog archives and availability overviews.
+
+---
+
+## 🚀 Features
+
+* **🪶 Lightweight:** Zero dependencies (other than React).
+* **🎨 Unstyled:** Provides the logic and structure; you provide the CSS.
+* **📅 Sequential Layout:** Renders months in a list.
+* **🧩 Flexible:** Perfect for event feeds, availability overviews or blog archives.
+
+## 📦 Installation
+
+```bash
+npm install @jordif/react-calendar-list

package/dist/index.cjs

@@ -0,0 +1,172 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/CalendarList/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  CalendarList: () => CalendarList
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/CalendarList/helpers.ts
+var sortPosts = (posts) => {
+  return [...posts].sort((a, b) => {
+    if (a.date < b.date) {
+      return -1;
+    }
+    if (a.date > b.date) {
+      return 1;
+    }
+    return 0;
+  });
+};
+var groupPosts = (posts) => {
+  const grouped = {};
+  posts.forEach((post) => {
+    const year = post.date.getFullYear();
+    const month = post.date.getMonth();
+    const day = post.date.getDate();
+    grouped[year] = grouped[year] || {};
+    grouped[year][month] = grouped[year][month] || {};
+    grouped[year][month][day] = grouped[year][month][day] || [];
+    grouped[year][month][day].push(post);
+  });
+  return grouped;
+};
+var getDaysInMonth = (month) => {
+  return new Date(month.year, month.month + 1, 0).getDate();
+};
+function getMonthsBetweenDates(startDate, endDate) {
+  const months = [];
+  const currentDate = new Date(
+    startDate.getFullYear(),
+    startDate.getMonth(),
+    1
+  );
+  while (currentDate <= endDate) {
+    months.push({
+      month: currentDate.getMonth(),
+      year: currentDate.getFullYear()
+    });
+    currentDate.setMonth(currentDate.getMonth() + 1);
+  }
+  return months;
+}
+function getDaysOfTheWeek(locale, startOnMonday = false) {
+  const days = [];
+  const baseDay = startOnMonday ? 6 : 5;
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(2025, 0, baseDay + i);
+    const dayAbbreviation = new Intl.DateTimeFormat(locale, {
+      weekday: "short"
+    }).format(date);
+    days.push(dayAbbreviation);
+  }
+  return days;
+}
+var getAdjustedDayOfWeek = (date, startOnMonday) => {
+  const day = date.getDay();
+  if (startOnMonday) {
+    return day === 0 ? 6 : day - 1;
+  }
+  return day;
+};
+var getCalendarGrid = (month, locale, startOnMonday) => {
+  const startDate = new Date(month.year, month.month, 1);
+  const daysInMonth = getDaysInMonth(month);
+  const endDate = new Date(month.year, month.month, daysInMonth);
+  const leftPadding = getAdjustedDayOfWeek(startDate, startOnMonday);
+  const rightPadding = 6 - getAdjustedDayOfWeek(endDate, startOnMonday);
+  const totalCells = leftPadding + daysInMonth + rightPadding;
+  const days = [];
+  for (let index = 0; index < totalCells; index++) {
+    const dayNumber = index - leftPadding + 1;
+    const isPadding = dayNumber < 1 || dayNumber > daysInMonth;
+    const rowNumber = Math.floor(index / 7);
+    const day = {
+      index,
+      day: isPadding ? 0 : dayNumber
+    };
+    if (!days[rowNumber]) {
+      days[rowNumber] = { index: rowNumber, cells: [] };
+    }
+    days[rowNumber].cells.push(day);
+  }
+  const label = new Intl.DateTimeFormat(locale, { month: "long" }).format(startDate) + " " + month.year;
+  const daysOfTheWeek = getDaysOfTheWeek(locale, startOnMonday);
+  return { days, label, daysOfTheWeek };
+};
+
+// src/CalendarList/Month.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Month = ({ month, locale, startOnMonday, events }) => {
+  const { days, label, daysOfTheWeek } = getCalendarGrid(
+    month,
+    locale,
+    startOnMonday
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("thead", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { colSpan: 7, children: label }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: daysOfTheWeek.map((dayLabel) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: dayLabel }, dayLabel)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: days.map((row) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: row.cells.map((cell) => {
+        const hasEvents = events?.[cell.day] && events[cell.day]?.length;
+        if (!hasEvents) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: cell.day ? cell.day : "" }, cell.index);
+        }
+        const className = events[cell.day]?.at(0)?.className;
+        const url = events[cell.day]?.at(0)?.url;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className, children: url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: url, children: cell.day }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: cell.day }) }, cell.index);
+      }) }, row.index);
+    }) })
+  ] });
+};
+var Month_default = Month;
+
+// src/CalendarList/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CalendarList = ({
+  posts,
+  locale = "en-US",
+  startOnMonday = false
+}) => {
+  const sortedPosts = sortPosts(posts);
+  const groupedPosts = groupPosts(sortedPosts);
+  const startDate = sortedPosts?.at(0)?.date || /* @__PURE__ */ new Date();
+  const endDate = sortedPosts?.at(-1)?.date || /* @__PURE__ */ new Date();
+  const monthsInRange = getMonthsBetweenDates(startDate, endDate);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: monthsInRange.map((month) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Month_default,
+      {
+        month,
+        locale,
+        startOnMonday,
+        events: groupedPosts[month.year]?.[month.month]
+      },
+      `${month.year}-${month.month}`
+    );
+  }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CalendarList
+});

package/dist/index.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Post {
+    date: Date;
+    url?: string;
+    className?: string;
+}
+interface CalendarListProps {
+    posts: Post[];
+    locale?: string;
+    startOnMonday?: boolean;
+}
+
+declare const CalendarList: ({ posts, locale, startOnMonday, }: CalendarListProps) => react_jsx_runtime.JSX.Element;
+
+export { CalendarList };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Post {
+    date: Date;
+    url?: string;
+    className?: string;
+}
+interface CalendarListProps {
+    posts: Post[];
+    locale?: string;
+    startOnMonday?: boolean;
+}
+
+declare const CalendarList: ({ posts, locale, startOnMonday, }: CalendarListProps) => react_jsx_runtime.JSX.Element;
+
+export { CalendarList };

package/dist/index.js

@@ -0,0 +1,145 @@
+// src/CalendarList/helpers.ts
+var sortPosts = (posts) => {
+  return [...posts].sort((a, b) => {
+    if (a.date < b.date) {
+      return -1;
+    }
+    if (a.date > b.date) {
+      return 1;
+    }
+    return 0;
+  });
+};
+var groupPosts = (posts) => {
+  const grouped = {};
+  posts.forEach((post) => {
+    const year = post.date.getFullYear();
+    const month = post.date.getMonth();
+    const day = post.date.getDate();
+    grouped[year] = grouped[year] || {};
+    grouped[year][month] = grouped[year][month] || {};
+    grouped[year][month][day] = grouped[year][month][day] || [];
+    grouped[year][month][day].push(post);
+  });
+  return grouped;
+};
+var getDaysInMonth = (month) => {
+  return new Date(month.year, month.month + 1, 0).getDate();
+};
+function getMonthsBetweenDates(startDate, endDate) {
+  const months = [];
+  const currentDate = new Date(
+    startDate.getFullYear(),
+    startDate.getMonth(),
+    1
+  );
+  while (currentDate <= endDate) {
+    months.push({
+      month: currentDate.getMonth(),
+      year: currentDate.getFullYear()
+    });
+    currentDate.setMonth(currentDate.getMonth() + 1);
+  }
+  return months;
+}
+function getDaysOfTheWeek(locale, startOnMonday = false) {
+  const days = [];
+  const baseDay = startOnMonday ? 6 : 5;
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(2025, 0, baseDay + i);
+    const dayAbbreviation = new Intl.DateTimeFormat(locale, {
+      weekday: "short"
+    }).format(date);
+    days.push(dayAbbreviation);
+  }
+  return days;
+}
+var getAdjustedDayOfWeek = (date, startOnMonday) => {
+  const day = date.getDay();
+  if (startOnMonday) {
+    return day === 0 ? 6 : day - 1;
+  }
+  return day;
+};
+var getCalendarGrid = (month, locale, startOnMonday) => {
+  const startDate = new Date(month.year, month.month, 1);
+  const daysInMonth = getDaysInMonth(month);
+  const endDate = new Date(month.year, month.month, daysInMonth);
+  const leftPadding = getAdjustedDayOfWeek(startDate, startOnMonday);
+  const rightPadding = 6 - getAdjustedDayOfWeek(endDate, startOnMonday);
+  const totalCells = leftPadding + daysInMonth + rightPadding;
+  const days = [];
+  for (let index = 0; index < totalCells; index++) {
+    const dayNumber = index - leftPadding + 1;
+    const isPadding = dayNumber < 1 || dayNumber > daysInMonth;
+    const rowNumber = Math.floor(index / 7);
+    const day = {
+      index,
+      day: isPadding ? 0 : dayNumber
+    };
+    if (!days[rowNumber]) {
+      days[rowNumber] = { index: rowNumber, cells: [] };
+    }
+    days[rowNumber].cells.push(day);
+  }
+  const label = new Intl.DateTimeFormat(locale, { month: "long" }).format(startDate) + " " + month.year;
+  const daysOfTheWeek = getDaysOfTheWeek(locale, startOnMonday);
+  return { days, label, daysOfTheWeek };
+};
+
+// src/CalendarList/Month.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Month = ({ month, locale, startOnMonday, events }) => {
+  const { days, label, daysOfTheWeek } = getCalendarGrid(
+    month,
+    locale,
+    startOnMonday
+  );
+  return /* @__PURE__ */ jsxs("table", { children: [
+    /* @__PURE__ */ jsxs("thead", { children: [
+      /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", { colSpan: 7, children: label }) }),
+      /* @__PURE__ */ jsx("tr", { children: daysOfTheWeek.map((dayLabel) => /* @__PURE__ */ jsx("th", { children: dayLabel }, dayLabel)) })
+    ] }),
+    /* @__PURE__ */ jsx("tbody", { children: days.map((row) => {
+      return /* @__PURE__ */ jsx("tr", { children: row.cells.map((cell) => {
+        const hasEvents = events?.[cell.day] && events[cell.day]?.length;
+        if (!hasEvents) {
+          return /* @__PURE__ */ jsx("td", { children: cell.day ? cell.day : "" }, cell.index);
+        }
+        const className = events[cell.day]?.at(0)?.className;
+        const url = events[cell.day]?.at(0)?.url;
+        return /* @__PURE__ */ jsx("td", { className, children: url ? /* @__PURE__ */ jsx("a", { href: url, children: cell.day }) : /* @__PURE__ */ jsx("strong", { children: cell.day }) }, cell.index);
+      }) }, row.index);
+    }) })
+  ] });
+};
+var Month_default = Month;
+
+// src/CalendarList/index.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var CalendarList = ({
+  posts,
+  locale = "en-US",
+  startOnMonday = false
+}) => {
+  const sortedPosts = sortPosts(posts);
+  const groupedPosts = groupPosts(sortedPosts);
+  const startDate = sortedPosts?.at(0)?.date || /* @__PURE__ */ new Date();
+  const endDate = sortedPosts?.at(-1)?.date || /* @__PURE__ */ new Date();
+  const monthsInRange = getMonthsBetweenDates(startDate, endDate);
+  return /* @__PURE__ */ jsx2(Fragment, { children: monthsInRange.map((month) => {
+    return /* @__PURE__ */ jsx2(
+      Month_default,
+      {
+        month,
+        locale,
+        startOnMonday,
+        events: groupedPosts[month.year]?.[month.month]
+      },
+      `${month.year}-${month.month}`
+    );
+  }) });
+};
+export {
+  CalendarList
+};

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@jordif/react-calendar-list",
+  "description": "A lightweight, unstyled React component for rendering schedules or archives as a list of monthly calendars. Perfect for event feeds, blog archives and availability overviews.",
+  "version": "1.0.0",
+  "author": "Jordi Fontseca",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./CalendarList": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.10",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "tsup": "^8.5.1",
+    "typescript": "latest"
+  },
+  "dependencies": {
+    "react": "^19.1.0"
+  },
+  "scripts": {
+    "dev": "tsup src/CalendarList/index.tsx --format cjs,esm --dts --watch",
+    "build": "tsup src/CalendarList/index.tsx --format cjs,esm --dts",
+    "lint": "biome lint ./src",
+    "format": "biome format ./src --write",
+    "check": "biome check ./src"
+  }
+}