Skip to content

Commit eb6f1aa

Browse files
TomPlumTomPlum
authored
Merge pull request #47 from TomPlum/develop
External Git Provider URL Builder
2 parents 8d023a5 + c08c3d5 commit eb6f1aa

23 files changed

Lines changed: 5786 additions & 117 deletions

File tree

‎README.md‎

Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -196,37 +196,38 @@ All components have optional props to further configure the log.
196196
197197
### GitLog
198198
199-
| Property | Type | Description |
200-
|-----------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
201-
| `theme` | `ThemeMode` | The variant of the default color theme to apply to the log. |
202-
| `colours` | `ThemeColours \| string[]` | Array of colors used for graph elements. One per column, looping if insufficient colors are provided. |
203-
| `showHeaders` | `boolean` | Whether to show element names like "Graph" or "Commit message" at the top of the component. |
204-
| `rowSpacing` | `number` | The spacing between log rows, affecting branches, graph, and table. Default: `0`. |
205-
| `githubRepositoryUrl` | `string` | URL of the GitHub repository where `entries` came from. Enables links for commits, tags, and PRs. |
206-
| `defaultGraphWidth` | `number` | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
207-
| `onSelectCommit` | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected. |
208-
| `classes` | `GitLogStylingProps` | CSS classes for various elements to enable custom styling. |
209-
| `paging` | `GitLogPaging` | Optional paging settings for displaying a subset of log entries. |
210-
| `indexStatus` | `GitLogIndexStatus` | Renders information about added, deleted and modified files to the index pseudo-commit entry. |
211-
199+
| Property | Type | Description |
200+
|---------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
201+
| `theme` | `ThemeMode` | The variant of the default color theme to apply to the log. |
202+
| `colours` | `ThemeColours \| string[]` | Array of colors used for graph elements. One per column, looping if insufficient colors are provided. |
203+
| `showHeaders` | `boolean` | Whether to show element names like "Graph" or "Commit message" at the top of the component. |
204+
| `rowSpacing` | `number` | The spacing between log rows, affecting branches, graph, and table. Default: `0`. |
205+
| `urls` | `GitLogUrlBuilder` | A function that returns built URLs to the remote Git provider. Enables links for commits, tags, and PRs. |
206+
| `defaultGraphWidth` | `number` | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
207+
| `onSelectCommit` | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected. |
208+
| `classes` | `GitLogStylingProps` | CSS classes for various elements to enable custom styling. |
209+
| `paging` | `GitLogPaging` | Optional paging settings for displaying a subset of log entries. |
210+
| `indexStatus` | `GitLogIndexStatus` | Renders information about added, deleted and modified files to the index pseudo-commit entry. |
211+
| `showGitIndex` | `boolean` | Enables the Git index "pseudo-commit' entry above the HEAD commit. |
212212
213213
### GitLogPaged
214214
215-
| Property | Type | Description |
216-
|-----------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
217-
| `theme` | `ThemeMode` | The variant of the default color theme to apply to the log. |
218-
| `colours` | `ThemeColours \| string[]` | Array of colors used for graph elements. One per column, looping if insufficient colors are provided. |
219-
| `showHeaders` | `boolean` | Whether to show element names like "Graph" or "Commit message" at the top of the component. |
220-
| `rowSpacing` | `number` | The spacing between log rows, affecting branches, graph, and table. Default: `0`. |
221-
| `githubRepositoryUrl` | `string` | URL of the GitHub repository where `entries` came from. Enables links for commits, tags, and PRs. |
222-
| `defaultGraphWidth` | `number` | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
223-
| `onSelectCommit` | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected. |
224-
| `classes` | `GitLogStylingProps` | CSS classes for various elements to enable custom styling. |
225-
| `indexStatus` | `GitLogIndexStatus` | Renders information about added, deleted and modified files to the index pseudo-commit entry. |
226-
| `showGitIndex` | `boolean` | Enables the Git index "pseudo-commit' entry above the HEAD commit. |
215+
| Property | Type | Description |
216+
|---------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
217+
| `theme` | `ThemeMode` | The variant of the default color theme to apply to the log. |
218+
| `colours` | `ThemeColours \| string[]` | Array of colors used for graph elements. One per column, looping if insufficient colors are provided. |
219+
| `showHeaders` | `boolean` | Whether to show element names like "Graph" or "Commit message" at the top of the component. |
220+
| `rowSpacing` | `number` | The spacing between log rows, affecting branches, graph, and table. Default: `0`. |
221+
| `urls` | `GitLogUrlBuilder` | A function that returns built URLs to the remote Git provider. Enables links for commits, tags, and PRs. |
222+
| `defaultGraphWidth` | `number` | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
223+
| `onSelectCommit` | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected. |
224+
| `classes` | `GitLogStylingProps` | CSS classes for various elements to enable custom styling. |
225+
| `indexStatus` | `GitLogIndexStatus` | Renders information about added, deleted and modified files to the index pseudo-commit entry. |
226+
| `showGitIndex` | `boolean` | Enables the Git index "pseudo-commit' entry above the HEAD commit. |
227227
228228
229229
#### GitLogStylingProps
230+
230231
| Property | Type | Description |
231232
|-------------------|-----------------|--------------------------------------------------------------------------------|
232233
| `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.
247248
| `deleted` | `number` | The number of deleted files in the git index for the checked-out branch. |
248249
| `modified` | `number` | The number of modified files in the git index for the checked-out branch. |
249250
251+
#### GitLogUrlBuilder
252+
253+
A function with the following signature
254+
```typescript
255+
type GitLogUrlBuilder = (args: GitLogUrlBuilderArgs) => GitLogUrls
256+
```
257+
Returns an object of type `GitLogUrls` with the following fields.
258+
259+
| Prop | Type | Description |
260+
|------------|----------|------------------------------------------------------------------------------------------|
261+
| `commit` | `string` | A resolved URL to a particular commit hash on the external Git providers remote website. |
262+
| `branch` | `string` | A resolved URL to a branch on the external Git providers remote website. |
263+
250264
### Graph
251265
252266
| Property | Type | Description |

‎packages/demo/src/GitLog.stories.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ const meta: Meta<StoryProps> = {
3535
onSelectCommit: (commit?: Commit) => {
3636
console.info(`Selected commit ${commit?.hash}`)
3737
},
38-
githubRepositoryUrl: 'https://github.com/TomPlum/sleep',
3938
defaultGraphWidth: 200,
4039
rowSpacing: 0,
4140
page: 0,
@@ -84,12 +83,6 @@ const meta: Meta<StoryProps> = {
8483
category: 'Visibility'
8584
}
8685
},
87-
githubRepositoryUrl: {
88-
name: 'Github Repository',
89-
table: {
90-
category: 'Visibility'
91-
}
92-
},
9386
nodeTheme: {
9487
name: 'Node Style',
9588
table: {
@@ -200,6 +193,7 @@ export const Demo: Story = {
200193
colours,
201194
entries,
202195
branch,
196+
buildUrls,
203197
repository,
204198
backgroundColour,
205199
handleChangeTheme,
@@ -246,6 +240,7 @@ export const Demo: Story = {
246240
modified: 5,
247241
deleted: 1
248242
}}
243+
urls={buildUrls}
249244
>
250245
{args.showBranchesTags && (
251246
<GitLog.Tags />

‎packages/demo/src/GitLogPaged.stories.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ const meta: Meta<StoryProps> = {
3333
onSelectCommit: (commit?: Commit) => {
3434
console.info(`Selected commit ${commit?.hash}`)
3535
},
36-
githubRepositoryUrl: 'https://github.com/TomPlum/sleep',
3736
defaultGraphWidth: 120,
3837
rowSpacing: 0,
3938
},
@@ -74,12 +73,6 @@ const meta: Meta<StoryProps> = {
7473
category: 'Visibility'
7574
}
7675
},
77-
githubRepositoryUrl: {
78-
name: 'Github Repository',
79-
table: {
80-
category: 'Visibility'
81-
}
82-
},
8376
nodeTheme: {
8477
name: 'Node Style',
8578
table: {
@@ -171,6 +164,7 @@ export const Demo: Story = {
171164
colours,
172165
entries,
173166
branch,
167+
buildUrls,
174168
repository,
175169
headCommitHash,
176170
backgroundColour,
@@ -228,6 +222,7 @@ export const Demo: Story = {
228222
modified: 2,
229223
deleted: 3
230224
}}
225+
urls={buildUrls}
231226
>
232227
<GitLogPaged.Graph
233228
nodeSize={args.nodeSize}

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

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useCallback, useEffect, useState } from 'react'
2-
import type { GitLogEntry, ThemeMode } from '@tomplum/react-git-log'
1+
import { useCallback, useEffect, useMemo, useState } from 'react'
2+
import type { ThemeMode, GitLogUrlBuilder, GitLogUrlBuilderArgs } from '@tomplum/react-git-log'
33
import { ColourSelection } from 'components/ColourSelector'
44
import { rainbow } from 'themes.ts'
55
import { StoryStateProps } from './types'
@@ -13,7 +13,8 @@ const getRepositoryConfig = (name: string) => {
1313
fileNameEntireHistory: 'sleep.txt',
1414
fileNameCheckedOutBranch: 'sleep-release.txt',
1515
headCommitHash: '1352f4c',
16-
headCommitCheckoutOutBranch: 'e059c28'
16+
headCommitCheckoutOutBranch: 'e059c28',
17+
url: 'https://github.com/TomPlum/sleep'
1718
}
1819
}
1920
case 'TomPlum/advent-of-code-2019': {
@@ -22,7 +23,8 @@ const getRepositoryConfig = (name: string) => {
2223
fileNameEntireHistory: 'advent-of-code-2019.txt',
2324
fileNameCheckedOutBranch: 'advent-of-code-2019-master.txt',
2425
headCommitHash: 'c88f0b9',
25-
headCommitCheckoutOutBranch: '12d47cc'
26+
headCommitCheckoutOutBranch: '12d47cc',
27+
url: 'https://github.com/TomPlum/advent-of-code-2019'
2628
}
2729
}
2830
case 'TomPlum/learn-japanese': {
@@ -31,7 +33,8 @@ const getRepositoryConfig = (name: string) => {
3133
fileNameEntireHistory: 'learn-japanese.txt',
3234
fileNameCheckedOutBranch: 'learn-japanese-feature.txt',
3335
headCommitHash: 'de80ee8',
34-
headCommitCheckoutOutBranch: 'de80ee8d'
36+
headCommitCheckoutOutBranch: 'de80ee8d',
37+
url: 'https://github.com/TomPlum/learn-japanese'
3538
}
3639
}
3740
default: {
@@ -42,12 +45,14 @@ const getRepositoryConfig = (name: string) => {
4245

4346
export const useStoryState = ({ isServerSidePaginated, onChangeRepository }: StoryStateProps = {}) => {
4447
const [repository, setRepository] = useState('TomPlum/sleep')
48+
4549
const {
4650
branchName,
4751
fileNameEntireHistory,
4852
fileNameCheckedOutBranch,
4953
headCommitHash,
50-
headCommitCheckoutOutBranch
54+
headCommitCheckoutOutBranch,
55+
url
5156
} = getRepositoryConfig(repository)
5257

5358
const { data, isLoading } = useGitLogEntries({
@@ -67,6 +72,20 @@ export const useStoryState = ({ isServerSidePaginated, onChangeRepository }: Sto
6772
setTheme(newTheme)
6873
}, [])
6974

75+
const buildUrls = useMemo<GitLogUrlBuilder>(() => {
76+
return ({ commit }: GitLogUrlBuilderArgs) => {
77+
const formattedBranch = commit.branch
78+
.replace('refs/heads/', '')
79+
.replace('refs/remotes/origin/', '')
80+
.replace('refs/tags/', '')
81+
82+
return {
83+
branch: `${url}/tree/${formattedBranch}`,
84+
commit: `${url}/commit/${commit.hash}`
85+
}
86+
}
87+
}, [url])
88+
7089
useEffect(() => {
7190
onChangeRepository?.({
7291
repository,
@@ -85,6 +104,7 @@ export const useStoryState = ({ isServerSidePaginated, onChangeRepository }: Sto
85104
backgroundColour,
86105
handleChangeColors,
87106
handleChangeTheme,
88-
handleChangeRepository: setRepository
107+
handleChangeRepository: setRepository,
108+
buildUrls
89109
}
90110
}

0 commit comments

Comments
 (0)