npm package: @stoplight/ui-tree
Description: Stoplight UI tree component.
Author: Stoplight
Latest version: 0.0.44-0.0.44-alpha.2.0

# Sidebar Tree

List of files -> stoplight.lock -> react-sortable-tree

## List of files

```
/api-reference/admin-service.oas2.yaml
/api-reference/api-quickstart.md
/api-reference/domains-service.oas2.yaml
/api-reference/rate-limiting.md
/home.html
/platform/internal-only/user-management.md
/platform/internal-only/admin-portal.md
/platform/introduction.md
/platform/guides/...
/tests/admin-service.scenarios.yaml
/tests/domains-service.scenarios.yaml
```

## Designer

[] = Icon
H = Header
5 = HTML
M = Markdown
O = OAS
T = Scenario
E = Endpoint
D = Model
S = Security
F = Folder
G = Tag
L = Link
X = Hidden

* = Red Dot

```
[5] Home [H]
[F] Platform              [H]
  [M] Introduction
  [F] Guides
  [F] Internal Only       [X]
    [M] User Management   [-]
    [M] Admin Portal
[F] API Reference         [H]
  [M] API Quickstart
  [M] Rate Limiting
  [O] Domains Service
    [M] Getting Started
    [S] Security          [X]
    [E] Get Domain        [-]
    [E] Create Domain
    [G] Builds
      [M] Overview
      [E] Trigger Build
      [E] Get Build
    [F] Models
      [D] Domain          [-]
      [D] Build
  [O] Admin Service       [X]
  [L] Contact Us
[F] Tests
  [T] Admin Service       [X]
  [T] Domains Service     [X]
```

## stoplight.lock

```yaml
files:
- title: 'Home'
  path: './home.html'
  heading: true
- title: 'Platform'
  path: './platform'
  heading: true
- title: 'Introduction'
  path: './platform/introduction.md'
- title: 'Guides'
  path: './platform/guides'
- title: 'Internal Only'
  path: './platform/internal-only'
  status: 'hidden'
- title: 'User Managment'
  path: './platform/internal-only/user-management.md'
- title: 'Admin Portal'
  path: './platform/internal-only/admin-portal.md'
- title: 'API Reference'
  path: './api-reference'
  heading: true
- title: 'API Quickstart'
  path: './api-reference/api-quickstart.md'
- title: 'Rate Limiting'
  path: './api-reference/rate-limiting.md'
- title: 'Domains Service'
  path: './api-reference/domains-service.oas2.yaml'
- title: 'Getting Started'
  path: './api-reference/domains-service.oas2.yaml#/definitions'
- title: 'Security'
  path: './api-reference/domains-service.oas2.yaml#/securityDefinitions'
  status: 'hidden'
- title: 'Get Domain'
  path: './api-reference/domains-service.oas2.yaml#/paths/~domains~1{domain}/get'
- title: 'Create Domain'
  path: './api-reference/domains-service.oas2.yaml#/paths/~domains/post'
- title: 'Builds'
  path: './api-reference/domains-service.oas2.yaml#/tags/0/name'
- title: 'Overview'
  path: './api-reference/domains-service.oas2.yaml#/tags/0/description'
- title: 'Trigger Build'
  path: './api-reference/domains-service.oas2.yaml#/paths/~builds/post'
- title: 'Get Build'
  path: './api-reference/domains-service.oas2.yaml#/paths/~builds~1{build}/get'
- title: 'Models'
  path: './api-reference/domains-service.oas2.yaml#/definitions'
- title: 'Domain'
  path: './api-reference/domains-service.oas2.yaml#/definitions/domain'
- title: 'Build'
  path: './api-reference/domains-service.oas2.yaml#/definitions/build'
- title: 'Admin Service'
  path: './api-reference/admin-service.oas2.yaml'
  status: 'hidden'
- title: 'Contact Us'
  path: 'mailto:support@stoplight.io'
- title: 'Tests'
  path: './tests'
- title: 'Admin Service'
  path: './tests/admin-service.scenarios.yaml'
  status: 'hidden'
- title: 'Domains Service'
  path: './tests/domains-service.scenarios.yaml'
  status: 'hidden'
-
```

## react-sortable-tree

We can calulate icon and token different based on the view (read or design)

### icon

* if explicit then use
* else calculate from extension
* else if has children then use folder icon

### token

* if explicit then use
* else calculate from extension
* else if has children then use carrot icon

### Design Tree

