feat: make pages tree accessible from keyboard (#4132)

Added new implementation for tree component in design system which has
out of the box keyboard support without tying with dnd.

Now only home page is tabbable, all others are accessible with arrows.
Right arrow can both expand folder and access "settings" button. Both
left and right arrows are able to travel between folders/pages.

https://github.com/user-attachments/assets/8d3264ca-1069-4168-97d9-afd7bdd4759e

Author: TrySound

apps/builder/app/builder/features/sidebar-left/panels/pages/page-settings.tsx

@@ -100,7 +100,6 @@ import {
   deletePageMutable,
   $pageRootScope,
   duplicatePage,
-  toTreeData,
   isPathAvailable,
 } from "./page-utils";
 import { Form } from "./form";
@@ -773,8 +772,8 @@ const FormFields = ({
                     }}
                     color="subtle"
                   >
-                    Move this page to the “{toTreeData(pages).root.name}” folder
-                    to set it as your home page
+                    Move this page to the “Root” folder to set it as your home
+                    page
                   </Text>
                 </>
               ) : values.documentType === "xml" ? (

apps/builder/app/builder/features/sidebar-left/panels/pages/page-utils.test.ts

@@ -13,7 +13,6 @@ import {
   isSlugAvailable,
   registerFolderChildMutable,
   reparentOrphansMutable,
-  toTreeData,
   filterSelfAndChildren,
   getExistingRoutePaths,
   $pageRootScope,
@@ -97,162 +96,6 @@ const createPages = () => {
 const toMap = <T extends { id: string }>(list: T[]) =>
   new Map(list.map((item) => [item.id, item]));
 
-describe("toTreeData", () => {
-  test("initial pages always has home pages and a root folder", () => {
-    const { pages } = createPages();
-    const tree = toTreeData(pages);
-    expect(tree.root).toEqual({
-      id: ROOT_FOLDER_ID,
-      name: "Root",
-      slug: "",
-      type: "folder",
-      children: [
-        {
-          data: {
-            id: "homePageId",
-            meta: {},
-            name: "Home",
-            path: "",
-            rootInstanceId: "rootInstanceId",
-            systemDataSourceId: "systemDataSourceId",
-            title: `"Home"`,
-          },
-          id: "homePageId",
-          type: "page",
-        },
-      ],
-    });
-  });
-
-  test("add empty folder", () => {
-    const { pages, register, f } = createPages();
-    register([f("folder", [])]);
-
-    const tree = toTreeData(pages);
-    expect(tree.root).toEqual({
-      id: ROOT_FOLDER_ID,
-      name: "Root",
-      slug: "",
-      type: "folder",
-      children: [
-        {
-          data: {
-            id: "homePageId",
-            meta: {},
-            name: "Home",
-            path: "",
-            rootInstanceId: "rootInstanceId",
-            systemDataSourceId: "systemDataSourceId",
-            title: `"Home"`,
-          },
-          id: "homePageId",
-          type: "page",
-        },
-        {
-          type: "folder",
-          id: "folder",
-          name: "folder",
-          slug: "folder",
-          children: [],
-        },
-      ],
-    });
-  });
-
-  test("add a page inside a folder", () => {
-    const { pages, register, f, p } = createPages();
-    register([f("folder", [p("page", "/page")])]);
-
-    const tree = toTreeData(pages);
-
-    expect(tree.root).toEqual({
-      id: ROOT_FOLDER_ID,
-      name: "Root",
-      slug: "",
-      type: "folder",
-      children: [
-        {
-          data: {
-            id: "homePageId",
-            meta: {},
-            name: "Home",
-            path: "",
-            rootInstanceId: "rootInstanceId",
-            systemDataSourceId: "systemDataSourceId",
-            title: `"Home"`,
-          },
-          id: "homePageId",
-          type: "page",
-        },
-        {
-          type: "folder",
-          id: "folder",
-          name: "folder",
-          slug: "folder",
-          children: [
-            {
-              type: "page",
-              id: "page",
-              data: {
-                id: "page",
-                meta: {},
-                name: "page",
-                path: "/page",
-                rootInstanceId: "rootInstanceId",
-                systemDataSourceId: "systemDataSourceId",
-                title: `"page"`,
-              },
-            },
-          ],
-        },
-      ],
-    });
-  });
-
-  test("nest a folder", () => {
-    const { pages, register, f } = createPages();
-    register([f("1", [f("1-1")])]);
-
-    const tree = toTreeData(pages);
-    expect(tree.root).toEqual({
-      type: "folder",
-      id: ROOT_FOLDER_ID,
-      name: "Root",
-      slug: "",
-      children: [
-        {
-          type: "page",
-          id: "homePageId",
-          data: {
-            id: "homePageId",
-            name: "Home",
-            path: "",
-            title: `"Home"`,
-            meta: {},
-            rootInstanceId: "rootInstanceId",
-            systemDataSourceId: "systemDataSourceId",
-          },
-        },
-        {
-          type: "folder",
-          id: "1",
-          name: "1",
-          slug: "1",
-          children: [
-            {
-              type: "folder",
-              id: "1-1",
-              name: "1-1",
-              slug: "1-1",
-              children: [],
-            },
-          ],
-        },
-      ],
-    });
-  });
-});
-
 describe("reparentOrphansMutable", () => {
   // We must deal with the fact there can be an orphaned folder or page in a collaborative mode,
   // because user A can add a page to a folder while user B deletes the folder without receiving the create page yet.

apps/builder/app/builder/features/sidebar-left/panels/pages/page-utils.ts

@@ -32,83 +32,6 @@ import {
 } from "~/shared/nano-states";
 import { insertPageCopyMutable } from "~/shared/page-utils";
 
-type TreePage = {
-  type: "page";
-  id: string;
-  data: Page;
-};
-
-type TreeFolder = {
-  // currently used only for root node
-  type: "folder";
-  id: Folder["id"];
-  name: Folder["name"];
-  slug: Folder["slug"];
-  children: Array<TreeData>;
-};
-
-export type TreeData = TreeFolder | TreePage;
-
-type Index = Map<string, TreeData>;
-
-/**
- * Return a nested tree structure from flat pages and folders.
- * To be used for rendering.
- */
-export const toTreeData = (
-  pages: Pages
-): { root: TreeFolder; index: Index } => {
-  const pagesMap = new Map(pages.pages.map((page) => [page.id, page]));
-  pagesMap.set(pages.homePage.id, pages.homePage);
-
-  const foldersMap = new Map(
-    pages.folders.map((folder) => [folder.id, folder])
-  );
-  const index: Index = new Map();
-
-  const folderToTree = (folder: Folder) => {
-    // Using map to ensure uniqueness of children.
-    const children = new Map<string, TreeData>();
-    for (const id of folder.children) {
-      const folder = foldersMap.get(id);
-      // It is a folder, not a page.
-      if (folder) {
-        const treeFolder = folderToTree(folder);
-        children.set(treeFolder.id, treeFolder);
-        index.set(folder.id, treeFolder);
-        continue;
-      }
-      const page = pagesMap.get(id);
-      if (page) {
-        const treePage = {
-          type: "page",
-          id: page.id,
-          data: page,
-        } satisfies TreePage;
-        children.set(treePage.id, treePage);
-        index.set(page.id, treePage);
-        continue;
-      }
-    }
-
-    return {
-      type: "folder",
-      id: folder.id,
-      name: folder.name,
-      slug: folder.slug,
-      children: Array.from(children.values()),
-    } satisfies TreeFolder;
-  };
-  const rootFolder = foldersMap.get(ROOT_FOLDER_ID);
-  if (rootFolder === undefined) {
-    throw new Error("Root folder not found");
-  }
-  return {
-    root: folderToTree(rootFolder),
-    index,
-  };
-};
-
 /**
  * When page or folder needs to be deleted or moved to a different parent,
  * we want to cleanup any existing reference to it in current folder.