From 47a93b9e647f7bf77c0775fc97f392a25bb71dcf Mon Sep 17 00:00:00 2001 From: Thomas Plumpton Date: Sun, 6 Jul 2025 12:24:43 +0100 Subject: [PATCH 1/3] chore(docs): fixed props anchor tag hierarchy in docs --- README.md | 183 ++++++++++---------- packages/library/README.md | 186 +++++++++++---------- packages/library/src/modules/Tags/Tags.tsx | 4 +- 3 files changed, 189 insertions(+), 184 deletions(-) diff --git a/README.md b/README.md index 4b4909f..e978e29 100644 --- a/README.md +++ b/README.md @@ -30,20 +30,21 @@ A flexible and interactive React component for visualising Git commit history. D * [GitLogPaged](#gitlogpaged) * [Optional](#optional) * [GitLog](#gitlog-1) - * [GitLogPaged](#gitlogpaged-1) - * [GitLogStylingProps](#gitlogstylingprops) * [GitLogPaging](#gitlogpaging) - * [GitLogIndexStatus](#gitlogindexstatus) - * [GitLogUrlBuilder](#gitlogurlbuilder) - * [CommitFilter](#commitfilter) + * [GitLogPaged](#gitlogpaged-1) * [GraphHTMLGrid](#graphhtmlgrid) + * [CustomCommitNode](#customcommitnode) * [GraphCanvas2D](#graphcanvas2d) - * [NodeTheme](#nodetheme) * [Table](#table) * [GitLogTableStylingProps](#gitlogtablestylingprops) * [CustomTableRow](#customtablerow) - * [CustomCommitNode](#customcommitnode) - * [BreakPointTheme](#breakpointtheme) + * [Common Types](#common-types) + * [GitLogStylingProps](#gitlogstylingprops) + * [GitLogIndexStatus](#gitlogindexstatus) + * [GitLogUrlBuilder](#gitlogurlbuilder) + * [CommitFilter](#commitfilter) + * [NodeTheme](#nodetheme) + * [BreakPointTheme](#breakpointtheme) * [Development](#development) * [References](#references) * [Roadmap](#roadmap) @@ -303,6 +304,13 @@ All components have optional props to further configure the log. | `showGitIndex` | `boolean` | Enables the Git index "pseudo-commit' entry above the HEAD commit. | | `filter` | [`CommitFilter`](#commitfilter) | Filters the commits in the log based on the response from the function. | +#### GitLogPaging + +| Prop | Type | Description | +|--------|----------|-------------------------------------------------| +| `size` | `number` | The number of rows to show per page. | +| `page` | `number` | The page number to display (first page is `0`). | + ### GitLogPaged | Property | Type | Description | @@ -322,52 +330,6 @@ All components have optional props to further configure the log. | `showGitIndex` | `boolean` | Enables the Git index "pseudo-commit' entry above the HEAD commit. | | `filter` | [`CommitFilter`](#commitfilter) | Filters the commits in the log based on the response from the function. | - -#### GitLogStylingProps -| Property | Type | Description | -|-------------------|-----------------|--------------------------------------------------------------------------------| -| `containerClass` | `string` | Class name for the wrapping `
` containing branches, graph, and log table. | -| `containerStyles` | `CSSProperties` | React CSS styling object for the wrapping container `
`. | - -#### GitLogPaging - -| Prop | Type | Description | -|--------|----------|-------------------------------------------------| -| `size` | `number` | The number of rows to show per page. | -| `page` | `number` | The page number to display (first page is `0`). | - -#### GitLogIndexStatus - -| Prop | Type | Description | -|------------|----------|---------------------------------------------------------------------------| -| `added` | `number` | The number of added files in the git index for the checked-out branch. | -| `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. | - -#### CommitFilter - -A function with the following signature -```typescript -type CommitFilter = (commits: Commit[]) => Commit[] -``` - -Is passed the array of `Commit` objects from the log based on the current pagination configuration and must return the filtered array based on your own domain-specific behaviour. - -The logs' subcomponents will respond accordingly based on the filtered list of commits. - ### GraphHTMLGrid | Property | Type | Description | @@ -382,6 +344,42 @@ The logs' subcomponents will respond accordingly based on the filtered list of c | `node` | [`CustomCommitNode`](#customcommitnode) | A function that returns a custom commit node implementation used by the graph. | | `breakPointTheme` | [`BreakPointTheme`](#breakpointtheme) | Changes how the break-points between rows render when the log is being filtered. | +#### CustomCommitNode + +A function with the following signature: +```typescript +type CustomCommitNode = (props: CustomCommitNodeProps) => ReactElement +``` + +For example: +```typescript jsx + ( +
+ )} +/> +``` + +The following properties are injected into the functions `props` argument: + +| Property | Type | Description | +|---------------------|-----------|---------------------------------------------------------------------------------------------------------| +| `commit` | `Commit` | Details of the commit that the node is being rendered for. | +| `colour` | `string` | The colour of the commit based on the column in its and the theme. | +| `rowIndex` | `number` | The (zero-based) index of the row that the node is in. | +| `columnIndex` | `number` | The (zero-based) index of the column that the node is in. | +| `nodeSize` | `number` | The diameter (in pixels) of the node. This defaults but can be changed in the graph props. | +| `isIndexPseudoNode` | `boolean` | Denotes whether the node is the "pseudo node" added above the head to represent the working tree index. | + ### GraphCanvas2D | Property | Type | Description | @@ -392,13 +390,6 @@ The logs' subcomponents will respond accordingly based on the filtered list of c | `enableResize` | `boolean` | Enables horizontal resizing of the graph. Default: `false`. | | `breakPointTheme` | [`BreakPointTheme`](#breakpointtheme) | Changes how the break-points between rows render when the log is being filtered. | -#### NodeTheme - -| Prop | Type | Description | -|-----------|----------|-----------------------------------------------------------------------| -| `default` | `string` | The default theme where nodes change their style based on their type. | -| `plain` | `string` | All nodes look the same, except for their colours. | - ### Table | Property | Type | Description | @@ -460,43 +451,55 @@ The following properties are injected into the functions `props` argument: | `previewed` | `boolean` | Whether the row is previewed (is being hovered over). | | `backgroundColour` | `string` | The colour of the background as is normally applied to the table row. | -#### CustomCommitNode +## Common Types -A function with the following signature: +### GitLogStylingProps +| Property | Type | Description | +|-------------------|-----------------|--------------------------------------------------------------------------------| +| `containerClass` | `string` | Class name for the wrapping `
` containing branches, graph, and log table. | +| `containerStyles` | `CSSProperties` | React CSS styling object for the wrapping container `
`. | + + +### GitLogIndexStatus + +| Prop | Type | Description | +|------------|----------|---------------------------------------------------------------------------| +| `added` | `number` | The number of added files in the git index for the checked-out branch. | +| `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 CustomCommitNode = (props: CustomCommitNodeProps) => ReactElement +type GitLogUrlBuilder = (args: GitLogUrlBuilderArgs) => GitLogUrls ``` +Returns an object of type `GitLogUrls` with the following fields. -For example: -```typescript jsx - ( -
- )} -/> +| 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. | + +### CommitFilter + +A function with the following signature +```typescript +type CommitFilter = (commits: Commit[]) => Commit[] ``` -The following properties are injected into the functions `props` argument: +Is passed the array of `Commit` objects from the log based on the current pagination configuration and must return the filtered array based on your own domain-specific behaviour. -| Property | Type | Description | -|---------------------|-----------|---------------------------------------------------------------------------------------------------------| -| `commit` | `Commit` | Details of the commit that the node is being rendered for. | -| `colour` | `string` | The colour of the commit based on the column in its and the theme. | -| `rowIndex` | `number` | The (zero-based) index of the row that the node is in. | -| `columnIndex` | `number` | The (zero-based) index of the column that the node is in. | -| `nodeSize` | `number` | The diameter (in pixels) of the node. This defaults but can be changed in the graph props. | -| `isIndexPseudoNode` | `boolean` | Denotes whether the node is the "pseudo node" added above the head to represent the working tree index. | +The logs' subcomponents will respond accordingly based on the filtered list of commits. + +### NodeTheme + +| Prop | Type | Description | +|-----------|----------|-----------------------------------------------------------------------| +| `default` | `string` | The default theme where nodes change their style based on their type. | +| `plain` | `string` | All nodes look the same, except for their colours. | -#### BreakPointTheme +### BreakPointTheme The following themes are available: diff --git a/packages/library/README.md b/packages/library/README.md index d424e23..9677543 100644 --- a/packages/library/README.md +++ b/packages/library/README.md @@ -19,20 +19,21 @@ A flexible and interactive React component for visualising Git commit history. D * [GitLogPaged](#gitlogpaged) * [Optional](#optional) * [GitLog](#gitlog-1) - * [GitLogPaged](#gitlogpaged-1) - * [GitLogStylingProps](#gitlogstylingprops) - * [CommitFilter](#commitfilter) * [GitLogPaging](#gitlogpaging) - * [GitLogIndexStatus](#gitlogindexstatus) - * [GitLogUrlBuilder](#gitlogurlbuilder) + * [GitLogPaged](#gitlogpaged-1) * [GraphHTMLGrid](#graphhtmlgrid) + * [CustomCommitNode](#customcommitnode) * [GraphCanvas2D](#graphcanvas2d) - * [NodeTheme](#nodetheme) * [Table](#table) * [GitLogTableStylingProps](#gitlogtablestylingprops) * [CustomTableRow](#customtablerow) - * [CustomCommitNode](#customcommitnode) - * [BreakPointTheme](#breakpointtheme) + * [Common Types](#common-types) + * [GitLogStylingProps](#gitlogstylingprops) + * [GitLogIndexStatus](#gitlogindexstatus) + * [GitLogUrlBuilder](#gitlogurlbuilder) + * [CommitFilter](#commitfilter) + * [NodeTheme](#nodetheme) + * [BreakPointTheme](#breakpointtheme) # Features @@ -220,6 +221,13 @@ All components have optional props to further configure the log. | `showGitIndex` | `boolean` | Enables the Git index "pseudo-commit' entry above the HEAD commit. | | `filter` | [`CommitFilter`](#commitfilter) | Filters the commits in the log based on the response from the function. | +#### GitLogPaging + +| Prop | Type | Description | +|--------|----------|-------------------------------------------------| +| `size` | `number` | The number of rows to show per page. | +| `page` | `number` | The page number to display (first page is `0`). | + ### GitLogPaged | Property | Type | Description | @@ -239,53 +247,6 @@ All components have optional props to further configure the log. | `showGitIndex` | `boolean` | Enables the Git index "pseudo-commit' entry above the HEAD commit. | | `filter` | [`CommitFilter`](#commitfilter) | Filters the commits in the log based on the response from the function. | - -#### GitLogStylingProps - -| Property | Type | Description | -|-------------------|-----------------|--------------------------------------------------------------------------------| -| `containerClass` | `string` | Class name for the wrapping `
` containing branches, graph, and log table. | -| `containerStyles` | `CSSProperties` | React CSS styling object for the wrapping container `
`. | - -#### CommitFilter - -A function with the following signature -```typescript -type CommitFilter = (commits: Commit[]) => Commit[] -``` - -Is passed the array of `Commit` objects from the log based on the current pagination configuration and must return the filtered array based on your own domain-specific behaviour. - -The logs' subcomponents will respond accordingly based on the filtered list of commits. - -#### GitLogPaging - -| Prop | Type | Description | -|--------|----------|-------------------------------------------------| -| `size` | `number` | The number of rows to show per page. | -| `page` | `number` | The page number to display (first page is `0`). | - -#### GitLogIndexStatus - -| Prop | Type | Description | -|------------|----------|---------------------------------------------------------------------------| -| `added` | `number` | The number of added files in the git index for the checked-out branch. | -| `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. | - ### GraphHTMLGrid | Property | Type | Description | @@ -300,6 +261,42 @@ Returns an object of type `GitLogUrls` with the following fields. | `node` | [`CustomCommitNode`](#customcommitnode) | A function that returns a custom commit node implementation used by the graph. | | `breakPointTheme` | [`BreakPointTheme`](#breakpointtheme) | Changes how the break-points between rows render when the log is being filtered. | +#### CustomCommitNode + +A function with the following signature: +```typescript +type CustomCommitNode = (props: CustomCommitNodeProps) => ReactElement +``` + +For example: +```typescript jsx + ( +
+ )} +/> +``` + +The following properties are injected into the functions `props` argument: + +| Property | Type | Description | +|---------------------|-----------|---------------------------------------------------------------------------------------------------------| +| `commit` | `Commit` | Details of the commit that the node is being rendered for. | +| `colour` | `string` | The colour of the commit based on the column in its and the theme. | +| `rowIndex` | `number` | The (zero-based) index of the row that the node is in. | +| `columnIndex` | `number` | The (zero-based) index of the column that the node is in. | +| `nodeSize` | `number` | The diameter (in pixels) of the node. This defaults but can be changed in the graph props. | +| `isIndexPseudoNode` | `boolean` | Denotes whether the node is the "pseudo node" added above the head to represent the working tree index. | + ### GraphCanvas2D | Property | Type | Description | @@ -310,13 +307,6 @@ Returns an object of type `GitLogUrls` with the following fields. | `enableResize` | `boolean` | Enables horizontal resizing of the graph. Default: `false`. | | `breakPointTheme` | [`BreakPointTheme`](#breakpointtheme) | Changes how the break-points between rows render when the log is being filtered. | -#### NodeTheme - -| Prop | Type | Description | -|-----------|----------|-----------------------------------------------------------------------| -| `default` | `string` | The default theme where nodes change their style based on their type. | -| `plain` | `string` | All nodes look the same, except for their colours. | - ### Table | Property | Type | Description | @@ -378,43 +368,55 @@ The following properties are injected into the functions `props` argument: | `previewed` | `boolean` | Whether the row is previewed (is being hovered over). | | `backgroundColour` | `string` | The colour of the background as is normally applied to the table row. | -#### CustomCommitNode +## Common Types -A function with the following signature: +### GitLogStylingProps +| Property | Type | Description | +|-------------------|-----------------|--------------------------------------------------------------------------------| +| `containerClass` | `string` | Class name for the wrapping `
` containing branches, graph, and log table. | +| `containerStyles` | `CSSProperties` | React CSS styling object for the wrapping container `
`. | + + +### GitLogIndexStatus + +| Prop | Type | Description | +|------------|----------|---------------------------------------------------------------------------| +| `added` | `number` | The number of added files in the git index for the checked-out branch. | +| `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 CustomCommitNode = (props: CustomCommitNodeProps) => ReactElement +type GitLogUrlBuilder = (args: GitLogUrlBuilderArgs) => GitLogUrls ``` +Returns an object of type `GitLogUrls` with the following fields. -For example: -```typescript jsx - ( -
- )} -/> +| 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. | + +### CommitFilter + +A function with the following signature +```typescript +type CommitFilter = (commits: Commit[]) => Commit[] ``` -The following properties are injected into the functions `props` argument: +Is passed the array of `Commit` objects from the log based on the current pagination configuration and must return the filtered array based on your own domain-specific behaviour. -| Property | Type | Description | -|---------------------|-----------|---------------------------------------------------------------------------------------------------------| -| `commit` | `Commit` | Details of the commit that the node is being rendered for. | -| `colour` | `string` | The colour of the commit based on the column in its and the theme. | -| `rowIndex` | `number` | The (zero-based) index of the row that the node is in. | -| `columnIndex` | `number` | The (zero-based) index of the column that the node is in. | -| `nodeSize` | `number` | The diameter (in pixels) of the node. This defaults but can be changed in the graph props. | -| `isIndexPseudoNode` | `boolean` | Denotes whether the node is the "pseudo node" added above the head to represent the working tree index. | +The logs' subcomponents will respond accordingly based on the filtered list of commits. + +### NodeTheme + +| Prop | Type | Description | +|-----------|----------|-----------------------------------------------------------------------| +| `default` | `string` | The default theme where nodes change their style based on their type. | +| `plain` | `string` | All nodes look the same, except for their colours. | -#### BreakPointTheme +### BreakPointTheme The following themes are available: @@ -424,4 +426,4 @@ The following themes are available: - zig-zag - line - double-line -- arrow +- arrow \ No newline at end of file diff --git a/packages/library/src/modules/Tags/Tags.tsx b/packages/library/src/modules/Tags/Tags.tsx index ec911f0..2c6ffce 100644 --- a/packages/library/src/modules/Tags/Tags.tsx +++ b/packages/library/src/modules/Tags/Tags.tsx @@ -78,13 +78,13 @@ export const Tags = () => { const selectedIsNotTip = selectedCommit && commit.hash === selectedCommit.hash const isIndexCommit = commit.hash === indexCommit?.hash - const showRenderBranchTag = commit.isBranchTip + const shouldRenderBranchTag = commit.isBranchTip || shouldPreviewBranch || selectedIsNotTip || commit.isMostRecentTagInstance || isIndexCommit - if (showRenderBranchTag) { + if (shouldRenderBranchTag) { return ( Date: Sun, 2 Nov 2025 09:30:18 +0000 Subject: [PATCH 2/3] chore(deps): package-lock.json changes after install --- package-lock.json | 55 ++++++++++++++++++++++++----------------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5512769..acfd16e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -263,7 +263,6 @@ "integrity": "sha512-IaaGWsQqfsQWVLqMn9OB92MNN7zukfVA4s7KKAI0KfrrDsZ0yhi5uV4baBuLuN7n3vsZpwP8asPPcVwApxvjBQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -624,7 +623,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -648,7 +646,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -700,6 +697,7 @@ "os": [ "aix" ], + "peer": true, "engines": { "node": ">=18" } @@ -717,6 +715,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=18" } @@ -734,6 +733,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=18" } @@ -751,6 +751,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=18" } @@ -768,6 +769,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=18" } @@ -785,6 +787,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=18" } @@ -802,6 +805,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">=18" } @@ -819,6 +823,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">=18" } @@ -836,6 +841,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -853,6 +859,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -870,6 +877,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -887,6 +895,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -904,6 +913,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -921,6 +931,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -938,6 +949,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -955,6 +967,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -972,6 +985,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=18" } @@ -989,6 +1003,7 @@ "os": [ "netbsd" ], + "peer": true, "engines": { "node": ">=18" } @@ -1006,6 +1021,7 @@ "os": [ "netbsd" ], + "peer": true, "engines": { "node": ">=18" } @@ -1023,6 +1039,7 @@ "os": [ "openbsd" ], + "peer": true, "engines": { "node": ">=18" } @@ -1040,6 +1057,7 @@ "os": [ "openbsd" ], + "peer": true, "engines": { "node": ">=18" } @@ -1057,6 +1075,7 @@ "os": [ "sunos" ], + "peer": true, "engines": { "node": ">=18" } @@ -1074,6 +1093,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=18" } @@ -1091,6 +1111,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=18" } @@ -1108,6 +1129,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=18" } @@ -2090,7 +2112,6 @@ "integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "json-schema-traverse": "^1.0.0", @@ -2748,7 +2769,6 @@ "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -3078,7 +3098,6 @@ "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -3337,7 +3356,6 @@ "integrity": "sha512-bJFoMATwIGaxxx8VJPeM8TonI8t579oRvgAuT8zFugJsJZgzqv0Fu8Mhp68iecjzG7cnN3mO2dJQ5uUM2EFrgQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~6.21.0" } @@ -3348,7 +3366,6 @@ "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -3359,7 +3376,6 @@ "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==", "dev": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.0.0" } @@ -3424,7 +3440,6 @@ "integrity": "sha512-kVIaQE9vrN9RLCQMQ3iyRlVJpTiDUY6woHGb30JDkfJErqrQEmtdWH3gV0PBAfGZgQXoqzXOO0T3K6ioApbbAA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.37.0", "@typescript-eslint/types": "8.37.0", @@ -4462,7 +4477,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4902,7 +4916,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001716", "electron-to-chromium": "^1.5.149", @@ -5015,9 +5028,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001718", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001718.tgz", - "integrity": "sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw==", + "version": "1.0.30001753", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001753.tgz", + "integrity": "sha512-Bj5H35MD/ebaOV4iDLqPEtiliTN29qkGtEHCwawWn4cYm+bPJM2NsaP30vtZcnERClMzp52J4+aw2UNbK4o+zw==", "dev": true, "funding": [ { @@ -5746,7 +5759,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -5823,7 +5835,6 @@ "integrity": "sha512-QldCVh/ztyKJJZLr4jXNUByx3gR+TDYZCRXEktiZoUR3PGy4qCmSbkxcIle8GEwGpb5JBZazlaJ/CxLidXdEbQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", @@ -6005,7 +6016,6 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -8984,7 +8994,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -9039,7 +9048,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -9249,7 +9257,6 @@ "integrity": "sha512-HqMFpUbWlf/tvcxBFNKnJyzc7Lk+XO3FGc3pbNBLqEbOz0gPLRgcrlS3UF4MfUrVlstOaP/q0kM6GVvi+LrLRg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.7" }, @@ -9773,7 +9780,6 @@ "integrity": "sha512-O+9jgJ+Trlq9VGD1uY4OBLKQWHHDKM/A/pA8vMW6PVehhGHNvpzcIC1bngr6mL5gGHZP2nBv+9XG8pTMcggMmg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@storybook/global": "^5.0.0", "@testing-library/jest-dom": "^6.6.3", @@ -10425,7 +10431,6 @@ "integrity": "sha512-lpz0Oxl6aidFkmS90VQDQjk/Qf2iw0IUvFqirdONBdj7jPSN9mGXhy66BcGNDxx5ZMyKKiBVAREvPEzT6Uxipw==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@gerrit0/mini-shiki": "^3.7.0", "lunr": "^2.3.9", @@ -10463,7 +10468,6 @@ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -10580,7 +10584,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "dependencies": { "napi-postinstall": "^0.2.2" }, @@ -10661,7 +10664,6 @@ "integrity": "sha512-1mncVwJxy2C9ThLwz0+2GKZyEXuC3MyWtAAlNftlZZXZDP3AJt5FmwcMit/IGGaNZ8ZOB2BNO/HFUB+CpN0NQw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", @@ -10839,7 +10841,6 @@ "integrity": "sha512-gR7INfiVRwnEOkCk47faros/9McCZMp5LM+OMNWGLaDBSvJxIzwjgNFufkuePBNaesGRnLmNfW+ddbUJRZn0nQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/expect": "4.0.6", "@vitest/mocker": "4.0.6", From 7eca164915c0c631ea97771e7e54149d8c94d4d2 Mon Sep 17 00:00:00 2001 From: Thomas Plumpton Date: Sun, 2 Nov 2025 10:45:04 +0000 Subject: [PATCH 3/3] feat(graph): exposed custom tooltip prop on HTML graph (#102) --- README.md | 38 ++++++++++ package-lock.json | 2 +- packages/demo/src/GitLog.stories.tsx | 76 +++++++++++++++++++ packages/library/README.md | 38 ++++++++++ packages/library/package.json | 2 +- .../src/modules/Graph/context/types.ts | 8 +- .../src/modules/Graph/core/GraphCore.tsx | 8 +- .../components/CommitNode/CommitNode.spec.tsx | 47 ++++++++++++ .../Grid/components/CommitNode/CommitNode.tsx | 21 +++-- packages/library/src/modules/Graph/types.ts | 50 ++++++++++++ 10 files changed, 278 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index e978e29..074b182 100644 --- a/README.md +++ b/README.md @@ -343,6 +343,7 @@ All components have optional props to further configure the log. | `highlightedBackgroundHeight` | `number` | The height, in pixels, of the background colour of a row that is being previewed or has been selected. | | `node` | [`CustomCommitNode`](#customcommitnode) | A function that returns a custom commit node implementation used by the graph. | | `breakPointTheme` | [`BreakPointTheme`](#breakpointtheme) | Changes how the break-points between rows render when the log is being filtered. | +| `tooltip` | [`CustomTooltip`](#customtooltip) | Overrides the graph node tooltip with a custom implementation. Commit metadata is injected. | #### CustomCommitNode @@ -380,6 +381,43 @@ The following properties are injected into the functions `props` argument: | `nodeSize` | `number` | The diameter (in pixels) of the node. This defaults but can be changed in the graph props. | | `isIndexPseudoNode` | `boolean` | Denotes whether the node is the "pseudo node" added above the head to represent the working tree index. | +#### CustomTooltip + +A function with the following signature: +```typescript +type CustomTooltip = (props: CustomTooltipProps) => ReactElement +``` + +For example: +```typescript jsx + ( +
+

