chore: docs: plain typescript examples

.codesandbox/ci.json

@@ -22,7 +22,7 @@
     "/packages/docs/sandboxes/simple-dockview",
     "/packages/docs/sandboxes/tabheight-dockview",
     "/packages/docs/sandboxes/updatetitle-dockview",
-    "/packages/docs/sandboxes/vanilla-dockview",
+    "/packages/docs/sandboxes/typescript/vanilla-dockview",
     "/packages/docs/sandboxes/watermark-dockview"
   ],
   "node": "16"

packages/docs/docs/components/dockview.mdx

@@ -2,7 +2,10 @@
 description: Dockview Documentation
 ---
 
-import { Container } from '@site/src/components/ui/container';
+import {
+    Container,
+    MultiFrameworkContainer,
+} from '@site/src/components/ui/container';
 
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
@@ -24,7 +27,9 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
 import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
 import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
 import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
-import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app';
+
+import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
+import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app';
 
 # Dockview
 
@@ -32,12 +37,16 @@ import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockvie
 
 Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
 
-<Container sandboxId="simple-dockview">
+<MultiFrameworkContainer
-    <SimpleDockview />
+    sandboxId="simple-dockview"
-</Container>
+    react={SimpleDockview}
+    typescript={attachSimpleDockview}
+/>
 
-You can access the panels associated group through the `panel.group` variable.
+<br />
-The group will always be defined and will change if a panel is moved into another group.
+
+> You can access the panels associated group through the `panel.group` variable.
+> The group will always be defined and will change if a panel is moved into another group.
 
 ## DockviewReact Component
 
@@ -705,19 +714,11 @@ If you wish to interact with the drop event from one dockview instance in anothe
     <NestedDockview />
 </Container>
 
-### Example
+### Window-like mananger with tabs
-
-hello
 
 <DockviewNative2 />
 
-hello 2
+## Vanilla JS
-
-<div style={{ height: '400px', width: '100%' }}>
-    <App />
-</div>
-
-## VanillaJS
 
 > Note: This section is experimental and support for Vanilla JS is a work in progress.
 
@@ -728,6 +729,6 @@ The core library is published as an independant package under the name `dockview
 > `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.
 
 <Container
-    sandboxId="vanilla-dockview"
+    sandboxId="typescript/vanilla-dockview"
     injectVanillaJS={attachDockviewVanilla}
 />

packages/docs/sandboxes/javascript/simple-dockview/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "javascript-simple-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.ts",
+  "dependencies": {
+    "dockview-core": "*"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.5"
+  },
+  "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"
+  ]
+}

packages/docs/sandboxes/javascript/simple-dockview/src/app.ts

@@ -0,0 +1,114 @@
+import {
+    DockviewComponent,
+    IContentRenderer,
+    IGroupPanelInitParameters,
+} from 'dockview-core';
+
+class DefaultPanel implements IContentRenderer {
+    private _element: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.padding = '20px';
+        this._element.style.color = 'white';
+    }
+
+    init(params: IGroupPanelInitParameters): void {
+        this._element.textContent = params.params.title;
+    }
+}
+
+export function attach(parent: HTMLElement): {
+    dispose: () => void;
+} {
+    const element = document.createElement('div');
+    element.className = 'dockview-theme-abyss';
+    element.style.height = '100%';
+    element.style.width = '100%';
+
+    const dockview = new DockviewComponent({
+        components: {
+            default: DefaultPanel,
+        },
+        parentElement: element,
+    });
+
+    parent.appendChild(element);
+
+    const { clientWidth, clientHeight } = parent;
+    dockview.layout(clientWidth, clientHeight);
+
+    const panel = dockview.addPanel({
+        id: 'panel_1',
+        component: 'default',
+        params: {
+            title: 'Panel 1',
+        },
+    });
+
+    panel.group.locked = true;
+    panel.group.header.hidden = true;
+
+    dockview.addPanel({
+        id: 'panel_2',
+        component: 'default',
+        params: {
+            title: 'Panel 2',
+        },
+    });
+
+    dockview.addPanel({
+        id: 'panel_3',
+        component: 'default',
+        params: {
+            title: 'Panel 3',
+        },
+    });
+
+    dockview.addPanel({
+        id: 'panel_4',
+        component: 'default',
+        params: {
+            title: 'Panel 4',
+        },
+        position: { referencePanel: 'panel_1', direction: 'right' },
+    });
+
+    const panel5 = dockview.addPanel({
+        id: 'panel_5',
+        component: 'default',
+        params: {
+            title: 'Panel 5',
+        },
+        position: { referencePanel: 'panel_3', direction: 'right' },
+    });
+
+    dockview.addPanel({
+        id: 'panel_6',
+        component: 'default',
+        params: {
+            title: 'Panel 6',
+        },
+        position: { referencePanel: 'panel_5', direction: 'below' },
+    });
+
+    dockview.addPanel({
+        id: 'panel_7',
+        component: 'default',
+        params: {
+            title: 'Panel 7',
+        },
+        position: { referencePanel: 'panel_6', direction: 'right' },
+    });
+
+    return {
+        dispose: () => {
+            dockview.dispose();
+            element.remove();
+        },
+    };
+}

