dce-reactkit 3.0.0 → 3.0.3

package/src/components/AppWrapper.tsx

@@ -1,6 +1,6 @@
 /**
  * A wrapper for the entire React app that adds global functionality like
- *   handling for fatal error messages
+ *   handling for fatal error messages, adds bootstrap support
  * @author Gabe Abrams
  */
 
@@ -28,22 +28,70 @@ import ErrorWithCode from '../errors/ErrorWithCode';
 type Props = {
   // The entire app
   children: React.ReactNode,
+  // Copy of CACCL's send request function
+  sendRequest: SendRequestFunction,
   // True if this app is a dark-themed app
   dark?: boolean,
   // Custom session expired message
   sessionExpiredMessage?: string,
 };
 
+// Type of CACCL's send request function
+type SendRequestFunction = (
+  opts: {
+    path: string;
+    method: ('GET' | 'POST' | 'DELETE' | 'PUT');
+    params?: {
+      [x: string]: any;
+    } | undefined;
+    headers?: {
+      [x: string]: any;
+    } | undefined;
+    numRetries?: number | undefined;
+  },
+) => Promise<{
+  body: any;
+  status: number;
+  headers: {
+    [x: string]: any;
+  };
+}>;
+
 /*------------------------------------------------------------------------*/
 /*                             Static Helpers                             */
 /*------------------------------------------------------------------------*/
 
+/*----------------------------------------*/
+/*              Send Request              */
+/*----------------------------------------*/
+
+// Store copy of caccl send request
+let _cacclSendRequest: SendRequestFunction;
+
+/**
+ * Send a request using caccl's send request feature
+ * @author Gabe Abrams
+ * @param opts send request options
+ * @returns send request response
+ */
+export const cacclSendRequest: SendRequestFunction = async (opts) => {
+  // Make sure send request has been passed in
+  if (!_cacclSendRequest) {
+    throw new ErrorWithCode(
+      'The request could not be sent because the AppWrapper component does not have a copy of sendRequest from CACCL.',
+      ReactKitErrorCode.NoCACCLSendRequestFunction,
+    );
+  }
+
+  return _cacclSendRequest(opts);
+};
+
 /*----------------------------------------*/
 /*                  Alert                 */
 /*----------------------------------------*/
 
 // Stored copies of setters
-let setAlertInfo: (info: { title: string, text: string }) => void;
+let setAlertInfo: (info: undefined | { title: string, text: string }) => void;
 let onAlertClosed: () => void;
 
 /**
@@ -52,17 +100,18 @@ let onAlertClosed: () => void;
  * @param title the title text to display at the top of the alert
  * @param text the text to display in the alert
  */
