@boxcustodia/library 2.0.0-alpha.13 → 2.0.0-alpha.15

package/src/components/tree/tree.stories.tsx

@@ -1,468 +1,424 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { ComponentType } from "react";
-import { Collection } from "react-aria-components";
-import { createToastManager, ToastProvider } from "../toast";
+import {
+  createOnDropHandler,
+  dragAndDropFeature,
+  hotkeysCoreFeature,
+  type ItemInstance,
+  keyboardDragAndDropFeature,
+  searchFeature,
+  selectionFeature,
+  syncDataLoaderFeature,
+} from "@headless-tree/core";
+import { useTree } from "@headless-tree/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  FileTextIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  MoreHorizontalIcon,
+} from "lucide-react";
+import { type ComponentType, useState } from "react";
 
-const toastManager = createToastManager();
+import { Input } from "../input/input";
+import { Menu } from "../menu/menu";
+import { TreeDragLine, TreeItem, TreeItemLabel, TreeRoot } from "./tree";
 
-import { Tree, TreeNode } from ".";
-import {
-  TreeItem,
-  TreeItemContent,
-  TreeItemIndicator,
-  TreeItemLabel,
-  TreeRoot,
-} from "./tree-primitives";
+interface Item {
+  name: string;
+  children?: string[];
+}
 
