@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/components/mono-charts/GitHubActivity.js

@@ -0,0 +1,547 @@
+"use client";
+import {
+  cn
+} from "../../../catalog-chunks/chunk-OTFAZXKB.js";
+
+// .generated/catalog/components/mono-charts/GitHubActivity.tsx
+import * as React from "react";
+import { createPortal } from "react-dom";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion
+} from "framer-motion";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_ACCENT = "#39d353";
+var DEFAULT_CELL_SIZE = 11;
+var DEFAULT_LABEL = "Top contributions in:";
+var DEFAULT_MONTHS = 12;
+var WEEKS_PER_MONTH = 365.25 / 12 / 7;
+var STACK_LIMIT = 3;
+var MIN_CARD_WIDTH = 320;
+var MIN_LABEL_WEEKS = 3;
+var CARD_PADDING = 32;
+var gapFor = (cellSize) => Math.max(2, Math.round(cellSize / 4));
+var weeksFor = (months) => Math.max(1, Math.ceil(months * WEEKS_PER_MONTH));
+var useIsoLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+var EASE_OUT = [0.22, 1, 0.36, 1];
+var SPRING = { type: "spring", bounce: 0.2, duration: 0.62 };
+var HEADER_SPRING = { ...SPRING, bounce: 0.45 };
+var ROW_SPRING = { ...SPRING, bounce: 0.26, delay: 0.08 };
+var ROW_OFFSET = 16;
+var CELL_FADE = { duration: 0.2, ease: EASE_OUT };
+var TOOLTIP_FADE = { duration: 0.14, ease: EASE_OUT };
+var TOOLTIP_EDGE = 8;
+var COLUMN_STAGGER = 0.012;
+var LABEL_BLUR = 6;
+var LABEL_REVEAL = { duration: 0.45, ease: EASE_OUT };
+var LEVELS = [0, 1, 2, 3, 4];
+var MONTH_NAMES = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function toMonthLabels(weeks) {
+  const labels = weeks.map(() => null);
+  const monthAt = (index) => weeks[index]?.[0]?.date.slice(5, 7);
+  let start = 0;
+  for (let i = 1; i <= weeks.length; i++) {
+    if (i < weeks.length && monthAt(i) === monthAt(start)) continue;
+    if (i - start >= MIN_LABEL_WEEKS) {
+      labels[start] = MONTH_NAMES[Number(monthAt(start)) - 1] ?? null;
+    }
+    start = i;
+  }
+  return labels;
+}
+var LEVEL_OPACITY = {
+  0: 0,
+  1: 0.3,
+  2: 0.52,
+  3: 0.76,
+  4: 1
+};
+var DATE_FORMAT = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric"
+});
+function describeDay({ count, date }) {
+  const noun = count === 1 ? "contribution" : "contributions";
+  return `${count} ${noun} on ${DATE_FORMAT.format(/* @__PURE__ */ new Date(`${date}T00:00:00`))}`;
+}
+var CALENDAR_API = "https://github-contributions-api.jogruber.de/v4";
+var EVENTS_API = "https://api.github.com/users";
+async function fetchCalendar(login) {
+  const res = await fetch(`${CALENDAR_API}/${login}?y=last`);
+  if (!res.ok) return null;
+  const days = (await res.json())?.contributions ?? [];
+  if (!days.length) return null;
+  const start = days.findIndex(
+    (day) => (/* @__PURE__ */ new Date(`${day.date}T00:00:00Z`)).getUTCDay() === 0
+  );
+  return days.slice(start < 0 ? 0 : start).map((day) => ({
+    date: day.date,
+    count: day.count,
+    level: Math.min(4, Math.max(0, day.level))
+  }));
+}
+async function fetchRepos(login) {
+  const res = await fetch(`${EVENTS_API}/${login}/events/public?per_page=100`);
+  if (!res.ok) return [];
+  const events = await res.json();
+  const counts = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    if (event.type !== "PushEvent" || !event.repo) continue;
+    const commits = event.payload?.commits?.length ?? 1;
+    counts.set(event.repo.name, (counts.get(event.repo.name) ?? 0) + commits);
+  }
+  return [...counts.entries()].sort(([, a], [, b]) => b - a).slice(0, STACK_LIMIT).map(([fullName, count]) => {
+    const [owner, name] = fullName.split("/");
+    return {
+      name,
+      count,
+      href: `https://github.com/${fullName}`,
+      logo: owner.toLowerCase() === login.toLowerCase() ? void 0 : /* @__PURE__ */ jsx("img", { src: `https://github.com/${owner}.png?size=64`, alt: "" })
+    };
+  });
+}
+function useGitHubUser(login) {
+  const [data, setData] = React.useState();
+  React.useEffect(() => {
+    if (!login) return;
+    let active = true;
+    Promise.all([fetchCalendar(login), fetchRepos(login)]).then(([contributions, repos]) => {
+      if (active && contributions) setData({ contributions, repos });
+    }).catch(() => {
+    });
+    return () => {
+      active = false;
+    };
+  }, [login]);
+  return data;
+}
+function generateDemoContributions(weeks) {
+  const today = /* @__PURE__ */ new Date();
+  return Array.from({ length: weeks * 7 }, (_, i) => {
+    const date = new Date(today);
+    date.setDate(date.getDate() - (weeks * 7 - 1 - i));
+    const rand = Math.random();
+    let level = 0;
+    let count = 0;
+    if (rand > 0.4) {
+      level = Math.floor(Math.random() * 4 + 1);
+      count = level * 3 + Math.floor(Math.random() * 3);
+    }
+    return {
+      date: date.toISOString().slice(0, 10),
+      count,
+      level
+    };
+  });
+}
+function toScale(accent) {
+  if (typeof accent === "string") {
+    return LEVELS.map((level) => ({
+      backgroundColor: accent,
+      opacity: LEVEL_OPACITY[level]
+    }));
+  }
+  const colors = accent.length > 4 ? accent : ["transparent", ...accent];
+  return LEVELS.map((level) => {
+    const color = colors[level] ?? colors.at(-1) ?? "transparent";
+    return { backgroundColor: color, opacity: color === "transparent" ? 0 : 1 };
+  });
+}
+function toWeeks(contributions) {
+  const weeks = [];
+  for (let i = 0; i < contributions.length; i += 7) {
+    weeks.push(contributions.slice(i, i + 7));
+  }
+  return weeks;
+}
+function useFittedColumns(cellSize, gap) {
+  const ref = React.useRef(null);
+  const [columns, setColumns] = React.useState();
+  useIsoLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => setColumns(
+      Math.max(1, Math.floor((el.clientWidth + gap) / (cellSize + gap)))
+    );
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [cellSize, gap]);
+  return [ref, columns];
+}
+var Tooltip = ({
+  hovered,
+  reduceMotion
+}) => {
+  const ref = React.useRef(null);
+  const [left, setLeft] = React.useState(hovered.x);
+  useIsoLayoutEffect(() => {
+    const half = (ref.current?.offsetWidth ?? 0) / 2;
+    const edge = TOOLTIP_EDGE + half;
+    setLeft(Math.min(Math.max(hovered.x, edge), window.innerWidth - edge));
+  }, [hovered]);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none fixed z-50",
+        style: {
+          left,
+          top: hovered.y,
+          transform: "translate(-50%, calc(-100% - 8px))"
+        },
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            ref,
+            className: "whitespace-nowrap rounded-lg bg-foreground px-2 py-1 text-[11px] font-medium text-background shadow-md",
+            initial: reduceMotion ? false : { opacity: 0, scale: 0.94 },
+            animate: { opacity: 1, scale: 1 },
+            exit: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.94 },
+            transition: reduceMotion ? { duration: 0 } : TOOLTIP_FADE,
+            children: describeDay(hovered.day)
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+var ContributionGrid = ({
+  contributions,
+  scale,
+  cellSize,
+  months,
+  showMonths,
+  label,
+  reduceMotion
+}) => {
+  const weeks = React.useMemo(() => toWeeks(contributions), [contributions]);
+  const gap = gapFor(cellSize);
+  const [ref, columns] = useFittedColumns(cellSize, gap);
+  const [hovered, setHovered] = React.useState();
+  const cap = Math.min(weeks.length, weeksFor(months));
+  const visible = weeks.slice(-Math.min(cap, columns ?? cap));
+  const sweepEnd = (visible.length - 1) * COLUMN_STAGGER + CELL_FADE.duration;
+  const hover = (day) => (event) => {
+    const cell = event.currentTarget.getBoundingClientRect();
+    setHovered({ day, x: cell.left + cell.width / 2, y: cell.top });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "github-activity-grid",
+      role: "img",
+      "aria-label": label,
+      className: "relative",
+      children: [
+        showMonths && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "flex justify-center",
+            style: { gap, marginBottom: gap },
+            initial: reduceMotion ? false : { opacity: 0, filter: `blur(${LABEL_BLUR}px)` },
+            animate: { opacity: 1, filter: "blur(0px)" },
+            transition: {
+              ...LABEL_REVEAL,
+              delay: reduceMotion ? 0 : sweepEnd
+            },
+            children: toMonthLabels(visible).map((month, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "relative h-3 shrink-0",
+                style: { width: cellSize },
+                children: month && /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-0 text-[10px] leading-none text-foreground/40 font-mono", children: month })
+              },
+              index
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex justify-center overflow-hidden",
+            style: { gap },
+            onPointerLeave: () => setHovered(void 0),
+            children: visible.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap }, children: week.map((day) => /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                onPointerEnter: hover(day),
+                className: "shrink-0 rounded-[3px] bg-foreground/[0.08]",
+                style: { width: cellSize, height: cellSize },
+                initial: reduceMotion ? false : { opacity: 0, scale: 0.4 },
+                animate: { opacity: 1, scale: 1 },
+                transition: {
+                  ...CELL_FADE,
+                  delay: reduceMotion ? 0 : weekIndex * COLUMN_STAGGER
+                },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-full w-full rounded-[3px]",
+                    style: scale[day.level] ?? scale[0]
+                  }
+                )
+              },
+              day.date
+            )) }, weekIndex))
+          }
+        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: hovered && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            hovered,
+            reduceMotion
+          },
+          "tooltip"
+        ) })
+      ]
+    }
+  );
+};
+var Avatar = ({
+  repo,
+  layoutId,
+  transition,
+  className
+}) => /* @__PURE__ */ jsx(
+  motion.span,
+  {
+    layoutId,
+    transition,
+    className: cn(
+      "grid size-7 shrink-0 place-items-center overflow-hidden rounded-full bg-neutral-200 text-[11px] font-medium uppercase text-foreground/70 ring-2 ring-background dark:bg-neutral-800",
+      "[&_img]:size-full [&_img]:object-cover [&_svg]:size-full",
+      className
+    ),
+    children: repo.logo ?? repo.name.charAt(0)
+  }
+);
+var RepoRow = ({
+  repo,
+  layoutId,
+  transition
+}) => {
+  const className = "flex items-center gap-3 rounded-xl mx-2 px-2 py-2 transition-colors hover:bg-foreground/5";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Avatar, { repo, layoutId, transition }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-sm text-foreground", children: repo.name }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums text-foreground/70 font-mono", children: repo.count })
+  ] });
+  return repo.href ? /* @__PURE__ */ jsx("a", { href: repo.href, target: "_blank", rel: "noreferrer", className, children: content }) : /* @__PURE__ */ jsx("div", { className, children: content });
+};
+var Chevron = ({
+  open,
+  transition
+}) => /* @__PURE__ */ jsxs(
+  motion.svg,
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    className: "size-7 text-[#C4C9CC] dark:text-[#3E4346]",
+    initial: false,
+    animate: { rotate: open ? 180 : 0 },
+    transition,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { d: "m16 10-4 4-4-4" })
+    ]
+  }
+);
+var DEMO_REPOS = [
+  { name: "mova-ui", count: 142 },
+  { name: "evilcharts", count: 98 },
+  { name: "monocharts", count: 64 }
+];
+function GitHubActivity({
+  className,
+  username,
+  contributions: contributionsProp,
+  repos: reposProp,
+  year,
+  accent = DEFAULT_ACCENT,
+  cellSize = DEFAULT_CELL_SIZE,
+  months = DEFAULT_MONTHS,
+  showMonths = true,
+  label = DEFAULT_LABEL,
+  defaultOpen = false,
+  open: openProp,
+  onOpenChange,
+  style,
+  theme = "dark",
+  ...props
+}) {
+  const reduceMotion = useReducedMotion();
+  const uid = React.useId();
+  const [openState, setOpenState] = React.useState(defaultOpen);
+  const open = openProp ?? openState;
+  const toggle = () => {
+    if (openProp === void 0) setOpenState(!open);
+    onOpenChange?.(!open);
+  };
+  const demoContributions = React.useMemo(() => generateDemoContributions(weeksFor(months)), [months]);
+  const needsFetch = username && (!contributionsProp?.length || !reposProp?.length);
+  const fetched = useGitHubUser(needsFetch ? username : void 0);
+  const contributions = contributionsProp?.length ? contributionsProp : fetched?.contributions ?? demoContributions;
+  const repos = reposProp?.length ? reposProp : fetched?.repos?.length ? fetched.repos : DEMO_REPOS;
+  const scale = React.useMemo(() => toScale(accent), [accent]);
+  const transition = reduceMotion ? { duration: 0 } : SPRING;
+  const headerTransition = reduceMotion ? { duration: 0 } : HEADER_SPRING;
+  const rowTransition = reduceMotion ? { duration: 0 } : ROW_SPRING;
+  const kick = reduceMotion ? {} : { x: ROW_OFFSET, y: ROW_OFFSET };
+  const listMotion = {
+    initial: { opacity: 0, ...kick },
+    animate: { opacity: 1, x: 0, y: 0 },
+    exit: { opacity: 0, ...kick }
+  };
+  const total = React.useMemo(
+    () => contributions.reduce((sum, day) => sum + day.count, 0),
+    [contributions]
+  );
+  const parsedYear = Number(contributions.at(-1)?.date.slice(0, 4));
+  const displayYear = year ?? (Number.isFinite(parsedYear) ? parsedYear : null);
+  const heading = `${total} contributions${displayYear ? ` in ${displayYear}` : ""}`;
+  const gap = gapFor(cellSize);
+  const columns = Math.min(
+    Math.ceil(contributions.length / 7),
+    weeksFor(months)
+  );
+  const width = Math.max(
+    MIN_CARD_WIDTH,
+    columns * (cellSize + gap) - gap + CARD_PADDING
+  );
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "github-activity",
+      className: cn(
+        "relative max-w-full overflow-hidden rounded-[24px] transition-all duration-300 group flex flex-col justify-between p-4 sm:p-5 font-sans",
+        isDark ? "bg-[#181818] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] text-white hover:bg-[#202020]" : "bg-white shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-neutral-100 text-black hover:shadow-[0_6px_24px_rgba(0,0,0,0.06)]",
+        repos.length > 0 && "pb-[76px]",
+        className
+      ),
+      style: { width: "100%", ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-3 px-1", children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-xs font-semibold tracking-wider uppercase ${isDark ? "text-neutral-400" : "text-neutral-500"}`, children: "Activity Calendar" }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-mono bg-emerald-500/20 text-emerald-400 border border-emerald-500/30", children: "GitHub Heatmap" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-lg font-bold tracking-tight mt-0.5 font-sans", children: heading })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          ContributionGrid,
+          {
+            contributions,
+            scale,
+            cellSize,
+            months,
+            showMonths,
+            label: heading,
+            reduceMotion
+          }
+        ),
+        repos.length > 0 && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            layout: true,
+            id: `${uid}-panel`,
+            "data-slot": "github-activity-panel",
+            "data-state": open ? "open" : "closed",
+            className: cn(
+              "absolute inset-x-3 bottom-3 overflow-hidden backdrop-blur-xl border transition-colors",
+              isDark ? "bg-[#131313]/90 border-white/10 text-white" : "bg-neutral-100/90 border-neutral-200 text-black",
+              open && "top-3 z-20"
+            ),
+            style: { borderRadius: 18 },
+            transition,
+            children: [
+              /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  layout: "position",
+                  transition: headerTransition,
+                  className: "flex items-center justify-between gap-3 py-2.5 px-4",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium opacity-70", children: label }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                      !open && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: repos.slice(0, STACK_LIMIT).map((repo, index) => /* @__PURE__ */ jsx(
+                        Avatar,
+                        {
+                          repo,
+                          layoutId: `${uid}-${index}`,
+                          transition,
+                          className: "-ml-2 first:ml-0"
+                        },
+                        index
+                      )) }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: toggle,
+                          "aria-expanded": open,
+                          "aria-controls": `${uid}-panel`,
+                          "aria-label": open ? "Hide top repositories" : "Show top repositories",
+                          className: `grid size-7 shrink-0 place-items-center rounded-full transition-colors cursor-pointer ${isDark ? "bg-white/10 hover:bg-white/20 text-white" : "bg-black/10 hover:bg-black/20 text-black"}`,
+                          children: /* @__PURE__ */ jsx(Chevron, { open, transition })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: open && /* @__PURE__ */ jsx(
+                motion.ul,
+                {
+                  layout: "position",
+                  ...listMotion,
+                  transition: rowTransition,
+                  className: "px-0.5 pb-1",
+                  children: repos.map((repo, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                    RepoRow,
+                    {
+                      repo,
+                      layoutId: `${uid}-${index}`,
+                      transition
+                    }
+                  ) }, index))
+                },
+                "list"
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var GitHubActivity_default = GitHubActivity;
+export {
+  GitHubActivity,
+  GitHubActivity_default as default
+};

package/dist/catalog/components/mono-charts/MonoActivityHeatmap.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type ContributionLevel = 0 | 1 | 2 | 3 | 4;
+export type Contribution = {
+    date: string;
+    count: number;
+    level: ContributionLevel;
+};
+interface MonoActivityHeatmapProps {
+    theme?: 'dark' | 'light';
+    accentColor?: 'green' | 'blue' | 'purple' | 'mono';
+    compact?: boolean;
+}
+export declare function MonoActivityHeatmap({ theme, accentColor, compact, }: MonoActivityHeatmapProps): React.JSX.Element;
+export {};