External Git Provider URL Builder

README.md

@@ -196,37 +196,38 @@ All components have optional props to further configure the log.
 
 ### GitLog
 
-| Property              | Type                        | Description                                                                                              |
-|-----------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
-| `theme`               | `ThemeMode`                 | The variant of the default color theme to apply to the log.                                              |
-| `colours`             | `ThemeColours \| string[]`  | Array of colors used for graph elements. One per column, looping if insufficient colors are provided.    |
-| `showHeaders`         | `boolean`                   | Whether to show element names like "Graph" or "Commit message" at the top of the component.              |
-| `rowSpacing`          | `number`                    | The spacing between log rows, affecting branches, graph, and table. Default: `0`.                        |
-| `githubRepositoryUrl` | `string`                    | URL of the GitHub repository where `entries` came from. Enables links for commits, tags, and PRs.        |
-| `defaultGraphWidth`   | `number`                    | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
-| `onSelectCommit`      | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected.                      |
-| `classes`             | `GitLogStylingProps`        | CSS classes for various elements to enable custom styling.                                               |
-| `paging`              | `GitLogPaging`              | Optional paging settings for displaying a subset of log entries.                                         |
-| `indexStatus`         | `GitLogIndexStatus`         | Renders information about added, deleted and modified files to the index pseudo-commit entry.            |
-
+| Property            | Type                        | Description                                                                                              |
+|---------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
+| `theme`             | `ThemeMode`                 | The variant of the default color theme to apply to the log.                                              |
+| `colours`           | `ThemeColours \| string[]`  | Array of colors used for graph elements. One per column, looping if insufficient colors are provided.    |
+| `showHeaders`       | `boolean`                   | Whether to show element names like "Graph" or "Commit message" at the top of the component.              |
+| `rowSpacing`        | `number`                    | The spacing between log rows, affecting branches, graph, and table. Default: `0`.                        |
+| `urls`              | `GitLogUrlBuilder`          | A function that returns built URLs to the remote Git provider. Enables links for commits, tags, and PRs. |
+| `defaultGraphWidth` | `number`                    | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
+| `onSelectCommit`    | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected.                      |
+| `classes`           | `GitLogStylingProps`        | CSS classes for various elements to enable custom styling.                                               |
+| `paging`            | `GitLogPaging`              | Optional paging settings for displaying a subset of log entries.                                         |
+| `indexStatus`       | `GitLogIndexStatus`         | Renders information about added, deleted and modified files to the index pseudo-commit entry.            |
+| `showGitIndex`      | `boolean`                   | Enables the Git index "pseudo-commit' entry above the HEAD commit.                                       |
 
 ### GitLogPaged
 
-| Property              | Type                        | Description                                                                                              |
-|-----------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
-| `theme`               | `ThemeMode`                 | The variant of the default color theme to apply to the log.                                              |
-| `colours`             | `ThemeColours \| string[]`  | Array of colors used for graph elements. One per column, looping if insufficient colors are provided.    |
-| `showHeaders`         | `boolean`                   | Whether to show element names like "Graph" or "Commit message" at the top of the component.              |
-| `rowSpacing`          | `number`                    | The spacing between log rows, affecting branches, graph, and table. Default: `0`.                        |
-| `githubRepositoryUrl` | `string`                    | URL of the GitHub repository where `entries` came from. Enables links for commits, tags, and PRs.        |
-| `defaultGraphWidth`   | `number`                    | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
-| `onSelectCommit`      | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected.                      |
-| `classes`             | `GitLogStylingProps`        | CSS classes for various elements to enable custom styling.                                               |
-| `indexStatus`         | `GitLogIndexStatus`         | Renders information about added, deleted and modified files to the index pseudo-commit entry.            |
-| `showGitIndex`        | `boolean`                   | Enables the Git index "pseudo-commit' entry above the HEAD commit.                                       |
+| Property            | Type                        | Description                                                                                              |
+|---------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
+| `theme`             | `ThemeMode`                 | The variant of the default color theme to apply to the log.                                              |
+| `colours`           | `ThemeColours \| string[]`  | Array of colors used for graph elements. One per column, looping if insufficient colors are provided.    |
+| `showHeaders`       | `boolean`                   | Whether to show element names like "Graph" or "Commit message" at the top of the component.              |
+| `rowSpacing`        | `number`                    | The spacing between log rows, affecting branches, graph, and table. Default: `0`.                        |
+| `urls`              | `GitLogUrlBuilder`          | A function that returns built URLs to the remote Git provider. Enables links for commits, tags, and PRs. |
+| `defaultGraphWidth` | `number`                    | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
+| `onSelectCommit`    | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected.                      |
+| `classes`           | `GitLogStylingProps`        | CSS classes for various elements to enable custom styling.                                               |
+| `indexStatus`       | `GitLogIndexStatus`         | Renders information about added, deleted and modified files to the index pseudo-commit entry.            |
+| `showGitIndex`      | `boolean`                   | Enables the Git index "pseudo-commit' entry above the HEAD commit.                                       |
 
 
 #### GitLogStylingProps
