From 708100f8a96de2e8ed8d83237fcf413af49b8764 Mon Sep 17 00:00:00 2001
From: Ben Price <ben@hackworthltd.com>
Date: Wed, 17 Nov 2021 12:54:34 +0000
Subject: [PATCH] Use Tree API type auto-generated by backend

This unfortunately involves a lot of renaming churn, since the openapi
description calls it 'Tree', rather than 'TreeI'. However, this is a
good thing to do anyway, since having the bare-bones outline component
being called 'Tree' would be confusing when we have some other, fancier,
tree component as well.
---
 packages/primer-components/src/Tree/index.tsx |  3 --
 .../TreeOutline.stories.tsx}                  | 14 ++++----
 .../Tree.tsx => TreeOutline/TreeOutline.tsx}  |  8 ++---
 .../src/TreeOutline/index.tsx                 |  3 ++
 packages/primer-components/src/index.ts       |  2 +-
 packages/primer-types/src/Tree.ts             | 32 ++++++++++++++-----
 6 files changed, 39 insertions(+), 23 deletions(-)
 delete mode 100644 packages/primer-components/src/Tree/index.tsx
 rename packages/primer-components/src/{Tree/Tree.stories.tsx => TreeOutline/TreeOutline.stories.tsx} (89%)
 rename packages/primer-components/src/{Tree/Tree.tsx => TreeOutline/TreeOutline.tsx} (59%)
 create mode 100644 packages/primer-components/src/TreeOutline/index.tsx

diff --git a/packages/primer-components/src/Tree/index.tsx b/packages/primer-components/src/Tree/index.tsx
deleted file mode 100644
index efc9829d..00000000
--- a/packages/primer-components/src/Tree/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Tree } from "./Tree";
-
-export default Tree;
diff --git a/packages/primer-components/src/Tree/Tree.stories.tsx b/packages/primer-components/src/TreeOutline/TreeOutline.stories.tsx
similarity index 89%
rename from packages/primer-components/src/Tree/Tree.stories.tsx
rename to packages/primer-components/src/TreeOutline/TreeOutline.stories.tsx
index 4fcfae47..61727c71 100644
--- a/packages/primer-components/src/Tree/Tree.stories.tsx
+++ b/packages/primer-components/src/TreeOutline/TreeOutline.stories.tsx
@@ -1,26 +1,26 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import { TreeI } from "@hackworthltd/primer-types";
-import { Tree } from "./Tree";
+import { Tree } from "@hackworthltd/primer-types";
+import { TreeOutline } from "./TreeOutline";
 
 export default {
-  title: "Application/Component Library/Tree",
-  component: Tree,
+  title: "Application/Component Library/TreeOutline",
+  component: TreeOutline,
   argTypes: {
     tree: { control: "object", name: "Tree to display" },
   },
-} as ComponentMeta<typeof Tree>;
+} as ComponentMeta<typeof TreeOutline>;
 
 /* We have this indirection so storybook renders the whole json description of
  * a tree as one control. (As having three separate controls for 'label', 'id'
  * and 'subtrees' is not particularly useful.)
  */
 interface TreeArgs {
-  tree: TreeI;
+  tree: Tree;
 }
 
 const Template: ComponentStory<(args: TreeArgs) => JSX.Element> = (args) => (
-  <Tree {...args.tree} />
+  <TreeOutline {...args.tree} />
 );
 
 export const Tree1 = Template.bind({});
diff --git a/packages/primer-components/src/Tree/Tree.tsx b/packages/primer-components/src/TreeOutline/TreeOutline.tsx
similarity index 59%
rename from packages/primer-components/src/Tree/Tree.tsx
rename to packages/primer-components/src/TreeOutline/TreeOutline.tsx
index e55b502a..b82f62e8 100644
--- a/packages/primer-components/src/Tree/Tree.tsx
+++ b/packages/primer-components/src/TreeOutline/TreeOutline.tsx
@@ -1,20 +1,20 @@
 import "@/index.css";
 
-import { TreeI } from "@hackworthltd/primer-types";
+import { Tree } from "@hackworthltd/primer-types";
 
-export const Tree = (tree: TreeI): JSX.Element => (
+export const TreeOutline = (tree: Tree): JSX.Element => (
   <ul className="ml-2 list-disc list-outside">
     <li>{tree.label}</li>
     <ChildTrees trees={tree.childTrees} />
   </ul>
 );
 
-function ChildTrees({ trees }: { trees: TreeI[] }): JSX.Element {
+function ChildTrees({ trees }: { trees: Tree[] }): JSX.Element {
   if (trees.length > 0) {
     return (
       <ul className="ml-2 list-disc list-outside">
         {trees.map((t) => (
-          <Tree {...t} key={t.nodeId} />
+          <TreeOutline {...t} key={t.nodeId} />
         ))}
       </ul>
     );
diff --git a/packages/primer-components/src/TreeOutline/index.tsx b/packages/primer-components/src/TreeOutline/index.tsx
new file mode 100644
index 00000000..c03785a6
--- /dev/null
+++ b/packages/primer-components/src/TreeOutline/index.tsx
@@ -0,0 +1,3 @@
+import { TreeOutline } from "./TreeOutline";
+
+export default TreeOutline;
diff --git a/packages/primer-components/src/index.ts b/packages/primer-components/src/index.ts
index 06c5581f..4c8077d7 100644
--- a/packages/primer-components/src/index.ts
+++ b/packages/primer-components/src/index.ts
@@ -9,5 +9,5 @@ export { default as SearchBar } from "@/SearchBar";
 export { default as SessionList } from "@/SessionList";
 export { default as SessionPreview } from "@/SessionPreview";
 export { default as SessionsNavBar } from "@/SessionsNavBar";
-export { default as Tree } from "@/Tree";
+export { default as TreeOutline } from "@/TreeOutline";
 export { default as UIButton } from "@/UIButton";
diff --git a/packages/primer-types/src/Tree.ts b/packages/primer-types/src/Tree.ts
index 63531ca6..751072e8 100644
--- a/packages/primer-types/src/Tree.ts
+++ b/packages/primer-types/src/Tree.ts
@@ -1,9 +1,25 @@
-export interface TreeI {
-  nodeId: number;
-  label: string;
-  /* NB: 'children' is treated specially by react, leading to weird errors.
-   * Let's avoid that word.
-   */
-  childTrees: TreeI[];
+/**
+ * 
+ * @export
+ * @interface Tree
+ */
+export interface Tree {
+    /**
+     * 
+     * @type {Array<Tree>}
+     * @memberof Tree
+     */
+    childTrees: Array<Tree>;
+    /**
+     * 
+     * @type {number}
+     * @memberof Tree
+     */
+    nodeId: number;
+    /**
+     * 
+     * @type {string}
+     * @memberof Tree
+     */
+    label: string;
 }
-