import { ArgTypes, Canvas, Meta } from '@storybook/addon-docs/blocks';
import * as TreeViewStories from './Treeview.stories';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Meta isTemplate />

# TreeView

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/TreeView)
&nbsp;|&nbsp;
[Usage guidelines](https://www.carbondesignsystem.com/components/tree-view/usage)
&nbsp;|&nbsp;
[Accessibility](https://www.carbondesignsystem.com/components/tree-view/accessibility)

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
- [With Controlled Expansion](#with-controlled-expansion)
- [With Icons](#with-icons)
- [With Links](#with-links)
- [Component API](#component-api)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

TreeView is a component that allows users to navigate through a hierarchy of
items. It is used to display nested lists of items that can be expanded or
collapsed to show and hide additional items.

<Canvas
  of={TreeViewStories.Default}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () =>
        stackblitzPrefillConfig(
          TreeViewStories.Default,
          "import { Document, Folder } from '@carbon/icons-react';"
        ),
    },
  ]}
/>

## With Controlled Expansion

The `expanded` prop can be used to control the expansion state of the TreeView.
The `isExpanded` prop can be used to determine if an individual tree node is
expanded or collapsed.

<Canvas
  of={TreeViewStories.WithControlledExpansion}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () =>
        stackblitzPrefillConfig(
          TreeViewStories.WithControlledExpansion,
          "import { Document, Folder } from '@carbon/icons-react';"
        ),
    },
  ]}
/>

## With Icons

The `renderIcon` prop can be used to customize the icons of each node in the
TreeView.

<Canvas
  of={TreeViewStories.WithIcons}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () =>
        stackblitzPrefillConfig(
          TreeViewStories.WithIcons,
          "import { Document, Folder } from '@carbon/icons-react';"
        ),
    },
  ]}
/>

## With Links

The `href` prop can be used with click handling on each node of the TreeView.

<Canvas
  of={TreeViewStories.WithLinks}
/>

## Component API

<ArgTypes />

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/TreeView/TreeView.mdx).
