dce-reactkit 2.0.11 → 3.0.0-beta.2

package/rollup.config.js

@@ -0,0 +1,42 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+
+const packageJson = require("./package.json");
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+    ],
+    external: [
+      ...Object.keys(packageJson.dependencies || {}),
+      ...Object.keys(packageJson.peerDependencies || {}),
+    ],
+  },
+  {
+    input: "dist/esm/types/index.d.ts",
+    output: [{ file: "dist/index.d.ts", format: "esm" }],
+    plugins: [dts()],
+    external: [
+      ...Object.keys(packageJson.dependencies || {}),
+      ...Object.keys(packageJson.peerDependencies || {}),
+    ],
+  },
+];

package/src/components/AppWrapper.tsx

@@ -5,16 +5,15 @@
  */
 
 // Import React
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
 // Import shared components
 import ErrorBox from './ErrorBox';
 
-// Import helpers
-import { setSessionExpiryHandler } from '../helpers/visitServerEndpoint';
-
 // Import shared types
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
+import ModalButtonType from '../types/ModalButtonType';
+import ModalType from '../types/ModalType';
 
 // Import shared components
 import Modal from './Modal';
@@ -53,17 +52,18 @@ let onAlertClosed: () => void;
  * @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) => {
+export const alert = async (title: string, text: string): Promise<undefined> => {
   // Fallback if alert not available
   if (!setAlertInfo) {
-    return window.alert(`${title}\n\n${text}`);
+    window.alert(`${title}\n\n${text}`);
+    return undefined;
   }
 
   // Return promise that resolves when alert is closed
   return new Promise((resolve) => {
     // Setup handler
     onAlertClosed = () => {
-      resolve(null);
+      resolve(undefined);
     };
 
     // Show the alert
@@ -131,7 +131,7 @@ let setFatalErrorTitle: (title: string) => void;
 export const showFatalError = (
   error: any,
   errorTitle: string = 'An Error Occurred',
-) => {
+): undefined => {
   // Determine message and code
   const message: string = (
     typeof error === 'string'
@@ -146,23 +146,42 @@ export const showFatalError = (
 
   // Handle case where app hasn't loaded
   if (!setFatalErrorMessage || !setFatalErrorCode) {
-    return alert(
+    alert(
       errorTitle,
       `${message} (code: ${code}). Please contact support.`,
     );
+    return undefined;
   }
 
   // Use setters
   setFatalErrorMessage(message);
   setFatalErrorCode(code);
   setFatalErrorTitle(errorTitle);
+
+  return undefined;
+};
+
+/*----------------------------------------*/
+/*             Session Expired            */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setSessionHasExpired: (isExpired: boolean) => void;
+
+/**
+ * Show the "session expired" message
+ * @author Gabe Abrams
+ */
+export const showSessionExpiredMessage = (): undefined => {
+  setSessionHasExpired(true);
+  return undefined;
 };
 
 /*------------------------------------------------------------------------*/
 /*                                Component                               */
 /*------------------------------------------------------------------------*/
 
-const AppWrapper = (props: Props): React.ReactElement => {
+const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   /*------------------------------------------------------------------------*/
   /*                                  Setup                                 */
   /*------------------------------------------------------------------------*/
@@ -217,27 +236,9 @@ const AppWrapper = (props: Props): React.ReactElement => {
   // Session expired
   const [
     sessionHasExpired,
-    setSessionHasExpired,
+    setSessionHasExpiredInner,
   ] = useState<boolean>(false);
-
-  /*------------------------------------------------------------------------*/
-  /*                           Lifecycle Functions                          */
-  /*------------------------------------------------------------------------*/
-
-  /**
-   * Mount
-   * @author Gabe Abrams
-   */
-  useEffect(
-    () => {
-      // Add session expired handler
-      setSessionExpiryHandler(() => {
-        // Session expired!
-        setSessionHasExpired(true);
-      });
-    },
-    [],
-  );
+  setSessionHasExpired = setSessionHasExpiredInner;
 
   /*------------------------------------------------------------------------*/
   /*                                 Render                                 */
@@ -256,7 +257,7 @@ const AppWrapper = (props: Props): React.ReactElement => {
     modal = (
       <Modal
         title={alertInfo.title}
-        type={Modal.ModalType.Okay}
+        type={ModalType.Okay}
         onClose={() => {
           // Alert closed
           if (onAlertClosed) {
@@ -276,10 +277,10 @@ const AppWrapper = (props: Props): React.ReactElement => {
     modal = (
       <Modal
         title={confirmInfo.title}
-        type={Modal.ModalType.OkayCancel}
+        type={ModalType.OkayCancel}
         onClose={(buttonType) => {
           if (onConfirmClosed) {
-            onConfirmClosed(buttonType === Modal.ButtonType.Okay);
+            onConfirmClosed(buttonType === ModalButtonType.Okay);
           }
         }}
         dontAllowBackdropExit
@@ -303,8 +304,8 @@ const AppWrapper = (props: Props): React.ReactElement => {
     const error = (
       sessionHasExpired
         ? new ErrorWithCode(
-          fatalErrorMessage,
-          fatalErrorCode,
+          (fatalErrorMessage ?? 'An unknown error has occurred. Please contact support.'),
+          (fatalErrorCode ?? ReactKitErrorCode.NoCode),
         )
         : new ErrorWithCode(
           sessionExpiredMessage,
@@ -319,7 +320,7 @@ const AppWrapper = (props: Props): React.ReactElement => {
           display: 'block',
           width: '100vw',
           minHeight: '100vh',
-          paddingTop: '10rem',
+          paddingTop: '2rem',
           backgroundColor: (
             dark
               ? '#222'

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,7 @@ 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
@@ -259,15 +227,7 @@ type Props = {
 /*                                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                                 */
   /*------------------------------------------------------------------------*/
@@ -322,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;
@@ -346,7 +306,7 @@ const Modal: (
 
     // Call the handler after the modal has animated out
     await waitMs(MS_TO_ANIMATE);
-    onClose(buttonType);
+    onClose(ModalButtonType);
   };
 
   /*------------------------------------------------------------------------*/
@@ -358,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}
@@ -411,7 +373,7 @@ const Modal: (
       size={size !== ModalSize.Medium ? size : undefined}
       onHide={() => {
         if (!dontAllowBackdropExit) {
-          handleClose(ButtonType.Cancel);
+          handleClose(ModalButtonType.Cancel);
         }
       }}
       style={{
@@ -452,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/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,23 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "target": "es2016",
     "esModuleInterop": true,
-    "noImplicitAny": true,
-    "noEmitOnError": true,
-    "removeComments": false,
+    "forceConsistentCasingInFileNames": true,
+    "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": "dist",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "emitDeclarationOnly": true
   },
+
   "include": [
-    "./src"
-  ],
-  "ts-node": {
-    "files": true
-  }
-}
+    "./src/**/*"
+  ]
+}