@deadragdoll/vfs-explorer

Internal React package for file browsing, upload and inspector workflows.

What it provides

• file explorer UI with tree, content and inspector areas;
• compact browse-only mode;
• upload component;
• built-in file type icon helpers;
• package CSS and theme entrypoints.

Peer dependencies

• react
• react-dom
• @apollo/client
• graphql

Optional:

• graphql-ws

Installation

yarn add @deadragdoll/vfs-explorer @deadragdoll/themes

Import structural styles and one theme:

import "@deadragdoll/vfs-explorer/style.css";
import "@deadragdoll/themes/default.css";

Minimal usage

import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client/core";
import { ApolloProvider } from "@apollo/client/react";
import { VfsExplorer } from "@deadragdoll/vfs-explorer";

const client = new ApolloClient({
  link: new HttpLink({
    uri: "/api/graphql",
    credentials: "include"
  }),
  cache: new InMemoryCache()
});

export function FilesPage() {
  return (
    <ApolloProvider client={client}>
      <VfsExplorer apiUrl="/api" />
    </ApolloProvider>
  );
}

Public exports

Components:

• VfsExplorer
• VfsBrowse
• Upload

Helpers:

• defaultVfsNodeIconRenderer
• resolveVfsNodeIcon

Selected types:

• VfsExplorerProps
• VfsBrowseProps
• UploadProps
• VfsNodeIconRenderer
• VfsLocale
• VfsMessages
• ExplorerNode
• VfsNode
• VfsVisibility

Theme files

• @deadragdoll/themes/default.css
• @deadragdoll/themes/antd.css
• @deadragdoll/themes/blueprint.css
• @deadragdoll/themes/xai.css
• @deadragdoll/themes/mistral.css