+
 | Property          | Type            | Description                                                                    |
 |-------------------|-----------------|--------------------------------------------------------------------------------|
 | `containerClass`  | `string`        | Class name for the wrapping `<div>` containing branches, graph, and log table. |
@@ -247,6 +248,19 @@ All components have optional props to further configure the log.
 | `deleted`  | `number` | The number of deleted files in the git index for the checked-out branch.  |
 | `modified` | `number` | The number of modified files in the git index for the checked-out branch. |
 
+#### GitLogUrlBuilder
+
+A function with the following signature
+```typescript
+type GitLogUrlBuilder = (args: GitLogUrlBuilderArgs) => GitLogUrls
+```
+Returns an object of type `GitLogUrls` with the following fields.
+
+| Prop       | Type     | Description                                                                              |
+|------------|----------|------------------------------------------------------------------------------------------|
+| `commit`   | `string` | A resolved URL to a particular commit hash on the external Git providers remote website. |
+| `branch`   | `string` | A resolved URL to a branch on the external Git providers remote website.                 |
+
 ### Graph
 
 | Property                 | Type                | Description                                                                                                    |

packages/demo/src/GitLog.stories.tsx

@@ -35,7 +35,6 @@ const meta: Meta<StoryProps> = {
     onSelectCommit: (commit?: Commit) => {
       console.info(`Selected commit ${commit?.hash}`)
     },
-    githubRepositoryUrl: 'https://github.com/TomPlum/sleep',
     defaultGraphWidth: 200,
     rowSpacing: 0,
     page: 0,
@@ -84,12 +83,6 @@ const meta: Meta<StoryProps> = {
         category: 'Visibility'
       }
     },
