(false);
+
+ const onClick = () => {
+ setExpaned(!expanded);
+ };
+
+ const cn = React.useMemo(() => {
+ return ['node', expanded ? 'expanded' : 'collapsed'].join(' ');
+ }, [expanded]);
+
+ return (
+ <>
+
+ {props.page.url ? (
+
+
+ {props.children}
+
+
+ );
+};
+
+export const Node = (props: { page: Page; depth: number }) => {
+ if (props.page.routes) {
+ return (
+
+ {props.page.routes.map((page) => (
+
+ );
+ }
+
+ return (
+
+ {props.page.url ? (
+
+ );
+};
+
+export const Navigation = (props: { pages: Page[] }) => {
+ return (
+
+ {props.pages.map((page) => (
+
+ );
+};
diff --git a/packages/dockview-docs/src/components/simpleSplitview.tsx b/packages/dockview-docs/src/components/simpleSplitview.tsx
new file mode 100644
index 000000000..dfa95a711
--- /dev/null
+++ b/packages/dockview-docs/src/components/simpleSplitview.tsx
@@ -0,0 +1,49 @@
+import {
+ ISplitviewPanelProps,
+ Orientation,
+ SplitviewReact,
+ SplitviewReadyEvent,
+} from 'dockview';
+
+const components = {
+ default: (props: ISplitviewPanelProps<{ title: string }>) => {
+ return {props.params.title}
;
+ },
+};
+
+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 (
+ this is a test component
;
+};
diff --git a/packages/dockview-docs/src/pages/_app.tsx b/packages/dockview-docs/src/pages/_app.tsx
new file mode 100644
index 000000000..b93704f16
--- /dev/null
+++ b/packages/dockview-docs/src/pages/_app.tsx
@@ -0,0 +1,33 @@
+import { Header } from '../components/header';
+import { Footer } from '../components/footer';
+import { Container } from '../components/container';
+import { AppProps } from 'next/app';
+import '../styles/globals.css';
+import { CodeBlock } from '../components/code';
+import { MDXProvider } from '@mdx-js/react';
+
+const components = {
+ code: CodeBlock,
+} as any;
+
+const MyApp = (props: AppProps) => {
+ return (
+
+ );
+};
+
+export default MyApp;
diff --git a/packages/dockview-docs/src/pages/_document.tsx b/packages/dockview-docs/src/pages/_document.tsx
new file mode 100644
index 000000000..5e76a414d
--- /dev/null
+++ b/packages/dockview-docs/src/pages/_document.tsx
@@ -0,0 +1,28 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+ return (
+
+
+
+
+ );
+};
+
+export default Component;
diff --git a/packages/dockview-docs/src/pages/basics.tsx b/packages/dockview-docs/src/pages/basics.tsx
new file mode 100644
index 000000000..504049760
--- /dev/null
+++ b/packages/dockview-docs/src/pages/basics.tsx
@@ -0,0 +1,9 @@
+import { NextPage } from 'next';
+
+const Page: NextPage = (props) => {
+ return (
+ basics
+ );
+};
+
+export default Page;
diff --git a/packages/dockview-docs/src/pages/index.mdx b/packages/dockview-docs/src/pages/index.mdx
new file mode 100644
index 000000000..92e58e2a6
--- /dev/null
+++ b/packages/dockview-docs/src/pages/index.mdx
@@ -0,0 +1,130 @@
+import { SimpleSplitview } from '../components/simpleSplitview';
+
+# 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
+
+
+
+
+```tsx
+import {
+ DockviewReact,
+ DockviewReadyEvent,
+ PanelCollection,
+ IDockviewPanelProps,
+ IDockviewPanelHeaderProps,
+} from 'dockview';
+
+const components: PanelCollection = {
+ default: (props: IDockviewPanelProps<{ someProps: string }>) => {
+ return {props.params.someProps}
;
+ },
+};
+
+const headers: PanelCollection = {
+ customTab: (props: IDockviewPanelHeaderProps) => {
+ return (
+
+ {props.api.title}
+ props.api.close()}>{'[x]'}
+
+ );
+ },
+};
+
+const Component = () => {
+ const onReady = (event: DockviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel1',
+ component: 'default',
+ tabComponent: 'customTab', // optional custom header
+ params: {
+ someProps: 'Hello',
+ },
+ });
+ event.api.addPanel({
+ id: 'panel2',
+ component: 'default',
+ params: {
+ someProps: 'World',
+ },
+ position: { referencePanel: 'panel1', direction: 'below' },
+ });
+ };
+
+ return (
+ = {
+ default: (props: IDockviewPanelProps<{ someProps: string }>) => {
+ return {props.params.someProps}
;
+ },
+ fancy: (props: IDockviewPanelProps) => {
+ return (
+
+
+
+ {props.api.title}
+ props.api.close()}>{'Close'}
+
+
+
+ {'Hello world'}
+
+
+ );
+ },
+};
+```
diff --git a/packages/dockview-docs/src/references/pages.ts b/packages/dockview-docs/src/references/pages.ts
new file mode 100644
index 000000000..a43cbbc2b
--- /dev/null
+++ b/packages/dockview-docs/src/references/pages.ts
@@ -0,0 +1,49 @@
+export interface Page {
+ title: string;
+ url?: string;
+ routes?: Page[];
+}
+
+export const PAGES: Page[] = [
+ { title: 'Introduction', url: '/#introduction' },
+ { title: 'Basics', url: '/basics/#basics' },
+ {
+ title: 'API',
+ url: '#api',
+ routes: [
+ {
+ title: 'Dockview',
+ url: '#dockview',
+ routes: [
+ { title: 'Item1', url: '/item1' },
+ { title: 'Item2', url: '/item2' },
+ ],
+ },
+ // {
+ // title: 'Gridview',
+ // url: '#gridview',
+ // routes: [
+ // { title: 'Item1', url: 'item1' },
+ // { title: 'Item2', url: 'item2' },
+ // ],
+ // },
+ // {
+ // title: 'Splitview',
+ // url: '#splitview',
+ // routes: [
+ // { title: 'Item1', url: 'item1' },
+ // { title: 'Item2', url: 'item2' },
+ // ],
+ // },
+ // {
+ // title: 'Paneview',
+ // url: '#paneivew',
+ // routes: [
+ // { title: 'Item1', url: 'item1' },
+ // { title: 'Item2', url: 'item2' },
+ // ],
+ // },
+ ],
+ },
+ { title: 'Guides', url: '#guides' },
+];
diff --git a/packages/dockview-docs/src/styles/globals.css b/packages/dockview-docs/src/styles/globals.css
new file mode 100644
index 000000000..f223dbdf6
--- /dev/null
+++ b/packages/dockview-docs/src/styles/globals.css
@@ -0,0 +1,43 @@
+@import "./navigation.css";
+@import "~dockview/dist/styles/dockview.css";
+
+html,
+body {
+ padding: 0;
+ margin: 0;
+ /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
+ font-family: 'Roboto', sans-serif;
+}
+
+a {
+ text-decoration: none;
+ color:dodgerblue;
+}
+
+a, a:hover, a:visited, a:active {
+ color:dodgerblue;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+
+* {
+ box-sizing: border-box;
+}
+
+.icon {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ margin-left: 8px;
+}
+
+.icon-link {
+ background-image: url(/icon-link.svg);
+ background-repeat: no-repeat;
+ background-size: 100%;
+ background-position: center center;
+}
diff --git a/packages/dockview-docs/src/styles/navigation.css b/packages/dockview-docs/src/styles/navigation.css
new file mode 100644
index 000000000..b45580967
--- /dev/null
+++ b/packages/dockview-docs/src/styles/navigation.css
@@ -0,0 +1,45 @@
+.navigation {
+ padding: 30px;
+ background-color: lightgray;
+ font-size: 16px;
+ width: 200px;
+ border-radius: 15px;
+}
+
+.node {
+ padding: 5px 0px;
+ cursor: pointer;
+}
+
+.expandable-node::after {
+
+}
+
+.expanded::after {
+ border-width: 6px 4px 0px;
+ border-color: grey transparent transparent;
+ content: '';
+ width: 0px;
+ height: 0px;
+ border-style: solid;
+ border-radius: 1px;
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 10px;
+ margin-bottom: 2px;
+}
+
+
+.collapsed::after {
+ border-width: 4px 6px 4px 0px;
+ border-color: transparent grey transparent;
+ content: '';
+ width: 0px;
+ height: 0px;
+ border-style: solid;
+ border-radius: 1px;
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 10px;
+ margin-bottom: 2px;
+}
diff --git a/packages/dockview-docs/src/test.tsx b/packages/dockview-docs/src/test.tsx
new file mode 100644
index 000000000..d657ae536
--- /dev/null
+++ b/packages/dockview-docs/src/test.tsx
@@ -0,0 +1,79 @@
+import {
+ GridviewReact,
+ Orientation,
+ GridviewReadyEvent,
+ DockviewReact,
+ DockviewReadyEvent,
+} from 'dockview';
+
+const components = {
+ default: () => {
+ return hello world
;
+ },
+ docking: () => {
+ return hello world
;
+ },
+};
+
+export const Test2 = () => {
+ const onReady = (event: DockviewReadyEvent) => {
+ event.api.addPanel({
+ component: 'default',
+ id: 'view_1',
+ });
+
+ event.api.addPanel({
+ component: 'default',
+ id: 'view_2',
+ });
+
+ event.api.addPanel({
+ component: 'default',
+ id: 'view_3',
+ });
+ };
+
+ return (
+ //
+
+ );
+};
diff --git a/packages/dockview-docs/tsconfig.json b/packages/dockview-docs/tsconfig.json
new file mode 100644
index 000000000..0b1236256
--- /dev/null
+++ b/packages/dockview-docs/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/pages/index.msx", "src/pages/basic.stsx"],
+ "exclude": ["node_modules"],
+ "paths": {
+ "react": ["node_modules/react"],
+ "react-dom": ["node_modules/react-dom"]
+ }
+}