From 2323c24a6ab82b260a3adeceebb4eedf83447e8c Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Thu, 13 Jul 2023 21:01:43 +0100 Subject: [PATCH] chore: docs --- packages/docs/docs/components/_category_.json | 1 + packages/docs/docs/components/dockview.mdx | 106 +++++++++--------- packages/docs/docs/components/gridview.mdx | 24 ++-- packages/docs/docs/components/paneview.mdx | 24 ++-- packages/docs/docs/components/splitview.mdx | 24 ++-- packages/docs/docs/contributing.mdx | 52 +++++++++ packages/docs/docs/theme.mdx | 2 +- 7 files changed, 143 insertions(+), 90 deletions(-) create mode 100644 packages/docs/docs/contributing.mdx diff --git a/packages/docs/docs/components/_category_.json b/packages/docs/docs/components/_category_.json index 366718010..07caf3db9 100644 --- a/packages/docs/docs/components/_category_.json +++ b/packages/docs/docs/components/_category_.json @@ -2,6 +2,7 @@ "label": "Components", "collapsible": true, "collapsed": false, + "position": 2, "link": { "type": "generated-index", "title": "Components" diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index c638dd371..b26720281 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -57,21 +57,21 @@ You can create a Dockview through the use of the `DockviewReact` component. 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 | | | -| leftHeaderActionsComponent | object | Yes | | | -| rightHeaderActionsComponent | object | Yes | | | -| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | +| 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 | | +| onDidDrop | Event | Yes | false | | +| showDndOverlay | Event | Yes | false | | +| defaultTabComponent | object | Yes | | | +| leftHeaderActionsComponent | object | Yes | | | +| rightHeaderActionsComponent | object | Yes | | | +| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | ## Dockview API @@ -92,44 +92,44 @@ const onReady = (event: DockviewReadyEvent) => { }; ``` -| Property | Type | Description | -| ---------------------- | ---------------------------------------------------- | -------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumHeight | `number` | | -| maximumHeight | `number` | | -| maximumWidth | `number` | | -| maximumWidth | `number` | | -| length | `number` | Number of panels | -| size | `number` | Number of Groups | -| panels | `IDockviewPanel[]` | | -| groups | `GroupPanel[]` | | -| activePanel | `IDockviewPanel \| undefined` | | -| activeGroup | `IDockviewPanel \| undefined` | | -| | | | -| onDidLayoutChange | `Event` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddGroup | `Event` | | -| onDidRemoveGroup | `Event` | | -| onDidActiveGroupChange | `Event` | | -| onDidAddPanel | `Event` | | -| onDidRemovePanel | `Event` | | -| onDidActivePanelChange | `Event` | | -| onDidDrop | `EventAuto Resizing | -| fromJSON | `(data: SerializedDockview): void` | Serialization | -| toJSON | `(): SerializedDockview` | Serialization | -| clear | `(): void` | Clears the current layout | +| Property | Type | Description | +| ---------------------- | ---------------------------------------------------- | ------------------------- | +| height | `number` | Component pixel height | +| width | `number` | Component pixel width | +| minimumHeight | `number` | | +| maximumHeight | `number` | | +| maximumWidth | `number` | | +| maximumWidth | `number` | | +| length | `number` | Number of panels | +| size | `number` | Number of Groups | +| panels | `IDockviewPanel[]` | | +| groups | `GroupPanel[]` | | +| activePanel | `IDockviewPanel \| undefined` | | +| activeGroup | `IDockviewPanel \| undefined` | | +| | | | +| onDidLayoutChange | `Event` | | +| onDidLayoutFromJSON | `Event` | | +| onDidAddGroup | `Event` | | +| onDidRemoveGroup | `Event` | | +| onDidActiveGroupChange | `Event` | | +| onDidAddPanel | `Event` | | +| onDidRemovePanel | `Event` | | +| onDidActivePanelChange | `Event` | | +| onDidDrop | `Event void | No | | | -| components | object | No | | | -| orientation | Orientation | Yes | Orientation.HORIZONTAL | | -| proportionalLayout | boolean | Yes | true | See Proportional layout | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | See Auto Resizing | +| Property | Type | Optional | Default | Description | +| ------------------- | ------------------------------------ | -------- | ---------------------- | ----------- | +| onReady | (event: SplitviewReadyEvent) => void | No | | | +| components | object | No | | | +| orientation | Orientation | Yes | Orientation.HORIZONTAL | | +| proportionalLayout | boolean | Yes | true | | +| hideBorders | boolean | Yes | false | | +| className | string | Yes | '' | | +| disableAutoResizing | boolean | Yes | false | > | ## Gridview API @@ -78,9 +78,9 @@ const onReady = (event: GridviewReadyEvent) => { | | | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | Auto Resizing | -| fromJSON | `(data: SerializedGridview): void` | Serialization | -| toJSON | `(): SerializedGridview` | Serialization | +| layout | `(width: number, height:number): void` | | +| fromJSON | `(data: SerializedGridview): void` | | +| toJSON | `(): SerializedGridview` | | | clear | `(): void` | Clears the current layout | ## Gridview Panel API diff --git a/packages/docs/docs/components/paneview.mdx b/packages/docs/docs/components/paneview.mdx index 87efc8eaa..c33fe43aa 100644 --- a/packages/docs/docs/components/paneview.mdx +++ b/packages/docs/docs/components/paneview.mdx @@ -106,15 +106,15 @@ You can create a Paneview through the use of the `ReactPaneview` component. import { ReactPaneview } from 'dockview'; ``` -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------- | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| headerComponents | object | Yes | | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | Auto Resizing | -| disableDnd | boolean | Yes | false | | -| onDidDrop | Event | Yes | | | +| Property | Type | Optional | Default | Description | +| ------------------- | ------------------------------------ | -------- | ------- | ----------- | +| onReady | (event: SplitviewReadyEvent) => void | No | | | +| components | object | No | | | +| headerComponents | object | Yes | | | +| className | string | Yes | '' | | +| disableAutoResizing | boolean | Yes | false | | +| disableDnd | boolean | Yes | false | | +| onDidDrop | Event | Yes | | | ## Paneview API @@ -156,9 +156,9 @@ const onReady = (event: GridviewReadyEvent) => { | getPanel | `(id:string): IPaneviewPanel \| undefined` | | | | | | | focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | See Auto Resizing | -| fromJSON | `(data: SerializedPaneview): void` | Serialization | -| toJSON | `(): SerializedPaneview` | Serialization | +| layout | `(width: number, height:number): void` | | +| fromJSON | `(data: SerializedPaneview): void` | | +| toJSON | `(): SerializedPaneview` | | | clear | `(): void` | Clears the current layout | ## Paneview Panel API diff --git a/packages/docs/docs/components/splitview.mdx b/packages/docs/docs/components/splitview.mdx index a32e6d5a2..05b7018c0 100644 --- a/packages/docs/docs/components/splitview.mdx +++ b/packages/docs/docs/components/splitview.mdx @@ -85,15 +85,15 @@ 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 | +| 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` | | +| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | +| className | `string` | Yes | `''` | Attaches a classname | +| disableAutoResizing | `boolean` | Yes | `false` | | ## Splitview API @@ -135,9 +135,9 @@ const onReady = (event: SplitviewReadyEvent) => { | | | | 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 | +| layout | `(width: number, height:number): void` | | +| fromJSON | `(data: SerializedSplitview): void` | | +| toJSON | `(): SerializedSplitview` | | | clear | `(): void` | Clears the current layout | ## Splitview Panel API diff --git a/packages/docs/docs/contributing.mdx b/packages/docs/docs/contributing.mdx new file mode 100644 index 000000000..e35ed70d4 --- /dev/null +++ b/packages/docs/docs/contributing.mdx @@ -0,0 +1,52 @@ +--- +sidebar_position: 3 +description: Contributing +--- + +# Contributing + +# Project description + +Dockview is a layout manager library designed to provide a complete layouting solution. +It is written in plain TypeScript and can be used without any framework although +an extensive React wrapper has always and will always be provided for those using the React framework. + +The project is hosted on GitHub and developed within a Monorepo powered by [Lerna](https://github.com/lerna/lerna). +It is developed using the `yarn` package manager since at the time of creation `yarn` was far superior when it came to managing monorepos. +The Monorepo contains three packages: + +#### packages/dockview-core + +The core project is entirely written in plain TypeScript without any frameworks or dependencies and it's source-code can be found +within the `dockview-core` package which is also published to npm. + +#### packages/dockview + +A complete collection of React components for use through the React framework to use dockview seamlessly +and is published to npm. It depends explicitly on `dockview-core` so there is no need to additionally install `dockview-core`. + +> Dockview was originally a React-only library which is why the React version maintains the name `dockview` after +> splitting the core logic into a seperate package named `dockview-core`. + +#### packages/docs + +This package contains the code for this documentation website and examples hosted through **CodeSandbox**. It is **not** a published package on npm. + +# Run the project locally + +1. After you have cloned the project from GitHub run `yarn` at the root of the project which will install all project dependencies. +2. In order build `packages/dockview-core` then `packages/dockview`. +3. Run the docs website through `npm run start` in the `packages/docs` directory and go to _http://localhost:3000_ which + will now be running the local copy of `dockview` that you have just built. + +### Examples + +All examples can be found under [**packages/docs/sandboxes**](https://github.com/mathuo/dockview/tree/master/packages/docs/sandboxes). +Each example is an independently runnable example through **CodeSandbox**. +Through the documentation you will see links to runnable **CodeSandbox** examples. + +## FAQ + +#### Are there any plans to publish wrapper libraries for other frameworks such as Angular and Vue? + +Currently no but this is open for contributors to try. diff --git a/packages/docs/docs/theme.mdx b/packages/docs/docs/theme.mdx index 487683299..49a8c23ef 100644 --- a/packages/docs/docs/theme.mdx +++ b/packages/docs/docs/theme.mdx @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 1 description: Theming Dockview Components ---