### Install Commit Graph Package

Source: https://github.com/dolthub/commit-graph/blob/main/README.md

Install the commit-graph package using npm.

```shell
npm install commit-graph
```

--------------------------------

### Run Storybook

Source: https://github.com/dolthub/commit-graph/blob/main/README.md

Command to start the Storybook development server for exploring the Commit Graph component.

```shell
npm run storybook
```

--------------------------------

### Migrate Commit Object Format

Source: https://github.com/dolthub/commit-graph/blob/main/CHANGELOG.md

Illustrates the transformation from the old commit object format to the new schema required for version 2.0.0 and later. Ensure your commit data adheres to the new structure for compatibility.

```javascript
// Old commit format
{
  hash: 'commitHash',
  ownerName: 'owner',
  repoName: 'repo',
  committer: {
    username: 'committerUsername',
    displayName: 'Committer Name',
    emailAddress: 'committer@example.com'
  },
  message: 'Commit message',
  parents: ['parentHash1', 'parentHash2'],
  committedAt: '2024-03-10',
  commitLink: 'https://example.com/commit/commitHash'
}

// New commit format
{
  sha: 'commitHash',
  commit: {
    author: {
      name: 'Committer Name',
      date: '2024-03-10', // or Date object or number
      email: 'committer@example.com'
    },
    message: 'Commit message',
  },
  parents: [{ sha: 'parentHash1' }, { sha: 'parentHash2' }],
  html_url: 'https://example.com/commit/commitHash'
}
```

--------------------------------

### Basic Commit Graph Usage

Source: https://github.com/dolthub/commit-graph/blob/main/README.md

Implement a basic CommitGraph component without infinite scroll. Provide commits, branch heads, and optional styling or diff fetching functions.

```jsx
import React from "react";
import { CommitGraph } from "commit-graph";

const MyComponent = () => {
  const commits = [
    // Commits data according to the new Commit type
  ];
  const branchHeads = [
    // Branch heads data according to the new Branch type
  ];

  return (
    <CommitGraph
      commits={commits}
      branchHeads={branchHeads}
      graphStyle={{
        commitSpacing: 50,
        branchSpacing: 20,
        branchColors: ["#FF0000", "#00FF00", "#0000FF"],
        nodeRadius: 2,
      }}
      getDiff={async (base, head) => {
        // Your implementation to fetch diff stats
        return {
          files: [
            {
              filename: "example.txt",
              status: "modified",
              additions: 10,
              deletions: 2,
            },
          ],
        };
      }}
    />
  );
};

export default MyComponent;
```

--------------------------------

### Migrate Branch Object Format

Source: https://github.com/dolthub/commit-graph/blob/main/CHANGELOG.md

Shows the conversion from the previous branch object structure to the updated format introduced in version 2.0.0. Verify that your branch data conforms to this new schema.

```javascript
// Old branch format
{
  branchName: 'main',
  headCommitHash: 'latestCommitHash',
  branchLink: 'https://example.com/branch/main'
}
// New branch format
{
  name: 'main',
  commit: {
    sha: 'latestCommitHash'
  },
  link: 'https://example.com/branch/main'
}
```

--------------------------------

### Implement Infinite Scroll for CommitGraph

Source: https://context7.com/dolthub/commit-graph/llms.txt

Uses the WithInfiniteScroll component to load commit data dynamically. Requires a loadMore callback and state management for pagination.

```tsx
import React, { useState, useCallback } from "react";
import { CommitGraph, Commit, Branch } from "commit-graph";

function InfiniteScrollCommitGraph() {
  const [commits, setCommits] = useState<Commit[]>([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);

  const branchHeads: Branch[] = [
    { name: "main", commit: { sha: commits[0]?.sha || "" } },
  ];

  const loadMore = useCallback(async () => {
    const response = await fetch(
      `https://api.github.com/repos/facebook/react/commits?page=${page}&per_page=30`
    );
    const newCommits = await response.json();

    setCommits((prev) => [...prev, ...newCommits]);
    setHasMore(newCommits.length === 30);
    setPage((prev) => prev + 1);
  }, [page]);

  const customDateFormat = (d: string | number | Date): string => {
    return new Date(d).toLocaleString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  };

  return (
    <div style={{ height: "600px", overflow: "auto" }}>
      <CommitGraph.WithInfiniteScroll
        commits={commits}
        branchHeads={branchHeads}
        loadMore={loadMore}
        hasMore={hasMore}
        dateFormatFn={customDateFormat}
        graphStyle={{
          commitSpacing: 90,
          branchSpacing: 20,
          nodeRadius: 2,
          branchColors: [
            "#010A40", "#FC42C9", "#3D91F0", "#29E3C1",
            "#C5A15A", "#FA7978", "#5D6280", "#5AC58D",
          ],
        }}
      />
    </div>
  );
}
```

--------------------------------

### Render Static Commit Graph with CommitGraph

Source: https://context7.com/dolthub/commit-graph/llms.txt

Use the CommitGraph component to render a static visualization of commit history. Provide commit data, branch heads, and optional styling or event handlers. The `getDiff` function can be implemented to fetch and display file changes for commits.

```tsx
import React from "react";
import { CommitGraph, Commit, Branch, Diff } from "commit-graph";

