dce-reactkit 2.0.10 → 2.0.11

package/lib/components/AppWrapper.d.ts

@@ -9,12 +9,27 @@ declare type Props = {
     dark?: boolean;
     sessionExpiredMessage?: string;
 };
+/**
+ * Show an alert modal with an "Okay" button
+ * @author Gabe Abrams
+ * @param title the title text to display at the top of the alert
+ * @param text the text to display in the alert
+ */
+export declare const alert: (title: string, text: string) => Promise<unknown>;
+/**
+ * Show a confirmation modal with an "Okay" and a "Cancel" button
+ * @author Gabe Abrams
+ * @param title the title text to display at the top of the alert
+ * @param text the text to display in the alert
+ * @returns true if the user confirmed
+ */
+export declare const confirm: (title: string, text: string) => Promise<boolean>;
 /**
  * Show a fatal error message
  * @author Gabe Abrams
  * @param error the error to show
  * @param [errorTitle] title of the error box
  */
-export declare const showFatalError: (error: any, errorTitle?: string) => void;
+export declare const showFatalError: (error: any, errorTitle?: string) => Promise<unknown>;
 declare const AppWrapper: (props: Props) => React.ReactElement;
 export default AppWrapper;

package/lib/components/AppWrapper.js

@@ -10,11 +10,47 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.showFatalError = void 0;
+exports.showFatalError = exports.confirm = exports.alert = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * A wrapper for the entire React app that adds global functionality like
@@ -29,11 +65,83 @@ var ErrorBox_1 = __importDefault(require("./ErrorBox"));
 var visitServerEndpoint_1 = require("../helpers/visitServerEndpoint");
 // Import shared types
 var ReactKitErrorCode_1 = __importDefault(require("../types/ReactKitErrorCode"));
+// Import shared components
+var Modal_1 = __importDefault(require("./Modal"));
 // Import custom errors
 var ErrorWithCode_1 = __importDefault(require("../errors/ErrorWithCode"));
 /*------------------------------------------------------------------------*/
 /*                             Static Helpers                             */
 /*------------------------------------------------------------------------*/
+/*----------------------------------------*/
+/*                  Alert                 */
+/*----------------------------------------*/
+// Stored copies of setters
+var setAlertInfo;
+var onAlertClosed;
+/**
+ * Show an alert modal with an "Okay" button
+ * @author Gabe Abrams
+ * @param title the title text to display at the top of the alert
+ * @param text the text to display in the alert
+ */
+var alert = function (title, text) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        // Fallback if alert not available
+        if (!setAlertInfo) {
+            return [2 /*return*/, window.alert("".concat(title, "\n\n").concat(text))];
+        }
+        // Return promise that resolves when alert is closed
+        return [2 /*return*/, new Promise(function (resolve) {
+                // Setup handler
+                onAlertClosed = function () {
+                    resolve(null);
+                };
+                // Show the alert
+                setAlertInfo({
+                    title: title,
+                    text: text,
+                });
+            })];
+    });
+}); };
+exports.alert = alert;
+/*----------------------------------------*/
+/*                 Confirm                */
+/*----------------------------------------*/
+// Stored copies of setters
+var setConfirmInfo;
+var onConfirmClosed;
+/**
+ * Show a confirmation modal with an "Okay" and a "Cancel" button
+ * @author Gabe Abrams
+ * @param title the title text to display at the top of the alert
+ * @param text the text to display in the alert
+ * @returns true if the user confirmed
+ */
+var confirm = function (title, text) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        // Fallback if confirm is not available
+        if (!setConfirmInfo) {
+            return [2 /*return*/, window.confirm("".concat(title, "\n\n").concat(text))];
+        }
+        // Return promise that resolves with result of confirmation
+        return [2 /*return*/, new Promise(function (resolve) {
+                // Setup handler
+                onConfirmClosed = function (confirmed) {
+                    resolve(confirmed);
+                };
+                // Show the confirm
+                setConfirmInfo({
+                    title: title,
+                    text: text,
+                });
+            })];
+    });
+}); };
+exports.confirm = confirm;
+/*----------------------------------------*/
+/*               Fatal Error              */
+/*----------------------------------------*/
 // Stored copies of setters
 var setFatalErrorMessage;
 var setFatalErrorCode;
