dce-reactkit 2.0.10 → 3.0.0

package/src/components/LoadingSpinner.tsx

@@ -3,6 +3,9 @@
  * @author Gabe Abrams
  */
 
+// Import react
+import React from 'react';
+
 // Import FontAwesome Icons
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircle } from '@fortawesome/free-solid-svg-icons';

package/src/components/Modal.tsx

@@ -12,6 +12,9 @@ import waitMs from '../helpers/waitMs';
 
 // Import types
 import Variant from '../types/Variant';
+import ModalButtonType from '../types/ModalButtonType';
+import ModalSize from '../types/ModalSize';
+import ModalType from '../types/ModalType';
 
 /*------------------------------------------------------------------------*/
 /*                                  Style                                 */
@@ -77,118 +80,83 @@ const MS_TO_ANIMATE = 400; // Time to animate in/out (defined by bootstrap)
 const MS_ANIMATE_IN_DELAY = 10;
 // Time to wait before animating in (must be >0 or animation won't trigger)
 
-// Modal types
-enum ModalType {
-  Okay = 'okay', // [Okay]
-  OkayCancel = 'okay-cancel', // [Okay] [Cancel]
-  YesNo = 'yes-no', // [Yes] [No]
-  YesNoCancel = 'yes-no-cancel', // [Yes] [No] [Cancel]
-  AbandonGoBack = 'abandon-goBack', // [Abandon Changes] [Go Back]
-  ImSureCancel = 'imSure-cancel', // [I am sure] [Cancel]
-  DeleteCancel = 'delete-cancel', // [Yes, Delete] [Cancel]
-  ConfirmCancel = 'confirm-cancel', // [Confirm] [Cancel]
-  NoButtons = '-', // No buttons
-}
-
-// Modal sizes
-enum ModalSize {
-  Small = 'sm',
-  Medium = 'md',
-  Large = 'lg',
-  ExtraLarge = 'xl',
-}
-
-// Button types
-enum ButtonType {
-  Okay = 'okay',
-  Cancel = 'cancel',
-  Yes = 'yes',
-  No = 'no',
-  Abandon = 'abandon',
-  GoBack = 'goBack',
-  Continue = 'continue',
-  ImSure = 'imSure',
-  Delete = 'delete',
-  Confirm = 'confirm',
-}
-
 // Modal type to list of buttons
