Pro UI Components

This package contains components to build UIs for experts. All components lend themselves to modification by the user. To align with this principle, you should store the user preferences somewhere, at least in LocalStorage.

All components use react-dnd, so you have to wrap them in

<DndProvider backend={HTML5Backend}>
  ...
</DndProvider>

instances. You don't have to have a single big DndProvider, but you have to make sure that every source and the corresponding target are under the same DndProvider.

Components

Tabs

A tabbed container that allows to reorganise tabs with drag-and-drop, even between containers. It takes an array of tab definitions as its children.

interface TabData<T> {
  id: string | number
  title: ReactNode
  children: ReactNode
  metadata?: T
}

It is important that id be unique with respect to any group of Tabs elements within which movement is allowed because it is used for the key prop of tabs and contents alike. id and metadata together serve to identify the tab to your own code, so you should probably encode how to locate the Tabs element in metadata.

Usage:

<Tabs onMove={(position: number, id: string | number, metadata: any) => void}>
  {[
    {
      id: 0,
      title: 'Title of first tab',
      children: <div>Contents of first tab</div>,
      metadata: { some: 'data' }
    },
    {
      id: 'foo',
      title: <>Title of <em>another</em> tab</>,
      children: <div>Components of another tab</div>
    }
  ]}
</Tabs>

id can be either a string or a number. When the user moves a tab, onMove is called on the target container, with the following arguments:

• the position the tab should be moved to
• the ID of the moved tab
• the metadata of the moved tab

The children won't be moved by themselves, you have to store your children in an appropriate structure and handle the onMove event in the parent component. For an example of how this could be done, see the story in the docs.

Splits

It is a container made of a tree of flexboxes, inspired by Visual Studio and the Unity editor. It takes a tree of split definitions as its children

interface SplitData {
  axis: 'x' | 'y'
  children: {
    ratio: number
    content: SplitData | ReactNode
  }[]
}

The component itself is called like so

<Splits minSize={number} splitTypes={string|string[]}
  onResize={(path: number[], after: number, amount: number) => void}
  onSplit={(path: number[], side: 'top'|'left'|'bottom'|'right', item: any, type: string) => void}>
  {children: SplitData}
</Splits>

There are a number of functions to help with transforming the tree, for a complete list, see the docs.

This component can also be combined with Tabs, there's a special wrapper called TabSplits with helper functions so a working setup is 20 lines.

Context menus

You can create custom context menus. The data is structured in a tree of tuples where the first element is the displayed name, and the second describes what the element does:

type ContextMenuOption = [ReactNode, (() => void) | ContextMenuOption[] | null | undefined]

The component itself is called like so:

<ContextMenu options={ContextMenuOption[]}>
  ...
</ContextMenu>

Right clicking on any descendant of this node will bring up the custom context menu rather than the browser's default one. If you nest them, the menu elements will appear one after the other, with a horizontal line separating them.

All layers of the context menu try to find room for themselves on either side of the mouse pointer / their parent option, they won't extend off-screen unless the frame is smaller than the menu.

On elements not wrapped in a ContextMenu, the browser's default context menu will still appear. You aren't supposed to disable this for accessibility reasons, but if you do it with something like

window.oncontextmenu = e => e.preventDefault()

then the custom menus won't break.

Documentation: https://lbfalvy.github.io/pro-ui/docs

See it in action at https://lbfalvy.github.io/pro-ui

Repository: https://github.com/lbfalvy/pro-ui

NPM: https://www.npmjs.com/package/@lbfalvy/pro-ui

Library created from This template by HarveyD