@nu-art/thunderstorm-frontend 0.400.5

package/utils/perform-action/performAction.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+export type FeedbackOptions = {
+    type: 'toast';
+    successContent?: React.ReactNode;
+    failContent?: React.ReactNode;
+    duration?: number;
+} | {
+    type: 'notification';
+    notificationLabels?: string | {
+        inProgress: string;
+        failed?: string | ((e: any) => string);
+        success?: string;
+    };
+};
+/**
+ * #performAction
+ * use this function to execute any async action that requires a feedback.
+ * @param action the action to execute.
+ * @param feedbackOptions feedback options to determine which kind of feedback to present
+ * @param additionalData !Optional! any additional data the notification/toast might need
+ * @param throwBackError !Optional! if true, will throw error back outside the action
+ */
+export declare function performAction(action: () => Promise<any>, feedbackOptions: FeedbackOptions, additionalData?: any, throwBackError?: boolean, skipToast?: boolean): Promise<void>;
+export declare const asyncHandler: {
+    notification: (title: string | {
+        inProgress: string;
+        failed?: string | ((e: any) => string);
+        success?: string;
+    }, action: () => Promise<any>) => Promise<void>;
+    toast: {
+        simple: (action: () => Promise<any>, successMessage?: React.ReactNode, errorMessage?: React.ReactNode) => Promise<void>;
+        onSuccess: (action: () => Promise<any>, successMessage?: React.ReactNode) => Promise<void>;
+    };
+};

package/utils/perform-action/performAction.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { genericNotificationAction } from '../../components/TS_Notifications/index.js';
+import { ToastBuilder } from '../../component-modules/ModuleFE_Toaster.js';
+import { generateErrorToastContent } from './genereteToasts.js';
+const Default_Toast_Duration = 4000;
+const Successful_Action_Default_Label = 'Action Preformed Successfully';
+const Failed_Action_Default_Label = 'Action Failed';
+/**
+ * #performAction
+ * use this function to execute any async action that requires a feedback.
+ * @param action the action to execute.
+ * @param feedbackOptions feedback options to determine which kind of feedback to present
+ * @param additionalData !Optional! any additional data the notification/toast might need
+ * @param throwBackError !Optional! if true, will throw error back outside the action
+ */
+export async function performAction(action, feedbackOptions, additionalData, throwBackError = false, skipToast = false) {
+    switch (feedbackOptions.type) {
+        case 'notification':
+            if (feedbackOptions.notificationLabels) {
+                await genericNotificationAction(action, feedbackOptions.notificationLabels);
+            }
+            else {
+                console.error('cannot use notification as feedback without labels');
+            }
+            break;
+        case 'toast':
+            try {
+                const content = feedbackOptions.successContent ??
+                    _jsx("div", { children: Successful_Action_Default_Label });
+                await action();
+                new ToastBuilder()
+                    .setContent(content)
+                    .setDuration(feedbackOptions.duration ?? Default_Toast_Duration)
+                    .show();
+            }
+            catch (err) {
+                if (!skipToast) {
+                    const content = feedbackOptions.failContent ??
+                        _jsx("div", { children: Failed_Action_Default_Label });
+                    new ToastBuilder()
+                        .setContent(generateErrorToastContent(err, content, additionalData))
+                        .setDuration(feedbackOptions.duration ? feedbackOptions.duration : Default_Toast_Duration).show();
+                }
+                if (throwBackError)
+                    throw err;
+            }
+    }
+}
+export const asyncHandler = {
+    notification: async (title, action) => {
+        return genericNotificationAction(action, title);
+    },
+    toast: {
+        simple: async (action, successMessage = Successful_Action_Default_Label, errorMessage = Failed_Action_Default_Label) => {
+            try {
+                await action();
+                new ToastBuilder()
+                    .setContent(successMessage)
+                    .setDuration(Default_Toast_Duration)
+                    .show();
+            }
+            catch (err) {
+                new ToastBuilder()
+                    .setContent(errorMessage)
+                    .setDuration(Default_Toast_Duration).show();
+                throw err;
+            }
+        },
+        onSuccess: async (action, successMessage = Successful_Action_Default_Label) => {
+            await action();
+            new ToastBuilder()
+                .setContent(successMessage)
+                .setDuration(Default_Toast_Duration)
+                .show();
+        }
+    }
+};

package/utils/perform-action/resolve-dependency-toast/ResolveDependencyToast.d.ts