packages/docs/sandboxes/javascript/vanilla-dockview/public/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

packages/docs/sandboxes/javascript/vanilla-dockview/src/index.ts

@@ -0,0 +1,10 @@
+import './styles.css';
+import 'dockview-core/dist/styles/dockview.css';
+
+import { attach } from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    attach(rootElement);
+}

packages/docs/sandboxes/javascript/vanilla-dockview/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%;
+
+}

packages/docs/sandboxes/javascript/vanilla-dockview/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "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,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true
+  }
+}

packages/docs/sandboxes/updatetitle-dockview/src/app.tsx

@@ -6,10 +6,8 @@ import {
 import * as React from 'react';
 
 const components = {
-    default: (
+    default: (props: IDockviewPanelProps<{ myValue: string }>) => {
-        props: IDockviewPanelProps<{ title: string; myValue: string }>
+        const [title, setTitle] = React.useState<string>(props.api.title);
-    ) => {
-        const [title, setTitle] = React.useState<string>(props.params.title);
 
         const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
             setTitle(event.target.value);
@@ -27,6 +25,7 @@ const components = {
                 </div>
                 <input value={title} onChange={onChange} />
                 <button onClick={onClick}>Change</button>
+                {JSON.stringify(Object.keys(props.params))}
             </div>
         );
     },
@@ -44,7 +43,6 @@ export const App: React.FC = () => {
             id: 'panel_2',
             component: 'default',
             title: 'Panel 2',
-
             position: { referencePanel: panel },
         });
 
@@ -60,7 +58,6 @@ export const App: React.FC = () => {
             id: 'panel_4',
             component: 'default',
             title: 'Panel 4',
-
             position: { referencePanel: panel3 },
         });
     };

