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/Tree.stories.tsx → 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({});

packages/primer-components/src/Tree/Tree.tsx → 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>
     );

packages/primer-components/src/TreeOutline/index.tsx

@@ -0,0 +1,3 @@
+import { TreeOutline } from "./TreeOutline";
+
+export default TreeOutline;

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";

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;
 }
-