@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_Notifications/TS_Notifications.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { ModuleFE_Notifications } from '../../component-modules/ModuleFE_Notifications.js';
+import { LL_H_C, LL_V_L } from '../Layouts/index.js';
+import { formatTimestamp } from '@nu-art/ts-common';
+import './TS_Notifications.scss';
+import { TS_ComponentTransition } from '../TS_ComponentTransition/index.js';
+import { _className, stopPropagation } from '../../utils/tools.js';
+export class TS_Notifications extends ComponentSync {
+    // ######################### Static #########################
+    overlayClass = 'ts-notification-overlay';
+    containerClass = 'ts-notification-container';
+    transitionTimeout = 300;
+    timeout = undefined;
+    // ######################### Life Cycle #########################
+    __showNotifications(notifications) {
+        if (notifications.length === 0) { //If there are no notifications to show
+            //Transition notifications out
+            this.setState({ showNotifications: false }, () => {
+                //Get rid of notifications in state after they are out of view
+                this.timeout = setTimeout(() => {
+                    this.setState({ notifications });
+                }, this.transitionTimeout);
+            });
+        }
+        else { //There are notifications to show
+            clearTimeout(this.timeout);
+            this.setState({ notifications: [...notifications], showNotifications: true });
+            this.forceUpdate();
+        }
+    }
+    deriveStateFromProps(nextProps) {
+        return {
+            notifications: [],
+            showNotifications: false,
+        };
+    }
+    // ######################### Logic #########################
+    onClickToClose = (e, eventType) => {
+        ModuleFE_Notifications.hideAllNotifications();
+        const elements = document.elementsFromPoint(e.clientX, e.clientY);
+        const firstNonNotificationElement = elements.find(item => {
+            //not always false, svg className is an object
+            if (typeof item.className !== 'string')
+                return false;
+            return item.className && !item.className.includes(this.overlayClass) && !item.className.includes(this.containerClass);
+        });
+        const ev = new MouseEvent(eventType, {
+            bubbles: true,
+            cancelable: true,
+            view: firstNonNotificationElement.ownerDocument.defaultView,
+            detail: 1,
+            screenX: e.screenX,
+            screenY: e.screenY,
+            clientX: e.clientX,
+            clientY: e.clientY,
+            ctrlKey: e.ctrlKey,
+            altKey: e.altKey,
+            shiftKey: e.shiftKey,
+            metaKey: e.metaKey,
+            button: e.button,
+            buttons: e.buttons,
+            relatedTarget: firstNonNotificationElement,
+        });
+        //@ts-ignore
+        firstNonNotificationElement.dispatchEvent(ev);
+    };
+    deletePost = (e, notification) => {
+        stopPropagation(e);
+        ModuleFE_Notifications.create(notification._id).delete();
+        //Next line should be removed when the module dispatches new list after deletion
+        this.setState({ notifications: this.state.notifications.filter(item => item._id !== notification._id) });
+    };
+    onNotificationClick = (e, notification) => {
+        stopPropagation(e);
+    };
+    // ######################### Render #########################
+    renderNotification(notification) {
+        return _jsxs(LL_V_L, { className: `ts-notification ts-notification__${notification.status}`, onClick: e => this.onNotificationClick(e, notification), children: [_jsxs(LL_H_C, { className: 'ts-notification__header', children: [_jsx("div", { className: 'ts-notification__title', children: notification.title }), _jsx("span", { className: 'ts-notification__close', onClick: (e) => {
+                                if (notification.status === 'in-progress') {
+                                    ModuleFE_Notifications.hideAllNotifications();
+                                    return;
+                                }
+                                this.deletePost(e, notification);
+                            }, children: "\u2715" })] }), _jsx(LL_V_L, { className: 'ts-notification__body', children: _jsx("div", { className: 'ts-notification__message', children: notification.message }) }), _jsx(LL_H_C, { className: 'ts-notification__footer', children: _jsx("div", { className: 'ts-notification__timestamp', children: formatTimestamp('DD/M - hh:mm A', notification.__created) }) })] }, notification._id);
+    }
+    renderNotifications = () => {
+        if (!this.state.notifications.length)
+            return '';
+        return this.state.notifications.map(notification => this.renderNotification(notification));
+    };
+    render() {
+        const className = _className('ts-notification-container', this.state.notifications.length > 1 ? 'list' : undefined);
+        return _jsx(TS_ComponentTransition, { trigger: this.state.showNotifications, transitionTimeout: this.transitionTimeout, children: _jsx("div", { className: 'ts-notification-overlay', onClick: e => this.onClickToClose(e, 'click'), onContextMenu: e => this.onClickToClose(e, 'contextmenu'), children: _jsx(LL_V_L, { className: className, onClick: e => this.onClickToClose(e, 'click'), onContextMenu: e => this.onClickToClose(e, 'contextmenu'), children: this.renderNotifications() }) }) });
+    }
+}