@@ -56,7 +164,7 @@ var showFatalError = function (error, errorTitle) {
         : String((_b = error.code) !== null && _b !== void 0 ? _b : ReactKitErrorCode_1.default.NoCode));
     // Handle case where app hasn't loaded
     if (!setFatalErrorMessage || !setFatalErrorCode) {
-        return alert("An error has occurred: ".concat(message, " (code: ").concat(code, "). Please contact support."));
+        return (0, exports.alert)(errorTitle, "".concat(message, " (code: ").concat(code, "). Please contact support."));
     }
     // Use setters
     setFatalErrorMessage(message);
@@ -75,14 +183,20 @@ var AppWrapper = function (props) {
     var children = props.children, dark = props.dark, _a = props.sessionExpiredMessage, sessionExpiredMessage = _a === void 0 ? 'Your session has expired. Please go back to Canvas and start over.' : _a;
     /* -------------- State ------------- */
     // Fatal error
-    var _b = (0, react_1.useState)(null), fatalErrorMessage = _b[0], setFatalErrorMessageInner = _b[1];
+    var _b = (0, react_1.useState)(), fatalErrorMessage = _b[0], setFatalErrorMessageInner = _b[1];
     setFatalErrorMessage = setFatalErrorMessageInner;
-    var _c = (0, react_1.useState)(null), fatalErrorCode = _c[0], setFatalErrorCodeInner = _c[1];
+    var _c = (0, react_1.useState)(), fatalErrorCode = _c[0], setFatalErrorCodeInner = _c[1];
     setFatalErrorCode = setFatalErrorCodeInner;
-    var _d = (0, react_1.useState)(null), fatalErrorTitle = _d[0], setFatalErrorTitleInner = _d[1];
+    var _d = (0, react_1.useState)(), fatalErrorTitle = _d[0], setFatalErrorTitleInner = _d[1];
     setFatalErrorTitle = setFatalErrorTitleInner;
+    // Alert
+    var _e = (0, react_1.useState)(), alertInfo = _e[0], setAlertInfoInner = _e[1];
+    setAlertInfo = setAlertInfoInner;
+    // Confirm
+    var _f = (0, react_1.useState)(), confirmInfo = _f[0], setConfirmInfoInner = _f[1];
+    setConfirmInfo = setConfirmInfoInner;
     // Session expired
-    var _e = (0, react_1.useState)(false), sessionHasExpired = _e[0], setSessionHasExpired = _e[1];
+    var _g = (0, react_1.useState)(false), sessionHasExpired = _g[0], setSessionHasExpired = _g[1];
     /*------------------------------------------------------------------------*/
     /*                           Lifecycle Functions                          */
     /*------------------------------------------------------------------------*/
@@ -101,16 +215,40 @@ var AppWrapper = function (props) {
     /*                                 Render                                 */
     /*------------------------------------------------------------------------*/
     /*----------------------------------------*/
-    /*                 Main UI                */
+    /*                  Modal                 */
+    /*----------------------------------------*/
+    // Modal that may be defined
+    var modal;
+    /* -------------- Alert ------------- */
+    if (alertInfo) {
+        modal = ((0, jsx_runtime_1.jsx)(Modal_1.default, __assign({ title: alertInfo.title, type: Modal_1.default.ModalType.Okay, onClose: function () {
+                // Alert closed
+                if (onAlertClosed) {
+                    onAlertClosed();
+                }
+            }, onTopOfOtherModals: true }, { children: alertInfo.text })));
+    }
+    /* ------------- Confirm ------------ */
+    if (confirmInfo) {
+        modal = ((0, jsx_runtime_1.jsx)(Modal_1.default, { title: confirmInfo.title, type: Modal_1.default.ModalType.OkayCancel, onClose: function (buttonType) {
+                if (onConfirmClosed) {
+                    onConfirmClosed(buttonType === Modal_1.default.ButtonType.Okay);
+                }
+            }, dontAllowBackdropExit: true }));
+    }
     /*----------------------------------------*/
-    // Show error
+    /*                  Views                 */
+    /*----------------------------------------*/
+    // Body that will be filled with the current view
+    var body;
+    /* ----------- Fatal Error ---------- */
     if (fatalErrorMessage || fatalErrorCode || sessionHasExpired) {
         // Re-encapsulate in an error
         var error = (sessionHasExpired
             ? new ErrorWithCode_1.default(fatalErrorMessage, fatalErrorCode)
             : new ErrorWithCode_1.default(sessionExpiredMessage, ReactKitErrorCode_1.default.SessionExpired));
         // Build error screen
-        return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+        body = ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
                 display: 'block',
                 width: '100vw',
                 minHeight: '100vh',
@@ -122,8 +260,14 @@ var AppWrapper = function (props) {
                     ? 'Session Expired'
                     : fatalErrorTitle), error: error }) })));
     }
