Skip to content

Commit 8625bcc

Browse files
TomPlumTomPlum
committed
feat(log): added indexStatus prop to show git index status metadata in index pseudo-commit entry
1 parent fcd1cfa commit 8625bcc

23 files changed

Lines changed: 425 additions & 69 deletions

‎README.md‎

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -196,34 +196,36 @@ 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. |
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. |
210211
211212
212213
### GitLogPaged
213214
214-
| Property | Type | Description |
215-
|-------------------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
216-
| `theme` | `ThemeMode` | The variant of the default color theme to apply to the log. |
217-
| `colours` | `ThemeColours \| string[]` | Array of colors used for graph elements. One per column, looping if insufficient colors are provided. |
218-
| `showHeaders` | `boolean` | Whether to show element names like "Graph" or "Commit message" at the top of the component. |
219-
| `rowSpacing` | `number` | The spacing between log rows, affecting branches, graph, and table. Default: `0`. |
220-
| `githubRepositoryUrl` | `string` | URL of the GitHub repository where `entries` came from. Enables links for commits, tags, and PRs. |
221-
| `defaultGraphWidth` | `number` | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
222-
| `onSelectCommit` | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected. |
223-
| `classes` | `GitLogStylingProps` | CSS classes for various elements to enable custom styling. |
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. |
224226
225227
226-
#### **GitLogStylingProps**
228+
#### GitLogStylingProps
227229
| Property | Type | Description |
228230
|-------------------|-----------------|--------------------------------------------------------------------------------|
229231
| `containerClass` | `string` | Class name for the wrapping `<div>` containing branches, graph, and log table. |
@@ -236,6 +238,14 @@ All components have optional props to further configure the log.
236238
| `size` | `number` | The number of rows to show per page. |
237239
| `page` | `number` | The page number to display (first page is `0`). |
238240
241+
#### GitLogIndexStatus
242+
243+
| Prop | Type | Description |
244+
|------------|----------|---------------------------------------------------------------------------|
245+
| `added` | `number` | The number of added files in the git index for the checked-out branch. |
246+
| `deleted` | `number` | The number of deleted files in the git index for the checked-out branch. |
247+
| `modified` | `number` | The number of modified files in the git index for the checked-out branch. |
248+
239249
### Graph
240250
241251
| Property | Type | Description |
@@ -315,8 +325,8 @@ All components have optional props to further configure the log.
315325
- Mobile responsiveness for the demo site
316326
- Add graph render strategy with a second option to use 2d rendering context (html canvas)
317327
- Add eslint to pipeline
318-
- Update the WIP comment in the index pseudo commit to show files added/edited etc.
319328
- Add in prop to show-hide the index pseudo commit
320329
- Tags should be independent. Add a new optional field to the log entry / commit objects.
321330
- Branch / Tags column is fixed. Dynamically floor it to match the max tag size currently being rendered?
322-
- Is the SS paginated log gonna accept data from multiple branches? Because then we need the HEAD commits of each branch
331+
- Is the SS paginated log gonna accept data from multiple branches? Because then we need the HEAD commits of each branch
332+
- Make repository URL a function that generates the URL

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,11 @@ export const Demo: Story = {
234234
},
235235
containerClass: styles.gitLogContainer
236236
}}
237+
indexStatus={{
238+
added: 2,
239+
modified: 5,
240+
deleted: 1
241+
}}
237242
>
238243
{args.showBranchesTags && (
239244
<GitLog.Tags />

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,11 @@ export const Demo: Story = {
216216
},
217217
containerClass: styles.gitLogContainer
218218
}}
219+
indexStatus={{
220+
added: 0,
221+
modified: 2,
222+
deleted: 3
223+
}}
219224
>
220225
<GitLogPaged.Graph
221226
nodeSize={args.nodeSize}