@@ -0,0 +1,8 @@
+import { UniqueId } from '@nu-art/ts-common';
+import './ResolveDependencyToast.scss';
+type Props = {
+    deletedEntity: string;
+    dependencyConflicts: UniqueId[];
+};
+export default function ResolveDependencyToast(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/utils/perform-action/resolve-dependency-toast/ResolveDependencyToast.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dispatch_onDeleteConflicts } from '../notification-dispatchers.js';
+import './ResolveDependencyToast.scss';
+import { ModuleFE_Toaster } from '../../../component-modules/ModuleFE_Toaster.js';
+export default function ResolveDependencyToast(props) {
+    const renderResolveDependenciesPanel = () => {
+        dispatch_onDeleteConflicts.dispatchUI(props.deletedEntity, props.dependencyConflicts);
+        ModuleFE_Toaster.hideToast();
+    };
+    return (_jsxs("div", { className: 'item-dependency-toast', children: [_jsx("div", { children: "Entity has dependencies." }), _jsxs("div", { onClick: () => renderResolveDependenciesPanel(), children: [_jsx("span", { className: 'click-here-label', children: "Click here" }), " to resolve"] })] }));
+}

package/utils/perform-action/resolve-dependency-toast/ResolveDependencyToast.scss

@@ -0,0 +1,12 @@
+
+.item-dependency-toast {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  .click-here-label {
+    text-decoration: underline;
+    color: #00BCF1;
+    cursor: pointer;
+  }
+}

package/utils/tools.d.ts

@@ -0,0 +1,31 @@
+import { Browser } from '@nu-art/thunderstorm-shared/consts';
+import * as React from 'react';
+import { DependencyList, Dispatch, EffectCallback, SetStateAction } from 'react';
+export declare function browserType(): Browser;
+export declare function base64ToBlob(imageAsBase64: string): Promise<Blob>;
+export declare function stringToArrayBuffer(stringToConvert: string): ArrayBuffer;
+export declare function stringToUint8Array(stringToConvert: string): Uint8Array<ArrayBuffer>;
+export declare function convertBase64ToFile(fileName: string, base64: string, _mimeType?: string): File;
+export declare function readFileAs_ArrayBuffer(file: File): Promise<ArrayBuffer>;
+export declare const readFileContent: typeof readFileAs_ArrayBuffer;
+export declare function readFileAs_BinaryString(file: File): Promise<string>;
+export declare function readFileAs_DataURL(file: File): Promise<string>;
+export declare function readFileAs_Text(file: File): Promise<string>;
+export declare function _className(...classes: (string | boolean | undefined)[]): string;
+export declare function HOOK(fc: React.FC, props?: any): React.ReactNode;
+export declare function HOOK_useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
+export declare function HOOK_useEffect<S>(effect: EffectCallback, deps?: DependencyList): void;
+export declare const HOOK_useEffectAsync: (action: () => Promise<void>, deps?: DependencyList, destructor?: () => void) => void;
+/**
+ * Prevents default behaviour and stops propagation
+ * @param e MouseEvent | React.MouseEvent | KeyboardEvent | React.KeyboardEvent
+ */
+export declare const stopPropagation: (e: MouseEvent | React.MouseEvent | KeyboardEvent | React.KeyboardEvent) => void;
+type MouseClickActions = {
+    left?: () => void;
+    middle?: () => void;
+    right?: () => void;
+};
+export declare const mouseEventHandler: (e: React.MouseEvent | MouseEvent, actions: MouseClickActions) => void | undefined;
+export declare const stringReplacer: (_content: string, _toReplace: string, replacer: (match: string, i: number) => JSX.Element) => React.ReactNode[];
+export {};

package/utils/tools.js

