dce-reactkit 4.3.4 → 5.0.0-beta-progress-size-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "4.3.4",
+  "version": "5.0.0-beta-progress-size-3",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -24,7 +24,7 @@
   },
   "homepage": "https://github.com/harvard-edtech/dce-reactkit#readme",
   "dependencies": {
-    "nanoclone": "^1.0.2",
+    "dce-commonkit": "^5.0.0",
     "react-select": "^5.7.3"
   },
   "peerDependencies": {
@@ -33,7 +33,8 @@
     "@fortawesome/free-solid-svg-icons": "^x.x.x",
     "@fortawesome/react-fontawesome": "^x.x.x",
     "bootstrap": "^5.x.x",
-    "react": "^x.x.x"
+    "react": "^x.x.x",
+    "react-dom": "^x.x.x"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",

package/src/components/AppWrapper.tsx

@@ -10,24 +10,27 @@ import React, { useState } from 'react';
 // Import FontAwesome
 import { faHourglassEnd } from '@fortawesome/free-solid-svg-icons';
 
+// Import commonkit
+import {
+  LogBuiltInMetadata,
+  ErrorWithCode,
+  waitMs,
+  CommonKitErrorCode,
+} from 'dce-commonkit';
+
 // Import shared components
 import ErrorBox from './ErrorBox';
 
 // Import shared types
-import ReactKitErrorCode from '../types/ReactKitErrorCode';
 import ModalButtonType from '../types/ModalButtonType';
 import ModalType from '../types/ModalType';
 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 ModalForWrapper from './Modal';
 
-// Import custom errors
-import ErrorWithCode from '../errors/ErrorWithCode';
-
 // Import other helpers
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
@@ -38,7 +41,6 @@ import {
   getSessionExpiredMessage,
   isDarkModeOn,
 } from '../helpers/initClient';
-import waitMs from '../helpers/waitMs';
 
 // Import constants
 import NUM_MODAL_PORTALS from '../constants/NUM_MODAL_PORTALS';
@@ -413,8 +415,8 @@ export const showFatalError = async (
   );
   const code: string = (
     typeof error === 'string'
-      ? ReactKitErrorCode.NoCode
-      : String(error.code ?? ReactKitErrorCode.NoCode)
+      ? CommonKitErrorCode.NoCode
+      : String(error.code ?? CommonKitErrorCode.NoCode)
   );
 
   // Call all fatal error listeners
@@ -856,11 +858,11 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
       sessionHasExpired
         ? new ErrorWithCode(
           getSessionExpiredMessage(),
-          ReactKitErrorCode.SessionExpired,
+          CommonKitErrorCode.SessionExpired,
         )
         : new ErrorWithCode(
           (fatalErrorMessage ?? 'An unknown error has occurred. Please contact support.'),
-          (fatalErrorCode ?? ReactKitErrorCode.NoCode),
+          (fatalErrorCode ?? CommonKitErrorCode.NoCode),
         )
     );
 

package/src/components/AutoscrollToBottomContainer.tsx

@@ -16,12 +16,14 @@ import {
   faChevronDown,
 } from '@fortawesome/free-solid-svg-icons';
 
+// Import commonkit
+import {
+  idify,
+} from 'dce-commonkit';
+
 // Import shared types
 import Variant from '../types/Variant';
 
-// Import shared helper
-import idify from '../helpers/idify';
-
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/

package/src/components/CopiableBox.tsx

@@ -10,9 +10,13 @@ import React, { useReducer } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClipboard } from '@fortawesome/free-solid-svg-icons';
 
+// Import commonkit
+import {
+  waitMs,
+} from 'dce-commonkit';
+
 // Import other reactkit functions
 import { alert } from './AppWrapper';
-import waitMs from '../helpers/waitMs';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

package/src/components/DBEntryManagerPanel/helpers/generateEndpointPath.ts

@@ -5,12 +5,12 @@
  * @param [adminsOnly] true if the endpoint is for admins only
  * @returns the endpoint path
  */
