Try #112:

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

@@ -0,0 +1,106 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Tree } from "@hackworthltd/primer-types";
+import { TreeOutline } from "./TreeOutline";
+
+export default {
+  title: "Application/Component Library/TreeOutline",
+  component: TreeOutline,
+  argTypes: {
+    tree: { control: "object", name: "Tree to display" },
+  },
+} 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: Tree;
+}
+
+const Template: ComponentStory<(args: TreeArgs) => JSX.Element> = (args) => (
+  <TreeOutline {...args.tree} />
+);
+
+export const Tree1 = Template.bind({});
+Tree1.args = { tree: { nodeId: 0, childTrees: [], label: "EmptyHole" } };
+
+export const Tree2 = Template.bind({});
+Tree2.args = {
+  tree: {
+    nodeId: 0,
+    childTrees: [{ nodeId: 1, childTrees: [], label: "Var x" }],
+    label: "Lam x",
+  },
+};
+
+export const Tree3 = Template.bind({});
+Tree3.args = {
+  tree: {
+    nodeId: 0,
+    childTrees: [{ nodeId: 1, childTrees: [], label: "Var y" }],
+    label: "Lam y",
+  },
+};
+
+export const Tree4 = Template.bind({});
+Tree4.args = {
+  tree: {
+    nodeId: 0,
+    childTrees: [
+      {
+        nodeId: 1,
+        childTrees: [
+          {
+            nodeId: 2,
+            childTrees: [
+              {
+                nodeId: 3,
+                childTrees: [{ nodeId: 4, childTrees: [], label: "Var x" }],
+                label: "Lam x",
+              },
+            ],
+            label: "LAM a",
+          },
+          {
+            nodeId: 5,
+            childTrees: [
+              {
+                nodeId: 6,
+                childTrees: [
+                  { nodeId: 7, childTrees: [], label: "TVar a" },
+                  { nodeId: 8, childTrees: [], label: "TVar a" },
+                ],
+                label: "TFun",
+              },
+            ],
+            label: "TForall",
+          },
+        ],
+        label: "Ann",
+      },
+      { nodeId: 9, childTrees: [], label: "Con Unit" },
+    ],
+    label: "App",
+  },
+};
+
+export const Tree5 = Template.bind({});
+Tree5.args = {
+  tree: {
+    nodeId: 0,
+    childTrees: [
+      {
+        nodeId: 1,
+        childTrees: [
+          { nodeId: 2, childTrees: [], label: "Var x" },
+          { nodeId: 3, childTrees: [], label: "EmptyHole" },
+          { nodeId: 6, childTrees: [], label: "EmptyHole" },
+        ],
+        label: "Case",
+      },
+    ],
+    label: "Lam x",
+  },
+};

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

@@ -0,0 +1,23 @@
+import "@/index.css";
+
+import { Tree } from "@hackworthltd/primer-types";
+
+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: Tree[] }): JSX.Element {
+  if (trees.length > 0) {
+    return (
+      <ul className="ml-2 list-disc list-outside">
+        {trees.map((t) => (
+          <TreeOutline {...t} key={t.nodeId} />
+        ))}
+      </ul>
+    );
+  }
+  return <></>;
+}

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,4 +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 TreeOutline } from "@/TreeOutline";
 export { default as UIButton } from "@/UIButton";

packages/primer-types/src/Tree.ts

@@ -0,0 +1,25 @@
+/**
+ * 
+ * @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;
+}

packages/primer-types/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./Account";
 export * from "./Session";
+export * from "./Tree";