@pearpages/heatmap 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,7 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState } from 'react';
 
 // src/shared/models.tsx
+var defaultLabels = {
+  less: "Less",
+  more: "More",
+  level: (level) => `Level ${level}`,
+  noContributions: "No contributions",
+  contributions: (count) => `${count} contribution${count !== 1 ? "s" : ""}`
+};
+var DEFAULT_LOCALE = "en-US";
 var monthNames = [
   "Jan",
   "Feb",
@@ -39,7 +46,8 @@ var createDateString = (date) => date.toISOString().split("T")[0];
 // src/ContributionHeatmap/getMonthsForHeader.ts
 function getMonthsForHeader({
   weeks,
-  period
+  period,
+  monthNames: monthNames2 = monthNames
 }) {
   const months = [];
   const { start, end } = period;
@@ -63,7 +71,7 @@ function getMonthsForHeader({
       }
       if (monthToUse !== currentMonth) {
         if (currentMonth !== -1) {
-          months.push({ name: monthNames[currentMonth], span: currentSpan, start: weekIndex - currentSpan });
+          months.push({ name: monthNames2[currentMonth], span: currentSpan, start: weekIndex - currentSpan });
         }
         currentMonth = monthToUse;
         currentSpan = 1;
@@ -73,130 +81,227 @@ function getMonthsForHeader({
     }
   });
   if (currentMonth !== -1) {
-    months.push({ name: monthNames[currentMonth], span: currentSpan, start: weeks.length - currentSpan });
-  }
-  if (months.length > 0 && months[months.length - 1].span === 1) {
-    months[months.length - 1].span = 2;
+    months.push({ name: monthNames2[currentMonth], span: currentSpan, start: weeks.length - currentSpan });
   }
   return months;
 }
 
 // src/shared/formatTooltip.tsx
 function isInRange(date, { start, end }) {
-  const actualStartDate = new Date(start);
-  const actualEndDate = new Date(end);
-  const contributionDate = new Date(date);
-  return contributionDate > actualStartDate && contributionDate < actualEndDate;
+  return date >= createDateString(start) && date <= createDateString(end);
 }
-var formatTooltip = (contribution, { start, end }) => {
+var formatTooltip = (contribution, { start, end }, { locale = DEFAULT_LOCALE, labels } = {}) => {
+  const text = { ...defaultLabels, ...labels };
   const date = new Date(contribution.date);
-  const formattedDate = date.toLocaleDateString("en-US", {
+  const formattedDate = date.toLocaleDateString(locale, {
     weekday: "short",
     year: "numeric",
     month: "short",
-    day: "numeric"
+    day: "numeric",
+    timeZone: "UTC"
   });
-  if (!isInRange(new Date(contribution.date), { start, end }) || contribution.count === 0) {
-    return `${formattedDate}: No contributions`;
+  if (!isInRange(contribution.date, { start, end }) || contribution.count === 0) {
+    return `${formattedDate}: ${text.noContributions}`;
   }
-  return `${formattedDate}: ${contribution.count} contribution${contribution.count !== 1 ? "s" : ""}`;
+  return `${formattedDate}: ${text.contributions(contribution.count)}`;
 };
-function Legend() {
+
+// src/shared/intl.ts
+var REFERENCE_WEEK_START = Date.UTC(2024, 0, 7);
+var DAYS_IN_WEEK = 7;
+function getDayNames(locale, weekStartsOn = 0) {
+  const format = new Intl.DateTimeFormat(locale, {
+    weekday: "short",
+    timeZone: "UTC"
+  });
+  return Array.from({ length: DAYS_IN_WEEK }, (_, index) => {
+    const dayOfWeek = (weekStartsOn + index) % DAYS_IN_WEEK;
+    return format.format(new Date(REFERENCE_WEEK_START + dayOfWeek * 864e5));
+  });
+}
+function getMonthNames(locale) {
+  const format = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    timeZone: "UTC"
+  });
+  return Array.from(
+    { length: 12 },
+    (_, month) => format.format(new Date(Date.UTC(2024, month, 15)))
+  );
+}
+function Legend({ labels }) {
+  const text = { ...defaultLabels, ...labels };
   return /* @__PURE__ */ jsxs("div", { className: "contribution-heatmap__legend", children: [
-    /* @__PURE__ */ jsx("span", { className: "contribution-heatmap__legend-text", children: "Less" }),
+    /* @__PURE__ */ jsx("span", { className: "contribution-heatmap__legend-text", children: text.less }),
     [0, 1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx(
       "div",
       {
         className: `contribution-heatmap__legend-item contribution-heatmap__legend-item--level-${level}`,
-        title: `Level ${level}`
+        title: text.level(level)
       },
       level
     )),
-    /* @__PURE__ */ jsx("span", { className: "contribution-heatmap__legend-text", children: "More" })
+    /* @__PURE__ */ jsx("span", { className: "contribution-heatmap__legend-text", children: text.more })
   ] });
 }
+function DayCell({ contribution, period, locale, labels, delayIndex }) {
+  const inRange = isInRange(contribution.date, period);
+  const tooltip = formatTooltip(contribution, period, { locale, labels });
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: [
+        "contribution-heatmap__day",
+        `contribution-heatmap__day--level-${contribution.level}`,
+        inRange ? "" : "contribution-heatmap__day--outside"
+      ].filter(Boolean).join(" "),
+      title: inRange ? tooltip : void 0,
+      "aria-label": inRange ? tooltip : void 0,
+      role: inRange ? "button" : void 0,
+      tabIndex: inRange ? 0 : void 0,
+      "data-count": contribution.count,
+      "data-date": contribution.date,
+      style: { "--animation-delay": `${delayIndex * 5e-3}s` }
+    }
+  );
+}
 function ContributionHeatmap({
   data: { period, weeks },
   className = "",
-  isReverse = false
+  isReverse = false,
+  locale = DEFAULT_LOCALE,
+  labels
 }) {
-  const months = getMonthsForHeader({ weeks, period });
-  return /* @__PURE__ */ jsxs("div", { className: `contribution-heatmap ${className}`, children: [
-    /* @__PURE__ */ jsx("table", { className: "contribution-heatmap__table", children: isReverse ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: "contribution-heatmap__month-header" }),
-        dayNames.map((dayName, dayIndex) => /* @__PURE__ */ jsx("th", { className: "contribution-heatmap__day-header", children: dayName }, dayIndex))
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => {
-        const month = months.find((m) => weekIndex === m.start);
-        const showMonthLabel = !!month;
-        return /* @__PURE__ */ jsxs("tr", { children: [
-          showMonthLabel && /* @__PURE__ */ jsx(
-            "td",
-            {
-              className: "contribution-heatmap__month-label",
-              rowSpan: month.span,
-              children: month.name
-            }
-          ),
-          week.map((contribution, dayIndex) => /* @__PURE__ */ jsx(
-            "td",
-            {
-              className: `contribution-heatmap__day contribution-heatmap__day--level-${contribution.level}`,
-              title: formatTooltip(contribution, period),
-              "aria-label": formatTooltip(contribution, period),
-              role: "button",
-              tabIndex: 0,
-              "data-count": contribution.count,
-              "data-date": contribution.date,
-              style: {
-                "--animation-delay": `${(weekIndex * 7 + dayIndex) * 5e-3}s`
-              }
-            },
-            dayIndex
-          ))
-        ] }, weekIndex);
-      }) })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: "contribution-heatmap__day-header" }),
-        months.map((month, index) => /* @__PURE__ */ jsx(
-          "th",
-          {
-            className: "contribution-heatmap__month-header",
-            colSpan: month.span,
-            children: month.name
-          },
-          index
-        ))
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: dayNames.map((dayName, dayIndex) => /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("td", { className: "contribution-heatmap__day-label", children: dayName }),
-        weeks.map((week, weekIndex) => {
-          const contribution = week[dayIndex];
-          return /* @__PURE__ */ jsx(
-            "td",
-            {
-              className: `contribution-heatmap__day contribution-heatmap__day--level-${contribution.level}`,
-              title: formatTooltip(contribution, period),
-              "aria-label": formatTooltip(contribution, period),
-              role: "button",
-              tabIndex: 0,
-              "data-count": contribution.count,
-              "data-date": contribution.date,
-              style: {
-                "--animation-delay": `${(weekIndex * 7 + dayIndex) * 5e-3}s`
-              }
-            },
-            weekIndex
-          );
-        })
-      ] }, dayIndex)) })
-    ] }) }),
-    /* @__PURE__ */ jsx(Legend, {})
-  ] });
+  const weekStartsOn = weeks.length ? new Date(weeks[0][0].date).getUTCDay() : 0;
+  const dayNames2 = getDayNames(locale, weekStartsOn);
+  const months = getMonthsForHeader({ weeks, period, monthNames: getMonthNames(locale) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `contribution-heatmap${isReverse ? " contribution-heatmap--reverse" : ""} ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "contribution-heatmap__scroll", children: /* @__PURE__ */ jsx("table", { className: "contribution-heatmap__table", children: isReverse ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { className: "contribution-heatmap__month-header" }),
+            dayNames2.map((dayName, dayIndex) => /* @__PURE__ */ jsx("th", { className: "contribution-heatmap__day-header", children: dayName }, dayIndex))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => {
+            const month = months.find((m) => weekIndex === m.start);
+            const showMonthLabel = !!month;
+            return /* @__PURE__ */ jsxs("tr", { children: [
+              showMonthLabel && /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: "contribution-heatmap__month-label",
+                  rowSpan: month.span,
+                  children: month.name
+                }
+              ),
+              week.map((contribution, dayIndex) => /* @__PURE__ */ jsx(
+                DayCell,
+                {
+                  contribution,
+                  period,
+                  locale,
+                  labels,
+                  delayIndex: weekIndex * 7 + dayIndex
+                },
+                dayIndex
+              ))
+            ] }, weekIndex);
+          }) })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { className: "contribution-heatmap__day-header" }),
+            months.map((month, index) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: `contribution-heatmap__month-header${index === months.length - 1 ? " contribution-heatmap__month-header--last" : ""}`,
+                colSpan: month.span,
+                children: /* @__PURE__ */ jsx("span", { className: "contribution-heatmap__month-header-text", children: month.name })
+              },
+              index
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: dayNames2.map((dayName, dayIndex) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("td", { className: "contribution-heatmap__day-label", children: dayName }),
+            weeks.map((week, weekIndex) => {
+              const contribution = week[dayIndex];
+              return /* @__PURE__ */ jsx(
+                DayCell,
+                {
+                  contribution,
+                  period,
+                  locale,
+                  labels,
+                  delayIndex: weekIndex * 7 + dayIndex
+                },
+                weekIndex
+              );
+            })
+          ] }, dayIndex)) })
+        ] }) }) }),
+        /* @__PURE__ */ jsx(Legend, { labels })
+      ]
+    }
+  );
 }
 
+// src/shared/groupByWeeks.ts
+var createEmpyContribution = (date) => ({
+  date,
+  count: 0,
+  level: 0
+});
+var createContributionMap = (contributions) => {
+  const contributionMap = /* @__PURE__ */ new Map();
+  contributions.forEach((contribution) => {
+    contributionMap.set(contribution.date, contribution);
+  });
+  return contributionMap;
+};
+var daysIntoWeek = (date, weekStartsOn) => (date.getDay() - weekStartsOn + 7) % 7;
+var getFirstDayOfWeek = (firstDate, weekStartsOn) => {
+  const startOfWeek = new Date(firstDate);
+  startOfWeek.setDate(firstDate.getDate() - daysIntoWeek(firstDate, weekStartsOn));
+  return startOfWeek;
+};
+var getLastDayOfWeek = (lastDate, weekStartsOn) => {
+  const endOfWeek = new Date(lastDate);
+  endOfWeek.setDate(lastDate.getDate() + (6 - daysIntoWeek(lastDate, weekStartsOn)));
+  return endOfWeek;
+};
+var createWeek = (startDate, contributionMap) => {
+  const week = [];
+  const currentDate = new Date(startDate);
+  for (let day = 0; day < 7; day++) {
+    const dateString = createDateString(currentDate);
+    const contribution = contributionMap.get(dateString);
+    if (contribution) {
+      week.push(contribution);
+    } else {
+      week.push(createEmpyContribution(dateString));
+    }
+    currentDate.setDate(currentDate.getDate() + 1);
+  }
+  return week;
+};
+var groupByWeeks = (contributions, { weekStartsOn = 0 } = {}) => {
+  const weeks = [];
+  const contributionMap = createContributionMap(contributions);
+  const firstDay = getFirstDayOfWeek(new Date(contributions[0].date), weekStartsOn);
+  const lastDate = getLastDayOfWeek(
+    new Date(contributions[contributions.length - 1].date),
+    weekStartsOn
+  );
+  const currentDate = new Date(firstDay);
+  while (currentDate <= lastDate) {
+    weeks.push(createWeek(currentDate, contributionMap));
+    currentDate.setDate(currentDate.getDate() + 7);
+  }
+  return weeks;
+};
+
 // src/mocks/createRealisticMockedCount.ts
 var isSummerMonth = (month) => {
   return month >= 5 && month <= 7;
@@ -257,158 +362,6 @@ function generateMockData({
   return data;
 }
 
-// src/shared/groupByWeeks.ts
-var createEmpyContribution = (date) => ({
-  date,
-  count: 0,
-  level: 0
-});
-var createContributionMap = (contributions) => {
-  const contributionMap = /* @__PURE__ */ new Map();
-  contributions.forEach((contribution) => {
-    contributionMap.set(contribution.date, contribution);
-  });
-  return contributionMap;
-};
-var getFirstSunday = (firstDate) => {
-  const startOfWeek = new Date(firstDate);
-  startOfWeek.setDate(firstDate.getDate() - firstDate.getDay());
-  return startOfWeek;
-};
-var getLastSaturday = (lastDate) => {
-  const endOfWeek = new Date(lastDate);
-  endOfWeek.setDate(lastDate.getDate() + (6 - lastDate.getDay()));
-  return endOfWeek;
-};
-var createWeek = (startDate, contributionMap) => {
-  const week = [];
-  const currentDate = new Date(startDate);
-  for (let day = 0; day < 7; day++) {
-    const dateString = createDateString(currentDate);
-    const contribution = contributionMap.get(dateString);
-    if (contribution) {
-      week.push(contribution);
-    } else {
-      week.push(createEmpyContribution(dateString));
-    }
-    currentDate.setDate(currentDate.getDate() + 1);
-  }
-  return week;
-};
-var groupByWeeks = (contributions) => {
-  const weeks = [];
-  const contributionMap = createContributionMap(contributions);
-  const firstDay = getFirstSunday(new Date(contributions[0].date));
-  const lastDate = getLastSaturday(
-    new Date(contributions[contributions.length - 1].date)
-  );
-  const currentDate = new Date(firstDay);
-  while (currentDate <= lastDate) {
-    weeks.push(createWeek(currentDate, contributionMap));
-    currentDate.setDate(currentDate.getDate() + 7);
-  }
-  return weeks;
-};
-function ControlGroups({
-  actions: { theme, setTheme, hasRealisticData, setHasRealisticData }
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "control-group", children: [
-      /* @__PURE__ */ jsx("label", { className: "control-group__label", children: "Theme:" }),
-      /* @__PURE__ */ jsxs("div", { className: "control-group__buttons", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: `theme-button ${theme === "" ? "theme-button--active" : ""}`,
-            onClick: () => setTheme(""),
-            children: "GitHub"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: `theme-button ${theme === "ocean" ? "theme-button--active" : ""}`,
-            onClick: () => setTheme("ocean"),
-            children: "Ocean"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: `theme-button ${theme === "sunset" ? "theme-button--active" : ""}`,
-            onClick: () => setTheme("sunset"),
-            children: "Sunset"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: `theme-button ${theme === "purple" ? "theme-button--active" : ""}`,
-            onClick: () => setTheme("purple"),
-            children: "Purple"
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "control-group", children: /* @__PURE__ */ jsxs("label", { className: "control-group__checkbox", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "checkbox",
-          checked: hasRealisticData,
-          onChange: (e) => setHasRealisticData(e.target.checked)
-        }
-      ),
-      "Use realistic sample data"
-    ] }) })
-  ] });
-}
-var lastYearPeriod = getLastYearPeriod();
-var lastMonthPeriod = getLastMonthPeriod();
-function ContributionHeatmapExample() {
-  const [theme, setTheme] = useState("");
-  const [hasRealisticData, setHasRealisticData] = useState(false);
-  const lastYearContribution = hasRealisticData ? generateMockData({ period: lastYearPeriod, isRealistic: true }) : generateMockData({
-    period: lastYearPeriod,
-    isRealistic: false
-  });
-  const lastMonthContribution = hasRealisticData ? generateMockData({ period: lastMonthPeriod, isRealistic: true }) : generateMockData({
-    period: lastMonthPeriod,
-    isRealistic: false
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "example__controls", children: /* @__PURE__ */ jsx(
-      ControlGroups,
-      {
-        actions: { theme, setTheme, hasRealisticData, setHasRealisticData }
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: "example__heatmap", children: /* @__PURE__ */ jsx(
-      ContributionHeatmap,
-      {
-        className: theme ? `contribution-heatmap--${theme}` : "",
-        data: {
-          weeks: groupByWeeks(lastYearContribution),
-          contribution: lastYearContribution,
-          period: lastYearPeriod
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: "example__heatmap", children: /* @__PURE__ */ jsx(
-      ContributionHeatmap,
-      {
-        isReverse: true,
-        className: theme ? `contribution-heatmap--${theme}` : "",
-        data: {
-          weeks: groupByWeeks(lastMonthContribution),
-          contribution: lastMonthContribution,
-          period: lastMonthPeriod
-        }
-      }
-    ) })
-  ] });
-}
-
-export { ContributionHeatmap, ContributionHeatmapExample };
+export { ContributionHeatmap, createDateString, dayNames, generateMockData, getLastMonthPeriod, getLastYearPeriod, groupByWeeks, monthNames };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map