diff --git a/.gitignore b/.gitignore index e3f290550..4e9bd8383 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,4 @@ test-report.xml yarn-error.log /build /docs/ +/generated/ diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts index be2f51877..e85e335c0 100644 --- a/packages/dockview-core/src/index.ts +++ b/packages/dockview-core/src/index.ts @@ -26,6 +26,10 @@ export * from './paneview/draggablePaneviewPanel'; export * from './dockview/components/panel/content'; export * from './dockview/components/tab/tab'; +export { + TabDragEvent, + GroupDragEvent, +} from './dockview/components/titlebar/tabsContainer'; export * from './dockview/types'; export * from './dockview/dockviewGroupPanel'; diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 25f67edc5..e42870ecb 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -28,6 +28,8 @@ import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app'; import DockviewFloating from '@site/sandboxes/floatinggroup-dockview/src/app'; import DockviewLockedGroup from '@site/sandboxes/lockedgroup-dockview/src/app'; +import { DocRef, Markdown } from '@site/src/components/ui/reference/docRef'; + import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app'; import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app'; import { attach as attachTabHeightDockview } from '@site/sandboxes/javascript/tabheight-dockview/src/app'; @@ -54,25 +56,12 @@ Dockview is an abstraction built on top of [Gridviews](./gridview) where each vi 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 | | -| onDidDrop | Event | Yes | false | | -| showDndOverlay | Event | Yes | false | | -| defaultTabComponent | object | Yes | | | -| leftHeaderActionsComponent | object | Yes | | | -| rightHeaderActionsComponent | object | Yes | | | -| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | +

+ {'All of these are React props available through the '} + DockviewReact + {' component.'} +

+ ## Dockview API @@ -93,44 +82,19 @@ 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 | `Event + {'All of these methods are available through the '} + api + {' property of '} + DockviewComponent + {' and the '} + containerApi + {' property of '} + IDockviewPanel + . +

+ + ## Dockview Panel API @@ -142,28 +106,15 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => { }; ``` -| 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` | | -| close | `(): void` | | -| setTitle | `(title: string): void` | | +

+ {'All of these are methods are available through the '} + api + {' property of '} + IDockviewPanel + . +

