dce-reactkit 3.5.14 → 3.6.2

package/dist/esm/types/client/initClient.d.ts

@@ -32,6 +32,12 @@ declare let sessionExpiredMessage: string | undefined;
  * @returns session expired message
  */
 export declare const getSessionExpiredMessage: () => string;
+declare let darkModeOn: boolean;
+/**
+ * Get whether dark mode is enabled or not
+ * @returns true if dark mode is enabled
+ */
+export declare const isDarkModeOn: () => boolean;
 /**
  * Initialize the client-side version of reactkit
  * @author Gabe Abrams
@@ -42,5 +48,6 @@ export declare const getSessionExpiredMessage: () => string;
 declare const initClient: (opts: {
     sendRequest: SendRequestFunction;
     sessionExpiredMessage?: string;
+    darkModeOn?: boolean;
 }) => void;
 export default initClient;

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

@@ -7,7 +7,6 @@ import React from 'react';
 import Variant from '../types/Variant';
 type Props = {
     children: React.ReactNode;
-    dark?: boolean;
 };
 /**
  * Redirect to a new page
@@ -51,7 +50,7 @@ export declare const confirm: (title: string, text: string, opts?: {
  * @param error the error to show
  * @param [errorTitle] title of the error box
  */
-export declare const showFatalError: (error: any, errorTitle?: string) => undefined;
+export declare const showFatalError: (error: any, errorTitle?: string) => Promise<void>;
 /**
  * Add a handler for when a fatal error occurs
  * @author Gabe Abrams
@@ -61,6 +60,6 @@ export declare const addFatalErrorHandler: (handler: () => void) => void;
  * Show the "session expired" message
  * @author Gabe Abrams
  */
-export declare const showSessionExpiredMessage: () => undefined;
+export declare const showSessionExpiredMessage: () => void;
 declare const AppWrapper: React.FC<Props>;
 export default AppWrapper;

package/dist/index.d.ts

