@edoc-space/plugin-directory-tree

English | Русский

Directory tree component for E-Doc MDX pages.

Use it when a page needs to explain a file layout, package structure, or content directory.

Installation

Install the plugin into the E-Doc local plugin overlay, not into the core application package:

cd local/plugins
yarn add @edoc-space/plugin-directory-tree

Or with npm:

cd local/plugins
npm install @edoc-space/plugin-directory-tree

Usage

Describe a small tree directly in an .mdx page:

import { DirectoryTree } from '@edoc-space/plugin-directory-tree'

<DirectoryTree
  tree={[
    {
      name: 'local/storage/edoc',
      type: 'directory',
      children: [
        { name: 'docs', type: 'directory' },
        { name: 'pages', type: 'directory' },
        { name: 'static', type: 'directory' },
      ],
    },
  ]}
/>

The package imports its CSS from the entrypoint. E-Doc resolves the package from local/plugins/node_modules.

For larger trees, put JSON into local/storage/edoc/static and load it by URL:

{
  "title": "Content directory",
  "description": "Files that belong to the user project.",
  "tree": [
    {
      "name": "local/storage/edoc",
      "type": "directory",
      "children": [
        { "name": "docs", "type": "directory" },
        { "name": "pages", "type": "directory" },
        { "name": "site.json", "type": "file" }
      ]
    }
  ]
}

<DirectoryTree source="/storage/edoc/static/tree.json" />

Directories are shown before files. Items are sorted alphabetically inside each group.

Props

type DirectoryTreeProps = {
  title?: string;
  description?: string;
  source?: string;
  tree?: DirectoryTreeNodeInput[] | DirectoryTreeNodeInput;
  items?: DirectoryTreeNodeInput[] | DirectoryTreeNodeInput;
  defaultExpanded?: boolean;
  variant?: string;
  className?: string;
};

Local Development

This repository uses the same package shape as the published npm package:

yarn install
yarn typecheck
yarn build
npm pack --dry-run

Before publishing, make sure the dry-run output contains only dist, README.md, README_RU.md, LICENSE, and package metadata.