packages/docs/src/components/ui/container.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { CodeSandboxButton } from './codeSandboxButton';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import './container.scss';
+import { Spinner } from './spinner';
 
 export const Container = (props: {
     children?: React.ReactNode;
@@ -41,3 +44,147 @@ export const Container = (props: {
         </>
     );
 };
+
+const ReactIcon = (props: { height: number; width: number }) => {
+    return (
+        <img
+            // className="dockview-svg"
+            style={{ marginRight: '0px 4px' }}
+            height={props.height}
+            width={props.width}
+            src={useBaseUrl('img/react-icon.svg')}
+        />
+    );
+};
+
+const JavascriptIcon = (props: { height: number; width: number }) => {
+    return (
+        <img
+            // className="dockview-svg "
+            style={{ marginRight: '0px 4px' }}
+            height={props.height}
+            width={props.width}
+            src={useBaseUrl('img/js-icon.svg')}
+        />
+    );
+};
+
+export const MultiFrameworkContainer = (props: {
+    react: React.FC;
+    typescript: (parent: HTMLElement) => { dispose: () => void };
+    sandboxId: string;
+    height?: number;
+}) => {
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    const [framework, setFramework] = React.useState<string>('React');
+
+    const [animation, setAnimation] = React.useState<boolean>(false);
+
+    React.useEffect(() => {
+        setAnimation(true);
+
+        setTimeout(() => {
+            setAnimation(false);
+        }, 500);
+    }, [framework]);
+
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+
+        if (framework === 'Javascript') {
+            const disposable = props.typescript(ref.current);
+
+            return () => {
+                disposable.dispose();
+            };
+        }
+
+        return;
+    }, [props.typescript, framework]);
+
+    const sandboxId = React.useMemo(() => {
+        if (framework === 'Javascript') {
+            return `javascript/${props.sandboxId}`;
+        }
+        return props.sandboxId;
+    }, [props.sandboxId, framework]);
+
+    return (
+        <>
+            <div
+                ref={ref}
+                style={{
+                    position: 'relative',
+                    height: props.height ? `${props.height}px` : '300px',
+                }}
+            >
+                {animation && (
+                    <div
+                        style={{
+                            background: 'rgba(30,30,30)',
+                            position: 'absolute',
+                            zIndex: 9999,
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <Spinner />
+                    </div>
+                )}
+                {framework === 'React' && <props.react />}
+            </div>
+            <div
+                style={{
+                    margin: '2px 0px',
+                    padding: '2px 0px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    fontSize: '14px',
+                    height: '24px',
+                }}
+            >
+                <div
+                    className="framework-button"
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        cursor: 'pointer',
+                    }}
+                >
+                    {framework === 'React' ? (
+                        <ReactIcon height={16} width={16} />
+                    ) : (
+                        <JavascriptIcon height={16} width={16} />
+                    )}
+                    <select
+                        style={{
+                            border: 'none',
+                            fontWeight: 'bold',
+                            backgroundColor: 'inherit',
+                            cursor: 'inherit',
+                            color: 'inherit',
+                            height: '24px',
+                        }}
+                        onChange={(e) => {
+                            const target = e.target as HTMLSelectElement;
+                            setFramework(target.value);
+                        }}
+                    >
+                        <option value="React">{'React'}</option>
+                        <option value="Javascript">{'Javascript'}</option>
+                    </select>
+                </div>
+                <span style={{ flexGrow: 1 }} />
+                <CodeSandboxButton id={sandboxId} />
+            </div>
+        </>
+    );
+};

packages/docs/src/components/ui/referenceTable.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+export interface ReferenceProps {
+    props: {
+        prop: string;
+        default?: string;
+        type: string;
+    }[];
+}
+
+export const ReferenceTable = (props: ReferenceProps) => {
+    return (
+        <table style={{ fontSize: '14px' }}>
+            <thead>
+                <tr>
+                    <th>Property</th>
+                    <th>Type</th>
+                    <th>Default</th>
+                </tr>
+            </thead>
+            <tbody>
+                {props.props.map((property) => {
+                    return (
+                        <tr key={property.prop}>
+                            <td>
+                                <code>{property.prop}</code>
+                            </td>
+                            <td>
+                                <code>{property.type}</code>
+                            </td>
+                            <td>
+                                {property.default !== undefined && (
+                                    <code>{property.default}</code>
+                                )}
+                            </td>
+                        </tr>
+                    );
+                })}
+            </tbody>
+        </table>
+    );
+};

packages/docs/src/components/ui/spinner.scss

@@ -0,0 +1,55 @@
+.lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+.lds-ellipsis div {
+    position: absolute;
+    top: 33px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: #fff;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@keyframes lds-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+@keyframes lds-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(24px, 0);
+    }
+}

packages/docs/src/components/ui/spinner.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import './spinner.scss';
+
+export const Spinner = () => {
+    return (
+        <div className="lds-ellipsis">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+    );
+};

packages/docs/static/img/js-icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
+<rect width="630" height="630" fill="#f7df1e"/>
+<path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
+</svg>

packages/docs/static/img/react-icon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+  <title>React Logo</title>
+  <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
+  <g stroke="#61dafb" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+  </g>
+</svg>

packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx

@@ -24,7 +24,7 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
 import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
 import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
 import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
-import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app';
+import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
 
 # Dockview
 
@@ -728,6 +728,6 @@ The core library is published as an independant package under the name `dockview
 > `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.
 
 <Container
-    sandboxId="vanilla-dockview"
+    sandboxId="javascript/vanilla-dockview"
     injectVanillaJS={attachDockviewVanilla}
 />