rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-18 22:25:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #301 from mathuo/295-documentation

Browse Source 
295 documentation
This commit is contained in:
mathuo 2023-07-14 20:32:14 +01:00 committed by GitHub
commit 11269c4625
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 2744 additions and 2603 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dockview-core/README.md
View File

@ -1,7 +1,7 @@
<div align="center"> <div align="center">
<h1>dockview</h1> <h1>dockview</h1>
<p>Zero dependency layout manager supporting tabs, grids and splitviews written in TypeScript</p> <p>Zero dependency layout manager supporting tabs, groups, grids and splitviews written in TypeScript</p>
</div> </div>

8
packages/dockview-core/package.json
View File

@ -14,12 +14,12 @@
}, },
"homepage": "https://github.com/mathuo/dockview", "homepage": "https://github.com/mathuo/dockview",
"scripts": { "scripts": {
"build:ci": "npm run build:cjs && npm run build:esm && npm run build:css", "build:package": "npm run build:cjs && npm run build:esm && npm run build:css",
"build:cjs": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.json --extendedDiagnostics", "build:cjs": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.json --extendedDiagnostics",
"build:css": "gulp sass", "build:css": "gulp sass",
"build:esm": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.esm.json --extendedDiagnostics", "build:esm": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.esm.json --extendedDiagnostics",
"build:modulefiles": "rollup -c", "build:bundles": "rollup -c",
"build": "npm run build:ci && npm run build:modulefiles", "build": "npm run build:package && npm run build:bundles",
"clean": "rimraf dist/ .build/ .rollup.cache/", "clean": "rimraf dist/ .build/ .rollup.cache/",
"prepublishOnly": "npm run rebuild && npm run test", "prepublishOnly": "npm run rebuild && npm run test",
"docs": "typedoc", "docs": "typedoc",
@ -65,4 +65,4 @@
"rollup-plugin-postcss": "^4.0.2", "rollup-plugin-postcss": "^4.0.2",
"typedoc": "^0.23.25" "typedoc": "^0.23.25"
} }
} }

5
packages/dockview-core/rollup.config.js
View File

@ -46,6 +46,7 @@ function createBundle(format, options) {
const output = { const output = {
file, file,
format, format,
sourcemap: true,
globals: {}, globals: {},
banner: [ banner: [
`/**`, `/**`,
@ -57,13 +58,9 @@ function createBundle(format, options) {
].join('\n'), ].join('\n'),
}; };
const plugins = [ const plugins = [
typescript({ typescript({
tsconfig: 'tsconfig.esm.json', tsconfig: 'tsconfig.esm.json',
compilerOptions: {
declaration: false,
},
}), }),
]; ];

2
packages/dockview/README.md
View File

@ -1,7 +1,7 @@
<div align="center"> <div align="center">
<h1>dockview</h1> <h1>dockview</h1>
<p>Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support written in TypeScript</p> <p>Zero dependency layout manager supporting tabs, groups, grids and splitviews with ReactJS support written in TypeScript</p>
</div> </div>

8
packages/dockview/package.json
View File

@ -14,12 +14,12 @@
}, },
"homepage": "https://github.com/mathuo/dockview", "homepage": "https://github.com/mathuo/dockview",
"scripts": { "scripts": {
"build:ci": "npm run build:cjs && npm run build:esm && npm run build:css", "build:package": "npm run build:cjs && npm run build:esm && npm run build:css",
"build:cjs": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.json --extendedDiagnostics", "build:cjs": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.json --extendedDiagnostics",
"build:css": "gulp sass", "build:css": "gulp sass",
"build:esm": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.esm.json --extendedDiagnostics", "build:esm": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.esm.json --extendedDiagnostics",
"build:modulefiles": "rollup -c", "build:bundles": "rollup -c",
"build": "npm run build:ci && npm run build:modulefiles", "build": "npm run build:package && npm run build:bundles",
"clean": "rimraf dist/ .build/ .rollup.cache/", "clean": "rimraf dist/ .build/ .rollup.cache/",
"docs": "typedoc", "docs": "typedoc",
"prepublishOnly": "npm run rebuild && npm run test", "prepublishOnly": "npm run rebuild && npm run test",
@ -73,4 +73,4 @@
"rollup": "^3.15.0", "rollup": "^3.15.0",
"rollup-plugin-postcss": "^4.0.2" "rollup-plugin-postcss": "^4.0.2"
} }
} }