-    // Show the app itself
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+    /* --------------- App -------------- */
+    if (!body) {
+        body = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+    }
+    /*----------------------------------------*/
+    /*                 Main UI                */
+    /*----------------------------------------*/
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modal, body] }));
 };
 /*------------------------------------------------------------------------*/
 /*                                 Wrap Up                                */

package/lib/components/AppWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppWrapper.js","sourceRoot":"","sources":["../../src/components/AppWrapper.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppWrapper.js","sourceRoot":"","sources":["../../src/components/AppWrapper.tsx"],"names":[],"mappings":"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"}

package/lib/components/Modal.d.ts

@@ -39,6 +39,7 @@ declare type Props = {
     title?: React.ReactNode;
     children?: React.ReactNode;
     onClose?: (type: ButtonType) => void;
+    dontAllowBackdropExit?: boolean;
     okayLabel?: string;
     okayVariant?: Variant;
     cancelLabel?: string;
@@ -59,6 +60,7 @@ declare type Props = {
     deleteVariant?: Variant;
     confirmLabel?: string;
     confirmVariant?: Variant;
+    onTopOfOtherModals?: boolean;
 };
 declare const Modal: (React.FC<Props> & {
     ModalType: typeof ModalType;

package/lib/components/Modal.js

@@ -196,7 +196,7 @@ var Modal = function (props) {
     /*------------------------------------------------------------------------*/
     var _a;
     /* -------------- Props ------------- */
-    var _b = props.type, type = _b === void 0 ? ModalType.NoButtons : _b, _c = props.size, size = _c === void 0 ? ModalSize.Large : _c, title = props.title, children = props.children, onClose = props.onClose;
+    var _b = props.type, type = _b === void 0 ? ModalType.NoButtons : _b, _c = props.size, size = _c === void 0 ? ModalSize.Large : _c, title = props.title, children = props.children, onClose = props.onClose, dontAllowBackdropExit = props.dontAllowBackdropExit, onTopOfOtherModals = props.onTopOfOtherModals;
     /* -------------- State ------------- */
     // If true, the modal is shown
     var _d = (0, react_1.useState)(false), visible = _d[0], setVisible = _d[1];
@@ -300,8 +300,14 @@ var Modal = function (props) {
         : undefined);
     // Render the modal
     return ((0, jsx_runtime_1.jsxs)(Modal_1.default, __assign({ show: visible, size: size !== ModalSize.Medium ? size : undefined, onHide: function () {
-            handleClose(ButtonType.Cancel);
-        }, style: { zIndex: 5000000000 }, backdropClassName: "Modal-backdrop", centered: true }, { children: [(0, jsx_runtime_1.jsx)("style", { children: style }), title && ((0, jsx_runtime_1.jsx)(Modal_1.default.Header, __assign({ closeButton: !!onClose }, { children: (0, jsx_runtime_1.jsx)(Modal_1.default.Title, { children: title }) }))), children && ((0, jsx_runtime_1.jsx)(Modal_1.default.Body, { children: children })), footer && ((0, jsx_runtime_1.jsx)(Modal_1.default.Footer, { children: footer }))] })));
+            if (!dontAllowBackdropExit) {
+                handleClose(ButtonType.Cancel);
+            }
+        }, style: {
+            zIndex: (onTopOfOtherModals
+                ? 6000000000
+                : 5000000000),
+        }, backdropClassName: "Modal-backdrop", centered: true }, { children: [(0, jsx_runtime_1.jsx)("style", { children: style }), title && ((0, jsx_runtime_1.jsx)(Modal_1.default.Header, __assign({ closeButton: !!onClose }, { children: (0, jsx_runtime_1.jsx)(Modal_1.default.Title, { children: title }) }))), children && ((0, jsx_runtime_1.jsx)(Modal_1.default.Body, { children: children })), footer && ((0, jsx_runtime_1.jsx)(Modal_1.default.Footer, { children: footer }))] })));
 };
 /*------------------------------------------------------------------------*/
 /*                                 Wrap Up                                */

