dce-reactkit 2.0.12 → 3.0.0-beta.1

package/src/components/Modal.tsx

@@ -1,461 +0,0 @@
-/**
- * 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,
-  // 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>
-  & {
-    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,
-    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 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={() => {
-        if (!dontAllowBackdropExit) {
-          handleClose(ButtonType.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                                */
-/*------------------------------------------------------------------------*/
-
-// Add enums
-Modal.ModalType = ModalType;
-Modal.ModalSize = ModalSize;
-Modal.ButtonType = ButtonType;
-Modal.Variant = Variant;
-
-export default Modal;

package/src/components/TabBox.tsx

@@ -1,136 +0,0 @@
-/**
- * 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

@@ -1,15 +0,0 @@
-/**
- * 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

@@ -1,23 +0,0 @@
-/**
- * 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/alert.tsx

@@ -1,5 +0,0 @@
-import { _alert } from '../components/AppWrapper';
-
-const alert = _alert;
-
-export default alert;

package/src/helpers/avg.tsx

@@ -1,22 +0,0 @@
-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/confirm.tsx

@@ -1,5 +0,0 @@
-import { _confirm } from '../components/AppWrapper';
-
-const confirm = _confirm;
-
-export default confirm;