feat: add toHierarchy utility for TreeView, RecursiveList (#2072)

Co-authored-by: Bram <bramhavers@gmail.com>

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/components/TreeView.svx

@@ -107,3 +107,10 @@ Use the `TreeView.showNode` method to show a specific node.
 If a matching node is found, it will be expanded, selected, and focused.
 
 <FileSource src="/framed/TreeView/TreeViewShowNode" />
+
+## 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/TreeView/TreeViewFlatArray" />

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)} />

docs/src/pages/framed/TreeView/TreeViewFlatArray.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { TreeView, toHierarchy } from "carbon-components-svelte";
+  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
+
+  let nodesFlat = [
+    { id: 0, text: "AI / Machine learning", icon: Analytics },
+    { id: 1, text: "Analytics" },
+    { id: 2, text: "IBM Analytics Engine", pid: 1 },
+    { id: 3, text: "Apache Spark", pid: 2 },
+    { id: 4, text: "Hadoop", pid: 2 },
+    { id: 5, text: "IBM Cloud SQL Query", pid: 1 },
+    { id: 6, text: "IBM Db2 Warehouse on Cloud", pid: 1 },
+    { id: 7, text: "Blockchain" },
+    { id: 8, text: "IBM Blockchain Platform", pid: 7 },
+    { id: 9, text: "Databases" },
+    { id: 10, text: "IBM Cloud Databases for Elasticsearch", pid: 9 },
+    { id: 11, text: "IBM Cloud Databases for Enterprise DB", pid: 9 },
+    { id: 12, text: "IBM Cloud Databases for MongoDB", pid: 9 },
+    { id: 13, text: "IBM Cloud Databases for PostgreSQL", pid: 9 },
+    { id: 14, text: "Integration", disabled: true },
+    { id: 15, text: "IBM API Connect", disabled: true, pid: 14 },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  nodes={toHierarchy(nodesFlat, (node) => node.pid)}
+/>