mirror of
https://github.com/mathuo/dockview
synced 2025-03-09 23:42:05 +00:00
feat: docs website
This commit is contained in:
mathuo
parent
979cb9aa5c
commit
0987e92676
116
package.json
116
package.json
@ -1,60 +1,60 @@
|
||||
{
|
||||
"name": "dockview-monorepo-root",
|
||||
"private": true,
|
||||
"description": "Monorepo for https://github.com/mathuo/dockview",
|
||||
"scripts": {
|
||||
"test": "jest",
|
||||
"lint": "eslint packages/**/src/** --ext .ts,.tsx,.js,.jsx",
|
||||
"package": "node scripts/package.js",
|
||||
"package-all": "npm run build-demo && npm run docs && node scripts/package.js",
|
||||
"build": "lerna run build --ignore dockview-demo",
|
||||
"build-demo": "lerna run build --scope dockview-demo",
|
||||
"docs": "lerna run docs --scope dockview",
|
||||
"clean": "lerna run clean",
|
||||
"bootstrap": "lerna bootstrap",
|
||||
"bootstrap-no-hoist": "lerna bootstrap",
|
||||
"test:cov": "jest --coverage",
|
||||
"version-beta-build": "lerna version prerelease --preid beta",
|
||||
"publish-app": "lerna publish"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/mathuo/dockview.git"
|
||||
},
|
||||
"author": "https://github.com/mathuo",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/mathuo/dockview/issues"
|
||||
},
|
||||
"homepage": "https://github.com/mathuo/dockview#readme",
|
||||
"devDependencies": {
|
||||
"@testing-library/dom": "^8.13.0",
|
||||
"@types/jest": "^27.4.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.19.0",
|
||||
"@typescript-eslint/parser": "^5.19.0",
|
||||
"codecov": "^3.8.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.7.1",
|
||||
"eslint": "^8.13.0",
|
||||
"fs-extra": "^10.0.1",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-dart-sass": "^1.0.2",
|
||||
"jest": "^27.5.1",
|
||||
"jest-sonar-reporter": "^2.0.0",
|
||||
"jsdom": "^19.0.0",
|
||||
"lerna": "^4.0.0",
|
||||
"merge2": "^1.4.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass": "^1.50.0",
|
||||
"sass-loader": "^12.6.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-jest": "^27.1.4",
|
||||
"ts-loader": "^9.2.8",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.6.3",
|
||||
"webpack": "^5.72.0",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.8.1"
|
||||
}
|
||||
"name": "dockview-monorepo-root",
|
||||
"private": true,
|
||||
"description": "Monorepo for https://github.com/mathuo/dockview",
|
||||
"scripts": {
|
||||
"test": "jest",
|
||||
"lint": "eslint packages/**/src/** --ext .ts,.tsx,.js,.jsx",
|
||||
"package": "node scripts/package.js",
|
||||
"package-all": "npm run build-demo && npm run docs && node scripts/package.js",
|
||||
"build": "lerna run build --scope dockview",
|
||||
"build-demo": "lerna run build --scope dockview-demo",
|
||||
"docs": "lerna run docs --scope dockview",
|
||||
"clean": "lerna run clean",
|
||||
"bootstrap": "lerna bootstrap",
|
||||
"bootstrap-no-hoist": "lerna bootstrap",
|
||||
"test:cov": "jest --coverage",
|
||||
"version-beta-build": "lerna version prerelease --preid beta",
|
||||
"publish-app": "lerna publish"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/mathuo/dockview.git"
|
||||
},
|
||||
"author": "https://github.com/mathuo",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/mathuo/dockview/issues"
|
||||
},
|
||||
"homepage": "https://github.com/mathuo/dockview#readme",
|
||||
"devDependencies": {
|
||||
"@testing-library/dom": "^8.13.0",
|
||||
"@types/jest": "^27.4.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.19.0",
|
||||
"@typescript-eslint/parser": "^5.19.0",
|
||||
"codecov": "^3.8.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.7.1",
|
||||
"eslint": "^8.13.0",
|
||||
"fs-extra": "^10.0.1",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-dart-sass": "^1.0.2",
|
||||
"jest": "^27.5.1",
|
||||
"jest-sonar-reporter": "^2.0.0",
|
||||
"jsdom": "^19.0.0",
|
||||
"lerna": "^4.0.0",
|
||||
"merge2": "^1.4.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass": "^1.50.0",
|
||||
"sass-loader": "^12.6.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-jest": "^27.1.4",
|
||||
"ts-loader": "^9.2.8",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.6.3",
|
||||
"webpack": "^5.72.0",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.8.1"
|
||||
}
|
||||
}
|
||||
|
||||
3
packages/dockview-docs/.eslintrc.json
Normal file
3
packages/dockview-docs/.eslintrc.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
35
packages/dockview-docs/.gitignore
vendored
Normal file
35
packages/dockview-docs/.gitignore
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
34
packages/dockview-docs/README.md
Normal file
34
packages/dockview-docs/README.md
Normal file
@ -0,0 +1,34 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
|
||||
|
||||
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
27
packages/dockview-docs/jsexamples/dockview.html
Normal file
27
packages/dockview-docs/jsexamples/dockview.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!-- <!DOCTYPE html> -->
|
||||
<html>
|
||||
<head>
|
||||
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
|
||||
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
|
||||
<script crossorigin src="https://unpkg.com/dockview@latest/dist/dockview.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: grey;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script>
|
||||
const root = document.getElementById("root")
|
||||
const dockviewComponent = new dockview.DockviewComponent(root, {})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
5
packages/dockview-docs/next-env.d.ts
vendored
Normal file
5
packages/dockview-docs/next-env.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
38
packages/dockview-docs/next.config.mjs
Normal file
38
packages/dockview-docs/next.config.mjs
Normal file
@ -0,0 +1,38 @@
|
||||
// const remarkFrontmatter = import('remark-frontmatter');
|
||||
// const rehypePrismPlus = import('rehype-prism-plus');
|
||||
// const remarkPrism = import('remark-prism');
|
||||
// const transpile = require('next-transpile-modules');
|
||||
// import mdx from '@next/mdx';
|
||||
|
||||
import transpile from 'next-transpile-modules';
|
||||
import slugs from 'rehype-slug';
|
||||
import autoLinkHeadings from 'rehype-autolink-headings';
|
||||
import mdx from '@next/mdx';
|
||||
|
||||
const withTM = transpile(['dockview']);
|
||||
|
||||
const withMDX = mdx({
|
||||
extension: /\.mdx$/,
|
||||
options: {
|
||||
remarkPlugins: [],
|
||||
rehypePlugins: [
|
||||
slugs,
|
||||
[
|
||||
autoLinkHeadings,
|
||||
{
|
||||
behavior: 'append',
|
||||
},
|
||||
],
|
||||
],
|
||||
providerImportSource: '@mdx-js/react',
|
||||
},
|
||||
});
|
||||
|
||||
export default withTM(
|
||||
withMDX({
|
||||
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
|
||||
experimental: {
|
||||
externalDir: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
8783
packages/dockview-docs/package-lock.json
generated
Normal file
8783
packages/dockview-docs/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
37
packages/dockview-docs/package.json
Normal file
37
packages/dockview-docs/package.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "dockview-docs",
|
||||
"version": "1.3.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdx-js/loader": "^2.1.1",
|
||||
"@mdx-js/react": "^2.1.1",
|
||||
"@next/mdx": "^12.1.5",
|
||||
"dockview": "^1.3.0",
|
||||
"next": "12.1.5",
|
||||
"prism-react-renderer": "^1.3.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"rehype-autolink-headings": "^6.1.1",
|
||||
"rehype-prism-plus": "^1.3.2",
|
||||
"rehype-slug": "^5.0.1",
|
||||
"remark-autolink-headings": "^7.0.1",
|
||||
"remark-frontmatter": "^4.0.1",
|
||||
"remark-prism": "^1.3.6",
|
||||
"remark-slug": "^7.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "17.0.25",
|
||||
"@types/react": "^18.0.6",
|
||||
"@types/react-dom": "^18.0.2",
|
||||
"eslint": "8.13.0",
|
||||
"eslint-config-next": "12.1.5",
|
||||
"next-transpile-modules": "^9.0.0",
|
||||
"typescript": "4.6.3"
|
||||
}
|
||||
}
|
||||
BIN
packages/dockview-docs/public/favicon.ico
Normal file
BIN
packages/dockview-docs/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
1
packages/dockview-docs/public/icon-link.svg
Normal file
1
packages/dockview-docs/public/icon-link.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
|
||||
|
After Width: | Height: | Size: 350 B |
4
packages/dockview-docs/public/vercel.svg
Normal file
4
packages/dockview-docs/public/vercel.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
70
packages/dockview-docs/src/components/code.tsx
Normal file
70
packages/dockview-docs/src/components/code.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import Highlight, { defaultProps, Language } from 'prism-react-renderer';
|
||||
import theme from 'prism-react-renderer/themes/palenight';
|
||||
|
||||
interface CodeBlockProps {
|
||||
children: string;
|
||||
className?: string;
|
||||
live?: boolean | string;
|
||||
render?: boolean | string;
|
||||
url: string;
|
||||
code?: boolean | string;
|
||||
center?: boolean | string;
|
||||
edit?: boolean | string;
|
||||
}
|
||||
|
||||
export const CodeBlock = ({
|
||||
children,
|
||||
className = '',
|
||||
live,
|
||||
render,
|
||||
url,
|
||||
code = true,
|
||||
center = true,
|
||||
edit = false,
|
||||
}: CodeBlockProps) => {
|
||||
if (!className) {
|
||||
return (
|
||||
<code
|
||||
style={{
|
||||
backgroundColor: 'rgba(27, 31, 35, 0.05)',
|
||||
fontSize: '85%',
|
||||
padding: '0.2em 0.4em',
|
||||
margin: '0px',
|
||||
borderRadius: '5px',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
const language = className.replace(/language-/, '');
|
||||
|
||||
return (
|
||||
<Highlight
|
||||
{...defaultProps}
|
||||
theme={theme}
|
||||
code={children.trim()}
|
||||
language={language as Language}
|
||||
>
|
||||
{({ className, style, tokens, getLineProps, getTokenProps }) => (
|
||||
<pre
|
||||
className={className}
|
||||
style={{ ...style, padding: '20px' }}
|
||||
>
|
||||
{tokens.map((line, i) => (
|
||||
<div key={i} {...getLineProps({ line, key: i })}>
|
||||
{line.map((token, key) => (
|
||||
<span
|
||||
key={key}
|
||||
{...getTokenProps({ token, key })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
);
|
||||
};
|
||||
19
packages/dockview-docs/src/components/container.tsx
Normal file
19
packages/dockview-docs/src/components/container.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { PAGES } from '../references/pages';
|
||||
import { Navigation } from './navigation';
|
||||
|
||||
export const Container = (props: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<main
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '20px' }}>
|
||||
<Navigation pages={PAGES} />
|
||||
</div>
|
||||
<div style={{ flexGrow: 1, padding: '20px' }}>{props.children}</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
7
packages/dockview-docs/src/components/footer.tsx
Normal file
7
packages/dockview-docs/src/components/footer.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
export const Footer = (props: {}) => {
|
||||
return (
|
||||
<div style={{ height: '100px', backgroundColor: 'rgb(30,30,30)' }}>
|
||||
footer
|
||||
</div>
|
||||
);
|
||||
};
|
||||
46
packages/dockview-docs/src/components/header.tsx
Normal file
46
packages/dockview-docs/src/components/header.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import { DockviewReact, DockviewReadyEvent } from 'dockview';
|
||||
|
||||
const components = {
|
||||
default: () => {
|
||||
return <div>Hello World</div>;
|
||||
},
|
||||
};
|
||||
|
||||
export const Header = (props: {}) => {
|
||||
const onReady = (event: DockviewReadyEvent) => {
|
||||
event.api.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
event.api.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
event.api.addPanel({
|
||||
id: 'panel3',
|
||||
component: 'default',
|
||||
position: {
|
||||
referencePanel: 'panel2',
|
||||
direction: 'right',
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: '1000px',
|
||||
backgroundColor: '#0070f3',
|
||||
padding: '5vw',
|
||||
}}
|
||||
>
|
||||
<DockviewReact
|
||||
onReady={onReady}
|
||||
components={components}
|
||||
className="dockview-theme-dark"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
88
packages/dockview-docs/src/components/navigation.tsx
Normal file
88
packages/dockview-docs/src/components/navigation.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
import * as React from 'react';
|
||||
import { Page } from '../references/pages';
|
||||
import Link from 'next/link';
|
||||
|
||||
const LinkHeader = (props: { url: string; title: string }) => {
|
||||
return (
|
||||
<Link href={props.url}>
|
||||
<a>{props.title}</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export const CollapsibleNode = (props: {
|
||||
page: Page;
|
||||
children: React.ReactNode;
|
||||
depth: number;
|
||||
}) => {
|
||||
const [expanded, setExpaned] = React.useState<boolean>(false);
|
||||
|
||||
const onClick = () => {
|
||||
setExpaned(!expanded);
|
||||
};
|
||||
|
||||
const cn = React.useMemo(() => {
|
||||
return ['node', expanded ? 'expanded' : 'collapsed'].join(' ');
|
||||
}, [expanded]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={cn} onClick={onClick}>
|
||||
{props.page.url ? (
|
||||
<LinkHeader url={props.page.url} title={props.page.title} />
|
||||
) : (
|
||||
props.page.title
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="node"
|
||||
style={{
|
||||
display: expanded ? '' : 'none',
|
||||
overflow: 'hidden',
|
||||
marginLeft: `${props.depth * 8}px`,
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const Node = (props: { page: Page; depth: number }) => {
|
||||
if (props.page.routes) {
|
||||
return (
|
||||
<CollapsibleNode page={props.page} depth={props.depth + 1}>
|
||||
{props.page.routes.map((page) => (
|
||||
<Node
|
||||
key={page.title}
|
||||
page={page}
|
||||
depth={props.depth + 1}
|
||||
/>
|
||||
))}
|
||||
</CollapsibleNode>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="node">
|
||||
{props.page.url ? (
|
||||
<LinkHeader url={props.page.url} title={props.page.title} />
|
||||
) : (
|
||||
props.page.title
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Navigation = (props: { pages: Page[] }) => {
|
||||
return (
|
||||
<div
|
||||
className="navigation"
|
||||
style={{ position: 'sticky', top: '20px', left: '20px' }}
|
||||
>
|
||||
{props.pages.map((page) => (
|
||||
<Node key={page.title} page={page} depth={0} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
49
packages/dockview-docs/src/components/simpleSplitview.tsx
Normal file
49
packages/dockview-docs/src/components/simpleSplitview.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import {
|
||||
ISplitviewPanelProps,
|
||||
Orientation,
|
||||
SplitviewReact,
|
||||
SplitviewReadyEvent,
|
||||
} from 'dockview';
|
||||
|
||||
const components = {
|
||||
default: (props: ISplitviewPanelProps<{ title: string }>) => {
|
||||
return <div style={{ margin: '20px' }}>{props.params.title}</div>;
|
||||
},
|
||||
};
|
||||
|
||||
export const SimpleSplitview = () => {
|
||||
const onReady = (event: SplitviewReadyEvent) => {
|
||||
event.api.addPanel({
|
||||
id: 'panel_1',
|
||||
component: 'default',
|
||||
params: {
|
||||
title: 'Panel 1',
|
||||
},
|
||||
});
|
||||
|
||||
event.api.addPanel({
|
||||
id: 'panel_2',
|
||||
component: 'default',
|
||||
params: {
|
||||
title: 'Panel 2',
|
||||
},
|
||||
});
|
||||
|
||||
event.api.addPanel({
|
||||
id: 'panel_3',
|
||||
component: 'default',
|
||||
params: {
|
||||
title: 'Panel 3',
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<SplitviewReact
|
||||
components={components}
|
||||
onReady={onReady}
|
||||
orientation={Orientation.HORIZONTAL}
|
||||
className="dockview-theme-dark"
|
||||
/>
|
||||
);
|
||||
};
|
||||
5
packages/dockview-docs/src/components/test.tsx
Normal file
5
packages/dockview-docs/src/components/test.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export const Test = () => {
|
||||
return <div>this is a test component</div>;
|
||||
};
|
||||
33
packages/dockview-docs/src/pages/_app.tsx
Normal file
33
packages/dockview-docs/src/pages/_app.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import { Header } from '../components/header';
|
||||
import { Footer } from '../components/footer';
|
||||
import { Container } from '../components/container';
|
||||
import { AppProps } from 'next/app';
|
||||
import '../styles/globals.css';
|
||||
import { CodeBlock } from '../components/code';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
|
||||
const components = {
|
||||
code: CodeBlock,
|
||||
} as any;
|
||||
|
||||
const MyApp = (props: AppProps) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<MDXProvider components={components}>
|
||||
<Header />
|
||||
<Container>
|
||||
<props.Component {...props.pageProps} />
|
||||
</Container>
|
||||
<Footer />
|
||||
</MDXProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MyApp;
|
||||
28
packages/dockview-docs/src/pages/_document.tsx
Normal file
28
packages/dockview-docs/src/pages/_document.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { Html, Head, Main, NextScript } from 'next/document';
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossOrigin="true"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
{/* <link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.css"
|
||||
/> */}
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
12
packages/dockview-docs/src/pages/about.tsx
Normal file
12
packages/dockview-docs/src/pages/about.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import * as React from 'react';
|
||||
import { Test } from '../test';
|
||||
|
||||
const Component = () => {
|
||||
return (
|
||||
<div style={{ height: '50vh', width: '50vw' }}>
|
||||
<Test />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Component;
|
||||
9
packages/dockview-docs/src/pages/basics.tsx
Normal file
9
packages/dockview-docs/src/pages/basics.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import { NextPage } from 'next';
|
||||
|
||||
const Page: NextPage = (props) => {
|
||||
return (
|
||||
<div style={{ height: '1000px', backgroundColor: 'red' }}>basics</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
130
packages/dockview-docs/src/pages/index.mdx
Normal file
130
packages/dockview-docs/src/pages/index.mdx
Normal file
@ -0,0 +1,130 @@
|
||||
import { SimpleSplitview } from '../components/simpleSplitview';
|
||||
|
||||
# Introduction
|
||||
|
||||
**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
|
||||
|
||||
## Features
|
||||
|
||||
- Themable and customizable
|
||||
- Support for the serialization and deserialization of layouts
|
||||
- Drag and drop support
|
||||
|
||||
# Quick start
|
||||
|
||||
`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
|
||||
|
||||
```shell
|
||||
npm install dockview
|
||||
```
|
||||
|
||||
You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
|
||||
depending on your solution this might be:
|
||||
|
||||
```css
|
||||
@import './node_modules/dockview/dist/styles/dockview.css';
|
||||
```
|
||||
|
||||
A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the `body` component:
|
||||
|
||||
```html
|
||||
<body classname="dockview-theme-dark">
|
||||
...
|
||||
</body>
|
||||
<body classname="dockview-theme-light">
|
||||
...
|
||||
</body>
|
||||
```
|
||||
|
||||
There are 4 components you may want to use:
|
||||
|
||||
Splitview
|
||||
|
||||
<div
|
||||
style={{
|
||||
height: '100px',
|
||||
backgroundColor: 'rgb(30,30,30)',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<SimpleSplitview />
|
||||
</div>
|
||||
|
||||
```tsx
|
||||
import {
|
||||
DockviewReact,
|
||||
DockviewReadyEvent,
|
||||
PanelCollection,
|
||||
IDockviewPanelProps,
|
||||
IDockviewPanelHeaderProps,
|
||||
} from 'dockview';
|
||||
|
||||
const components: PanelCollection<IDockviewPanelProps> = {
|
||||
default: (props: IDockviewPanelProps<{ someProps: string }>) => {
|
||||
return <div>{props.params.someProps}</div>;
|
||||
},
|
||||
};
|
||||
|
||||
const headers: PanelCollection<IDockviewPanelHeaderProps> = {
|
||||
customTab: (props: IDockviewPanelHeaderProps) => {
|
||||
return (
|
||||
<div>
|
||||
<span>{props.api.title}</span>
|
||||
<span onClick={() => props.api.close()}>{'[x]'}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
const Component = () => {
|
||||
const onReady = (event: DockviewReadyEvent) => {
|
||||
event.api.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
tabComponent: 'customTab', // optional custom header
|
||||
params: {
|
||||
someProps: 'Hello',
|
||||
},
|
||||
});
|
||||
event.api.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
params: {
|
||||
someProps: 'World',
|
||||
},
|
||||
position: { referencePanel: 'panel1', direction: 'below' },
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<DockviewReact
|
||||
components={components}
|
||||
tabComponents={headers} // optional headers renderer
|
||||
onReady={onReady}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
```tsx
|
||||
const components: PanelCollection<IDockviewPanelProps> = {
|
||||
default: (props: IDockviewPanelProps<{ someProps: string }>) => {
|
||||
return <div>{props.params.someProps}</div>;
|
||||
},
|
||||
fancy: (props: IDockviewPanelProps) => {
|
||||
return (
|
||||
<DockviewComponents.Panel>
|
||||
<DockviewComponents.Tab>
|
||||
<div>
|
||||
<span>{props.api.title}</span>
|
||||
<span onClick={() => props.api.close()}>{'Close'}</span>
|
||||
</div>
|
||||
</DockviewComponents.Tab>
|
||||
<DockviewComponents.Content>
|
||||
<div>{'Hello world'}</div>
|
||||
</DockviewComponents.Content>
|
||||
</DockviewComponents.Panel>
|
||||
);
|
||||
},
|
||||
};
|
||||
```
|
||||
49
packages/dockview-docs/src/references/pages.ts
Normal file
49
packages/dockview-docs/src/references/pages.ts
Normal file
@ -0,0 +1,49 @@
|
||||
export interface Page {
|
||||
title: string;
|
||||
url?: string;
|
||||
routes?: Page[];
|
||||
}
|
||||
|
||||
export const PAGES: Page[] = [
|
||||
{ title: 'Introduction', url: '/#introduction' },
|
||||
{ title: 'Basics', url: '/basics/#basics' },
|
||||
{
|
||||
title: 'API',
|
||||
url: '#api',
|
||||
routes: [
|
||||
{
|
||||
title: 'Dockview',
|
||||
url: '#dockview',
|
||||
routes: [
|
||||
{ title: 'Item1', url: '/item1' },
|
||||
{ title: 'Item2', url: '/item2' },
|
||||
],
|
||||
},
|
||||
// {
|
||||
// title: 'Gridview',
|
||||
// url: '#gridview',
|
||||
// routes: [
|
||||
// { title: 'Item1', url: 'item1' },
|
||||
// { title: 'Item2', url: 'item2' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'Splitview',
|
||||
// url: '#splitview',
|
||||
// routes: [
|
||||
// { title: 'Item1', url: 'item1' },
|
||||
// { title: 'Item2', url: 'item2' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'Paneview',
|
||||
// url: '#paneivew',
|
||||
// routes: [
|
||||
// { title: 'Item1', url: 'item1' },
|
||||
// { title: 'Item2', url: 'item2' },
|
||||
// ],
|
||||
// },
|
||||
],
|
||||
},
|
||||
{ title: 'Guides', url: '#guides' },
|
||||
];
|
||||
43
packages/dockview-docs/src/styles/globals.css
Normal file
43
packages/dockview-docs/src/styles/globals.css
Normal file
@ -0,0 +1,43 @@
|
||||
@import "./navigation.css";
|
||||
@import "~dockview/dist/styles/dockview.css";
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color:dodgerblue;
|
||||
}
|
||||
|
||||
a, a:hover, a:visited, a:active {
|
||||
color:dodgerblue;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
background-image: url(/icon-link.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center center;
|
||||
}
|
||||
45
packages/dockview-docs/src/styles/navigation.css
Normal file
45
packages/dockview-docs/src/styles/navigation.css
Normal file
@ -0,0 +1,45 @@
|
||||
.navigation {
|
||||
padding: 30px;
|
||||
background-color: lightgray;
|
||||
font-size: 16px;
|
||||
width: 200px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.node {
|
||||
padding: 5px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.expandable-node::after {
|
||||
|
||||
}
|
||||
|
||||
.expanded::after {
|
||||
border-width: 6px 4px 0px;
|
||||
border-color: grey transparent transparent;
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-style: solid;
|
||||
border-radius: 1px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
|
||||
.collapsed::after {
|
||||
border-width: 4px 6px 4px 0px;
|
||||
border-color: transparent grey transparent;
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-style: solid;
|
||||
border-radius: 1px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
79
packages/dockview-docs/src/test.tsx
Normal file
79
packages/dockview-docs/src/test.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import {
|
||||
GridviewReact,
|
||||
Orientation,
|
||||
GridviewReadyEvent,
|
||||
DockviewReact,
|
||||
DockviewReadyEvent,
|
||||
} from 'dockview';
|
||||
|
||||
const components = {
|
||||
default: () => {
|
||||
return <div>hello world</div>;
|
||||
},
|
||||
docking: () => {
|
||||
return <Test2 />;
|
||||
},
|
||||
};
|
||||
|
||||
export const Test = () => {
|
||||
const onReady = (event: GridviewReadyEvent) => {
|
||||
event.api.addPanel({
|
||||
component: 'default',
|
||||
id: 'view_1',
|
||||
});
|
||||
|
||||
event.api.addPanel({
|
||||
component: 'default',
|
||||
id: 'view_2',
|
||||
});
|
||||
|
||||
event.api.addPanel({
|
||||
component: 'docking',
|
||||
id: 'view_3',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<GridviewReact
|
||||
components={components}
|
||||
orientation={Orientation.HORIZONTAL}
|
||||
onReady={onReady}
|
||||
className="dockview-theme-dark"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const components2 = {
|
||||
default: () => {
|
||||
return <div>hello world</div>;
|
||||
},
|
||||
};
|
||||
|
||||
export const Test2 = () => {
|
||||
const onReady = (event: DockviewReadyEvent) => {
|
||||
event.api.addPanel({
|
||||
component: 'default',
|
||||
id: 'view_1',
|
||||
});
|
||||
|
||||
event.api.addPanel({
|
||||
component: 'default',
|
||||
id: 'view_2',
|
||||
});
|
||||
|
||||
event.api.addPanel({
|
||||
component: 'default',
|
||||
id: 'view_3',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
// <div style={{ height: '100%', width: '100%' }}>
|
||||
<DockviewReact
|
||||
components={components2}
|
||||
onReady={onReady}
|
||||
className="dockview-theme-dark"
|
||||
/>
|
||||
// </div>
|
||||
);
|
||||
};
|
||||
24
packages/dockview-docs/tsconfig.json
Normal file
24
packages/dockview-docs/tsconfig.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/pages/index.msx", "src/pages/basic.stsx"],
|
||||
"exclude": ["node_modules"],
|
||||
"paths": {
|
||||
"react": ["node_modules/react"],
|
||||
"react-dom": ["node_modules/react-dom"]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user