@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_Input/index.d.ts

@@ -0,0 +1,4 @@
+export * from './TS_BaseInput.js';
+export * from './TS_TextArea.js';
+export * from './TS_Input.js';
+export * from './ATS_TextArea.js';

package/components/TS_Input/index.js

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+export * from './TS_BaseInput.js';
+export * from './TS_TextArea.js';
+export * from './TS_Input.js';
+//Export ATS
+export * from './ATS_TextArea.js';

package/components/TS_JSONViewer/TS_JSONViewer.d.ts

@@ -0,0 +1,18 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_JSONViewer.scss';
+type Props = {
+    item: Object;
+    filterGeneratedFields?: boolean;
+};
+type State = {
+    item: Object;
+};
+export declare class TS_JSONViewer extends ComponentSync<Props, State> {
+    private multiRenderer;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private createTree;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderTreeItem;
+    private renderTreeExpandIcon;
+}
+export {};

package/components/TS_JSONViewer/TS_JSONViewer.js

@@ -0,0 +1,64 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _keys, sortArray } from '@nu-art/ts-common';
+import { TS_Tree } from '../TS_Tree/index.js';
+import { AdapterBuilder } from '../adapter/Adapter.js';
+import { _className } from '../../utils/tools.js';
+import { LL_H_C } from '../Layouts/index.js';
+import './TS_JSONViewer.scss';
+import { TS_Icons } from '@nu-art/ts-styles';
+export class TS_JSONViewer extends ComponentSync {
+    multiRenderer = {
+        root: () => _jsx(_Fragment, {}),
+        item: (props) => this.renderTreeItem(props)
+    };
+    deriveStateFromProps(nextProps, state) {
+        state.item = nextProps.item;
+        if (nextProps.filterGeneratedFields)
+            _keys(state.item).forEach(key => {
+                if (key.startsWith('_'))
+                    delete state.item[key];
+            });
+        return state;
+    }
+    createTree = (parentNode) => {
+        //If parentNode wasn't passed, start the parent node as the root
+        parentNode ??= { type: 'root', item: this.state.item, };
+        //Set the children for this parentNode
+        const item = parentNode.type === 'root' ? parentNode.item : parentNode.item.value;
+        const keys = _keys(item);
+        if (!Array.isArray(item))
+            sortArray(keys);
+        parentNode._children = keys.map(childKey => {
+            const child = item[childKey];
+            const node = { type: 'item', item: { key: childKey, value: child } };
+            //recursively fill children for object children nodes
+            return typeof child === 'object' ? this.createTree(node) : node;
+        });
+        return parentNode;
+    };
+    render() {
+        const tree = this.createTree();
+        const adapter = AdapterBuilder()
+            .tree()
+            .multiRender(this.multiRenderer)
+            .setExpandCollapseRenderer(this.renderTreeExpandIcon)
+            .hideRoot()
+            .setData(tree)
+            .build();
+        return _jsx("div", { className: 'ts-json-viewer', children: _jsx(TS_Tree, { adapter: adapter }) });
+    }
+    renderTreeItem = (props) => {
+        const { key, value } = props.item;
+        const className = _className('ts-json-viewer__item', typeof value);
+        const stringedValue = JSON.stringify(value);
+        return _jsxs(LL_H_C, { className: className, children: [_jsxs("div", { className: 'ts-json-viewer__item__key', children: [key, ":"] }), (typeof value !== 'object' || !props.node.expanded) &&
+                    _jsx("div", { className: 'ts-json-viewer__item__value', children: stringedValue })] });
+    };
+    renderTreeExpandIcon = (props) => {
+        if (typeof props.item.item.value !== 'object')
+            return _jsx("div", { className: 'ts-json-viewer__icon-placeholder' });
+        const className = _className('ts-json-viewer__icon', props.node.expanded && 'expanded');
+        return _jsx(TS_Icons.treeCollapse.component, { className: className });
+    };
+}

package/components/TS_JSONViewer/TS_JSONViewer.scss