-    githubRepositoryUrl: {
-      name: 'Github Repository',
-      table: {
-        category: 'Visibility'
-      }
-    },
     nodeTheme: {
       name: 'Node Style',
       table: {
@@ -200,6 +193,7 @@ export const Demo: Story = {
       colours,
       entries,
       branch,
+      buildUrls,
       repository,
       backgroundColour,
       handleChangeTheme,
@@ -246,6 +240,7 @@ export const Demo: Story = {
               modified: 5,
               deleted: 1
             }}
+            urls={buildUrls}
           >
             {args.showBranchesTags && (
               <GitLog.Tags />

packages/demo/src/GitLogPaged.stories.tsx

@@ -33,7 +33,6 @@ const meta: Meta<StoryProps> = {
     onSelectCommit: (commit?: Commit) => {
       console.info(`Selected commit ${commit?.hash}`)
     },
-    githubRepositoryUrl: 'https://github.com/TomPlum/sleep',
     defaultGraphWidth: 120,
     rowSpacing: 0,
   },
@@ -74,12 +73,6 @@ const meta: Meta<StoryProps> = {
         category: 'Visibility'
       }
     },
-    githubRepositoryUrl: {
-      name: 'Github Repository',
-      table: {
-        category: 'Visibility'
-      }
-    },
     nodeTheme: {
       name: 'Node Style',
       table: {
@@ -171,6 +164,7 @@ export const Demo: Story = {
       colours,
       entries,
       branch,
+      buildUrls,
       repository,
       headCommitHash,
       backgroundColour,
@@ -228,6 +222,7 @@ export const Demo: Story = {
               modified: 2,
               deleted: 3
             }}
+            urls={buildUrls}
           >
             <GitLogPaged.Graph
               nodeSize={args.nodeSize}

packages/demo/src/hooks/useStoryState/useStoryState.ts

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from 'react'
-import type { GitLogEntry, ThemeMode } from '@tomplum/react-git-log'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import type { ThemeMode, GitLogUrlBuilder, GitLogUrlBuilderArgs } from '@tomplum/react-git-log'
 import { ColourSelection } from 'components/ColourSelector'
 import { rainbow } from 'themes.ts'
 import { StoryStateProps } from './types'
@@ -13,7 +13,8 @@ const getRepositoryConfig = (name: string) => {
         fileNameEntireHistory: 'sleep.txt',
         fileNameCheckedOutBranch: 'sleep-release.txt',
         headCommitHash: '1352f4c',
-        headCommitCheckoutOutBranch: 'e059c28'
+        headCommitCheckoutOutBranch: 'e059c28',
+        url: 'https://github.com/TomPlum/sleep'
       }
     }
     case 'TomPlum/advent-of-code-2019': {
@@ -22,7 +23,8 @@ const getRepositoryConfig = (name: string) => {
         fileNameEntireHistory: 'advent-of-code-2019.txt',
         fileNameCheckedOutBranch: 'advent-of-code-2019-master.txt',
         headCommitHash: 'c88f0b9',
-        headCommitCheckoutOutBranch: '12d47cc'
+        headCommitCheckoutOutBranch: '12d47cc',
+        url: 'https://github.com/TomPlum/advent-of-code-2019'
       }
     }
     case 'TomPlum/learn-japanese': {
@@ -31,7 +33,8 @@ const getRepositoryConfig = (name: string) => {
         fileNameEntireHistory: 'learn-japanese.txt',
         fileNameCheckedOutBranch: 'learn-japanese-feature.txt',
         headCommitHash: 'de80ee8',
-        headCommitCheckoutOutBranch: 'de80ee8d'
+        headCommitCheckoutOutBranch: 'de80ee8d',
+        url: 'https://github.com/TomPlum/learn-japanese'
       }
     }
     default: {
@@ -42,12 +45,14 @@ const getRepositoryConfig = (name: string) => {
 
 export const useStoryState = ({ isServerSidePaginated, onChangeRepository }: StoryStateProps = {}) => {
   const [repository, setRepository] = useState('TomPlum/sleep')
+
   const {
     branchName,
     fileNameEntireHistory,
     fileNameCheckedOutBranch,
     headCommitHash,
-    headCommitCheckoutOutBranch
+    headCommitCheckoutOutBranch,
+    url
   } = getRepositoryConfig(repository)
 
   const { data, isLoading } = useGitLogEntries({
@@ -67,6 +72,20 @@ export const useStoryState = ({ isServerSidePaginated, onChangeRepository }: Sto
     setTheme(newTheme)
   }, [])
 
+  const buildUrls = useMemo<GitLogUrlBuilder>(() => {
+    return ({ commit }: GitLogUrlBuilderArgs) => {
+      const formattedBranch = commit.branch
+        .replace('refs/heads/', '')
+        .replace('refs/remotes/origin/', '')
+        .replace('refs/tags/', '')
+
+      return {
+        branch: `${url}/tree/${formattedBranch}`,
+        commit: `${url}/commit/${commit.hash}`
+      }
+    }
+  }, [url])
+
   useEffect(() => {
     onChangeRepository?.({
       repository,
@@ -85,6 +104,7 @@ export const useStoryState = ({ isServerSidePaginated, onChangeRepository }: Sto
     backgroundColour,
     handleChangeColors,
     handleChangeTheme,
-    handleChangeRepository: setRepository
+    handleChangeRepository: setRepository,
+    buildUrls
   }
 }