dce-reactkit 3.0.0-beta.1 → 3.0.0-beta.2

package/src/components/Modal.tsx

@@ -0,0 +1,417 @@
+/**
+ * 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';
+import ModalButtonType from '../types/ModalButtonType';
+import ModalSize from '../types/ModalSize';
+import ModalType from '../types/ModalType';
+
+/*------------------------------------------------------------------------*/
+/*                                  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 type to list of buttons
+const modalTypeToModalButtonTypes: {
+  [k: string]: ModalButtonType[]
+} = {
+  [ModalType.Okay]: [
+    ModalButtonType.Okay,
+  ],
+  [ModalType.OkayCancel]: [
+    ModalButtonType.Okay,
+    ModalButtonType.Cancel,
+  ],
+  [ModalType.YesNo]: [
+    ModalButtonType.Yes,
+    ModalButtonType.No,
+  ],
+  [ModalType.YesNoCancel]: [
+    ModalButtonType.Yes,
+    ModalButtonType.No,
+    ModalButtonType.Cancel,
+  ],
+  [ModalType.AbandonGoBack]: [
+    ModalButtonType.Abandon,
+    ModalButtonType.GoBack,
+  ],
+  [ModalType.ImSureCancel]: [
+    ModalButtonType.ImSure,
+    ModalButtonType.Cancel,
+  ],
+  [ModalType.DeleteCancel]: [
+    ModalButtonType.Delete,
+    ModalButtonType.Cancel,
+  ],
+  [ModalType.ConfirmCancel]: [
+    ModalButtonType.Confirm,
+    ModalButtonType.Cancel,
+  ],
+};
+
+// Button type styling and labels
+const ModalButtonTypeToLabelAndVariant = {
+  [ModalButtonType.Okay]: {
+    label: 'Okay',
+    variant: Variant.Dark,
+  },
+  [ModalButtonType.Cancel]: {
+    label: 'Cancel',
+    variant: Variant.Secondary,
+  },
+  [ModalButtonType.Yes]: {
+    label: 'Yes',
+    variant: Variant.Dark,
+  },
+  [ModalButtonType.No]: {
+    label: 'No',
+    variant: Variant.Secondary,
+  },
+  [ModalButtonType.Abandon]: {
+    label: 'Abandon Changes',
+    variant: Variant.Warning,
+  },
+  [ModalButtonType.GoBack]: {
+    label: 'Go Back',
+    variant: Variant.Secondary,
+  },
+  [ModalButtonType.Continue]: {
+    label: 'Continue',
+    variant: Variant.Dark,
+  },
+  [ModalButtonType.ImSure]: {
+    label: 'I am sure',
+    variant: Variant.Warning,
+  },
+  [ModalButtonType.Delete]: {
+    label: 'Yes, Delete',
+    variant: Variant.Danger,
+  },
+  [ModalButtonType.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: 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
+  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,
+  // True if modal should be on top of other modals
+  onTopOfOtherModals?: boolean,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const Modal: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    type = ModalType.NoButtons,
+    size = ModalSize.Large,
+    title,
+    children,
+    onClose,
+    dontAllowBackdropExit,
+    onTopOfOtherModals,
+  } = 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 ModalButtonType the button that was clicked when closing the
+   *   modal
+   */
+  const handleClose = async (ModalButtonType: ModalButtonType) => {
+    // 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(ModalButtonType);
+  };
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Footer                 */
+  /*----------------------------------------*/
+
+  // Get list of buttons for this modal type
+  const ModalButtonTypes: ModalButtonType[] = modalTypeToModalButtonTypes[type] ?? [];
+
+  // Create buttons
+  const buttons = ModalButtonTypes.map((ModalButtonType: ModalButtonType, i) => {
+    // Get default style
+    let {
+      label,
+      variant,
+    } = ModalButtonTypeToLabelAndVariant[ModalButtonType];
+
+    // Override with customizations
+    const newLabel = props[`${ModalButtonType}Label`];
+    if (newLabel) {
+      label = newLabel;
+    }
+    const newVariant = props[`${ModalButtonType}Variant`];
+    if (newVariant) {
+      variant = newVariant;
+    }
+
+    // Check if this button is last
+    const last = (i === ModalButtonTypes.length - 1);
+
+    // Create the button
+    return (
+      <button
+        type="button"
+        className={`Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'mr-1'}`}
+        onClick={() => {
+          handleClose(ModalButtonType);
+        }}
+      >
+        {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={() => {
+        if (!dontAllowBackdropExit) {
+          handleClose(ModalButtonType.Cancel);
+        }
+      }}
+      style={{
+        zIndex: (
+          onTopOfOtherModals
+            ? 6000000000
+            : 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                                */
+/*------------------------------------------------------------------------*/
+
+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/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,25 @@
+/**
+ * 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}...`;
+};
+
+export default abbreviate;

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 String(num);
+  }
+
+  // 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;