@git-snitch/renderer 0.0.3

package/src/data.ts

@@ -0,0 +1,52 @@
+import { useMemo } from "react";
+import { isRepoReportData, isScanReportData, reportDataDiscriminantSchema } from "@git-snitch/core/report-data";
+import type { RepoReportData, ReportData, ScanReportData } from "@git-snitch/core";
+
+declare global {
+  interface Window {
+    readonly __GIT_SNITCH_REPORT_DATA__?: unknown;
+  }
+}
+
+export type ReportDataState =
+  | { readonly status: "ready"; readonly report: ReportData }
+  | { readonly status: "missing" }
+  | { readonly status: "invalid"; readonly reason: string };
+
+export function readInjectedReportData(): ReportDataState {
+  if (typeof window === "undefined") {
+    return { status: "missing" };
+  }
+
+  const candidate = window.__GIT_SNITCH_REPORT_DATA__;
+
+  if (candidate === undefined || typeof candidate === "string") {
+    return { status: "missing" };
+  }
+
+  if (isRepoReportData(candidate) || isScanReportData(candidate)) {
+    return { status: "ready", report: candidate };
+  }
+
+  if (reportDataDiscriminantSchema.safeParse(candidate).success) {
+    return { status: "invalid", reason: "Injected report data is missing required report sections." };
+  }
+
+  return { status: "invalid", reason: "Injected report data does not match the git-snitch report contract." };
+}
+
+export function isReadyReportData(state: ReportDataState): state is { readonly status: "ready"; readonly report: ReportData } {
+  return state.status === "ready";
+}
+
+export function useReportData(): ReportDataState {
+  return useMemo(() => readInjectedReportData(), []);
+}
+
+export function useIsRepoReport(report: ReportData | null | undefined): report is RepoReportData {
+  return Boolean(report && report.kind === "repo");
+}
+
+export function useIsScanReport(report: ReportData | null | undefined): report is ScanReportData {
+  return Boolean(report && report.kind === "scan");
+}

package/src/empty-state.tsx