@@ -0,0 +1,138 @@
+/*
+ * 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 { BadImplementationException, filterInstances, ImplementationMissingException } from '@nu-art/ts-common';
+import * as React from 'react';
+export function browserType() {
+    if (navigator?.vendor.includes('Google')) {
+        return 'chrome';
+    }
+    throw new BadImplementationException('No matching browser detected');
+}
+export async function base64ToBlob(imageAsBase64) {
+    return (await fetch(imageAsBase64)).blob();
+}
+export function stringToArrayBuffer(stringToConvert) {
+    return stringToUint8Array(stringToConvert).buffer;
+}
+export function stringToUint8Array(stringToConvert) {
+    let n = stringToConvert.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+        u8arr[n] = stringToConvert.charCodeAt(n);
+    }
+    return u8arr;
+}
+//data:image/jpeg;base64,<!-- Base64 data -->
+export function convertBase64ToFile(fileName, base64, _mimeType) {
+    const arr = base64.split(',');
+    const match = arr[0].match(/:(.*?);/);
+    const mimeType = (match && match[1]) || (_mimeType && _mimeType);
+    if (!mimeType)
+        throw new ImplementationMissingException('Could not extract mime type from data...');
+    const stringAsBase64 = atob(arr[1]);
+    const u8arr = stringToUint8Array(stringAsBase64);
+    return new File([u8arr], fileName, { type: mimeType });
+}
+function readFileContentImpl(file, format) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            resolve(reader.result);
+        };
+        reader.onerror = reject;
+        switch (format) {
+            case 'array-buffer':
+                reader.readAsArrayBuffer(file);
+                break;
+            case 'binary':
+                reader.readAsBinaryString(file);
+                break;
+            case 'data-url':
+                reader.readAsDataURL(file);
+                break;
+            case 'string':
+                reader.readAsText(file);
+                break;
+        }
+    });
+}
+export async function readFileAs_ArrayBuffer(file) {
+    return readFileContentImpl(file, 'array-buffer');
+}
+export const readFileContent = readFileAs_ArrayBuffer;
+export async function readFileAs_BinaryString(file) {
+    return readFileContentImpl(file, 'binary');
+}
+export async function readFileAs_DataURL(file) {
+    return readFileContentImpl(file, 'data-url');
+}
+export async function readFileAs_Text(file) {
+    return readFileContentImpl(file, 'string');
+}
+export function _className(...classes) {
+    return filterInstances(classes.filter(c => !!c)).join(' ');
+}
+export function HOOK(fc, props) {
+    return fc(props);
+}
+export function HOOK_useState(initialState) {
+    return React.useState(initialState);
+}
+export function HOOK_useEffect(effect, deps) {
+    return React.useEffect(effect, deps);
+}
+export const HOOK_useEffectAsync = (action, deps, destructor) => {
+    React.useEffect(() => {
+        (action)();
+        return destructor;
+    }, deps);
+};
+/**
+ * Prevents default behaviour and stops propagation
+ * @param e MouseEvent | React.MouseEvent | KeyboardEvent | React.KeyboardEvent
+ */
+export const stopPropagation = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+};
+export const mouseEventHandler = (e, actions) => {
+    const key = e.button === 0 ? 'left' : (e.button === 1 ? 'middle' : 'right');
+    return actions[key]?.();
+};
+export const stringReplacer = (_content, _toReplace, replacer) => {
+    const toRet = [];
+    let i = 0;
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        const content = _content.toLowerCase();
+        const toReplace = _toReplace.toLowerCase();
+        const index = content.indexOf(toReplace);
+        if (index === -1) {
+            toRet.push(_content);
+            return toRet;
+        }
+        toRet.push(_content.slice(0, index));
+        _content = _content.slice(index);
+        toRet.push(replacer(_content.slice(0, toReplace.length), i));
+        _content = _content.slice(toReplace.length);
+        i++;
+    }
+};

package/utils/types.d.ts

@@ -0,0 +1,3 @@
+export type InferProps<Component extends React.Component<any>> = Component extends React.Component<infer Props> ? Props : never;
+export type InferState<Component extends React.Component<any, any>> = Component extends React.Component<any, infer State> ? State : never;
+export type DefaultProps<Component extends React.Component<any>> = Partial<InferProps<Component>>;

package/utils/types.js

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

package/widgets/FieldEditor.d.ts

@@ -0,0 +1,29 @@
+import { HTMLProps, ReactNode } from 'react';
+import { StorageKey } from '../modules/ModuleFE_LocalStorage.js';
+import { ComponentSync } from '../core/ComponentSync.js';
+import { TS_InputProps } from '../components/TS_Input/TS_Input.js';
+import { InputType } from '../components/TS_Input/TS_BaseInput.js';
+export type FieldEditorInputProps<K extends string | number> = Omit<TS_InputProps<K>, 'onChange' | 'value' | 'onAccept' | 'type' | 'id'>;
+export type EditorType = 'input' | 'textarea';
+export type FieldEditorProps = {
+    isEditing: boolean;
+    value?: string;
+    editorType?: EditorType;
+    type: InputType;
+    storageKey: StorageKey<string>;
+    inputProps?: FieldEditorInputProps<any>;
+    labelProps?: HTMLProps<HTMLDivElement> | ((value: string) => ReactNode);
+    onAccept?: () => void;
+    onCancel?: () => void;
+    onBlur?: () => void;
+    id: string;
+};
+export declare class FieldEditor extends ComponentSync<FieldEditorProps> {
+    constructor(props: FieldEditorProps);
+    protected deriveStateFromProps(nextProps: FieldEditorProps): any;
+    onChange: (value: string) => void;
+    private renderInput;
+    renderArea: (value: string) => import("react/jsx-runtime").JSX.Element;
+    private renderLabel;
+    render(): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}