@@ -26,7 +26,6 @@ declare enum Variant {
 
 type Props$k = {
     children: React.ReactNode;
-    dark?: boolean;
 };
 /**
  * Redirect to a new page
@@ -70,7 +69,7 @@ declare const confirm: (title: string, text: string, opts?: {
  * @param error the error to show
  * @param [errorTitle] title of the error box
  */
-declare const showFatalError: (error: any, errorTitle?: string) => undefined;
+declare const showFatalError: (error: any, errorTitle?: string) => Promise<void>;
 /**
  * Add a handler for when a fatal error occurs
  * @author Gabe Abrams
@@ -707,6 +706,7 @@ type SendRequestFunction = (opts: {
 declare const initClient: (opts: {
     sendRequest: SendRequestFunction;
     sessionExpiredMessage?: string;
+    darkModeOn?: boolean;
 }) => void;
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.5.14",
+  "version": "3.6.2",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/client/initClient.tsx

@@ -1,4 +1,6 @@
 // Import other components
+// TODO: fix dependency cycle
+// eslint-disable-next-line import/no-cycle
 import { showFatalError } from '../components/AppWrapper';
 
 // Import shared types
@@ -6,7 +8,6 @@ import ErrorWithCode from '../errors/ErrorWithCode';
 import waitMs from '../helpers/waitMs';
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
 
-
 /*----------------------------------------*/
 /* ---------------- Types --------------- */
 /*----------------------------------------*/
@@ -42,7 +43,7 @@ type SendRequestFunction = (
 /* ----------- Initialized ---------- */
 
 let onInitialized: (a: unknown) => void;
-let initialized = new Promise((resolve) => {
+const initialized = new Promise((resolve) => {
   onInitialized = resolve;
 });
 
@@ -60,7 +61,7 @@ export const getSendRequest = async () => {
   let successful = false;
   (async () => {
     await waitMs(5000);
-    
+
     if (!successful) {
       showFatalError(
         new ErrorWithCode(
@@ -69,7 +70,7 @@ export const getSendRequest = async () => {
         ),
       );
     }
-  })(),
+  })();
 
   // Wait for initialization
   await initialized;
@@ -96,6 +97,18 @@ export const getSessionExpiredMessage = () => {
   );
 };
 
+/* ------------ Dark Mode ----------- */
+
+let darkModeOn = false;
+
+/**
+ * Get whether dark mode is enabled or not
+ * @returns true if dark mode is enabled
+ */
+export const isDarkModeOn = () => {
+  return darkModeOn;
+};
+
 /*----------------------------------------*/
 /* ---------------- Init ---------------- */
 /*----------------------------------------*/
@@ -113,11 +126,14 @@ const initClient = (
     sendRequest: SendRequestFunction,
     // Custom session expired message
     sessionExpiredMessage?: string,
+    // If true, dark mode is enabled
+    darkModeOn?: boolean,
   },
 ) => {
   // Store values
   storedSendRequest = opts.sendRequest;
   sessionExpiredMessage = opts.sessionExpiredMessage;
+  darkModeOn = !!opts.darkModeOn;
 
   // Mark as initialized
   onInitialized(null);

package/src/components/AppWrapper.tsx

@@ -18,16 +18,22 @@ import Variant from '../types/Variant';
 import LogBuiltInMetadata from '../types/LogBuiltInMetadata';
 
 // Import shared components
+// TODO: fix dependency cycle
+// eslint-disable-next-line import/no-cycle
 import Modal from './Modal';
 
 // Import custom errors
 import ErrorWithCode from '../errors/ErrorWithCode';
 
 // Import other helpers
+// TODO: fix dependency cycle
+// eslint-disable-next-line import/no-cycle
 import logClientEvent from '../helpers/logClientEvent';
 import {
   getSessionExpiredMessage,
+  isDarkModeOn,
 } from '../client/initClient';
+import waitMs from '../helpers/waitMs';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Props ------------------------------- */
@@ -36,14 +42,38 @@ import {
 type Props = {
   // The entire app
   children: React.ReactNode,
-  // True if this app is a dark-themed app
-  dark?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
 /* --------------------------- Static Helpers --------------------------- */
 /*------------------------------------------------------------------------*/
 
+// Timestamp after initialization when helpers should be available
+const timestampWhenHelpersShouldBeAvailable = Date.now() + 2000;
+
+/**
+ * Wait for a little while for a helper to exist
+ * @author Gabe Abrams
+ * @param checkForHelper a function that returns true if the helper exists
+ * @returns true if the helper exists, false if the process timed out
+ */
+const waitForHelper = async (checkForHelper: () => boolean): Promise<boolean> => {
+  // Wait for helper to exist
+  while (!checkForHelper()) {
+    // Check if we should stop waiting
+    if (Date.now() > timestampWhenHelpersShouldBeAvailable) {
+      // Stop waiting
+      return false;
+    }
+
+    // Wait a little while
+    await waitMs(10);
+  }
+
+  // Helper exists
+  return true;
+};
+
 /*----------------------------------------*/
 /* ----------- Redirect/Leave ----------- */
 /*----------------------------------------*/
@@ -100,6 +130,11 @@ let onAlertClosed: () => void;
  * @param text the text to display in the alert
  */
 export const alert = async (title: string, text: string): Promise<undefined> => {
+  // Wait for helper to exist
+  await waitForHelper(() => {
+    return !!setAlertInfo;
+  });
+
   // Fallback if alert not available
   if (!setAlertInfo) {
     // eslint-disable-next-line no-alert
@@ -169,6 +204,11 @@ export const confirm = async (
     cancelButtonVariant?: Variant,
   },
 ): Promise<boolean> => {
+  // Wait for helper to exist
+  await waitForHelper(() => {
+    return !!setConfirmInfo;
+  });
+
   // Fallback if confirm is not available
   if (!setConfirmInfo) {
     // eslint-disable-next-line no-alert
@@ -209,10 +249,10 @@ const fatalErrorHandlers: (() => void)[] = [];
  * @param error the error to show
  * @param [errorTitle] title of the error box
  */
-export const showFatalError = (
+export const showFatalError = async (
   error: any,
   errorTitle: string = 'An Error Occurred',
-): undefined => {
+) => {
   // Determine message and code
   const message: string = (
     typeof error === 'string'
@@ -247,21 +287,27 @@ export const showFatalError = (
     },
   });
 
+  // Wait for helper to exist
+  await waitForHelper(() => {
+    return (
+      !!setFatalErrorMessage
+      && !!setFatalErrorCode
+    );
+  });
+
   // Handle case where app hasn't loaded
   if (!setFatalErrorMessage || !setFatalErrorCode) {
     alert(
       errorTitle,
       `${message} (code: ${code}). Please contact support.`,
     );
-    return undefined;
+    return;
   }
 
   // Use setters
   setFatalErrorMessage(message);
   setFatalErrorCode(code);
   setFatalErrorTitle(errorTitle);
-
-  return undefined;
 };
 
 /**
@@ -283,9 +329,8 @@ let setSessionHasExpired: (isExpired: boolean) => void;
  * Show the "session expired" message
  * @author Gabe Abrams
  */
-export const showSessionExpiredMessage = (): undefined => {
+export const showSessionExpiredMessage = () => {
   setSessionHasExpired(true);
-  return undefined;
 };
 
 /*------------------------------------------------------------------------*/
@@ -327,7 +372,6 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
   const {
     children,
-    dark,
   } = props;
 
   /* -------------- State ------------- */
@@ -523,7 +567,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
           minHeight: '100vh',
           paddingTop: '2rem',
           backgroundColor: (
-            dark
+            isDarkModeOn()
               ? '#222'
               : '#fff'
           ),
@@ -548,7 +592,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   }
 
   /*----------------------------------------*/
-  /*                 Main UI                */
+  /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
   return (
@@ -563,7 +607,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
+/* ------------------------------- Wrap Up ------------------------------ */
 /*------------------------------------------------------------------------*/
 
 // Export component

package/src/components/ButtonInputGroup.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 
 /*------------------------------------------------------------------------*/
-/*                                  Types                                 */
+/* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 // Props definition
@@ -25,12 +25,12 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                Component                               */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const ButtonInputGroup: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
+  /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /* -------------- Props ------------- */
@@ -45,11 +45,11 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
   } = props;
 
   /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
+  /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /*----------------------------------------*/
-  /*                 Main UI                */
+  /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
   return (
@@ -96,7 +96,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
+/* ------------------------------- Wrap Up ------------------------------ */
 /*------------------------------------------------------------------------*/
 
 // Export component

package/src/components/CSVDownloadButton.tsx

@@ -11,7 +11,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCloudDownloadAlt } from '@fortawesome/free-solid-svg-icons';
 
 /*------------------------------------------------------------------------*/
-/*                                  Types                                 */
+/* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 // Props definition
@@ -35,12 +35,12 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                Component                               */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const CSVDownloadButton: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
+  /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /* -------------- Props ------------- */
@@ -58,11 +58,11 @@ const CSVDownloadButton: React.FC<Props> = (props) => {
   } = props;
 
   /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
+  /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /*----------------------------------------*/
-  /*                 Main UI                */
+  /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
   // Render the button
@@ -95,7 +95,7 @@ const CSVDownloadButton: React.FC<Props> = (props) => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
+/* ------------------------------- Wrap Up ------------------------------ */
 /*------------------------------------------------------------------------*/
 
 // Export component

package/src/components/CheckboxButton.tsx

@@ -14,8 +14,11 @@ import { faSquare, faSquareMinus } from '@fortawesome/free-regular-svg-icons';
 // Import shared types
 import Variant from '../types/Variant';
 
+// Import shared helpers
+import { isDarkModeOn } from '../client/initClient';
+
 /*------------------------------------------------------------------------*/
-/*                                  Types                                 */
+/* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 type Props = {
@@ -46,12 +49,12 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                Component                               */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const CheckboxButton: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
+  /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /* -------------- Props ------------- */
@@ -65,18 +68,26 @@ const CheckboxButton: React.FC<Props> = (props) => {
     id,
     className,
     noMarginOnRight,
-    checkedVariant = Variant.Secondary,
-    uncheckedVariant = Variant.Light,
+    checkedVariant = (
+      isDarkModeOn()
+        ? Variant.Light
+        : Variant.Secondary
+    ),
+    uncheckedVariant = (
+      isDarkModeOn()
+        ? Variant.Secondary
+        : Variant.Light
+    ),
     small,
     dashed,
   } = props;
 
   /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
+  /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /*----------------------------------------*/
-  /*                Main UI                 */
+  /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
   // Determine the icon
@@ -113,7 +124,7 @@ const CheckboxButton: React.FC<Props> = (props) => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                 Wrap up                                */
+/* ------------------------------- Wrap Up ------------------------------ */
 /*------------------------------------------------------------------------*/
 
 export default CheckboxButton;

package/src/components/CopiableBox.tsx

@@ -15,7 +15,7 @@ import { alert } from './AppWrapper';
 import waitMs from '../helpers/waitMs';
 
 /*------------------------------------------------------------------------*/
-/*                                  Types                                 */
+/* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 // Props definition
@@ -43,7 +43,7 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                  State                                 */
+/* -------------------------------- State ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 /* -------- State Definition -------- */
@@ -97,12 +97,12 @@ const reducer = (state: State, action: Action): State => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                Component                               */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const CopiableBox: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
+  /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /* -------------- Props ------------- */
@@ -137,7 +137,7 @@ const CopiableBox: React.FC<Props> = (props) => {
   } = state;
 
   /*------------------------------------------------------------------------*/
-  /*                           Component Functions                          */
+  /* ------------------------- Component Functions ------------------------ */
   /*------------------------------------------------------------------------*/
 
   /**
@@ -170,11 +170,11 @@ const CopiableBox: React.FC<Props> = (props) => {
   };
 
   /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
+  /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /*----------------------------------------*/
-  /*                 Main UI                */
+  /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
   return (
@@ -292,7 +292,7 @@ const CopiableBox: React.FC<Props> = (props) => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
+/* ------------------------------- Wrap Up ------------------------------ */
 /*------------------------------------------------------------------------*/
 
 // Export component

package/src/components/Drawer.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 
 /*------------------------------------------------------------------------*/
-/*                                  Types                                 */
+/* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 // Props definition
@@ -19,7 +19,7 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                  Style                                 */
+/* -------------------------------- Style ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 const style = `
@@ -39,12 +39,12 @@ const style = `
 `;
 
 /*------------------------------------------------------------------------*/
-/*                                Component                               */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const Drawer: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
+  /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /* -------------- Props ------------- */
@@ -56,11 +56,11 @@ const Drawer: React.FC<Props> = (props) => {
   } = props;
 
   /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
+  /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /*----------------------------------------*/
-  /*                 Main UI                */
+  /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
   return (
@@ -77,7 +77,7 @@ const Drawer: React.FC<Props> = (props) => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
+/* ------------------------------- Wrap Up ------------------------------ */
 /*------------------------------------------------------------------------*/
 
 // Export component

package/src/components/ErrorBox.tsx

@@ -14,7 +14,7 @@ import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
 
 /*------------------------------------------------------------------------*/
-/*                                  Types                                 */
+/* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
 
 type Props = {
@@ -27,12 +27,12 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                Component                               */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
 const ErrorBox: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
-  /*                                  Setup                                 */
+  /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   /* -------------- Props ------------- */
@@ -44,7 +44,7 @@ const ErrorBox: React.FC<Props> = (props) => {
   } = props;
 
   /*------------------------------------------------------------------------*/
-  /*                                 Render                                 */
+  /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
   // Determine error text
@@ -117,7 +117,7 @@ const ErrorBox: React.FC<Props> = (props) => {
 };
 
 /*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
+/* ------------------------------- Wrap Up ------------------------------ */
 /*------------------------------------------------------------------------*/
 
 // Export component