refactor: update tree components for improved styling and functionality

Author: toan-kunaico

docs/src/routes/components/tree/examples/hero.tsx

@@ -46,7 +46,7 @@ export default component$(() => {
   ];
 
   return (
-    <Tree.Root class="tree-root">
+    <Tree.Root class="ml-4 p-4 min-w-60 border border-[#0f1317]">
       {treeData.map((item) => renderTreeItem(item))}
     </Tree.Root>
   );
@@ -56,11 +56,11 @@ function renderTreeItem(item: TreeItemType) {
   if (item.children && item.children.length > 0) {
     return (
       <Tree.Item key={item.id}>
-        <Tree.ItemTrigger class="tree-item-trigger">
+        <Tree.ItemTrigger class="flex gap-2 items-center cursor-pointer w-full">
           <Tree.ItemLabel>{item.label}</Tree.ItemLabel>
-          <LuChevronRight />
+          <LuChevronRight class="not-ui-open:rotate-none ui-open:rotate-90 transition-transform duration-200" />
         </Tree.ItemTrigger>
-        <Tree.ItemContent class="tree-item-content">
+        <Tree.ItemContent class="pl-4">
           {item.children.map((child) => renderTreeItem(child))}
         </Tree.ItemContent>
       </Tree.Item>

libs/components/src/switch/switch-root.tsx

@@ -92,6 +92,7 @@ export const SwitchRoot = component$<PublicRootProps>((props) => {
       aria-describedby={descriptionId}
       aria-errormessage={hasErrorMessageSig.value ? errorId : undefined}
       data-qds-switch-root
+      data-qds-scope
       // Indicates whether the switch is currently checked
       data-checked={checkedSig.value}
       // Indicates whether the switch is currently disabled

libs/components/src/tree/tree-item-content.tsx

@@ -1,4 +1,4 @@
-import { type PropsOf, Slot, component$ } from "@qwik.dev/core";
+import { component$, type PropsOf, Slot } from "@qwik.dev/core";
 import { CollapsibleContent } from "../collapsible/collapsible-content";
 
 export const TreeItemContent = component$((props: PropsOf<typeof CollapsibleContent>) => {

libs/components/src/tree/tree-item-indicator.tsx

@@ -1,4 +1,4 @@
-import { type PropsOf, Slot, component$ } from "@qwik.dev/core";
+import { component$, type PropsOf, Slot } from "@qwik.dev/core";
 import { Render } from "../render/render";
 
 export const TreeItemIndicator = component$((props: PropsOf<"span">) => {

libs/components/src/tree/tree-item-label.tsx

@@ -1,4 +1,4 @@
-import { type PropsOf, Slot, component$ } from "@qwik.dev/core";
+import { component$, type PropsOf, Slot } from "@qwik.dev/core";
 import { Render } from "../render/render";
 
 export const TreeItemLabel = component$((props: PropsOf<"span">) => {

libs/components/src/tree/tree-item-trigger.tsx

@@ -1,8 +1,8 @@
 import {
   type Component,
+  component$,
   type PropsOf,
   Slot,
-  component$,
   useContext
 } from "@qwik.dev/core";
 import { CollapsibleTrigger } from "../collapsible/collapsible-trigger";

libs/components/src/tree/tree-item.tsx

@@ -1,12 +1,12 @@
-import { useBoundSignal } from "@qds.dev/utils";
+import { type BindableProps, useBindings } from "@qds.dev/utils";
 import {
   $,
-  type PropsOf,
-  type Signal,
-  Slot,
   component$,
   createContextId,
   isServer,
+  type PropsOf,
+  type Signal,
+  Slot,
   sync$,
   useContext,
   useContextProvider,
@@ -18,34 +18,44 @@ import { CollapsibleRoot } from "../collapsible/collapsible-root";
 import { TreeRootContextId } from "./tree-root";
 import { useTree } from "./use-tree";
 
-type TreeItemContext = {
+export const itemContextId = createContextId<TreeItemContext>("tree-item");
+
+export interface TreeItemContext {
   id: string;
   level: number;
-  isOpenSig: Signal<boolean>;
-};
-
-export const itemContextId = createContextId<TreeItemContext>("tree-item");
+  isOpen: Signal<boolean>;
+  isDisabled: Signal<boolean>;
+}
 
-interface TreeItemProps extends PropsOf<typeof CollapsibleRoot> {
+export type TreeItemProps = Omit<PropsOf<typeof CollapsibleRoot>, "open" | "disabled"> & {
   _index?: number;
   groupTrigger?: boolean;
   groupId?: string;
-}
+} & BindableProps<TreeItemBinds>;
+
+type TreeItemBinds = {
+  open: boolean;
+  disabled: boolean;
+};
 
 export const TreeItem = component$((props: TreeItemProps) => {
   const context = useContext(TreeRootContextId);
   const parentContext = useContext(itemContextId, null);
   const id = useId();
   const itemRef = useSignal<HTMLElement>();
-  const isOpenSig = useBoundSignal(props["bind:open"], false);
+  const { openSig: isOpen, disabledSig: isDisabled } = useBindings<TreeItemBinds>(props, {
+    open: false,
+    disabled: false
+  });
   const { getCurrentLevel } = useTree();
   const isHighlightedSig = useSignal(false);
   const level = getCurrentLevel(parentContext?.level);
 
   const itemContext: TreeItemContext = {
     id,
     level,
-    isOpenSig
+    isOpen,
+    isDisabled
   };
 
   useContextProvider(itemContextId, itemContext);
@@ -92,14 +102,14 @@ export const TreeItem = component$((props: TreeItemProps) => {
       case "ArrowRight": {
         const isCollapsed = currentItem.hasAttribute("data-closed");
         if (isCollapsed) {
-          isOpenSig.value = true;
+          isOpen.value = true;
         }
         return;
       }
       case "ArrowLeft": {
         const isExpanded = !currentItem.hasAttribute("data-closed");
         if (isExpanded) {
-          isOpenSig.value = false;
+          isOpen.value = false;
         }
         return;
       }
@@ -136,7 +146,8 @@ export const TreeItem = component$((props: TreeItemProps) => {
       id={id}
       ref={itemRef}
       role="row"
-      bind:open={isOpenSig}
+      open={isOpen.value}
+      disabled={isDisabled.value}
       tabIndex={
         context.currentFocusEl.value === itemRef.value ||
         context.currentFocusEl.value === null

libs/components/src/tree/tree-root.tsx

@@ -1,11 +1,11 @@
 // no-bound-signal
 
 import {
+  component$,
+  createContextId,
   type PropsOf,
   type Signal,
   Slot,
-  component$,
-  createContextId,
   useContextProvider,
   useSignal
 } from "@qwik.dev/core";