package/components/TS_Notifications/TS_Notifications.scss

@@ -0,0 +1,120 @@
+.ts-notification-overlay {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  z-index: 500;
+  inset:0;
+
+  .ts-notification-container {
+    isolation: isolate;
+    z-index: 1;
+    width: 350px;
+    height: 100vh;
+    padding: 40px 10px 40px 30px;
+
+    position: fixed;
+    top: 0;
+    right: 0;
+
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+    gap: 20px;
+    overflow-y: auto;
+    transform: translateX(100%);
+    transition: transform linear;
+    transition-duration: inherit;
+
+    &.list {
+      //noinspection CssInvalidPropertyValue - STFU this works...
+      -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000000 5%, #000000 95%, transparent 98%);
+      background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 20%);
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .ts-notification {
+      background: #FFFFFF;
+      border: 2px solid #00709f;
+      border-radius: 4px;
+      width: 100%;
+      padding: 5px 10px;
+
+      .ts-notification__header {
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+
+        .ts-notification__title {
+          font: {
+            size: 14px;
+            weight: bold;
+          }
+        }
+
+        .ts-notification__close {
+          cursor: pointer;
+          background: #FF0000;
+          width: 19px;
+          height: 19px;
+          border-radius: 4px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: white;
+          font: {
+            size: 14px;
+            weight: bold;
+          }
+
+          &:hover {
+            background: #B70000;
+          }
+
+          &:active {
+            background: #AB0000;
+          }
+        }
+      }
+
+      .ts-notification__body {
+        padding: 8px;
+
+        .ts-notification__message {
+          font-size: 12px;
+          white-space: pre-wrap;
+        }
+      }
+
+      .ts-notification__footer {
+        .ts-notification__timestamp {
+          font-size: 12px;
+          color: #808080;
+        }
+      }
+
+      //Status
+
+      &.ts-notification__failed {
+        border: 2px solid #ab0000;
+      }
+
+      &.ts-notification__resolved {
+        border: 2px solid #009f40;
+      }
+    }
+  }
+
+  &.enter, &.enter-done {
+    .ts-notification-container {
+      transform: translateX(0);
+    }
+  }
+}
+
+
+

package/components/TS_Notifications/genericNotificationAction.d.ts

@@ -0,0 +1,8 @@
+import { UI_Notification } from '../../component-modules/ModuleFE_Notifications.js';
+type UI_NotificationTitle = string | {
+    inProgress: string;
+    failed?: string | ((e: any) => string);
+    success?: string;
+};
+export declare const genericNotificationAction: (action: (notification: UI_Notification) => Promise<any>, _title: UI_NotificationTitle, postDelay?: number) => Promise<void>;
+export {};

package/components/TS_Notifications/genericNotificationAction.js

@@ -0,0 +1,16 @@
+import { Second, StaticLogger } from '@nu-art/ts-common';
+import { ModuleFE_Notifications } from '../../component-modules/ModuleFE_Notifications.js';
+export const genericNotificationAction = async (action, _title, postDelay = 1.5) => {
+    const title = typeof _title === 'string' ? _title : _title.inProgress;
+    const successTitle = typeof _title === 'string' ? title + ' - Success' : _title.success || title + ' - Success';
+    const notification = ModuleFE_Notifications.create().content(title).postDelayed(postDelay * Second);
+    try {
+        await notification.execute(action);
+        notification.content(successTitle).show();
+    }
+    catch (e) {
+        const failTitle = typeof _title === 'string' ? title + ' - Failed' : typeof _title.failed === 'string' ? _title.failed : _title.failed?.(e) || title + ' - Failed';
+        notification.content(failTitle, e.message).show();
+        StaticLogger.logError(e);
+    }
+};

package/components/TS_Notifications/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TS_Notifications.js';
+export * from './genericNotificationAction.js';

package/components/TS_Notifications/index.js

@@ -0,0 +1,2 @@
+export * from './TS_Notifications.js';
+export * from './genericNotificationAction.js';