const commits: Commit[] = [
  {
    sha: "abc123def456",
    commit: {
      author: {
        name: "Jane Developer",
        date: 1699900000000,
        email: "jane@example.com",
      },
      message: "Merge pull request #42 from feature-branch",
    },
    parents: [
      { sha: "def456ghi789" },
      { sha: "xyz789abc123" },
    ],
    html_url: "https://github.com/org/repo/commit/abc123def456",
  },
  {
    sha: "def456ghi789",
    commit: {
      author: {
        name: "Jane Developer",
        date: 1699800000000,
      },
      message: "Add new feature implementation",
    },
    parents: [{ sha: "ghi789jkl012" }],
  },
  {
    sha: "xyz789abc123",
    commit: {
      author: {
        name: "John Coder",
        date: 1699700000000,
      },
      message: "Implement feature branch changes",
    },
    parents: [{ sha: "ghi789jkl012" }],
  },
  {
    sha: "ghi789jkl012",
    commit: {
      author: {
        name: "Jane Developer",
        date: 1699600000000,
      },
      message: "Initial commit",
    },
    parents: [],
  },
];

const branchHeads: Branch[] = [
  {
    name: "main",
    commit: { sha: "abc123def456" },
    link: "https://github.com/org/repo/tree/main",
  },
  {
    name: "feature-branch",
    commit: { sha: "xyz789abc123" },
    link: "https://github.com/org/repo/tree/feature-branch",
  },
];

function MyCommitGraph() {
  const handleCommitClick = (commit) => {
    console.log("Clicked commit:", commit.hash);
  };

  const getDiff = async (base: string, head: string): Promise<Diff> => {
    const response = await fetch(
      `https://api.github.com/repos/org/repo/compare/${base}...${head}`
    );
    const data = await response.json();
    return {
      files: data.files.map((f) => ({
        filename: f.filename,
        status: f.status,
        additions: f.additions,
        deletions: f.deletions,
        patch: f.patch,
        blob_url: f.blob_url,
      })),
    };
  };

  return (
    <CommitGraph
      commits={commits}
      branchHeads={branchHeads}
      currentBranch="main"
      fullSha={false}
      onCommitClick={handleCommitClick}
      getDiff={getDiff}
      graphStyle={{
        commitSpacing: 60,
        branchSpacing: 20,
        nodeRadius: 2,
        branchColors: ["#010A40", "#FC42C9", "#3D91F0", "#29E3C1"],
      }}
    />
  );
}

```

--------------------------------

### Commit Graph with Infinite Scroll

Source: https://github.com/dolthub/commit-graph/blob/main/README.md

Utilize CommitGraph.WithInfiniteScroll for large commit histories. Requires commits, branch heads, a loadMore function, and a hasMore flag.

```jsx
import React from "react";
import { CommitGraph } from "commit-graph";

const MyComponent = () => {
  // Your commit and branch head data, loadMore function, and hasMore flag
  return (
    <CommitGraph.WithInfiniteScroll
      commits={/* Your commits data */}
      branchHeads={/* Your branch heads data */}
      loadMore={/* Your loadMore function */}
      hasMore={/* hasMore flag */}
    />
  );
};

export default MyComponent;
```

--------------------------------

### Fetch and Display GitHub Commit Graph

Source: https://context7.com/dolthub/commit-graph/llms.txt

This component fetches commit and branch data from the GitHub API and renders it using the CommitGraph component. It includes functionality for infinite scrolling and fetching diff information for commits. Requires owner, repo, and optionally a GitHub token.

```tsx
import React, { useState, useEffect } from "react";
import { CommitGraph, Commit, Branch, Diff } from "commit-graph";

type Props = {
  owner: string;
  repo: string;
  token?: string;
};

