Merge pull request #173 from dotindustries/feat/gitgraph_options

feat: allow override for gitgraphjs options

.swm/feat-allow-override-for-gitgraphjs-options.eh06czwq.sw.md

@@ -0,0 +1,90 @@
+---
+title: 'feat: allow override for gitgraphjs options'
+---
+📦 Published PR as canary version:  ✨ Test out this PR locally via:
+
+```bash
+npm install @dotinc/[email protected]
+npm install @dotinc/[email protected]
+# or 
+yarn add @dotinc/[email protected]
+yarn add @dotinc/[email protected]
+```
+
+<SwmSnippet path="/packages/ogre-react/OgreGraph.tsx" line="12">
+
+---
+
+Include partial options from <SwmToken path="/packages/ogre-react/OgreGraph.tsx" pos="19:2:2" line-data="interface GitgraphOptions {">`GitgraphOptions`</SwmToken> and re-export template creation functions.
+
+This extension includes an option for the graph to override commit level options as well by providing a map of <SwmToken path="/packages/ogre-react/OgreGraph.tsx" pos="34:1:1" line-data="  commitOptions?: Map&lt;string, CommitOptions&gt;;">`commitOptions`</SwmToken>
+
+```tsx
+
+export {
+  templateExtend,
+  metroTemplate,
+  blackArrowTemplate,
+} from "@gitgraph/core/lib/template";
+
+interface GitgraphOptions {
+  template?: TemplateName | Template;
+  orientation?: Orientation;
+  reverseArrow?: boolean;
+  initCommitOffsetX?: number;
+  initCommitOffsetY?: number;
+  mode?: Mode;
+  author?: string;
+  branchLabelOnEveryCommit?: boolean;
+  commitMessage?: string;
+}
+```
+
+---
+
+</SwmSnippet>
+
+<SwmSnippet path="/packages/ogre-react/OgreGraph.tsx" line="43">
+
+---
+
+This is where the <SwmToken path="/packages/ogre-react/OgreGraph.tsx" pos="34:1:1" line-data="  commitOptions?: Map&lt;string, CommitOptions&gt;;">`commitOptions`</SwmToken> are applied to the repository commits.
+
+```tsx
+
+  useEffect(() => {
+    if (!graphData) {
+      const history = repository.getHistory();
+      const data = formatGit2Json(history).map((c) => {
+        const opts = commitOptions?.get(c.hash);
+        return {
+          ...c,
+          ...(opts ? opts : {}),
+        };
+      });
+      setGraphData(data);
+    }
+  }, [repository]);
+```
+
+---
+
+</SwmSnippet>
+
+<SwmSnippet path="/packages/ogre-react/OgreGraph.tsx" line="57">
+
+---
+
+Passing down the global options to Gitgraph.
+
+```tsx
+
+  return !graphData ? null : (
+    <Gitgraph options={options}>
+```
+
+---
+
+</SwmSnippet>
+
+<SwmMeta version="3.0.0" repo-id="Z2l0aHViJTNBJTNBb2dyZSUzQSUzQWRvdGluZHVzdHJpZXM="><sup>Powered by [Swimm](https://app.swimm.io/)</sup></SwmMeta>

.swm/swimm.json

@@ -0,0 +1,3 @@
+{
+    "repo_id": "Z2l0aHViJTNBJTNBb2dyZSUzQSUzQWRvdGluZHVzdHJpZXM="
+}

apps/ogre-cli/package.json

@@ -30,7 +30,7 @@
 		"@sindresorhus/tsconfig": "^3.0.1",
 		"@types/color-convert": "^2.0.3",
 		"@types/lodash": "^4.14.202",
-		"@types/node": "^17.0.45",
+		"@types/node": "^20.12.5",
 		"@types/react": "^18.0.32",
 		"@vdemedes/prettier-config": "^2.0.1",
 		"auto-changelog": "^2.4.0",
@@ -41,7 +41,7 @@
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"prettier": "^2.8.7",
 		"ts-node": "^10.9.1",
-		"typescript": "^5.0.3"
+		"typescript": "^5.4.4"
 	},
 	"ava": {
 		"extensions": {

apps/ogre-demo/package.json

@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@dotinc/ogre": "^0.9.0",
-    "@dotinc/ogre-react": "^0.9.0",
+    "@dotinc/ogre": "*",
+    "@dotinc/ogre-react": "*",
     "next": "12.1.0",
     "next-plausible": "^3.12.0",
     "next-transpile-modules": "^9.1.0",
@@ -20,12 +20,12 @@
     "react-live": "3.2.0"
   },
   "devDependencies": {
-    "@types/node": "17.0.45",
+    "@types/node": "^20.12.5",
     "@types/react": "17.0.39",
     "config": "^0.2.0",
     "eslint": "8.56.0",
     "eslint-config-next": "12.3.4",
     "tsconfig": "*",
-    "typescript": "4.7.4"
+    "typescript": "^5.4.4"
   }
 }

apps/ogre-demo/pages/index.tsx

@@ -79,7 +79,7 @@ const Home: NextPage = () => {
             <LivePreview
               style={{
                 borderRadius: `${polished.rem(0)} ${polished.rem(
-                  5
+                  5,
                 )} ${polished.rem(5)} ${polished.rem(0)}`,
                 position: "relative",
                 padding: "0.5rem",
@@ -120,11 +120,11 @@ const code = `
   const [repository, setRepository] = useState(undefined)
   useEffect(() => {
     if (!repository) {
-      setupRepo()
+      setupRepo().then(r => setRepository(r))
     }
     return () => setRepository(undefined)
   }, [])
-
+  
   const setupRepo = async () => {
     let author = 'author <[email protected]>'
     const r = new Repository({description: '', name: ''}, {})
@@ -147,8 +147,8 @@ const code = `
     r.checkout('main')
     r.merge('description')
 
-    setRepository(r)
+    return r
   }
-
+  
   return repository ? <OgreGraph repository={repository} /> : null
 }`;

apps/ogre-demo/tsconfig.json

@@ -2,7 +2,11 @@
   "extends": "tsconfig/nextjs.json",
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -17,6 +21,12 @@
     "incremental": true,
     "downlevelIteration": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }