Tree

"use client";import { Tree, TreeItem } from "@/components/vip-ui/tree";export function TreeBasicDemo() {  return (    <Tree      aria-label="Project files"      selectionMode="single"      defaultExpandedKeys={["design"]}      defaultSelectedKeys={["wireframes"]}      className="w-full max-w-sm"    >      <TreeItem id="design" title="Design">        <TreeItem id="wireframes" title="Wireframes.fig" />        <TreeItem id="palette" title="Palette.pdf" />      </TreeItem>      <TreeItem id="notes" title="Notes.md" />    </Tree>  );}

"use client";import { FileMdIcon } from "@phosphor-icons/react";import { Tree, TreeItem } from "@/components/vip-ui/tree";export function TreeDemo() {  return (    <div className="w-full max-w-sm">      <Tree        aria-label="Project files"        selectionMode="single"        defaultExpandedKeys={["design"]}        defaultSelectedKeys={["readme"]}      >        <TreeItem id="design" title="Design">          <TreeItem id="wireframes" title="Wireframes.fig" />          <TreeItem id="palette" title="Palette.pdf" />        </TreeItem>        <TreeItem id="notes" title="Notes">          <TreeItem id="brief" title="Project brief.md" />          <TreeItem id="feedback" title="Feedback.md" />        </TreeItem>        <TreeItem          id="readme"          title="README.md"          icon={<FileMdIcon size={16} />}          content={            <span className="flex min-w-0 items-center justify-between gap-2">              <span className="truncate">README.md</span>              <span className="shrink-0 text-xs text-muted-foreground">                12 KB              </span>            </span>          }        />      </Tree>    </div>  );}

"use client";import { useState } from "react";import type { Selection } from "react-aria-components";import { Tree, TreeItem } from "@/components/vip-ui/tree";export function TreeSelectionDemo() {  const [selected, setSelected] = useState<Selection>(    new Set(["tokens", "buttons"]),  );  const count = selected === "all" ? "All" : selected.size;  return (    <div className="grid w-full max-w-sm gap-2">      <Tree        aria-label="Files to export"        selectionMode="multiple"        selectedKeys={selected}        onSelectionChange={setSelected}        defaultExpandedKeys={["foundations", "components"]}        disabledKeys={["legacy"]}      >        <TreeItem id="foundations" title="Foundations">          <TreeItem id="tokens" title="Tokens.json" />          <TreeItem id="type" title="Type scale.md" />        </TreeItem>        <TreeItem id="components" title="Components">          <TreeItem id="buttons" title="Buttons.tsx" />          <TreeItem id="fields" title="Fields.tsx" />          <TreeItem id="legacy" title="Legacy grid.tsx" />        </TreeItem>      </Tree>      <output        aria-live="polite"        className="text-sm text-muted-foreground tabular-nums"      >        {count} selected      </output>    </div>  );}

"use client";import { StarIcon } from "@phosphor-icons/react";import { Tree, TreeHeader, TreeItem, TreeSection } from "@/components/vip-ui/tree";export function TreeSectionsDemo() {  return (    <div className="w-full max-w-sm">      <Tree        aria-label="Workspace"        selectionMode="single"        defaultSelectedKeys={["roadmap"]}        defaultExpandedKeys={["marketing"]}      >        <TreeSection>          <TreeHeader>Favorites</TreeHeader>          <TreeItem            id="roadmap"            title="Roadmap"            icon={<StarIcon size={16} weight="fill" />}          />          <TreeItem            id="metrics"            title="Weekly metrics"            icon={<StarIcon size={16} weight="fill" />}          />        </TreeSection>        <TreeSection>          <TreeHeader>Projects</TreeHeader>          <TreeItem id="marketing" title="Marketing site">            <TreeItem id="home" title="Home page.md" />            <TreeItem id="pricing" title="Pricing.md" />          </TreeItem>          <TreeItem id="mobile" title="Mobile app">            <TreeItem id="onboarding" title="Onboarding.md" />          </TreeItem>        </TreeSection>      </Tree>    </div>  );}

"use client";import { Collection, useDragAndDrop, useTreeData } from "react-aria-components";import { Tree, TreeDropIndicator, TreeItem } from "@/components/vip-ui/tree";interface FileNode {  id: string;  name: string;  children?: FileNode[];}const initialItems: FileNode[] = [  {    id: "drafts",    name: "Drafts",    children: [      { id: "intro", name: "Introduction.md" },      { id: "setup", name: "Setup.md" },    ],  },  {    id: "published",    name: "Published",    children: [{ id: "faq", name: "FAQ.md" }],  },  { id: "changelog", name: "Changelog.md" },];export function TreeDragDemo() {  const tree = useTreeData({    initialItems,    getKey: (item) => item.id,    getChildren: (item) => item.children ?? [],  });  const { dragAndDropHooks } = useDragAndDrop({    getItems: (keys) =>      [...keys].map((key) => ({        "text/plain": tree.getItem(key)?.value.name ?? "",      })),    shouldAcceptItemDrop: (target) =>      Boolean(tree.getItem(target.key)?.value.children),    onMove(event) {      const { target, keys } = event;      if (target.dropPosition === "before") {        tree.moveBefore(target.key, keys);      } else if (target.dropPosition === "after") {        tree.moveAfter(target.key, keys);      } else {        const index = tree.getItem(target.key)?.children?.length ?? 0;        [...keys].forEach((key, offset) => {          tree.move(key, target.key, index + offset);        });      }    },    renderDropIndicator: (target) => <TreeDropIndicator target={target} />,  });  return (    <div className="w-full max-w-sm">      <Tree        aria-label="Documentation pages"        items={tree.items}        defaultExpandedKeys={["drafts", "published"]}        selectionMode="single"        dragAndDropHooks={dragAndDropHooks}      >        {function renderNode(node) {          return (            <TreeItem              id={node.key}              title={node.value.name}              hasChildItems={Boolean(node.value.children)}            >              <Collection items={node.children ?? []}>{renderNode}</Collection>            </TreeItem>          );        }}      </Tree>    </div>  );}