@@ -0,0 +1,31 @@
+import { buttonVariants } from "@git-snitch/ui/components/button";
+import { Card, CardContent } from "@git-snitch/ui/components/card";
+import type { ReactNode } from "react";
+
+type EmptyStateProps = {
+  readonly title: string;
+  readonly description: string;
+  readonly action?: ReactNode;
+};
+
+export function EmptyState({ title, description, action }: EmptyStateProps) {
+  return (
+    <Card className="border-dashed bg-card/70 shadow-none">
+      <CardContent className="flex flex-col items-start gap-4 py-8 sm:flex-row sm:items-center sm:justify-between">
+        <div className="max-w-xl">
+          <h2 className="text-base font-semibold tracking-tight text-foreground">{title}</h2>
+          <p className="mt-2 text-sm leading-6 text-muted-foreground">{description}</p>
+        </div>
+        {action ? <div className="shrink-0">{action}</div> : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function EmptyStateAction({ href, children }: { readonly href: string; readonly children: ReactNode }) {
+  return (
+    <a href={href} className={buttonVariants({ variant: "outline", size: "sm" })}>
+      {children}
+    </a>
+  );
+}

package/src/export.ts

@@ -0,0 +1,77 @@
+import type { JsonValue, ReportData } from "@git-snitch/core";
+
+export type CsvCell = string | number | boolean | null | undefined;
+export type CsvRow = Readonly<Record<string, CsvCell>>;
+
+export type DownloadResult =
+  | { readonly status: "downloaded" }
+  | { readonly status: "unavailable"; readonly reason: string };
+
+const JSON_INDENT = 2;
+
+function hasBrowserDownloadApis(): boolean {
+  return (
+    typeof document !== "undefined" &&
+    typeof Blob !== "undefined" &&
+    typeof URL !== "undefined" &&
+    typeof URL.createObjectURL === "function" &&
+    typeof URL.revokeObjectURL === "function"
+  );
+}
+
+function escapeCsvCell(cell: CsvCell): string {
+  if (cell === null || cell === undefined) {
+    return "";
+  }
+
+  const value = String(cell);
+  const escaped = value.replaceAll('"', '""');
+  return /[",\n\r]/.test(escaped) ? `"${escaped}"` : escaped;
+}
+
+export function serializeCsv(rows: readonly CsvRow[], columns?: readonly string[]): string {
+  const resolvedColumns = columns ?? Array.from(new Set(rows.flatMap((row) => Object.keys(row))));
+
+  if (resolvedColumns.length === 0) {
+    return "";
+  }
+
+  const header = resolvedColumns.map(escapeCsvCell).join(",");
+  const body = rows.map((row) => resolvedColumns.map((column) => escapeCsvCell(row[column])).join(","));
+  return [header, ...body].join("\n");
+}
+
+export function serializeReportJson(report: ReportData | JsonValue): string {
+  return JSON.stringify(report, null, JSON_INDENT);
+}
+
+export function downloadTextFile(filename: string, content: string, mimeType: string): DownloadResult {
+  if (!hasBrowserDownloadApis()) {
+    return { status: "unavailable", reason: "Browser download APIs are not available in this environment." };
+  }
+
+  const blob = new Blob([content], { type: mimeType });
+  const objectUrl = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+
+  anchor.href = objectUrl;
+  anchor.download = filename;
+  anchor.rel = "noopener";
+  anchor.style.display = "none";
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(objectUrl);
+
+  return { status: "downloaded" };
+}
+
+export function downloadCsv(filename: string, rows: readonly CsvRow[], columns?: readonly string[]): DownloadResult {
+  const csv = serializeCsv(rows, columns);
+  return downloadTextFile(filename, csv, "text/csv;charset=utf-8");
+}
+
+export function downloadJson(filename: string, report: ReportData | JsonValue): DownloadResult {
+  const json = serializeReportJson(report);
+  return downloadTextFile(filename, json, "application/json;charset=utf-8");
+}

package/src/index.ts

@@ -0,0 +1,52 @@
+export {
+  ActivityHeatmap,
+  AdditionsVsDeletionsChart,
+  CodeOwnershipChart,
+  CommitActivityChart,
+  CommitSizeDistributionChart,
+  ContributionCalendar,
+  ContributorPieChart,
+  LanguageDistributionChart,
+  ProjectsComparisonChart,
+  TimeOfDayChart,
+  VelocityChart,
+  WeeklyActivityChart,
+  deriveActivityHeatmapData,
+  deriveAdditionsVsDeletionsData,
+  deriveCodeOwnershipData,
+  deriveCommitActivityData,
+  deriveCommitSizeDistributionData,
+  deriveContributionCalendarData,
+  deriveContributorPieData,
+  deriveLanguageDistributionData,
+  deriveProjectsComparisonData,
+  deriveTimeOfDayData,
+  deriveVelocityData,
+  deriveWeeklyActivityData,
+} from "./charts.js";
+export { buildStandaloneReportHtml } from "./build.js";
+export { readInjectedReportData, isReadyReportData, useIsRepoReport, useIsScanReport, useReportData } from "./data.js";
+export { EmptyState, EmptyStateAction } from "./empty-state.js";
+export { downloadCsv, downloadJson, downloadTextFile, serializeCsv, serializeReportJson } from "./export.js";
+export { createInlineHtmlPlugin, inlineHtmlAssets } from "./inline-plugin.js";
+export { AppShell, Header, Navigation, StatsGrid } from "./layout.js";
+export { injectReportDataIntoHtml, REPORT_DATA_PLACEHOLDER, serializeReportDataForHtml } from "./serialization.js";
+export { CommitsTable, ContributorsTable, DataTable, HotspotsTable } from "./tables.js";
+export type {
+  ActivityHeatmapCell,
+  AdditionsVsDeletionsPoint,
+  CodeOwnershipPoint,
+  CommitActivityPoint,
+  CommitSizeBucket,
+  ContributionCalendarDay,
+  ContributorPieSlice,
+  LanguageDistributionSlice,
+  ProjectComparisonPoint,
+  TimeOfDayPoint,
+  VelocityPoint,
+  WeeklyActivityPoint,
+} from "./charts.js";
+export type { CsvCell, CsvRow, DownloadResult } from "./export.js";
+export type { NavigationItem, StatItem } from "./layout.js";
+export type { CommitsTableProps, ContributorsTableProps, DataTableEmptyState, DataTableExport, DataTableProps, HotspotsTableProps } from "./tables.js";
+export type { RouteTemplateOverrides, RouteTemplatePropsById, TemplateComponent, TemplateModule } from "./template.js";

package/src/inline-plugin.ts

@@ -0,0 +1,123 @@
+import type { Plugin } from "vite";
+
+export interface InlineHtmlAsset {
+  readonly fileName: string;
+  readonly source: string;
+  readonly kind: "script" | "style";
+}
+
+export interface InlineHtmlResult {
+  readonly html: string;
+  readonly inlinedFileNames: readonly string[];
+}
+
+function normalizeAssetReference(reference: string): string {
+  return reference.replace(/^\.\//, "").replace(/^\//, "");
+}
+
+function findInlineAsset(assets: readonly InlineHtmlAsset[], reference: string, kind: InlineHtmlAsset["kind"]): InlineHtmlAsset | undefined {
+  const normalizedReference = normalizeAssetReference(reference);
+
+  return assets.find((asset) => asset.kind === kind && asset.fileName === normalizedReference);
+}
+
+export function inlineHtmlAssets(html: string, assets: readonly InlineHtmlAsset[]): InlineHtmlResult {
+  const inlined = new Set<string>();
+  let output = html.replace(/<link\s+[^>]*rel=["']modulepreload["'][^>]*>/g, "");
+
+  output = output.replace(/<script\s+([^>]*?)src=["']([^"']+)["']([^>]*)><\/script>/g, (tag, beforeAttributes, source, afterAttributes) => {
+    const asset = findInlineAsset(assets, source, "script");
+
+    if (!asset) {
+      return tag;
+    }
+
+    inlined.add(asset.fileName);
+    const attributes = `${beforeAttributes} ${afterAttributes}`.replace(/\s*crossorigin(?:=["'][^"']*["'])?/, "").trim();
+    const attributeText = attributes.length > 0 ? ` ${attributes}` : "";
+
+    return `<script${attributeText}>\n${asset.source}\n</script>`;
+  });
+
+  output = output.replace(/<link\s+([^>]*?)rel=["']stylesheet["']([^>]*?)href=["']([^"']+)["']([^>]*)>/g, (tag, beforeAttributes, middleAttributes, href) => {
+    const asset = findInlineAsset(assets, href, "style");
+
+    if (!asset) {
+      return tag;
+    }
+
+    inlined.add(asset.fileName);
+    const mediaMatch = `${beforeAttributes} ${middleAttributes}`.match(/\smedia=["']([^"']+)["']/);
+    const mediaAttribute = mediaMatch ? ` media="${mediaMatch[1]}"` : "";
+
+    return `<style${mediaAttribute}>\n${asset.source}\n</style>`;
+  });
+
+  output = output.replace(/<link\s+([^>]*?)href=["']([^"']+)["']([^>]*?)rel=["']stylesheet["']([^>]*)>/g, (tag, beforeAttributes, href, middleAttributes) => {
+    const asset = findInlineAsset(assets, href, "style");
+
+    if (!asset) {
+      return tag;
+    }
+
+    inlined.add(asset.fileName);
+    const mediaMatch = `${beforeAttributes} ${middleAttributes}`.match(/\smedia=["']([^"']+)["']/);
+    const mediaAttribute = mediaMatch ? ` media="${mediaMatch[1]}"` : "";
+
+    return `<style${mediaAttribute}>\n${asset.source}\n</style>`;
+  });
+
+  return { html: output, inlinedFileNames: [...inlined] };
+}
+
+function sourceToString(source: string | Uint8Array): string {
+  return typeof source === "string" ? source : new TextDecoder().decode(source);
+}
+
+export function createInlineHtmlPlugin(): Plugin {
+  return {
+    name: "git-snitch-inline-html",
+    enforce: "post",
+    generateBundle(_options, bundle) {
+      type BundleAsset = Extract<(typeof bundle)[string], { type: "asset" }>;
+
+      const htmlEntries: { readonly fileName: string; readonly asset: BundleAsset }[] = [];
+      const assets: InlineHtmlAsset[] = [];
+
+      for (const [fileName, entry] of Object.entries(bundle)) {
+        if (entry.type === "chunk") {
+          assets.push({ fileName: entry.fileName, source: entry.code, kind: "script" });
+        }
+
+        if (entry.type === "asset" && entry.fileName.endsWith(".css")) {
+          assets.push({ fileName: entry.fileName, source: sourceToString(entry.source), kind: "style" });
+        }
+
+        if (entry.type === "asset" && entry.fileName.endsWith(".html")) {
+          htmlEntries.push({ fileName, asset: entry });
+        }
+      }
+
+      if (htmlEntries.length !== 1) {
+        throw new Error(`Expected exactly one HTML asset to inline, found ${htmlEntries.length}.`);
+      }
+
+      const htmlEntry = htmlEntries[0];
+
+      if (!htmlEntry) {
+        throw new Error("Expected one HTML asset to inline, but none was available after validation.");
+      }
+
+      const result = inlineHtmlAssets(sourceToString(htmlEntry.asset.source), assets);
+      htmlEntry.asset.source = result.html;
+
+      for (const fileName of result.inlinedFileNames) {
+        delete bundle[fileName];
+      }
+
+      if (htmlEntry.fileName !== "report-template.html") {
+        throw new Error(`Expected Vite to emit report-template.html, received ${htmlEntry.fileName}.`);
+      }
+    },
+  };
+}

package/src/layout.tsx

@@ -0,0 +1,152 @@
+import { buttonVariants } from "@git-snitch/ui/components/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@git-snitch/ui/components/card";
+import { cn } from "@git-snitch/ui/lib/utils";
+import type { ReactNode } from "react";
+
+import { EmptyState } from "./empty-state.js";
+import { ThemeToggle } from "./theme-toggle.js";
+
+export type NavigationItem = {
+  readonly label: string;
+  readonly href: string;
+  readonly current?: boolean;
+  readonly disabled?: boolean;
+};
+
+export type StatItem = {
+  readonly label: string;
+  readonly value: string | number;
+  readonly description?: string;
+};
+
+type HeaderProps = {
+  readonly title: string;
+  readonly titleHref?: string;
+  readonly eyebrow?: string;
+  readonly description?: string;
+  readonly actions?: ReactNode;
+};
+
+type NavigationProps = {
+  readonly items: readonly NavigationItem[];
+  readonly label?: string;
+};
+
+type StatsGridProps = {
+  readonly stats: readonly StatItem[];
+  readonly emptyTitle?: string;
+  readonly emptyDescription?: string;
+};
+
+type AppShellProps = {
+  readonly title: string;
+  readonly titleHref?: string;
+  readonly eyebrow?: string;
+  readonly description?: string;
+  readonly navigationItems?: readonly NavigationItem[];
+  readonly headerActions?: ReactNode;
+  readonly children: ReactNode;
+};
+
+export function Header({ title, titleHref, eyebrow, description, actions }: HeaderProps) {
+  const titleContent = <h1 className="mt-3 text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">{title}</h1>;
+
+  return (
+    <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/75">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-5 py-8 sm:px-8 lg:flex-row lg:items-end lg:justify-between">
+        <div className="max-w-4xl">
+          {eyebrow ? <p className="text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground">{eyebrow}</p> : null}
+          {titleHref ? (
+            <a href={titleHref} target="_blank" rel="noopener noreferrer" className="hover:underline">
+              {titleContent}
+            </a>
+          ) : (
+            titleContent
+          )}
+          {description ? <p className="mt-3 max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p> : null}
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          {actions}
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export function Navigation({ items, label = "Report sections" }: NavigationProps) {
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav aria-label={label} className="border-b bg-background/80">
+      <div className="mx-auto flex w-full max-w-7xl gap-2 overflow-x-auto px-5 py-3 sm:px-8">
+        {items.map((item) =>
+          item.disabled ? (
+            <span
+              key={item.href}
+              aria-disabled="true"
+              className="inline-flex h-8 shrink-0 items-center border border-transparent px-3 text-xs font-medium text-muted-foreground/60"
+            >
+              {item.label}
+            </span>
+          ) : (
+            <a
+              key={item.href}
+              href={item.href}
+              aria-current={item.current ? "page" : undefined}
+              className={buttonVariants({ variant: item.current ? "secondary" : "ghost", size: "sm", className: "shrink-0" })}
+            >
+              {item.label}
+            </a>
+          ),
+        )}
+      </div>
+    </nav>
+  );
+}
+
+export function StatsGrid({
+  stats,
+  emptyTitle = "No report statistics yet",
+  emptyDescription = "This report does not include enough data for summary statistics.",
+}: StatsGridProps) {
+  if (stats.length === 0) {
+    return <EmptyState title={emptyTitle} description={emptyDescription} />;
+  }
+
+  return (
+    <section aria-label="Report summary statistics" className="grid grid-flow-dense gap-3 sm:grid-cols-2 lg:grid-cols-4">
+      {stats.map((stat) => (
+        <Card key={stat.label} className="min-h-32 shadow-none">
+          <CardHeader>
+            <CardTitle className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">{stat.label}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-3xl font-semibold tracking-tight text-foreground">{stat.value}</p>
+            {stat.description ? <p className="mt-2 text-xs leading-5 text-muted-foreground">{stat.description}</p> : null}
+          </CardContent>
+        </Card>
+      ))}
+    </section>
+  );
+}
+
+export function AppShell({
+  title,
+  titleHref,
+  eyebrow,
+  description,
+  navigationItems = [],
+  headerActions,
+  children,
+}: AppShellProps) {
+  return (
+    <main className="min-h-screen w-full max-w-full overflow-x-hidden bg-background text-foreground transition-colors">
+      <Header title={title} titleHref={titleHref} eyebrow={eyebrow} description={description} actions={headerActions} />
+      <Navigation items={navigationItems} />
+      <div className={cn("mx-auto flex w-full max-w-7xl flex-col gap-8 px-5 py-8 sm:px-8 sm:py-10")}>{children}</div>
+    </main>
+  );
+}

package/src/main.tsx

@@ -0,0 +1,17 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import "./styles.css";
+import { App } from "./app.js";
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+  throw new Error("Renderer root element #root was not found in the report template.");
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);