function GitHubCommitGraph({ owner, repo, token }: Props) {
  const [commits, setCommits] = useState<Commit[]>([]);
  const [branches, setBranches] = useState<Branch[]>([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);
  const [error, setError] = useState<string | null>(null);

  const headers = {
    Authorization: token ? `Bearer ${token}` : "",
    Accept: "application/vnd.github.v3+json",
  };

  // Fetch branches on mount
  useEffect(() => {
    fetch(`https://api.github.com/repos/${owner}/${repo}/branches`, { headers })
      .then((res) => res.json())
      .then((data) =>
        setBranches(
          data.map((b: any) => ({
            name: b.name,
            commit: { sha: b.commit.sha },
            link: `https://github.com/${owner}/${repo}/tree/${b.name}`,
          }))
        )
      )
      .catch((e) => setError(e.message));
  }, [owner, repo]);

  // Fetch initial commits
  useEffect(() => {
    fetch(
      `https://api.github.com/repos/${owner}/${repo}/commits?page=1&per_page=30`,
      { headers }
    )
      .then((res) => res.json())
      .then((data) => {
        setCommits(data);
        setHasMore(data.length === 30);
        setPage(2);
      })
      .catch((e) => setError(e.message));
  }, [owner, repo]);

  const loadMore = async () => {
    const response = await fetch(
      `https://api.github.com/repos/${owner}/${repo}/commits?page=${page}&per_page=30`,
      { headers }
    );
    const newCommits = await response.json();
    setCommits((prev) => [...prev, ...newCommits]);
    setHasMore(newCommits.length === 30);
    setPage((prev) => prev + 1);
  };

  const getDiff = async (base: string, head: string): Promise<Diff> => {
    const response = await fetch(
      `https://api.github.com/repos/${owner}/${repo}/compare/${base}...${head}`,
      { headers }
    );
    const data = await response.json();
    return {
      files: data.files?.map((f: any) => ({
        filename: f.filename,
        status: f.status,
        additions: f.additions,
        deletions: f.deletions,
        patch: f.patch,
        blob_url: f.blob_url,
      })),
    };
  };

  if (error) return <div>Error: {error}</div>;

  return (
    <div style={{ padding: "20px" }}>
      <h2>
        <a href={`https://github.com/${owner}/${repo}`}>
          {owner}/{repo}
        </a>
      </h2>
      <CommitGraph.WithInfiniteScroll
        commits={commits}
        branchHeads={branches}
        loadMore={loadMore}
        hasMore={hasMore}
        getDiff={getDiff}
        currentBranch="main"
        dateFormatFn={(d) =>
          new Date(d).toLocaleString("en-US", {
            year: "numeric",
            month: "short",
            day: "numeric",
          })
        }
        graphStyle={{
          commitSpacing: 70,
          branchSpacing: 20,
          nodeRadius: 2,
          branchColors: ["#010A40", "#FC42C9", "#3D91F0", "#29E3C1"],
        }}
      />
    </div>
  );
}

// Usage
<GitHubCommitGraph owner="facebook" repo="react" token="ghp_xxx" />;

```

--------------------------------

### Custom Date Formatting Function

Source: https://github.com/dolthub/commit-graph/blob/main/README.md

Provide a custom dateFormatFn to format commit dates. This function accepts a date value and returns a formatted string.

```typescript
dateFormatFn?: (d: string | number | Date) => string;

Example:

const customDateTimeFormatFn = (d: string | number | Date): string => {
  return new Date(d).toLocaleString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
  });
};

const MyComponent = () => {
  // Your commit and branch head data, loadMore function, and hasMore flag
  return (
    <CommitGraph.WithInfiniteScroll
      commits={/* Your commits data */}
      branchHeads={/* Your branch heads data */}
      loadMore={/* Your loadMore function */}
      hasMore={/* hasMore flag */}
      dateFormatFn={customDateTimeFormatFn}
    />
  );
};

```

--------------------------------

### Branch Type Definition

Source: https://github.com/dolthub/commit-graph/blob/main/README.md

Defines the structure for a repository branch, including its name and the SHA of its latest commit.

```typescript
export type Branch = {
  name: string; // The name of the branch
  commit: {
    sha: string; // The SHA of the latest commit on the branch
  };
  link?: string; // A URL to the branch on GitHub (optional)
};
```

--------------------------------

### Display Commit Diff Statistics

Source: https://context7.com/dolthub/commit-graph/llms.txt

Renders file change statistics using the DiffSection component. Requires a commit object and a diff object containing file change details.

```tsx
import React from "react";
import { DiffSection, Commit, Diff } from "commit-graph";

