From 814a8e4daee82710f6237fe8f9dfdb11fb8169ba Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 25 Feb 2024 15:25:21 +0000
Subject: [PATCH] chore: fix docs
---
packages/docs/docs/components/dockview.mdx | 1022 -----------------
packages/docs/docs/index.mdx | 88 +-
.../docs/docs/other/gridview/_category_.json | 6 +
.../docs/docs/other/gridview/overview.mdx | 7 +
.../docs/docs/other/paneview/_category_.json | 6 +
.../docs/docs/other/paneview/overview.mdx | 6 +
.../docs/docs/other/splitview/_category_.json | 6 +
.../docs/docs/other/splitview/overview.mdx | 7 +
packages/docs/docusaurus.config.js | 18 +-
.../components/_category_.json | 0
.../components/gridview/gridview.mdx | 0
.../components/intro.mdx | 0
.../components/paneview/paneview.mdx | 0
.../components/splitview/splitview.mdx | 0
packages/docs/old_docs_DELETE_SOON/index.mdx | 87 ++
packages/docs/sidebars.js | 8 +
.../docs/src/components/frameworkSpecific.tsx | 37 +-
.../docs/src/components/ui/exampleFrame.tsx | 66 +-
packages/docs/src/pages/demo.tsx | 10 +-
packages/docs/versions.json | 1 -
20 files changed, 206 insertions(+), 1169 deletions(-)
delete mode 100644 packages/docs/docs/components/dockview.mdx
create mode 100644 packages/docs/docs/other/gridview/_category_.json
create mode 100644 packages/docs/docs/other/gridview/overview.mdx
create mode 100644 packages/docs/docs/other/paneview/_category_.json
create mode 100644 packages/docs/docs/other/paneview/overview.mdx
create mode 100644 packages/docs/docs/other/splitview/_category_.json
create mode 100644 packages/docs/docs/other/splitview/overview.mdx
rename packages/docs/{docs => old_docs_DELETE_SOON}/components/_category_.json (100%)
rename packages/docs/{docs => old_docs_DELETE_SOON}/components/gridview/gridview.mdx (100%)
rename packages/docs/{docs => old_docs_DELETE_SOON}/components/intro.mdx (100%)
rename packages/docs/{docs => old_docs_DELETE_SOON}/components/paneview/paneview.mdx (100%)
rename packages/docs/{docs => old_docs_DELETE_SOON}/components/splitview/splitview.mdx (100%)
create mode 100644 packages/docs/old_docs_DELETE_SOON/index.mdx
delete mode 100644 packages/docs/versions.json
diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx
deleted file mode 100644
index 81bd15d8f..000000000
--- a/packages/docs/docs/components/dockview.mdx
+++ /dev/null
@@ -1,1022 +0,0 @@
----
-description: Dockview Documentation
----
-
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-
-import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
-// import DockviewPersistence from '@site/sandboxes/layout-dockview/src/app';
-import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
-import ResizeDockview from '@site/sandboxes/resize-dockview/src/app';
-// import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app';
-// import DockviewConstraints from '@site/sandboxes/constraints-dockview/src/app';
-import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
-import NestedDockview from '@site/sandboxes/nested-dockview/src/app';
-import EventsDockview from '@site/sandboxes/events-dockview/src/app';
-// import DockviewGroupControl from '@site/sandboxes/headeractions-dockview/src/app';
-import CustomHeadersDockview from '@site/sandboxes/customheader-dockview/src/app';
-import DockviewNative from '@site/sandboxes/fullwidthtab-dockview/src/app';
-import DockviewNative2 from '@site/sandboxes/nativeapp-dockview/src/app';
-import DockviewSetTitle from '@site/sandboxes/updatetitle-dockview/src/app';
-import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
-import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
-import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
-import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
-import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app';
-// import DockviewFloating from '@site/sandboxes/floatinggroup-dockview/src/app';
-import DockviewLockedGroup from '@site/sandboxes/lockedgroup-dockview/src/app';
-import DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app';
-// import DockviewPopoutGroup from '@site/sandboxes/popoutgroup-dockview/src/app';
-// import DockviewMaximizeGroup from '@site/sandboxes/maximizegroup-dockview/src/app';
-// import DockviewRenderMode from '@site/sandboxes/rendermode-dockview/src/app';
-// import DockviewScrollbars from '@site/sandboxes/scrollbars-dockview/src/app';
-
-import DockviewFocus from '@site/sandboxes/focus-dockview/src/app';
-
-import { DocRef } from '@site/src/components/ui/reference/docRef';
-
-import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
-import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app';
-import { attach as attachTabHeightDockview } from '@site/sandboxes/javascript/tabheight-dockview/src/app';
-import { attach as attachNativeDockview } from '@site/sandboxes/javascript/fullwidthtab-dockview/src/app';
-
-# Dockview
-
-
-
-## Introduction
-
-Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
-
-
-
-
-
-> You can access the panels associated group through the `panel.group` variable.
-> The group will always be defined and will change if a panel is moved into another group.
-
-## DockviewReact Component
-
-You can create a Dockview through the use of the `DockviewReact` component.
-
-
- {'All of these are React props available through the '}
- DockviewReact
- {' component.'}
-
-
-
-## Dockview API
-
-The Dockview API is exposed both at the `onReady` event and on each panel through `props.containerApi`.
-Through this API you can control general features of the component and access all added panels.
-
-```tsx title="Dockview API via Panel component"
-const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
- // props.containerApi...
-
- return
{`My first panel has the title: ${props.params.title}`}
;
-};
-```
-
-```tsx title="Dockview API via the onReady callback"
-const onReady = (event: DockviewReadyEvent) => {
- // event.api...
-};
-```
-
-
- {'All of these methods are available through the '}
- api
- {' property of '}
- DockviewComponent
- {' and the '}
- containerApi
- {' property of '}
- IDockviewPanel
- .
-
{`My first panel has the title: ${props.params.title}`}
;
-};
-```
-
-
- {'All of these are methods are available through the '}
- api
- {' property of '}
- IDockviewPanel
- .
-
-
-
-
-## Theme
-
-As well as importing the `dockview` stylesheet you must provide a class-based theme somewhere in your application. For example.
-
-```tsx
-// Providing a theme directly through the DockviewReact component props
-
-
-// Providing a theme somewhere in the DOM tree
-
-
- {/**... */}
-
-
-
-```
-
-You can find more details on theming here.
-
-## Layout Persistence
-
-Layouts are loaded and saved via to `fromJSON` and `toJSON` methods on the Dockview api.
-The api also exposes an event `onDidLayoutChange` you can listen on to determine when the layout has changed.
-Below are some snippets showing how you might load from and save to localStorage.
-
-```tsx title="Saving the layout state to localStorage"
-React.useEffect(() => {
- if (!api) {
- return;
- }
-
- const disposable = api.onDidLayoutChange(() => {
- const layout = api.toJSON();
-
- localStorage.setItem(
- 'dockview_persistence_layout',
- JSON.stringify(layout)
- );
- });
-
- return () => {
- disposable.dispose();
- };
-}, [api]);
-```
-
-```tsx title="Loading a layout from localStorage"
-const onReady = (event: DockviewReadyEvent) => {
- const layoutString = localStorage.getItem('dockview_persistence_layout');
-
- let success = false;
-
- if (layoutString) {
- try {
- const layout = JSON.parse(layoutString);
- event.api.fromJSON(layout);
- success = true;
- } catch (err) {
- //
- }
- }
-
- if (!success) {
- // do something if there is no layout or there was a loading error
- }
-};
-```
-
-Here is an example using the above code loading from and saving to localStorage.
-If you refresh the page you should notice your layout is loaded as you left it.
-
-{/* */}
-
-## Scrollbars
-
-Scrollbars will appear if the contents of your view has a fixed height. If you are using a relative height such
-as *100%* you will need to define an inner container with the appropiate `overflow` value to allow scrollbars to appear.
-
-The following container three views:
-- **Panel 1**: Sets `height: 100%` and no scrollbar appears even, the content is clipped.
-- **Panel 2**: Sets `height: 2000px` and a scrollbar does appear since a fixed height has been used.
-- **Panel 3**: Sets `height: 100%` and defines an inner component with `overflow: auto` to enable the scrollbars.
-
-
-{/* */}
-
-## Resizing
-
-### Panel Resizing
-
-Each Dockview contains of a number of groups and each group has a number of panels.
-Logically a user may want to resize a panel, but this translates to resizing the group which contains that panel.
-
-You can set the size of a panel using `props.api.setSize(...)`.
-You can also set the size of the group associated with the panel using `props.api.group.api.setSize(...)` although this isn't recommended
-due to the clunky syntax.
-
-```tsx
-// it's mandatory to provide either a height or a width, providing both is optional
-props.api.setSize({
- height: 100,
- width: 200,
-});
-
-// you could also resize the panels group, although not recommended it achieved the same result
-props.api.group.api.setSize({
- height: 100,
- width: 200,
-});
-```
-
-You can see an example invoking both approaches below.
-
-
-
-### Container Resizing
-
-The component will automatically resize to it's container.
-
-
-
-## Watermark
-
-When the dockview is empty you may want to display some fallback content, this is refered to as the `watermark`.
-By default there the watermark has no content but you can provide as a prop to `DockviewReact` a `watermarkComponent`
-which will be rendered when there are no panels or groups.
-
-{/* */}
-
-## Drag And Drop
-
-You can override the conditions of the far edge overlays through the `rootOverlayModel` prop.
-
-```tsx
-
-```
-
-### Built-in behaviours
-
-Dockview supports a wide variety of built-in Drag and Drop possibilities.
-Below are some examples of the operations you can perform.
-
-
-
-> Drag a tab onto another tab to place it inbetween existing tabs.
-
-
-
-> Drag a tab to the right of the last tab to place it after the existing tabs.
-
-
-
-> Drag a group onto an existing group to merge the two groups.
-
-
-
-
-
-
-> Drag into the left/right/top/bottom target zone of a panel to create a new group in the selected direction.
-
-> Drag into the center of a panel to add to that group.
-
-> Drag to the edge of the dockview component to create a new group on the selected edge.
-
-### Extended behaviours
-
-For interaction with the Drag events directly the component exposes some method to help determine whether external drag events should be interacted with or not.
-
-```tsx
-/**
- * called when an ondrop event which does not originate from the dockview libray and
- * passes the showDndOverlay condition occurs
- **/
-const onDidDrop = (event: DockviewDropEvent) => {
- const { group } = event;
-
- event.api.addPanel({
- id: 'test',
- component: 'default',
- position: {
- referencePanel: group.activePanel.id,
- direction: 'within',
- },
- });
-};
-
-/**
- * called for drag over events which do not originate from the dockview library
- * allowing the developer to decide where the overlay should be shown for a
- * particular drag event
- **/
-const showDndOverlay = (event: DockviewDndOverlayEvent) => {
- return true;
-};
-
-return (
-
-);
-```
-
-### Intercepting Drag Events
-
-You can intercept drag events to attach your own metadata using the `onWillDragPanel` and `onWillDragGroup` api methods.
-
-
-
-### Third Party Dnd Libraries
-
-This shows a simple example of a third-party library used inside a panel that relies on drag
-and drop functionalities. This examples serves to show that `dockview` doesn't interfer with
-any drag and drop logic for other controls.
-
-
-
-## Floating Groups
-
-Dockview has built-in support for floating groups. Each floating container can contain a single group with many panels
-and you can have as many floating containers as needed. You cannot dock multiple groups together in the same floating container.
-
-Floating groups can be interacted with whilst holding the `shift` key activating the `event.shiftKey` boolean property on `KeyboardEvent` events.
-
-> Float an existing tab by holding `shift` whilst interacting with the tab
-
-
-
-> Move a floating tab by holding `shift` whilst moving the cursor or dragging the empty
-> header space
-
-
-
-> Move an entire floating group by holding `shift` whilst dragging the empty header space
-
-
-
-Floating groups can be programatically added through the dockview `api` method `api.addFloatingGroup(...)` and you can check whether
-a group is floating via the `group.api.location` property. See examples for full code.
-
-You can control the bounding box of floating groups through the optional `floatingGroupBounds` options:
-
-- `boundedWithinViewport` will force the entire floating group to be bounded within the docks viewport.
-- `{minimumHeightWithinViewport?: number, minimumWidthWithinViewport?: number}` sets the respective dimension minimums that must appears within the docks viewport
-- If no options are provided the defaults of `100px` minimum height and width within the viewport are set.
-
-{/* */}
-
-## Popout Groups
-
-Dockview has built-in support for opening groups in new Windows.
-Each popout window can contain a single group with many panels and you can have as many popout
-windows as needed. You cannot dock multiple groups together in the same window.
-
-Popout windows require your website to have a blank `.html` page that can be used, by default this is set to `/popout.html` but
-can be configured to match requirements.
-
-```tsx title="Open new popout group from the component api"
-api.addPopoutGroup(
- group,
- // the second arguments (options) is optional
- {
- popoutUrl:"/popout.html",
- box: { left: 0, top: 0, height: 200, width: 300 }
- });
-```
-
-> If you do not provide `options.popoutUrl` a default of `/popout.html` is used and if `options.box` is not provided
-the view will be places according to it's currently position.
-
-From within a panel you may say
-
-```tsx
-props.containerApi.addPopoutGroup(props.api.group);
-```
-
-To programatically move the popout group back into the main grid you can use the `moveTo` method in many ways, one of the following would suffice
-
-```tsx
-// option 1: add absolutely to the right-side of the grid
-props.group.api.moveTo({ position: 'right' });
-
-// option 2: create a new group and move the contents of the popout group to it
-const group = props.containerApi.addGroup();
-props.group.api.moveTo({ group });
-```
-
-{/* */}
-
-## Maximized Groups
-
-To maximize a group from the component `api`:
-
-```tsx
-// maximize a specified group
-api.maxmimizeGroup(group);
-
-// check whether a specific group is maximized
-const result: boolean = api.isMaximizedGroup(group);
-
-// if there is any maximized group exit the maximized state
-exitMaximizedGroup();
-
-// is there a maximized group
-const result: boolean = hasMaximizedGroup();
-```
-
-The following methods are available on both the panel and group `api` objects:
-
-> `api.` is equivalent to `api.group.api.` for all of these methods. The methods exist on the panel `api` object for convenience.
-
-```ts
-// maximize the group
-api.maximize();
-
-// is this group maximized (if another group is maximized this method will still return false)
-const result: boolean = api.isMaxmized();
-
-// exit only if this group is maximzied (if another group is maxmized this has no affect)
-api.exitMaximized();
-```
-
-{/* */}
-
-
-## Panels
-
-### Add Panel
-
-Using the dockview API you can access the `addPanel` method which returns an instance of the created panel.
-The minimum method signature is:
-
-```ts
-const panel = api.addPanel({
- id: 'my_unique_panel_id',
- component: 'my_component',
-});
-```
-
-where `id` is the unique id of the panel and `component` is the implenentation which
-will be used to render the panel. You will have registered this using the `components` prop of the `DockviewReactComponent` component.
-
-You can optionally provide a `tabComponent` parameters to the `addPanel` method which will render the tab using a custom renderer.
-You will have registered this using the `tabComponents` prop of the `DockviewReactComponent` component.
-
-```ts
-const panel = api.addPanel({
- id: 'my_unique_panel_id',
- component: 'my_component',
- tabComponent: 'my_tab_component',
-});
-```
-
-You can pass properties to the panel using the `params` key.
-You can update these properties through the panels `api` object and its `updateParameters` method.
-
-```ts
-const panel = api.addPanel({
- id: 'my_unique_panel_id',
- component: 'my_component',
- params: {
- myCustomKey: 'my_custom_value',
- },
-});
-
-panel.api.updateParameters({
- myCustomKey: 'my_custom_value',
- myOtherCustomKey: 'my_other_custom_key',
-});
-```
-
-> Note `updateParameters` does not accept partial parameter updates, you should call it with the entire set of parameters
-> you want the panel to receive.
-
-Finally `addPanel` accepts a `position` object which tells dockview where to place the panel.
-
-- This object optionally accepts either a `referencePanel` or `referenceGroup` which can be the associated id as a string
- or the panel/group object reference.
-- This object accepts a `direction` property which dictates where,
- relative to the provided reference the new panel will be placed.
-
-> If neither a `referencePanel` or `referenceGroup` is provided then the `direction` will be treated as absolute.
-
-> If no `direction` is provided the library will place the new panel in a pre-determined position.
-
-```ts
-const panel = api.addPanel({
- id: 'panel_1',
- component: 'default',
-});
-
-const panel2 = api.addPanel({
- id: 'panel_2',
- component: 'default',
- position: {
- referencePanel: panel1,
- direction: 'right',
- },
-});
-```
-
-To add a floating panel you should include the `floating` variable which can be either a `boolean` or an object defining it's bounds.
-These bounds are relative to the dockview component.
-
-```ts
-const panel1 = api.addPanel({
- id: 'panel_2',
- component: 'default',
- floating: true,
-});
-
-const panel2 = api.addPanel({
- id: 'panel_2',
- component: 'default',
- floating: { x: 10, y: 10, width: 300, height: 300 },
-});
-```
-
-### Update Panel
-
-You can programatically update the `params` passed through to the panel through the panal api using `api.updateParameters`.
-
-```ts
-const panel = api.addPanel({
- id: 'panel_1',
- component: 'default',
- params: {
- keyA: 'valueA',
- },
-});
-
-// ...
-
-panel.api.updateParameters({
- keyB: 'valueB',
-});
-
-// ...
-
-panel.api.updateParameters({
- keyA: 'anotherValueA',
-});
-```
-
-To delete a parameter you should pass a value of `undefined` for the key.
-
-```ts
-panel.api.updateParameters({
- keyA: undefined, // this will delete 'keyA'.
-});
-```
-
-### Move panel
-
-You can programatically move a panel using the panel `api`.
-
-```ts
-panel.api.moveTo({ group, position, index });
-```
-
-An equivalent method for moving groups is avaliable on the group `api`.
-
-```ts
-const group = panel.api.group;
-group.api.moveTo({ group, position });
-```
-
-### Remove panel
-
-You can programatically remove a panel using the panel `api`.
-
-```ts
-panel.api.close();
-```
-
-Given a reference to the panel you can also use the component `api` to remove it.
-
-```ts
-const panel = api.getPanel('myPanel');
-api.removePanel(panel);
-```
-
-### Panel Rendering
-
-#### Render Mode
-
-Dockview has two rendering modes `onlyWhenVisible` (default) and `always`. A rendering mode can be defined through the `renderer` prop to `DockviewReact` or at an individual panel level when added where
-the panel declaration takes precedence if both are defined. Rendering modes defined at the panel level are persisted, those defined at the `DockviewReact` level are not persisted.
-
-- `onlyWhenVisible` mode is the default mode. In this mode when a panel is no longer visible through either it's visiblity being hidden or it not being the active panel within a group the panels HTMLElement is removed
-from the DOM and any DOM state such as scrollbar positions will be lost. If you are using any ResizeObservers to measure size this will result both zero height and width as the HTMLElement no longer belongs to the DOM.
-This design allows for maximum performance at some cost.
-- `always` mode. In this mode when panels become hidden the HTMLElement is not destroyed so all DOM state such as scrollbar positions will be maintained. This is implemented by rendering each panel as an absolutely positioned
-HTMLElement and hidden the HTMLElement with `display: none` when it should be hidden.
-
-{/* */}
-
-####
-
-By default `DockviewReact` only adds to the DOM those panels that are visible,
-if a panel is not the active tab and not shown the contents of the hidden panel will be removed from the DOM.
-
-When a panel is in `onlyWhenVisible` render mode this only affects the contents within the DOM. The lifecycle of that panel instance is still maintained.
-The React Components associated with each panel are only created once and will always exist for as long as the panel exists, hidden or not.
-
-> e.g. This means that any hooks in those components will run whether the panel is visible or not which may lead to excessive background work depending
-> on the panels implementation.
-
-You can listen to the visiblity state of the panel and write additional logic to optimize your application if required, although this is an advanced case.
-
-If you wanted to unmount the React Components when the panel is not visible you could create a Higher-Order-Component that listens to the panels
-visiblity state and only renders the panel when visible.
-
-```tsx title="Only rendering the React Component when the panel is visible, otherwise rendering a null React Component"
-import { IDockviewPanelProps } from 'dockview';
-import * as React from 'react';
-
-function RenderWhenVisible(
- component: React.FunctionComponent
-) {
- const HigherOrderComponent = (props: IDockviewPanelProps) => {
- const [visible, setVisible] = React.useState(
- props.api.isVisible
- );
-
- React.useEffect(() => {
- const disposable = props.api.onDidVisibilityChange((event) =>
- setVisible(event.isVisible)
- );
-
- return () => {
- disposable.dispose();
- };
- }, [props.api]);
-
- if (!visible) {
- return null;
- }
-
- return React.createElement(component, props);
- };
- return HigherOrderComponent;
-}
-```
-
-```tsx
-const components = { default: RenderWhenVisible(MyComponent) };
-```
-
-Toggling the checkbox you can see that when you only render those panels which are visible the underling React component is destroyed when it becomes hidden and re-created when it becomes visible.
-
-
-
-
-## Headers
-
-### Custom Tab Headers
-
-You can provide custom renderers for your tab headers for maximum customization.
-A default implementation of `DockviewDefaultTab` is provided should you only wish to attach minor
-changes and events that do not alter the default behaviour, for example to add a custom context menu event
-handler or to hide the close button.
-
-The `DockviewDefaultTab` component accepts a `hideClose` prop if you wish only to hide the close button.
-
-```tsx title="Attaching a custom context menu event handlers to a custom header"
-import { IDockviewPanelHeaderProps, DockviewDefaultTab } from 'dockview';
-
-const MyCustomheader = (props: IDockviewPanelHeaderProps) => {
- const onContextMenu = (event: React.MouseEvent) => {
- event.preventDefault();
- alert('context menu');
- };
- return ;
-};
-```
-
-You are also free to define a custom renderer entirely from scratch and not make use of the `DockviewDefaultTab` component.
-To use a custom renderer you can must register a collection of tab components.
-
-```tsx
-const tabComponents = {
- myCustomHeader: MyCustomHeader,
-};
-
-return ;
-```
-
-```tsx
-api.addPanel({
- id: 'panel_1',
- component: 'default',
- tabComponent: 'myCustomHeader', // <-- your registered renderers
- title: 'Panel 1',
-});
-```
-
-You can also override the default tab renderer which will be used when no `tabComponent` is provided to the `addPanel` function.
-
-```tsx
-;
-```
-
-As a simple example the below attaches a custom event handler for the context menu on all tabs as a default tab renderer
-
-The below example uses a custom tab renderer to reigster a popover when the user right clicked on a tab.
-This still makes use of the `DockviewDefaultTab` since it's only a minor change.
-
-
-
-### Default Tab Title
-
-If you are using the default tab renderer you can set the title of a tab when creating it
-
-```tsx
-api.addPanel({
- id: 'panel_1',
- component: 'my_component',
- title: 'my_custom_title', // <-- special param for title
-});
-```
-
-You can update the title through the panel api which can be accessed via `props.api` if you are inside the panel
-component or via `api.getPanel('panel1').api` if you are accessing from outside of the panel component.
-
-```tsx
-api.setTitle('my_new_custom_title');
-```
-
-> Note this only works when using the default tab implementation.
-
-
-
-### Custom Tab Title
-
-If you are using a custom tab implementation you should pass variables through as a parameter and render them
-through your tab components implementation.
-
-```tsx title="Add a panel with custom parameters"
-api.addPanel({
- id: 'panel_2',
- component: 'my_component',
- tabComponent: 'my_tab',
- params: {
- myTitle: 'Window 2', // <-- passing a variable to use as a title
- },
-});
-```
-
-```tsx title="Accessing custom parameters from a custom tab renderer"
-const tabComponents = {
- default: (props: IDockviewPanelHeaderProps<{ myTitle: string }>) => {
- const title = props.params.myTitle; // <-- accessing my custom varaible
- return
{/** tab implementation as chosen by developer */}
;
- },
-};
-```
-
-### Hidden Headers
-
-You may wish to hide the header section of a group. This can achieved through the `hidden` variable on `panel.group.header`.
-
-```tsx
-panel.group.header.hidden = true;
-```
-
-### Full width tabs
-
-`DockviewReactComponent` accepts the prop `singleTabMode`. If set `singleTabMode=fullwidth` then when there is only one tab in a group this tab will expand
-to the entire width of the group. For example:
-
-> This can be conmbined with Locked Groups to create an application that feels more like a Window Manager
-> rather than a collection of groups and tabs.
-
-```tsx
-
-```
-
-
-
-### Tab Height
-
-Tab height can be controlled through CSS.
-
-
-
-## Groups
-
-### Locked group
-
-Locking a group will disable all drop events for this group ensuring no additional panels can be added to the group through drop events.
-You can still add groups to a locked panel programatically using the API though.
-
-```tsx
-panel.group.locked = true;
-
-// Or
-
-panel.group.locked = 'no-drop-target';
-```
-
-Use `true` to keep drop zones top, right, bottom, left for the group. Use `no-drop-target` to disable all drop zones. For you to get a
-better understanding of what this means, try and drag the panels in the example below to the locked groups.
-
-
-
-### Group Controls Panel
-
-`DockviewReact` accepts `leftHeaderActionsComponent`, `rightHeaderActionsComponent` and `prefixHeaderActionsComponent` which expect a React component with props `IDockviewHeaderActionsProps`.
-These controls are rendered to left and right side of the space to the right of the tabs in the header bar as well as before the first tab in the case of the prefix header prop.
-
-```tsx
-const Component: React.FunctionComponent = () => {
- return
{'...'}
;
-};
-
-return ;
-```
-
-As a simple example the below uses the `groupControlComponent` to render a small control that indicates whether the group
-is active and which panel is active in that group.
-
-```tsx
-const RightHeaderActionsComponent = (props: IDockviewHeaderActionsProps) => {
- const isGroupActive = props.isGroupActive;
- const activePanel = props.activePanel;
-
- return (
-
- );
-};
-```
-
-{/* */}
-
-### Constraints
-
-You may wish to specify a minimum or maximum height or width for a group which can be done through the group api.
-
-```tsx
-api.group.api.setConstraints(...)
-```
-
-> Constraints are currently only supported for groups and not individual panels.
-> If you specific a constraint on a group and move a panel within that group to another group it will no
-> longer be subject to those constraints since those constraints were on the group and not on the individual panel.
-
-{/* */}
-
-
-## iFrames
-
-iFrames required special attention because of a particular behaviour in how iFrames render:
-
-> Re-parenting an iFrame will reload the contents of the iFrame or the rephrase this, moving an iFrame within the DOM will cause a reload of its contents.
-
-You can find many examples of discussions on this. Two reputable forums for example are linked [here](https://bugzilla.mozilla.org/show_bug.cgi?id=254144) and [here](https://github.com/whatwg/html/issues/5484).
-
-To ensure iFrames work as expected you should render them in panels with `renderer: 'always'` to ensure they are never removed from the DOM, alternatively set the defaultRenderer to `always`.
-
-> See the **Panel Rendering** section for more information of render modes.
-
-```tsx title="Example of a panel using an alternative renderer"
-api.addPanel({
- id: 'my_panel_id',
- component: 'my_component',
- renderer: 'always',
-});
- ```
-
-
-
-## Events
-
-A simple example showing events fired by `dockviewz that can be interacted with.
-
-
-
-## Keyboard Navigation
-
-Keyboard shortcuts
-
-
-
-### Nested Dockviews
-
-You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.
-If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `showDndOverlay` and `onDidDrop` props on `DockviewReact`.
-
-
-
-### Window-like mananger with tabs
-
-
-
-
-
diff --git a/packages/docs/docs/index.mdx b/packages/docs/docs/index.mdx
index f16129c6f..92bf5adfa 100644
--- a/packages/docs/docs/index.mdx
+++ b/packages/docs/docs/index.mdx
@@ -1,87 +1 @@
----
-sidebar_position: 0
-description: A zero dependency layout manager supporting ReactJS and Vanilla TypeScript
-title: Introduction
----
-
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-
-import { SimpleSplitview } from '@site/src/components/simpleSplitview';
-import { SimpleGridview } from '@site/src/components/simpleGridview';
-import { SimplePaneview } from '@site/src/components/simplePaneview';
-// import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
-import Link from '@docusaurus/Link';
-
-**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
-
-## Quick start
-
-`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
-
-```shell
-npm install dockview
-```
-
-You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
-depending on your solution this might be:
-
-```css
-@import './node_modules/dockview/dist/styles/dockview.css';
-```
-
-There are 4 components you may want to use:
-
-
-
Dockview
-
-
-{/* */}
-
-
-
Splitview
-
-
-
-
-
-
-
-
Gridview
-
-
-
-
-
-
-
-
Paneview
-
-
-
-
-
+landing
diff --git a/packages/docs/docs/other/gridview/_category_.json b/packages/docs/docs/other/gridview/_category_.json
new file mode 100644
index 000000000..8d12cb1fc
--- /dev/null
+++ b/packages/docs/docs/other/gridview/_category_.json
@@ -0,0 +1,6 @@
+{
+ "position": 1,
+ "label": "Gridview",
+ "collapsible": true,
+ "collapsed": true
+}
\ No newline at end of file
diff --git a/packages/docs/docs/other/gridview/overview.mdx b/packages/docs/docs/other/gridview/overview.mdx
new file mode 100644
index 000000000..01e63e4fb
--- /dev/null
+++ b/packages/docs/docs/other/gridview/overview.mdx
@@ -0,0 +1,7 @@
+---
+title: Overview
+sidebar_position: 0
+---
+
+The implementation of the dock is a collection of nested *splitview* controls forming a *gridview*
+which is exposed as a seperate component to be used independantly.
diff --git a/packages/docs/docs/other/paneview/_category_.json b/packages/docs/docs/other/paneview/_category_.json
new file mode 100644
index 000000000..b50dca2fb
--- /dev/null
+++ b/packages/docs/docs/other/paneview/_category_.json
@@ -0,0 +1,6 @@
+{
+ "position": 2,
+ "label": "Paneview",
+ "collapsible": true,
+ "collapsed": true
+}
\ No newline at end of file
diff --git a/packages/docs/docs/other/paneview/overview.mdx b/packages/docs/docs/other/paneview/overview.mdx
new file mode 100644
index 000000000..0d6786f31
--- /dev/null
+++ b/packages/docs/docs/other/paneview/overview.mdx
@@ -0,0 +1,6 @@
+---
+title: Overview
+sidebar_position: 0
+---
+
+A *splitview* control where each panel contains a header and collapsable content.
diff --git a/packages/docs/docs/other/splitview/_category_.json b/packages/docs/docs/other/splitview/_category_.json
new file mode 100644
index 000000000..6fbc6fbe6
--- /dev/null
+++ b/packages/docs/docs/other/splitview/_category_.json
@@ -0,0 +1,6 @@
+{
+ "position": 0,
+ "label": "Splitview",
+ "collapsible": true,
+ "collapsed": true
+}
\ No newline at end of file
diff --git a/packages/docs/docs/other/splitview/overview.mdx b/packages/docs/docs/other/splitview/overview.mdx
new file mode 100644
index 000000000..f7edfa2e5
--- /dev/null
+++ b/packages/docs/docs/other/splitview/overview.mdx
@@ -0,0 +1,7 @@
+---
+title: Overview
+sidebar_position: 0
+---
+
+The implementation of the dock is a collection of nested *splitview* controls
+which is exposed as a seperate component to be used independantly.
diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js
index 0573ec465..7a5bebd21 100644
--- a/packages/docs/docusaurus.config.js
+++ b/packages/docs/docusaurus.config.js
@@ -106,11 +106,11 @@ const config = {
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
- versions: {
- current: {
- label: `Development 🚧`,
- },
- },
+ // versions: {
+ // current: {
+ // label: `Development 🚧`,
+ // },
+ // },
},
blog: {
showReadingTime: true,
@@ -188,10 +188,10 @@ const config = {
// position: 'left',
// },
- {
- type: 'docsVersionDropdown',
- position: 'right',
- },
+ // {
+ // type: 'docsVersionDropdown',
+ // position: 'right',
+ // },
{
href: 'https://github.com/mathuo/dockview',
position: 'right',
diff --git a/packages/docs/docs/components/_category_.json b/packages/docs/old_docs_DELETE_SOON/components/_category_.json
similarity index 100%
rename from packages/docs/docs/components/_category_.json
rename to packages/docs/old_docs_DELETE_SOON/components/_category_.json
diff --git a/packages/docs/docs/components/gridview/gridview.mdx b/packages/docs/old_docs_DELETE_SOON/components/gridview/gridview.mdx
similarity index 100%
rename from packages/docs/docs/components/gridview/gridview.mdx
rename to packages/docs/old_docs_DELETE_SOON/components/gridview/gridview.mdx
diff --git a/packages/docs/docs/components/intro.mdx b/packages/docs/old_docs_DELETE_SOON/components/intro.mdx
similarity index 100%
rename from packages/docs/docs/components/intro.mdx
rename to packages/docs/old_docs_DELETE_SOON/components/intro.mdx
diff --git a/packages/docs/docs/components/paneview/paneview.mdx b/packages/docs/old_docs_DELETE_SOON/components/paneview/paneview.mdx
similarity index 100%
rename from packages/docs/docs/components/paneview/paneview.mdx
rename to packages/docs/old_docs_DELETE_SOON/components/paneview/paneview.mdx
diff --git a/packages/docs/docs/components/splitview/splitview.mdx b/packages/docs/old_docs_DELETE_SOON/components/splitview/splitview.mdx
similarity index 100%
rename from packages/docs/docs/components/splitview/splitview.mdx
rename to packages/docs/old_docs_DELETE_SOON/components/splitview/splitview.mdx
diff --git a/packages/docs/old_docs_DELETE_SOON/index.mdx b/packages/docs/old_docs_DELETE_SOON/index.mdx
new file mode 100644
index 000000000..f16129c6f
--- /dev/null
+++ b/packages/docs/old_docs_DELETE_SOON/index.mdx
@@ -0,0 +1,87 @@
+---
+sidebar_position: 0
+description: A zero dependency layout manager supporting ReactJS and Vanilla TypeScript
+title: Introduction
+---
+
+import { MultiFrameworkContainer } from '@site/src/components/ui/container';
+
+import { SimpleSplitview } from '@site/src/components/simpleSplitview';
+import { SimpleGridview } from '@site/src/components/simpleGridview';
+import { SimplePaneview } from '@site/src/components/simplePaneview';
+// import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
+import Link from '@docusaurus/Link';
+
+**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
+
+## Quick start
+
+`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
+
+```shell
+npm install dockview
+```
+
+You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
+depending on your solution this might be:
+
+```css
+@import './node_modules/dockview/dist/styles/dockview.css';
+```
+
+There are 4 components you may want to use:
+
+
+
})
- })
-})
-
-> Drag a tab onto another tab to place it inbetween existing tabs.
-
-}){kind=spacer}
-
-> Drag a tab to the right of the last tab to place it after the existing tabs.
-
-})
-
-> Drag a group onto an existing group to merge the two groups.
-
-})
-
-> Move a floating tab by holding `shift` whilst moving the cursor or dragging the empty
-> header space
-
-})
-
-> Move an entire floating group by holding `shift` whilst dragging the empty header space
-
-})
-
-Floating groups can be programatically added through the dockview `api` method `api.addFloatingGroup(...)` and you can check whether
-a group is floating via the `group.api.location` property. See examples for full code.
-
-You can control the bounding box of floating groups through the optional `floatingGroupBounds` options:
-
-- `boundedWithinViewport` will force the entire floating group to be bounded within the docks viewport.
-- `{minimumHeightWithinViewport?: number, minimumWidthWithinViewport?: number}` sets the respective dimension minimums that must appears within the docks viewport
-- If no options are provided the defaults of `100px` minimum height and width within the viewport are set.
-
-{/*