package/lib/components/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"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"}

package/lib/components/TabBox.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A box with a tab on the top that holds buttons and other content
+ * @author Gabe Abrams
+ */
+import React from 'react';
+declare type Props = {
+    title: React.ReactNode;
+    children: React.ReactNode;
+};
+declare const TabBox: React.FC<Props>;
+export default TabBox;

package/lib/components/TabBox.js

@@ -0,0 +1,42 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+var style = "\n/* Tab Box */\n.TabBox-box {\n  /* Light Border */\n  border: 2px solid #dedede;\n  \n  /* Rounded Corners (except top-left) */\n  border-bottom-right-radius: 5px;\n  border-bottom-left-radius: 5px;\n  border-top-right-radius: 5px;\n\n  /* Very Light Gray Border */\n  background: #fdfdfd;\n\n  /* Align Contents on Left */\n  text-align: left;\n}\n\n/* Container for Title */\n.TabBox-title-container {\n  /* Place on Left */\n  position: relative;\n  left: 0;\n  text-align: left;\n}\n\n/* Tab-style Title */\n.TabBox-title {\n  /* Place so it Barely Overlaps the Box Border */\n  display: inline-block;\n  position: relative;\n  top: 2px; /* Gives Illusion that Border Doesn't Exist Below Tab */\n\n  /* Title-sized Font */\n  font-size: 25px;\n\n  /* Add Border on Top and Sides */\n  border-top: 2px solid #dedede;\n  border-left: 2px solid #dedede;\n  border-right: 2px solid #dedede;\n\n  /* Round the Top Corners */\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n\n  /* Add Text Padding */\n  padding-left: 12px;\n  padding-right: 12px;\n\n  /* Match Background Color of Box */\n  background: #fdfdfd;\n}\n\n/* Make the TabBox's Children Appear Above Title if Overlap Occurs */\n.TabBox-children {\n  position: relative;\n  z-index: 1;\n}\n";
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+var TabBox = function (props) {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    var title = props.title, children = props.children;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                 Main UI                */
+    /*----------------------------------------*/
+    // Full UI
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("style", { children: style }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "TabBox-title-container" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "TabBox-title" }, { children: title })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "TabBox-box p-2" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "TabBox-children" }, { children: children })) }))] }));
+};
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+// Export component
+exports.default = TabBox;
+//# sourceMappingURL=TabBox.js.map

package/lib/components/TabBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBox.js","sourceRoot":"","sources":["../../src/components/TabBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAmBA,4EAA4E;AAC5E,4EAA4E;AAC5E,4EAA4E;AAE5E,IAAM,KAAK,GAAG,uvCA0Db,CAAC;AAEF,4EAA4E;AAC5E,4EAA4E;AAC5E,4EAA4E;AAE5E,IAAM,MAAM,GAAoB,UAAC,KAAK;IACpC,4EAA4E;IAC5E,4EAA4E;IAC5E,4EAA4E;IAE5E,wCAAwC;IAGtC,IAAA,KAAK,GAEH,KAAK,MAFF,EACL,QAAQ,GACN,KAAK,SADC,CACA;IAEV,4EAA4E;IAC5E,4EAA4E;IAC5E,4EAA4E;IAE5E,4CAA4C;IAC5C,4CAA4C;IAC5C,4CAA4C;IAE5C,UAAU;IACV,OAAO,CACL,4CAEE,4CAAQ,KAAK,GAAS,EAGtB,yCAAK,SAAS,EAAC,wBAAwB,gBACrC,yCAAK,SAAS,EAAC,cAAc,gBAC1B,KAAK,IACF,IACF,EAGN,yCAAK,SAAS,EAAC,gBAAgB,gBAC7B,yCAAK,SAAS,EAAC,iBAAiB,gBAC7B,QAAQ,IACL,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,4EAA4E;AAC5E,4EAA4E;AAC5E,4EAA4E;AAE5E,mBAAmB;AACnB,kBAAe,MAAM,CAAC"}

