typescript-overlay-essentials 2.0.3 → 2.0.5

package/README.md

@@ -1,4 +1,19 @@
 # typescript-overlay-essentials
+## EN:
+A small collection of useful tools, which can be used out of the box. All included overlays can be opened as reaction on something by calling the appropriate setState hooks, after interaction they close automatically.
+- [ConfirmationBox]: An Overlay with a ConfirmationBox (Proceed / Cancel),
+- [InfoOverlay]: A simpel Overlay with an Informationbox, which can be confirmed,
+- [InfoOverlayWithInput]: An Overlay with an input field that the user can put information into,
+- [LoadingOverlay]: A simple Overlay with a loading-animation and optional loading text,
+- [MultipleChoiceOverlay]: A simple Overlay with multiple-choice options for the user to choose from,
+- [MultipleRadioOverlay]: A simple Overlay with radio buttons for the user to choose exactly one,
+- [TutorialOverlay]: A simple Overlay for step by step tutorials or guided tours in which for each step a highlighted element and commands can be defined which are executed when entering the step (e.g. for switching between views),
+- [Toast]: A simple Toast that appears on the screen in green on the top right,
+- [ToggleSwitch]: A choice between two options in the appearence (Option 1 | Option 2),
+- [Dropdown]: A simplified Dropdown-menu (on the basis of react-select), a little simpler to configure and has some default-configurations,
+- [InputFilter]: A Tool which can be used to apply a Regex-Filter on an Inputfield to only allow specific user inputs.
+
+## DE: 
 Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden können. Alle enthaltenen Overlays können als Reaktion auf etwas geöffnet werden und schließen sich danach automatisch. Es beinhaltet:
 - [ConfirmationBox]: Ein Overlay mit einer ConfirmationBox (Fortfahren / Abbrechen),
 - [InfoOverlay]: ein simples Overlay mit einer Informationsbox die man bestätigen kann,
@@ -6,7 +21,37 @@ Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden k
 - [LoadingOverlay]: Ein simples Overlay mit einer Lade-animation und optionalem Ladetext,
 - [MultipleChoiceOverlay]: Ein simples Overlay bei dem ein Nutzer aus mehreren gegebenen Aktionen auswählen kann,
 - [MultipleRadioOverlay]: Ein simples Overlay bei dem ein Nutzer genau eine aus mehreren gegebenen Aktionen auswählen kann,
+- [TutorialOverlay]: Ein simples Overlay für step-by-step Tutorials oder Guided Tours bei denen in jedem Schritt ein Element hervorgehoben werden kann und Commands übergeben werden können, die beim betreten des Schritts ausgeführt werden (z.B. um zwischen Sichten zu wechseln),
 - [Toast]: Ein simpler Toast der für kurze Zeit grün hinterlegt in der oberen rechten Ecke des Bildschirms angezeigt wird,
 - [ToggleSwitch]: Eine Auswahl aus zwei Optionen aus denen ein Nutzer wählen kann in der Darstellung (Option 1 | Option 2),
 - [Dropdown]: Ein simples Dropdown-Menü (auf Basis von react-select), welches einfacherer zu Konfigurieren ist und einige default-Einstellungen hat,
 - [InputFilter]: Ein Tool was genutzt werden kann um auf einem Inputfeld einen Regex-Filter anzuwenden und dem User so nur Eingaben erlaubt die dem Filter entsprechen.
+
+## Examples:
+import { useState } from "react";
+import { ConfirmationBox, ConfirmationBoxState, defaultConfirmationState } from 'typescript-overlay-essentials';
+
+
+function App() {
+    
+    const [stateConfirmationBox, setStateConfirmationBox] = useState<ConfirmationBoxState>(defaultConfirmationState);
+    
+    function handleLicenseAgreement() {
+
+    }
+    
+    return <div id="root">
+         <ConfirmationBox state={stateConfirmationBox} setState={setStateConfirmationBox} />
+         <button onClick={() => {
+            setStateConfirmationBox({
+                headline: "Are you sure?",
+                message: "Do you want to accept the License agreement?",
+                proceedButtonText: "Agree",
+                cancelButtonText: "Decline",
+                handlerOk: handleLicenseAgreement
+            })
+         }}>
+            Confirm License
+         </button>
+    </div>;
+}

package/dist/Toast.css

