rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-01-22 17:35:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #524 from mathuo/475-improved-docs-1

Browse Source 
chore: fix docs
This commit is contained in:
mathuo 2024-02-25 15:25:52 +00:00 committed by GitHub
commit d2baa1371c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 206 additions and 1169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

88
packages/docs/docs/index.mdx
View File

@ -1,87 +1 @@
---
sidebar_position: 0
description: A zero dependency layout manager supporting ReactJS and Vanilla TypeScript
title: Introduction
---
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
import { SimpleGridview } from '@site/src/components/simpleGridview';
import { SimplePaneview } from '@site/src/components/simplePaneview';
// import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
import Link from '@docusaurus/Link';
**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
## Quick start
`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
```shell
npm install dockview
```
You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
depending on your solution this might be:
```css
@import './node_modules/dockview/dist/styles/dockview.css';
```
There are 4 components you may want to use:
<Link to="./components/dockview">
<h2>Dockview</h2>
</Link>
{/* <MultiFrameworkContainer
height={500}
sandboxId="demo-dockview"
react={DockviewDemo}
/> */}
<Link to="./components/splitview">
<h2>Splitview</h2>
</Link>
<div
style={{
height: '100px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleSplitview />
</div>
<Link to="./components/gridview">
<h2>Gridview</h2>
</Link>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleGridview />
</div>
<Link to="./components/paneview">
<h2>Paneview</h2>
</Link>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimplePaneview />
</div>
landing

6
packages/docs/docs/other/gridview/_category_.json Normal file
View File

@ -0,0 +1,6 @@
{
"position": 1,
"label": "Gridview",
"collapsible": true,
"collapsed": true
}

7
packages/docs/docs/other/gridview/overview.mdx Normal file
View File

@ -0,0 +1,7 @@
---
title: Overview
sidebar_position: 0
---
The implementation of the dock is a collection of nested *splitview* controls forming a *gridview*
which is exposed as a seperate component to be used independantly.

6
packages/docs/docs/other/paneview/_category_.json Normal file
View File

@ -0,0 +1,6 @@
{
"position": 2,
"label": "Paneview",
"collapsible": true,
"collapsed": true
}

6
packages/docs/docs/other/paneview/overview.mdx Normal file
View File

@ -0,0 +1,6 @@
---
title: Overview
sidebar_position: 0
---
A *splitview* control where each panel contains a header and collapsable content.

6
packages/docs/docs/other/splitview/_category_.json Normal file
View File

@ -0,0 +1,6 @@
{
"position": 0,
"label": "Splitview",
"collapsible": true,
"collapsed": true
}

7
packages/docs/docs/other/splitview/overview.mdx Normal file
View File

@ -0,0 +1,7 @@
---
title: Overview
sidebar_position: 0
---
The implementation of the dock is a collection of nested *splitview* controls
which is exposed as a seperate component to be used independantly.

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

@ -106,11 +106,11 @@ const config = {
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
versions: {
current: {
label: `Development 🚧`,
},
},
// versions: {
// current: {
// label: `Development 🚧`,
// },
// },
},
blog: {
showReadingTime: true,
@ -188,10 +188,10 @@ const config = {
// position: 'left',
// },
{
type: 'docsVersionDropdown',
position: 'right',
},
// {
// type: 'docsVersionDropdown',
// position: 'right',
// },
{
href: 'https://github.com/mathuo/dockview',
position: 'right',

0
packages/docs/docs/components/_category_.json → packages/docs/old_docs_DELETE_SOON/components/_category_.json
View File

0
packages/docs/docs/components/gridview/gridview.mdx → packages/docs/old_docs_DELETE_SOON/components/gridview/gridview.mdx
View File

0
packages/docs/docs/components/intro.mdx → packages/docs/old_docs_DELETE_SOON/components/intro.mdx
View File

0
packages/docs/docs/components/paneview/paneview.mdx → packages/docs/old_docs_DELETE_SOON/components/paneview/paneview.mdx
View File

0
packages/docs/docs/components/splitview/splitview.mdx → packages/docs/old_docs_DELETE_SOON/components/splitview/splitview.mdx
View File

87
packages/docs/old_docs_DELETE_SOON/index.mdx Normal file
View File

@ -0,0 +1,87 @@
---
sidebar_position: 0
description: A zero dependency layout manager supporting ReactJS and Vanilla TypeScript
title: Introduction
---
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
import { SimpleGridview } from '@site/src/components/simpleGridview';
import { SimplePaneview } from '@site/src/components/simplePaneview';
// import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
import Link from '@docusaurus/Link';
**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
## Quick start
`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
```shell
npm install dockview
```
You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
depending on your solution this might be:
```css
@import './node_modules/dockview/dist/styles/dockview.css';
```
There are 4 components you may want to use:
<Link to="./components/dockview">
<h2>Dockview</h2>
</Link>
{/* <MultiFrameworkContainer
height={500}
sandboxId="demo-dockview"
react={DockviewDemo}
/> */}
<Link to="./components/splitview">
<h2>Splitview</h2>
</Link>
<div
style={{
height: '100px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleSplitview />
</div>
<Link to="./components/gridview">
<h2>Gridview</h2>
</Link>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleGridview />
</div>
<Link to="./components/paneview">
<h2>Paneview</h2>
</Link>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimplePaneview />
</div>

8
packages/docs/sidebars.js
View File

@ -30,6 +30,14 @@ const sidebars = {
className: 'sidebar-section-header',
items: [{ type: 'autogenerated', dirName: 'core' }],
},
{
type: 'category',
label: 'Auxilliary Components',
collapsible: false,
collapsed: false,
className: 'sidebar-section-header',
items: [{ type: 'autogenerated', dirName: 'other' }],
},
{
type: 'category',
label: 'Advanced Features',

37
packages/docs/src/components/frameworkSpecific.tsx
View File

@ -1,4 +1,5 @@
import { Emitter } from 'dockview-core/dist/cjs/events';
import BrowserOnly from '@docusaurus/BrowserOnly';
import { DockviewEmitter } from 'dockview';
import * as React from 'react';
const frameworks = [
@ -7,11 +8,7 @@ const frameworks = [
{ value: 'Angular', label: 'Angular' },
];
const activeFrameworkGlobal = new Emitter<string>({ replay: true });
activeFrameworkGlobal.fire(
localStorage.getItem('dv-docs-framework') ?? frameworks[0].value
);
const activeFrameworkGlobal = new DockviewEmitter<string>({ replay: true });
function useActiveFramework(): [string, (value: string) => void] {
const [value, setValue] = React.useState<string>(
@ -23,6 +20,10 @@ function useActiveFramework(): [string, (value: string) => void] {
setValue(value),
]);
activeFrameworkGlobal.fire(
localStorage.getItem('dv-docs-framework') ?? frameworks[0].value
);
return () => {
disposable.dispose();
};
@ -37,16 +38,7 @@ function useActiveFramework(): [string, (value: string) => void] {
return [value, setter];
}
export const Header = (props: { title: string }) => {
return (
<header>
<h1>{props.title}</h1>
<FrameworkSelector />
</header>
);
};
export const FrameworkSelector = () => {
const FrameworkSelector1 = () => {
const [activeFramework, setActiveFramework] = useActiveFramework();
const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => [
@ -64,7 +56,11 @@ export const FrameworkSelector = () => {
);
};
export const FrameworkSpecific = (props: {
export const FrameworkSelector = () => {
return <BrowserOnly>{() => <FrameworkSelector1 />}</BrowserOnly>;
};
const FrameworkSpecific1 = (props: {
framework: string;
children: React.ReactNode;
}) => {
@ -76,3 +72,10 @@ export const FrameworkSpecific = (props: {
return null;
};
export const FrameworkSpecific = (props: {
framework: string;
children: React.ReactNode;
}) => {
return <BrowserOnly>{() => <FrameworkSpecific1 {...props} />}</BrowserOnly>;
};

66
packages/docs/src/components/ui/exampleFrame.tsx
View File

@ -1,5 +1,6 @@
import * as React from 'react';
import { CodeSandboxButton } from './codeSandboxButton';
import BrowserOnly from '@docusaurus/BrowserOnly';
const ExampleFrame = (props: {
framework: string;
@ -19,34 +20,43 @@ const ExampleFrame = (props: {
);
return (
<React.Suspense>
<div
style={{
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
}}
>
<div
style={{
height: props.height ?? '500px',
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
}}
>
<Component theme={props.theme} />
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<span style={{ width: '220px' }}>
<CodeSandboxButton
id={`${props.framework}/${props.id}`}
hideThemePicker={true}
/>
</span>
</div>
</div>
</React.Suspense>
<BrowserOnly>
{() => (
<React.Suspense>
<div
style={{
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
}}
>
<div
style={{
height: props.height ?? '500px',
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
}}
>
<Component theme={props.theme} />
</div>
<div
style={{
display: 'flex',
justifyContent: 'flex-end',
}}
>
<span style={{ width: '220px' }}>
<CodeSandboxButton
id={`${props.framework}/${props.id}`}
hideThemePicker={true}
/>
</span>
</div>
</div>
</React.Suspense>
)}
</BrowserOnly>
);
};

10
packages/docs/src/pages/demo.tsx
View File

@ -4,9 +4,9 @@ import { themeConfig } from '../config/theme.config';
import ExampleFrame from '../components/ui/exampleFrame';
export default function Popout() {
const [theme, setTheme] = React.useState<string>(
new URLSearchParams(location.search).get('theme') ?? themeConfig[3].id
);
// const [theme, setTheme] = React.useState<string>(
// new URLSearchParams(location.search).get('theme') ?? themeConfig[3].id
// );
return (
<Layout noFooter={true}>
@ -32,7 +32,7 @@ export default function Popout() {
url.searchParams.set('theme', event.target.value);
window.location.href = url.toString();
}}
value={theme}
// value={theme}
>
{themeConfig.map((theme) => {
return <option>{theme.id}</option>;
@ -41,7 +41,7 @@ export default function Popout() {
</div>
<ExampleFrame
theme={theme}
// theme={theme}
framework="react"
height="100%"
id="dockview/demo-dockview"

1
packages/docs/versions.json
View File

@ -1 +0,0 @@
[]