@@ -0,0 +1,87 @@
+@use '@nu-art/ts-styles' as styles;
+
+.ts-json-viewer {
+  width: 100%;
+  height: 100%;
+  background: white;
+  border: 2px solid black;
+  border-radius: 10px;
+  overflow: hidden;
+  padding: 10px 0;
+
+  .ts-tree__node {
+    background: transparent !important;
+    cursor: default;
+    padding: 0;
+
+    .clickable {
+      padding: 5px 0 5px 5px;
+      cursor: default;
+      display: flex;
+      gap: 4px;
+    }
+  }
+
+  .ts-json-viewer__item {
+    width: 0;
+    flex-grow: 1;
+    gap: 8px;
+
+    .ts-json-viewer__item__key {
+      flex-shrink: 0;
+      font: {
+        size: 14px;
+        weight: bold;
+      }
+    }
+
+    .ts-json-viewer__item__value {
+      width: 0;
+      flex-grow: 1;
+      font: {
+        size: 14px;
+      }
+      @include styles.text-ellipsis;
+    }
+
+    &.string {
+      .ts-json-viewer__item__value {
+        color: #e67e22;
+      }
+    }
+
+    &.number {
+      .ts-json-viewer__item__value {
+        color: #2ecc71;
+      }
+    }
+
+    &.boolean {
+      .ts-json-viewer__item__value {
+        color: #bf95d0;
+      }
+    }
+
+    &.object {
+      cursor: pointer;
+
+      .ts-json-viewer__item__value {
+        color: #f1c40f;
+      }
+    }
+  }
+
+  .ts-json-viewer__icon {
+    width: 14px;
+    height: 14px;
+
+    &.expanded {
+      rotate: 90deg;
+    }
+  }
+
+  .ts-json-viewer__icon-placeholder {
+    width: 14px;
+    height: 14px;
+  }
+}

package/components/TS_JSONViewer/types.d.ts

@@ -0,0 +1,10 @@
+import { Primitive } from '@nu-art/ts-common';
+import { TreeType } from '../adapter/Adapter.js';
+export type TS_JSONViewer_Tree_Item = {
+    key: string;
+    value: Object | Primitive;
+};
+export type TS_JSONViewer_Tree = TreeType<{
+    root: any;
+    item: TS_JSONViewer_Tree_Item;
+}>;

package/components/TS_JSONViewer/types.js

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