4
packages/dockview/rollup.config.js
View File

@ -47,6 +47,7 @@ function createBundle(format, options) {
const output = { const output = {
file, file,
format, format,
sourcemap: true,
globals: {}, globals: {},
banner: [ banner: [
`/**`, `/**`,
@ -64,9 +65,6 @@ function createBundle(format, options) {
}), }),
typescript({ typescript({
tsconfig: 'tsconfig.esm.json', tsconfig: 'tsconfig.esm.json',
compilerOptions: {
declaration: false,
},
}), }),
]; ];

1
packages/docs/docs/components/_category_.json
View File

@ -2,6 +2,7 @@
"label": "Components", "label": "Components",
"collapsible": true, "collapsible": true,
"collapsed": false, "collapsed": false,
"position": 2,
"link": { "link": {
"type": "generated-index", "type": "generated-index",
"title": "Components" "title": "Components"

106
packages/docs/docs/components/dockview.mdx
View File

@ -57,21 +57,21 @@ You can create a Dockview through the use of the `DockviewReact` component.
import { DockviewReact } from 'dockview'; import { DockviewReact } from 'dockview';
``` ```
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| --------------------------- | ------------------------------------ | -------- | --------- | ------------------------------------------------------------ | | --------------------------- | ------------------------------------ | -------- | --------- | ----------- |
| onReady | (event: SplitviewReadyEvent) => void | No | | | | onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | | | components | object | No | | |
| tabComponents | object | Yes | | | | tabComponents | object | Yes | | |
| watermarkComponent | object | Yes | | | | watermarkComponent | object | Yes | | |
| hideBorders | boolean | Yes | false | | | hideBorders | boolean | Yes | false | |
| className | string | Yes | '' | | | className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | boolean | Yes | false | |
| onDidDrop | Event | Yes | false | | | onDidDrop | Event | Yes | false | |
| showDndOverlay | Event | Yes | false | | | showDndOverlay | Event | Yes | false | |
| defaultTabComponent | object | Yes | | | | defaultTabComponent | object | Yes | | |
| leftHeaderActionsComponent | object | Yes | | | | leftHeaderActionsComponent | object | Yes | | |
| rightHeaderActionsComponent | object | Yes | | | | rightHeaderActionsComponent | object | Yes | | |
| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | | singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | |
## Dockview API ## Dockview API
@ -92,44 +92,44 @@ const onReady = (event: DockviewReadyEvent) => {
}; };
``` ```
| Property | Type | Description | | Property | Type | Description |
| ---------------------- | ---------------------------------------------------- | -------------------------------------------------------- | | ---------------------- | ---------------------------------------------------- | ------------------------- |
| height | `number` | Component pixel height | | height | `number` | Component pixel height |
| width | `number` | Component pixel width | | width | `number` | Component pixel width |
| minimumHeight | `number` | | | minimumHeight | `number` | |
| maximumHeight | `number` | | | maximumHeight | `number` | |
| maximumWidth | `number` | | | maximumWidth | `number` | |
| maximumWidth | `number` | | | maximumWidth | `number` | |
| length | `number` | Number of panels | | length | `number` | Number of panels |
| size | `number` | Number of Groups | | size | `number` | Number of Groups |
| panels | `IDockviewPanel[]` | | | panels | `IDockviewPanel[]` | |
| groups | `GroupPanel[]` | | | groups | `GroupPanel[]` | |
| activePanel | `IDockviewPanel \| undefined` | | | activePanel | `IDockviewPanel \| undefined` | |
| activeGroup | `IDockviewPanel \| undefined` | | | activeGroup | `IDockviewPanel \| undefined` | |
| | | | | | | |
| onDidLayoutChange | `Event<void>` | | | onDidLayoutChange | `Event<void>` | |
| onDidLayoutFromJSON | `Event<void>` | | | onDidLayoutFromJSON | `Event<void>` | |
| onDidAddGroup | `Event<GroupPanel>` | | | onDidAddGroup | `Event<GroupPanel>` | |
| onDidRemoveGroup | `Event<GroupPanel>` | | | onDidRemoveGroup | `Event<GroupPanel>` | |
| onDidActiveGroupChange | `Event<GroupPanel \| undefined>` | | | onDidActiveGroupChange | `Event<GroupPanel \| undefined>` | |
| onDidAddPanel | `Event<IDockviewPanel>` | | | onDidAddPanel | `Event<IDockviewPanel>` | |
| onDidRemovePanel | `Event<IDockviewPanel>` | | | onDidRemovePanel | `Event<IDockviewPanel>` | |
| onDidActivePanelChange | `Event<IDockviewPanel \| undefined>` | | | onDidActivePanelChange | `Event<IDockviewPanel \| undefined>` | |
| onDidDrop | `Event<DockviewDropEvent` | | | onDidDrop | `Event<DockviewDropEvent` | |
| | | | | | | |
| addPanel | `addPanel(options: AddPanelOptions): IDockviewPanel` | | | addPanel | `addPanel(options: AddPanelOptions): IDockviewPanel` | |
| getPanel | `(id: string) \| IDockviewPanel \| undefined` | | | getPanel | `(id: string) \| IDockviewPanel \| undefined` | |
| addGroup | `(options? AddGroupOptions): void` | | | addGroup | `(options? AddGroupOptions): void` | |
| closeAllGroups | `(): void` | | | closeAllGroups | `(): void` | |
| removeGroup | `(group: GroupPanel): void` | | | removeGroup | `(group: GroupPanel): void` | |
| getGroup | `(id: string): GroupPanel \| undefined` | | | getGroup | `(id: string): GroupPanel \| undefined` | |
| | | | | | | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | | | focus | `(): void` | |
| layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | |
| fromJSON | `(data: SerializedDockview): void` | <Link to="../basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedDockview): void` | |
| toJSON | `(): SerializedDockview` | <Link to="../basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedDockview` | |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Dockview Panel API ## Dockview Panel API

24
packages/docs/docs/components/gridview.mdx
View File

@ -27,15 +27,15 @@ import Link from '@docusaurus/Link';
import { ReactGridview } from 'dockview'; import { ReactGridview } from 'dockview';
``` ```
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------------------------------------ | | ------------------- | ------------------------------------ | -------- | ---------------------- | ----------- |
| onReady | (event: SplitviewReadyEvent) => void | No | | | | onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | | | components | object | No | | |
| orientation | Orientation | Yes | Orientation.HORIZONTAL | | | orientation | Orientation | Yes | Orientation.HORIZONTAL | |
| proportionalLayout | boolean | Yes | true | See <Link to="../basics/#proportional-layout">Proportional layout</Link> | | proportionalLayout | boolean | Yes | true | |
| hideBorders | boolean | Yes | false | | | hideBorders | boolean | Yes | false | |
| className | string | Yes | '' | | | className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | boolean | Yes | false | > |
## Gridview API ## Gridview API
@ -78,9 +78,9 @@ const onReady = (event: GridviewReadyEvent) => {
| | | | | | | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | Focus the active panel, if exists | | focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | |
| fromJSON | `(data: SerializedGridview): void` | <Link to="../basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedGridview): void` | |
| toJSON | `(): SerializedGridview` | <Link to="../basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedGridview` | |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Gridview Panel API ## Gridview Panel API

24
packages/docs/docs/components/paneview.mdx
View File

@ -106,15 +106,15 @@ You can create a Paneview through the use of the `ReactPaneview` component.
import { ReactPaneview } from 'dockview'; import { ReactPaneview } from 'dockview';
``` ```
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------- | | ------------------- | ------------------------------------ | -------- | ------- | ----------- |
| onReady | (event: SplitviewReadyEvent) => void | No | | | | onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | | | components | object | No | | |
| headerComponents | object | Yes | | | | headerComponents | object | Yes | | |
| className | string | Yes | '' | | | className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | <Link to="../basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | boolean | Yes | false | |
| disableDnd | boolean | Yes | false | | | disableDnd | boolean | Yes | false | |
| onDidDrop | Event | Yes | | | | onDidDrop | Event | Yes | | |
## Paneview API ## Paneview API
@ -156,9 +156,9 @@ const onReady = (event: GridviewReadyEvent) => {
| getPanel | `(id:string): IPaneviewPanel \| undefined` | | | getPanel | `(id:string): IPaneviewPanel \| undefined` | |
| | | | | | | |
| focus | `(): void` | Focus the active panel, if exists | | focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | |
| fromJSON | `(data: SerializedPaneview): void` | <Link to="../basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedPaneview): void` | |
| toJSON | `(): SerializedPaneview` | <Link to="../basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedPaneview` | |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Paneview Panel API ## Paneview Panel API

24
packages/docs/docs/components/splitview.mdx
View File

@ -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. 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 | | Property | Type | Optional | Default | Description |
| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ | | ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------- |
| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function | | onReady | `(event: SplitviewReadyEvent) => void` | No | | Function |
| components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers | | components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers |
| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | | orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
| proportionalLayout | `boolean` | Yes | `true` | See <Link to="../basics/#proportional-layout">Proportional layout</Link> | | proportionalLayout | `boolean` | Yes | `true` | |
| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | | hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
| className | `string` | Yes | `''` | Attaches a classname | | className | `string` | Yes | `''` | Attaches a classname |
| disableAutoResizing | `boolean` | Yes | `false` | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | `boolean` | Yes | `false` | |
## Splitview API ## Splitview API
@ -135,9 +135,9 @@ const onReady = (event: SplitviewReadyEvent) => {
| | | | | |
| updateOptions | `(options: SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options: SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | Focus the active panel, if exists | | focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | |
| fromJSON | `(data: SerializedSplitview): void` | <Link to="../basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedSplitview): void` | |
| toJSON | `(): SerializedSplitview` | <Link to="../basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedSplitview` | |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Splitview Panel API ## Splitview Panel API

52
packages/docs/docs/contributing.mdx Normal file
View File

@ -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.

2
packages/docs/docs/theme.mdx
View File

@ -1,5 +1,5 @@
--- ---
sidebar_position: 3 sidebar_position: 1
description: Theming Dockview Components description: Theming Dockview Components
--- ---

9
packages/docs/docusaurus.config.js
View File

@ -45,6 +45,15 @@ const config = {
return { return {
// externals: ['react', 'react-dom'], // externals: ['react', 'react-dom'],
devtool: 'source-map', devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
use: ['source-map-loader'],
},
],
},
resolve: { resolve: {
...config.resolve, ...config.resolve,
alias: { alias: {

3
packages/docs/package.json
View File

@ -28,6 +28,7 @@
"react-dnd": "^16.0.1", "react-dnd": "^16.0.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"recoil": "^0.7.6", "recoil": "^0.7.6",
"source-map-loader": "^4.0.1",
"uuid": "^9.0.0", "uuid": "^9.0.0",
"xml2js": "^0.4.23" "xml2js": "^0.4.23"
}, },
@ -61,4 +62,4 @@
"last 1 safari version" "last 1 safari version"
] ]
} }
} }

5073
yarn.lock
View File

File diff suppressed because it is too large Load Diff