+ + ## Theme diff --git a/packages/docs/docs/components/gridview.mdx b/packages/docs/docs/components/gridview.mdx index 2cc700cd9..218fe1822 100644 --- a/packages/docs/docs/components/gridview.mdx +++ b/packages/docs/docs/components/gridview.mdx @@ -2,24 +2,26 @@ description: Gridview Documentation --- -import { SimpleGridview } from '@site/src/components/simpleGridview'; +import { MultiFrameworkContainer } from '@site/src/components/ui/container'; +import SimpleGridview from '@site/sandboxes/simple-gridview/src/app'; +// import SimpleGridview from '@site/sandboxes/simple-gridview/src/app'; import { EventsGridview } from '@site/src/components/gridview/events'; +// import IDEExample from '@site/sandboxes/ide-example/src/app'; import Link from '@docusaurus/Link'; +import { DocRef } from '@site/src/components/ui/reference/docRef'; # Gridview +Gridview is a collection of nested splitviews and is the foundation for the [Dockview](./dockview) component. +Gridview serves a purpose when you want only the nested splitviews with no tabs and no headers. + ## Introduction -
- -
+ ## GridviewReact Component @@ -27,15 +29,7 @@ import Link from '@docusaurus/Link'; import { ReactGridview } from 'dockview'; ``` -| 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 @@ -53,35 +47,7 @@ const onReady = (event: GridviewReadyEvent) => { }; ``` -| 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 | -| panels | `ISplitviewPanel[]` | all panels | -| orientation | `Orientation` | | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddPanel | `Event` | Fires when a view is added | -| onDidRemovePanel | `Event` | Fires when a view is removed | -| onDidActivePanelChange | `Event` | Fires when the active group changes | -| | | | -| addPanel | `addPanel(options: AddComponentOptions): IGridviewPanel` | | -| removePanel | `(panel: IGridviewPanel, sizing?: Sizing): void` | | -| movePanel | `(panel: IGridviewPanel, options: {direction: Direction, refernece:string, size?: number}): void` | | -| getPanel | `(id: string) \| IGridviewPanel \| undefined` | | -| | | | -| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | | -| fromJSON | `(data: SerializedGridview): void` | | -| toJSON | `(): SerializedGridview` | | -| clear | `(): void` | Clears the current layout | + ## Gridview Panel API @@ -93,25 +59,26 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { }; ``` -| 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` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| | | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: SizeEvent): void` | | + + +## Theme + +As well as importing the `dockview` stylesheet you must provide a class-based theme somewhere in your application. For example. + +```tsx +// Providing a theme directly through the DockviewReact component props + + +// Providing a theme somewhere in the DOM tree +
+
+ {/**... */} + +
+
+``` + +You can find more details on theming here. ## Events diff --git a/packages/docs/docs/components/paneview.mdx b/packages/docs/docs/components/paneview.mdx index 4b7c9cc8b..95e025478 100644 --- a/packages/docs/docs/components/paneview.mdx +++ b/packages/docs/docs/components/paneview.mdx @@ -8,6 +8,7 @@ import { CustomHeaderPaneview } from '@site/src/components/paneview/customHeader import { DragAndDropPaneview } from '@site/src/components/paneview/dragAndDrop'; import { SideBySidePaneview } from '@site/src/components/paneview/sideBySide'; import Link from '@docusaurus/Link'; +import { DocRef } from '@site/src/components/ui/reference/docRef'; # Paneview @@ -98,15 +99,7 @@ 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 | | -| disableDnd | boolean | Yes | false | | -| onDidDrop | Event | Yes | | | + ## Paneview API @@ -127,31 +120,7 @@ const onReady = (event: GridviewReadyEvent) => { }; ``` -| 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 | `IPaneviewPanel[]` | 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 | -| onDidDrop | `EventDrag and Drop) | -| | | | -| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | | -| removePanel | `(panel: IPaneviewPanel): void` | | -| movePanel | `(from: number, to: number): void` | | -| getPanel | `(id:string): IPaneviewPanel \| undefined` | | -| | | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | | -| fromJSON | `(data: SerializedPaneview): void` | | -| toJSON | `(): SerializedPaneview` | | -| clear | `(): void` | Clears the current layout | + ## Paneview Panel API @@ -163,25 +132,7 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { }; ``` -| 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` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: SizeEvent): void` | | + ## Advanced Features diff --git a/packages/docs/docs/components/splitview.mdx b/packages/docs/docs/components/splitview.mdx index 05b7018c0..ede28b404 100644 --- a/packages/docs/docs/components/splitview.mdx +++ b/packages/docs/docs/components/splitview.mdx @@ -5,6 +5,7 @@ description: Splitview Documentation import { SimpleSplitview } from '@site/src/components/simpleSplitview'; import { SplitviewExample1 } from '@site/src/components/splitview/active'; import Link from '@docusaurus/Link'; +import { DocRef } from '@site/src/components/ui/reference/docRef'; # Splitview @@ -85,15 +86,7 @@ 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` | | -| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | -| className | `string` | Yes | `''` | Attaches a classname | -| disableAutoResizing | `boolean` | Yes | `false` | | + ## Splitview API @@ -114,31 +107,7 @@ const onReady = (event: SplitviewReadyEvent) => { }; ``` -| 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` | | -| fromJSON | `(data: SerializedSplitview): void` | | -| toJSON | `(): SerializedSplitview` | | -| clear | `(): void` | Clears the current layout | + ## Splitview Panel API @@ -152,26 +121,7 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { }; ``` -| 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 diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js index ba08fa1f3..e958866b5 100644 --- a/packages/docs/docusaurus.config.js +++ b/packages/docs/docusaurus.config.js @@ -1,8 +1,9 @@ // @ts-check // Note: type annotations allow type checking and IDEs autocompletion -const lightCodeTheme = require('prism-react-renderer/themes/github'); -const darkCodeTheme = require('prism-react-renderer/themes/dracula'); +const lightCodeTheme = require('prism-react-renderer/themes/nightOwlLight'); +// const lightCodeTheme = require('prism-react-renderer/themes/dracula'); +const darkCodeTheme = require('prism-react-renderer/themes/vsDark'); const path = require('path'); @@ -206,7 +207,7 @@ const config = { prism: { theme: lightCodeTheme, darkTheme: darkCodeTheme, - additionalLanguages: ['java', 'markdown', 'latex'], + additionalLanguages: ['markdown', 'latex'], magicComments: [ { className: 'theme-code-block-highlighted-line', diff --git a/packages/docs/sandboxes/simple-gridview/package.json b/packages/docs/sandboxes/simple-gridview/package.json new file mode 100644 index 000000000..bc28bc3a3 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/package.json @@ -0,0 +1,32 @@ +{ + "name": "simple-gridview", + "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", + "react-scripts": "*" + }, + "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/simple-gridview/public/index.html b/packages/docs/sandboxes/simple-gridview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/simple-gridview/src/app.tsx b/packages/docs/sandboxes/simple-gridview/src/app.tsx new file mode 100644 index 000000000..5b78eb186 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/src/app.tsx @@ -0,0 +1,145 @@ +import { + GridviewApi, + GridviewReact, + GridviewReadyEvent, + IGridviewPanelProps, + LayoutPriority, + Orientation, +} from 'dockview'; +import * as React from 'react'; + +const components = { + default: (props: IGridviewPanelProps<{ title: string }>) => { + return ( +
+ {props.params.title} +
+ ); + }, +}; + +export const App: React.FC = (props: { theme?: string }) => { + const [api, setApi] = React.useState(); + + const onReady = (event: GridviewReadyEvent) => { + const panel1 = event.api.addPanel({ + id: 'panel_1', + component: 'default', + params: { + title: 'Panel 1', + }, + }); + + event.api.addPanel({ + id: 'panel_2', + component: 'default', + params: { + title: 'Panel 2', + }, + priority: LayoutPriority.High, + }); + + event.api.addPanel({ + id: 'panel_3', + component: 'default', + params: { + title: 'Panel 3', + }, + }); + + event.api.addPanel({ + id: 'panel_4', + component: 'default', + params: { + title: 'Panel 4', + }, + + position: { referencePanel: 'panel_2', direction: 'right' }, + }); + + event.api.addPanel({ + id: 'panel_5', + component: 'default', + params: { + title: 'Panel 5', + }, + + position: { referencePanel: 'panel_3', direction: 'right' }, + }); + + event.api.addPanel({ + id: 'panel_6', + component: 'default', + params: { + title: 'Panel 6', + }, + position: { referencePanel: 'panel_5', direction: 'below' }, + minimumWidth: 10, + }); + + event.api.addPanel({ + id: 'panel_7', + component: 'default', + params: { + title: 'Panel 7', + }, + position: { referencePanel: 'panel_6', direction: 'right' }, + minimumWidth: 10, + }); + + event.api.addPanel({ + id: 'panel_8', + component: 'default', + params: { + title: 'Panel 8', + }, + position: { referencePanel: 'panel_6', direction: 'right' }, + minimumWidth: 10, + }); + + setApi(event.api); + }; + + return ( +
+
+ +
+
+ +
+
+ ); +}; + +export default App; diff --git a/packages/docs/sandboxes/simple-gridview/src/index.tsx b/packages/docs/sandboxes/simple-gridview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/src/index.tsx @@ -0,0 +1,20 @@ +import { StrictMode } from 'react'; +import * as ReactDOMClient from 'react-dom/client'; +import './styles.css'; +import 'dockview/dist/styles/dockview.css'; + +import App from './app'; + +const rootElement = document.getElementById('root'); + +if (rootElement) { + const root = ReactDOMClient.createRoot(rootElement); + + root.render( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/simple-gridview/src/styles.css b/packages/docs/sandboxes/simple-gridview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/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/simple-gridview/tsconfig.json b/packages/docs/sandboxes/simple-gridview/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/tsconfig.json @@ -0,0 +1,18 @@ +{ + "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 + } +} diff --git a/packages/docs/src/components/ui/reference/docRef.scss b/packages/docs/src/components/ui/reference/docRef.scss new file mode 100644 index 000000000..1392042b9 --- /dev/null +++ b/packages/docs/src/components/ui/reference/docRef.scss @@ -0,0 +1,40 @@ +.doc-ref-table { + width: 100%; + border-collapse: collapse; + display: table; + table-layout: fixed; + + thead { + text-align: left; + background-color: inherit; + + tr { + border: none; + } + } + + overflow: hidden; + + th, + td { + border: none; + padding: none; + text-align: left; + } + + tr { + background-color: inherit !important; + } + + .theme-code-block { + margin-bottom: unset; + + pre { + box-sizing: border-box; + overflow: auto !important; + code { + padding: 8px; + } + } + } +} diff --git a/packages/docs/src/components/ui/reference/docRef.tsx b/packages/docs/src/components/ui/reference/docRef.tsx new file mode 100644 index 000000000..d7e25b1de --- /dev/null +++ b/packages/docs/src/components/ui/reference/docRef.tsx @@ -0,0 +1,109 @@ +import * as React from 'react'; +import CodeBlock from '@theme/CodeBlock'; +import './docRef.scss'; + +export interface DocRefProps { + declaration: string; +} + +import docsJson from '../../../generated/api.output.json'; + +type DocsContent = { kind: string; text: string; tag?: string }; +type DocsJson = { + [index: string]: Array<{ + name: string; + signature: string; + comment?: { + summary?: DocsContent[]; + blockTags?: Array<{ tag: string; content: DocsContent }>; + }; + type: string; + }>; +}; + +export const Markdown = (props: { children: string }) => { + return {props.children}; +}; + +export const DocRef = (props: DocRefProps) => { + const docs = React.useMemo( + () => (docsJson as DocsJson)[props.declaration], + [props.declaration] + ); + + if (!docs) { + return null; + } + + return ( +
+ + + {docs.map((doc) => { + return ( + + + + + ); + })} + +
+
+
+ {doc.name} +
+
+ {/* + {'Type'} + + + {doc.type} + */} +
+
+ 		+ {/*
{'-'}
*/} +
+ + {doc.signature} + +
+
+
+ ); +}; diff --git a/packages/docs/src/components/ui/reference/dockviewApi.reference.tsx b/packages/docs/src/components/ui/reference/dockviewApi.reference.tsx new file mode 100644 index 000000000..a281053c7 --- /dev/null +++ b/packages/docs/src/components/ui/reference/dockviewApi.reference.tsx @@ -0,0 +1,171 @@ +import { ReactPropDocsTable } from '../referenceTable'; +import * as React from 'react'; + +export default () => ( + ', + }, + { + property: 'onDidAddGroup', + type: 'Event', + }, + { + property: 'onDidRemoveGroup', + type: 'Event', + }, + { + property: 'onDidActivePanelChange', + type: 'Event', + }, + { + property: 'onDidAddPanel', + type: 'Event', + }, + { + property: 'onDidRemovePanel', + type: 'Event', + }, + { + property: 'onDidLayoutFromJSON', + type: 'Event', + }, + { + property: 'onDidLayoutChange', + type: 'Event', + }, + { + property: 'onDidDrop', + type: 'Event', + }, + { + property: 'onWillDragGroup', + type: 'Event', + }, + { + property: 'onWillDragPanel', + type: 'Event', + }, + { + property: 'panels', + type: 'IDockviewPanel[]', + }, + { + property: 'groups', + type: 'DockviewGroupPanel[]', + }, + { + property: 'activePanel', + type: 'IDockviewPanel | undefined', + }, + { + property: 'activeGroup', + type: 'DockviewGroupPanel | undefined', + }, + { + property: 'focus', + type: '(): void', + }, + { + property: 'getPanel', + type: '(id: string): IDockviewPanel | undefined', + }, + { + property: 'layout', + type: '(width: number, height: number): void', + }, + { + property: 'addPanel', + type: 'addPanel(options: AddPanelOptions): void', + }, + { + property: 'removePanel', + type: '(panel: IDockviewPanel): void', + }, + { + property: 'addGroup', + type: '(options?: AddGroupOptions): DockviewGroupPanel', + }, + { + property: 'moveToNext', + type: '(options?: MovementOptions): void', + }, + { + property: 'moveToPrevious', + type: '(options?: MovementOptions): void', + }, + { + property: 'closeAllGroups', + type: '(): void', + }, + { + property: 'removeGroup', + type: '(group: IDockviewGroupPanel): void ', + }, + { + property: 'getGroup', + type: '(id: string): DockviewGroupPanel | undefined', + }, + { + property: 'addFloatingGroup', + type: '(item: IDockviewPanel | DockviewGroupPanel, coord?: { x: number, y: number }): void', + }, + { + property: 'fromJSON', + type: '(data: SerializedDockview): void', + }, + { + property: 'toJSON', + type: '(): SerializedDockview ', + }, + { + property: 'clear', + type: '(): void', + }, + ]} + /> +); diff --git a/packages/docs/src/components/ui/reference/dockviewPanelApi.reference.tsx b/packages/docs/src/components/ui/reference/dockviewPanelApi.reference.tsx new file mode 100644 index 000000000..786171dcf --- /dev/null +++ b/packages/docs/src/components/ui/reference/dockviewPanelApi.reference.tsx @@ -0,0 +1,103 @@ +import { ReactPropDocsTable } from '../referenceTable'; +import * as React from 'react'; + +export default () => ( + ', + }, + { + property: 'onDidGroupChange', + type: 'Event', + }, + { + property: 'close', + type: '(): void', + }, + { + property: 'setTitle', + type: '(title: string): void', + }, + { + property: 'moveTo', + type: '(options: { group: DockviewGroupPanel, position?: Position, index?: number }): void', + }, + { + property: 'setSize', + type: '(event: SizeEvent): void', + }, + { + property: 'onDidDimensionsChange', + type: 'Event', + }, + { + property: 'onDidFocusChange', + type: 'Event', + }, + { + property: 'onDidVisibilityChange', + type: 'Event', + }, + { + property: 'onDidActiveChange', + type: 'Event', + }, + { + property: 'setVisible', + type: '(isVisible: boolean): void', + }, + { + property: 'setActive', + type: '(): void', + }, + { + property: 'updateParameters', + type: '(parameters: Parameters): void', + }, + { + property: 'id', + type: 'string', + }, + { + property: 'isFocused', + type: 'boolean', + }, + { + property: 'isActive', + type: 'boolean', + }, + { + property: 'isVisible', + type: 'boolean', + }, + { + property: 'width', + type: 'number', + }, + { + property: 'height', + type: 'number', + }, + ]} + /> +); diff --git a/packages/docs/src/components/ui/referenceTable.scss b/packages/docs/src/components/ui/referenceTable.scss new file mode 100644 index 000000000..dc3af03a7 --- /dev/null +++ b/packages/docs/src/components/ui/referenceTable.scss @@ -0,0 +1,64 @@ +.ref-table { + font-size: 12px; + width: 100%; + border-collapse: collapse; + + line-height: 20px; + + button { + all: unset; + } + + code { + padding: 0px 4px; + margin: 0px 4px; + } + + .ref-table-icon { + cursor: pointer; + } + + .ref-table-property { + width: 30%; + } + + .ref-table-type { + width: 50%; + } + + .ref-table-default { + width: 20%; + } + + thead { + text-align: left; + background-color: inherit; + + tr { + border: none; + } + } + + th, + td { + border: none; + padding: none; + } + + tr { + background-color: inherit !important; + } +} + +.ref-table-popover { + padding: 5px 10px; + border-radius: 4px; + font-size: 12px; + box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, + hsl(206 22% 7% / 20%) 0px 10px 20px -15px; + animation-duration: 400ms; + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); + will-change: transform, opacity; + background-color: var(--ifm-background-surface-color); + color: var(--ifm-font-color-base); +} diff --git a/packages/docs/src/components/ui/referenceTable.tsx b/packages/docs/src/components/ui/referenceTable.tsx index 1423122cc..8ee4b31b8 100644 --- a/packages/docs/src/components/ui/referenceTable.tsx +++ b/packages/docs/src/components/ui/referenceTable.tsx @@ -1,42 +1,196 @@ import * as React from 'react'; +import './referenceTable.scss'; export interface ReferenceProps { - props: { - prop: string; + title?: string; + url?: string; + data: { + property: string; + propertyDescription?: string; default?: string; type: string; + typeDescription?: string; }[]; } -export const ReferenceTable = (props: ReferenceProps) => { +import * as Popover from '@radix-ui/react-popover'; +import { InfoCircledIcon } from '@radix-ui/react-icons'; + +export const ReactPropDocsTable = (props: ReferenceProps) => { return ( - - - - - - - - - - {props.props.map((property) => { - return ( - - - - - - ); - })} - -
PropertyTypeDefault
- {property.prop} - - {property.type} - - {property.default !== undefined && ( - {property.default} - )} -
+
+
+ {props.title && {props.title}} + {props.url && ( + + )} +
+ + + + + + + + + + {props.data.map((item) => { + return ( + + + + + + ); + })} + +
PropertyTypeDefault
+ + {item.property} + {item.propertyDescription && ( + + + + + + +
+ { + item.propertyDescription + } +
+ + + + )} + + 		+ + {item.type} + {item.typeDescription && ( + + + + + + +
+ + { + item.typeDescription + } + +
+ + + + )} + + 		+ {item.default ? ( + {item.default} + ) : ( + {'-'} + )} +
+
+ ); +}; + +export const ClassDocsTable = (props: ReferenceProps) => { + return ( +
+
{props.title && {props.title}}
+ + + + + + + + + + {props.data.map((item) => { + return ( + + + + + + ); + })} + +
PropertyTypeDefault
+ + {item.property} + {item.propertyDescription && ( + + + + + + +
+ { + item.propertyDescription + } +
+ + + + )} + + 		+ + {item.type} + {item.typeDescription && ( + + + + + + +
+ + { + item.typeDescription + } + +
+ + + + )} + + 		+ {item.default ? ( + {item.default} + ) : ( + {'-'} + )} +
+
); }; diff --git a/packages/docs/src/generated/api.output.json b/packages/docs/src/generated/api.output.json new file mode 100644 index 000000000..e922f24ac --- /dev/null +++ b/packages/docs/src/generated/api.output.json @@ -0,0 +1,1278 @@ +{ + "DockviewApi": [ + { + "name": "activeGroup", + "signature": "DockviewGroupPanel | undefined", + "type": "accessor" + }, + { + "name": "activePanel", + "signature": "IDockviewPanel | undefined", + "type": "accessor" + }, + { + "name": "groups", + "signature": "DockviewGroupPanel[]", + "type": "accessor" + }, + { + "name": "height", + "signature": "number", + "type": "accessor" + }, + { + "name": "id", + "signature": "string", + "type": "accessor" + }, + { + "name": "maximumHeight", + "signature": "number", + "type": "accessor" + }, + { + "name": "maximumWidth", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumHeight", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumWidth", + "signature": "number", + "type": "accessor" + }, + { + "name": "onDidActiveGroupChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidActivePanelChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidAddGroup", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidAddPanel", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidDrop", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutFromJSON", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidRemoveGroup", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidRemovePanel", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onWillDragGroup", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onWillDragPanel", + "signature": "Event", + "type": "accessor" + }, + { + "name": "panels", + "signature": "IDockviewPanel[]", + "type": "accessor" + }, + { + "name": "size", + "signature": "number", + "type": "accessor" + }, + { + "name": "totalPanels", + "signature": "number", + "type": "accessor" + }, + { + "name": "width", + "signature": "number", + "type": "accessor" + }, + { + "name": "addFloatingGroup", + "signature": "(item: IDockviewPanel | DockviewGroupPanel, coord?: { x: number, y: number }): void", + "type": "method" + }, + { + "name": "addGroup", + "signature": "(options?: AddGroupOptions): DockviewGroupPanel", + "type": "method" + }, + { + "name": "addPanel", + "signature": "(options: AddPanelOptions): IDockviewPanel", + "type": "method" + }, + { + "name": "clear", + "signature": "(): void", + "type": "method" + }, + { + "name": "closeAllGroups", + "signature": "(): void", + "type": "method" + }, + { + "name": "focus", + "signature": "(): void", + "type": "method" + }, + { + "name": "fromJSON", + "signature": "(data: SerializedDockview): void", + "type": "method" + }, + { + "name": "getGroup", + "signature": "(id: string): DockviewGroupPanel | undefined", + "type": "method" + }, + { + "name": "getPanel", + "signature": "(id: string): IDockviewPanel | undefined", + "type": "method" + }, + { + "name": "layout", + "signature": "(width: number, height: number, force: boolean = false): void", + "type": "method" + }, + { + "name": "moveToNext", + "signature": "(options?: MovementOptions): void", + "type": "method" + }, + { + "name": "moveToPrevious", + "signature": "(options?: MovementOptions): void", + "type": "method" + }, + { + "name": "removeGroup", + "signature": "(group: IDockviewGroupPanel): void", + "type": "method" + }, + { + "name": "removePanel", + "signature": "(panel: IDockviewPanel): void", + "type": "method" + }, + { + "name": "toJSON", + "signature": "(): SerializedDockview", + "type": "method" + } + ], + "GridviewApi": [ + { + "name": "height", + "signature": "number", + "type": "accessor" + }, + { + "name": "maximumHeight", + "signature": "number", + "type": "accessor" + }, + { + "name": "maximumWidth", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumHeight", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumWidth", + "signature": "number", + "type": "accessor" + }, + { + "name": "onDidActivePanelChange", + "signature": "Event | undefined>", + "type": "accessor" + }, + { + "name": "onDidAddPanel", + "signature": "Event>", + "type": "accessor" + }, + { + "name": "onDidLayoutChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutFromJSON", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidRemovePanel", + "signature": "Event>", + "type": "accessor" + }, + { + "name": "orientation", + "signature": "Orientation", + "type": "accessor" + }, + { + "name": "panels", + "signature": "IGridviewPanel[]", + "type": "accessor" + }, + { + "name": "width", + "signature": "number", + "type": "accessor" + }, + { + "name": "addPanel", + "signature": "(options: AddComponentOptions): IGridviewPanel", + "type": "method" + }, + { + "name": "clear", + "signature": "(): void", + "type": "method" + }, + { + "name": "focus", + "signature": "(): void", + "type": "method" + }, + { + "name": "fromJSON", + "signature": "(data: SerializedGridviewComponent): void", + "type": "method" + }, + { + "name": "getPanel", + "signature": "(id: string): IGridviewPanel | undefined", + "type": "method" + }, + { + "name": "layout", + "signature": "(width: number, height: number, force: boolean = false): void", + "type": "method" + }, + { + "name": "movePanel", + "signature": "(panel: IGridviewPanel, options: { direction: Direction, reference: string, size: number }): void", + "type": "method" + }, + { + "name": "removePanel", + "signature": "(panel: IGridviewPanel, sizing?: Sizing): void", + "type": "method" + }, + { + "name": "toJSON", + "signature": "(): SerializedGridviewComponent", + "type": "method" + } + ], + "PaneviewApi": [ + { + "name": "height", + "signature": "number", + "type": "accessor" + }, + { + "name": "maximumSize", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumSize", + "signature": "number", + "type": "accessor" + }, + { + "name": "onDidAddView", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidDrop", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutFromJSON", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidRemoveView", + "signature": "Event", + "type": "accessor" + }, + { + "name": "panels", + "signature": "IPaneviewPanel[]", + "type": "accessor" + }, + { + "name": "width", + "signature": "number", + "type": "accessor" + }, + { + "name": "addPanel", + "signature": "(options: AddPaneviewComponentOptions): IPaneviewPanel", + "type": "method" + }, + { + "name": "clear", + "signature": "(): void", + "type": "method" + }, + { + "name": "focus", + "signature": "(): void", + "type": "method" + }, + { + "name": "fromJSON", + "signature": "(data: SerializedPaneview): void", + "type": "method" + }, + { + "name": "getPanel", + "signature": "(id: string): IPaneviewPanel | undefined", + "type": "method" + }, + { + "name": "layout", + "signature": "(width: number, height: number): void", + "type": "method" + }, + { + "name": "movePanel", + "signature": "(from: number, to: number): void", + "type": "method" + }, + { + "name": "removePanel", + "signature": "(panel: IPaneviewPanel): void", + "type": "method" + }, + { + "name": "toJSON", + "signature": "(): SerializedPaneview", + "type": "method" + } + ], + "SplitviewApi": [ + { + "name": "height", + "signature": "number", + "type": "accessor" + }, + { + "name": "length", + "signature": "number", + "type": "accessor" + }, + { + "name": "maximumSize", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumSize", + "signature": "number", + "type": "accessor" + }, + { + "name": "onDidAddView", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutFromJSON", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidRemoveView", + "signature": "Event", + "type": "accessor" + }, + { + "name": "orientation", + "signature": "Orientation", + "type": "accessor" + }, + { + "name": "panels", + "signature": "ISplitviewPanel[]", + "type": "accessor" + }, + { + "name": "width", + "signature": "number", + "type": "accessor" + }, + { + "name": "addPanel", + "signature": "(options: AddSplitviewComponentOptions): ISplitviewPanel", + "type": "method" + }, + { + "name": "clear", + "signature": "(): void", + "type": "method" + }, + { + "name": "focus", + "signature": "(): void", + "type": "method" + }, + { + "name": "fromJSON", + "signature": "(data: SerializedSplitview): void", + "type": "method" + }, + { + "name": "getPanel", + "signature": "(id: string): ISplitviewPanel | undefined", + "type": "method" + }, + { + "name": "layout", + "signature": "(width: number, height: number): void", + "type": "method" + }, + { + "name": "movePanel", + "signature": "(from: number, to: number): void", + "type": "method" + }, + { + "name": "removePanel", + "signature": "(panel: ISplitviewPanel, sizing?: Sizing): void", + "type": "method" + }, + { + "name": "toJSON", + "signature": "(): SerializedSplitview", + "type": "method" + }, + { + "name": "updateOptions", + "signature": "(options: SplitviewComponentUpdateOptions): void", + "type": "method" + } + ], + "DockviewPanelApi": [ + { + "name": "group", + "signature": "DockviewGroupPanel", + "type": "property" + }, + { + "name": "height", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel height in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "id", + "signature": "string", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the panel that would have been assigned when the panel was created" + } + ] + }, + "type": "property" + }, + { + "name": "isActive", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is the actively selected panel" + } + ] + }, + "type": "property" + }, + { + "name": "isFocused", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel holds the current focus" + } + ] + }, + "type": "property" + }, + { + "name": "isGroupActive", + "signature": "boolean", + "type": "property" + }, + { + "name": "isVisible", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is visible" + } + ] + }, + "type": "property" + }, + { + "name": "onDidActiveChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidActiveGroupChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidDimensionsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidFocusChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidGroupChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidVisibilityChange", + "signature": "Event", + "type": "property" + }, + { + "name": "title", + "signature": "string | undefined", + "type": "property" + }, + { + "name": "width", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel width in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "close", + "signature": "(): void", + "type": "method" + }, + { + "name": "moveTo", + "signature": "(options: { group: DockviewGroupPanel, index: number, position: Position }): void", + "type": "method" + }, + { + "name": "setActive", + "signature": "(): void", + "type": "method" + }, + { + "name": "setSize", + "signature": "(event: SizeEvent): void", + "type": "method" + }, + { + "name": "setTitle", + "signature": "(title: string): void", + "type": "method" + }, + { + "name": "updateParameters", + "signature": "(parameters: Parameters): void", + "type": "method" + } + ], + "GridviewPanelApi": [ + { + "name": "height", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel height in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "id", + "signature": "string", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the panel that would have been assigned when the panel was created" + } + ] + }, + "type": "property" + }, + { + "name": "isActive", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is the actively selected panel" + } + ] + }, + "type": "property" + }, + { + "name": "isFocused", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel holds the current focus" + } + ] + }, + "type": "property" + }, + { + "name": "isVisible", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is visible" + } + ] + }, + "type": "property" + }, + { + "name": "onDidActiveChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidConstraintsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidDimensionsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidFocusChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidVisibilityChange", + "signature": "Event", + "type": "property" + }, + { + "name": "width", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel width in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "setActive", + "signature": "(): void", + "type": "method" + }, + { + "name": "setConstraints", + "signature": "(value: GridConstraintChangeEvent2): void", + "type": "method" + }, + { + "name": "setSize", + "signature": "(event: SizeEvent): void", + "type": "method" + }, + { + "name": "setVisible", + "signature": "(isVisible: boolean): void", + "type": "method" + }, + { + "name": "updateParameters", + "signature": "(parameters: Parameters): void", + "type": "method" + } + ], + "PaneviewPanelApi": [ + { + "name": "height", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel height in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "id", + "signature": "string", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the panel that would have been assigned when the panel was created" + } + ] + }, + "type": "property" + }, + { + "name": "isActive", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is the actively selected panel" + } + ] + }, + "type": "property" + }, + { + "name": "isExpanded", + "signature": "boolean", + "type": "property" + }, + { + "name": "isFocused", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel holds the current focus" + } + ] + }, + "type": "property" + }, + { + "name": "isVisible", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is visible" + } + ] + }, + "type": "property" + }, + { + "name": "onDidActiveChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidConstraintsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidDimensionsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidExpansionChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidFocusChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidVisibilityChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onMouseEnter", + "signature": "Event", + "type": "property" + }, + { + "name": "onMouseLeave", + "signature": "Event", + "type": "property" + }, + { + "name": "width", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel width in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "setActive", + "signature": "(): void", + "type": "method" + }, + { + "name": "setConstraints", + "signature": "(value: PanelConstraintChangeEvent2): void", + "type": "method" + }, + { + "name": "setExpanded", + "signature": "(isExpanded: boolean): void", + "type": "method" + }, + { + "name": "setSize", + "signature": "(event: PanelSizeEvent): void", + "type": "method" + }, + { + "name": "setVisible", + "signature": "(isVisible: boolean): void", + "type": "method" + }, + { + "name": "updateParameters", + "signature": "(parameters: Parameters): void", + "type": "method" + } + ], + "SplitviewPanelApi": [ + { + "name": "height", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel height in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "id", + "signature": "string", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the panel that would have been assigned when the panel was created" + } + ] + }, + "type": "property" + }, + { + "name": "isActive", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is the actively selected panel" + } + ] + }, + "type": "property" + }, + { + "name": "isFocused", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel holds the current focus" + } + ] + }, + "type": "property" + }, + { + "name": "isVisible", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is visible" + } + ] + }, + "type": "property" + }, + { + "name": "onDidActiveChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidConstraintsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidDimensionsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidFocusChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidVisibilityChange", + "signature": "Event", + "type": "property" + }, + { + "name": "width", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel width in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "setActive", + "signature": "(): void", + "type": "method" + }, + { + "name": "setConstraints", + "signature": "(value: PanelConstraintChangeEvent2): void", + "type": "method" + }, + { + "name": "setSize", + "signature": "(event: PanelSizeEvent): void", + "type": "method" + }, + { + "name": "setVisible", + "signature": "(isVisible: boolean): void", + "type": "method" + }, + { + "name": "updateParameters", + "signature": "(parameters: Parameters): void", + "type": "method" + } + ], + "IDockviewReactProps": [ + { + "name": "className", + "signature": "string", + "type": "property" + }, + { + "name": "components", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "defaultTabComponent", + "signature": "FunctionComponent>", + "type": "property" + }, + { + "name": "disableAutoResizing", + "signature": "boolean", + "type": "property" + }, + { + "name": "disableFloatingGroups", + "signature": "boolean", + "type": "property" + }, + { + "name": "floatingGroupBounds", + "signature": "{ minimumHeightWithinViewport: number, minimumWidthWithinViewport: number } | 'boundedWithinViewport'", + "type": "property" + }, + { + "name": "hideBorders", + "signature": "boolean", + "type": "property" + }, + { + "name": "leftHeaderActionsComponent", + "signature": "FunctionComponent", + "type": "property" + }, + { + "name": "onDidDrop", + "signature": "(event: DockviewDropEvent): void", + "type": "property" + }, + { + "name": "onReady", + "signature": "(event: DockviewReadyEvent): void", + "type": "property" + }, + { + "name": "rightHeaderActionsComponent", + "signature": "FunctionComponent", + "type": "property" + }, + { + "name": "showDndOverlay", + "signature": "(event: DockviewDndOverlayEvent): boolean", + "type": "property" + }, + { + "name": "singleTabMode", + "signature": "'fullwidth' | 'default'", + "type": "property" + }, + { + "name": "tabComponents", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "watermarkComponent", + "signature": "FunctionComponent", + "type": "property" + } + ], + "IGridviewReactProps": [ + { + "name": "className", + "signature": "string", + "type": "property" + }, + { + "name": "components", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "disableAutoResizing", + "signature": "boolean", + "type": "property" + }, + { + "name": "hideBorders", + "signature": "boolean", + "type": "property" + }, + { + "name": "onReady", + "signature": "(event: GridviewReadyEvent): void", + "type": "property" + }, + { + "name": "orientation", + "signature": "Orientation", + "type": "property" + }, + { + "name": "proportionalLayout", + "signature": "boolean", + "type": "property" + } + ], + "IPaneviewReactProps": [ + { + "name": "className", + "signature": "string", + "type": "property" + }, + { + "name": "components", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "disableAutoResizing", + "signature": "boolean", + "type": "property" + }, + { + "name": "disableDnd", + "signature": "boolean", + "type": "property" + }, + { + "name": "headerComponents", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "onReady", + "signature": "(event: PaneviewReadyEvent): void", + "type": "property" + }, + { + "name": "showDndOverlay", + "signature": "(event: PaneviewDndOverlayEvent): boolean", + "type": "property" + }, + { + "name": "onDidDrop", + "signature": "(event: PaneviewDropEvent): void", + "type": "method" + } + ], + "ISplitviewReactProps": [ + { + "name": "className", + "signature": "string", + "type": "property" + }, + { + "name": "components", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "disableAutoResizing", + "signature": "boolean", + "type": "property" + }, + { + "name": "hideBorders", + "signature": "boolean", + "type": "property" + }, + { + "name": "onReady", + "signature": "(event: SplitviewReadyEvent): void", + "type": "property" + }, + { + "name": "orientation", + "signature": "Orientation", + "type": "property" + }, + { + "name": "proportionalLayout", + "signature": "boolean", + "type": "property" + } + ] +} \ No newline at end of file diff --git a/packages/docs/src/pages/index.tsx b/packages/docs/src/pages/index.tsx index 0053139cf..e56109e0f 100644 --- a/packages/docs/src/pages/index.tsx +++ b/packages/docs/src/pages/index.tsx @@ -3,35 +3,10 @@ import clsx from 'clsx'; import Layout from '@theme/Layout'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import styles from './index.module.css'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import DockviewDemo from '@site/sandboxes/demo-dockview/src/app'; -import DockviewDemo2 from '@site/sandboxes/dockview-app/src/app'; -import { MultiFrameworkContainer } from '../components/ui/container'; -import { BrowserHeader } from '../components/ui/browserHeader'; -import './index.scss'; import { Introduction } from '../components/HomepageFeatures/introduction'; - -function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Get Started - -
-
-
- ); -} +import styles from './index.module.css'; +import './index.scss'; function HomepageHeader2() { const { siteConfig } = useDocusaurusContext(); @@ -74,6 +49,7 @@ export default function Home(): JSX.Element { description={`${siteConfig.description}`} > +
diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json index 6f4756980..6c9b457cc 100644 --- a/packages/docs/tsconfig.json +++ b/packages/docs/tsconfig.json @@ -1,7 +1,8 @@ { - // This file is not used in compilation. It is here just for a nice editor experience. - "extends": "@tsconfig/docusaurus/tsconfig.json", - "compilerOptions": { - "baseUrl": "." - } + // This file is not used in compilation. It is here just for a nice editor experience. + "extends": "@tsconfig/docusaurus/tsconfig.json", + "compilerOptions": { + "baseUrl": ".", + "resolveJsonModule": true + } } diff --git a/scripts/docs.mjs b/scripts/docs.mjs new file mode 100644 index 000000000..bf940e8ab --- /dev/null +++ b/scripts/docs.mjs @@ -0,0 +1,399 @@ +import { execSync } from 'child_process'; +import { readFileSync, existsSync, writeFileSync } from 'fs'; +import { ReflectionKind } from 'typedoc'; + +/** + * #region inputs + */ + +// typedoc output +const TYPEDOC_OUTPUT_FILE = './generated/typedoc.output.json'; +// doc output +const API_OUTPUT_FILE = './packages/docs/src/generated/api.output.json'; +// declarations to document (e.g. class names, interface names) +const DOCUMENT_LIST = [ + // dockview + 'DockviewApi', + 'IDockviewReactProps', + 'DockviewPanelApi', + // splitview + 'SplitviewApi', + 'ISplitviewReactProps', + 'SplitviewPanelApi', + // gridview + 'GridviewApi', + 'IGridviewReactProps', + 'GridviewPanelApi', + // paneview + 'PaneviewApi', + 'IPaneviewReactProps', + 'PaneviewPanelApi', +]; + +const EXPORT_REMAPPING = { + Event: 'DockviewEvent', + Emitter: 'DockviewEmitter', + IDisposable: 'IDockviewDisposable', + MutableDisposable: 'DockviewMutableDisposable', + CompositeDisposable: 'DockviewCompositeDisposable', +}; + +const SKIP_DOC = ['Event']; + +/** + * #region generating Typedoc output + */ + +console.log('running docs'); + +if (!existsSync(TYPEDOC_OUTPUT_FILE)) { + execSync( + `typedoc --json ${TYPEDOC_OUTPUT_FILE}`, + (error, stdout, stderr) => { + console.log('stdout: ' + stdout); + console.log('stderr: ' + stderr); + if (error !== null) { + console.log('exec error: ' + error); + } + } + ); +} + +const content = JSON.parse(readFileSync(TYPEDOC_OUTPUT_FILE)); + +const dockviewCore = content.children.find( + (child) => child.name === 'dockview-core' +); +const dockview = content.children.find((child) => child.name === 'dockview'); + +const declarations = [dockviewCore, dockview] + .flatMap((item) => + item.children.filter((child) => DOCUMENT_LIST.includes(child.name)) + ) + .filter(Boolean); +/** + * #region parsing of TypeDoc output + */ + +function findType(type, packageName) { + if (EXPORT_REMAPPING[type]) { + type = EXPORT_REMAPPING[type]; + } + + const packageObject = content.children.find( + (child) => child.name === packageName + ); + + const typeObject = packageObject.children.find( + (child) => child.name === type + ); + + return getFunction(typeObject, [], { includeMetadata: false }); +} + +// minimal parsing logic, add cases as required +function getType(type, metadata, options) { + switch (type.type) { + case 'union': + return { + signature: [...type.types] + .reverse() + .map((t) => getType(t, metadata, options).signature) + .join(' | '), + }; + case 'intrinsic': + return { signature: type.name }; + case 'reference': + if ( + options.includeMetadata && + type.package && + typeof type.target !== 'object' + ) { + metadata.push({ name: type.name, package: type.package }); + } + + if (Array.isArray(type.typeArguments)) { + return { + signature: `${type.name}<${type.typeArguments + .map((typeArgument) => { + return getType(typeArgument, metadata, options) + .signature; + }) + .join(', ')}>`, + }; + } + + return { signature: `${type.name}` }; + case 'array': + return { + signature: `${ + getType(type.elementType, metadata, options).signature + }[]`, + }; + case 'reflection': + if (type.declaration.children) { + return { + signature: `{ ${type.declaration.children + .map( + (child) => + `${child.name}: ${ + getType(child.type, metadata, options) + .signature + }` + ) + .join(', ')} }`, + }; + } + + if (type.declaration.signatures) { + if (type.declaration.signatures.length > 1) { + // code this case if it ever happens + throw new Error(`unhandled signatures.length > 1`); + } + + if (type.declaration.signatures[0].parameters) { + let _parameters = ''; + const { parameters } = type.declaration.signatures[0]; + + for (let i = 0; i < parameters.length; i++) { + const { type, name, flags, defaultValue } = + parameters[i]; + + const isOptional = flags.isOptional === true; + + const { signature } = getType(type, metadata, options); + + _parameters += `${name}${ + isOptional ? '?' : '' + }: ${signature}${ + defaultValue !== undefined + ? ` = ${defaultValue}` + : '' + }`; + + if (i !== parameters.length - 1) { + _parameters += ', '; + } + } + + return { + signature: `(${_parameters}): ${ + getType( + type.declaration.signatures[0].type, + metadata, + options + ).signature + }`, + }; + } + + return { + signature: getType( + type.declaration.signatures[0].type, + metadata, + options + ).signature, + }; + } + + if (type.declaration.indexSignature) { + let _parameters = ''; + const { parameters } = type.declaration.indexSignature; + + for (let i = 0; i < parameters.length; i++) { + const { type, name, flags, defaultValue } = parameters[i]; + + const isOptional = flags.isOptional === true; + + _parameters += `${name}${isOptional ? '?' : ''}: ${ + getType(type, metadata, options).signature + }${defaultValue !== undefined ? ` = ${defaultValue}` : ''}`; + + if (i !== parameters.length - 1) { + _parameters += ', '; + } + } + + return { + signature: `{ [${parameters}]: ${getType( + type.declaration.indexSignature.type, + metadata, + options + )}}`, + }; + } + + throw new Error('unhandled case'); + case 'literal': + return { signature: `'${type.value}'` }; + default: + throw new Error(`unhandled type ${type.type}`); + } +} + +// minimal parsing logic, add cases as required +function getFunction( + method, + metadata = [], + options = { includeMetadata: true } +) { + switch (method.kind) { + case ReflectionKind.Accessor: { + const { getSignature, name } = method; + const { type, comment } = getSignature; + const metadata = []; + const { signature } = getType(type, metadata, options); + return { + name, + signature, + comment, + type: 'accessor', + metadata: metadata.length > 0 ? metadata : undefined, + }; + } + case ReflectionKind.Property: { + const { type, name, comment } = method; + const metadata = []; + const { signature } = getType(type, metadata, options); + return { + name, + signature, + comment, + type: 'property', + metadata: metadata.length > 0 ? metadata : undefined, + }; + } + case ReflectionKind.Interface: { + const { type, name, comment, children } = method; + + let signature = `interface ${name} {`; + + if (children) { + for (const child of children) { + signature += `\n\t${ + child.flags.isReadonly ? 'readonly ' : '' + }${child.name}: ${ + getFunction(child, metadata, options).signature + };`; + } + } + signature += `\n}`; + + return { + name, + signature, + comment, + type: 'interface', + metadata: metadata.length > 0 ? metadata : undefined, + }; + } + case ReflectionKind.Method: { + const { signatures, comment } = method; + if (signatures.length > 1) { + throw new Error(`signatures.length > 1`); + } + const { name, parameters, type, typeParameter } = signatures[0]; + + let _typeParameter = ''; + + if (Array.isArray(typeParameter)) { + for (let i = 0; i < typeParameter.length; i++) { + const item = typeParameter[i]; + + const { signature } = getType(item.type, metadata, options); + + _typeParameter += `<${item.name}`; + if (item.type) { + _typeParameter += ` extends ${signature}`; + } + if (item.default) { + _typeParameter += ` = ${ + getType(item.default, metadata, options).signature + }`; + } + _typeParameter += `>`; + + if (i !== typeParameter.length - 1) { + _typeParameter += ', '; + } + } + } + + let _parameters = ''; + + if (Array.isArray(parameters)) { + for (let i = 0; i < parameters.length; i++) { + const { type, name, flags, defaultValue } = parameters[i]; + + const isOptional = flags.isOptional === true; + + const { signature } = getType(type, metadata, options); + + _parameters += `${name}${ + isOptional ? '?' : '' + }: ${signature}${ + defaultValue !== undefined ? ` = ${defaultValue}` : '' + }`; + + if (i !== parameters.length - 1) { + _parameters += ', '; + } + } + } + + return { + name, + comment, + signature: `${_typeParameter}(${_parameters}): ${ + getType(type, metadata, options).signature + }`, + type: 'method', + metadata: metadata.length > 0 ? metadata : undefined, + }; + } + } +} + +function createDocument(declarations) { + const documentation = {}; + + for (const declaration of declarations) { + const { children, name } = declaration; + + documentation[name] = []; + + for (const child of children) { + try { + const { flags } = child; + + if (flags.isPrivate) { + continue; + } + + const documentationPart = getFunction(child, [], { + includeMetadata: false, + }); + + if (documentationPart) { + if (documentationPart.metadata) { + documentationPart.metadata = documentationPart.metadata + .filter(({ name }) => !SKIP_DOC.includes(name)) + .map((item) => { + return findType(item.name, item.package); + }); + } + + documentation[name].push(documentationPart); + } + } catch (err) { + console.error('error', err, child); + process.exit(-1); + } + } + } + + return documentation; +} + +const documentation = createDocument(declarations); +writeFileSync(API_OUTPUT_FILE, JSON.stringify(documentation, null, 4));