dce-reactkit 3.9.0-beta-loading-modal.2 → 3.9.0-beta-loading-modal.3

package/dist/index.d.ts

@@ -24,7 +24,7 @@ declare enum Variant {
  * @author Gabe Abrams
  */
 
-type Props$k = {
+type Props$l = {
     children: React$1.ReactNode;
 };
 /**
@@ -63,6 +63,38 @@ declare const confirm: (title: string, text: string, opts?: {
     cancelButtonText?: string;
     cancelButtonVariant?: Variant;
 }) => Promise<boolean>;
+/**
+ * Show a prompt modal asking the user for input
+ * @author Yuen Ler Chow
+ * @param title the title text to display at the top of the prompt
+ * @param [opts={}] additional options for the prompt dialog
+ * @param [opts.textAboveInputField] the text to display in the prompt
+ * @param [opts.defaultText] the default text for the input field
+ * @param [opts.placeholder] the placeholder text for the input field
+ * @param [opts.confirmButtonText=Okay] the text of the confirm button
+ * @param [opts.confirmButtonVariant=Variant.Dark] the variant of the confirm button
+ * @param [opts.cancelButtonText=Cancel] the text of the cancel button
+ * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel button
+ * @param [opts.minNumChars] the minimum number of characters required for
+ *   the input to be valid
+ * @param [opts.findValidationError] a function that takes the input text and
+ *   returns an error message if the input is invalid, returns undefined if the
+ *   input is valid
+ * @param [opts.ariaLabel] the aria label for the input field
+ * @returns Promise that resolves with the input string or null if canceled
+ */
+declare const prompt: (title: string, opts?: {
+    textAboveInputField?: string | undefined;
+    defaultText?: string | undefined;
+    placeholder?: string | undefined;
+    confirmButtonText?: string | undefined;
+    confirmButtonVariant?: Variant | undefined;
+    cancelButtonText?: string | undefined;
+    cancelButtonVariant?: Variant | undefined;
+    minNumChars?: number | undefined;
+    findValidationError?: ((text: string) => string | undefined) | undefined;
+    ariaLabel?: string | undefined;
+} | undefined) => Promise<string | null>;
 /**
  * Show a fatal error message
  * @author Gabe Abrams
@@ -75,7 +107,7 @@ declare const showFatalError: (error: any, errorTitle?: string) => Promise<void>
  * @author Gabe Abrams
  */
 declare const addFatalErrorHandler: (handler: () => void) => void;
-declare const AppWrapper: React$1.FC<Props$k>;
+declare const AppWrapper: React$1.FC<Props$l>;
 
 /**
  * Loading spinner/indicator
@@ -88,14 +120,14 @@ declare const LoadingSpinner: () => JSX.Element;
  * @author Gabe Abrams
  */
 
-type Props$j = {
+type Props$k = {
     error: any;
     title?: string;
     onClose?: () => void;
     variant?: Variant;
     icon?: IconProp;
 };
-declare const ErrorBox: React$1.FC<Props$j>;
+declare const ErrorBox: React$1.FC<Props$k>;
 
 /**
  * Types of buttons in the modal
@@ -131,6 +163,7 @@ declare enum ModalSize {
  */
 declare enum ModalType {
     Okay = "okay",
+    Cancel = "cancel",
     OkayCancel = "okay-cancel",
     YesNo = "yes-no",
     YesNoCancel = "yes-no-cancel",
@@ -193,39 +226,41 @@ declare const Modal: React$1.FC<ModalProps>;
  * @author Gabe Abrams
  */
 
-type Props$i = {
+type Props$j = {
     title: React$1.ReactNode;
     children: React$1.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };
-declare const TabBox: React$1.FC<Props$i>;
+declare const TabBox: React$1.FC<Props$j>;
 
 /**
  * A radio selection button
  * @author Gabe Abrams
  */
 
-type Props$h = {
+type Props$i = {
     text: React$1.ReactNode;
     onSelected: () => void;
     ariaLabel: string;
     title?: string;
     selected?: boolean;
     id?: string;
+    className?: string;
     noMarginOnRight?: boolean;
     selectedVariant?: Variant;
     unselectedVariant?: Variant;
     small?: boolean;
+    useComplexFormatting?: boolean;
 };
-declare const RadioButton: React$1.FC<Props$h>;
+declare const RadioButton: React$1.FC<Props$i>;
 
 /**
  * A checkbox button
  * @author Gabe Abrams
  */
 
-type Props$g = {
+type Props$h = {
     text: React$1.ReactNode;
     onChanged: (checked: boolean) => void;
     ariaLabel: string;
@@ -238,15 +273,16 @@ type Props$g = {
     uncheckedVariant?: Variant;
     small?: boolean;
     dashed?: boolean;
+    useComplexFormatting?: boolean;
 };
-declare const CheckboxButton: React$1.FC<Props$g>;
+declare const CheckboxButton: React$1.FC<Props$h>;
 
 /**
  * Input group with a title and space for buttons
  * @author Gabe Abrams
  */
 
-type Props$f = {
+type Props$g = {
     label: React$1.ReactNode;
     minLabelWidth?: string;
     children: React$1.ReactNode;
@@ -255,14 +291,14 @@ type Props$f = {
     isAdminFeature?: boolean;
     noMarginOnBottom?: boolean;
 };
-declare const ButtonInputGroup: React$1.FC<Props$f>;
+declare const ButtonInputGroup: React$1.FC<Props$g>;
 
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
  */
 
-type Props$e = {
+type Props$f = {
     ariaLabel: string;
     name: string;
     month: number;
@@ -278,62 +314,62 @@ type Props$e = {
     numMonthsToShow?: number;
     chooseFromPast?: boolean;
 };
-declare const SimpleDateChooser: React$1.FC<Props$e>;
+declare const SimpleDateChooser: React$1.FC<Props$f>;
 
 /**
  * Drawer container
  * @author Gabe Abrams
  */
 
-type Props$d = {
+type Props$e = {
     grayBackground?: boolean;
     customBackgroundColor?: string;
     children: React$1.ReactNode;
 };
-declare const Drawer: React$1.FC<Props$d>;
+declare const Drawer: React$1.FC<Props$e>;
 
 /**
  * Success checkmark that pops into view
  * @author Gabe Abrams
  */
 
-type Props$c = {
+type Props$d = {
     sizeRem?: number;
     circleVariant?: string;
     checkVariant?: string;
 };
-declare const PopSuccessMark: React$1.FC<Props$c>;
+declare const PopSuccessMark: React$1.FC<Props$d>;
 
 /**
  * Failure x mark that pops into view
  * @author Gabe Abrams
  */
 
-type Props$b = {
+type Props$c = {
     sizeRem?: number;
     circleVariant?: string;
     xVariant?: string;
 };
-declare const PopFailureMark: React$1.FC<Props$b>;
+declare const PopFailureMark: React$1.FC<Props$c>;
 
 /**
  * Failure pending that pops into view
  * @author Gabe Abrams
  */
 
-type Props$a = {
+type Props$b = {
     sizeRem?: number;
     circleVariant?: string;
     hourglassVariant?: string;
 };
-declare const PopPendingMark: React$1.FC<Props$a>;
+declare const PopPendingMark: React$1.FC<Props$b>;
 
 /**
  * Copiable text box
  * @author Gabe Abrams
  */
 
-type Props$9 = {
+type Props$a = {
     text: string;
     maxTextWidthRem?: number;
     label?: string;
@@ -345,7 +381,7 @@ type Props$9 = {
     textAreaId?: string;
     copyButtonId?: string;
 };
-declare const CopiableBox: React$1.FC<Props$9>;
+declare const CopiableBox: React$1.FC<Props$a>;
 
 /**
  * An item that can be chosen (for use within ItemPicker)
@@ -368,7 +404,7 @@ type PickableItem = ({
  * @author Yuen Ler Chow
  */
 
-type Props$8 = {
+type Props$9 = {
     title: string;
     items: PickableItem[];
     /**
@@ -379,7 +415,7 @@ type Props$8 = {
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
 };
-declare const ItemPicker: React$1.FC<Props$8>;
+declare const ItemPicker: React$1.FC<Props$9>;
 
 /**
  * Type of the context map in a LogMetadata file
@@ -424,11 +460,11 @@ type LogMetadataType = {
  * @author Gabe Abrams
  */
 
-type Props$7 = {
+type Props$8 = {
     LogMetadata: LogMetadataType;
     onClose: () => void;
 };
-declare const LogReviewer: React$1.FC<Props$7>;
+declare const LogReviewer: React$1.FC<Props$8>;
 
 /**
  * Server-side API param types
@@ -463,7 +499,7 @@ type IntelliTableColumn = {
  * @author Gabe Abrams
  */
 
-type Props$6 = {
+type Props$7 = {
     title: string;
     id: string;
     data: {
@@ -473,14 +509,14 @@ type Props$6 = {
     columns: IntelliTableColumn[];
     csvName?: string;
 };
-declare const IntelliTable: React$1.FC<Props$6>;
+declare const IntelliTable: React$1.FC<Props$7>;
 
 /**
  * Button for downloading a csv file
  * @author Gabe Abrams
  */
 
-type Props$5 = {
+type Props$6 = {
     filename: string;
     csv: string;
     id?: string;
@@ -492,7 +528,7 @@ type Props$5 = {
     onClick?: () => void;
     children?: React$1.ReactNode;
 };
-declare const CSVDownloadButton: React$1.FC<Props$5>;
+declare const CSVDownloadButton: React$1.FC<Props$6>;
 
 /**
  * Generic type for an object
@@ -568,7 +604,7 @@ type DBEntryField = ({
  * @author Gabe Abrams
  */
 
-type Props$4 = {
+type Props$5 = {
     entryFields: DBEntryField[];
     idPropName: string;
     titlePropName: string;
@@ -594,18 +630,18 @@ type Props$4 = {
         [k: string]: any;
     };
 };
-declare const DBEntryManagerPanel: React$1.FC<Props$4>;
+declare const DBEntryManagerPanel: React$1.FC<Props$5>;
 
 /**
  * Simple tooltip component
  * @author Gabe Abrams
  */
 
-type Props$3 = {
+type Props$4 = {
     text: string;
     children: JSX.Element;
 };
-declare const Tooltip: React$1.FC<Props$3>;
+declare const Tooltip: React$1.FC<Props$4>;
 
 /**
  * A toggle switch that toggles on or off
@@ -613,7 +649,7 @@ declare const Tooltip: React$1.FC<Props$3>;
  * @author Gabe Abrams
  */
 
-type Props$2 = {
+type Props$3 = {
     isOn: boolean;
     /**
      * A handler to call when the switch is toggled
@@ -625,7 +661,7 @@ type Props$2 = {
     description: string;
     backgroundVariantWhenOn?: Variant;
 };
-declare const ToggleSwitch: React$1.FC<Props$2>;
+declare const ToggleSwitch: React$1.FC<Props$3>;
 
 /**
  * Container that automatically scrolls when new items are added,
@@ -636,7 +672,7 @@ declare const ToggleSwitch: React$1.FC<Props$2>;
  * @author Gabe Abrams
  */
 
-type Props$1 = {
+type Props$2 = {
     itemsName?: string;
     items: AutoScrollItem[];
     jumpToBottomButtonVariant?: Variant;
@@ -647,7 +683,7 @@ type AutoScrollItem = {
     id: string | number;
     item: React$1.ReactNode;
 };
-declare const AutoscrollToBottomContainer: React$1.FC<Props$1>;
+declare const AutoscrollToBottomContainer: React$1.FC<Props$2>;
 
 /**
  * A switch with multiple options for selection
@@ -656,7 +692,7 @@ declare const AutoscrollToBottomContainer: React$1.FC<Props$1>;
  * @author Austen Money
  */
 
-type Props = {
+type Props$1 = {
     options: Option[];
     selectedOptionId: string;
     /**
@@ -671,7 +707,43 @@ type Option = {
     icon: IconProp;
     id: string;
 };
-declare const MultiSwitch: React$1.FC<Props>;
+declare const MultiSwitch: React$1.FC<Props$1>;
+
+declare enum DropdownItemType {
+    Header = "Header",
+    Divider = "Divider",
+    Item = "Item"
+}
+
+/**
+ * A simple dropdown menu
+ * @author Alessandra De Lucas
+ * @author Yuen Ler Chow
+ * @author Gabe Abrams
+ */
+
+type Props = {
+    items: DropdownItem[];
+    dropdownButton: {
+        ariaLabel: string;
+        id: string;
+        content?: React$1.ReactNode;
+        variant?: Variant;
+    };
+};
+type DropdownItem = ({
+    type: DropdownItemType.Header;
+    content: React$1.ReactNode;
+} | {
+    type: DropdownItemType.Divider;
+} | {
+    type: DropdownItemType.Item;
+    content: React$1.ReactNode;
+    ariaLabel: string;
+    id: string;
+    onClick: () => void;
+});
+declare const Dropdown: React$1.FC<Props>;
 
 /**
  * An error with a code
@@ -740,12 +812,20 @@ type SendRequestFunction = (opts: {
  * @param opts object containing all arguments
  * @param opts.sendRequest caccl send request functions
  * @param [opts.sessionExpiredMessage] a custom session expired message
+ * @param [opts.darkModeOn] if true, dark mode is enabled
+ * @param [opts.noServer] if true, there is no server for this app
  */
-declare const initClient: (opts: {
+declare const initClient: (opts: ({
     sendRequest: SendRequestFunction;
     sessionExpiredMessage?: string;
     darkModeOn?: boolean;
-}) => void;
+    noServer?: false;
+} | {
+    darkModeOn?: boolean;
+    noServer: true;
+    sendRequest?: undefined;
+    sessionExpiredMessage?: undefined;
+})) => void;
 
 /**
  * Shorten text so it fits into a certain number of chars
@@ -1010,6 +1090,12 @@ type LogFunction = (opts: ({
  * @param opts.handler function that processes the request
  * @param [opts.skipSessionCheck] if true, skip the session check (allow users
  *   to not be logged in and launched via LTI)
+ * @param [opts.allowedHosts] if included, only allow requests from these hosts
+ *   (start a hostname with a "*" to only check the end of the hostname)
+ *   you can include just one string instead of an array
+ * @param [opts.bannedHosts] if included, do not allow requests from these hosts
+ *   (start a hostname with a "*" to only check the end of the hostname)
+ *   you can include just one string instead of an array
  * @param [opts.unhandledErrorMessagePrefix] if included, when an error that
  *   is not of type ErrorWithCode is thrown, the client will receive an error
  *   where the error message is prefixed with this string. For example,
@@ -1064,6 +1150,8 @@ declare const genRouteHandler: (opts: {
         logServerEvent: LogFunction;
     }) => any;
     skipSessionCheck?: boolean | undefined;
+    allowedHosts?: string | string[] | undefined;
+    bannedHosts?: string | string[] | undefined;
     unhandledErrorMessagePrefix?: string | undefined;
 }) => (req: any, res: any, next: () => void) => Promise<undefined>;
 
@@ -1569,6 +1657,30 @@ declare const capitalize: (str: string) => string;
  */
 declare const shuffleArray: <T>(arr: T[]) => T[];
 
+/**
+ * Send a server-to-server request from this sever to another server that uses
+ *   dce-reactkit [for server only]
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.host - the host of the other server
+ * @param opts.path - the path of the other server's endpoint
+ * @param [opts.method=GET] - the method of the endpoint
+ * @param [opts.params] - query/body parameters to include
+ * @param [opts.headers] - headers to include
+ * @returns response from server
+ */
+declare const visitEndpointOnAnotherServer: (opts: {
+    host: string;
+    path: string;
+    method?: "GET" | "POST" | "DELETE" | "PUT" | undefined;
+    params?: {
+        [x: string]: any;
+    } | undefined;
+    headers?: {
+        [x: string]: any;
+    } | undefined;
+}) => Promise<any>;
+
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -1579,6 +1691,8 @@ declare enum ReactKitErrorCode {
     SessionExpired = "DRK3",
     MissingParameter = "DRK4",
     InvalidParameter = "DRK5",
+    HostNotAllowed = "DRK17",
+    HostBanned = "DRK18",
     WrongCourse = "DRK6",
     NoCACCLSendRequestFunction = "DRK7",
     NoCACCLGetLaunchInfoFunction = "DRK8",
@@ -1586,7 +1700,10 @@ declare enum ReactKitErrorCode {
     NotAdmin = "DRK10",
     NotAllowedToReviewLogs = "DRK11",
     ThemeCheckedBeforeReactKitReady = "DRK12",
-    SessionExpiredMessageGottenBeforeReactKitReady = "DRK13"
+    SessionExpiredMessageGottenBeforeReactKitReady = "DRK13",
+    NotConnected = "DRK14",
+    SelfSigned = "DRK15",
+    ResponseParseError = "DRK16"
 }
 
 /**
@@ -1619,4 +1736,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-export { AppWrapper, AutoscrollToBottomContainer, 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, LogFunction, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
+export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, prompt, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitEndpointOnAnotherServer, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.9.0-beta-loading-modal.2",
+  "version": "3.9.0-beta-loading-modal.3",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -24,6 +24,7 @@
   },
   "homepage": "https://github.com/harvard-edtech/dce-reactkit#readme",
   "dependencies": {
+    "qs": "^6.x.x",
     "react-select": "^5.7.3"
   },
   "peerDependencies": {

package/src/client/initClient.tsx

@@ -47,6 +47,18 @@ const initialized = new Promise((resolve) => {
   onInitialized = resolve;
 });
 
+/* ------------ No Server ----------- */
+
+let noServer = false;
+
+/**
+ * Check if there is no server for this app
+ * @author Gabe Abrams
+ */
+export const appHasNoServer = () => {
+  return noServer;
+};
+
 /* ---------- Send Request ---------- */
 
 let storedSendRequest: SendRequestFunction;
@@ -119,20 +131,46 @@ export const isDarkModeOn = () => {
  * @param opts object containing all arguments
  * @param opts.sendRequest caccl send request functions
  * @param [opts.sessionExpiredMessage] a custom session expired message
+ * @param [opts.darkModeOn] if true, dark mode is enabled
+ * @param [opts.noServer] if true, there is no server for this app
  */
 const initClient = (
-  opts: {
-    // Copy of CACCL's send request function
-    sendRequest: SendRequestFunction,
-    // Custom session expired message
-    sessionExpiredMessage?: string,
-    // If true, dark mode is enabled
-    darkModeOn?: boolean,
-  },
+  opts: (
+    | {
+      // Copy of CACCL's send request function
+      sendRequest: SendRequestFunction,
+      // Custom session expired message
+      sessionExpiredMessage?: string,
+      // If true, dark mode is enabled
+      darkModeOn?: boolean,
+      // If true, there is no server for this app
+      noServer?: false,
+    }
+    | {
+      // If true, dark mode is enabled
+      darkModeOn?: boolean,
+      // If true, there is no server for this app
+      noServer: true
+      // Copy of CACCL's send request function
+      sendRequest?: undefined,
+      // Custom session expired message
+      sessionExpiredMessage?: undefined,
+    }
+  ),
 ) => {
-  // Store values
-  storedSendRequest = opts.sendRequest;
-  sessionExpiredMessage = opts.sessionExpiredMessage;
+  // Handle separately if there is no server
+  if (opts.noServer) {
+    // Store values
+    storedSendRequest = async () => {
+      throw new Error('Cannot send requests because there is no server');
+    };
+  } else {
+    // Store values
+    storedSendRequest = opts.sendRequest;
+    sessionExpiredMessage = opts.sessionExpiredMessage;
+  }
+
+  // Handle universal parts
   darkModeOn = !!opts.darkModeOn;
 
   // Mark as initialized