@stoplight/ui-tree

Stoplight UI tree component.

Usage no npm install needed!

<script type="module">
  import stoplightUiTree from 'https://cdn.skypack.dev/@stoplight/ui-tree';
</script>

README

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

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

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

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' },
    ],
  },
];