-const files: TreeNode[] = [
-  {
-    id: "1",
-    title: "Work",
-    children: [
-      {
-        id: "1-1",
-        title: "Reports",
-        children: [
-          {
-            id: "1-1-1",
-            title: "2023",
-            children: [
-              {
-                id: "1-1-1-1",
-                title: "Q1 Report",
-                children: [
-                  { id: "1-1-1-1-1", title: "Summary", children: [] },
-                  { id: "1-1-1-1-2", title: "Details", children: [] },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-      {
-        id: "1-2",
-        title: "Presentations",
-        children: [
-          {
-            id: "1-2-1",
-            title: "2023 Projects",
-            children: [
-              {
-                id: "1-2-1-1",
-                title: "Project A",
-                children: [
-                  { id: "1-2-1-1-1", title: "Draft", children: [] },
-                  { id: "1-2-1-1-2", title: "Final", children: [] },
-                ],
-              },
-              {
-                id: "1-2-1-2",
-                title: "Project B",
-                children: [
-                  { id: "1-2-1-2-1", title: "Research", children: [] },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "2",
-    title: "Personal",
-    children: [
-      {
-        id: "2-1",
-        title: "Hobbies",
-        children: [
-          {
-            id: "2-1-1",
-            title: "Photography",
-            children: [
-              { id: "2-1-1-1", title: "Travel", children: [] },
-              { id: "2-1-1-2", title: "Portraits", children: [] },
-            ],
-          },
-          {
-            id: "2-1-2",
-            title: "Cooking",
-            children: [{ id: "2-1-2-1", title: "Recipes", children: [] }],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "3",
-    title: "Projects",
-    children: [
-      {
-        id: "3-1",
-        title: "Web Development",
-        children: [
-          {
-            id: "3-1-1",
-            title: "Portfolio",
-            children: [
-              { id: "3-1-1-1", title: "Images", children: [] },
-              { id: "3-1-1-2", title: "CSS", children: [] },
-            ],
-          },
-          { id: "3-1-2", title: "Landing Page", children: [] },
-        ],
-      },
-      {
-        id: "3-2",
-        title: "Mobile Apps",
-        children: [{ id: "3-2-1", title: "Weather App", children: [] }],
-      },
-    ],
-  },
-  {
-    id: "4",
-    title: "Finance",
-    children: [
-      {
-        id: "4-1",
-        title: "Budget",
-        children: [
-          {
-            id: "4-1-1",
-            title: "2023",
-            children: [
-              { id: "4-1-1-1", title: "January", children: [] },
-              { id: "4-1-1-2", title: "February", children: [] },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "5",
-    title: "Health",
-    children: [
-      {
-        id: "5-1",
-        title: "Fitness",
-        children: [
-          { id: "5-1-1", title: "Workouts", children: [] },
-          { id: "5-1-2", title: "Nutrition", children: [] },
-        ],
-      },
-      { id: "5-2", title: "Wellness", children: [] },
-    ],
+const items: Record<string, Item> = {
+  root: { name: "root", children: ["docs", "src", "tests"] },
+  docs: { name: "docs", children: ["readme", "api"] },
+  readme: { name: "README.md" },
+  api: { name: "API.md" },
+  src: { name: "src", children: ["components", "lib"] },
+  components: { name: "components", children: ["button", "tree"] },
+  button: { name: "button.tsx" },
+  tree: { name: "tree.tsx" },
+  lib: { name: "lib", children: ["utils"] },
+  utils: { name: "utils.ts" },
+  tests: { name: "tests", children: ["spec"] },
+  spec: { name: "tree.test.tsx" },
+};
+
+const baseConfig = {
+  rootItemId: "root",
+  getItemName: (item: ItemInstance<Item>) => item.getItemData().name,
+  isItemFolder: (item: ItemInstance<Item>) =>
+    (item.getItemData().children?.length ?? 0) > 0,
+  dataLoader: {
+    getItem: (itemId: string) => items[itemId],
+    getChildren: (itemId: string) => items[itemId]?.children ?? [],
   },
-];
+  initialState: { expandedItems: ["src", "components", "docs"] },
+};
 
 /**
- * El componente Tree proporciona una vista jerárquica de datos en forma de árbol.
- * Está construido sobre [@react-aria](https://react-spectrum.adobe.com/react-aria/Tree.html#tree)
- * y soporta selección, expansión, navegación por teclado y más.
+ * Accessible hierarchical tree built on top of
+ * [@headless-tree](https://headless-tree.lukasbach.com/). The consumer creates
+ * a tree instance with `useTree(config)`, registers the features they need,
+ * and iterates `tree.getItems()` to render rows.
  *
- * ## Nodo
- * Los nodos del árbol deben tener las siguientes propiedades:
+ * Setup:
  *
  * ```tsx
- * interface TreeNode {
- *   id: string | number;
- *   title: string;
- *   children: TreeNode[];
- * }
+ * const tree = useTree<Item>({
+ *   rootItemId: "root",
+ *   getItemName: (item) => item.getItemData().name,
+ *   isItemFolder: (item) => (item.getItemData().children?.length ?? 0) > 0,
+ *   dataLoader: {
+ *     getItem: (itemId) => items[itemId],
+ *     getChildren: (itemId) => items[itemId]?.children ?? [],
+ *   },
+ *   features: [syncDataLoaderFeature, selectionFeature, hotkeysCoreFeature],
+ * });
+ *
+ * <TreeRoot tree={tree}>
+ *   {tree.getItems().map((item) => (
+ *     <TreeItem
+ *       key={item.getId()}
+ *       item={item}
+ *       leafIcon={<FileIcon />}
+ *       parentIcon={(isExpanded) =>
+ *         isExpanded ? <FolderOpenIcon /> : <FolderIcon />
+ *       }
+ *     />
+ *   ))}
+ * </TreeRoot>
  * ```
+ *
+ * Features (from `@headless-tree/core` — register only what you use):
+ * - `syncDataLoaderFeature` — sync data via `dataLoader.getItem` /
+ *   `dataLoader.getChildren`.
+ * - `asyncDataLoaderFeature` — returns Promises; children load on expand.
+ * - `selectionFeature` — single/multi selection, exposes `item.isSelected()`.
+ * - `hotkeysCoreFeature` — Arrow keys to navigate, Enter to activate, Space to
+ *   select, Right/Left to expand/collapse.
+ * - `dragAndDropFeature` — drag/drop with `onDrop`. Pair with `TreeDragLine`.
+ * - `keyboardDragAndDropFeature` — keyboard-driven reorder.
+ * - `searchFeature` — drive with `tree.setSearch(value)`; matches expose
+ *   `item.isMatchingSearch()`.
+ * - `expandAllFeature` — `tree.expandAll()` / `tree.collapseAll()`.
+ * - `propMemoizationFeature` — memoizes `getProps()` (large trees).
+ *
+ * Key behaviors:
+ * - The consumer owns the tree instance, the data shape (`T`), and the
+ *   iteration. There is no `items` composite prop — that pattern doesn't fit
+ *   the breadth of real tree use cases.
+ * - `TreeItem` accepts `leafIcon` / `parentIcon` to render an icon before the
+ *   item's name without writing a custom label per row. `parentIcon` defaults
+ *   to a rotating chevron — pass your own `ReactNode` (use CSS via
+ *   `in-data-[expanded=true]:…` for state-driven styles) or a function
+ *   `(isExpanded) => ReactNode` to swap elements based on state. Pass
+ *   `parentIcon={null}` to opt out of the default. `leafIcon` defaults to no
+ *   icon. When `children` are provided, the icon props are ignored — children
+ *   take over the entire row.
+ * - `TreeItem` is the `<button>` row. It handles focus, selection, indent
+ *   (via the `--tree-indent` CSS variable on `TreeRoot`, default `20px`) and
+ *   exposes state through data attributes: `data-folder`, `data-expanded`,
+ *   `data-selected`, `data-drag-target`, `data-search-match`, `data-focused`.
+ * - `TreeItemLabel` is the visual zone (background, hover, selected,
+ *   search-match). It defaults to `item.getItemName()` when no children are
+ *   provided. It renders no toggle icon on its own — the icon comes from
+ *   `TreeItem`'s `leafIcon` / `parentIcon`, or from custom children.
+ * - `TreeDragLine` is optional; only render it when `dragAndDropFeature` is
+ *   registered. It positions itself absolutely inside `TreeRoot`.
+ * - State binding (`expandedItems`, `selectedItems`, etc.) is controlled via
+ *   `state` + `setState` on the `useTree` config, or left to internal state
+ *   with `initialState`.
+ *
+ * Reference: [headless-tree docs](https://headless-tree.lukasbach.com/docs/)
  */
-const meta: Meta<typeof Tree> = {
-  title: "Data display/Tree",
-  component: Tree,
+const meta: Meta<typeof TreeRoot> = {
+  title: "Components/Tree",
+  component: TreeRoot,
+  parameters: { layout: "centered" },
   subcomponents: {
     TreeRoot: TreeRoot as ComponentType<unknown>,
     TreeItem: TreeItem as ComponentType<unknown>,
-    TreeItemContent: TreeItemContent as ComponentType<unknown>,
-    TreeItemIndicator: TreeItemIndicator as ComponentType<unknown>,
     TreeItemLabel: TreeItemLabel as ComponentType<unknown>,
-    Collection: Collection as ComponentType<unknown>,
-  },
-  args: {
-    items: files,
-    selectionMode: "single",
+    TreeDragLine: TreeDragLine as ComponentType<unknown>,
   },
   argTypes: {
-    selectedKeys: {
-      description: "Las claves actualmente seleccionadas en la colección",
-      control: "object",
-      table: {
-        type: { summary: "'all' | Iterable<Key>" },
-        defaultValue: { summary: "—" },
-      },
-    },
-    defaultSelectedKeys: {
-      description: "Las claves inicialmente seleccionadas en la colección",
-      control: "object",
-      table: {
-        type: { summary: "'all' | Iterable<Key>" },
-        defaultValue: { summary: "—" },
-      },
-    },
-    expandedKeys: {
-      description: "Las claves actualmente expandidas en la colección",
-      control: "object",
-      table: {
-        type: { summary: "Iterable<Key>" },
-        defaultValue: { summary: "—" },
-      },
-    },
-    defaultExpandedKeys: {
-      description: "Las claves inicialmente expandidas en la colección",
-      control: "object",
-      table: {
-        type: { summary: "Iterable<Key>" },
-        defaultValue: { summary: "—" },
-      },
-    },
-    selectionMode: {
-      description: "El tipo de selección que está permitida en el árbol",
-      control: "select",
-      options: ["none", "single", "multiple"],
-      table: {
-        type: { summary: "'none' | 'single' | 'multiple'" },
-        defaultValue: { summary: "'none'" },
-      },
-    },
-    disabledKeys: {
-      description: "Las claves de los elementos que están deshabilitados",
-      control: "object",
-      table: {
-        type: { summary: "Iterable<Key>" },
-        defaultValue: { summary: "—" },
-      },
-    },
-    disallowEmptySelection: {
-      description:
-        "Si se debe permitir que no haya ningún elemento seleccionado",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-      },
-    },
-    onSelectionChange: {
-      description: "Manejador llamado cuando cambia la selección",
-      table: {
-        type: { summary: "(keys: 'all' | Iterable<Key>) => void" },
-        defaultValue: { summary: "—" },
-      },
-    },
-    onExpandedChange: {
-      description: "Manejador llamado cuando cambian los elementos expandidos",
-      table: {
-        type: { summary: "(keys: Iterable<Key>) => void" },
-        defaultValue: { summary: "—" },
-      },
-    },
-    onAction: {
-      description:
-        "Manejador llamado cuando un usuario realiza una acción en un elemento. El evento exacto depende del prop selectionBehavior y la modalidad de interacción",
-      table: {
-        type: { summary: "(key: Key) => void" },
-        defaultValue: { summary: "—" },
-      },
-    },
-    onScroll: {
-      description: "Manejador llamado cuando un usuario hace scroll",
-      table: {
-        type: { summary: "(e: UIEvent<Element>) => void" },
-        defaultValue: { summary: "—" },
-      },
-    },
+    children: { control: false },
+    tree: { control: false },
+    render: { control: false },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof Tree>;
+type Story = StoryObj<typeof TreeRoot>;
 
-/**
- * Ejemplo básico del árbol con selección simple habilitada.
- * Los usuarios pueden expandir/colapsar nodos y seleccionar un elemento a la vez.
- */
-export const Default: Story = {};
+export const Default: Story = {
+  render: () => {
+    const tree = useTree<Item>({
+      ...baseConfig,
+      features: [syncDataLoaderFeature, selectionFeature, hotkeysCoreFeature],
+    });
 
-/**
- * Configuración que permite seleccionar un solo elemento a la vez.
- * Útil cuando necesitas que el usuario elija una única opción del árbol.
- */
-export const SingleSelection: Story = {
-  args: {
-    selectionMode: "single",
+    return (
+      <TreeRoot tree={tree} className="w-72">
+        {tree.getItems().map((item) => (
+          <TreeItem key={item.getId()} item={item} />
+        ))}
+      </TreeRoot>
+    );
   },
 };
 
 /**
- * Permite seleccionar múltiples elementos simultáneamente.
- * Los usuarios pueden usar `click` para selección individual
- * o `shift + click` para selección en rango.
+ * Most real trees show distinct icons for folders and files. The function form
+ * of `parentIcon` swaps between open and closed folder icons based on the
+ * current expanded state.
  */
-export const MultipleSelection: Story = {
-  args: {
-    selectionMode: "multiple",
-  },
-};
+export const WithIcons: Story = {
+  render: () => {
+    const tree = useTree<Item>({
+      ...baseConfig,
+      features: [syncDataLoaderFeature, selectionFeature, hotkeysCoreFeature],
+    });
 
-/**
- * Ejemplo de árbol con nodos deshabilitados completamente.
- * Los elementos deshabilitados no pueden ser seleccionados ni expandidos.
- *
- * `disabledBehavior="all"` - Deshabilita todas las interacciones
- *
- * `disabledKeys` - Array de IDs de elementos a deshabilitar
- */
-export const Disabled: Story = {
-  args: {
-    disabledBehavior: "all",
-    disabledKeys: ["1", "2", "3"],
+    return (
+      <TreeRoot tree={tree} className="w-72">
+        {tree.getItems().map((item) => (
+          <TreeItem
+            key={item.getId()}
+            item={item}
+            leafIcon={<FileTextIcon className="size-4 text-muted-foreground" />}
+            parentIcon={(isExpanded) =>
+              isExpanded ? (
+                <FolderOpenIcon className="size-4 text-muted-foreground" />
+              ) : (
+                <FolderIcon className="size-4 text-muted-foreground" />
+              )
+            }
+          />
+        ))}
+      </TreeRoot>
+    );
   },
 };
 
 /**
- * Ejemplo donde solo la selección está deshabilitada.
- * Los elementos pueden expandirse pero no pueden ser seleccionados.
- *
- * `disabledBehavior="selection"` - Solo deshabilita la selección
- *
- * `disabledKeys` - Array de IDs de elementos a deshabilitar
+ * `selectionFeature` is multi-select by default. Click to select a single
+ * item, `Shift`-click for a range, `Ctrl`/`Cmd`-click to toggle. Read the
+ * current selection via `tree.getSelectedItems()`.
  */
-export const DisabledSelection: Story = {
-  args: {
-    disabledBehavior: "selection",
-    disabledKeys: ["1", "2", "3"],
-  },
-};
+export const MultipleSelection: Story = {
+  render: () => {
+    const tree = useTree<Item>({
+      ...baseConfig,
+      features: [syncDataLoaderFeature, selectionFeature, hotkeysCoreFeature],
+    });
 
-/**
- * Árbol con nodos inicialmente expandidos.
- * Útil para mostrar cierta estructura desde el inicio.
- *
- * `defaultExpandedKeys` - Array de IDs de elementos expandidos por defecto
- */
-export const DefaultExpanded: Story = {
-  args: {
-    defaultExpandedKeys: ["1", "1-1", "1-1-1", "1-1-1-1"],
+    const selected = tree.getSelectedItems();
+
+    return (
+      <div className="flex w-72 flex-col gap-3">
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-muted-foreground">
+            {selected.length} selected
+          </span>
+          {selected.length > 0 && (
+            <button
+              type="button"
+              onClick={() => tree.setSelectedItems([])}
+              className="text-muted-foreground underline-offset-2 hover:underline"
+            >
+              Clear
+            </button>
+          )}
+        </div>
+        <TreeRoot tree={tree}>
+          {tree.getItems().map((item) => (
+            <TreeItem
+              key={item.getId()}
+              item={item}
+              leafIcon={
+                <FileTextIcon className="size-4 text-muted-foreground" />
+              }
+              parentIcon={
+                <FolderIcon className="size-4 text-muted-foreground" />
+              }
+            />
+          ))}
+        </TreeRoot>
+      </div>
+    );
   },
 };
 
 /**
- * Ejemplo de árbol con expansión controlada.
- * El estado de expansión es manejado externamente.
+ * Drop the `leafIcon` / `parentIcon` shorthand and pass `children` directly to
+ * place action triggers **outside** `TreeItemLabel`. Wrap the trigger in a
+ * `stopPropagation` container so clicks on the menu don't activate the row.
  *
- * `expandedKeys` - Control explícito de los elementos expandidos
+ * Note: `TreeItem` renders as `<button>` (headless-tree requires it for
+ * focus/keyboard), so the nested `Menu` trigger must be a non-button element
+ * (e.g. a `<span role="button">`) to keep the HTML valid.
  */
-export const ControlledExpanded: Story = {
-  args: {
-    expandedKeys: ["1", "7"],
+export const WithActions: Story = {
+  render: () => {
+    const tree = useTree<Item>({
+      ...baseConfig,
+      features: [syncDataLoaderFeature, selectionFeature, hotkeysCoreFeature],
+    });
+
+    return (
+      <TreeRoot tree={tree} className="w-80">
+        {tree.getItems().map((item) => (
+          <TreeItem
+            key={item.getId()}
+            item={item}
+            className="group/row flex items-center"
+          >
+            <TreeItemLabel className="flex-1">
+              {item.isFolder() ? (
+                <FolderIcon className="size-4 text-muted-foreground" />
+              ) : (
+                <FileTextIcon className="size-4 text-muted-foreground" />
+              )}
+              {item.getItemName()}
+            </TreeItemLabel>
+            <span
+              onClick={(event) => event.stopPropagation()}
+              onKeyDown={(event) => event.stopPropagation()}
+              className="opacity-0 transition-opacity group-hover/row:opacity-100"
+            >
+              <Menu
+                trigger={
+                  <span
+                    role="button"
+                    tabIndex={-1}
+                    className="flex rounded-sm p-1 hover:bg-accent"
+                  >
+                    <MoreHorizontalIcon className="size-4 text-muted-foreground" />
+                  </span>
+                }
+                items={[
+                  {
+                    type: "item",
+                    label: "Rename",
+                    onSelect: () => console.log("Rename", item.getItemName()),
+                  },
+                  {
+                    type: "item",
+                    label: "Delete",
+                    onSelect: () => console.log("Delete", item.getItemName()),
+                  },
+                ]}
+              />
+            </span>
+          </TreeItem>
+        ))}
+      </TreeRoot>
+    );
   },
 };
 
 /**
- * Árbol con selección inicial predeterminada.
+ * Drag-and-drop with reordering. `createOnDropHandler` (from
+ * `@headless-tree/core`) writes the reordered child ids back to your data
+ * source — set `children` on the parent item and the tree rebuilds itself.
+ * `TreeDragLine` renders the visual indicator and must live inside `TreeRoot`
+ * (it positions absolutely against the root).
+ *
+ * Features needed: `dragAndDropFeature` (mouse) and
+ * `keyboardDragAndDropFeature` (keyboard accessibility).
  *
- * `defaultSelectedKeys` - Array de IDs de elementos seleccionados por defecto
+ * Reference: [headless-tree drag-and-drop docs](https://headless-tree.lukasbach.com/dnd/overview)
  */
-export const DefaultSelected: Story = {
-  args: {
-    selectionMode: "single",
-    defaultSelectedKeys: ["4"],
-  },
-};
+export const DragAndDrop: Story = {
+  render: () => {
+    const [data] = useState(() => structuredClone(items));
 
-/**
- * Demostración de los eventos disponibles en el árbol.
- * Muestra notificaciones toast para:
- * - Cambios en expansión
- * - Cambios en selección
- * - Eventos de scroll
- */
-export const Events: Story = {
-  args: {
-    className: "h-96 overflow-y-auto border",
-    onExpandedChange: (keys: any) =>
-      toastManager.add({
-        variant: "success",
-        description: `Expanded: ${Array.from(keys)}`,
-      }),
-    onSelectionChange: (keys: any) =>
-      toastManager.add({
-        variant: "success",
-        description: `Selected: ${Array.from(keys)}`,
+    const tree = useTree<Item>({
+      ...baseConfig,
+      dataLoader: {
+        getItem: (itemId: string) => data[itemId],
+        getChildren: (itemId: string) => data[itemId]?.children ?? [],
+      },
+      canReorder: true,
+      onDrop: createOnDropHandler<Item>((parent, newChildrenIds) => {
+        const node = data[parent.getId()];
+        if (node) node.children = newChildrenIds;
       }),
-    onScroll: () =>
-      toastManager.add({ variant: "success", description: "Scroll" }),
+      features: [
+        syncDataLoaderFeature,
+        selectionFeature,
+        hotkeysCoreFeature,
+        dragAndDropFeature,
+        keyboardDragAndDropFeature,
+      ],
+    });
+
+    return (
+      <TreeRoot tree={tree} className="relative w-72">
+        {tree.getItems().map((item) => (
+          <TreeItem
+            key={item.getId()}
+            item={item}
+            leafIcon={<FileTextIcon className="size-4 text-muted-foreground" />}
+            parentIcon={(isExpanded) =>
+              isExpanded ? (
+                <FolderOpenIcon className="size-4 text-muted-foreground" />
+              ) : (
+                <FolderIcon className="size-4 text-muted-foreground" />
+              )
+            }
+          />
+        ))}
+        <TreeDragLine />
+      </TreeRoot>
+    );
   },
-  decorators: [
-    (Story: any) => (
-      <ToastProvider toastManager={toastManager}>
-        <Story />
-      </ToastProvider>
-    ),
-  ],
 };
 
 /**
- * ## Estructura con componentes primitivos
- * ```tsx
- * import { TreeRoot, TreeItem, Collection } from '../../components/tree'
- *
- * const Estructura = () => {
- *   return (
- *     <TreeRoot>
- *       <TreeItem>
- *         <TreeItemContent>
- *           <TreeItemIndicator />
- *           <TreeItemLabel>Item Label</TreeItemLabel>
- *         </TreeItemContent>
- *         <Collection>
- *           Child items
- *         </Collection>
- *       </TreeItem>
- *     </TreeRoot>
- *   )
- * }
- * ```
- *
- * Los componentes primitivos del Tree son:
- *
- * - `TreeRoot`: Contenedor principal que maneja la selección y expansión
- * - `TreeItem`: Representa cada elemento del árbol
- * - `TreeItemContent`: Contenedor del contenido del item
- * - `TreeItemIndicator`: Indicador de expansión (chevron)
- * - `TreeItemLabel`: Etiqueta del item
- * - `Collection`: Contenedor de items hijos que permite manejo con teclado
+ * Drive the search through `tree.setSearch(value)` and read the current
+ * query via `tree.getSearchValue()`. Matching rows expose
+ * `item.isMatchingSearch()` and receive `data-search-match="true"` on
+ * `TreeItem`, which `TreeItemLabel` styles automatically.
  */
-
-export const Primitive: Story = {
+export const Search: Story = {
   render: () => {
-    const renderItem = (item: TreeNode) => {
-      return (
-        <TreeItem key={item.id} id={item.id} textValue={item.title}>
-          <TreeItemContent>
-            {item.children.length > 0 && <TreeItemIndicator />}
-            <TreeItemLabel>{item.title}</TreeItemLabel>
-          </TreeItemContent>
-          {item.children.length > 0 && (
-            <Collection>
-              {item.children.map((child: any) => renderItem(child))}
-            </Collection>
-          )}
-        </TreeItem>
-      );
-    };
+    const tree = useTree<Item>({
+      ...baseConfig,
+      initialState: {
+        expandedItems: ["docs", "src", "components", "lib", "tests"],
+        search: "tree",
+      },
+      features: [
+        syncDataLoaderFeature,
+        selectionFeature,
+        hotkeysCoreFeature,
+        searchFeature,
+      ],
+    });
 
     return (
-      <TreeRoot
-        aria-label="Files"
-        selectionMode="multiple"
-        selectionBehavior="replace"
-      >
-        {files.map((item) => renderItem(item))}
-      </TreeRoot>
+      <div className="flex w-72 flex-col gap-3">
+        <Input
+          placeholder="Search…"
+          value={tree.getSearchValue()}
+          onChange={(value) => tree.setSearch(value || null)}
+        />
+        <TreeRoot tree={tree}>
+          {tree.getItems().map((item) => (
+            <TreeItem
+              key={item.getId()}
+              item={item}
+              leafIcon={
+                <FileTextIcon className="size-4 text-muted-foreground" />
+              }
+              parentIcon={
+                <FolderIcon className="size-4 text-muted-foreground" />
+              }
+            />
+          ))}
+        </TreeRoot>
+      </div>
     );
   },
 };