dce-reactkit 3.12.1-beta-cross-server.8 → 4.0.0-beta-date-and-time.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.12.1-beta-cross-server.8",
+  "version": "4.0.0-beta-date-and-time.1",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -25,7 +25,6 @@
   },
   "homepage": "https://github.com/harvard-edtech/dce-reactkit#readme",
   "dependencies": {
-    "qs": "^6.x.x",
     "react-select": "^5.7.3"
   },
   "peerDependencies": {
@@ -34,22 +33,19 @@
     "@fortawesome/free-solid-svg-icons": "^x.x.x",
     "@fortawesome/react-fontawesome": "^x.x.x",
     "bootstrap": "^5.x.x",
-    "express": "^x.x.x",
-    "react": "^x.x.x",
-    "react-dom": "^x.x.x"
+    "react": "^x.x.x"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
-    "@rollup/plugin-typescript": "^8.3.2",
+    "@rollup/plugin-typescript": "^10.0.1",
     "@types/bootstrap": "^5.2.8",
     "@types/express": "^4.17.17",
     "@types/jest": "^28.1.7",
-    "@types/jwt-simple": "^0.5.36",
     "@types/node": "^20.2.5",
-    "@types/oauth-signature": "^1.5.2",
-    "@types/react": "^17.0.7",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
     "eslint": "^8.42.0",
@@ -61,8 +57,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
-    "oauth-signature": "^1.5.0",
-    "raixa": "^1.0.21",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-sourcemaps": "^0.6.3",

package/src/components/AppWrapper.tsx

@@ -32,10 +32,12 @@ import ErrorWithCode from '../errors/ErrorWithCode';
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
 import logClientEvent from '../helpers/logClientEvent';
+// TODO: fix dependency cycle
+// eslint-disable-next-line import/no-cycle
 import {
   getSessionExpiredMessage,
   isDarkModeOn,
-} from '../client/initClient';
+} from '../helpers/initClient';
 import waitMs from '../helpers/waitMs';
 
 // Import constants

package/src/components/CheckboxButton.tsx

@@ -15,7 +15,7 @@ import { faSquare, faSquareMinus } from '@fortawesome/free-regular-svg-icons';
 import Variant from '../types/Variant';
 
 // Import shared helpers
-import { isDarkModeOn } from '../client/initClient';
+import { isDarkModeOn } from '../helpers/initClient';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

package/src/components/Dropdown.tsx

@@ -16,7 +16,7 @@ import Variant from '../types/Variant';
 import DropdownItemType from '../types/DropdownItemType';
 
 // Check dark mode
-import { isDarkModeOn } from '../client/initClient';
+import { isDarkModeOn } from '../helpers/initClient';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

package/src/components/IntelliTable.tsx

@@ -315,7 +315,7 @@ const IntelliTable: React.FC<Props> = (props) => {
                 checked={columnVisibilityMap[column.param]}
                 ariaLabel={`show "${column.title}" column in the ${title} table`}
                 checkedVariant={Variant.Light}
-                uncheckedVariant={Variant.Secondary}
+                uncheckedVariant={Variant.Light}
               />
             );
           })

package/src/components/ItemPicker/NestableItemList.tsx

@@ -272,6 +272,7 @@ const NestableItemList: React.FC<Props> = (props) => {
                 }}
                 ariaLabel={`Select ${item.name}`}
                 checkedVariant={Variant.Light}
+                uncheckedVariant={Variant.Light}
               />
 
               {/* Children */}

package/src/components/ItemPicker/index.tsx