package/components/TS_Link/TS_Link.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { UrlTarget } from '../../modules/ModuleFE_Thunderstorm.js';
+import './TS_Link.scss';
+import { TypedMap } from '@nu-art/ts-common';
+type Props = React.PropsWithChildren<{
+    url: string;
+    params?: TypedMap<(() => string) | string | undefined>;
+    target?: UrlTarget;
+    className?: string;
+}>;
+export declare class TS_Link extends React.Component<Props, any> {
+    private handleOnClick;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_Link/TS_Link.js

@@ -0,0 +1,36 @@
+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.
+ */
+import * as React from 'react';
+import { ModuleFE_Thunderstorm } from '../../modules/ModuleFE_Thunderstorm.js';
+import './TS_Link.scss';
+import { _className, stopPropagation } from '../../utils/tools.js';
+export class TS_Link extends React.Component {
+    handleOnClick = (e) => {
+        stopPropagation(e);
+        const params = this.props.params || {};
+        ModuleFE_Thunderstorm.openUrl({ url: this.props.url, params }, this.props.target);
+    };
+    render() {
+        const className = _className('ts-link', this.props.className);
+        return _jsx("div", { className: className, onClick: this.handleOnClick, children: this.props.children });
+    }
+}

package/components/TS_Link/TS_Link.scss

@@ -0,0 +1,32 @@
+/*!
+ * 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.
+ */
+
+.ts-link {
+  font: {
+    size: 14px;
+  }
+  cursor: pointer;
+  color: #5495ff;
+
+  &:hover {
+
+  }
+}

package/components/TS_Link/index.d.ts

@@ -0,0 +1 @@
+export * from './TS_Link.js';

package/components/TS_Link/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+export * from './TS_Link.js';

package/components/TS_ListOrganizer/TS_ListOrganizer.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import './TS_ListOrganizer.scss';
+import { ComponentSync } from '../../core/ComponentSync.js';
+type State<T> = {
+    items: T[];
+};
+export type TS_ListOrganizer_RendererProps<T> = {
+    item: T;
+    index: number;
+    dragged: boolean;
+    onDragStart: (e: React.DragEvent<HTMLElement>, itemIndex: number) => void;
+    onDragOver: (e: React.DragEvent<HTMLElement>, itemIndex: number) => void;
+    onDragLeave: (e: React.DragEvent<HTMLElement>, itemIndex: number) => void;
+    onDragEnd: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+};
+type Props<T> = {
+    items: T[];
+    renderer: (props: TS_ListOrganizer_RendererProps<T>) => ReactNode;
+    onOrderChanged: (items: T[]) => void | Promise<void>;
+};
+export declare class TS_ListOrganizer<T> extends ComponentSync<Props<T>, State<T>> {
+    private draggedItemIndex;
+    private lockRowIndex;
+    private activeDrag;
+    protected deriveStateFromProps(nextProps: Props<T>, state: State<T>): State<T>;
+    onDragStart: (e: React.DragEvent<HTMLElement>, rowIndex: number) => void;
+    onDragOver: (e: React.MouseEvent<HTMLElement, MouseEvent>, rowIndex: number) => void;
+    onDragEnd: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onDragLeave: (e: React.MouseEvent<HTMLElement, MouseEvent>, rowIndex: number) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_ListOrganizer/TS_ListOrganizer.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './TS_ListOrganizer.scss';
+import { LL_V_L } from '../Layouts/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { exists, swapInArrayByIndex } from '@nu-art/ts-common';
+export class TS_ListOrganizer extends ComponentSync {
+    draggedItemIndex = undefined;
+    lockRowIndex = undefined;
+    activeDrag = undefined;
+    //######################### Lifecycle #########################
+    deriveStateFromProps(nextProps, state) {
+        state.items = [...nextProps.items];
+        return state;
+    }
+    //######################### Logic #########################
+    onDragStart = (e, rowIndex) => {
+        e.stopPropagation();
+        this.draggedItemIndex = rowIndex;
+        this.activeDrag = true;
+        this.forceUpdate();
+    };
+    onDragOver = (e, rowIndex) => {
+        e.stopPropagation();
+        if (rowIndex === this.lockRowIndex)
+            return;
+        if (!this.activeDrag)
+            return;
+        if (!exists(this.draggedItemIndex) || this.draggedItemIndex === rowIndex)
+            return;
+        swapInArrayByIndex(this.state.items, rowIndex, this.draggedItemIndex);
+        this.lockRowIndex = this.draggedItemIndex;
+        this.draggedItemIndex = rowIndex;
+        this.forceUpdate();
+    };
+    onDragEnd = (e) => {
+        e.stopPropagation();
+        this.draggedItemIndex = undefined;
+        this.lockRowIndex = undefined;
+        this.activeDrag = undefined;
+        this.forceUpdate(() => this.props.onOrderChanged(this.state.items));
+    };
+    onDragLeave = (e, rowIndex) => {
+        e.stopPropagation();
+        if (!this.activeDrag)
+            return;
+        if (rowIndex === this.lockRowIndex)
+            this.lockRowIndex = undefined;
+    };
+    //######################### Render #########################
+    render() {
+        return _jsx(LL_V_L, { className: 'ts-list-organizer__list', children: this.state.items.map((item, itemIndex) => {
+                const dragged = itemIndex === this.draggedItemIndex;
+                return this.props.renderer({
+                    item,
+                    dragged,
+                    index: itemIndex,
+                    onDragEnd: this.onDragEnd,
+                    onDragOver: this.onDragOver,
+                    onDragLeave: this.onDragLeave,
+                    onDragStart: this.onDragStart,
+                });
+            }) });
+    }
+}

package/components/TS_ListOrganizer/TS_ListOrganizer.scss

@@ -0,0 +1,37 @@
+/*!
+ * 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.
+ */
+
+.ts-list-organizer__list {
+  .ts-list-organizer__item {
+    -webkit-user-drag: element;
+
+    &.ts-list-organizer__dragged {
+      
+    }
+  }
+
+  .ts-list-organizer__placeholder {
+    width: 100%;
+    height: 40px;
+    border: 2px solid blue;
+    background: transparent;
+  }
+}

package/components/TS_ListOrganizer/index.d.ts

@@ -0,0 +1 @@
+export * from './TS_ListOrganizer.js';

package/components/TS_ListOrganizer/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+export * from './TS_ListOrganizer.js';

package/components/TS_Loader/TS_Loader.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import './TS_Loader.scss';
+import { HTMLProps } from 'react';
+export declare class TS_Loader extends React.Component<HTMLProps<HTMLDivElement>> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/components/TS_Loader/TS_Loader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import './TS_Loader.scss';
+import { _className } from '../../utils/tools.js';
+export class TS_Loader extends React.Component {
+    render() {
+        return _jsx("div", { ...this.props, className: _className('ts-loader', this.props.className), children: _jsx("div", { className: "ts-loader__content" }) });
+    }
+}

package/components/TS_Loader/TS_Loader.scss

@@ -0,0 +1,71 @@
+.ts-loader {
+  width: 50px;
+  height: 50px;
+
+  .ts-loader__content {
+    width: 100%;
+    height: 100%;
+
+    margin: 0 auto;
+    position: relative;
+    -webkit-animation: ts-spinner__rotation 1s infinite linear;
+    -moz-animation: ts-spinner__rotation 1s infinite linear;
+    -o-animation: ts-spinner__rotation 1s infinite linear;
+    animation: ts-spinner__rotation 1s infinite linear;
+    border: 6px solid rgba(0, 0, 0, 8%);
+    border-radius: 100%;
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      left: -6px;
+      top: -6px;
+      height: 100%;
+      width: 100%;
+      border-top: 6px solid #004A72;
+      border-left: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-radius: 100%;
+    }
+  }
+}
+
+//Animations
+//***Basic Spinner***
+@-webkit-keyframes ts-spinner__rotation {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+  }
+}
+
+@-moz-keyframes ts-spinner__rotation {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(359deg);
+  }
+}
+
+@-o-keyframes ts-spinner__rotation {
+  from {
+    -o-transform: rotate(0deg);
+  }
+  to {
+    -o-transform: rotate(359deg);
+  }
+}
+
+@keyframes ts-spinner__rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}