package/lib/helpers/alert.d.ts

@@ -0,0 +1,2 @@
+import { alert } from '../components/AppWrapper';
+export default alert;

package/lib/helpers/alert.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var AppWrapper_1 = require("../components/AppWrapper");
+exports.default = AppWrapper_1.alert;
+//# sourceMappingURL=alert.js.map

package/lib/helpers/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../src/helpers/alert.tsx"],"names":[],"mappings":";;AAAA,uDAAiD;AAEjD,kBAAe,kBAAK,CAAC"}

package/lib/helpers/confirm.d.ts

@@ -0,0 +1,2 @@
+import { confirm } from '../components/AppWrapper';
+export default confirm;

package/lib/helpers/confirm.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var AppWrapper_1 = require("../components/AppWrapper");
+exports.default = AppWrapper_1.confirm;
+//# sourceMappingURL=confirm.js.map

package/lib/helpers/confirm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm.js","sourceRoot":"","sources":["../../src/helpers/confirm.tsx"],"names":[],"mappings":";;AAAA,uDAAmD;AAEnD,kBAAe,oBAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/components/AppWrapper.tsx

@@ -16,6 +16,9 @@ import { setSessionExpiryHandler } from '../helpers/visitServerEndpoint';
 // Import shared types
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
 
+// Import shared components
+import Modal from './Modal';
+
 // Import custom errors
 import ErrorWithCode from '../errors/ErrorWithCode';
 