My Custom Tooltip

+

{commit.message}

+
+ )} +/> +``` + +The following properties are injected into the functions `props` argument: + +| Property | Type | Description | +|--------------------|----------|-------------------------------------------------------------------------------| +| `commit` | `Commit` | Details of the commit that the tooltip is being rendered for. | +| `borderColour` | `string` | The border colour of the commit based on the column in its and the theme. | +| `backgroundColour` | `number` | The background colour of the commit based on the column in its and the theme. | + ### GraphCanvas2D | Property | Type | Description | diff --git a/package-lock.json b/package-lock.json index acfd16e..e0f7952 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11487,7 +11487,7 @@ }, "packages/library": { "name": "@tomplum/react-git-log", - "version": "3.4.2", + "version": "3.5.0", "license": "Apache-2.0", "dependencies": { "@uidotdev/usehooks": "^2.4.1", diff --git a/packages/demo/src/GitLog.stories.tsx b/packages/demo/src/GitLog.stories.tsx index 85a6255..5967bb2 100644 --- a/packages/demo/src/GitLog.stories.tsx +++ b/packages/demo/src/GitLog.stories.tsx @@ -483,6 +483,82 @@ export const CustomCommitNode = () => { )} /> + + + )} +
+ ) +} + +export const CustomCommitTooltip = () => { + const { + loading, + colours, + entries, + branch, + buildUrls, + repository, + backgroundColour, + handleChangeColors, + handleChangeRepository + } = useStoryState() + + const { theme } = useDemoContext() + + return ( +
+ + + {loading && ( +
+ +
+ )} + + {!loading && entries && ( + + ( +
+

My Custom Tooltip

+

{commit.message.slice(0, 25)}

+
+ )} + /> + diff --git a/packages/library/README.md b/packages/library/README.md index 9677543..e095b1c 100644 --- a/packages/library/README.md +++ b/packages/library/README.md @@ -260,6 +260,7 @@ All components have optional props to further configure the log. | `highlightedBackgroundHeight` | `number` | The height, in pixels, of the background colour of a row that is being previewed or has been selected. | | `node` | [`CustomCommitNode`](#customcommitnode) | A function that returns a custom commit node implementation used by the graph. | | `breakPointTheme` | [`BreakPointTheme`](#breakpointtheme) | Changes how the break-points between rows render when the log is being filtered. | +| `tooltip` | [`CustomTooltip`](#customtooltip) | Overrides the graph node tooltip with a custom implementation. Commit metadata is injected. | #### CustomCommitNode @@ -297,6 +298,43 @@ The following properties are injected into the functions `props` argument: | `nodeSize` | `number` | The diameter (in pixels) of the node. This defaults but can be changed in the graph props. | | `isIndexPseudoNode` | `boolean` | Denotes whether the node is the "pseudo node" added above the head to represent the working tree index. | +#### CustomTooltip + +A function with the following signature: +```typescript +type CustomTooltip = (props: CustomTooltipProps) => ReactElement +``` + +For example: +```typescript jsx + ( +
+

My Custom Tooltip

+

{commit.message}

+
+ )} +/> +``` + +The following properties are injected into the functions `props` argument: + +| Property | Type | Description | +|--------------------|----------|-------------------------------------------------------------------------------| +| `commit` | `Commit` | Details of the commit that the tooltip is being rendered for. | +| `borderColour` | `string` | The border colour of the commit based on the column in its and the theme. | +| `backgroundColour` | `number` | The background colour of the commit based on the column in its and the theme. | + ### GraphCanvas2D | Property | Type | Description | diff --git a/packages/library/package.json b/packages/library/package.json index 7b6cd2a..ca2cf98 100644 --- a/packages/library/package.json +++ b/packages/library/package.json @@ -3,7 +3,7 @@ "author": "Thomas Plumpton", "repository": "https://github.com/TomPlum/react-git-log", "description": "A flexible, themable, React component for visualising Git commit history, branch and tag metadata.", - "version": "3.4.2", + "version": "3.5.0", "license": "Apache-2.0", "type": "module", "main": "dist/react-git-log.js", diff --git a/packages/library/src/modules/Graph/context/types.ts b/packages/library/src/modules/Graph/context/types.ts index 70b2d0f..38dd46a 100644 --- a/packages/library/src/modules/Graph/context/types.ts +++ b/packages/library/src/modules/Graph/context/types.ts @@ -1,5 +1,5 @@ import { BreakPointTheme, NodeTheme } from 'hooks/useTheme' -import { GraphOrientation } from 'modules/Graph' +import { CustomTooltip, GraphOrientation } from 'modules/Graph' import { Commit } from 'types/Commit' import { RowIndexToColumnStates } from 'modules/Graph/strategies/Grid/hooks/useColumnData' import { CustomCommitNode } from 'modules/Graph/strategies/Grid' @@ -89,4 +89,10 @@ export interface GraphContextBag { * respective column states. */ columnData: RowIndexToColumnStates + + /** + * An optional custom tooltip implementation + * passed in by the user. + */ + tooltip?: CustomTooltip } \ No newline at end of file diff --git a/packages/library/src/modules/Graph/core/GraphCore.tsx b/packages/library/src/modules/Graph/core/GraphCore.tsx index abbd5d7..7b8f631 100644 --- a/packages/library/src/modules/Graph/core/GraphCore.tsx +++ b/packages/library/src/modules/Graph/core/GraphCore.tsx @@ -18,7 +18,8 @@ export const GraphCore = ({ enableResize = false, showCommitNodeHashes = false, showCommitNodeTooltips = false, - highlightedBackgroundHeight + highlightedBackgroundHeight, + tooltip }: PropsWithChildren>) => { const { paging, @@ -68,8 +69,9 @@ export const GraphCore = ({ visibleCommits, columnData, isHeadCommitVisible, - highlightedBackgroundHeight - }), [node, showCommitNodeTooltips, breakPointTheme, isHeadCommitVisible, showCommitNodeHashes, nodeTheme, nodeSize, graphWidth, virtualColumns, orientation, visibleCommits, columnData, highlightedBackgroundHeight]) + highlightedBackgroundHeight, + tooltip + }), [node, showCommitNodeTooltips, breakPointTheme, isHeadCommitVisible, showCommitNodeHashes, nodeTheme, nodeSize, graphWidth, virtualColumns, orientation, visibleCommits, columnData, highlightedBackgroundHeight, tooltip]) return ( diff --git a/packages/library/src/modules/Graph/strategies/Grid/components/CommitNode/CommitNode.spec.tsx b/packages/library/src/modules/Graph/strategies/Grid/components/CommitNode/CommitNode.spec.tsx index 6eac255..61ef4ec 100644 --- a/packages/library/src/modules/Graph/strategies/Grid/components/CommitNode/CommitNode.spec.tsx +++ b/packages/library/src/modules/Graph/strategies/Grid/components/CommitNode/CommitNode.spec.tsx @@ -49,6 +49,53 @@ describe('CommitNode', () => { expect(commitElement).toBeInTheDocument() }) + it('should render a custom tooltip on hover of the node if the custom tooltip prop is passed', async () => { + vi.spyOn(graphContext, 'useGraphContext').mockReturnValue(graphContextBag({ + showCommitNodeTooltips: true, + tooltip: () => ( +
+ Custom Tooltip +
+ ) + })) + + vi.spyOn(selectCommit, 'useSelectCommit').mockReturnValue({ + selectCommitHandler: { + onMouseOut: vi.fn(), + onClick: vi.fn(), + onMouseOver: vi.fn() + } + }) + + vi.spyOn(themeHook, 'useTheme').mockReturnValue(themeFunctions()) + + render( + + ) + + const commitElement = commitNode.withHash({ + hash: 'commit-to-hover' + }) + + await userEvent.hover(commitElement) + expect(commitElement).toBeInTheDocument() + + const tooltip = screen.getByTestId('custom-tooltip') + expect(tooltip).toBeInTheDocument() + expect(tooltip).toHaveTextContent('Custom Tooltip') + + await userEvent.unhover(commitElement) + await waitFor(() => { + expect(tooltip).not.toBeInTheDocument() + }) + expect(commitElement).toBeInTheDocument() + }) + it('should not render a tooltip on hover of the node if the prop is disabled', async () => { vi.spyOn(graphContext, 'useGraphContext').mockReturnValue(graphContextBag({ showCommitNodeTooltips: false diff --git a/packages/library/src/modules/Graph/strategies/Grid/components/CommitNode/CommitNode.tsx b/packages/library/src/modules/Graph/strategies/Grid/components/CommitNode/CommitNode.tsx index 94e877d..4b71fa0 100644 --- a/packages/library/src/modules/Graph/strategies/Grid/components/CommitNode/CommitNode.tsx +++ b/packages/library/src/modules/Graph/strategies/Grid/components/CommitNode/CommitNode.tsx @@ -14,7 +14,7 @@ export const CommitNode = ({ commit, colour }: CommitNodeProps) => { const { selectCommitHandler } = useSelectCommit() const { remoteProviderUrlBuilder } = useGitContext() const { textColour, theme, getCommitNodeColours } = useTheme() - const { showCommitNodeTooltips, showCommitNodeHashes, nodeTheme, nodeSize } = useGraphContext() + const { showCommitNodeTooltips, showCommitNodeHashes, nodeTheme, nodeSize, tooltip } = useGraphContext() const commitHashLabelHeight = 20 const isMergeCommit = nodeTheme === 'default' && commit.parents.length > 1 @@ -69,12 +69,21 @@ export const CommitNode = ({ commit, colour }: CommitNodeProps) => { childRect={childRect} popoverRect={popoverRect} > - + { + tooltip + ? tooltip({ + commit, + borderColour, + backgroundColour + }) : ( + + ) + } - ), [borderColour, commit]) + ), [backgroundColour, borderColour, commit, tooltip]) return ( ReactElement + export type Canvas2DGraphProps = GraphPropsCommon export interface HTMLGridGraphProps extends GraphPropsCommon { @@ -35,6 +77,14 @@ export interface HTMLGridGraphProps extends GraphPropsCommon { * height from the default. */ highlightedBackgroundHeight?: number + + /** + * Overrides the graph node tooltip with + * a custom implementation. Commit metadata + * is injected into the function for you to + * render. + */ + tooltip?: CustomTooltip } export interface GraphPropsCommon {