dce-reactkit 3.5.3 → 3.5.5

package/dist/esm/types/components/AppWrapper.d.ts

@@ -44,6 +44,11 @@ export declare const confirm: (title: string, text: string, opts?: {
  * @param [errorTitle] title of the error box
  */
 export declare const showFatalError: (error: any, errorTitle?: string) => undefined;
+/**
+ * Add a handler for when a fatal error occurs
+ * @author Gabe Abrams
+ */
+export declare const addFatalErrorHandler: (handler: () => void) => void;
 /**
  * Show the "session expired" message
  * @author Gabe Abrams

package/dist/esm/types/components/ToggleSwitch.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A toggle switch that toggles on or off
+ * @author Alessandra De Lucas
+ * @author Gabe Abrams
+ */
+import React from 'react';
+import Variant from '../types/Variant';
+type Props = {
+    isOn: boolean;
+    /**
+     * A handler to call when the switch is toggled
+     * @param isOn Updated value for isOn
+     */
+    onToggle: (isOn: boolean) => void;
+    id?: string;
+    description: string;
+    backgroundVariantWhenOn?: Variant;
+};
+declare const ToggleSwitch: React.FC<Props>;
+export default ToggleSwitch;

package/dist/esm/types/components/Tooltip.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Simple tooltip component
+ * @author Gabe Abrams
+ */
+import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+type Props = {
+    icon?: IconProp;
+    text: string;
+    children: React.ReactNode;
+    wide?: boolean;
+    thin?: boolean;
+};
+declare const Tooltip: React.FC<Props>;
+export default Tooltip;

package/dist/esm/types/index.d.ts

@@ -1,4 +1,4 @@
-import AppWrapper, { alert, confirm, showFatalError } from './components/AppWrapper';
+import AppWrapper, { alert, confirm, showFatalError, addFatalErrorHandler } from './components/AppWrapper';
 import LoadingSpinner from './components/LoadingSpinner';
 import ErrorBox from './components/ErrorBox';
 import Modal from './components/Modal';
@@ -17,6 +17,8 @@ import LogReviewer from './components/LogReviewer';
 import IntelliTable from './components/IntelliTable';
 import CSVDownloadButton from './components/CSVDownloadButton';
 import DBEntryManagerPanel from './components/DBEntryManagerPanel';
+import Tooltip from './components/Tooltip';
+import ToggleSwitch from './components/ToggleSwitch';
 import ErrorWithCode from './errors/ErrorWithCode';
 import MINUTE_IN_MS from './constants/MINUTE_IN_MS';
 import HOUR_IN_MS from './constants/HOUR_IN_MS';
@@ -79,4 +81,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
 import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
 import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
 import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, initClient, visitServerEndpoint, logClientEvent, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import express from 'express';
 
 /**
@@ -23,7 +24,7 @@ declare enum Variant {
  * @author Gabe Abrams
  */
 
-type Props$h = {
+type Props$j = {
     children: React.ReactNode;
     dark?: boolean;
 };
@@ -62,7 +63,12 @@ declare const confirm: (title: string, text: string, opts?: {
  * @param [errorTitle] title of the error box
  */
 declare const showFatalError: (error: any, errorTitle?: string) => undefined;
-declare const AppWrapper: React.FC<Props$h>;
+/**
+ * Add a handler for when a fatal error occurs
+ * @author Gabe Abrams
+ */
+declare const addFatalErrorHandler: (handler: () => void) => void;
+declare const AppWrapper: React.FC<Props$j>;
 
 /**
  * Loading spinner/indicator
@@ -75,12 +81,12 @@ declare const LoadingSpinner: () => JSX.Element;
  * @author Gabe Abrams
  */
 
-type Props$g = {
+type Props$i = {
     error: any;
     title?: string;
     onClose?: () => void;
 };
-declare const ErrorBox: React.FC<Props$g>;
+declare const ErrorBox: React.FC<Props$i>;
 
 /**
  * Types of buttons in the modal
@@ -131,7 +137,7 @@ declare enum ModalType {
  * @author Gabe Abrams
  */
 
-type Props$f = {
+type Props$h = {
     type?: ModalType;
     size?: ModalSize;
     title?: React.ReactNode;
@@ -160,27 +166,27 @@ type Props$f = {
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
 };
-declare const Modal: React.FC<Props$f>;
+declare const Modal: React.FC<Props$h>;
 
 /**
  * A box with a tab on the top that holds buttons and other content
  * @author Gabe Abrams
  */
 
-type Props$e = {
+type Props$g = {
     title: React.ReactNode;
     children: React.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };
-declare const TabBox: React.FC<Props$e>;
+declare const TabBox: React.FC<Props$g>;
 
 /**
  * A radio selection button
  * @author Gabe Abrams
  */
 
-type Props$d = {
+type Props$f = {
     text: string;
     onSelected: () => void;
     ariaLabel: string;
@@ -192,14 +198,14 @@ type Props$d = {
     unselectedVariant?: Variant;
     small?: boolean;
 };
-declare const RadioButton: React.FC<Props$d>;
+declare const RadioButton: React.FC<Props$f>;
 
 /**
  * A checkbox button
  * @author Gabe Abrams
  */
 
-type Props$c = {
+type Props$e = {
     text: string;
     onChanged: (checked: boolean) => void;
     ariaLabel: string;
@@ -213,28 +219,28 @@ type Props$c = {
     small?: boolean;
     dashed?: boolean;
 };
-declare const CheckboxButton: React.FC<Props$c>;
+declare const CheckboxButton: React.FC<Props$e>;
 
 /**
  * Input group with a title and space for buttons
  * @author Gabe Abrams
  */
 
-type Props$b = {
+type Props$d = {
     label: string;
     minLabelWidth?: string;
     children: React.ReactNode;
     className?: string;
     wrapButtonsAndAddGaps?: boolean;
 };
-declare const ButtonInputGroup: React.FC<Props$b>;
+declare const ButtonInputGroup: React.FC<Props$d>;
 
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
  */
 
-type Props$a = {
+type Props$c = {
     ariaLabel: string;
     name: string;
     month: number;
@@ -250,61 +256,61 @@ type Props$a = {
     numMonthsToShow?: number;
     chooseFromPast?: boolean;
 };
-declare const SimpleDateChooser: React.FC<Props$a>;
+declare const SimpleDateChooser: React.FC<Props$c>;
 
 /**
  * Drawer container
  * @author Gabe Abrams
  */
 
-type Props$9 = {
+type Props$b = {
     customBackgroundColor?: string;
     children: React.ReactNode;
 };
-declare const Drawer: React.FC<Props$9>;
+declare const Drawer: React.FC<Props$b>;
 
 /**
  * Success checkmark that pops into view
  * @author Gabe Abrams
  */
 
-type Props$8 = {
+type Props$a = {
     sizeRem?: number;
     circleVariant?: string;
     checkVariant?: string;
 };
-declare const PopSuccessMark: React.FC<Props$8>;
+declare const PopSuccessMark: React.FC<Props$a>;
 
 /**
  * Failure x mark that pops into view
  * @author Gabe Abrams
  */
 
-type Props$7 = {
+type Props$9 = {
     sizeRem?: number;
     circleVariant?: string;
     xVariant?: string;
 };
-declare const PopFailureMark: React.FC<Props$7>;
+declare const PopFailureMark: React.FC<Props$9>;
 
 /**
  * Failure pending that pops into view
  * @author Gabe Abrams
  */
 
-type Props$6 = {
+type Props$8 = {
     sizeRem?: number;
     circleVariant?: string;
     hourglassVariant?: string;
 };
-declare const PopPendingMark: React.FC<Props$6>;
+declare const PopPendingMark: React.FC<Props$8>;
 
 /**
  * Copiable text box
  * @author Gabe Abrams
  */
 
-type Props$5 = {
+type Props$7 = {
     text: string;
     maxTextWidthRem?: number;
     label?: string;
@@ -316,7 +322,7 @@ type Props$5 = {
     textAreaId?: string;
     copyButtonId?: string;
 };
-declare const CopiableBox: React.FC<Props$5>;
+declare const CopiableBox: React.FC<Props$7>;
 
 /**
  * An item that can be chosen (for use within ItemPicker)
@@ -339,7 +345,7 @@ type PickableItem = ({
  * @author Yuen Ler Chow
  */
 
-type Props$4 = {
+type Props$6 = {
     title: string;
     items: PickableItem[];
     /**
@@ -350,7 +356,7 @@ type Props$4 = {
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
 };
-declare const ItemPicker: React.FC<Props$4>;
+declare const ItemPicker: React.FC<Props$6>;
 
 /**
  * Type of the context map in a LogMetadata file
@@ -395,11 +401,11 @@ type LogMetadataType = {
  * @author Gabe Abrams
  */
 
-type Props$3 = {
+type Props$5 = {
     LogMetadata: LogMetadataType;
     onClose: () => void;
 };
-declare const LogReviewer: React.FC<Props$3>;
+declare const LogReviewer: React.FC<Props$5>;
 
 /**
  * Server-side API param types
@@ -434,7 +440,7 @@ type IntelliTableColumn = {
  * @author Gabe Abrams
  */
 
-type Props$2 = {
+type Props$4 = {
     title: string;
     id: string;
     data: {
@@ -444,14 +450,14 @@ type Props$2 = {
     columns: IntelliTableColumn[];
     csvName?: string;
 };
-declare const IntelliTable: React.FC<Props$2>;
+declare const IntelliTable: React.FC<Props$4>;
 
 /**
  * Button for downloading a csv file
  * @author Gabe Abrams
  */
 
-type Props$1 = {
+type Props$3 = {
     filename: string;
     csv: string;
     id?: string;
@@ -463,7 +469,7 @@ type Props$1 = {
     onClick?: () => void;
     children?: React.ReactNode;
 };
-declare const CSVDownloadButton: React.FC<Props$1>;
+declare const CSVDownloadButton: React.FC<Props$3>;
 
 /**
  * Generic type for an object
@@ -539,7 +545,7 @@ type DBEntryField = ({
  * @author Gabe Abrams
  */
 
-type Props = {
+type Props$2 = {
     entryFields: DBEntryField[];
     idPropName: string;
     titlePropName: string;
@@ -565,7 +571,40 @@ type Props = {
         [k: string]: any;
     };
 };
-declare const DBEntryManagerPanel: React.FC<Props>;
+declare const DBEntryManagerPanel: React.FC<Props$2>;
+
+/**
+ * Simple tooltip component
+ * @author Gabe Abrams
+ */
+
+type Props$1 = {
+    icon?: IconProp;
+    text: string;
+    children: React.ReactNode;
+    wide?: boolean;
+    thin?: boolean;
+};
+declare const Tooltip: React.FC<Props$1>;
+
+/**
+ * A toggle switch that toggles on or off
+ * @author Alessandra De Lucas
+ * @author Gabe Abrams
+ */
+
+type Props = {
+    isOn: boolean;
+    /**
+     * A handler to call when the switch is toggled
+     * @param isOn Updated value for isOn
+     */
+    onToggle: (isOn: boolean) => void;
+    id?: string;
+    description: string;
+    backgroundVariantWhenOn?: Variant;
+};
+declare const ToggleSwitch: React.FC<Props>;
 
 /**
  * An error with a code
@@ -1344,4 +1383,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-export { AppWrapper, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, addDBEditorEndpoints, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, initClient, initLogCollection, initServer, isMobileOrTablet, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
+export { AppWrapper, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, initClient, initLogCollection, initServer, isMobileOrTablet, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.5.3",
+  "version": "3.5.5",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -29,6 +29,7 @@
   "peerDependencies": {
     "@fortawesome/free-regular-svg-icons": "^x.x.x",
     "@fortawesome/free-solid-svg-icons": "^x.x.x",
+    "@fortawesome/fontawesome-svg-core": "^x.x.x",
     "@fortawesome/react-fontawesome": "^x.x.x",
     "bootstrap": "^5.x.x",
     "react": "^x.x.x",

package/src/components/AppWrapper.tsx

@@ -30,7 +30,7 @@ import {
 } from '../client/initClient';
 
 /*------------------------------------------------------------------------*/
-/*                                  Props                                 */
+/* -------------------------------- Props ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 type Props = {
@@ -41,11 +41,11 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/*                             Static Helpers                             */
+/* --------------------------- Static Helpers --------------------------- */
 /*------------------------------------------------------------------------*/
 
 /*----------------------------------------*/
-/*                  Alert                 */
+/* ---------------- Alert --------------- */
 /*----------------------------------------*/
 
 // Stored copies of setters
@@ -61,6 +61,7 @@ let onAlertClosed: () => void;
 export const alert = async (title: string, text: string): Promise<undefined> => {
   // Fallback if alert not available
   if (!setAlertInfo) {
+    // eslint-disable-next-line no-alert
     window.alert(`${title}\n\n${text}`);
     return undefined;
   }
@@ -81,7 +82,7 @@ export const alert = async (title: string, text: string): Promise<undefined> =>
 };
 
 /*----------------------------------------*/
-/*                 Confirm                */
+/* --------------- Confirm -------------- */
 /*----------------------------------------*/
 
 // Stored copies of setters
@@ -129,6 +130,7 @@ export const confirm = async (
 ): Promise<boolean> => {
   // Fallback if confirm is not available
   if (!setConfirmInfo) {
+    // eslint-disable-next-line no-alert
     return window.confirm(`${title}\n\n${text}`);
   }
 
@@ -136,7 +138,7 @@ export const confirm = async (
   return new Promise((resolve) => {
     // Setup handler
     onConfirmClosed = (confirmed: boolean) => {
-      resolve(confirmed)
+      resolve(confirmed);
     };
 
     // Show the confirm
@@ -149,7 +151,7 @@ export const confirm = async (
 };
 
 /*----------------------------------------*/
-/*               Fatal Error              */
+/* ------------- Fatal Error ------------ */
 /*----------------------------------------*/
 
 // Stored copies of setters
@@ -157,6 +159,9 @@ let setFatalErrorMessage: (message: string) => void;
 let setFatalErrorCode: (code: string) => void;
 let setFatalErrorTitle: (title: string) => void;
 
+// Fatal error listeners
+const fatalErrorHandlers: (() => void)[] = [];
+
 /**
  * Show a fatal error message
  * @author Gabe Abrams
@@ -179,6 +184,15 @@ export const showFatalError = (
       : String(error.code ?? ReactKitErrorCode.NoCode)
   );
 
+  // Call all fatal error listeners
+  try {
+    fatalErrorHandlers.forEach((handler) => {
+      handler();
+    });
+  } catch (err) {
+    // Ignore listener errors
+  }
+
   // Add log
   logClientEvent({
     context: LogBuiltInMetadata.Context.ClientFatalError,
@@ -209,8 +223,16 @@ export const showFatalError = (
   return undefined;
 };
 
+/**
+ * Add a handler for when a fatal error occurs
+ * @author Gabe Abrams
+ */
+export const addFatalErrorHandler = (handler: () => void) => {
+  fatalErrorHandlers.push(handler);
+};
+
 /*----------------------------------------*/
-/*             Session Expired            */
+/* ----------- Session Expired ---------- */
 /*----------------------------------------*/
 
 // Stored copies of setters
@@ -226,12 +248,12 @@ export const showSessionExpiredMessage = (): undefined => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                Component                               */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
+  /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /* -------------- Props ------------- */
@@ -265,11 +287,11 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
     alertInfo,
     setAlertInfoInner,
   ] = useState<
-    undefined
-    | {
-      title: string,
-      text: string,
-    }
+  undefined
+  | {
+    title: string,
+    text: string,
+  }
   >(undefined);
   setAlertInfo = setAlertInfoInner;
 
@@ -278,17 +300,17 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
     confirmInfo,
     setConfirmInfoInner,
   ] = useState<
-    undefined
-    | {
-      title: string,
-      text: string,
-      opts: {
-        confirmButtonText?: string,
-        confirmButtonVariant?: Variant,
-        cancelButtonText?: string,
-        cancelButtonVariant?: Variant,
-      },
-    }
+  undefined
+  | {
+    title: string,
+    text: string,
+    opts: {
+      confirmButtonText?: string,
+      confirmButtonVariant?: Variant,
+      cancelButtonText?: string,
+      cancelButtonVariant?: Variant,
+    },
+  }
   >(undefined);
   setConfirmInfo = setConfirmInfoInner;
 
@@ -300,11 +322,11 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   setSessionHasExpired = setSessionHasExpiredInner;
 
   /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
+  /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /*----------------------------------------*/
-  /*                  Modal                 */
+  /* ---------------- Modal --------------- */
   /*----------------------------------------*/
 
   // Modal that may be defined
@@ -358,7 +380,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   }
 
   /*----------------------------------------*/
-  /*                  Views                 */
+  /* ---------------- Views --------------- */
   /*----------------------------------------*/
 
   // Body that will be filled with the current view
@@ -410,11 +432,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   /* --------------- App -------------- */
 
   if (!body) {
-    body = (
-      <>
-        {children}
-      </>
-    );
+    body = children;
   }
 
   /*----------------------------------------*/
@@ -434,4 +452,4 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 /*------------------------------------------------------------------------*/
 
 // Export component
-export default AppWrapper;
+export default AppWrapper;

package/src/components/CopiableBox.tsx

@@ -6,13 +6,14 @@
 // Import React
 import React, { useReducer } from 'react';
 
-// Import other reactkit functions
-import { alert, waitMs } from '..';
-
 // Import FontAwesome
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClipboard } from '@fortawesome/free-solid-svg-icons';
 
+// Import other reactkit functions
+import { alert } from './AppWrapper';
+import waitMs from '../helpers/waitMs';
+
 /*------------------------------------------------------------------------*/
 /*                                  Types                                 */
 /*------------------------------------------------------------------------*/
@@ -260,7 +261,7 @@ const CopiableBox: React.FC<Props> = (props) => {
             />
           )
       }
-      
+
       <button
         id={copyButtonId}
         className="btn btn-secondary"