@@ -33,6 +33,8 @@ type Props = {
   onChanged: (updatedItems: PickableItem[]) => void,
   // If true, don't add margin to bottom of item picker
   noBottomMargin?: boolean,
+  // If true, hide select all or none buttons
+  hideSelectAllOrNoneButtons?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -52,12 +54,61 @@ const ItemPicker: React.FC<Props> = (props) => {
     items,
     onChanged,
     noBottomMargin,
+    hideSelectAllOrNoneButtons,
   } = props;
 
   /*------------------------------------------------------------------------*/
   /* ------------------------- Component Functions ------------------------ */
   /*------------------------------------------------------------------------*/
 
+  /**
+   * Updates the checked state of an item (including all children)
+   * @author Yuen Ler Chow
+   * @param item the item to update
+   * @param checked the new checked state
+   * @returns the updated item
+   */
+  const updateItemChecked = (
+    item: PickableItem,
+    checked: boolean,
+  ): PickableItem => {
+    if (item.isGroup) {
+      return {
+        ...item,
+        children: item.children.map((child) => {
+          return updateItemChecked(child, checked);
+        }),
+      };
+    }
+    return { ...item, checked };
+  };
+
+  /**
+   * Selects all items in the list
+   * @author Yuen Ler Chow
+   */
+  const handleSelectAll = () => {
+    const updatedItems = items.map(
+      (item) => {
+        return updateItemChecked(item, true);
+      },
+    );
+    onChanged(updatedItems);
+  };
+
+  /**
+   * Deselects all items in the list
+   * @author Yuen Ler Chow
+   */
+  const handleDeselectAll = () => {
+    const updatedItems = items.map(
+      (item) => {
+        return updateItemChecked(item, false);
+      },
+    );
+    onChanged(updatedItems);
+  };
+
   /*------------------------------------------------------------------------*/
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
@@ -66,10 +117,55 @@ const ItemPicker: React.FC<Props> = (props) => {
   /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
+  // Select all/none
+  const selectAllOrNone = (
+    !hideSelectAllOrNoneButtons
+      ? (
+        <div
+          className="d-flex h-100 align-items-end flex-row"
+        >
+          <div className="d-flex justify-content-end">
+            {/* Label */}
+            <div
+              className="me-2"
+              style={{ fontSize: '1.2rem' }}
+            >
+              Select
+            </div>
+            {/* Buttons */}
+            <div className="btn-group" role="group">
+              {/* All */}
+              <button
+                type="button"
+                style={{ borderRight: '0.1rem solid white' }}
+                aria-label="Select all contexts"
+                className="btn btn-secondary py-0"
+                onClick={handleSelectAll}
+              >
+                All
+              </button>
+              {/* None */}
+              <button
+                type="button"
+                aria-label="Deselect all contexts"
+                className="btn btn-secondary py-0"
+                onClick={handleDeselectAll}
+              >
+                None
+              </button>
+            </div>
+          </div>
+        </div>
+      )
+      : undefined
+  );
+
+  // Main UI
   return (
     <TabBox
       title={title}
       noBottomMargin={noBottomMargin}
+      topRightChildren={selectAllOrNone}
     >
       <div style={{ overflowX: 'auto' }}>
         <NestableItemList

package/src/components/LogReviewer.tsx

@@ -1182,7 +1182,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               year={dateFilterState.startDate.year}
               month={dateFilterState.startDate.month}
               day={dateFilterState.startDate.day}
-              chooseFromPast
+              dontAllowFuture
               numMonthsToShow={36}
               onChange={(month, day, year) => {
                 dateFilterState.startDate = { month, day, year };
@@ -1198,7 +1198,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               year={dateFilterState.endDate.year}
               month={dateFilterState.endDate.month}
               day={dateFilterState.endDate.day}
-              chooseFromPast
+              dontAllowFuture
               numMonthsToShow={12}
               onChange={(month, day, year) => {
                 if (

package/src/components/Modal/ModalProps.ts

@@ -69,6 +69,10 @@ type ModalProps = {
   confirmVariant?: Variant,
   // True if modal should be on top of other modals
   onTopOfOtherModals?: boolean,
+  // If true, the modal is loading
+  isLoading?: boolean,
+  // If true, the loading is cancelable
+  isLoadingCancelable?: boolean,
 };
 
 export default ModalProps;

package/src/components/Modal/index.tsx

@@ -14,6 +14,9 @@ import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
 // Import other components
+import LoadingSpinner from '../LoadingSpinner';
+
+// Import helpers
 import waitMs from '../../helpers/waitMs';
 
 // Import types
@@ -29,7 +32,7 @@ import NUM_MODAL_PORTALS from '../../constants/NUM_MODAL_PORTALS';
 // Import shared helpers
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
-import { isDarkModeOn } from '../../client/initClient';
+import { isDarkModeOn } from '../../helpers/initClient';
 
 /*------------------------------------------------------------------------*/
 /* ------------------------------ Constants ----------------------------- */
@@ -41,6 +44,7 @@ const BASE_Z_INDEX_ON_TOP = 2000000000;
 
 // Constants
 const MS_TO_ANIMATE = 200; // Animation duration
+const MS_TO_WAIT_BEFORE_SHOWING_LOADING_INDICATOR = 1000;
 
 // Modal type to list of buttons
 const modalTypeToModalButtonTypes: {
@@ -256,6 +260,8 @@ const Modal: React.FC<ModalProps> = (props) => {
     dontAllowBackdropExit,
     dontShowXButton,
     onTopOfOtherModals,
+    isLoading,
+    isLoadingCancelable,
   } = props;
 
   // Determine if no header either
@@ -266,6 +272,7 @@ const Modal: React.FC<ModalProps> = (props) => {
   // True if animation is in use
   const [animatingIn, setAnimatingIn] = useState(true);
   const [animatingPop, setAnimatingPop] = useState(false);
+  const [showModal, setShowModal] = useState(false);
 
   /* -------------- Refs -------------- */
 
@@ -298,6 +305,15 @@ const Modal: React.FC<ModalProps> = (props) => {
         if (mounted.current) {
           setAnimatingIn(false);
         }
+        if (isLoading) {
+          // wait before showing modal
+          await waitMs(MS_TO_WAIT_BEFORE_SHOWING_LOADING_INDICATOR);
+          if (mounted.current) {
+            setShowModal(true);
+          }
+        } else {
+          setShowModal(true);
+        }
       })();
 
       return () => {
@@ -400,6 +416,17 @@ const Modal: React.FC<ModalProps> = (props) => {
     animationClass = 'Modal-animating-pop';
   }
 
+  // default to show close button when not loading and not show close button when loading
+  // unless downShowXButton or isLoadingCancelable
+  const showCloseButton = (
+    // The modal must have an onClose function
+    onClose
+    // ...and the close button is allowed to be visible
+    && !dontShowXButton
+    // ...and should not be shown if the modal is loading and not cancelable
+    && !(isLoading && !isLoadingCancelable)
+  );
+
   // Render the modal
   const contentToRender = (
     <div
@@ -436,6 +463,8 @@ const Modal: React.FC<ModalProps> = (props) => {
           handleClose(ModalButtonType.Cancel);
         }}
       />
+
+      {showModal && (
       <div
         className={`modal-dialog modal-${size} ${animationClass} modal-dialog-scrollable modal-dialog-centered`}
         style={{
@@ -498,7 +527,7 @@ const Modal: React.FC<ModalProps> = (props) => {
                 {title}
               </h5>
 
-              {(onClose && !dontShowXButton) && (
+              {showCloseButton && (
                 <button
                   type="button"
                   className="Modal-x-button btn-close"
@@ -518,25 +547,34 @@ const Modal: React.FC<ModalProps> = (props) => {
               )}
             </div>
           )}
-          {children && (
-            <div
-              className="modal-body"
-              style={{
-                color: (
-                  isDarkModeOn()
-                    ? 'white'
-                    : undefined
-                ),
-                backgroundColor: (
-                  isDarkModeOn()
-                    ? '#444'
-                    : undefined
-                ),
-              }}
-            >
-              {children}
-            </div>
-          )}
+
+          <div
+            className="modal-body"
+            style={{
+              color: (
+                isDarkModeOn()
+                  ? 'white'
+                  : undefined
+              ),
+              backgroundColor: (
+                isDarkModeOn()
+                  ? '#444'
+                  : undefined
+              ),
+            }}
+          >
+            {
+              isLoading
+                ? (
+                  <>
+                    <LoadingSpinner />
+                    <span className="sr-only">Content loading</span>
+                  </>
+                )
+                : children
+            }
+          </div>
+
           {footer && (
             <div
               className="modal-footer pt-1 pb-1"
@@ -563,6 +601,7 @@ const Modal: React.FC<ModalProps> = (props) => {
           )}
         </div>
       </div>
+      )}
     </div>
   );
 

package/src/components/RadioButton.tsx

@@ -13,7 +13,9 @@ import { faCircle } from '@fortawesome/free-regular-svg-icons';
 
 // Import shared types
 import Variant from '../types/Variant';
-import { isDarkModeOn } from '../client/initClient';
+
+// Import shared helpers
+import { isDarkModeOn } from '../helpers/initClient';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

package/src/components/SimpleDateChooser.tsx

@@ -1,16 +1,23 @@
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
+ * @author Gardeniu Liu
  */
 
 // Import React
 import React from 'react';
-import getMonthName from '../helpers/getMonthName';
 
 // Import helpers
 import getOrdinal from '../helpers/getOrdinal';
+import getMonthName from '../helpers/getMonthName';
 import getTimeInfoInET from '../helpers/getTimeInfoInET';
 
+// Import classes
+import ErrorWithCode from '../errors/ErrorWithCode';
+
+// Import types
+import ReactKitErrorCode from '../types/ReactKitErrorCode';
+
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
@@ -33,12 +40,14 @@ type Props = {
    * @param year new full year number
    */
   onChange: (month: number, day: number, year: number) => void,
-  // Number of months to allow the user to choose from
-  // (max is 12, default is 6)
+  // Number of months in either the past or future to allow the user to choose from
+  // If we aren't allowing the past or the future, we will throw an error
+  // (max is 12, default is 6 in the past and 6 in the future)
   numMonthsToShow?: number,
-  // If true, instead of showing numMonthsToShow months into the future,
-  // show numMonthsToShow months into the past
-  chooseFromPast?: boolean,
+  // If true, the user isn't allowed to select dates in the past
+  dontAllowPast?: boolean,
+  // If true, the user isn't allowed to select dates in the future
+  dontAllowFuture?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -56,8 +65,9 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     ariaLabel,
     name,
     onChange,
-    chooseFromPast,
     numMonthsToShow = 6,
+    dontAllowFuture,
+    dontAllowPast,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -76,16 +86,41 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     days: number[],
     year: number,
   }[] = [];
+
   let startYear = today.year;
   let startMonth = today.month;
-  if (chooseFromPast) {
+
+  // Don't allow past or future dates
+  if (dontAllowPast && dontAllowFuture) {
+    throw new ErrorWithCode(
+      'No past or future dates allowed',
+      ReactKitErrorCode.SimpleDateChooserInvalidDateRange,
+    );
+  }
+
+  // Require numMonthsToShow to be positive
+  if (numMonthsToShow <= 0) {
+    throw new ErrorWithCode(
+      'numMonthsToShow must be positive',
+      ReactKitErrorCode.SimpleDateChooserInvalidNumMonths,
+    );
+  }
+
+  // Recalculate startMonth and startYear when allowing past dates
+  if (!dontAllowPast) {
     startMonth -= Math.max(0, numMonthsToShow - 1);
     while (startMonth <= 0) {
       startMonth += 12;
       startYear -= 1;
     }
   }
-  for (let i = 0; i < numMonthsToShow; i++) {
+  // Calculate total number of months to show
+  let totalMonthsToShow = numMonthsToShow;
+  if (!dontAllowPast && !dontAllowFuture) {
+    totalMonthsToShow = totalMonthsToShow * 2 - 1;
+  }
+
+  for (let i = 0; i < totalMonthsToShow; i++) {
     // Get month and year info
     const unmoddedMonth = (startMonth + i);
     let month = unmoddedMonth;
@@ -105,24 +140,25 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     // Figure out which days are allowed
     const days = [];
     const numDaysInMonth = (new Date(year, month, 0)).getDate();
-    if (chooseFromPast) {
-      // Past selection
-      const numDaysToAdd = (
-        (month === today.month)
-          ? today.day // Current month, only add up to today
-          : numDaysInMonth // Past month, add all days
-      );
-      for (let day = 1; day <= numDaysToAdd; day++) {
-        days.push(day);
+
+    // Current month
+    if (month === today.month && year === today.year) {
+      // Past selection: add all previous days of the month
+      if (!dontAllowPast) {
+        for (let day = 1; day < today.day; day++) {
+          days.push(day);
+        }
       }
-    } else {
+      days.push(today.day); // Add current day
       // Future selection: add all remaining days of the month
-      const firstDay = (
-        month === today.month
-          ? today.day // Current month: start at current date
-          : 1 // Future month: start at beginning of month
-      );
-      for (let day = firstDay; day <= numDaysInMonth; day++) {
+      if (!dontAllowFuture) {
+        for (let day = today.day + 1; day <= numDaysInMonth; day++) {
+          days.push(day);
+        }
+      }
+    } else { // Past or future month
+      // Include all days in the month
+      for (let day = 1; day <= numDaysInMonth; day++) {
         days.push(day);
       }
     }
@@ -158,8 +194,8 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
       </option>,
     );
 
+    // This is the currently selected month
     if (month === choice.month) {
-      // This is the currently selected month
       // Create day options
       choice.days.forEach((dayChoice) => {
         const ordinal = getOrdinal(dayChoice);