@nu-art/ts-workspace-frontend 0.400.7

package/core/module-pack.d.ts

@@ -0,0 +1,2 @@
+export declare const ModulePack_Frontend_TSWorkspace: import("../modules/ModuleFE_Workspace.js").ModuleFE_Workspace_Class[];
+export * from '../modules/ModuleFE_Workspace.js';

package/core/module-pack.js

@@ -0,0 +1,22 @@
+/*
+ * Live-Docs will allow you to add and edit tool-tips from within your app...
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ModuleFE_Workspace } from '../modules/ModuleFE_Workspace.js';
+export const ModulePack_Frontend_TSWorkspace = [
+    ModuleFE_Workspace,
+];
+export * from '../modules/ModuleFE_Workspace.js';

package/index.d.ts

@@ -0,0 +1,5 @@
+export * from './core/module-pack.js';
+export * from './ui/TS_Workspace.js';
+export * from './ui/Panels.js';
+export * from './ui/TS_OrientedWorkspace.js';
+export * from './ui/types.js';

package/index.js

@@ -0,0 +1,23 @@
+/*
+ * Permissions management system, define access level for each of
+ * your server apis, and restrict users by giving them access levels
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './core/module-pack.js';
+export * from './ui/TS_Workspace.js';
+export * from './ui/Panels.js';
+export * from './ui/TS_OrientedWorkspace.js';
+export * from './ui/types.js';

package/modules/ModuleFE_Workspace.d.ts

@@ -0,0 +1,17 @@
+import { Module, TypedMap } from '@nu-art/ts-common';
+import { PanelConfig } from '../index.js';
+type Config = {
+    defaultConfigs: TypedMap<PanelConfig>;
+    accountResolver: () => string;
+};
+export declare class ModuleFE_Workspace_Class extends Module<Config> {
+    private workspacesToUpsert;
+    private upsertRunnable;
+    getWorkspaceConfigByKey: (key: string) => PanelConfig<any>;
+    private getWorkspaceByKey;
+    private getStorageKeyForWorkspace;
+    setWorkspaceByKey: (key: string, config: PanelConfig<any>) => Promise<void>;
+    deleteWorkspaceByKey: (key: string) => Promise<void>;
+}
+export declare const ModuleFE_Workspace: ModuleFE_Workspace_Class;
+export {};

package/modules/ModuleFE_Workspace.js

@@ -0,0 +1,50 @@
+/*
+ * A typescript & react boilerplate with api call example
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { StorageKey } from '@nu-art/thunderstorm-frontend/index';
+import { _values, BadImplementationException, Module } from '@nu-art/ts-common';
+export class ModuleFE_Workspace_Class extends Module {
+    workspacesToUpsert = {};
+    upsertRunnable;
+    getWorkspaceConfigByKey = (key) => {
+        const workspace = this.getWorkspaceByKey(key);
+        const config = workspace?.config || this.config.defaultConfigs[key];
+        if (!config)
+            throw new BadImplementationException(`Could not find config for key ${key}`);
+        return config;
+    };
+    getWorkspaceByKey = (key) => {
+        return this.getStorageKeyForWorkspace(key).get();
+    };
+    getStorageKeyForWorkspace = (key) => new StorageKey(`workspace_key__${key}`);
+    setWorkspaceByKey = async (key, config) => {
+        this.workspacesToUpsert[key] = { key: key, config: config };
+        clearTimeout(this.upsertRunnable);
+        this.upsertRunnable = setTimeout(async () => {
+            const values = _values(this.workspacesToUpsert);
+            values.forEach(workspace => {
+                this.logInfo('SET WORKSPACE KEY', `KEY: ${workspace.key}`);
+                this.getStorageKeyForWorkspace(workspace.key).set(workspace);
+            });
+            this.workspacesToUpsert = {};
+        }, 500);
+    };
+    deleteWorkspaceByKey = async (key) => {
+        this.getStorageKeyForWorkspace(key).delete();
+    };
+}
+export const ModuleFE_Workspace = new ModuleFE_Workspace_Class();

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@nu-art/ts-workspace-frontend",
+  "version": "0.400.7",
+  "description": "TS Workspace Frontend",
+  "keywords": [
+    "TacB0sS",
+    "express",
+    "infra",
+    "live-docs",
+    "nu-art",
+    "thunderstorm",
+    "typescript"
+  ],
+  "license": "Apache-2.0",
+  "author": "TacB0sS",
+  "scripts": {
+    "build": "tsc"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "dependencies": {
+    "@nu-art/ts-workspace-shared": "0.400.7",
+    "@nu-art/firebase-frontend": "0.400.7",
+    "@nu-art/firebase-shared": "0.400.7",
+    "@nu-art/thunderstorm-frontend": "0.400.7",
+    "@nu-art/thunderstorm-shared": "0.400.7",
+    "@nu-art/ts-common": "0.400.7",
+    "@nu-art/user-account-frontend": "0.400.7",
+    "@nu-art/user-account-shared": "0.400.7",
+    "express": "^4.18.2",
+    "firebase": "^11.9.0",
+    "firebase-admin": "13.4.0",
+    "firebase-functions": "6.3.2",
+    "moment": "^2.29.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.9.0",
+    "request": "^2.88.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/express": "^4.17.17",
+    "@types/history": "^4.7.2",
+    "@types/request": "^2.48.1"
+  },
+  "unitConfig": {
+    "type": "typescript-lib"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js"
+    }
+  }
+}

package/ui/Panels.d.ts

@@ -0,0 +1,17 @@
+import { Config_PanelParent, PanelConfig, Props_WorkspacePanel, State_WorkspacePanel } from './types.js';
+import { ComponentAsync, ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+export declare abstract class PanelBaseSync<Config, State = {}, Props = {}> extends ComponentSync<Props_WorkspacePanel<Config, Props> & Props, State_WorkspacePanel<Config, State>> {
+    protected shouldAlwaysReDerive: boolean;
+    protected deriveStateFromProps(nextProps: Props_WorkspacePanel<Config, Props>): State_WorkspacePanel<Config, State>;
+    shouldReDeriveState(nextProps: Readonly<Props_WorkspacePanel<Config, Props>>): boolean;
+}
+export declare abstract class PanelBaseAsync<Config, State = {}, Props = {}> extends ComponentAsync<Props_WorkspacePanel<Config, Props>, State_WorkspacePanel<Config, State>> {
+    protected deriveStateFromProps(nextProps: Props_WorkspacePanel<Config, Props>): Promise<State_WorkspacePanel<Config, State>>;
+    shouldReDeriveState(nextProps: Readonly<Props_WorkspacePanel<Config, Props>>): boolean;
+}
+export declare abstract class PanelParentSync<Config = {}, State = {}, Props = {}> extends PanelBaseSync<Config_PanelParent<Config>, State, Props> {
+    renderPanel(panel: PanelConfig): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+}
+export declare abstract class PanelParentAsync<Config = {}, State = {}, Props = {}> extends PanelBaseAsync<Config_PanelParent<Config>, State, Props> {
+    renderPanel(panel: PanelConfig): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+}

package/ui/Panels.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentAsync, ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { compare, resolveContent } from '@nu-art/ts-common';
+export class PanelBaseSync extends ComponentSync {
+    shouldAlwaysReDerive = false;
+    deriveStateFromProps(nextProps) {
+        return { config: { ...nextProps.config } };
+    }
+    shouldReDeriveState(nextProps) {
+        return this.shouldAlwaysReDerive || !compare(this.state.config, nextProps.config);
+    }
+}
+export class PanelBaseAsync extends ComponentAsync {
+    async deriveStateFromProps(nextProps) {
+        return { config: { ...nextProps.config } };
+    }
+    shouldReDeriveState(nextProps) {
+        return !compare(this.state.config, nextProps.config);
+    }
+}
+export class PanelParentSync extends PanelBaseSync {
+    renderPanel(panel) {
+        const ComponentToRender = resolveContent(this.props.instances?.[panel.key], panel.data, this.props.onConfigChanged);
+        if (ComponentToRender) {
+            this.shouldAlwaysReDerive = true;
+            return ComponentToRender;
+        }
+        const PanelRenderer = this.props.renderers[panel.key];
+        return _jsx(PanelRenderer, { config: panel.data, instances: this.props.instances, renderers: this.props.renderers, onConfigChanged: this.props.onConfigChanged });
+    }
+}
+export class PanelParentAsync extends PanelBaseAsync {
+    renderPanel(panel) {
+        const ComponentToRender = resolveContent(this.props.instances?.[panel.key], panel.data, this.props.onConfigChanged);
+        if (ComponentToRender)
+            return ComponentToRender;
+        const PanelRenderer = this.props.renderers[panel.key];
+        if (!PanelRenderer)
+            return `NO RENDERER DEFINED FOR KEY: ${panel.key}`;
+        return _jsx(PanelRenderer, { config: panel.data, renderers: this.props.renderers, instances: this.props.instances });
+    }
+}

package/ui/TS_OrientedWorkspace.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { PanelParentSync } from './Panels.js';
+import { Config_PanelParent, Props_OrientedWorkspace, Props_WorkspaceParentPanel, State_WorkspaceParentPanel } from './types.js';
+type State = {
+    factors: number[];
+    panelRefs: React.RefObject<HTMLDivElement>[];
+};
+export declare class TS_OrientedWorkspace extends PanelParentSync<{}, State, Props_OrientedWorkspace> {
+    private dragStart;
+    private firstPanelBounds;
+    private secondPanelBounds;
+    private ref?;
+    protected deriveStateFromProps(nextProps: Props_WorkspaceParentPanel<Config_PanelParent, Props_OrientedWorkspace>): State_WorkspaceParentPanel<{}, State>;
+    private calcFactors;
+    separatorOnDrag: (e: React.DragEvent<HTMLDivElement>, firstPanelIndex: number, secondPanelIndex: number) => void;
+    onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragEnd: (e: React.DragEvent<HTMLDivElement>, firstPanelIndex: number, secondPanelIndex: number) => void;
+    implementFactors: (factors: {
+        index: number;
+        factor: number;
+    }[]) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export declare class TS_HorizontalWorkspace extends TS_OrientedWorkspace {
+    static defaultProps: {
+        firstEdge: string;
+        secondEdge: string;
+        orientation: string;
+        dimensionProp: string;
+        dimensionClientProp: string;
+        mousePos: string;
+    };
+}
+export declare class TS_VerticalWorkspace extends TS_OrientedWorkspace {
+    static defaultProps: {
+        firstEdge: string;
+        secondEdge: string;
+        orientation: string;
+        dimensionProp: string;
+        dimensionClientProp: string;
+        mousePos: string;
+    };
+}
+export {};

package/ui/TS_OrientedWorkspace.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*	QWorkspaceVertical	- content display and resizing
+*	When given panel contents and a page, displays content in resizable panels.*/
+import * as React from 'react';
+import { Fragment } from 'react';
+import { PanelParentSync } from './Panels.js';
+export class TS_OrientedWorkspace extends PanelParentSync {
+    dragStart = 0;
+    firstPanelBounds;
+    secondPanelBounds;
+    ref;
+    deriveStateFromProps(nextProps) {
+        this.ref = undefined;
+        const panelRefs = this.state?.panelRefs || nextProps.config.panels.map(i => React.createRef());
+        return { ...super.deriveStateFromProps(nextProps), factors: [], panelRefs };
+    }
+    calcFactors(nextProps) {
+        let factors = nextProps.config.panels.map(p => p.factor);
+        const current = this.ref;
+        if (current) {
+            const wrapperWidth = current.getBoundingClientRect()[this.props.dimensionProp];
+            const separatorPixels = Array.from(current.children).reduce((toRet, element, index) => {
+                if (index % 2 === 0)
+                    return toRet;
+                const rect = element.getBoundingClientRect();
+                return toRet + rect[this.props.dimensionProp];
+            }, 0);
+            const containerFactor = (wrapperWidth - separatorPixels) / wrapperWidth;
+            factors = factors.map(f => f * containerFactor);
+        }
+        // const sumOfFactors = factors.reduce((a, b) => a + b, 0);
+        this.implementFactors(factors.map((factor, index) => ({ factor, index })));
+        return { factors };
+    }
+    //On drag logic for separator
+    separatorOnDrag = (e, firstPanelIndex, secondPanelIndex) => {
+        const firstPanel = this.props.config.panels[firstPanelIndex];
+        const secondPanel = this.props.config.panels[secondPanelIndex];
+        const statePanelsFactors = this.state.factors;
+        //Gather data
+        const delta = e[this.props.mousePos] - this.dragStart;
+        const parentSize = e.currentTarget.parentElement?.[this.props.dimensionClientProp];
+        const separatorSize = e.currentTarget?.[this.props.dimensionClientProp];
+        //Calculate new heights
+        const firstPanelDimension = this.firstPanelBounds[this.props.secondEdge] - this.firstPanelBounds[this.props.firstEdge];
+        const secondPanelDimension = this.secondPanelBounds[this.props.secondEdge] - this.secondPanelBounds[this.props.firstEdge];
+        let firstPanelSize = firstPanelDimension + delta;
+        let secondPanelSize = secondPanelDimension - delta;
+        const minFirstPanel = firstPanel.min || 100;
+        const minSecondPanel = secondPanel.min || 100;
+        if (firstPanelDimension + delta < minFirstPanel) {
+            firstPanelSize = minFirstPanel;
+            secondPanelSize = firstPanelDimension + secondPanelDimension - firstPanelSize;
+        }
+        if (secondPanelDimension - delta < minSecondPanel) {
+            secondPanelSize = minSecondPanel;
+            firstPanelSize = firstPanelDimension + secondPanelDimension - secondPanelSize;
+        }
+        const firstPanelFactor = firstPanelSize / parentSize;
+        const sum = statePanelsFactors[firstPanelIndex] + statePanelsFactors[secondPanelIndex];
+        statePanelsFactors[firstPanelIndex] = firstPanelFactor;
+        statePanelsFactors[secondPanelIndex] = sum - firstPanelFactor;
+        //Set config panels factors
+        const originalFactorSum = firstPanel.factor + secondPanel.factor;
+        firstPanel.factor = (firstPanelSize + separatorSize / 2) / parentSize;
+        secondPanel.factor = originalFactorSum - firstPanel.factor;
+        this.implementFactors([
+            { index: firstPanelIndex, factor: firstPanel.factor },
+            { index: secondPanelIndex, factor: secondPanel.factor }
+        ]);
+    };
+    //Gets called whenever dragging starts
+    onDragStart = (e) => {
+        //Set new empty image as the ghost image, position far offscreen
+        const img = new Image();
+        e.dataTransfer.setDragImage(img, -9999, -9999);
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.dropEffect = 'none';
+        this.dragStart = e[this.props.mousePos];
+        this.firstPanelBounds = e.currentTarget.previousElementSibling?.getBoundingClientRect();
+        this.secondPanelBounds = e.currentTarget.nextElementSibling?.getBoundingClientRect();
+    };
+    //Gets called whenever dragging stops
+    onDragEnd = (e, firstPanelIndex, secondPanelIndex) => {
+        //Init vars
+        this.dragStart = 0;
+        this.props.onConfigChanged();
+    };
+    //Script to implement the factor on panels in the dom
+    implementFactors = (factors) => {
+        factors.forEach(factor => {
+            const element = this.state.panelRefs[factor.index].current;
+            if (!element)
+                return;
+            element.style[this.props.dimensionProp] = ((factor.factor) * 100) + '%';
+        });
+    };
+    //Main Render
+    render() {
+        const panels = this.props.config.panels;
+        return (_jsx("div", { ref: _ref => {
+                if (this.ref || !_ref)
+                    return;
+                this.ref = _ref;
+                this.setState(this.calcFactors(this.props));
+            }, className: `ts-workspace__${this.props.orientation}`, children: panels.map((panel, i) => _jsxs(Fragment, { children: [_jsx("div", { className: 'ts-workspace__panel', ref: this.state.panelRefs[i], draggable: false, children: this.renderPanel(panel) }), i !== (panels.length - 1) &&
+                        _jsx("div", { className: `ts-workspace__separator`, draggable: true, tabIndex: 1, onDragStart: this.onDragStart, onDrag: (e) => this.separatorOnDrag(e, i, i + 1), onDragEnd: (e) => this.onDragEnd(e, i, i + 1) })] }, i)) }));
+    }
+}
+export class TS_HorizontalWorkspace extends TS_OrientedWorkspace {
+    static defaultProps = {
+        firstEdge: 'left',
+        secondEdge: 'right',
+        orientation: 'horizontal',
+        dimensionProp: 'width',
+        dimensionClientProp: 'clientWidth',
+        mousePos: 'pageX'
+    };
+}
+export class TS_VerticalWorkspace extends TS_OrientedWorkspace {
+    static defaultProps = {
+        firstEdge: 'top',
+        secondEdge: 'bottom',
+        orientation: 'vertical',
+        dimensionProp: 'height',
+        dimensionClientProp: 'clientHeight',
+        mousePos: 'pageY'
+    };
+}