@@ -36,6 +39,84 @@ type Props = {
 /*                             Static Helpers                             */
 /*------------------------------------------------------------------------*/
 
+/*----------------------------------------*/
+/*                  Alert                 */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setAlertInfo: (info: { title: string, text: string }) => void;
+let onAlertClosed: () => void;
+
+/**
+ * Show an alert modal with an "Okay" button
+ * @author Gabe Abrams
+ * @param title the title text to display at the top of the alert
+ * @param text the text to display in the alert
+ */
+export const alert = async (title: string, text: string) => {
+  // Fallback if alert not available
+  if (!setAlertInfo) {
+    return window.alert(`${title}\n\n${text}`);
+  }
+
+  // Return promise that resolves when alert is closed
+  return new Promise((resolve) => {
+    // Setup handler
+    onAlertClosed = () => {
+      resolve(null);
+    };
+
+    // Show the alert
+    setAlertInfo({
+      title,
+      text,
+    });
+  });
+};
+
+/*----------------------------------------*/
+/*                 Confirm                */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setConfirmInfo: (info: { title: string, text: string }) => void;
+let onConfirmClosed: (confirmed: boolean) => void;
+
+/**
+ * Show a confirmation modal with an "Okay" and a "Cancel" button
+ * @author Gabe Abrams
+ * @param title the title text to display at the top of the alert
+ * @param text the text to display in the alert
+ * @returns true if the user confirmed
+ */
+export const confirm = async (
+  title: string,
+  text: string,
+): Promise<boolean> => {
+  // Fallback if confirm is not available
+  if (!setConfirmInfo) {
+    return window.confirm(`${title}\n\n${text}`);
+  }
+
+  // Return promise that resolves with result of confirmation
+  return new Promise((resolve) => {
+    // Setup handler
+    onConfirmClosed = (confirmed: boolean) => {
+      resolve(confirmed)
+    };
+
+    // Show the confirm
+    setConfirmInfo({
+      title,
+      text,
+    });
+  });
+};
+
+/*----------------------------------------*/
+/*               Fatal Error              */
+/*----------------------------------------*/
+
 // Stored copies of setters
 let setFatalErrorMessage: (message: string) => void;
 let setFatalErrorCode: (code: string) => void;
@@ -65,7 +146,10 @@ export const showFatalError = (
 
   // Handle case where app hasn't loaded
   if (!setFatalErrorMessage || !setFatalErrorCode) {
-    return alert(`An error has occurred: ${message} (code: ${code}). Please contact support.`);
+    return alert(
+      errorTitle,
+      `${message} (code: ${code}). Please contact support.`,
+    );
   }
 
   // Use setters
@@ -94,15 +178,47 @@ const AppWrapper = (props: Props): React.ReactElement => {
   /* -------------- State ------------- */
 
   // Fatal error
-  const [fatalErrorMessage, setFatalErrorMessageInner] = useState(null);
+  const [
+    fatalErrorMessage,
+    setFatalErrorMessageInner,
+  ] = useState<string | undefined>();
   setFatalErrorMessage = setFatalErrorMessageInner;
-  const [fatalErrorCode, setFatalErrorCodeInner] = useState(null);
+  const [
+    fatalErrorCode,
+    setFatalErrorCodeInner,
+  ] = useState<string | undefined>();
   setFatalErrorCode = setFatalErrorCodeInner;
-  const [fatalErrorTitle, setFatalErrorTitleInner] = useState(null);
+  const [
+    fatalErrorTitle,
+    setFatalErrorTitleInner,
+  ] = useState<string | undefined>();
   setFatalErrorTitle = setFatalErrorTitleInner;
 
+  // Alert
+  const [
+    alertInfo,
+    setAlertInfoInner,
+  ] = useState<{
+    title: string,
+    text: string
+  }>();
+  setAlertInfo = setAlertInfoInner;
+
+  // Confirm
+  const [
+    confirmInfo,
+    setConfirmInfoInner,
+  ] = useState<{
+    title: string,
+    text: string
+  }>();
+  setConfirmInfo = setConfirmInfoInner;
+
   // Session expired
-  const [sessionHasExpired, setSessionHasExpired] = useState(false);
+  const [
+    sessionHasExpired,
+    setSessionHasExpired,
+  ] = useState<boolean>(false);
 
   /*------------------------------------------------------------------------*/
   /*                           Lifecycle Functions                          */
@@ -128,10 +244,60 @@ const AppWrapper = (props: Props): React.ReactElement => {
   /*------------------------------------------------------------------------*/
 
   /*----------------------------------------*/
-  /*                 Main UI                */
+  /*                  Modal                 */
+  /*----------------------------------------*/
+
+  // Modal that may be defined
+  let modal: React.ReactNode;
+
+  /* -------------- Alert ------------- */
+
+  if (alertInfo) {
+    modal = (
+      <Modal
+        title={alertInfo.title}
+        type={Modal.ModalType.Okay}
+        onClose={() => {
+          // Alert closed
+          if (onAlertClosed) {
+            onAlertClosed();
+          }
+        }}
+        onTopOfOtherModals
+      >
+        {alertInfo.text}
+      </Modal>
+    );
+  }
+
+  /* ------------- Confirm ------------ */
+
+  if (confirmInfo) {
+    modal = (
+      <Modal
+        title={confirmInfo.title}
+        type={Modal.ModalType.OkayCancel}
+        onClose={(buttonType) => {
+          if (onConfirmClosed) {
+            onConfirmClosed(buttonType === Modal.ButtonType.Okay);
+          }
+        }}
+        dontAllowBackdropExit
+      >
+
+      </Modal>
+    );
+  }
+
+  /*----------------------------------------*/
+  /*                  Views                 */
   /*----------------------------------------*/
 
-  // Show error
+  // Body that will be filled with the current view
+  let body: React.ReactNode;
+
+  /* ----------- Fatal Error ---------- */
+
   if (fatalErrorMessage || fatalErrorCode || sessionHasExpired) {
     // Re-encapsulate in an error
     const error = (
@@ -147,7 +313,7 @@ const AppWrapper = (props: Props): React.ReactElement => {
     );
 
     // Build error screen
-    return (
+    body = (
       <div
         style={{
           display: 'block',
@@ -173,10 +339,24 @@ const AppWrapper = (props: Props): React.ReactElement => {
     );
   }
 
-  // Show the app itself
+  /* --------------- App -------------- */
+
+  if (!body) {
+    body = (
+      <>
+        {children}
+      </>
+    );
+  }
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
   return (
     <>
-      {children}
+      {modal}
+      {body}
     </>
   );
 };

package/src/components/Modal.tsx

@@ -209,6 +209,8 @@ type Props = {
   children?: React.ReactNode,
   // Handler to call when modal is closed (if excluded, not closable)
   onClose?: (type: ButtonType) => void,
+  // If true, don't allow the user to click the backdrop to exit
+  dontAllowBackdropExit?: boolean,
   // Custom label for "okay" button
   okayLabel?: string,
   // Custom variant for "okay" button
@@ -249,6 +251,8 @@ type Props = {
   confirmLabel?: string,
   // Custom variant for "confirm" button
   confirmVariant?: Variant,
+  // True if modal should be on top of other modals
+  onTopOfOtherModals?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -276,6 +280,8 @@ const Modal: (
     title,
     children,
     onClose,
+    dontAllowBackdropExit,
+    onTopOfOtherModals,
   } = props;
 
   /* -------------- State ------------- */
@@ -404,9 +410,17 @@ const Modal: (
       show={visible}
       size={size !== ModalSize.Medium ? size : undefined}
       onHide={() => {
-        handleClose(ButtonType.Cancel);
+        if (!dontAllowBackdropExit) {
+          handleClose(ButtonType.Cancel);
+        }
+      }}
+      style={{
+        zIndex: (
+          onTopOfOtherModals
+            ? 6000000000
+            : 5000000000
+        ),
       }}
-      style={{ zIndex: 5000000000 }}
       backdropClassName="Modal-backdrop"
       centered
     >

package/src/components/TabBox.tsx

@@ -0,0 +1,136 @@
+/**
+ * A box with a tab on the top that holds buttons and other content
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Title of the box
+  title: React.ReactNode,
+  // Children/contents inside the box
+  children: React.ReactNode,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+/* Tab Box */
+.TabBox-box {
+  /* Light Border */
+  border: 2px solid #dedede;
+  
+  /* Rounded Corners (except top-left) */
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-top-right-radius: 5px;
+
+  /* Very Light Gray Border */
+  background: #fdfdfd;
+
+  /* Align Contents on Left */
+  text-align: left;
+}
+
+/* Container for Title */
+.TabBox-title-container {
+  /* Place on Left */
+  position: relative;
+  left: 0;
+  text-align: left;
+}
+
+/* Tab-style Title */
+.TabBox-title {
+  /* Place so it Barely Overlaps the Box Border */
+  display: inline-block;
+  position: relative;
+  top: 2px; /* Gives Illusion that Border Doesn't Exist Below Tab */
+
+  /* Title-sized Font */
+  font-size: 25px;
+
+  /* Add Border on Top and Sides */
+  border-top: 2px solid #dedede;
+  border-left: 2px solid #dedede;
+  border-right: 2px solid #dedede;
+
+  /* Round the Top Corners */
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+
+  /* Add Text Padding */
+  padding-left: 12px;
+  padding-right: 12px;
+
+  /* Match Background Color of Box */
+  background: #fdfdfd;
+}
+
+/* Make the TabBox's Children Appear Above Title if Overlap Occurs */
+.TabBox-children {
+  position: relative;
+  z-index: 1;
+}
+`;
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const TabBox: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    title,
+    children,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  // Full UI
+  return (
+    <div>
+      {/* Style */}
+      <style>{style}</style>
+
+      {/* Title */}
+      <div className="TabBox-title-container">
+        <div className="TabBox-title">
+          {title}
+        </div>
+      </div>
+
+      {/* Contents */}
+      <div className="TabBox-box p-2">
+        <div className="TabBox-children">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default TabBox;

package/src/helpers/alert.tsx

@@ -0,0 +1,3 @@
+import { alert } from '../components/AppWrapper';
+
+export default alert;

package/src/helpers/confirm.tsx

@@ -0,0 +1,3 @@
+import { confirm } from '../components/AppWrapper';
+
+export default confirm;