package/widgets/FieldEditor.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from '../core/ComponentSync.js';
+import { TS_Input } from '../components/TS_Input/TS_Input.js';
+import { TS_TextArea } from '../components/TS_Input/TS_TextArea.js';
+export class FieldEditor extends ComponentSync {
+    constructor(props) {
+        super(props);
+        const prevValue = this.props.storageKey.get();
+        if (!prevValue) {
+            // this.logDebug(`FieldEditor: ${this.props.value}`);
+            this.props.storageKey.set(this.props.value || '');
+        }
+    }
+    deriveStateFromProps(nextProps) {
+        return {};
+    }
+    onChange = (value) => {
+        // this.logDebug(`input onChange: ${value}`);
+        this.props.storageKey.set(value);
+        this.forceUpdate();
+    };
+    renderInput = (value) => {
+        // @ts-ignore
+        return (_jsx(TS_Input, { ...this.props.inputProps, focus: true, id: this.props.id, type: this.props.type, onAccept: this.props.onAccept, value: value, onChange: this.onChange }));
+    };
+    renderArea = (value) => {
+        // @ts-ignore
+        return (_jsx(TS_TextArea, { ...this.props.inputProps, focus: true, id: this.props.id, type: this.props.type, onAccept: this.props.onAccept, value: value, onChange: this.onChange }));
+    };
+    renderLabel = () => {
+        const label = this.props.value || this.props.inputProps?.placeholder || '';
+        if (typeof this.props.labelProps === 'function')
+            return this.props.labelProps(label);
+        return _jsx("div", { ...this.props.labelProps, children: label });
+    };
+    render() {
+        const value = this.props.storageKey.get() || '';
+        if (!this.props.isEditing)
+            return this.renderLabel();
+        switch (this.props.editorType || 'input') {
+            case 'input':
+                return this.renderInput(value);
+            case 'textarea':
+                return this.renderArea(value);
+        }
+    }
+}

package/widgets/FieldEditorClick.d.ts

@@ -0,0 +1,33 @@
+import { HTMLProps, ReactNode } from 'react';
+import { EditorType, FieldEditorInputProps } from './FieldEditor.js';
+import { ComponentSync } from '../core/ComponentSync.js';
+import { StorageKey } from '../modules/ModuleFE_LocalStorage.js';
+import { InputType } from '../components/TS_Input/TS_BaseInput.js';
+type State = {
+    isEditing: boolean;
+    storageKey: StorageKey<string>;
+};
+export type FieldEditorClickProps = {
+    clicks?: 1 | 2;
+    inputProps?: FieldEditorInputProps<any>;
+    labelProps?: HTMLProps<HTMLDivElement> | ((value: string) => ReactNode);
+    editorType?: EditorType;
+    type: InputType;
+    id: string;
+    onAccept: (value: string) => void;
+    value?: string;
+};
+export declare class FieldEditorClick extends ComponentSync<FieldEditorClickProps, State> {
+    private createStorageKey;
+    protected deriveStateFromProps(nextProps: FieldEditorClickProps): {
+        storageKey: StorageKey<string>;
+        isEditing: boolean;
+    };
+    componentDidUpdate(prevProps: Readonly<FieldEditorClickProps>, prevState: Readonly<State>): void;
+    private handleSave;
+    private startEdit;
+    private endEdit;
+    keyPressed: (e: KeyboardEvent) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/widgets/FieldEditorClick.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldEditor } from './FieldEditor.js';
+import { ComponentSync } from '../core/ComponentSync.js';
+import { StorageKey } from '../modules/ModuleFE_LocalStorage.js';
+export class FieldEditorClick extends ComponentSync {
+    createStorageKey() {
+        return new StorageKey(`editable-label-controller-${this.props.id}`);
+    }
+    deriveStateFromProps(nextProps) {
+        return {
+            storageKey: this.createStorageKey(),
+            isEditing: false,
+        };
+    }
+    componentDidUpdate(prevProps, prevState) {
+        let storageKey = prevState.storageKey;
+        if (prevProps.id !== this.props.id) {
+            storageKey = this.createStorageKey();
+            this.setState({ storageKey: storageKey });
+        }
+        const prevValue = storageKey.get();
+        if (!prevValue)
+            storageKey.set(this.props.value || '');
+    }
+    handleSave = () => {
+        this.props.onAccept(this.state.storageKey.get() ?? '');
+        this.endEdit();
+    };
+    startEdit = () => {
+        if (this.state.isEditing)
+            return;
+        addEventListener('keydown', this.keyPressed);
+        this.state.storageKey.set(this.props.value || '');
+        this.setState({ isEditing: true });
+    };
+    endEdit = () => {
+        removeEventListener('keydown', this.keyPressed);
+        this.logDebug('endEdit');
+        this.state.storageKey.delete();
+        this.setState({ isEditing: false });
+    };
+    keyPressed = (e) => {
+        if (e.code === 'Escape')
+            this.endEdit();
+    };
+    render() {
+        return (_jsx("div", { style: { width: '100%' }, onClick: this.props.clicks === 1 ? this.startEdit : undefined, onDoubleClick: this.props.clicks === undefined || this.props.clicks === 2 ? this.startEdit : undefined, onBlur: () => this.handleSave(), ...this.props.labelProps, children: _jsx(FieldEditor, { id: this.props.id, type: this.props.type, editorType: this.props.editorType, isEditing: this.state.isEditing, inputProps: this.props.inputProps, labelProps: this.props.labelProps, onCancel: this.endEdit, onAccept: this.handleSave, storageKey: this.state.storageKey, value: this.props.value }) }));
+    }
+}

