dce-reactkit 3.5.13 → 3.6.1

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

package/dist/esm/types/helpers/makeLinksClickable.d.ts

@@ -5,12 +5,14 @@ import React from 'react';
  * @param text the text to process
  * @param [opts] options to customize behavior
  * @param [opts.newTab] if true, links will open in a new tab
- * @param [opts.preventPropagation] if true, clicks to link will prevent default
- *   and propagation
+ * @param [opts.preventPropagation] if true, clicks to link will prevent
+ *   propagation
+ * @param [opts.inheritColor] if true, inherit text color for links
  * @returns the processed text
  */
 declare const makeLinksClickable: (text: string, opts?: {
     newTab?: boolean;
     preventPropagation?: boolean;
+    inheritColor?: boolean;
 }) => React.ReactNode;
 export default makeLinksClickable;

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
@@ -707,6 +706,7 @@ type SendRequestFunction = (opts: {
 declare const initClient: (opts: {
     sendRequest: SendRequestFunction;
     sessionExpiredMessage?: string;
+    darkModeOn?: boolean;
 }) => void;
 
 /**
@@ -1379,13 +1379,15 @@ declare const idify: (str: string) => string;
  * @param text the text to process
  * @param [opts] options to customize behavior
  * @param [opts.newTab] if true, links will open in a new tab
- * @param [opts.preventPropagation] if true, clicks to link will prevent default
- *   and propagation
+ * @param [opts.preventPropagation] if true, clicks to link will prevent
+ *   propagation
+ * @param [opts.inheritColor] if true, inherit text color for links
  * @returns the processed text
  */
 declare const makeLinksClickable: (text: string, opts?: {
     newTab?: boolean;
     preventPropagation?: boolean;
+    inheritColor?: boolean;
 }) => React.ReactNode;
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.5.13",
+  "version": "3.6.1",
   "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,15 +18,20 @@ 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';
 
 /*------------------------------------------------------------------------*/
@@ -36,8 +41,6 @@ import {
 type Props = {
   // The entire app
   children: React.ReactNode,
-  // True if this app is a dark-themed app
-  dark?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -327,7 +330,6 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
   const {
     children,
-    dark,
   } = props;
 
   /* -------------- State ------------- */
@@ -523,7 +525,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
           minHeight: '100vh',
           paddingTop: '2rem',
           backgroundColor: (
-            dark
+            isDarkModeOn()
               ? '#222'
               : '#fff'
           ),
@@ -548,7 +550,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   }
 
   /*----------------------------------------*/
-  /*                 Main UI                */
+  /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
   return (
@@ -563,7 +565,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