TreeView Component

The TreeView component is a React component that provides a hierarchical structure for displaying nested items.

Table of Contents

• Installation
• Usage
• Props
  • TreeView Props
  • TreeViewItem Props
• Example
• Contributing

Installation

To use the TreeView component in your project, install the required dependencies:

npm @bolttech/atoms-tree-view

Usage

The TreeView component organizes content into a collapsible tree structure. It works in conjunction with TreeViewItem to represent individual nodes in the tree.

Basic Example

import React, { useState } from 'react';
import { TreeView, TreeViewItem } from '@bolttech/atoms-tree-view';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

function App() {
  const [selected, setSelected] = useState('');

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <TreeView arrowPosition="right" showLines={false} selected={selected}>
        <TreeViewItem label="Item 1" icon="star">
          <TreeViewItem onClick={setSelected}>
            <p>Item 1.1</p>
          </TreeViewItem>
          <TreeViewItem onClick={setSelected}>
            <p>Item 1.2</p>
          </TreeViewItem>
          <TreeViewItem label="Item 1.3">
            <TreeViewItem onClick={setSelected}>
              <p>Item 1.3.1</p>
            </TreeViewItem>
            <TreeViewItem onClick={setSelected}>
              <p>Item 1.3.2</p>
            </TreeViewItem>
            <TreeViewItem onClick={setSelected}>
              <p>Item 1.3.3</p>
            </TreeViewItem>
          </TreeViewItem>
        </TreeViewItem>
        <TreeViewItem label="Item 2">
          <TreeViewItem onClick={setSelected}>
            <p>Item 2.1</p>
          </TreeViewItem>
          <TreeViewItem label="Item 2.2">
            <TreeViewItem label="Item 2.2.1">
              <TreeViewItem onClick={setSelected}>
                <p>Item 2.2.1.1</p>
              </TreeViewItem>
            </TreeViewItem>
          </TreeViewItem>
        </TreeViewItem>
      </TreeView>
    </BolttechThemeProvider>
  );
}

export default App;

Props

TreeView Props

| Prop | Type | Description | | --------------- | --------------------- | ------------------------------------------------------ | | id | string | The unique identifier for the tree view. | | dataTestId | string | The data-testid attribute for testing purposes. | | children | React.ReactNode | The nested TreeViewItem components. | | arrowPosition | 'left' or 'right' | Position of the expand/collapse arrows. | | showLines | boolean | Whether to show connector lines between tree levels. | | selected | string | The value of the currently selected tree item. | | icons | TreeIconType | Customizable icons for opened, closed, and leaf nodes. | | className | string | Custom CSS classes for styling the tree view. |

TreeIconType

| Prop | Type | Description | | -------- | -------- | ------------------------------------------ | | opened | string | Icon displayed for expanded nodes. | | closed | string | Icon displayed for collapsed nodes. | | leaf | string | Icon displayed for leaf (childless) nodes. |

TreeViewItem Props

| Prop | Type | Description | | ------------ | -------------------------- | -------------------------------------------------------- | | id | string | The unique identifier for the tree view item. | | dataTestId | string | The data-testid attribute for testing purposes. | | icon | string | Icon to display next to the label. | | label | string | The label text for the tree item. | | children | React.ReactNode | Nested TreeViewItem components representing sub-nodes. | | href | string | A hyperlink for the tree item. | | className | string | Custom CSS classes for styling the tree item. | | value | string | The unique value associated with the tree item. | | onClick | (value?: string) => void | Callback triggered when the item is clicked. |

Contributing

Contributions to the TreeView component are welcome! Please open an issue or submit a pull request on the project's repository if you find bugs or have feature suggestions.