package/components/TS_Overlay/TS_Overlay.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import './TS_Overlay.scss';
+type Props = React.PropsWithChildren<{
+    flat?: boolean;
+    showOverlay: boolean;
+    onClickOverlay: (event: React.MouseEvent<HTMLDivElement>) => void;
+    className?: string;
+}>;
+export declare class TS_Overlay extends React.Component<Props> {
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/components/TS_Overlay/TS_Overlay.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 './TS_Overlay.scss';
+import { _className } from '../../utils/tools.js';
+export class TS_Overlay extends React.Component {
+    render() {
+        if (!this.props.showOverlay)
+            return this.props.children;
+        const overlayChild = _jsx("div", { className: "ts-overlay__child", onClick: this.props.onClickOverlay, onContextMenu: this.props.onClickOverlay, children: this.props.children });
+        return _jsxs(_Fragment, { children: [_jsx("div", { className: _className('ts-overlay', this.props.className), onClick: this.props.onClickOverlay, onContextMenu: this.props.onClickOverlay, onMouseMove: e => e.stopPropagation(), onMouseOver: e => e.stopPropagation(), onMouseEnter: e => e.stopPropagation(), onMouseLeave: e => e.stopPropagation(), onMouseOut: e => e.stopPropagation(), children: !this.props.flat && overlayChild }), this.props.flat && overlayChild] });
+    }
+}

package/components/TS_Overlay/TS_Overlay.scss

@@ -0,0 +1,41 @@
+/*!
+ * 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-overlay__child {
+  z-index: 2000;
+  position: relative;
+}
+
+.ts-overlay {
+  z-index: 1000;
+  cursor: default;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  //height: 100vh;
+  //width: 100vw;
+
+  &.transparent {
+    background: transparent;
+  }
+}

package/components/TS_Overlay/index.d.ts

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

package/components/TS_Overlay/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_Overlay.js';

package/components/TS_Printable/TS_Printable.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { HTMLProps } from 'react';
+import './TS_Printable.scss';
+type Props = HTMLProps<HTMLDivElement> & {
+    printable: (ref: HTMLDivElement) => Promise<void>;
+    printOnly?: boolean;
+};
+export declare class TS_Printable extends React.Component<Props> {
+    private ref;
+    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<{}>, nextContext: any): boolean;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_Printable/TS_Printable.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { _className } from '../../utils/tools.js';
+import './TS_Printable.scss';
+export class TS_Printable extends React.Component {
+    ref;
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        return true;
+    }
+    render() {
+        const { printable, printOnly, ...props } = this.props;
+        return (_jsx("div", { ...props, className: _className('ts-printable', props.className, printOnly ? 'print-only' : undefined), ref: (async (ref) => {
+                if (this.ref)
+                    return;
+                this.ref = ref;
+                await printable(this.ref);
+                this.forceUpdate();
+            }), children: this.props.children }));
+    }
+}

package/components/TS_Printable/TS_Printable.scss

@@ -0,0 +1,47 @@
+.ts-printable {
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+
+  * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  &.print-only {
+    display: none;
+  }
+
+  @media print {
+    &.print-only {
+      display: unset;
+    }
+
+    * {
+      overflow: unset;
+    }
+
+    .ts-print__hide {
+      visibility: hidden;
+    }
+
+    .ts-print__dont-break {
+      page-break-inside: avoid !important;
+    }
+
+    .ts-print__break-before {
+      page-break-before: always !important;
+    }
+
+    .ts-print__break-after {
+      page-break-after: always !important;
+    }
+
+    .ts-print__break-after-two-pages {
+      page-break-after: right !important;
+    }
+
+    .ts-print__gone {
+      display: none;
+    }
+  }
+}

package/components/TS_Printable/index.d.ts

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

package/components/TS_Printable/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_Printable.js';

package/components/TS_ProgressBar/TS_ProgressBar.d.ts

@@ -0,0 +1,22 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_ProgressBar.scss';
+export type TS_ProgressBar_Type = 'linear-bar' | 'radial';
+type Props = {
+    ratios: number[];
+    type: TS_ProgressBar_Type;
+    radius: number;
+    className?: string;
+    onClick?: VoidFunction;
+};
+type State = {
+    percentages: number[];
+};
+export declare class TS_ProgressBar extends ComponentSync<Props, State> {
+    static defaultProps: Partial<Props>;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private getRenderer;
+    private renderLinearBar;
+    private renderRadialBar;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_ProgressBar/TS_ProgressBar.js

@@ -0,0 +1,47 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { BadImplementationException } from '@nu-art/ts-common';
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_ProgressBar.scss';
+import { _className } from '../../utils/tools.js';
+export class TS_ProgressBar extends ComponentSync {
+    static defaultProps = {
+        type: 'linear-bar',
+        radius: 30,
+    };
+    deriveStateFromProps(nextProps, state) {
+        nextProps.ratios.forEach(ratio => {
+            if (ratio < 0 || ratio > 1)
+                throw new BadImplementationException('Ratio passed must be normalized to 0 < ratio < 1');
+        });
+        state.percentages = nextProps.ratios.map(ratio => Math.floor(ratio * 100));
+        return state;
+    }
+    getRenderer() {
+        switch (this.props.type) {
+            case 'linear-bar':
+                return this.renderLinearBar;
+            case 'radial':
+                return this.renderRadialBar;
+        }
+    }
+    renderLinearBar = () => {
+        return _jsx("div", { className: 'ts-progress-bar__linear-bar', children: this.state.percentages.map((percentage, i) => {
+                return _jsxs(React.Fragment, { children: [_jsxs("div", { className: 'ts-progress-bar__linear-bar__text', children: [percentage, "%"] }), _jsx("div", { className: 'ts-progress-bar__linear-bar__bar', style: { width: `${percentage}%` }, children: _jsxs("div", { className: 'ts-progress-bar__linear-bar__text', children: [percentage, "%"] }) })] }, i);
+            }) });
+    };
+    renderRadialBar = () => {
+        const radius = this.props.radius;
+        const strokeDashArray = 2 * Math.PI * radius;
+        const lastPercentage = this.state.percentages[this.state.percentages.length - 1];
+        return _jsxs("div", { className: 'ts-progress-bar__radial-bar', children: [_jsxs("div", { className: 'ts-progress-bar__radial-bar__text', children: [lastPercentage, "%"] }), _jsxs("svg", { className: "ts-progress-bar__radial-bar__bar", viewBox: '0 0 100 100', children: [_jsx("circle", { cx: "50", cy: "50", r: radius, className: 'ts-progress-bar__radial-bar__bar__background' }), this.state.percentages.map((percentage, i) => {
+                            const strokeDashOffset = strokeDashArray - (strokeDashArray * this.props.ratios[i]);
+                            return _jsx("circle", { cx: "50", cy: "50", r: radius, className: `ts-progress-bar__radial-bar__bar-child-${i}`, strokeDasharray: strokeDashArray, strokeDashoffset: strokeDashOffset }, i);
+                        })] })] });
+    };
+    render() {
+        const className = _className('ts-progress-bar', this.props.className);
+        const Renderer = this.getRenderer();
+        return _jsx("div", { className: className, onClick: this.props.onClick, children: _jsx(Renderer, {}) });
+    }
+}

package/components/TS_ProgressBar/TS_ProgressBar.scss

@@ -0,0 +1,79 @@
+$barWidth: 400px;
+$color: rgb(29, 176, 255);
+
+
+.ts-progress-bar {
+
+  .ts-progress-bar__linear-bar {
+    width: $barWidth;
+    height: 24px;
+    border: 2px solid $color;
+    border-radius: 12px;
+    position: relative;
+    background: white;
+    overflow: hidden;
+
+    .ts-progress-bar__linear-bar__text {
+      width: $barWidth;
+      height: 100%;
+      color: $color;
+      font: {
+        size: 16px;
+        weight: bold;
+      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      inset: 0;
+    }
+
+    .ts-progress-bar__linear-bar__bar {
+      height: 100%;
+      background: $color;
+      transition: width 200ms ease-out;
+      overflow: hidden;
+      position: absolute;
+      inset: 0;
+
+      .ts-progress-bar__linear-bar__text {
+        color: white;
+      }
+    }
+  }
+
+  .ts-progress-bar__radial-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 200px;
+    height: 200px;
+    position: relative;
+
+    .ts-progress-bar__radial-bar__text {
+      font: {
+        size: 24px;
+        weight: bold;
+      }
+      color: $color;
+    }
+
+    .ts-progress-bar__radial-bar__bar {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+
+      circle {
+        fill: none;
+        stroke-width: 6;
+        stroke: $color;
+        transition: stroke-dashoffset 200ms ease-out;
+      }
+
+      .ts-progress-bar__radial-bar__bar__background {
+        stroke: transparent;
+      }
+    }
+  }
+}

package/components/TS_ProgressBar/index.d.ts

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

package/components/TS_ProgressBar/index.js

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

package/components/TS_PropRenderer/TS_PropRenderer.d.ts

@@ -0,0 +1,18 @@
+import './TS_PropRenderer.scss';
+import * as React from 'react';
+import { LinearLayoutProps } from '../Layouts/index.js';
+export type PropRenderer_BaseProps = React.PropsWithChildren<{
+    label: React.ReactNode | (() => React.ReactNode);
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+}>;
+export type Props_PropRenderer = Omit<LinearLayoutProps, 'label'> & PropRenderer_BaseProps;
+export type Props_PropRendererHorizontal = Props_PropRenderer & Partial<{
+    verticalAlignment: 'top' | 'center' | 'bottom';
+}>;
+export declare const TS_PropRenderer: {
+    Vertical: (props: Props_PropRenderer) => import("react/jsx-runtime").JSX.Element;
+    Horizontal: (props: Props_PropRendererHorizontal) => import("react/jsx-runtime").JSX.Element;
+    Flat: (props: PropRenderer_BaseProps) => import("react/jsx-runtime").JSX.Element;
+};