ThemeContext & Test Coverage

packages/library/src/_test/stubs.ts

@@ -5,6 +5,7 @@ import { ThemeFunctions } from 'hooks/useTheme'
 import { GraphData } from 'data'
 import { GraphColumnState } from 'modules/Graph/components/GraphColumn'
 import { GraphContextBag } from 'modules/Graph/context'
+import { ThemeContextBag } from 'context/ThemeContext'
 
 export const commit = (commit?: Partial<Commit>): Commit => ({
   hash: 'aa2c148',
@@ -44,10 +45,8 @@ export const gitContextBag = (bag?: Partial<GitContextBag>): GitContextBag => ({
   setPreviewedCommit: vi.fn(),
   setSelectedCommit: vi.fn(),
   showBranchesTags: false,
-  theme: 'dark',
   showTable: true,
   selectedCommit: commit({ hash: 'selected' }),
-  colours: ['white'],
   headCommit: commit({ hash: 'HEAD' }),
   graphData: graphData(),
   showHeaders: true,
@@ -64,6 +63,12 @@ export const gitContextBag = (bag?: Partial<GitContextBag>): GitContextBag => ({
   ...bag
 })
 
+export const themeContextBag = (bag?: Partial<ThemeContextBag>): ThemeContextBag => ({
+  theme: 'dark',
+  colours: ['white'],
+  ...bag
+})
+
 export const graphContextBag = (bag?: Partial<GraphContextBag>): GraphContextBag => ({
   nodeTheme: 'default',
   showCommitNodeTooltips: false,

packages/library/src/components/GitLogCore/GitLogCore.tsx

@@ -1,15 +1,14 @@
 import { GitLogCoreProps } from './types'
 import { Children, isValidElement, PropsWithChildren, ReactElement, useCallback, useMemo, useState } from 'react'
 import { GitContext, GitContextBag } from 'context/GitContext'
-import { neonAuroraDarkColours, neonAuroraLightColours, useTheme } from 'hooks/useTheme'
-import { generateRainbowGradient } from 'hooks/useTheme/createRainbowTheme'
 import { computeNodePositions, computeRelationships, GraphData, temporalTopologicalSort } from 'data'
 import { Tags } from 'modules/Tags'
 import { Graph, GraphOrientation } from 'modules/Graph'
 import { Table } from 'modules/Table'
 import { Layout } from 'components/Layout'
 import { Commit } from 'types/Commit'
 import { DEFAULT_NODE_SIZE, NODE_BORDER_WIDTH } from 'constants/constants'
+import { ThemeContextProvider } from 'context/ThemeContext'
 
 export const GitLogCore = ({
   children,
@@ -89,33 +88,6 @@ export const GitLogCore = ({
   // TODO: Are we using graphWidth here or just ditching enableResize?
   const [, setGraphWidth] = useState(defaultGraphWidth ?? smallestAvailableGraphWidth)
 
-  const { shiftAlphaChannel } = useTheme()
-
-  const themeColours = useMemo<string[]>(() => {
-    switch (colours) {
-      case 'rainbow-light': {
-        return generateRainbowGradient(graphData.graphWidth + 1)
-      }
-      case 'rainbow-dark': {
-        return generateRainbowGradient(graphData.graphWidth + 1)
-          .map(colour => shiftAlphaChannel(colour, 0.6))
-      }
-      case 'neon-aurora-dark': {
-        return neonAuroraDarkColours
-      }
-      case 'neon-aurora-light': {
-        return neonAuroraLightColours
-      }
-      default: {
-        if (theme === 'light') {
-          return colours
-        }
-
-        return colours.map(colour => shiftAlphaChannel(colour, 0.6))
-      }
-    }
-  }, [colours, graphData.graphWidth, shiftAlphaChannel, theme])
-
   const handleSelectCommit = useCallback((commit?: Commit) => {
     setSelectedCommit(commit)
     onSelectCommit?.(commit)
@@ -183,11 +155,9 @@ export const GitLogCore = ({
   }, [defaultGraphWidth, smallestAvailableGraphWidth])
 
   const value = useMemo<GitContextBag>(() => ({
-    colours: themeColours,
     showTable: Boolean(table),
     showBranchesTags: Boolean(tags),
     classes,
-    theme,
     selectedCommit,
     setSelectedCommit: handleSelectCommit,
     previewedCommit,
@@ -211,9 +181,7 @@ export const GitLogCore = ({
     setGraphOrientation,
     indexStatus
   }), [
-    themeColours,
     classes,
-    theme,
     selectedCommit,
     previewedCommit,
     handleSelectCommit,
@@ -239,7 +207,9 @@ export const GitLogCore = ({
 
   return (
     <GitContext.Provider value={value}>
-      <Layout tags={tags} graph={graph} table={table} />
+      <ThemeContextProvider theme={theme} colours={colours} graphWidth={graphData.graphWidth}>
+        <Layout tags={tags} graph={graph} table={table} />
+      </ThemeContextProvider>
     </GitContext.Provider>
   )
 }

packages/library/src/context/GitContext/GitContext.ts

@@ -1,6 +1,5 @@
 import { createContext } from 'react'
 import { GitContextBag } from './types'
-import { neonAuroraDarkColours } from 'hooks/useTheme'
 import { Commit } from 'types/Commit'
 import DataIntervalTree from 'node-interval-tree'
 import { DEFAULT_NODE_SIZE } from 'constants/constants'
@@ -18,13 +17,11 @@ const defaultCommit: Commit = {
 }
 
 export const GitContext = createContext<GitContextBag>({
-  colours: neonAuroraDarkColours,
   headCommit: defaultCommit,
   indexCommit: defaultCommit,
   currentBranch: 'master',
   showTable: true,
   showBranchesTags: true,
-  theme: 'light',
   selectedCommit: undefined,
   setSelectedCommit: (commit?: Commit) => {
     console.debug(`Tried to invoke setSelectedCommit(${JSON.stringify(commit)}) before the GitContext was initialised.`)

packages/library/src/context/GitContext/types.ts

@@ -1,12 +1,9 @@
 import { Commit } from 'types/Commit'
-import { ThemeMode } from 'hooks/useTheme'
 import { GraphData } from 'data'
 import { GitLogIndexStatus, GitLogStylingProps } from '../../types'
 import { GraphOrientation } from 'modules/Graph'
 
 export interface GitContextBag {
-  colours: string[]
-
   /**
    * The name of the branch that is
    * currently checked out.
@@ -177,15 +174,6 @@ export interface GitContextBag {
    */
   classes?: GitLogStylingProps
 
-  /**
-   * The variant of the default colour
-   * them to apply to the log.
-   *
-   * Does not take effect if a custom
-   * array of {@link colours} are passed.
-   */
-  theme: ThemeMode
-
   /**
    * The status of changed files in the
    * Git index.

packages/library/src/context/ThemeContext/ThemeContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+import { ThemeContextBag } from 'context/ThemeContext/types'
+import { neonAuroraDarkColours } from 'hooks/useTheme'
+
+export const ThemeContext = createContext<ThemeContextBag>({
+  colours: neonAuroraDarkColours,
+  theme: 'light'
+})

packages/library/src/context/ThemeContext/ThemeContextProvider.tsx

@@ -0,0 +1,46 @@
+import { ThemeContext } from 'context/ThemeContext/ThemeContext'
+import { PropsWithChildren, useMemo } from 'react'
+import { ThemeContextBag, ThemeContextProviderProps } from 'context/ThemeContext/types'
+import { neonAuroraDarkColours, neonAuroraLightColours, useTheme } from 'hooks/useTheme'
+import { generateRainbowGradient } from 'hooks/useTheme/createRainbowTheme'
+
+export const ThemeContextProvider = ({ children, theme, colours, graphWidth }: PropsWithChildren<ThemeContextProviderProps>) => {
+
+  const { shiftAlphaChannel } = useTheme()
+
+  const themeColours = useMemo<string[]>(() => {
+    switch (colours) {
+      case 'rainbow-light': {
+        return generateRainbowGradient(graphWidth + 1)
+      }
+      case 'rainbow-dark': {
+        return generateRainbowGradient(graphWidth + 1)
+          .map(colour => shiftAlphaChannel(colour, 0.6))
+      }
+      case 'neon-aurora-dark': {
+        return neonAuroraDarkColours
+      }
+      case 'neon-aurora-light': {
+        return neonAuroraLightColours
+      }
+      default: {
+        if (theme === 'light') {
+          return colours
+        }
+
+        return colours.map(colour => shiftAlphaChannel(colour, 0.6))
+      }
+    }
+  }, [colours, graphWidth, shiftAlphaChannel, theme])
+
+  const value = useMemo<ThemeContextBag>(() => ({
+    colours: themeColours,
+    theme
+  }), [theme, themeColours])
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}

packages/library/src/context/ThemeContext/index.ts

@@ -0,0 +1,3 @@
+export * from './types'
+export * from './useThemeContext'
+export * from './ThemeContextProvider'

packages/library/src/context/ThemeContext/types.ts

@@ -0,0 +1,25 @@
+import { ThemeColours, ThemeMode } from 'hooks/useTheme'
+
+export interface ThemeContextBag {
+  /**
+   * The variant of the default colour
+   * them to apply to the log.
+   *
+   * Does not take effect if a custom
+   * array of {@link colours} are passed.
+   */
+  theme: ThemeMode
+
+  /**
+   * An array of colours to be used in
+   * graph to denote the different branches
+   * in the git log entries.
+   */
+  colours: string[]
+}
+
+export interface ThemeContextProviderProps {
+  theme: ThemeMode
+  graphWidth: number
+  colours: ThemeColours | string[]
+}

packages/library/src/context/ThemeContext/useThemeContext.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { ThemeContext } from 'context/ThemeContext/ThemeContext'
+
+export const useThemeContext = () => useContext(ThemeContext)