‎packages/library/README.md‎

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -154,34 +154,36 @@ All components have optional props to further configure the log.
154154
155155
### GitLog
156156
157-
| Property | Type | Description |
158-
|-------------------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
159-
| `theme` | `ThemeMode` | The variant of the default color theme to apply to the log. |
160-
| `colours` | `ThemeColours \| string[]` | Array of colors used for graph elements. One per column, looping if insufficient colors are provided. |
161-
| `showHeaders` | `boolean` | Whether to show element names like "Graph" or "Commit message" at the top of the component. |
162-
| `rowSpacing` | `number` | The spacing between log rows, affecting branches, graph, and table. Default: `0`. |
163-
| `githubRepositoryUrl` | `string` | URL of the GitHub repository where `entries` came from. Enables links for commits, tags, and PRs. |
164-
| `defaultGraphWidth` | `number` | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
165-
| `onSelectCommit` | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected. |
166-
| `classes` | `GitLogStylingProps` | CSS classes for various elements to enable custom styling. |
167-
| `paging` | `GitLogPaging` | Optional paging settings for displaying a subset of log entries. |
157+
| Property | Type | Description |
158+
|-----------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
159+
| `theme` | `ThemeMode` | The variant of the default color theme to apply to the log. |
160+
| `colours` | `ThemeColours \| string[]` | Array of colors used for graph elements. One per column, looping if insufficient colors are provided. |
161+
| `showHeaders` | `boolean` | Whether to show element names like "Graph" or "Commit message" at the top of the component. |
162+
| `rowSpacing` | `number` | The spacing between log rows, affecting branches, graph, and table. Default: `0`. |
163+
| `githubRepositoryUrl` | `string` | URL of the GitHub repository where `entries` came from. Enables links for commits, tags, and PRs. |
164+
| `defaultGraphWidth` | `number` | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
165+
| `onSelectCommit` | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected. |
166+
| `classes` | `GitLogStylingProps` | CSS classes for various elements to enable custom styling. |
167+
| `paging` | `GitLogPaging` | Optional paging settings for displaying a subset of log entries. |
168+
| `indexStatus` | `GitLogIndexStatus` | Renders information about added, deleted and modified files to the index pseudo-commit entry. |
168169
169170
170171
### GitLogPaged
171172
172-
| Property | Type | Description |
173-
|-------------------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
174-
| `theme` | `ThemeMode` | The variant of the default color theme to apply to the log. |
175-
| `colours` | `ThemeColours \| string[]` | Array of colors used for graph elements. One per column, looping if insufficient colors are provided. |
176-
| `showHeaders` | `boolean` | Whether to show element names like "Graph" or "Commit message" at the top of the component. |
177-
| `rowSpacing` | `number` | The spacing between log rows, affecting branches, graph, and table. Default: `0`. |
178-
| `githubRepositoryUrl` | `string` | URL of the GitHub repository where `entries` came from. Enables links for commits, tags, and PRs. |
179-
| `defaultGraphWidth` | `number` | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
180-
| `onSelectCommit` | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected. |
181-
| `classes` | `GitLogStylingProps` | CSS classes for various elements to enable custom styling. |
173+
| Property | Type | Description |
174+
|-----------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
175+
| `theme` | `ThemeMode` | The variant of the default color theme to apply to the log. |
176+
| `colours` | `ThemeColours \| string[]` | Array of colors used for graph elements. One per column, looping if insufficient colors are provided. |
177+
| `showHeaders` | `boolean` | Whether to show element names like "Graph" or "Commit message" at the top of the component. |
178+
| `rowSpacing` | `number` | The spacing between log rows, affecting branches, graph, and table. Default: `0`. |
179+
| `githubRepositoryUrl` | `string` | URL of the GitHub repository where `entries` came from. Enables links for commits, tags, and PRs. |
180+
| `defaultGraphWidth` | `number` | Default width of the graph in pixels. Can be changed dynamically if resizing is enabled. Default: `300`. |
181+
| `onSelectCommit` | `(commit?: Commit) => void` | Callback function when a commit is selected. `commit` is `undefined` if unselected. |
182+
| `classes` | `GitLogStylingProps` | CSS classes for various elements to enable custom styling. |
183+
| `indexStatus` | `GitLogIndexStatus` | Renders information about added, deleted and modified files to the index pseudo-commit entry. |
182184
183185
184-
#### **GitLogStylingProps**
186+
#### GitLogStylingProps
185187
| Property | Type | Description |
186188
|-------------------|-----------------|--------------------------------------------------------------------------------|
187189
| `containerClass` | `string` | Class name for the wrapping `<div>` containing branches, graph, and log table. |
@@ -194,6 +196,14 @@ All components have optional props to further configure the log.
194196
| `size` | `number` | The number of rows to show per page. |
195197
| `page` | `number` | The page number to display (first page is `0`). |
196198
199+
#### GitLogIndexStatus
200+
201+
| Prop | Type | Description |
202+
|------------|----------|---------------------------------------------------------------------------|
203+
| `added` | `number` | The number of added files in the git index for the checked-out branch. |
204+
| `deleted` | `number` | The number of deleted files in the git index for the checked-out branch. |
205+
| `modified` | `number` | The number of modified files in the git index for the checked-out branch. |
206+
197207
### Graph
198208
199209
| Property | Type | Description |

0 commit comments

Comments
 (0)