```js
const treeData = [
  { title: 'Home', path: './home.html', token: faHeading },
  { title: 'Platform', path: './platform', token: faHeading, expanded: true, children: [
    { title: 'Introduction', path: './platform/introduction.md' },
    { title: 'Guides', path: './platform/guides', children: [...] },
    { title: 'Internal Only', path: './platform/internal-only', token: faEye, expanded: true, children: [
      { title: 'User Management', path: './platform/internal-only/user-management.md', token: faRedDot },
      { title: 'User Management', path: './platform/internal-only/admin-portal.md' }
    ]}
  ]},
  { title: 'API Reference', path: './api-reference', token: faHeading, expanded: true, children: [
    { title: 'API Quickstart', path: './api-reference/api-quickstart.md' },
    { title: 'Rate Limiting', path: './api-reference/rate-limiting.md' },
    { title: 'Domains Service', path: './api-reference/domains-service.oas2.yaml', expanded: true, children: [
      { title: 'Getting Started', path: './api-reference/domains-service.oas2.yaml#/definitions' },
      { title: 'Security', path: './api-reference/domains-service.oas2.yaml#/securityDefinitions', token: faEye },
      { title: 'Get Domain', path: './api-reference/domains-service.oas2.yaml#/paths/~domains~1{domain}/get' },
      { title: 'Create Domain', path: './api-reference/domains-service.oas2.yaml#/paths/~domains/post', token: faRedDot },
      { title: 'Builds', path: './api-reference/domains-service.oas2.yaml#/tags/0/name', expanded: true, children: [
        { title: 'Overview', path: './api-reference/domains-service.oas2.yaml#/tags/0/description' },
        { title: 'Trigger Build', path: './api-reference/domains-service.oas2.yaml#/paths/~builds/post' },
        { title: 'Get Build', path: './api-reference/domains-service.oas2.yaml#/paths/~builds~1{build}/get' },
      ]},
      { title: 'Models', path: './api-reference/domains-service.oas2.yaml#/definitions', expanded: true, children: [
        { title: 'Domain', path: './api-reference/domains-service.oas2.yaml#/definitions/domain', token: faRedDot },
        { title: 'Build', path: './api-reference/domains-service.oas2.yaml#/definitions/build' }
      ]}
      { title: 'Admin Service', path: './api-reference/admin-service.oas2.yaml', token: faEye, children: [...] }
      { title: 'Contact Us', path: 'mailto:support@stoplight.io' }
    ]},
  ]},
  { title: 'Tests', path: './tests', expanded: true, children: [
    { title: 'Admin Service', path: './tests/admin-service.scenarios.yaml', token: faEye, children: [...] },
    { title: 'Domains Service', path: './tests/domains-service.scenarios.yaml', token: faEye, children: [...] },
  ]},
]
```

## Read View for API Reference

```js
const treeData = [
  { title: 'API Quickstart', path: './api-reference/api-quickstart.md' },
  { title: 'Rate Limiting', path: './api-reference/rate-limiting.md' },
  {
    title: 'Domains Service',
    path: './api-reference/domains-service.oas2.yaml',
    expanded: true,
    children: [
      {
        title: 'Getting Started',
        path: './api-reference/domains-service.oas2.yaml#/definitions',
      },
      {
        title: 'Get Domain',
        path: './api-reference/domains-service.oas2.yaml#/paths/~domains~1{domain}/get',
      },
      {
        title: 'Create Domain',
        path: './api-reference/domains-service.oas2.yaml#/paths/~domains/post',
      },
      {
        title: 'Builds',
        path: './api-reference/domains-service.oas2.yaml#/tags/0/name',
        expanded: true,
        children: [
          {
            title: 'Overview',
            path: './api-reference/domains-service.oas2.yaml#/tags/0/description',
          },
          {
            title: 'Trigger Build',
            path: './api-reference/domains-service.oas2.yaml#/paths/~builds/post',
          },
          {
            title: 'Get Build',
            path: './api-reference/domains-service.oas2.yaml#/paths/~builds~1{build}/get',
          },
        ],
      },
      {
        title: 'Models',
        path: './api-reference/domains-service.oas2.yaml#/definitions',
        expanded: true,
        children: [
          {
            title: 'Domain',
            path: './api-reference/domains-service.oas2.yaml#/definitions/domain',
          },
          { title: 'Build', path: './api-reference/domains-service.oas2.yaml#/definitions/build' },
        ],
      },
      { title: 'Contact Us', path: 'mailto:support@stoplight.io' },
    ],
  },
];
```