chore: inital headless tree setup

app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/RightPanel.tsx

@@ -99,8 +99,8 @@ export const RightPanel = ({ id, lang }: { id: string; lang: Language }) => {
       ? "top-30"
       : "top-10"
     : isIntersecting
-    ? "top-20"
-    : "top-0";
+      ? "top-20"
+      : "top-0";
 
   // Observe if the header is offscreen
   // Used to determine the position of the right panel button "toggle" button

app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/headless-treeview/TreeView.tsx

@@ -0,0 +1,67 @@
+/**
+ * Note this is a work in progress to move the tree view to a more accessible implementation.
+ */
+
+import "./style.css";
+import {
+  asyncDataLoaderFeature,
+  createOnDropHandler,
+  dragAndDropFeature,
+  hotkeysCoreFeature,
+  keyboardDragAndDropFeature,
+  selectionFeature,
+} from "@headless-tree/core";
+import { DemoItem, asyncDataLoader, data } from "./data";
+import { AssistiveTreeDescription, useTree } from "@headless-tree/react";
+import { cn } from "@lib/utils";
+
+export const TreeView = ({ ref }: { ref: React.Ref<HTMLDivElement> }) => {
+  const tree = useTree<DemoItem>({
+    initialState: {
+      expandedItems: ["fruit"],
+      selectedItems: ["banana", "orange"],
+    },
+    rootItemId: "root",
+    getItemName: (item) => item.getItemData()?.name,
+    isItemFolder: (item) => !!item.getItemData()?.children,
+    canReorder: true,
+    onDrop: createOnDropHandler((item, newChildren) => {
+      data[item.getId()].children = newChildren;
+    }),
+    indent: 20,
+    dataLoader: asyncDataLoader,
+    features: [
+      asyncDataLoaderFeature,
+      selectionFeature,
+      hotkeysCoreFeature,
+      dragAndDropFeature,
+      keyboardDragAndDropFeature,
+    ],
+  });
+
+  return (
+    <div {...tree.getContainerProps()} className="tree" ref={ref}>
+      <AssistiveTreeDescription tree={tree} />
+      {tree.getItems().map((item) => (
+        <button
+          key={item.getId()}
+          {...item.getProps()}
+          style={{ paddingLeft: `${item.getItemMeta().level * 20}px` }}
+        >
+          <div
+            className={cn("treeitem", {
+              focused: item.isFocused(),
+              expanded: item.isExpanded(),
+              selected: item.isSelected(),
+              folder: item.isFolder(),
+              drop: item.isDragTarget(),
+            })}
+          >
+            {item.getItemName()}
+          </div>
+        </button>
+      ))}
+      <div style={tree.getDragLineStyle()} className="dragline" />
+    </div>
+  );
+};

app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/headless-treeview/data.ts

@@ -0,0 +1,93 @@
+export type DemoItem = {
+  name: string;
+  children?: string[];
+};
+
+export const data: Record<string, DemoItem> = {
+  root: {
+    name: "Root",
+    children: ["fruit", "vegetables", "meals", "dessert", "drinks"],
+  },
+  fruit: {
+    name: "Fruit",
+    children: ["apple", "banana", "orange", "berries", "lemon"],
+  },
+  apple: { name: "Apple" },
+  banana: { name: "Banana" },
+  orange: { name: "Orange" },
+  lemon: { name: "Lemon" },
+  berries: { name: "Berries", children: ["red", "blue", "black"] },
+  red: { name: "Red", children: ["strawberry", "raspberry"] },
+  strawberry: { name: "Strawberry" },
+  raspberry: { name: "Raspberry" },
+  blue: { name: "Blue", children: ["blueberry"] },
+  blueberry: { name: "Blueberry" },
+  black: { name: "Black", children: ["blackberry"] },
+  blackberry: { name: "Blackberry" },
+  vegetables: {
+    name: "Vegetables",
+    children: ["tomato", "carrot", "cucumber", "potato"],
+  },
+  tomato: { name: "Tomato" },
+  carrot: { name: "Carrot" },
+  cucumber: { name: "Cucumber" },
+  potato: { name: "Potato" },
+  meals: {
+    name: "Meals",
+    children: ["america", "europe", "asia", "australia"],
+  },
+  america: { name: "America", children: ["burger", "hotdog", "pizza"] },
+  burger: { name: "Burger" },
+  hotdog: { name: "Hotdog" },
+  pizza: { name: "Pizza" },
+  europe: {
+    name: "Europe",
+    children: ["pasta", "paella", "schnitzel", "risotto", "weisswurst"],
+  },
+  pasta: { name: "Pasta" },
+  paella: { name: "Paella" },
+  schnitzel: { name: "Schnitzel" },
+  risotto: { name: "Risotto" },
+  weisswurst: { name: "Weisswurst" },
+  asia: { name: "Asia", children: ["sushi", "ramen", "curry", "noodles"] },
+  sushi: { name: "Sushi" },
+  ramen: { name: "Ramen" },
+  curry: { name: "Curry" },
+  noodles: { name: "Noodles" },
+  australia: {
+    name: "Australia",
+    children: ["potatowedges", "pokebowl", "lemoncurd", "kumarafries"],
+  },
+  potatowedges: { name: "Potato Wedges" },
+  pokebowl: { name: "Poke Bowl" },
+  lemoncurd: { name: "Lemon Curd" },
+  kumarafries: { name: "Kumara Fries" },
+  dessert: {
+    name: "Dessert",
+    children: ["icecream", "cake", "pudding", "cookies"],
+  },
+  icecream: { name: "Icecream" },
+  cake: { name: "Cake" },
+  pudding: { name: "Pudding" },
+  cookies: { name: "Cookies" },
+  drinks: { name: "Drinks", children: ["water", "juice", "beer", "wine"] },
+  water: { name: "Water" },
+  juice: { name: "Juice" },
+  beer: { name: "Beer" },
+  wine: { name: "Wine" },
+};
+
+const wait = (ms: number) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+export const syncDataLoader = {
+  getItem: (id: string) => data[id],
+  getChildren: (id: string) => data[id]?.children ?? [],
+};
+
+export const asyncDataLoader = {
+  getItem: (itemId: string) => wait(50).then(() => data[itemId]),
+  getChildren: (itemId: string) => wait(50).then(() => data[itemId]?.children ?? []),
+};

app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/headless-treeview/style.css

@@ -0,0 +1,214 @@
+.tree {
+  max-width: 300px;
+  min-height: 100px;
+}
+
+.tree button[role="treeitem"] {
+  display: flex;
+  background: transparent;
+  border: none;
+  width: 100%;
+  padding: 0 0 2px 0;
+}
+
+.treeitem {
+  width: 100%;
+  text-align: left;
+  background-color: white;
+  padding: 6px 10px;
+  position: relative;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+}
+.treeitem:hover {
+  background-color: var(--selected-color);
+}
+
+.renaming-item {
+  background-color: var(--selected-color);
+  margin-bottom: 2px;
+  border-radius: 8px;
+  padding: 4px 10px 5px 24px;
+}
+.renaming-item input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  outline: none;
+}
+
+.treeitem:hover {
+  border-color: black;
+}
+
+.tree button[role="treeitem"]:focus {
+  outline: none;
+}
+
+.treeitem.selected {
+  background-color: #eee;
+}
+
+button:focus-visible .treeitem.focused,
+.treeitem.searchmatch.focused {
+  outline: 2px solid black;
+}
+
+.treeitem.drop {
+  border-color: var(--selected-color);
+  background-color: #e1f1f8;
+}
+
+.treeitem.searchmatch {
+  background-color: #e1f8ff;
+}
+
+.treeitem.folder:before {
+  content: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48Zz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNjQ2IDEuNjQ2YS41LjUgMCAwIDEgLjcwOCAwbDYgNmEuNS41IDAgMCAxIDAgLjcwOGwtNiA2YS41LjUgMCAwIDEtLjcwOC0uNzA4TDEwLjI5MyA4IDQuNjQ2IDIuMzU0YS41LjUgMCAwIDEgMC0uNzA4eiIgY2xhc3M9InJjdC10cmVlLWl0ZW0tYXJyb3ctcGF0aCI+PC9wYXRoPjwvZz48L2c+PC9zdmc+);
+  width: 10px;
+  display: inline-block;
+  z-index: 1;
+  margin-right: 4px;
+  transition: transform 0.1s ease-in-out;
+}
+
+.treeitem.folder.expanded:before {
+  transform: rotate(90deg);
+}
+
+.treeitem:not(.folder) {
+  padding-left: 24px;
+}
+
+.treeitem.selected:after {
+  content: " ";
+  position: absolute;
+  top: 5px;
+  left: -2px;
+  height: 16px;
+  width: 4px;
+  background-color: #0366d6;
+  border-radius: 99px;
+}
+
+.description {
+  font-family: sans-serif;
+  font-size: 0.8rem;
+  background-color: #eee;
+  border-radius: 8px;
+  padding: 8px 12px;
+}
+
+.dragline {
+  height: 2px;
+  margin-top: -1px;
+  background-color: #0366d6;
+}
+
+.dragline::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: -3px;
+  height: 4px;
+  width: 4px;
+  background: #fff;
+  border: 2px solid #0366d6;
+  border-radius: 99px;
+}
+
+.outeritem {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.outeritem button:not([role="treeitem"]) {
+  padding: 2px 4px;
+  height: 80%;
+}
+
+.actionbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.foreign-dragsource,
+.foreign-dropzone,
+.searchbox,
+.actionbtn {
+  height: 30px;
+  background-color: transparent;
+  border: 1px solid #808080;
+  padding: 0 8px;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  color: #393939;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+}
+
+.foreign-dragsource {
+  cursor: grab;
+}
+.foreign-dragsource:active {
+  cursor: grabbing;
+}
+.foreign-dragsource:before {
+  content: url(data:image/svg+xml;base64,PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGhlaWdodD0iMThweCIgd2lkdGg9IjE4cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkgMTNhMSAxIDAgMSAxIDAtMiAxIDEgMCAwIDEgMCAyWm03LTFhMSAxIDAgMSAxLTIgMCAxIDEgMCAwIDEgMiAwWk05IDhhMSAxIDAgMSAxIDAtMiAxIDEgMCAwIDEgMCAyWm03LTFhMSAxIDAgMSAxLTIgMCAxIDEgMCAwIDEgMiAwWk05IDE4YTEgMSAwIDEgMSAwLTIgMSAxIDAgMCAxIDAgMlptNiAwYTEgMSAwIDEgMSAwLTIgMSAxIDAgMCAxIDAgMloiPjwvcGF0aD48L3N2Zz4=);
+  width: 10px;
+  display: inline-block;
+  z-index: 1;
+  margin-right: 8px;
+  margin-top: 2px;
+}
+.foreign-dragsource:hover {
+  background-color: #f6f6f6;
+}
+
+.foreign-dropzone {
+  border: 1px dashed #808080;
+  padding: 0 26px;
+}
+
+.searchbox {
+  padding: 8px 16px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+  gap: 4px;
+  height: unset;
+}
+
+.searchbox:before {
+  content: "Navigate between search results with ArrowUp and ArrowDown. Press Escape to close search.";
+  display: block;
+  width: 100%;
+}
+.searchbox input {
+  flex-grow: 1;
+  padding: 4px;
+}
+
+.actionbtn:hover {
+  cursor: pointer;
+  background-color: #f6f6f6;
+}
+
+.visible-assistive-text {
+  position: unset !important;
+  width: unset !important;
+  height: 60px !important;
+  margin: unset !important;
+  overflow: auto !important;
+  clip: unset !important;
+
+  display: block;
+  margin-bottom: 1rem !important;
+  background-color: #e1f1f8;
+}

package.json

@@ -68,6 +68,8 @@
     "@gcforms/types": "workspace:*",
     "@hcaptcha/react-hcaptcha": "^1.12.0",
     "@hcaptcha/types": "^1.0.4",
+    "@headless-tree/core": "^1.4.0",
+    "@headless-tree/react": "^1.4.0",
     "@headlessui/react": "^2.2.0",
     "@neshca/cache-handler": "^1.2.1",
     "@next/mdx": "15.5.0",