dce-reactkit 1.0.20 → 2.0.2

package/src/components/LoadingSpinner.tsx

@@ -0,0 +1,105 @@
+/**
+ * Loading spinner/indicator
+ * @author Gabe Abrams
+ */
+
+// Import FontAwesome Icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+/* Blips */
+.LoadingSpinner-blip-1,
+.LoadingSpinner-blip-2,
+.LoadingSpinner-blip-3,
+.LoadingSpinner-blip-4 {
+  font-size: 25px;
+  opacity: 0.6;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+/* First Blip */
+.LoadingSpinner-blip-1 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+}
+
+/* Second Blip */
+.LoadingSpinner-blip-2 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+
+/* Third Blip */
+.LoadingSpinner-blip-3 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  animation-delay: 0.2s;
+}
+
+/* Fourth Blip */
+.LoadingSpinner-blip-4 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  animation-delay: 0.3s;
+}
+
+/* Pop Animation for Each Blip */
+@keyframes LoadingSpinner-pop-animation {
+  0%  {
+    transform: scale(1.0);
+  }
+  10% {
+    transform: scale(1.5);
+  }
+  30% {
+    transform: scale(1.0);
+  }
+  100% {
+    transform: scale(1.0);
+  }
+}
+`;
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const LoadingSpinner = () => {
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  // Add all four blips to a container
+  return (
+    <div className="text-center LoadingSpinner LoadingSpinner-container">
+      <style>{style}</style>
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-1 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-2 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-3 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-4"
+      />
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default LoadingSpinner;

package/src/components/Modal.tsx

@@ -0,0 +1,447 @@
+/**
+ * A generic popup modal
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React, { useState, useEffect } from 'react';
+
+// Import other components
+import BootstrapModal from 'react-bootstrap/Modal';
+import waitMs from '../helpers/waitMs';
+
+// Import types
+import Variant from '../types/Variant';
+
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+/* More opaque backdrop */
+.Modal-backdrop {
+  background-color: black !important;
+  opacity: 0.8 !important;
+  z-index: 10000000 !important;
+}
+
+/* Customize the modal header and body */
+.modal-header {
+  /* Dark theme */
+  background-color: #222 !important;
+  color: white !important;
+
+  /* Border */
+  border: 1px solid #545454 !important;
+}
+.modal-body {
+  /* Dark theme */
+  background-color: #222 !important;
+  color: white !important;
+
+  /* Border */
+  border-top: 0 !important;
+  border-left: 1px solid #545454 !important;
+  border-bottom: 1px solid #545454 !important;
+  border-right: 1px solid #545454 !important;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+/* Create our own animation */
+.modal-content {
+  animation-name: Modal-drop-in;
+  animation-duration: 0.4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-out;
+}
+@keyframes Modal-drop-in {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+`;
+
+/*------------------------------------------------------------------------*/
+/*                                Constants                               */
+/*------------------------------------------------------------------------*/
+
+// Constants
+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[]
+} = {
+  [ModalType.Okay]: [
+    ButtonType.Okay,
+  ],
+  [ModalType.OkayCancel]: [
+    ButtonType.Okay,
+    ButtonType.Cancel,
+  ],
+  [ModalType.YesNo]: [
+    ButtonType.Yes,
+    ButtonType.No,
+  ],
+  [ModalType.YesNoCancel]: [
+    ButtonType.Yes,
+    ButtonType.No,
+    ButtonType.Cancel,
+  ],
+  [ModalType.AbandonGoBack]: [
+    ButtonType.Abandon,
+    ButtonType.GoBack,
+  ],
+  [ModalType.ImSureCancel]: [
+    ButtonType.ImSure,
+    ButtonType.Cancel,
+  ],
+  [ModalType.DeleteCancel]: [
+    ButtonType.Delete,
+    ButtonType.Cancel,
+  ],
+  [ModalType.ConfirmCancel]: [
+    ButtonType.Confirm,
+    ButtonType.Cancel,
+  ],
+};
+
+// Button type styling and labels
+const buttonTypeToLabelAndVariant = {
+  [ButtonType.Okay]: {
+    label: 'Okay',
+    variant: Variant.Dark,
+  },
+  [ButtonType.Cancel]: {
+    label: 'Cancel',
+    variant: Variant.Secondary,
+  },
+  [ButtonType.Yes]: {
+    label: 'Yes',
+    variant: Variant.Dark,
+  },
+  [ButtonType.No]: {
+    label: 'No',
+    variant: Variant.Secondary,
+  },
+  [ButtonType.Abandon]: {
+    label: 'Abandon Changes',
+    variant: Variant.Warning,
+  },
+  [ButtonType.GoBack]: {
+    label: 'Go Back',
+    variant: Variant.Secondary,
+  },
+  [ButtonType.Continue]: {
+    label: 'Continue',
+    variant: Variant.Dark,
+  },
+  [ButtonType.ImSure]: {
+    label: 'I am sure',
+    variant: Variant.Warning,
+  },
+  [ButtonType.Delete]: {
+    label: 'Yes, Delete',
+    variant: Variant.Danger,
+  },
+  [ButtonType.Confirm]: {
+    label: 'Confirm',
+    variant: Variant.Dark,
+  },
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Type of the modal
+  type?: ModalType,
+  // Size of the modal
+  size?: ModalSize,
+  // Title of the modal (if excluded, no header)
+  title?: React.ReactNode,
+  // The body of the modal
+  children?: React.ReactNode,
+  // Handler to call when modal is closed (if excluded, not closable)
+  onClose?: (type: ButtonType) => void,
+  // Custom label for "okay" button
+  okayLabel?: string,
+  // Custom variant for "okay" button
+  okayVariant?: Variant,
+  // Custom label for "cancel" button
+  cancelLabel?: string,
+  // Custom variant for "cancel" button
+  cancelVariant?: Variant,
+  // Custom label for "yes" button
+  yesLabel?: string,
+  // Custom variant for "yes" button
+  yesVariant?: Variant,
+  // Custom label for "no" button
+  noLabel?: string,
+  // Custom variant for "no" button
+  noVariant?: Variant,
+  // Custom label for "abandon" button
+  abandonLabel?: string,
+  // Custom variant for "abandon" button
+  abandonVariant?: Variant,
+  // Custom label for "goBack" button
+  goBackLabel?: string,
+  // Custom variant for "goBack" button
+  goBackVariant?: Variant,
+  // Custom label for "continue" button
+  continueLabel?: string,
+  // Custom variant for "continue" button
+  continueVariant?: Variant,
+  // Custom label for "imSure" button
+  imSureLabel?: string,
+  // Custom variant for "imSure" button
+  imSureVariant?: Variant,
+  // Custom label for "delete" button
+  deleteLabel?: string,
+  // Custom variant for "delete" button
+  deleteVariant?: Variant,
+  // Custom label for "confirm" button
+  confirmLabel?: string,
+  // Custom variant for "confirm" button
+  confirmVariant?: Variant,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const Modal: (
+  React.FC<Props>
+  & {
+    ModalType: typeof ModalType,
+    ModalSize: typeof ModalSize,
+    ButtonType: typeof ButtonType,
+    Variant: typeof Variant,
+  }
+) = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    type = ModalType.NoButtons,
+    size = ModalSize.Large,
+    title,
+    children,
+    onClose,
+  } = props;
+
+  /* -------------- State ------------- */
+
+  // If true, the modal is shown
+  const [visible, setVisible] = useState(false);
+
+  // True if currently animating in
+  const [animatingIn, setAnimatingIn] = useState(false);
+
+  /*------------------------------------------------------------------------*/
+  /*                           Lifecycle Functions                          */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Mount
+   * @author Gabe Abrams
+   */
+  useEffect(
+    () => {
+      (async () => {
+        // Start the component animating in
+        await waitMs(MS_ANIMATE_IN_DELAY);
+        setAnimatingIn(true);
+
+        // Wait and then set visible to true
+        await waitMs(MS_TO_ANIMATE);
+        setVisible(true);
+      })();
+    },
+    [],
+  );
+
+  /*------------------------------------------------------------------------*/
+  /*                           Component Functions                          */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Handles the closing of the modal
+   * @author Gabe Abrams
+   * @param buttonType the button that was clicked when closing the
+   *   modal
+   */
+  const handleClose = async (buttonType: ButtonType) => {
+    // Don't close if no handler
+    if (!onClose) {
+      return;
+    }
+
+    // Don't close if animating in
+    if (animatingIn) {
+      return;
+    }
+
+    // Don't close if already closed
+    if (!visible) {
+      return;
+    }
+
+    // Update the state
+    setVisible(false);
+
+    // Call the handler after the modal has animated out
+    await waitMs(MS_TO_ANIMATE);
+    onClose(buttonType);
+  };
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Footer                 */
+  /*----------------------------------------*/
+
+  // Get list of buttons for this modal type
+  const buttonTypes: ButtonType[] = modalTypeToButtonTypes[type] ?? [];
+
+  // Create buttons
+  const buttons = buttonTypes.map((buttonType: ButtonType, i) => {
+    // Get default style
+    let {
+      label,
+      variant,
+    } = buttonTypeToLabelAndVariant[buttonType];
+
+    // Override with customizations
+    if (props[`${buttonType}Label`]) {
+      label = props[`${buttonType}Label`];
+    }
+    if (props[`${buttonType}Variant`]) {
+      variant = props[`${buttonType}Variant`];
+    }
+
+    // Check if this button is last
+    const last = (i === buttonTypes.length - 1);
+
+    // Create the button
+    return (
+      <button
+        type="button"
+        className={`Modal-${buttonType}-button btn btn-${variant} ${last ? '' : 'mr-1'}`}
+        onClick={() => {
+          handleClose(buttonType);
+        }}
+      >
+        {label}
+      </button>
+    );
+  });
+
+  // Put all buttons in a footer
+  const footer = (
+    (buttons && buttons.length)
+      ? (
+        <div>
+          {buttons}
+        </div>
+      )
+      : undefined
+  );
+
+  // Render the modal
+  return (
+    <BootstrapModal
+      show={visible}
+      size={size !== ModalSize.Medium ? size : undefined}
+      onHide={() => {
+        handleClose(ButtonType.Cancel);
+      }}
+      style={{ zIndex: 5000000000 }}
+      backdropClassName="Modal-backdrop"
+      centered
+    >
+      <style>{style}</style>
+      {title && (
+        <BootstrapModal.Header
+          closeButton={!!onClose}
+        >
+          <BootstrapModal.Title>
+            {title}
+          </BootstrapModal.Title>
+        </BootstrapModal.Header>
+      )}
+      {children && (
+        <BootstrapModal.Body>
+          {children}
+        </BootstrapModal.Body>
+      )}
+      {footer && (
+        <BootstrapModal.Footer>
+          {footer}
+        </BootstrapModal.Footer>
+      )}
+    </BootstrapModal>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Add enums
+Modal.ModalType = ModalType;
+Modal.ModalSize = ModalSize;
+Modal.ButtonType = ButtonType;
+Modal.Variant = Variant;
+
+export default Modal;

package/src/errors/ErrorWithCode.tsx

@@ -0,0 +1,15 @@
+/**
+ * An error with a code
+ * @author Gabe Abrams
+ */
+class ErrorWithCode extends Error {
+  code: string;
+
+  constructor(message: string, code: string) {
+    super(message);
+    this.name = 'ErrorWithCode';
+    this.code = code;
+  }
+}
+
+export default ErrorWithCode;

package/src/helpers/abbreviate.tsx

@@ -0,0 +1,23 @@
+/**
+ * Shorten text so it fits into a certain number of chars
+ * @author Gabe Abrams
+ * @param text the text to abbreviate
+ * @param maxChars the maximum number of chars to include
+ * @returns abbreviated text with length no greater than maxChars
+ *   (including ellipses if applicable)
+ */
+const abbreviate = (text: string, maxChars: number): string => {
+  // Check if already short enough
+  if (text.trim().length < maxChars) {
+    return text.trim();
+  }
+
+  // Abbreviate
+  const shortenedText = (
+    text
+      .trim()
+      .substring(0, maxChars - 3)
+      .trim()
+  );
+  return `${shortenedText}...`;
+};

package/src/helpers/avg.tsx

@@ -0,0 +1,22 @@
+import sum from './sum';
+
+/**
+ * Get the average of a set of numbers
+ * @author Gabe Abrams
+ * @param nums the numbers to average
+ * @returns average value or 0 if no numbers
+ */
+const avg = (nums: number[]) => {
+  // Handle empty array case
+  if (nums.length === 0) {
+    return 0;
+  }
+
+  // Get the total value
+  const total = sum(nums);
+
+  // Get average
+  return (total / nums.length);
+};
+
+export default avg;

package/src/helpers/ceilToNumDecimals.tsx

@@ -0,0 +1,13 @@
+/**
+ * Round a number (ceiling) to a certain number of decimals
+ * @author Gabe Abrams
+ * @param num the number to round
+ * @param numDecimals the number of decimals to round to
+ * @returns rounded number
+ */
+const ceilToNumDecimals = (num: number, numDecimals: number): number => {
+  const rounder = 10 ** numDecimals;
+  return (Math.ceil(num * rounder) / rounder);
+};
+
+export default ceilToNumDecimals;

package/src/helpers/floorToNumDecimals.tsx

@@ -0,0 +1,13 @@
+/**
+ * Round a number (floor) to a certain number of decimals
+ * @author Gabe Abrams
+ * @param num the number to round
+ * @param numDecimals the number of decimals to round to
+ * @returns rounded number
+ */
+const floorToNumDecimals = (num: number, numDecimals: number): number => {
+  const rounder = 10 ** numDecimals;
+  return (Math.floor(num * rounder) / rounder);
+};
+
+export default floorToNumDecimals;

package/src/helpers/forceNumIntoBounds.tsx

@@ -0,0 +1,19 @@
+/**
+ * Force a number to stay within specific bounds
+ * @author Gabe Abrams
+ * @param num the number to move into the bounds
+ * @param min the minimum number in the bound
+ * @param max the maximum number in the bound
+ * @returns bounded number
+ */
+const forceNumIntoBounds = (num: number, min: number, max: number): number => {
+  return Math.max(
+    min,
+    Math.min(
+      max,
+      num,
+    ),
+  );
+};
+
+export default forceNumIntoBounds;

package/src/helpers/padDecimalZeros.tsx

@@ -0,0 +1,32 @@
+/**
+ * Pad a number's decimal with zeros on the right
+ *   (e.g. 5.2 becomes 5.20 with 2 digit padding)
+ * @author Gabe Abrams
+ * @param num the number to pad
+ * @param numDigits the minimum number of digits after the decimal
+ * @returns padded number
+ */
+const padDecimalZeros = (num: number, numDigits: number): string => {
+  // Skip if nothing to do
+  if (numDigits < 1) {
+    return;
+  }
+
+  // Convert to string
+  let out = String(num);
+
+  // Add a decimal point if there isn't one
+  if (!out.includes('.')) {
+    out += '.';
+  }
+
+  // Add zeros
+  while (out.split('.')[1].length < numDigits) {
+    out = `${out}0`;
+  }
+
+  // Return
+  return out;
+};
+
+export default padDecimalZeros;