@@ -1,7 +1,7 @@
 .overlay-essentials-toast-notification {
     font-size: 80%;
     position: fixed;
-    top: 14rem;
+    top: 4rem;
     right: 1rem;
     background-color: var(--DunkleresGruen, #1a7f37);
     color: white;

package/dist/TutorialOverlay.js

@@ -21,6 +21,14 @@ const defaultTutorialState = {
     cancelCommand: undefined,
     style: undefined,
 };
+var Positions;
+(function (Positions) {
+    Positions[Positions["TOP"] = 0] = "TOP";
+    Positions[Positions["RIGHT"] = 1] = "RIGHT";
+    Positions[Positions["BOTTOM"] = 2] = "BOTTOM";
+    Positions[Positions["LEFT"] = 3] = "LEFT";
+})(Positions || (Positions = {}));
+;
 const TIMEOUT_OVERLAY_WAIT_FOR_COMMAND_EXECUTION_MS = 100;
 // Wobei alle Attribute grundsätzlich optional sind:
 // - steps: Ist ein Array, welches alle Schritte des Tutorials im Format {message: string, attachToObject: JSX.Element, dontHighlightObject: boolean} angibt.
@@ -40,7 +48,7 @@ const TIMEOUT_OVERLAY_WAIT_FOR_COMMAND_EXECUTION_MS = 100;
 // - cancelButtonText: ist der Text der auf dem Abbrechen Button stehen soll (ohne Angabe wird "Überspringen" verwendet)
 // - style: ist der Style des Tutorial-Overlays (Standardmäßig unverändert)
 export function TutorialOverlay({ state, setState }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     // Wird verwendet um das Tutorial-Overlay ein- und auszublenden
     const [showTutorial, setShowTutorial] = useState(false);
     // Wird verwendet um die Position des Textes zu bestimmen
@@ -92,16 +100,18 @@ export function TutorialOverlay({ state, setState }) {
         else {
             e.scrollIntoView({ behavior: "instant", block: "center" });
         }
-        rect = e.getBoundingClientRect();
         // 25 rem
-        const tooltipWidth = 31 * parseFloat(getComputedStyle(document.documentElement).fontSize);
-        const showLeft = rect.right + tooltipWidth > window.innerWidth;
+        const _1rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        const tooltipWidth = 32 * _1rem;
+        const position = rect.right + tooltipWidth <= window.innerWidth ? Positions.RIGHT
+            : (rect.left - tooltipWidth >= 0 ? Positions.LEFT
+                : Positions.BOTTOM);
         setTutorialPos({
-            showLeft,
-            px_left: showLeft
-                ? rect.left - tooltipWidth - parseFloat(getComputedStyle(document.documentElement).fontSize)
-                : rect.right + parseFloat(getComputedStyle(document.documentElement).fontSize),
-            px_top: rect.top
+            position,
+            px_left: position === Positions.LEFT ? rect.left - tooltipWidth
+                : (position === Positions.RIGHT ? rect.right + _1rem
+                    : null),
+            px_top: position !== Positions.BOTTOM ? rect.top : (rect.bottom + _1rem)
         });
         if (!dontHighlightElement) {
             setHighlightElementRect({
@@ -125,23 +135,23 @@ export function TutorialOverlay({ state, setState }) {
                         top: `${(_b = highlightElementRect === null || highlightElementRect === void 0 ? void 0 : highlightElementRect.top) !== null && _b !== void 0 ? _b : 0}px`,
                         width: `${(_c = highlightElementRect === null || highlightElementRect === void 0 ? void 0 : highlightElementRect.width) !== null && _c !== void 0 ? _c : 0}px`,
                         height: `${(_d = highlightElementRect === null || highlightElementRect === void 0 ? void 0 : highlightElementRect.height) !== null && _d !== void 0 ? _d : 0}px`,
-                    } }), _jsxs("div", { className: "overlay-essentials-tutorial-box", style: {
+                    } }), _jsxs("div", { className: "overlay-essentials-tutorial-box", id: "overlay-essentials-tutorial-box", style: {
                         ...(tutorialPos
                             ? {
                                 position: "fixed",
-                                left: tutorialPos.px_left,
+                                left: (_e = tutorialPos.px_left) !== null && _e !== void 0 ? _e : ';',
                                 top: tutorialPos.px_top,
                                 transform: 'none'
                             }
                             : {}),
                         ...((state === null || state === void 0 ? void 0 : state.style) != null ? state.style : {})
-                    }, role: "dialog", "aria-modal": "true", "aria-labelledby": ((_e = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _e === void 0 ? void 0 : _e.headline) != null ? "tutorial-headline" : undefined, "aria-label": ((_f = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _f === void 0 ? void 0 : _f.headline) != null ? undefined : "Tutorial", "aria-describedby": "tutorial-message", onKeyDown: (event) => {
+                    }, role: "dialog", "aria-modal": "true", "aria-labelledby": ((_f = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _f === void 0 ? void 0 : _f.headline) != null ? "tutorial-headline" : undefined, "aria-label": ((_g = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _g === void 0 ? void 0 : _g.headline) != null ? undefined : "Tutorial", "aria-describedby": "tutorial-message", onKeyDown: (event) => {
                         var _a;
                         if (event.key === "Escape") {
                             const nextCommand = (_a = state.cancelCommand) !== null && _a !== void 0 ? _a : null;
                             setState((prev) => ({ ...prev, currentCommand: nextCommand !== null && nextCommand !== void 0 ? nextCommand : undefined }));
                         }
-                    }, children: [_jsx("div", { id: "overlay-essentials-tutorial-headline", className: "overlay-essentials-tutorial-headline", children: _jsxs("strong", { children: [(_h = (_g = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _g === void 0 ? void 0 : _g.headline) !== null && _h !== void 0 ? _h : "", " ", tutorialStep + 1, "/", state.steps.length] }) }), _jsx("div", { id: "overlay-essentials-tutorial-message", className: "overlay-essentials-tutorial-message", children: (_k = (_j = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _j === void 0 ? void 0 : _j.message) !== null && _k !== void 0 ? _k : "" }), _jsxs("div", { className: "overlay-essentials-tutorial-buttons", children: [_jsx("button", { onClick: () => {
+                    }, children: [_jsx("div", { id: "overlay-essentials-tutorial-headline", className: "overlay-essentials-tutorial-headline", children: _jsxs("strong", { children: [(_j = (_h = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _h === void 0 ? void 0 : _h.headline) !== null && _j !== void 0 ? _j : "", " ", tutorialStep + 1, "/", state.steps.length] }) }), _jsx("div", { id: "overlay-essentials-tutorial-message", className: "overlay-essentials-tutorial-message", children: (_l = (_k = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _k === void 0 ? void 0 : _k.message) !== null && _l !== void 0 ? _l : "" }), _jsxs("div", { className: "overlay-essentials-tutorial-buttons", children: [_jsx("button", { onClick: () => {
                                         var _a, _b, _c, _d;
                                         if (tutorialStep > 0) {
                                             const nextCommand = (_b = (_a = state.steps[tutorialStep]) === null || _a === void 0 ? void 0 : _a.backCommand) !== null && _b !== void 0 ? _b : null;
@@ -160,13 +170,17 @@ export function TutorialOverlay({ state, setState }) {
                                                     setHighlightElementRect(null);
                                                 }
                                                 setTutorialStep(prev => prev - 1);
+                                                setTimeout(() => {
+                                                    var _a;
+                                                    (_a = document.getElementById("overlay-essentials-tutorial-box")) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+                                                }, 10);
                                             }, nextCommand != null ? ((_c = state === null || state === void 0 ? void 0 : state.steps[tutorialStep - 1].waitFor) !== null && _c !== void 0 ? _c : TIMEOUT_OVERLAY_WAIT_FOR_COMMAND_EXECUTION_MS) : 0);
                                         }
                                         else {
                                             const nextCommand = (_d = state.cancelCommand) !== null && _d !== void 0 ? _d : null;
                                             setState((prev) => ({ ...prev, currentCommand: nextCommand !== null && nextCommand !== void 0 ? nextCommand : undefined, steps: [] }));
                                         }
-                                    }, type: "button", className: "px-4 py-2 bg-gray-300 rounded " + (tutorialStep > 0 ? "overlay-essentials-back-button" : "overlay-essentials-cancel-button"), children: tutorialStep > 0 ? ((_l = state === null || state === void 0 ? void 0 : state.backButtonText) !== null && _l !== void 0 ? _l : "Zurück") : ((_m = state === null || state === void 0 ? void 0 : state.cancelButtonText) !== null && _m !== void 0 ? _m : "Überspringen") }), _jsx("button", { onClick: () => {
+                                    }, type: "button", className: "px-4 py-2 bg-gray-300 rounded " + (tutorialStep > 0 ? "overlay-essentials-back-button" : "overlay-essentials-cancel-button"), children: tutorialStep > 0 ? ((_m = state === null || state === void 0 ? void 0 : state.backButtonText) !== null && _m !== void 0 ? _m : "Zurück") : ((_o = state === null || state === void 0 ? void 0 : state.cancelButtonText) !== null && _o !== void 0 ? _o : "Überspringen") }), _jsx("button", { onClick: () => {
                                         var _a, _b, _c, _d;
                                         if (tutorialStep + 1 < state.steps.length) {
                                             const nextCommand = (_b = (_a = state.steps[tutorialStep + 1]) === null || _a === void 0 ? void 0 : _a.command) !== null && _b !== void 0 ? _b : null;
@@ -185,11 +199,15 @@ export function TutorialOverlay({ state, setState }) {
                                                     setHighlightElementRect(null);
                                                 }
                                                 setTutorialStep(prev => prev + 1);
+                                                setTimeout(() => {
+                                                    var _a;
+                                                    (_a = document.getElementById("overlay-essentials-tutorial-box")) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+                                                }, 10);
                                             }, nextCommand != null ? (_c = state === null || state === void 0 ? void 0 : state.steps[tutorialStep + 1].waitFor) !== null && _c !== void 0 ? _c : TIMEOUT_OVERLAY_WAIT_FOR_COMMAND_EXECUTION_MS : 0);
                                         }
                                         else {
                                             const nextCommand = (_d = state.completeCommand) !== null && _d !== void 0 ? _d : null;
                                             setState((prev) => ({ ...prev, currentCommand: nextCommand !== null && nextCommand !== void 0 ? nextCommand : undefined, steps: [] }));
                                         }
-                                    }, ref: proceedButtonRef, type: "button", className: "px-4 py-2 bg-blue-600 text-white rounded " + (tutorialStep > 0 ? "overlay-essentials-proceed-button" : "overlay-essentials-complete-button"), children: tutorialStep < state.steps.length - 1 ? ((_o = state === null || state === void 0 ? void 0 : state.proceedButtonText) !== null && _o !== void 0 ? _o : "Weiter") : ((_p = state === null || state === void 0 ? void 0 : state.completeButtonText) !== null && _p !== void 0 ? _p : "Abschließen") })] })] })] }) : _jsx(_Fragment, {});
+                                    }, ref: proceedButtonRef, type: "button", className: "px-4 py-2 bg-blue-600 text-white rounded " + (tutorialStep > 0 ? "overlay-essentials-proceed-button" : "overlay-essentials-complete-button"), children: tutorialStep < state.steps.length - 1 ? ((_p = state === null || state === void 0 ? void 0 : state.proceedButtonText) !== null && _p !== void 0 ? _p : "Weiter") : ((_q = state === null || state === void 0 ? void 0 : state.completeButtonText) !== null && _q !== void 0 ? _q : "Abschließen") })] })] })] }) : _jsx(_Fragment, {});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-overlay-essentials",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden können. Alle enthaltenen Overlays können als Reaktion auf etwas geöffnet werden und schließen sich danach automatisch. Es beinhaltet: \\n - [ConfirmationBox]: Ein Overlay mit einer ConfirmationBox (Fortfahren / Abbrechen), \\n - [InfoOverlay]: ein simples Overlay mit einer Informationsbox die man bestätigen kann, \\n - [InfoOverlayWithInput]: Ein Overlay bei dem ein User zusätzlich ein Freitext-Feld zur Eingabe hat, \\n - [LoadingOverlay]: Ein simples Overlay mit einer Lade-animation und optionalem Ladetext, \\n - [MultipleChoiceOverlay]: Ein simples Overlay bei dem ein Nutzer aus mehreren gegebenen Aktionen auswählen kann, \\n - [MultipleRadioOverlay]: Ein simples Overlay bei dem ein Nutzer genau eine aus mehreren gegebenen Aktionen auswählen kann, \\n - [Toast]: Ein simpler Toast der für kurze Zeit grün hinterlegt in der oberen rechten Ecke des Bildschirms angezeigt wird, \\n - [ToggleSwitch]: Eine Auswahl aus zwei Optionen aus denen ein Nutzer wählen kann in der Darstellung (Option 1 | Option 2), \\n - [Dropdown]: Ein simples Dropdown-Menü (auf Basis von react-select), welches einfacherer zu Konfigurieren ist und einige default-Einstellungen hat, \\n - [InputFilter]: Ein Tool was genutzt werden kann um auf einem Inputfeld einen Regex-Filter anzuwenden und dem User so nur Eingaben erlaubt die dem Filter entsprechen.",
   "keywords": [
     "typescript",