package/components/TS_Loader/index.d.ts

@@ -0,0 +1 @@
+export * from './TS_Loader.js';

package/components/TS_Loader/index.js

@@ -0,0 +1 @@
+export * from './TS_Loader.js';

package/components/TS_MemoryMonitor/TS_MemoryMonitor.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import './TS_MemoryMonitor.scss';
+type Props = {
+    labelResolver: (buildMode: string, version: string) => string;
+};
+export declare class TS_MemoryMonitor extends React.Component<Props> {
+    static defaultProps: Props;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_MemoryMonitor/TS_MemoryMonitor.js

@@ -0,0 +1,48 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/*
+ * 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 * as React from 'react';
+import './TS_MemoryMonitor.scss';
+class MemoryMonitor extends React.Component {
+    id;
+    componentDidMount() {
+        this.id = setInterval(() => {
+            this.forceUpdate();
+        }, 1000);
+    }
+    componentWillUnmount() {
+        clearInterval(this.id);
+    }
+    render() {
+        // @ts-ignore
+        const mem = window.performance.memory;
+        if (!mem)
+            return '';
+        return _jsxs("div", { children: [Math.round(mem.usedJSHeapSize / 1024 / 1024), " / ", Math.round(mem.totalJSHeapSize / 1024 / 1024), "mb"] });
+    }
+}
+export class TS_MemoryMonitor extends React.Component {
+    static defaultProps = {
+        labelResolver: (buildMode, version) => {
+            return `${process.env.appEnv}-${process.env.appVersion}`;
+        }
+    };
+    render() {
+        return _jsxs("div", { className: "ts-memory-monitor", children: [_jsx("div", { className: "ts-memory-monitor__version", children: this.props.labelResolver(process.env.appEnv, process.env.appVersion) }), _jsx(MemoryMonitor, {})] });
+    }
+}