-const modalTypeToButtonTypes: {
-  [k: string]: ButtonType[]
+const modalTypeToModalButtonTypes: {
+  [k: string]: ModalButtonType[]
 } = {
   [ModalType.Okay]: [
-    ButtonType.Okay,
+    ModalButtonType.Okay,
   ],
   [ModalType.OkayCancel]: [
-    ButtonType.Okay,
-    ButtonType.Cancel,
+    ModalButtonType.Okay,
+    ModalButtonType.Cancel,
   ],
   [ModalType.YesNo]: [
-    ButtonType.Yes,
-    ButtonType.No,
+    ModalButtonType.Yes,
+    ModalButtonType.No,
   ],
   [ModalType.YesNoCancel]: [
-    ButtonType.Yes,
-    ButtonType.No,
-    ButtonType.Cancel,
+    ModalButtonType.Yes,
+    ModalButtonType.No,
+    ModalButtonType.Cancel,
   ],
   [ModalType.AbandonGoBack]: [
-    ButtonType.Abandon,
-    ButtonType.GoBack,
+    ModalButtonType.Abandon,
+    ModalButtonType.GoBack,
   ],
   [ModalType.ImSureCancel]: [
-    ButtonType.ImSure,
-    ButtonType.Cancel,
+    ModalButtonType.ImSure,
+    ModalButtonType.Cancel,
   ],
   [ModalType.DeleteCancel]: [
-    ButtonType.Delete,
-    ButtonType.Cancel,
+    ModalButtonType.Delete,
+    ModalButtonType.Cancel,
   ],
   [ModalType.ConfirmCancel]: [
-    ButtonType.Confirm,
-    ButtonType.Cancel,
+    ModalButtonType.Confirm,
+    ModalButtonType.Cancel,
   ],
 };
 
 // Button type styling and labels
-const buttonTypeToLabelAndVariant = {
-  [ButtonType.Okay]: {
+const ModalButtonTypeToLabelAndVariant = {
+  [ModalButtonType.Okay]: {
     label: 'Okay',
     variant: Variant.Dark,
   },
-  [ButtonType.Cancel]: {
+  [ModalButtonType.Cancel]: {
     label: 'Cancel',
     variant: Variant.Secondary,
   },
-  [ButtonType.Yes]: {
+  [ModalButtonType.Yes]: {
     label: 'Yes',
     variant: Variant.Dark,
   },
-  [ButtonType.No]: {
+  [ModalButtonType.No]: {
     label: 'No',
     variant: Variant.Secondary,
   },
-  [ButtonType.Abandon]: {
+  [ModalButtonType.Abandon]: {
     label: 'Abandon Changes',
     variant: Variant.Warning,
   },
-  [ButtonType.GoBack]: {
+  [ModalButtonType.GoBack]: {
     label: 'Go Back',
     variant: Variant.Secondary,
   },
-  [ButtonType.Continue]: {
+  [ModalButtonType.Continue]: {
     label: 'Continue',
     variant: Variant.Dark,
   },
-  [ButtonType.ImSure]: {
+  [ModalButtonType.ImSure]: {
     label: 'I am sure',
     variant: Variant.Warning,
   },
-  [ButtonType.Delete]: {
+  [ModalButtonType.Delete]: {
     label: 'Yes, Delete',
     variant: Variant.Danger,
   },
-  [ButtonType.Confirm]: {
+  [ModalButtonType.Confirm]: {
     label: 'Confirm',
     variant: Variant.Dark,
   },
@@ -208,7 +176,9 @@ type Props = {
   // The body of the modal
   children?: React.ReactNode,
   // Handler to call when modal is closed (if excluded, not closable)
-  onClose?: (type: ButtonType) => void,
+  onClose?: (type: ModalButtonType) => 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,21 +219,15 @@ type Props = {
   confirmLabel?: string,
   // Custom variant for "confirm" button
   confirmVariant?: Variant,
+  // True if modal should be on top of other modals
+  onTopOfOtherModals?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
 /*                                Component                               */
 /*------------------------------------------------------------------------*/
 
-const Modal: (
-  React.FC<Props>
-  & {
-    ModalType: typeof ModalType,
-    ModalSize: typeof ModalSize,
-    ButtonType: typeof ButtonType,
-    Variant: typeof Variant,
-  }
-) = (props) => {
+const Modal: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
   /*                                  Setup                                 */
   /*------------------------------------------------------------------------*/
@@ -276,6 +240,8 @@ const Modal: (
     title,
     children,
     onClose,
+    dontAllowBackdropExit,
+    onTopOfOtherModals,
   } = props;
 
   /* -------------- State ------------- */
@@ -316,10 +282,10 @@ const Modal: (
   /**
    * Handles the closing of the modal
    * @author Gabe Abrams
-   * @param buttonType the button that was clicked when closing the
+   * @param ModalButtonType the button that was clicked when closing the
    *   modal
    */
-  const handleClose = async (buttonType: ButtonType) => {
+  const handleClose = async (ModalButtonType: ModalButtonType) => {
     // Don't close if no handler
     if (!onClose) {
       return;
@@ -340,7 +306,7 @@ const Modal: (
 
     // Call the handler after the modal has animated out
     await waitMs(MS_TO_ANIMATE);
-    onClose(buttonType);
+    onClose(ModalButtonType);
   };
 
   /*------------------------------------------------------------------------*/
@@ -352,34 +318,36 @@ const Modal: (
   /*----------------------------------------*/
 
   // Get list of buttons for this modal type
-  const buttonTypes: ButtonType[] = modalTypeToButtonTypes[type] ?? [];
+  const ModalButtonTypes: ModalButtonType[] = modalTypeToModalButtonTypes[type] ?? [];
 
   // Create buttons
-  const buttons = buttonTypes.map((buttonType: ButtonType, i) => {
+  const buttons = ModalButtonTypes.map((ModalButtonType: ModalButtonType, i) => {
     // Get default style
     let {
       label,
       variant,
-    } = buttonTypeToLabelAndVariant[buttonType];
+    } = ModalButtonTypeToLabelAndVariant[ModalButtonType];
 
     // Override with customizations
-    if (props[`${buttonType}Label`]) {
-      label = props[`${buttonType}Label`];
+    const newLabel = props[`${ModalButtonType}Label`];
+    if (newLabel) {
+      label = newLabel;
     }
-    if (props[`${buttonType}Variant`]) {
-      variant = props[`${buttonType}Variant`];
+    const newVariant = props[`${ModalButtonType}Variant`];
+    if (newVariant) {
+      variant = newVariant;
     }
 
     // Check if this button is last
-    const last = (i === buttonTypes.length - 1);
+    const last = (i === ModalButtonTypes.length - 1);
 
     // Create the button
     return (
       <button
         type="button"
-        className={`Modal-${buttonType}-button btn btn-${variant} ${last ? '' : 'mr-1'}`}
+        className={`Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'mr-1'}`}
         onClick={() => {
-          handleClose(buttonType);
+          handleClose(ModalButtonType);
         }}
       >
         {label}
@@ -404,9 +372,17 @@ const Modal: (
       show={visible}
       size={size !== ModalSize.Medium ? size : undefined}
       onHide={() => {
-        handleClose(ButtonType.Cancel);
+        if (!dontAllowBackdropExit) {
+          handleClose(ModalButtonType.Cancel);
+        }
+      }}
+      style={{
+        zIndex: (
+          onTopOfOtherModals
+            ? 6000000000
+            : 5000000000
+        ),
       }}
-      style={{ zIndex: 5000000000 }}
       backdropClassName="Modal-backdrop"
       centered
     >
@@ -438,10 +414,4 @@ const Modal: (
 /*                                 Wrap Up                                */
 /*------------------------------------------------------------------------*/
 
-// Add enums
-Modal.ModalType = ModalType;
-Modal.ModalSize = ModalSize;
-Modal.ButtonType = ButtonType;
-Modal.Variant = Variant;
-
 export default Modal;

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/abbreviate.tsx

@@ -21,3 +21,5 @@ const abbreviate = (text: string, maxChars: number): string => {
   );
   return `${shortenedText}...`;
 };
+
+export default abbreviate;

package/src/helpers/padDecimalZeros.tsx

@@ -9,7 +9,7 @@
 const padDecimalZeros = (num: number, numDigits: number): string => {
   // Skip if nothing to do
   if (numDigits < 1) {
-    return;
+    return String(num);
   }
 
   // Convert to string

package/src/index.ts

@@ -0,0 +1,61 @@
+// Import components
+import AppWrapper, { alert, confirm, showFatalError } from './components/AppWrapper';
+import LoadingSpinner from './components/LoadingSpinner';
+import ErrorBox from './components/ErrorBox';
+import Modal from './components/Modal';
+import TabBox from './components/TabBox';
+
+// Import errors
+import ErrorWithCode from './errors/ErrorWithCode';
+
+// Import helpers
+import abbreviate from './helpers/abbreviate';
+import avg from './helpers/avg';
+import ceilToNumDecimals from './helpers/ceilToNumDecimals';
+import floorToNumDecimals from './helpers/floorToNumDecimals';
+import forceNumIntoBounds from './helpers/forceNumIntoBounds';
+import padDecimalZeros from './helpers/padDecimalZeros';
+import padZerosLeft from './helpers/padZerosLeft';
+import roundToNumDecimals from './helpers/roundToNumDecimals';
+import sum from './helpers/sum';
+import waitMs from './helpers/waitMs';
+
+// Import types
+import ModalButtonType from './types/ModalButtonType';
+import ModalSize from './types/ModalSize';
+import ModalType from './types/ModalType';
+import ReactKitErrorCode from './types/ReactKitErrorCode';
+import Variant from './types/Variant';
+
+// Export each item
+export {
+  // Components
+  AppWrapper,
+  LoadingSpinner,
+  ErrorBox,
+  Modal,
+  TabBox,
+  // Global functions
+  alert,
+  confirm,
+  showFatalError,
+  // Errors
+  ErrorWithCode,
+  // Helpers
+  abbreviate,
+  avg,
+  ceilToNumDecimals,
+  floorToNumDecimals,
+  forceNumIntoBounds,
+  padDecimalZeros,
+  padZerosLeft,
+  roundToNumDecimals,
+  sum,
+  waitMs,
+  // Types
+  ModalButtonType,
+  ModalSize,
+  ModalType,
+  ReactKitErrorCode,
+  Variant,
+};

package/src/types/ModalButtonType.tsx

@@ -0,0 +1,18 @@
+/**
+ * Types of buttons in the modal
+ * @author Gabe Abrams
+ */
+enum ModalButtonType {
+  Okay = 'okay',
+  Cancel = 'cancel',
+  Yes = 'yes',
+  No = 'no',
+  Abandon = 'abandon',
+  GoBack = 'goBack',
+  Continue = 'continue',
+  ImSure = 'imSure',
+  Delete = 'delete',
+  Confirm = 'confirm',
+}
+
+export default ModalButtonType;

package/src/types/ModalSize.tsx

@@ -0,0 +1,12 @@
+/**
+ * Modal sizes
+ * @author Gabe Abrams
+ */
+enum ModalSize {
+  Small = 'sm',
+  Medium = 'md',
+  Large = 'lg',
+  ExtraLarge = 'xl',
+}
+
+export default ModalSize;

package/src/types/ModalType.tsx

@@ -0,0 +1,17 @@
+/**
+ * Types of modals
+ * @author Gabe Abrams
+ */
+enum ModalType {
+  Okay = 'okay', // [Okay]
+  OkayCancel = 'okay-cancel', // [Okay] [Cancel]
+  YesNo = 'yes-no', // [Yes] [No]
+  YesNoCancel = 'yes-no-cancel', // [Yes] [No] [Cancel]
+  AbandonGoBack = 'abandon-goBack', // [Abandon Changes] [Go Back]
+  ImSureCancel = 'imSure-cancel', // [I am sure] [Cancel]
+  DeleteCancel = 'delete-cancel', // [Yes, Delete] [Cancel]
+  ConfirmCancel = 'confirm-cancel', // [Confirm] [Cancel]
+  NoButtons = '-', // No buttons
+}
+
+export default ModalType;

package/tsconfig.json

@@ -1,24 +1,21 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
     "esModuleInterop": true,
-    "noImplicitAny": true,
-    "noEmitOnError": true,
-    "removeComments": false,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "module": "ESNext",
     "declaration": true,
+    "declarationDir": "types",
     "sourceMap": true,
-    "target": "es5",
-    "jsx": "react-jsx",
-    "lib": [
-      "es2017",
-      "dom"
-    ],
-    "outDir": "./lib"
+    "outDir": "./lib",
+    "moduleResolution": "node",
+    "emitDeclarationOnly": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
   },
-  "include": [
-    "./src"
-  ],
-  "ts-node": {
-    "files": true
-  }
+  "exclude": [
+    "lib",
+    "node_modules"
+  ]
 }

package/lib/components/AppWrapper.d.ts

@@ -1,20 +0,0 @@
-/**
- * A wrapper for the entire React app that adds global functionality like
- *   handling for fatal error messages
- * @author Gabe Abrams
- */
-import React from 'react';
-declare type Props = {
-    children: React.ReactNode;
-    dark?: boolean;
-    sessionExpiredMessage?: string;
-};
-/**
- * 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;
-declare const AppWrapper: (props: Props) => React.ReactElement;
-export default AppWrapper;