GitSight React Package (gitsight-package)

GitSight ships as an open-source React library and CLI. Embed the entire application shell or individual views directly into your own developer portals, admin dashboards, or internal tools.

The npm name is gitsight-package — gitsight was already taken on the registry.

Installation

npm install gitsight-package

react and react-dom (>= 19) are peer dependencies, and the build is ESM-only. Everything is MIT licensed: no keys, no tiers, no metering.

Turnkey Component (<GitSightApp />)

The simplest way to use GitSight is the all-in-one <GitSightApp />. It mounts every module (Timeline, Analytics, QA & Audit, Strategic Calendar, Settings) with routing, data and theme state pre-wired:

import React from "react";
import { GitSightApp } from "gitsight-package";
import "gitsight-package/styles.css";

export default function App() {
  return (
    <div className="w-full min-h-screen">
      <GitSightApp />
    </div>
  );
}

Props

Prop	Type	Default	Purpose
initialData	GitData | Release[]	sample data	History to boot with — the array shape emitted by gitsight-extract or a full GitData object. Read once on mount.
initialRoute	string	"/timeline"	Which module opens first (/analytics, /qa, /calendar, /settings).
routing	"memory" | "browser"	"memory"	Memory routing keeps navigation inside the component so the host app’s URL is untouched. Switch to "browser" when GitSight owns the page.
basepath	string	—	Mount path prefix, only meaningful with routing="browser".

Passing Initial Data

import { GitSightApp } from "gitsight-package";
import "gitsight-package/styles.css";
import gitHistory from "./my-git-data.json";

export default function App() {
  return <GitSightApp initialData={gitHistory} />;
}

Anything the user imports through the UI afterwards takes over from the seeded data and persists locally.

---

Modular Usage

Prefer your own layout? Import the views and utilities you need:

import {
  Timeline,
  AnalyticsView,
  CalendarView,
  GitSightParser,
  computeHealthScore,
  getStabilityData,
  ApiProvider,
  GitDataProvider,
} from "gitsight-package";

Components that read or write application state must sit inside <ApiProvider> and <GitDataProvider>:

<ApiProvider>
  <GitDataProvider initialData={releases}>
    <Timeline gitData={{ releases }} />
  </GitDataProvider>
</ApiProvider>

The pure helpers — GitSightParser, computeHealthScore, getStabilityData, analyzeImpact, VersionService, getVersionQAStatus — have no React dependency and can run in Node, a CI job, or a serverless function.

QAView is intentionally not exported on its own: it reads its filters and sort state from router search params, so it is only available inside <GitSightApp />.

Styling

gitsight-package/styles.css is a prebuilt Tailwind bundle containing every utility GitSight renders, plus the calendar’s base styles. Import it once; you do not need Tailwind in your own project. Themes (Light / Dark / OLED) and the brand accent are applied through CSS variables and persist to localStorage.

CLI Extraction (npx gitsight-extract)

Extract tag and commit history — with per-file add/delete statistics — from any local Git repository:

npx gitsight-extract > data.json

Each tag becomes a release containing the commits reachable since the previous tag. The resulting JSON can be imported in the web UI or passed as initialData to <GitSightApp />. Repositories without tags produce an empty result, since GitSight groups commits by tag.