package/ui/TS_Workspace.d.ts

@@ -0,0 +1,20 @@
+import { BaseAsyncState, ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import './TS_Workspace.scss';
+import { Props_BaseWorkspace } from './types.js';
+type Props = Props_BaseWorkspace & {
+    workspaceKey: string;
+    id?: string;
+    className?: string;
+};
+type State = {
+    key: string;
+};
+export declare class TS_Workspace extends ComponentSync<Props, State> {
+    private toRender;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    protected _deriveStateFromProps(nextProps: Props): (BaseAsyncState & State) | undefined;
+    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<BaseAsyncState & State>, nextContext: any): boolean;
+    private onConfigChanged;
+    render(): string | import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/ui/TS_Workspace.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*	QWorkspaceVertical	- content display and resizing
+*	When given panel contents and a page, displays content in resizable panels.*/
+import { _className, ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import './TS_Workspace.scss';
+import { ModuleFE_Workspace } from '../modules/ModuleFE_Workspace.js';
+export class TS_Workspace extends ComponentSync {
+    toRender = false;
+    deriveStateFromProps(nextProps, state) {
+        state.key = nextProps.workspaceKey;
+        return state;
+    }
+    _deriveStateFromProps(nextProps) {
+        const state = super._deriveStateFromProps(nextProps);
+        this.toRender = true;
+        return state;
+    }
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        if (this.toRender) {
+            this.toRender = false;
+            return true;
+        }
+        return super.shouldComponentUpdate(nextProps, nextState, nextContext);
+    }
+    onConfigChanged = async () => {
+        const config = ModuleFE_Workspace.getWorkspaceConfigByKey(this.state.key);
+        await ModuleFE_Workspace.setWorkspaceByKey(this.state.key, config);
+    };
+    render() {
+        const config = ModuleFE_Workspace.getWorkspaceConfigByKey(this.state.key);
+        const PanelRenderer = this.props.renderers[config.key];
+        if (!PanelRenderer)
+            return `COULD NOT GET THE WORKSPACE RENDERER FOR KEY ${config.key}`;
+        const className = _className('ts-workspace', this.props.className);
+        return _jsx("div", { className: className, id: this.props.id, children: _jsx(PanelRenderer, { config: config.data, renderers: this.props.renderers, instances: this.props.instances, onConfigChanged: this.onConfigChanged }) });
+    }
+}

package/ui/TS_Workspace.scss

@@ -0,0 +1,69 @@
+@mixin separator ($dir) {
+  background: #eeeeee;
+  position: relative;
+  -webkit-user-drag: element;
+
+  @if $dir == 'horizontal' {
+    width: 5px;
+    height: 100%;
+    cursor: col-resize;
+    border-right: 1px solid black;
+  }
+  @if $dir == 'vertical' {
+    width: 100%;
+    height: 5px;
+    cursor: row-resize;
+    border-bottom: 1px solid black;
+  }
+}
+
+@mixin tsWorkspace ($dir) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  @if $dir == 'horizontal' {
+    & > .ts-workspace__separator {
+      @include separator($dir);
+    }
+    & > .ts-workspace__panel {
+      width: 33%;
+      height: 100%;
+      display: flex;
+      position: relative;
+      overflow: hidden;
+      //Apply right padding to left and middle panels for scrollbar
+      &.left, &.middle {
+        padding-right: 5px;
+      }
+    }
+  }
+  @if $dir == 'vertical' {
+    flex-direction: column;
+
+    & > .ts-workspace__separator {
+      @include separator($dir);
+    }
+
+    & > .ts-workspace__panel {
+      width: 100%;
+      display: flex;
+      position: relative;
+      overflow: hidden;
+    }
+  }
+}
+
+.ts-workspace {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .ts-workspace__vertical {
+    @include tsWorkspace('vertical')
+  }
+  .ts-workspace__horizontal {
+    @include tsWorkspace('horizontal')
+  }
+}

