feat(graph): exposed new graph orientation prop to mirror the graph i…

README.md

@@ -238,13 +238,14 @@ All components have optional props to further configure the log.
 
 ### Graph
 
-| Property                 | Type        | Description                                                                                                    |
-|--------------------------|-------------|----------------------------------------------------------------------------------------------------------------|
-| `showCommitNodeHashes`   | `boolean`   | Whether to show the commit hash next to nodes in the graph.                                                    |
-| `showCommitNodeTooltips` | `boolean`   | Whether to show tooltips when hovering over a commit node.                                                     |
-| `nodeTheme`              | `NodeTheme` | Theme applied to commit node elements in the graph.                                                            |
-| `nodeSize`               | `number`    | The diameter, in pixels, of the commits nodes. Should be divisible by 2 and between 8 and 30 to render nicely. |
-| `enableResize`           | `boolean`   | Enables horizontal resizing of the graph. Default: `false`.                                                    |
+| Property                 | Type                | Description                                                                                                    |
+|--------------------------|---------------------|----------------------------------------------------------------------------------------------------------------|
+| `showCommitNodeHashes`   | `boolean`           | Whether to show the commit hash next to nodes in the graph.                                                    |
+| `showCommitNodeTooltips` | `boolean`           | Whether to show tooltips when hovering over a commit node.                                                     |
+| `nodeTheme`              | `NodeTheme`         | Theme applied to commit node elements in the graph.                                                            |
+| `nodeSize`               | `number`            | The diameter, in pixels, of the commits nodes. Should be divisible by 2 and between 8 and 30 to render nicely. |
+| `orientation`            | `normal \| flipped` | The orientation of the graph. Normal renders the checked-out branch on the left, flipped on the right.         |
+| `enableResize`           | `boolean`           | Enables horizontal resizing of the graph. Default: `false`.                                                    |
 
 #### NodeTheme
 

packages/demo/src/GitLog.stories.tsx

@@ -30,6 +30,7 @@ const meta: Meta<StoryProps> = {
     enableResize: false,
     nodeTheme: 'default',
     nodeSize: 20,
+    orientation: 'normal',
     onSelectCommit: (commit?: Commit) => {
       console.info(`Selected commit ${commit?.hash}`)
     },
@@ -161,6 +162,17 @@ const meta: Meta<StoryProps> = {
         step: 2
       }
     },