-const generateEndpointPath = (collectionName: string, adminsOnly?: boolean) => {
+const generateEndpointPath = (collectionName: string, adminsOnly: boolean = true) => {
   // Determine prefix based on whether the endpoint is for admins only
   const userPath = adminsOnly ? 'admin' : 'ttm';
 
   // Return the endpoint path
-  return `/api/${userPath}/dce-reactkit/dbeditor/${collectionName}`;
+  return `/api/${userPath}/dce-commonkit/dbeditor/${collectionName}`;
 };
 
 export default generateEndpointPath;

package/src/components/ErrorBox.tsx

@@ -11,8 +11,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
+// Import commonkit
+import {
+  CommonKitErrorCode,
+} from 'dce-commonkit';
+
 // Import shared types
-import ReactKitErrorCode from '../types/ReactKitErrorCode';
 import Variant from '../types/Variant';
 
 /*------------------------------------------------------------------------*/
@@ -82,7 +86,7 @@ const ErrorBox: React.FC<Props> = (props) => {
         >
           code:
           {' '}
-          {String((error as any).code ?? ReactKitErrorCode.NoCode).toUpperCase()}
+          {String((error as any).code ?? CommonKitErrorCode.NoCode).toUpperCase()}
         </span>
       </span>
     );

package/src/components/IntelliTable.tsx

@@ -17,14 +17,16 @@ import {
   faMinus,
 } from '@fortawesome/free-solid-svg-icons';
 
+// Import commonkit
+import {
+  ParamType,
+  roundToNumDecimals,
+  genCSV,
+} from 'dce-commonkit';
+
 // Import shared types
-import ParamType from '../types/ParamType';
 import IntelliTableColumn from '../types/IntelliTableColumn';
 
-// Import shared helpers
-import roundToNumDecimals from '../helpers/roundToNumDecimals';
-import genCSV from '../helpers/genCSV';
-
 // Import shared components
 import Modal from './Modal';
 import ModalType from '../types/ModalType';

package/src/components/LogReviewer.tsx

@@ -19,32 +19,35 @@ import {
   faSearch,
 } from '@fortawesome/free-solid-svg-icons';
 
+// Import commonkit
+import {
+  getTimeInfoInET,
+  getHumanReadableDate,
+  LOG_REVIEW_GET_LOGS_ROUTE,
+  Log,
+  LogMetadataType,
+  LogSource,
+  LogType,
+  LogAction,
+  ParamType,
+  LogBuiltInMetadata,
+  LogMetadataContextMap,
+  LogMetadataTargetMap,
+  cloneDeep,
+  LogReviewerFilterState,
+  DateFilterState,
+  ContextFilterState,
+  TagFilterState,
+  ActionErrorFilterState,
+  AdvancedFilterState,
+} from 'dce-commonkit';
+
 // Import shared helpers
 import visitServerEndpoint from '../helpers/visitServerEndpoint';
-import getTimeInfoInET from '../helpers/getTimeInfoInET';
 import { alert, showFatalError } from './AppWrapper';
-import getHumanReadableDate from '../helpers/getHumanReadableDate';
-
-// Import shared constants
-import LOG_REVIEW_GET_LOGS_ROUTE from '../constants/LOG_REVIEW_GET_LOGS_ROUTE';
 
 // Import shared types
-import Log from '../types/Log';
-import LogMetadataType from '../types/LogMetadataType';
-import LogSource from '../types/LogSource';
-import LogType from '../types/LogType';
-import LogAction from '../types/LogAction';
-import ParamType from '../types/ParamType';
 import IntelliTableColumn from '../types/IntelliTableColumn';
-import LogBuiltInMetadata from '../types/LogBuiltInMetadata';
-import LogMetadataContextMap from '../types/LogMetadataContextMap';
-import LogMetadataTargetMap from '../types/LogMetadataTargetMap';
-import LogReviewerFilterState from '../types/LogReviewerFilterState';
-import DateFilterState from '../types/LogReviewerFilterState/DateFilterState';
-import ContextFilterState from '../types/LogReviewerFilterState/ContextFilterState';
-import TagFilterState from '../types/LogReviewerFilterState/TagFilterState';
-import ActionErrorFilterState from '../types/LogReviewerFilterState/ActionErrorFilterState';
-import AdvancedFilterState from '../types/LogReviewerFilterState/AdvancedFilterState';
 import Variant from '../types/Variant';
 
 // Import shared components
@@ -59,7 +62,6 @@ import RadioButton from './RadioButton';
 import ButtonInputGroup from './ButtonInputGroup';
 import IntelliTable from './IntelliTable';
 import Pagination from './Pagination';
-import cloneDeep from '../helpers/cloneDeep';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

package/src/components/Modal/index.tsx

@@ -13,12 +13,14 @@
 import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
+// Import commonkit
+import {
+  waitMs,
+} from 'dce-commonkit';
+
 // Import other components
 import LoadingSpinner from '../LoadingSpinner';
 
-// Import helpers
-import waitMs from '../../helpers/waitMs';
-
 // Import types
 import Variant from '../../types/Variant';
 import ModalButtonType from '../../types/ModalButtonType';

package/src/components/MultiSwitch.tsx

@@ -12,8 +12,12 @@ import React, { useReducer } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
+// Import commonkit
+import {
+  idify,
+} from 'dce-commonkit';
+
 // Import shared helpers
-import idify from '../helpers/idify';
 import combineClassNames from '../helpers/combineClassNames';
 
 /*------------------------------------------------------------------------*/

package/src/components/ProgressBar.tsx

@@ -10,6 +10,12 @@ import React from 'react';
 import Variant from '../types/Variant';
 import ProgressBarSize from '../types/ProgressBarSize';
 
+// Import helpers
+import {
+  roundToNumDecimals,
+  padDecimalZeros,
+} from 'dce-commonkit';
+
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
@@ -75,7 +81,7 @@ type ProgressStatus = (
 const ITEM_WIDTH_MULTIPLIER = 1.3;
 
 // Constant for percent width
-const PERCENT_WIDTH = 3;
+const PERCENT_WIDTH = 2.7;
 
 // Constant for item width
 const ITEM_WIDTH = 2;
@@ -88,11 +94,9 @@ const ITEM_WIDTH = 2;
 let style = `
   .ProgressBar-number-of,
   .ProgressBar-percent {
-    flex: 0 0 auto;
     white-space: nowrap;
-    padding-right: 0.5em;
-    padding-left: 0.25em;
-    text-align: right;
+    padding-right: 0.3em;
+    text-align: left;
     transition: width .25s ease;
   }
 
@@ -164,10 +168,20 @@ const ProgressBar: React.FC<Props> = (props) => {
   /* ---------------- Sizes --------------- */
   /*----------------------------------------*/
 
+  // Add dynamic general style
+  style += `
+    .ProgressBar-percent {
+      min-width: ${(status.usePercent ? status.numDecimalPlaces ?? 0 : 0) + PERCENT_WIDTH}em;
+    }
+    .ProgressBar-number-of {
+      min-width: ${((!status.usePercent ? String(status.total ?? 0).length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
+    }
+  `;
+
   // Size styles
   switch (size) {
-    case ProgressBarSize.Small:
-      // Small size
+    case ProgressBarSize.Medium:
+      // Medium size
       style += `
         .ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
           font-size: 1em;
@@ -180,18 +194,10 @@ const ProgressBar: React.FC<Props> = (props) => {
           height: 1.5em;
           border-radius: 0.5em;
         }
-        .ProgressBar-percent {
-          min-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-          max-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-        }
-        .ProgressBar-number-of {
-          min-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-          max-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-        }
       `;
       break;
-    case ProgressBarSize.Medium:
-      // Medium size
+    case ProgressBarSize.Large:
+      // Large size
       style += `
         .ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
           font-size: 1.5em;
@@ -204,38 +210,6 @@ const ProgressBar: React.FC<Props> = (props) => {
           height: 2em;
           border-radius: 0.7em;
         }
-        .ProgressBar-percent {
-          min-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-          max-width: ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-        }
-        .ProgressBar-number-of {
-          min-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-          max-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-        }
-      `;
-      break;
-    case ProgressBarSize.Large:
-      // Large size
-      style += `
-        .ProgressBar-container .ProgressBar-number-of, .ProgressBar-container .ProgressBar-percent {
-          font-size: 2em;
-        }
-        .ProgressBar-container .ProgressBar-background {
-          height: 3em;
-          border-radius: 1em;
-        }
-        .ProgressBar-container .ProgressBar-bar {
-          height: 3em;
-          border-radius: 1em;
-        }
-        .ProgressBar-percent {
-          min-width:  ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-          max-width:  ${((status.usePercent ? status.numDecimalPlaces ?? 0 : 0) * 1) + PERCENT_WIDTH}em;
-        }
-        .ProgressBar-number-of {
-          min-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-          max-width: ${((!status.usePercent ? status.total?.toString().length || 1 : 0) * ITEM_WIDTH_MULTIPLIER) + ITEM_WIDTH}em;
-        }
       `;
       break;
     default:
@@ -245,9 +219,8 @@ const ProgressBar: React.FC<Props> = (props) => {
   // Get the width of the outline based on size
   const outlineWidth = (() => {
     switch (size) {
-      case ProgressBarSize.Small: return '0.05em';
-      case ProgressBarSize.Medium: return '0.08em';
-      case ProgressBarSize.Large: return '0.1em';
+      case ProgressBarSize.Medium: return '0.05em';
+      case ProgressBarSize.Large: return '0.08em';
       default: return '0.05em';
     }
   })();
@@ -275,25 +248,38 @@ const ProgressBar: React.FC<Props> = (props) => {
   `;
 
   // Stripes for striped effect
-  const stripes: React.ReactNode = (
-    <div>
-      <style>{stripesStyle}</style>
-      <div
-        className="ProgressBar-stripes position-absolute "
-        style={{
-          width: '200%',
-          height: '100%',
-        }}
-      >
-        &nbsp;
+  let stripes: React.ReactNode = null;
+  if (striped) {
+    stripes = (
+      <div>
+        <style>{stripesStyle}</style>
+        <div
+          className="ProgressBar-stripes position-absolute"
+          style={{
+            width: '200%',
+            height: '100%',
+          }}
+        >
+          &nbsp;
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 
   /*----------------------------------------*/
   /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
+  // Calculate the width of the progress bar
+  let progressBarWidthPercent = 0;
+  if (status.usePercent) {
+    // Use percent progress directly
+    progressBarWidthPercent = status.percentProgress;
+  } else if (status.total > 0) {
+    // Calculate percent progress from items
+    progressBarWidthPercent = (status.numComplete / status.total) * 100;
+  }
+
   // Render the progress bar
   return (
     <div className="ProgressBar-container d-flex align-items-center">
@@ -301,25 +287,27 @@ const ProgressBar: React.FC<Props> = (props) => {
       <style>{style}</style>
       {/* Use items */}
       {!status.usePercent && status.numComplete && (
-        <span
-          className="ProgressBar-number-of pe-2 align-self-center"
-        >
+        <span className="ProgressBar-number-of">
           {status.numComplete}
           &nbsp;of&nbsp;
           {status.total}
         </span>
       )}
       {/* Use percentage */}
-      {status.usePercent && status.percentProgress && (
-        <span
-          className="ProgressBar-percent pe-2 align-self-center"
-        >
-          {status.percentProgress.toFixed(status?.numDecimalPlaces ?? 0)}
+      {status.usePercent && (
+        <span className="ProgressBar-percent">
+          {
+            padDecimalZeros(
+              roundToNumDecimals(status.percentProgress ?? 0, status?.numDecimalPlaces ?? 0),
+              status?.numDecimalPlaces ?? 0,
+            )
+          }
           %
         </span>
       )}
+      {/* Progress Bar Filled Area */}
       <div
-        className={`ProgressBar-background bg-${bgVariant} w-100`}
+        className={`ProgressBar-background bg-${bgVariant} flex-grow-1`}
         style={{
           boxShadow: `0 0 0 ${outlineWidth} ${showOutline ? '#000' : '#DEE2E6'}`,
         }}
@@ -332,11 +320,13 @@ const ProgressBar: React.FC<Props> = (props) => {
             `ProgressBar-bar bg-${variant} text-start position-relative`
           }
           style={{
-            width: `${(status.usePercent ? status.percentProgress : (status.numComplete / status.total) * 100)}%`,
+            width: `${progressBarWidthPercent}%`,
             overflow: 'hidden',
           }}
         >
-          {striped && stripes}
+          {/* Show Strips (if they exist) */}
+          {stripes}
+          {/* Space so the bar has some content */}
           &nbsp;
         </div>
       </div>

package/src/components/Shimmer.tsx

@@ -8,8 +8,10 @@
 // Import React
 import React, { useRef, useEffect } from 'react';
 
-// Import helpers
-import waitMs from '../helpers/waitMs';
+// Import commonkit
+import {
+  waitMs,
+} from 'dce-commonkit';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

package/src/components/SimpleDateChooser.tsx

@@ -7,20 +7,18 @@
 // Import React
 import React, { useReducer } from 'react';
 
+// Import commonkit
+import {
+  getOrdinal,
+  getMonthName,
+  getTimeInfoInET,
+  ErrorWithCode,
+  CommonKitErrorCode,
+} from 'dce-commonkit';
+
 // Import AppWrapper helpers
 import { confirm } from './AppWrapper';
 
-// 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 ------------------------------- */
 /*------------------------------------------------------------------------*/
@@ -153,7 +151,7 @@ const getChoices = (
   if (dontAllowPast && dontAllowFuture) {
     throw new ErrorWithCode(
       'No past or future dates allowed',
-      ReactKitErrorCode.SimpleDateChooserInvalidDateRange,
+      CommonKitErrorCode.SimpleDateChooserInvalidDateRange,
     );
   }
 
@@ -161,7 +159,7 @@ const getChoices = (
   if (numMonthsToShow <= 0) {
     throw new ErrorWithCode(
       'numMonthsToShow must be positive',
-      ReactKitErrorCode.SimpleDateChooserInvalidNumMonths,
+      CommonKitErrorCode.SimpleDateChooserInvalidNumMonths,
     );
   }
 

package/src/components/SimpleTimeChooser.tsx

@@ -6,8 +6,10 @@
 // Import React
 import React from 'react';
 
-// Import helpers
-import padZerosLeft from '../helpers/padZerosLeft';
+// Import commonkit
+import {
+  padZerosLeft,
+} from 'dce-commonkit';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

package/src/helpers/canReviewLogs.test.ts

@@ -3,15 +3,17 @@
  * @author Gabe Abrams
  */
 
+// Import commonkit
+import {
+  LOG_REVIEW_STATUS_ROUTE,
+} from 'dce-commonkit';
+
 // Import dce-reactkit
 import stubServerEndpoint from './stubServerEndpoint';
 
 // Import main function
 import canReviewLogs, { resetCanReviewCache } from './canReviewLogs';
 
-// Import shared constants
-import LOG_REVIEW_STATUS_ROUTE from '../constants/LOG_REVIEW_STATUS_ROUTE';
-
 describe('helpers > canReviewLogs', () => {
   beforeEach(() => {
     // Reset the cache

package/src/helpers/canReviewLogs.ts

@@ -1,9 +1,11 @@
+// Import commonkit
+import {
+  LOG_REVIEW_STATUS_ROUTE,
+} from 'dce-commonkit';
+
 // Import shared helpers
 import visitServerEndpoint from './visitServerEndpoint';
 
-// Import shared constants
-import LOG_REVIEW_STATUS_ROUTE from '../constants/LOG_REVIEW_STATUS_ROUTE';
-
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Cache ------------------------------- */
 /*------------------------------------------------------------------------*/

package/src/helpers/initClient.tsx

@@ -1,15 +1,15 @@
+// Import commonkit
+import {
+  waitMs,
+  ErrorWithCode,
+  CommonKitErrorCode,
+} from 'dce-commonkit';
+
 // Import other components
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
 import { showFatalError } from '../components/AppWrapper';
 
-// Import other helpers
-import waitMs from './waitMs';
-
-// Import shared types
-import ErrorWithCode from '../errors/ErrorWithCode';
-import ReactKitErrorCode from '../types/ReactKitErrorCode';
-
 /*----------------------------------------*/
 /* ---------------- Types --------------- */
 /*----------------------------------------*/
@@ -80,7 +80,7 @@ export const getSendRequest = async () => {
       showFatalError(
         new ErrorWithCode(
           'Could not send a request because the request needed to be sent before dce-reactkit was properly initialized. Perhaps dce-reactkit was not initialized with initClient.',
-          ReactKitErrorCode.NoCACCLSendRequestFunction,
+          CommonKitErrorCode.NoCACCLSendRequestFunction,
         ),
       );
     }