package/ui/types.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { DB_Object, ResolvableContent, TypedMap } from '@nu-art/ts-common';
+import { BaseAsyncState } from '@nu-art/thunderstorm-frontend/index';
+export type Props_BaseWorkspace = {
+    renderers: TypedMap<React.ElementType>;
+    instances?: TypedMap<ResolvableContent<React.ReactNode, [any, Props_ConfigChanged['onConfigChanged']]>>;
+};
+export type Props_ConfigChanged = {
+    onConfigChanged: () => void;
+};
+export type Props_WorkspacePanel<Config, Props = {}> = Props & Props_ConfigChanged & Props_BaseWorkspace & {
+    config: Config;
+};
+export type State_WorkspacePanel<Config, State = {}> = BaseAsyncState & State & {
+    config: Config;
+};
+export type Config_PanelParent<ChildConfig = {}> = ChildConfig & {
+    panels: PanelConfig[];
+};
+export type State_WorkspaceParentPanel<Config, State = {}> = State_WorkspacePanel<Config_PanelParent<Config>, State>;
+export type Props_WorkspaceParentPanel<Config, Props = {}> = Props_WorkspacePanel<Config_PanelParent<Config>, Props>;
+export type Props_OrientedWorkspace = {
+    firstEdge: 'top' | 'left';
+    secondEdge: 'bottom' | 'right';
+    orientation: 'horizontal' | 'vertical';
+    dimensionProp: 'height' | 'width';
+    dimensionClientProp: 'clientHeight' | 'clientWidth';
+    mousePos: 'pageY' | 'pageX';
+};
+export type PanelsData = {
+    horizontalSpace: {
+        panels: PanelConfig<any, any>[];
+    };
+    verticalSpace: {
+        panels: PanelConfig<any, any>[];
+    };
+    topPanel: never;
+    leftPanel: never;
+    centerPanel: never;
+    rightPanel: never;
+    bottomPanel: never;
+};
+export type PanelConfig<PanelType extends keyof PanelsData = keyof PanelsData, PanelData extends PanelsData[PanelType] = PanelsData[PanelType]> = {
+    name: string;
+    visible: boolean;
+    factor: number;
+    min: number;
+    key: PanelType;
+} & {
+    data?: PanelData;
+};
+export type WorkspaceConfig = DB_Object & PanelConfig;

package/ui/types.js

@@ -0,0 +1 @@
+export {};