+    orientation: {
+      name: 'Graph Orientation',
+      table: {
+        category: 'Dimensions'
+      },
+      control: 'radio',
+      options: {
+        Normal: 'normal',
+        Flipped: 'flipped'
+      }
+    },
     onSelectCommit: {
       name: 'onSelectCommit',
       table: {
@@ -230,6 +242,7 @@ export const Demo: Story = {
             <GitLog.Graph
               nodeSize={args.nodeSize}
               nodeTheme={args.nodeTheme}
+              orientation={args.orientation}
               enableResize={args.enableResize}
               showCommitNodeHashes={args.showCommitNodeHashes}
               showCommitNodeTooltips={args.showCommitNodeTooltips}

packages/demo/src/GitLogPaged.stories.tsx

@@ -28,6 +28,7 @@ const meta: Meta<StoryProps> = {
     enableResize: false,
     nodeTheme: 'default',
     nodeSize: 20,
+    orientation: 'normal',
     onSelectCommit: (commit?: Commit) => {
       console.info(`Selected commit ${commit?.hash}`)
     },
@@ -129,6 +130,17 @@ const meta: Meta<StoryProps> = {
         step: 2
       }
     },
+    orientation: {
+      name: 'Graph Orientation',
+      table: {
+        category: 'Dimensions'
+      },
+      control: 'radio',
+      options: {
+        Normal: 'normal',
+        Flipped: 'flipped'
+      }
+    },
     onSelectCommit: {
       name: 'onSelectCommit',
       table: {
@@ -208,6 +220,7 @@ export const Demo: Story = {
             <GitLogPaged.Graph
               nodeSize={args.nodeSize}
               nodeTheme={args.nodeTheme}
+              orientation={args.orientation}
               enableResize={args.enableResize}
               showCommitNodeHashes={args.showCommitNodeHashes}
               showCommitNodeTooltips={args.showCommitNodeTooltips}

packages/library/README.md

@@ -196,13 +196,14 @@ All components have optional props to further configure the log.
 
 ### Graph
 
-| Property                 | Type        | Description                                                                                                    |
-|--------------------------|-------------|----------------------------------------------------------------------------------------------------------------|
-| `showCommitNodeHashes`   | `boolean`   | Whether to show the commit hash next to nodes in the graph.                                                    |
-| `showCommitNodeTooltips` | `boolean`   | Whether to show tooltips when hovering over a commit node.                                                     |
-| `nodeTheme`              | `NodeTheme` | Theme applied to commit node elements in the graph.                                                            |
-| `nodeSize`               | `number`    | The diameter, in pixels, of the commits nodes. Should be divisible by 2 and between 8 and 30 to render nicely. |
-| `enableResize`           | `boolean`   | Enables horizontal resizing of the graph. Default: `false`.                                                    |
+| Property                 | Type                | Description                                                                                                    |
+|--------------------------|---------------------|----------------------------------------------------------------------------------------------------------------|
+| `showCommitNodeHashes`   | `boolean`           | Whether to show the commit hash next to nodes in the graph.                                                    |
+| `showCommitNodeTooltips` | `boolean`           | Whether to show tooltips when hovering over a commit node.                                                     |
+| `nodeTheme`              | `NodeTheme`         | Theme applied to commit node elements in the graph.                                                            |
+| `nodeSize`               | `number`            | The diameter, in pixels, of the commits nodes. Should be divisible by 2 and between 8 and 30 to render nicely. |
+| `orientation`            | `normal \| flipped` | The orientation of the graph. Normal renders the checked-out branch on the left, flipped on the right.         |
+| `enableResize`           | `boolean`           | Enables horizontal resizing of the graph. Default: `false`.                                                    |
 
 #### NodeTheme
 

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": "2.2.0",
+  "version": "2.3.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/react-git-log.js",

packages/library/src/GitLog.spec.tsx

@@ -58,7 +58,7 @@ describe('GitLog', () => {
     })
   })
 
-  it('should render correctly and match the snapshot the standard GitLog component', { timeout: 1000 * 10 } ,() => {
+  it('should render correctly and match the snapshot of the GitLog component', { timeout: 1000 * 10 } ,() => {
     const gitLogEntries = parseGitLogOutput(sleepRepositoryData)
 
     const { asFragment } = render(
@@ -77,6 +77,62 @@ describe('GitLog', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
+  it('should render correctly and match the snapshot of the GitLog component in flipped orientation', { timeout: 1000 * 10 } ,() => {
+    const gitLogEntries = parseGitLogOutput(sleepRepositoryData)
+
+    const { asFragment } = render(
+      <GitLog
+        showHeaders
+        currentBranch='release'
+        entries={gitLogEntries}
+        githubRepositoryUrl='https://github.com/TomPlum/sleep'
+      >
+        <GitLog.Tags />
+        <GitLog.Graph orientation='flipped' />
+        <GitLog.Table />
+      </GitLog>
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('should render correctly and match the snapshot of the GitLog component with a custom node size', { timeout: 1000 * 10 } ,() => {
+    const gitLogEntries = parseGitLogOutput(sleepRepositoryData)
+
+    const { asFragment } = render(
+      <GitLog
+        showHeaders
+        currentBranch='release'
+        entries={gitLogEntries}
+        defaultGraphWidth={100}
+        githubRepositoryUrl='https://github.com/TomPlum/sleep'
+      >
+        <GitLog.Tags />
+        <GitLog.Graph nodeSize={12} />
+        <GitLog.Table />
+      </GitLog>
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('should render correctly and match the snapshot of the GitLog component when there is no data', { timeout: 1000 * 10 } ,() => {
+    const { asFragment } = render(
+      <GitLog
+        showHeaders
+        entries={[]}
+        currentBranch='release'
+        githubRepositoryUrl='https://github.com/TomPlum/sleep'
+      >
+        <GitLog.Tags />
+        <GitLog.Graph />
+        <GitLog.Table />
+      </GitLog>
+    )
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
   it('should log a warning if the graph subcomponent is not rendered', () => {
     const consoleWarn = vi.spyOn(console, 'warn')