const commit: Commit = {
  sha: "abc123def456789",
  commit: {
    author: {
      name: "Jane Developer",
      date: new Date("2024-01-15"),
    },
    message: "Add user authentication feature with OAuth support",
  },
  parents: [{ sha: "parent123456" }],
};

const diff: Diff = {
  files: [
    {
      filename: "src/auth/oauth.ts",
      status: "added",
      additions: 150,
      deletions: 0,
      blob_url: "https://github.com/org/repo/blob/main/src/auth/oauth.ts",
    },
    {
      filename: "src/components/Login.tsx",
      status: "modified",
      additions: 45,
      deletions: 12,
      patch: "@@ -10,6 +10,8 @@ ...",
    },
    {
      filename: "src/deprecated/oldAuth.ts",
      status: "deleted",
      additions: 0,
      deletions: 89,
    },
  ],
};

function CommitDiffView() {
  return (
    <DiffSection
      commit={commit}
      diff={diff}
      loading={false}
    />
  );
}
```

--------------------------------

### Custom Graph Styling

Source: https://github.com/dolthub/commit-graph/blob/main/README.md

Define custom graph styles using the graphStyle prop. This object allows customization of spacing, node radius, and branch colors.

```typescript
const graphStyle = {
  commitSpacing: 60,
  branchSpacing: 20,
  nodeRadius: 2,
  branchColors: ["#FF0000", "#00FF00", "#0000FF"],
};

```

--------------------------------

### Define Commit Graph Types

Source: https://context7.com/dolthub/commit-graph/llms.txt

TypeScript type definitions for representing commits, branches, diffs, and graph styling configurations.

```typescript
// Commit type - represents a single commit node
type Commit = {
  sha: string;
  commit: {
    author: {
      name: string;
      date: string | number | Date;
      email?: string;
    };
    message: string;
  };
  parents: { sha: string }[];
  html_url?: string;
  onCommitNavigate?: () => void;
};

// Branch type - represents a branch head pointer
type Branch = {
  name: string;
  commit: { sha: string };
  link?: string;
};

// Diff type - represents changes between commits
type Diff = {
  files?: ChangedItem[];
  tables?: ChangedItem[];  // For Dolt database tables
};

// ChangedItem type - individual file change details
type ChangedItem = {
  filename: string;
  status: string;  // "added" | "modified" | "deleted" | "new" | "removed"
  additions?: number;
  deletions?: number;
  patch?: string;
  blob_url?: string;
};

// GraphStyle type - customization options for graph rendering
type GraphStyle = {
  commitSpacing: number;    // Vertical space between commits (default: 90)
  branchSpacing: number;    // Horizontal space between branches (default: 20)
  branchColors: string[];   // Array of hex colors for branches
  nodeRadius: number;       // Radius of commit dots (default: 2)
};

// Example usage with full type safety
const graphStyle: GraphStyle = {
  commitSpacing: 60,
  branchSpacing: 25,
  nodeRadius: 3,
  branchColors: [
    "#010A40", "#FC42C9", "#3D91F0", "#29E3C1",
    "#C5A15A", "#FA7978", "#5D6280", "#5AC58D",
    "#5C5AC5", "#EB7340",
  ],
};
```

--------------------------------

### ChangedItem Type Definition

Source: https://github.com/dolthub/commit-graph/blob/main/README.md

Details the changes for a single file within a diff, including its status, additions, deletions, and optional patch data or blob URL.

```typescript
export type ChangedItem = {
  filename: string;
  status: string; // "added", "modified", or "deleted"
  additions: number;
  deletions: number;
  patch?: string; // Optional patch data for the changes
  blob_url?: string; // Optional URL to the file blob
};
```

--------------------------------

### Diff Type Definition

Source: https://github.com/dolthub/commit-graph/blob/main/README.md

Defines the structure for representing differences between two commits, primarily containing a list of changed files.

```typescript
export type Diff = {
  files: ChangedItem[];
};
```

--------------------------------

### Commit Type Definition

Source: https://github.com/dolthub/commit-graph/blob/main/README.md

Defines the structure of a commit object, including author details, message, parent commits, and an optional URL.

```typescript
type ParentCommit = {
  sha: string;
};

export type Commit = {
  sha: string;
  commit: {
    author: {
      name: string; // The name of the commit author
      date: string | number | Date; // The date of the commit
      email?: string; // The email of the commit author (optional)
    };
    message: string; // The commit message
  };
  parents: ParentCommit[]; // An array of parent commits
  html_url?: string; // The URL to view the commit (optional)
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.