-export const alert = async (title: string, text: string) => {
+export const alert = async (title: string, text: string): Promise<undefined> => {
   // Fallback if alert not available
   if (!setAlertInfo) {
-    return window.alert(`${title}\n\n${text}`);
+    window.alert(`${title}\n\n${text}`);
+    return undefined;
   }
 
   // Return promise that resolves when alert is closed
   return new Promise((resolve) => {
     // Setup handler
     onAlertClosed = () => {
-      resolve(null);
+      resolve(undefined);
     };
 
     // Show the alert
@@ -78,7 +127,7 @@ export const alert = async (title: string, text: string) => {
 /*----------------------------------------*/
 
 // Stored copies of setters
-let setConfirmInfo: (info: { title: string, text: string }) => void;
+let setConfirmInfo: (info: undefined | { title: string, text: string }) => void;
 let onConfirmClosed: (confirmed: boolean) => void;
 
 /**
@@ -130,7 +179,7 @@ let setFatalErrorTitle: (title: string) => void;
 export const showFatalError = (
   error: any,
   errorTitle: string = 'An Error Occurred',
-) => {
+): undefined => {
   // Determine message and code
   const message: string = (
     typeof error === 'string'
@@ -145,16 +194,19 @@ export const showFatalError = (
 
   // Handle case where app hasn't loaded
   if (!setFatalErrorMessage || !setFatalErrorCode) {
-    return alert(
+    alert(
       errorTitle,
       `${message} (code: ${code}). Please contact support.`,
     );
+    return undefined;
   }
 
   // Use setters
   setFatalErrorMessage(message);
   setFatalErrorCode(code);
   setFatalErrorTitle(errorTitle);
+
+  return undefined;
 };
 
 /*----------------------------------------*/
@@ -168,8 +220,9 @@ let setSessionHasExpired: (isExpired: boolean) => void;
  * Show the "session expired" message
  * @author Gabe Abrams
  */
-export const showSessionExpiredMessage = () => {
+export const showSessionExpiredMessage = (): undefined => {
   setSessionHasExpired(true);
+  return undefined;
 };
 
 /*------------------------------------------------------------------------*/
@@ -185,10 +238,14 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
   const {
     children,
+    sendRequest,
     dark,
     sessionExpiredMessage = 'Your session has expired. Please go back to Canvas and start over.',
   } = props;
 
+  // Store copy of send request
+  _cacclSendRequest = sendRequest;
+
   /* -------------- State ------------- */
 
   // Fatal error
@@ -212,20 +269,26 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   const [
     alertInfo,
     setAlertInfoInner,
-  ] = useState<{
-    title: string,
-    text: string
-  }>();
+  ] = useState<
+    undefined
+    | {
+      title: string,
+      text: string
+    }
+  >(undefined);
   setAlertInfo = setAlertInfoInner;
 
   // Confirm
   const [
     confirmInfo,
     setConfirmInfoInner,
-  ] = useState<{
-    title: string,
-    text: string
-  }>();
+  ] = useState<
+    undefined
+    | {
+      title: string,
+      text: string
+    }
+  >(undefined);
   setConfirmInfo = setConfirmInfoInner;
 
   // Session expired
@@ -251,10 +314,12 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   if (alertInfo) {
     modal = (
       <Modal
+        key={`alert-${alertInfo.title}-${alertInfo.text}`}
         title={alertInfo.title}
         type={ModalType.Okay}
         onClose={() => {
           // Alert closed
+          setAlertInfo(undefined);
           if (onAlertClosed) {
             onAlertClosed();
           }
@@ -271,16 +336,18 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   if (confirmInfo) {
     modal = (
       <Modal
+        key={`confirm-${confirmInfo.title}-${confirmInfo.text}`}
         title={confirmInfo.title}
         type={ModalType.OkayCancel}
         onClose={(buttonType) => {
+          setConfirmInfo(undefined);
           if (onConfirmClosed) {
             onConfirmClosed(buttonType === ModalButtonType.Okay);
           }
         }}
         dontAllowBackdropExit
       >
-
+        {confirmInfo.text}
       </Modal>
     );
   }

package/src/components/ButtonInputGroup.tsx

@@ -0,0 +1,89 @@
+/**
+ * Input group with a title and space for buttons
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // Label text
+  label: string,
+  // Minimum width of the label (css units)
+  minLabelWidth?: string,
+  // Buttons
+  children: React.ReactNode,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const ButtonInputGroup: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    label,
+    minLabelWidth,
+    children,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  return (
+    <div className="input-group">
+      <div className="input-group-prepend d-flex w-100">
+        {/* Label */}
+        <span
+          className="input-group-text"
+          style={{
+            minWidth: (
+              minLabelWidth
+              ?? undefined
+            ),
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+          }}
+        >
+          {label}
+        </span>
+
+        {/* Contents */}
+        <span
+          className="input-group-text flex-grow-1 rounded-right"
+          style={{
+            backgroundColor: 'white',
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            borderLeftWidth: 0,
+          }}
+        >
+          {children}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default ButtonInputGroup;

package/src/components/CheckboxButton.tsx

@@ -0,0 +1,100 @@
+/**
+ * A checkbox button
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import FontAwesome Icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheckSquare } from '@fortawesome/free-solid-svg-icons';
+import { faSquare } from '@fortawesome/free-regular-svg-icons';
+
+// Import shared types
+import Variant from '../types/Variant';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Text of the button
+  text: string,
+  // Handler for when this item is toggled
+  onChanged: (checked: boolean) => void,
+  // Aria label
+  ariaLabel: string,
+  // Button title
+  title?: string,
+  // True if checked
+  checked?: boolean,
+  // The id of the button
+  id?: string,
+  // If true, no margin on right
+  noMarginOnRight?: boolean,
+  // Variant for when checkbox is checked
+  checkedVariant?: Variant,
+  // Variant for when checkbox is not checked
+  uncheckedVariant?: Variant,
+  // True if using a small button
+  small?: boolean,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const CheckboxButton: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    text,
+    onChanged,
+    ariaLabel,
+    title,
+    checked,
+    id,
+    noMarginOnRight,
+    checkedVariant = Variant.Secondary,
+    uncheckedVariant = Variant.Light,
+    small,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                Main UI                 */
+  /*----------------------------------------*/
+
+  return (
+    <button
+      type="button"
+      id={id}
+      title={title}
+      className={`btn btn-${checked ? checkedVariant : uncheckedVariant}${checked ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'}`}
+      aria-label={`${ariaLabel}${checked ? ': currently checked' : ''}`}
+      onClick={() => {
+        onChanged(!checked);
+      }}
+    >
+      <FontAwesomeIcon
+        icon={checked ? faCheckSquare : faSquare}
+        className="me-1"
+      />
+      {text}
+    </button>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap up                                */
+/*------------------------------------------------------------------------*/
+
+export default CheckboxButton;

package/src/components/Drawer.tsx

@@ -0,0 +1,76 @@
+/**
+ * Drawer container
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // Children to display
+  children: React.ReactNode,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+  .Drawer-container {
+    margin-left: 1rem;
+    margin-right: 1rem;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    padding: 0.75rem;
+    border-left: 1px solid #dee2e6;
+    border-bottom: 1px solid #dee2e6;
+    border-right: 1px solid #dee2e6;
+    border-bottom-left-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+    box-shadow: inset 0 0 0.5rem 0 rgba(0, 0, 0, 0.05);
+  }
+`;
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const Drawer: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    children,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  return (
+    <div className="Drawer-container">
+      <style>{style}</style>
+      {children}
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default Drawer;

package/src/components/ErrorBox.tsx

@@ -63,9 +63,9 @@ const ErrorBox: React.FC<Props> = (props) => {
         <span
           style={{
             backgroundColor: 'white',
-            borderRadius: '5px',
-            paddingLeft: '3px',
-            paddingRight: '3px',
+            borderRadius: '0.3rem',
+            paddingLeft: '0.2rem',
+            paddingRight: '0.2rem',
             color: '#DC4150',
             fontVariant: 'small-caps',
             fontSize: '80%',
@@ -85,7 +85,7 @@ const ErrorBox: React.FC<Props> = (props) => {
     <div
       className="alert alert-danger text-center"
       style={{
-        maxWidth: '650px',
+        maxWidth: '40rem',
         margin: 'auto',
       }}
     >

package/src/components/LoadingSpinner.tsx

@@ -20,10 +20,10 @@ const style = `
 .LoadingSpinner-blip-2,
 .LoadingSpinner-blip-3,
 .LoadingSpinner-blip-4 {
-  font-size: 25px;
+  font-size: 1.8rem;
   opacity: 0.6;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 /* First Blip */