export const title = "Tree view components"
export const description = "Powerful and customizable React tree view components built for modern applications. These tree views are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/tree-view/tree-view.story.tsx";

<PreviewAndCode title="Tree view example" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] items-center p-8 ring-1 ring-inset ring-secondary bg-primary">
        <div className="min-w-xs">
            <Demos.AdvancedSm />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tree-view/AdvancedSmDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this tree view component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add tree-view
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/tree-view" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the tree view components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Tree view examples

Below are examples and variations of this tree view component:

### Simple sm {{ tocOnly:true }}

<PreviewAndCode title="Simple sm" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] items-center p-8 ring-1 ring-inset ring-secondary bg-primary">
        <div className="min-w-xs">
            <Demos.SimpleSm />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tree-view/SimpleSmDemo" />
    </TabPanel>
</PreviewAndCode>

### Simple md {{ tocOnly:true }}

<PreviewAndCode title="Simple md" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] items-center p-8 ring-1 ring-inset ring-secondary bg-primary">
        <div className="min-w-xs">
            <Demos.SimpleMd />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tree-view/SimpleMdDemo" />
    </TabPanel>
</PreviewAndCode>

### Advanced

The advanced tree view supports multi-selection, drag-and-drop reordering, connector lines, and custom icons per item.

<PreviewAndCode title="Advanced sm" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] items-center p-8 ring-1 ring-inset ring-secondary bg-primary">
        <div className="min-w-xs">
            <Demos.AdvancedSm />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tree-view/AdvancedSmDemo" />
    </TabPanel>
</PreviewAndCode>

### Advanced md {{ tocOnly:true }}

<PreviewAndCode title="Advanced md" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] items-center p-8 ring-1 ring-inset ring-secondary bg-primary">
        <div className="min-w-xs">
            <Demos.AdvancedMd />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tree-view/AdvancedMdDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "What sub-components make up a tree view?",
            answer: "A tree view consists of `TreeView` (root container), `TreeView.Item` (a tree node that can contain children), and `TreeView.ItemContent` (the visible label and icon content of a node).",
        },
        {
            question: "How do I enable multi-selection?",
            answer: "Pass `selectionMode=\"multiple\"` to the `TreeView` component. Selected keys can be controlled with `selectedKeys` and `onSelectionChange`, or uncontrolled with `defaultSelectedKeys`.",
        },
        {
            question: "How do I enable drag-and-drop reordering?",
            answer: "Pass the `draggable` prop to `TreeView` and use the `onReorder` and `onMove` callbacks with React Aria's `useTreeData` hook to handle item repositioning.",
        },
        {
            question: "What sizes are available?",
            answer: "The tree view supports `sm` and `md` sizes via the `size` prop. The `sm` size is more compact, while `md` provides more spacing for readability.",
        },
    ]}
/>