Make toHierarchy even more generic (reusable with RecursiveList

Author: metonym

docs/src/pages/components/RecursiveList.svx

@@ -37,4 +37,11 @@ Set `type` to `"ordered"` to use the ordered list variant.
 
 Set `type` to `"ordered-native"` to use the native styles for an ordered list.
 
-<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />
+<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />
+
+## Flat data structure
+
+If working with a flat data structure, use the `toHierarchy` utility
+to convert a flat data structure into a hierarchical array accepted by the `nodes` prop.
+
+<FileSource src="/framed/RecursiveList/RecursiveListFlatArray" />

docs/src/pages/framed/RecursiveList/RecursiveListFlatArray.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { RecursiveList, toHierarchy } from "carbon-components-svelte";
+
+  const nodesFlat = [
+    { id: 1, text: "Item 1" },
+    { id: 2, text: "Item 1a", pid: 1 },
+    { id: 3, html: "<h5>HTML content</h5>", pid: 2 },
+    { id: 4, text: "Item 2" },
+    { id: 5, href: "https://svelte.dev/", pid: 4 },
+    {
+      id: 6,
+      href: "https://svelte.dev/",
+      text: "Link with custom text",
+      pid: 4,
+    },
+    { id: 7, text: "Item 3" },
+  ];
+</script>
+
+<RecursiveList nodes={toHierarchy(nodesFlat, (node) => node.pid)} />

src/TreeView/index.d.ts

@@ -1,2 +1 @@
 export { default as TreeView } from "./TreeView.svelte";
-export { toHierarchy } from "./treeview";

src/TreeView/index.js

@@ -1,2 +1 @@
 export { default as TreeView } from "./TreeView.svelte";
-export { toHierarchy } from "./treeview";

src/index.js

@@ -127,7 +127,6 @@ export { Tooltip, TooltipFooter } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
 export { TreeView } from "./TreeView";
-export { toHierarchy } from "./TreeView/treeview";
 export { Truncate } from "./Truncate";
 export { default as truncate } from "./Truncate/truncate";
 export {
@@ -153,3 +152,4 @@ export {
   HeaderSearch,
 } from "./UIShell";
 export { UnorderedList } from "./UnorderedList";
+export { toHierarchy } from "./utils/toHierarchy";

src/TreeView/treeview.d.ts renamed to src/utils/toHierarchy.d.ts

@@ -17,3 +17,5 @@ export function toHierarchy<
    */
   getParentId: (node: T) => T[K] | null,
 ): (T & { nodes?: (T & { nodes?: T[] })[] })[];
+
+export default toHierarchy;

src/TreeView/treeview.js renamed to src/utils/toHierarchy.js

@@ -47,3 +47,5 @@ export function toHierarchy(flatArray, getParentId) {
 
   return tree;
 }
+
+export default toHierarchy;

tests/RecursiveList/RecursiveList.hierarchy.test.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { RecursiveList } from "carbon-components-svelte";
+  import toHierarchy from "../../src/utils/toHierarchy";
+
+  let nodes = toHierarchy(
+    [
+      { id: 1, text: "Item 1" },
+      { id: 2, text: "Item 1a", pid: 1 },
+      { id: 3, html: "<h5>HTML content</h5>", pid: 2 },
+      { id: 4, text: "Item 2" },
+      { id: 5, href: "https://svelte.dev/", pid: 4 },
+      {
+        id: 6,
+        href: "https://svelte.dev/",
+        text: "Link with custom text",
+        pid: 4,
+      },
+      { id: 7, text: "Item 3" },
+    ],
+    (node) => node.pid,
+  );
+</script>
+
+<RecursiveList type="ordered" {nodes} />

tests/RecursiveList.test.svelte renamed to tests/RecursiveList/RecursiveList.test.svelte

@@ -14,18 +14,14 @@
     {
       text: "Item 2",
       nodes: [
-        {
-          href: "https://svelte.dev/",
-        },
+        { href: "https://svelte.dev/" },
         {
           href: "https://svelte.dev/",
           text: "Link with custom text",
         },
       ],
     },
-    {
-      text: "Item 3",
-    },
+    { text: "Item 3" },
   ];
 </script>
 

tests/RecursiveList/RecursiveList.test.ts

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/svelte";
+import RecursiveListHierarchyTest from "./RecursiveList.hierarchy.test.svelte";
+import RecursiveListTest from "./RecursiveList.test.svelte";
+
+const testCases = [
+  { name: "RecursiveList", component: RecursiveListTest },
+  { name: "RecursiveList hierarchy", component: RecursiveListHierarchyTest },
+];
+
+describe.each(testCases)("$name", ({ component }) => {
+  it("renders all top-level items", () => {
+    render(component);
+
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+    expect(screen.getByText("Item 3")).toBeInTheDocument();
+
+    expect(screen.getAllByRole("list")).toHaveLength(4);
+
+    // Nested items
+    expect(screen.getByText("Item 1a")).toBeInTheDocument();
+  });
+
+  it("renders HTML content", () => {
+    render(component);
+
+    const htmlContent = screen.getByText("HTML content");
+    expect(htmlContent.tagName).toBe("H5");
+  });
+
+  it("renders links correctly", () => {
+    render(component);
+
+    const links = screen.getAllByRole("link");
+    expect(links).toHaveLength(2);
+
+    // Link with custom text
+    const customLink = screen.getByText("Link with custom text");
+    expect(customLink).toHaveAttribute("href", "https://svelte.dev/");
+
+    // Plain link
+    const plainLink = links.find(
+      (link) => link.textContent === "https://svelte.dev/",
+    );
+    expect(plainLink).toHaveAttribute("href", "https://svelte.dev/");
+  });
+});