From c1edea87448260013b0acd5f3d3f8d997b0efa5d Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Tue, 11 Apr 2023 21:04:34 +0100
Subject: [PATCH] docs: 1.7.1
---
.codesandbox/ci.json | 3 +-
.../docs/blog/2023-04-11-dockview-1.7.1.md | 26 +
packages/docs/docs/basics.mdx | 119 ---
packages/docs/docs/components/dockview.mdx | 7 +
packages/docs/docs/example.mdx | 8 +
.../sandboxes/tabheight-dockview/package.json | 31 +
.../tabheight-dockview/public/index.html | 44 ++
.../sandboxes/tabheight-dockview/src/app.scss | 3 +
.../sandboxes/tabheight-dockview/src/app.tsx | 83 ++
.../tabheight-dockview/src/index.tsx | 20 +
.../tabheight-dockview/src/styles.css | 16 +
.../tabheight-dockview/tsconfig.json | 20 +
.../versioned_docs/version-1.7.0/basics.mdx | 119 ---
.../version-1.7.1/components/_category_.json | 9 +
.../version-1.7.1/components/dockview.mdx | 733 ++++++++++++++++++
.../version-1.7.1/components/gridview.mdx | 120 +++
.../version-1.7.1/components/paneview.mdx | 285 +++++++
.../version-1.7.1/components/splitview.mdx | 246 ++++++
.../versioned_docs/version-1.7.1/example.mdx | 8 +
.../versioned_docs/version-1.7.1/index.mdx | 149 ++++
.../versioned_docs/version-1.7.1/theme.mdx | 89 +++
.../version-1.7.1-sidebars.json | 8 +
packages/docs/versions.json | 1 +
23 files changed, 1908 insertions(+), 239 deletions(-)
create mode 100644 packages/docs/blog/2023-04-11-dockview-1.7.1.md
delete mode 100644 packages/docs/docs/basics.mdx
create mode 100644 packages/docs/docs/example.mdx
create mode 100644 packages/docs/sandboxes/tabheight-dockview/package.json
create mode 100644 packages/docs/sandboxes/tabheight-dockview/public/index.html
create mode 100644 packages/docs/sandboxes/tabheight-dockview/src/app.scss
create mode 100644 packages/docs/sandboxes/tabheight-dockview/src/app.tsx
create mode 100644 packages/docs/sandboxes/tabheight-dockview/src/index.tsx
create mode 100644 packages/docs/sandboxes/tabheight-dockview/src/styles.css
create mode 100644 packages/docs/sandboxes/tabheight-dockview/tsconfig.json
delete mode 100644 packages/docs/versioned_docs/version-1.7.0/basics.mdx
create mode 100644 packages/docs/versioned_docs/version-1.7.1/components/_category_.json
create mode 100644 packages/docs/versioned_docs/version-1.7.1/components/dockview.mdx
create mode 100644 packages/docs/versioned_docs/version-1.7.1/components/gridview.mdx
create mode 100644 packages/docs/versioned_docs/version-1.7.1/components/paneview.mdx
create mode 100644 packages/docs/versioned_docs/version-1.7.1/components/splitview.mdx
create mode 100644 packages/docs/versioned_docs/version-1.7.1/example.mdx
create mode 100644 packages/docs/versioned_docs/version-1.7.1/index.mdx
create mode 100644 packages/docs/versioned_docs/version-1.7.1/theme.mdx
create mode 100644 packages/docs/versioned_sidebars/version-1.7.1-sidebars.json
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 36d6935ec..4d276169b 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -20,9 +20,10 @@
"/packages/docs/sandboxes/resize-dockview",
"/packages/docs/sandboxes/resizecontainer-dockview",
"/packages/docs/sandboxes/simple-dockview",
+ "/packages/docs/sandboxes/tabheight-dockview",
"/packages/docs/sandboxes/updatetitle-dockview",
"/packages/docs/sandboxes/vanilla-dockview",
"/packages/docs/sandboxes/watermark-dockview"
],
"node": "16"
-}
+}
\ No newline at end of file
diff --git a/packages/docs/blog/2023-04-11-dockview-1.7.1.md b/packages/docs/blog/2023-04-11-dockview-1.7.1.md
new file mode 100644
index 000000000..8fb604d55
--- /dev/null
+++ b/packages/docs/blog/2023-04-11-dockview-1.7.1.md
@@ -0,0 +1,26 @@
+---
+slug: dockview-1.7.1-release
+title: Dockview 1.7.1
+tags: [release]
+---
+
+# Release Notes
+
+Please reference to docs @ [dockview.dev](https://dockview.dev).
+If you feel anything is missing or unclear please let me know.
+
+## 🚀 Features
+
+- Resize observer [#227](https://github.com/mathuo/dockview/pull/227)
+- Minor type fix [#237](https://github.com/mathuo/dockview/pull/237)
+
+## 🛠Miscs
+
+- Additional documentation and examples [#217](https://github.com/mathuo/dockview/pull/217) [#221](https://github.com/mathuo/dockview/pull/221) [#228](https://github.com/mathuo/dockview/pull/228) [#229](https://github.com/mathuo/dockview/pull/229) [#240](https://github.com/mathuo/dockview/pull/240) [#241](https://github.com/mathuo/dockview/pull/241)
+- Adjust build configurations [#223](https://github.com/mathuo/dockview/pull/223) [#235](https://github.com/mathuo/dockview/pull/235) [#244](https://github.com/mathuo/dockview/pull/244)
+
+## 🔥 Breaking changes
+
+- Fix close button on default watermark [#225](https://github.com/mathuo/dockview/pull/225)
+- Remove tab height control as prop to `DockviewReact` component. Please control via CSS instead, see docs for tab height. [#236](https://github.com/mathuo/dockview/pull/236)
+- Fix edge-case bug when dropping a panel on far corners [#243](https://github.com/mathuo/dockview/pull/243)
diff --git a/packages/docs/docs/basics.mdx b/packages/docs/docs/basics.mdx
deleted file mode 100644
index 91fdcbfd9..000000000
--- a/packages/docs/docs/basics.mdx
+++ /dev/null
@@ -1,119 +0,0 @@
----
-sidebar_position: 1
-description: How to get started with Dockview
----
-
-import { SimpleSplitview } from '@site/src/components/simpleSplitview';
-import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
-
-# Basics
-
-asd
-This section will take you through a number of concepts that can be applied to all dockview components.
-
-## Panels
-
-The below examples use `ReactSplitview` but the logic holds for `ReactPaneview`, `ReactGridview` and `ReactDockview` using their respective implementations and interfaces.
-All components require you to provide an `onReady` prop which you can use to build and control your component.
-
-### Adding a panel with parameters
-
-You can pass parameters to a panel through the `params` object
-
-```tsx
-const onReady = (event: SplitviewReadyEvent) => {
- event.api.addPanel({
- id: 'panel_1',
- component: 'myComponent',
- params: {
- title: 'My Title',
- },
- });
-};
-```
-
-and you can access those properties through the `props.params` object. The TypeScript interface accepts an optional generic type `T` that corresponds to the params objects type.
-
-```tsx
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- return
{`My first panel has the title: ${props.params.title}`}
;
-};
-```
-
-## API
-
-There are two types of API you will interact with using `dockview`.
-
-- The `panel API` is accessible via `props.api` in user defined panels and via the `.api` variable found on panel instances. This API contains actions and variable related to the the individual panel.
-- The `container API` is accessible via `event.api` in the `onReady` events and `props.containerApi` in user defined panels. This API contains actions and variable related to the component as a whole.
-
-```tsx
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- React.useEffect(() => {
- const disposable = props.api.onDidActiveChange((event) => {
- console.log(`is panel active: ${event.isActive}`);
- });
-
- return () => {
- disposable.dispose(); // remember to dispose of any subscriptions
- };
- }, [props.api]);
-
- const addAnotherPanel = React.useCallback(() => {
- props.containerApi.addPanel({
- id: 'another_id',
- component: 'anotherComponent',
- });
- }, [props.containerApi]);
-
- return (
-
- {`My first panel has the title: ${props.params.title}`}
-
-
- );
-};
-```
-
-### Serialization
-
-All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`.
-
-## Auto resizing
-
-`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element.
-Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) which some users may need to polyfill.
-You can disable this by settings the `disableAutoResizing` prop to be `true`.
-
-You can manually resize a component using the API method `layout(width: number, height: number): void`.
-An advanced case may use this in conjunction with `disableAutoResizing=true` to allow a parent component to have ultimate control over the dimensions of the component.
-
-## Events
-
-Many API properties can be listened on using the `Event` pattern. For example `api.onDidFocusChange(() => {...})`.
-You should dispose of any event listeners you create cleaning up any listeners you would have created.
-
-```tsx
-React.useEffect(() => {
- const disposable = api.onDidFocusChange(() => {
- // write some code
- });
-
- return () => {
- disposable.dispose();
- };
-}, []);
-```
-
-## Proportional layout
-
-The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components.
-Although not configurable on `DockviewReact` and `PaneviewReact` these both behave as if `proportionalLayout=true` was set for them.
-
-
-
-
-
-## Browser support
-
-dockview is intended to support all major browsers. Some users may require a polyfill for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx
index 4b01b318d..b6d1a3e46 100644
--- a/packages/docs/docs/components/dockview.mdx
+++ b/packages/docs/docs/components/dockview.mdx
@@ -23,6 +23,7 @@ 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 { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app';
# Dockview
@@ -609,6 +610,12 @@ to the entire width of the group. For example:
+### Tab Height
+
+
+
+
+
## Groups
### Locked group
diff --git a/packages/docs/docs/example.mdx b/packages/docs/docs/example.mdx
new file mode 100644
index 000000000..29989cd51
--- /dev/null
+++ b/packages/docs/docs/example.mdx
@@ -0,0 +1,8 @@
+import Dockview from '@site/sandboxes/advanced-example-dockview/src/app';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import { Container } from '@site/src/components/ui/container';
+
+
+
+
diff --git a/packages/docs/sandboxes/tabheight-dockview/package.json b/packages/docs/sandboxes/tabheight-dockview/package.json
new file mode 100644
index 000000000..af6d19d63
--- /dev/null
+++ b/packages/docs/sandboxes/tabheight-dockview/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "tabheight-dockview",
+ "description": "",
+ "keywords": [
+ "dockview"
+ ],
+ "version": "1.0.0",
+ "main": "src/index.tsx",
+ "dependencies": {
+ "dockview": "*",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.0.28",
+ "@types/react-dom": "^18.0.11",
+ "typescript": "^4.9.5"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/packages/docs/sandboxes/tabheight-dockview/public/index.html b/packages/docs/sandboxes/tabheight-dockview/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/tabheight-dockview/public/index.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ React App
+
+
+
+
+
+
+
+
+
diff --git a/packages/docs/sandboxes/tabheight-dockview/src/app.scss b/packages/docs/sandboxes/tabheight-dockview/src/app.scss
new file mode 100644
index 000000000..315d564ac
--- /dev/null
+++ b/packages/docs/sandboxes/tabheight-dockview/src/app.scss
@@ -0,0 +1,3 @@
+.skinny-tabs {
+ --dv-tabs-and-actions-container-height: 20px;
+}
diff --git a/packages/docs/sandboxes/tabheight-dockview/src/app.tsx b/packages/docs/sandboxes/tabheight-dockview/src/app.tsx
new file mode 100644
index 000000000..bd053a990
--- /dev/null
+++ b/packages/docs/sandboxes/tabheight-dockview/src/app.tsx
@@ -0,0 +1,83 @@
+import {
+ DockviewReact,
+ DockviewReadyEvent,
+ IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+import './app.scss';
+
+const components = {
+ default: (props: IDockviewPanelProps<{ title: string }>) => {
+ return (
+
+
+ );
+}
diff --git a/packages/docs/sandboxes/tabheight-dockview/src/styles.css b/packages/docs/sandboxes/tabheight-dockview/src/styles.css
new file mode 100644
index 000000000..a1d49a9b6
--- /dev/null
+++ b/packages/docs/sandboxes/tabheight-dockview/src/styles.css
@@ -0,0 +1,16 @@
+body {
+ margin: 0px;
+ color: white;
+ font-family: sans-serif;
+ text-align: center;
+}
+
+#root {
+ height: 100vh;
+ width: 100vw;
+}
+
+.app {
+ height: 100%;
+}
+
diff --git a/packages/docs/sandboxes/tabheight-dockview/tsconfig.json b/packages/docs/sandboxes/tabheight-dockview/tsconfig.json
new file mode 100644
index 000000000..6e13e47b5
--- /dev/null
+++ b/packages/docs/sandboxes/tabheight-dockview/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "outDir": "build/dist",
+ "module": "esnext",
+ "target": "es5",
+ "lib": ["es6", "dom"],
+ "sourceMap": true,
+ "allowJs": true,
+ "jsx": "react-jsx",
+ "moduleResolution": "node",
+ "rootDir": "src",
+ "forceConsistentCasingInFileNames": true,
+ "noImplicitReturns": true,
+ "noImplicitThis": true,
+ "noImplicitAny": true,
+ "strictNullChecks": true,
+ "suppressImplicitAnyIndexErrors": true,
+ "noUnusedLocals": true
+ }
+}
diff --git a/packages/docs/versioned_docs/version-1.7.0/basics.mdx b/packages/docs/versioned_docs/version-1.7.0/basics.mdx
deleted file mode 100644
index 91fdcbfd9..000000000
--- a/packages/docs/versioned_docs/version-1.7.0/basics.mdx
+++ /dev/null
@@ -1,119 +0,0 @@
----
-sidebar_position: 1
-description: How to get started with Dockview
----
-
-import { SimpleSplitview } from '@site/src/components/simpleSplitview';
-import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
-
-# Basics
-
-asd
-This section will take you through a number of concepts that can be applied to all dockview components.
-
-## Panels
-
-The below examples use `ReactSplitview` but the logic holds for `ReactPaneview`, `ReactGridview` and `ReactDockview` using their respective implementations and interfaces.
-All components require you to provide an `onReady` prop which you can use to build and control your component.
-
-### Adding a panel with parameters
-
-You can pass parameters to a panel through the `params` object
-
-```tsx
-const onReady = (event: SplitviewReadyEvent) => {
- event.api.addPanel({
- id: 'panel_1',
- component: 'myComponent',
- params: {
- title: 'My Title',
- },
- });
-};
-```
-
-and you can access those properties through the `props.params` object. The TypeScript interface accepts an optional generic type `T` that corresponds to the params objects type.
-
-```tsx
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- return
{`My first panel has the title: ${props.params.title}`}
;
-};
-```
-
-## API
-
-There are two types of API you will interact with using `dockview`.
-
-- The `panel API` is accessible via `props.api` in user defined panels and via the `.api` variable found on panel instances. This API contains actions and variable related to the the individual panel.
-- The `container API` is accessible via `event.api` in the `onReady` events and `props.containerApi` in user defined panels. This API contains actions and variable related to the component as a whole.
-
-```tsx
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- React.useEffect(() => {
- const disposable = props.api.onDidActiveChange((event) => {
- console.log(`is panel active: ${event.isActive}`);
- });
-
- return () => {
- disposable.dispose(); // remember to dispose of any subscriptions
- };
- }, [props.api]);
-
- const addAnotherPanel = React.useCallback(() => {
- props.containerApi.addPanel({
- id: 'another_id',
- component: 'anotherComponent',
- });
- }, [props.containerApi]);
-
- return (
-
- {`My first panel has the title: ${props.params.title}`}
-
-
- );
-};
-```
-
-### Serialization
-
-All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`.
-
-## Auto resizing
-
-`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element.
-Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) which some users may need to polyfill.
-You can disable this by settings the `disableAutoResizing` prop to be `true`.
-
-You can manually resize a component using the API method `layout(width: number, height: number): void`.
-An advanced case may use this in conjunction with `disableAutoResizing=true` to allow a parent component to have ultimate control over the dimensions of the component.
-
-## Events
-
-Many API properties can be listened on using the `Event` pattern. For example `api.onDidFocusChange(() => {...})`.
-You should dispose of any event listeners you create cleaning up any listeners you would have created.
-
-```tsx
-React.useEffect(() => {
- const disposable = api.onDidFocusChange(() => {
- // write some code
- });
-
- return () => {
- disposable.dispose();
- };
-}, []);
-```
-
-## Proportional layout
-
-The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components.
-Although not configurable on `DockviewReact` and `PaneviewReact` these both behave as if `proportionalLayout=true` was set for them.
-
-
-
-
-
-## Browser support
-
-dockview is intended to support all major browsers. Some users may require a polyfill for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
diff --git a/packages/docs/versioned_docs/version-1.7.1/components/_category_.json b/packages/docs/versioned_docs/version-1.7.1/components/_category_.json
new file mode 100644
index 000000000..366718010
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.7.1/components/_category_.json
@@ -0,0 +1,9 @@
+{
+ "label": "Components",
+ "collapsible": true,
+ "collapsed": false,
+ "link": {
+ "type": "generated-index",
+ "title": "Components"
+ }
+}
\ No newline at end of file
diff --git a/packages/docs/versioned_docs/version-1.7.1/components/dockview.mdx b/packages/docs/versioned_docs/version-1.7.1/components/dockview.mdx
new file mode 100644
index 000000000..b6d1a3e46
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.7.1/components/dockview.mdx
@@ -0,0 +1,733 @@
+---
+description: Dockview Documentation
+---
+
+import { Container } from '@site/src/components/ui/container';
+
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import DockviewPersistance 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/groupcontrol-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 { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-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.
+
+```tsx
+import { DockviewReact } from 'dockview';
+```
+
+| Property | Type | Optional | Default | Description |
+| --------------------- | ------------------------------------ | -------- | --------- | ------------------------------------------------------------ |
+| onReady | (event: SplitviewReadyEvent) => void | No | | |
+| components | object | No | | |
+| tabComponents | object | Yes | | |
+| watermarkComponent | object | Yes | | |
+| hideBorders | boolean | Yes | false | |
+| className | string | Yes | '' | |
+| disableAutoResizing | boolean | Yes | false | See Auto Resizing |
+| onDidDrop | Event | Yes | false | |
+| showDndOverlay | Event | Yes | false | |
+| defaultTabComponent | object | Yes | | |
+| groupControlComponent | object | Yes | | |
+| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | |
+
+## 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}`}
{`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ----------------------------------------------------------- | ---------------- |
+| id | `string` | Panel id |
+| isFocused | `boolean` | Is panel focused |
+| isActive | `boolean` | Is panel active |
+| width | `number` | Panel width |
+| height | `number` | Panel height |
+| onDidDimensionsChange | `Event` | |
+| onDidFocusChange | `Event` | |
+| onDidVisibilityChange | `Event` | |
+| onDidActiveChange | `Event` | |
+| setActive | `(): void` | |
+| | | |
+| onDidConstraintsChange | `onDidConstraintsChange: Event` | |
+| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
+| setSize | `(event: SizeEvent): void` | |
+| | | |
+| group | `GroupPanel | undefined` |
+| isGroupActive | `boolean` | |
+| title | `string` | |
+| suppressClosable | `boolean` | |
+| close | `(): void` | |
+| setTitle | `(title: string): void` | |
+
+## Layout Persistance
+
+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_persistance_layout',
+ JSON.stringify(layout)
+ );
+ });
+
+ return () => {
+ disposable.dispose();
+ };
+}, [api]);
+```
+
+```tsx title="Loading a layout from localStorage"
+const onReady = (event: DockviewReadyEvent) => {
+ const layoutString = localStorage.getItem('dockview_persistance_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.
+
+
+
+
+
+## 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
+
+### 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 (
+
+);
+```
+
+
+
+
+
+### Third Party Dnd Libraries
+
+To be completed...
+
+
+
+
+
+## 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` then the provided `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',
+ },
+});
+```
+
+### Panel Rendering
+
+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.
+
+However 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.
+
+> For example 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.
+
+This is the default behaviour to ensure the greatest flexibility for the user but through the panels `props.api` you can listen to the visiblity state of the panel
+and write additional logic to optimize your application.
+
+For example 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.
+
+```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
+
+
+
+
+
+## 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;
+```
+
+### Group Controls Panel
+
+`DockviewReact` accepts a prop `groupControlComponent` which expects a React component whos props are `IDockviewGroupControlProps`.
+This control will be rendered inside the header bar on the right hand side for each group of tabs.
+
+```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 GroupControlComponent = (props: IDockviewGroupControlProps) => {
+ 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.
+
+
+
+
+
+## Events
+
+A simple example showing events fired by `dockviewz that can be interacted with.
+
+
+
+
+
+## Advanced Examples
+
+### 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`.
+
+
+
+
+
+### Example
+
+hello
+
+
+
+hello 2
+
+
+
+
+
+## VanillaJS
+
+> Note: This section is experimental and support for Vanilla JS is a work in progress.
+
+The `dockview` package contains `ReactJS` wrappers for the core library.
+The core library is published as an independant package under the name `dockview-core` which you can install standalone.
+
+> When using `dockview` there is no need to also install `dockview-core`.
+> `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.
+
+
diff --git a/packages/docs/versioned_docs/version-1.7.1/components/gridview.mdx b/packages/docs/versioned_docs/version-1.7.1/components/gridview.mdx
new file mode 100644
index 000000000..d531f7fdc
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.7.1/components/gridview.mdx
@@ -0,0 +1,120 @@
+---
+description: Gridview Documentation
+---
+
+import { SimpleGridview } from '@site/src/components/simpleGridview';
+import { EventsGridview } from '@site/src/components/gridview/events';
+import Link from '@docusaurus/Link';
+
+# Gridview
+
+## Introduction
+
+
+
+You can provide a `headerComponent` option when creating a panel to tell the library to use a custom header component.
+
+```tsx
+const onReady = (event: PaneviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ headerComponent: 'myHeaderComponent',
+ params: {
+ valueA: 'A',
+ },
+ title: 'Panel 1',
+ });
+};
+```
+
+This header must be defined in the collection of components provided to the `headerComponents` props for `ReactPaneivew`
+
+```tsx
+import { IPaneviewPanelProps } from 'dockview';
+
+const MyHeaderComponent = (props: IPaneviewPanelProps<{ title: string }>) => {
+ const [expanded, setExpanded] = React.useState(
+ props.api.isExpanded
+ );
+
+ React.useEffect(() => {
+ const disposable = props.api.onDidExpansionChange((event) => {
+ setExpanded(event.isExpanded);
+ });
+
+ return () => {
+ disposable.dispose();
+ };
+ }, []);
+
+ const onClick = () => {
+ props.api.setExpanded(!expanded);
+ };
+
+ return (
+
+
+ {props.params.title}
+
+ );
+};
+
+const headerComponents = { myHeaderComponent: MyHeaderComponent };
+```
+
+### Drag And Drop
+
+If you provide the `PaneviewReact` component with the prop `onDidDrop` you will be able to interact with custom drop events.
+
+
+
+### Interactions
+
+You can safely create multiple paneview instances within one page. They will not interact with each other by default.
+
+If you wish to interact with the drop event from one paneview instance in another paneview instance you can implement the `showDndOverlay` and `onDidDrop` props on `PaneviewReact`.
+
+As an example see how dragging a header from one control to another will only trigger an interactable event for the developer if the checkbox is enabled.
+
+
diff --git a/packages/docs/versioned_docs/version-1.7.1/components/splitview.mdx b/packages/docs/versioned_docs/version-1.7.1/components/splitview.mdx
new file mode 100644
index 000000000..a32e6d5a2
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.7.1/components/splitview.mdx
@@ -0,0 +1,246 @@
+---
+description: Splitview Documentation
+---
+
+import { SimpleSplitview } from '@site/src/components/simpleSplitview';
+import { SplitviewExample1 } from '@site/src/components/splitview/active';
+import Link from '@docusaurus/Link';
+
+# Splitview
+
+## Introduction
+
+A Splitview is a collection of resizable horizontally or vertically stacked panels.
+
+
;
+ },
+};
+
+export const SimpleSplitview = () => {
+ const onReady = (event: SplitviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ params: {
+ title: 'Panel 1',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ params: {
+ title: 'Panel 2',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ params: {
+ title: 'Panel 3',
+ },
+ });
+ };
+
+ return (
+
+ );
+};
+```
+
+## SplitviewReact Component
+
+You can create a Splitview through the use of the `ReactSplitview` component.
+
+```tsx
+import { ReactSplitview } from 'dockview';
+```
+
+Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels.
+
+| Property | Type | Optional | Default | Description |
+| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ |
+| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function |
+| components | `Record` | No | | Panel renderers |
+| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
+| proportionalLayout | `boolean` | Yes | `true` | See Proportional layout |
+| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
+| className | `string` | Yes | `''` | Attaches a classname |
+| disableAutoResizing | `boolean` | Yes | `false` | See Auto Resizing |
+
+## Splitview API
+
+The Splitview 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="Splitview API via Panel component"
+const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
+ // props.containerApi...
+
+ return
{`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+```tsx title="Splitview API via the onReady callback"
+const onReady = (event: SplitviewReadyEvent) => {
+ // event.api...
+};
+```
+
+| Property | Type | Description |
+| ------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- |
+| height | `number` | Component pixel height |
+| width | `number` | Component pixel width |
+| minimumSize | `number` | The sum of the `minimumSize` property for each panel |
+| maximumSize | `number` | The sum of the `maximumSize` property for each panel |
+| length | `number` | Number of panels |
+| panels | `ISplitviewPanel[]` | All panels |
+| | | |
+| onDidLayoutChange | `Event` | Fires on layout change |
+| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call |
+| onDidAddView | `Event` | Fires when a view is added |
+| onDidRemoveView | `Event` | Fires when a view is removed |
+| | | |
+| addPanel | `addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel` | |
+| removePanel | `(panel: ISplitviewPanel, sizing?: Sizing): void` | |
+| getPanel | `(id:string): ISplitviewPanel \| undefined` | |
+| movePanel | `(from: number, to: number): void` | |
+| | |
+| updateOptions | `(options: SplitviewComponentUpdateOptions): void` | |
+| focus | `(): void` | Focus the active panel, if exists |
+| layout | `(width: number, height:number): void` | See Auto Resizing |
+| fromJSON | `(data: SerializedSplitview): void` | Serialization |
+| toJSON | `(): SerializedSplitview` | Serialization |
+| clear | `(): void` | Clears the current layout |
+
+## Splitview Panel API
+
+The Splitview panel API is exposed on each panel containing actions and variables specific to that panel.
+
+```tsx title="Splitview panel API via Panel component"
+const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
+ // props.api...
+
+ return
{`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| id | `string` | Panel id |
+| isFocused | `boolean` | Is panel focsed |
+| isActive | `boolean` | Is panel active |
+| isVisible | `boolean` | Is panel visible |
+| width | `number` | Panel width |
+| height | `number` | Panel height |
+| | | |
+| onDidDimensionsChange | `Event` | Fires when panel dimensions change |
+| onDidFocusChange | `Event` | Fire when panel is focused and blurred |
+| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) |
+| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) |
+| onDidConstraintsChange | `onDidConstraintsChange: Event` | Fires when the panels size contrainsts change (see Panel Constraints) |
+| | | |
+| setVisible | `(isVisible: boolean): void` | |
+| setActive | `(): void` | |
+| | | |
+| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
+| setSize | `(event: PanelSizeEvent): void` | |
+
+## Advanced Features
+
+Listed below are some functionalities avalaible through both the panel and component APIs. The live demo shows examples of these in real-time.
+
+
+
+
+
+### Visibility
+
+A panels visibility can be controlled and monitored through the following code.
+A panel with visibility set to `false` will remain as a part of the components list of panels but will not be rendered.
+
+```tsx
+const disposable = props.api.onDidVisibilityChange(({ isVisible }) => {
+ //
+});
+```
+
+```tsx
+api.setVisible(true);
+```
+
+### Active
+
+Only one panel in the `splitview` can be the active panel at any one time.
+Setting a panel as active will set all the others as inactive.
+A focused panel is always the active panel but an active panel is not always focused.
+
+```tsx
+const disposable = props.api.onDidActiveChange(({ isActive }) => {
+ //
+});
+```
+
+```tsx
+api.setActive();
+```
+
+### Contraints
+
+When adding a panel you can specify pixel size contraints
+
+```tsx
+event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ minimumSize: 100,
+ maximumSize: 1000,
+});
+```
+
+These contraints can be updated throughout the lifecycle of the `splitview` using the panel API
+
+```tsx
+props.api.onDidConstraintsChange(({ maximumSize, minimumSize }) => {
+ //
+});
+```
+
+```tsx
+api.setConstraints({
+ maximumSize: 200,
+ minimumSize: 400,
+});
+```
diff --git a/packages/docs/versioned_docs/version-1.7.1/example.mdx b/packages/docs/versioned_docs/version-1.7.1/example.mdx
new file mode 100644
index 000000000..29989cd51
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.7.1/example.mdx
@@ -0,0 +1,8 @@
+import Dockview from '@site/sandboxes/advanced-example-dockview/src/app';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import { Container } from '@site/src/components/ui/container';
+
+
+
+
diff --git a/packages/docs/versioned_docs/version-1.7.1/index.mdx b/packages/docs/versioned_docs/version-1.7.1/index.mdx
new file mode 100644
index 000000000..0e96a515f
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.7.1/index.mdx
@@ -0,0 +1,149 @@
+---
+sidebar_position: 0
+description: A zero dependency layout manager built for React
+---
+
+import { SimpleSplitview } from '@site/src/components/simpleSplitview';
+import { SimpleGridview } from '@site/src/components/simpleGridview';
+import { SimplePaneview } from '@site/src/components/simplePaneview';
+import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
+
+# Introduction
+
+**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
+
+## Features
+
+- Themable and customizable
+- Support for the serialization and deserialization of layouts
+- Drag and drop support
+
+## 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';
+```
+
+A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the `body` component:
+
+```html
+
+ ...
+
+
+ ...
+
+```
+
+There are 4 components you may want to use:
+
+Splitview
+
+
})
+
+> 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.
+
+})
+ })
+