package/widgets/FieldEditorWithButtons.d.ts

@@ -0,0 +1,32 @@
+import { HTMLProps } from 'react';
+import { FieldEditorInputProps } from './FieldEditor.js';
+import { StorageKey } from '../modules/ModuleFE_LocalStorage.js';
+import { ComponentSync } from '../core/ComponentSync.js';
+import { InputType } from '../components/TS_Input/TS_BaseInput.js';
+type State = {
+    isEditing: boolean;
+    storageKey: StorageKey<string>;
+};
+type Props = {
+    inputProps: FieldEditorInputProps<any>;
+    labelProps?: HTMLProps<HTMLDivElement>;
+    type: InputType;
+    id: string;
+    onAccept: (value: string) => void;
+    value?: string;
+};
+export declare class FieldEditorWithButtons extends ComponentSync<Props, State> {
+    private createStorageKey;
+    protected deriveStateFromProps(nextProps: Props): {
+        storageKey: StorageKey<string>;
+        isEditing: boolean;
+    };
+    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void;
+    handleEdit: () => void;
+    handleSave: () => void;
+    handleCancel: () => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderEditButton;
+    private renderControlButtons;
+}
+export {};

package/widgets/FieldEditorWithButtons.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldEditor } from './FieldEditor.js';
+import { StorageKey } from '../modules/ModuleFE_LocalStorage.js';
+import { ComponentSync } from '../core/ComponentSync.js';
+export class FieldEditorWithButtons extends ComponentSync {
+    createStorageKey() {
+        return new StorageKey(`editable-label-controller-${this.props.id}`);
+    }
+    deriveStateFromProps(nextProps) {
+        return {
+            storageKey: this.createStorageKey(),
+            isEditing: false,
+        };
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.id !== this.props.id) {
+            this.setState({ storageKey: this.createStorageKey() });
+        }
+    }
+    handleEdit = () => {
+        // Save the state's value in case of cancellation.
+        this.setState({ isEditing: true });
+    };
+    handleSave = () => {
+        this.props.onAccept(this.state.storageKey.get() ?? '');
+        this.handleCancel();
+    };
+    handleCancel = () => {
+        this.state.storageKey.delete();
+        this.setState({ isEditing: false });
+    };
+    render() {
+        const { isEditing } = this.state;
+        return (_jsxs("div", { className: `ll_h_c`, style: { justifyContent: 'space-between' }, children: [_jsx("div", { children: _jsx(FieldEditor, { id: this.props.id, type: this.props.type, isEditing: this.state.isEditing, inputProps: this.props.inputProps, labelProps: this.props.labelProps, onAccept: this.handleSave, onCancel: this.handleCancel, storageKey: this.state.storageKey, value: this.props.value }) }), isEditing ? this.renderControlButtons() : this.renderEditButton()] }));
+    }
+    renderEditButton = () => {
+        return _jsx("button", { onClick: this.handleEdit, children: "Edit" });
+    };
+    renderControlButtons = () => {
+        return _jsxs("div", { children: [_jsx("button", { onClick: this.handleSave, children: "Save" }), _jsx("button", { onClick: this.handleCancel, children: "Cancel" })] });
+    };
+}