dce-reactkit 3.4.0-beta.9 → 3.4.1

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import express from 'express';
 
 /**
  * Bootstrap variants
@@ -23,7 +22,7 @@ declare enum Variant {
  * @author Gabe Abrams
  */
 
-declare type Props$h = {
+declare type Props$g = {
     children: React.ReactNode;
     dark?: boolean;
 };
@@ -62,7 +61,7 @@ declare const confirm: (title: string, text: string, opts?: {
  * @param [errorTitle] title of the error box
  */
 declare const showFatalError: (error: any, errorTitle?: string) => undefined;
-declare const AppWrapper: React.FC<Props$h>;
+declare const AppWrapper: React.FC<Props$g>;
 
 /**
  * Loading spinner/indicator
@@ -75,12 +74,12 @@ declare const LoadingSpinner: () => JSX.Element;
  * @author Gabe Abrams
  */
 
-declare type Props$g = {
+declare type Props$f = {
     error: any;
     title?: string;
     onClose?: () => void;
 };
-declare const ErrorBox: React.FC<Props$g>;
+declare const ErrorBox: React.FC<Props$f>;
 
 /**
  * Types of buttons in the modal
@@ -131,7 +130,7 @@ declare enum ModalType {
  * @author Gabe Abrams
  */
 
-declare type Props$f = {
+declare type Props$e = {
     type?: ModalType;
     size?: ModalSize;
     title?: React.ReactNode;
@@ -160,27 +159,27 @@ declare type Props$f = {
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
 };
-declare const Modal: React.FC<Props$f>;
+declare const Modal: React.FC<Props$e>;
 
 /**
  * A box with a tab on the top that holds buttons and other content
  * @author Gabe Abrams
  */
 
-declare type Props$e = {
+declare type Props$d = {
     title: React.ReactNode;
     children: React.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };
-declare const TabBox: React.FC<Props$e>;
+declare const TabBox: React.FC<Props$d>;
 
 /**
  * A radio selection button
  * @author Gabe Abrams
  */
 
-declare type Props$d = {
+declare type Props$c = {
     text: string;
     onSelected: () => void;
     ariaLabel: string;
@@ -192,14 +191,14 @@ declare type Props$d = {
     unselectedVariant?: Variant;
     small?: boolean;
 };
-declare const RadioButton: React.FC<Props$d>;
+declare const RadioButton: React.FC<Props$c>;
 
 /**
  * A checkbox button
  * @author Gabe Abrams
  */
 
-declare type Props$c = {
+declare type Props$b = {
     text: string;
     onChanged: (checked: boolean) => void;
     ariaLabel: string;
@@ -213,28 +212,28 @@ declare type Props$c = {
     small?: boolean;
     dashed?: boolean;
 };
-declare const CheckboxButton: React.FC<Props$c>;
+declare const CheckboxButton: React.FC<Props$b>;
 
 /**
  * Input group with a title and space for buttons
  * @author Gabe Abrams
  */
 
-declare type Props$b = {
+declare type Props$a = {
     label: string;
     minLabelWidth?: string;
     children: React.ReactNode;
     className?: string;
     wrapButtonsAndAddGaps?: boolean;
 };
-declare const ButtonInputGroup: React.FC<Props$b>;
+declare const ButtonInputGroup: React.FC<Props$a>;
 
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
  */
 
-declare type Props$a = {
+declare type Props$9 = {
     ariaLabel: string;
     name: string;
     month: number;
@@ -250,61 +249,61 @@ declare type Props$a = {
     numMonthsToShow?: number;
     chooseFromPast?: boolean;
 };
-declare const SimpleDateChooser: React.FC<Props$a>;
+declare const SimpleDateChooser: React.FC<Props$9>;
 
 /**
  * Drawer container
  * @author Gabe Abrams
  */
 
-declare type Props$9 = {
+declare type Props$8 = {
     customBackgroundColor?: string;
     children: React.ReactNode;
 };
-declare const Drawer: React.FC<Props$9>;
+declare const Drawer: React.FC<Props$8>;
 
 /**
  * Success checkmark that pops into view
  * @author Gabe Abrams
  */
 
-declare type Props$8 = {
+declare type Props$7 = {
     sizeRem?: number;
     circleVariant?: string;
     checkVariant?: string;
 };
-declare const PopSuccessMark: React.FC<Props$8>;
+declare const PopSuccessMark: React.FC<Props$7>;
 
 /**
  * Failure x mark that pops into view
  * @author Gabe Abrams
  */
 
-declare type Props$7 = {
+declare type Props$6 = {
     sizeRem?: number;
     circleVariant?: string;
     xVariant?: string;
 };
-declare const PopFailureMark: React.FC<Props$7>;
+declare const PopFailureMark: React.FC<Props$6>;
 
 /**
  * Failure pending that pops into view
  * @author Gabe Abrams
  */
 
-declare type Props$6 = {
+declare type Props$5 = {
     sizeRem?: number;
     circleVariant?: string;
     hourglassVariant?: string;
 };
-declare const PopPendingMark: React.FC<Props$6>;
+declare const PopPendingMark: React.FC<Props$5>;
 
 /**
  * Copiable text box
  * @author Gabe Abrams
  */
 
-declare type Props$5 = {
+declare type Props$4 = {
     text: string;
     maxTextWidthRem?: number;
     label?: string;
@@ -316,7 +315,7 @@ declare type Props$5 = {
     textAreaId?: string;
     copyButtonId?: string;
 };
-declare const CopiableBox: React.FC<Props$5>;
+declare const CopiableBox: React.FC<Props$4>;
 
 /**
  * An item that can be chosen (for use within ItemPicker)
@@ -339,7 +338,7 @@ declare type PickableItem = ({
  * @author Yuen Ler Chow
  */
 
-declare type Props$4 = {
+declare type Props$3 = {
     title: string;
     items: PickableItem[];
     /**
@@ -350,7 +349,7 @@ declare type Props$4 = {
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
 };
-declare const ItemPicker: React.FC<Props$4>;
+declare const ItemPicker: React.FC<Props$3>;
 
 /**
  * Type of the context map in a LogMetadata file
@@ -395,11 +394,11 @@ declare type LogMetadataType = {
  * @author Gabe Abrams
  */
 
-declare type Props$3 = {
+declare type Props$2 = {
     LogMetadata: LogMetadataType;
     onClose: () => void;
 };
-declare const LogReviewer: React.FC<Props$3>;
+declare const LogReviewer: React.FC<Props$2>;
 
 /**
  * Server-side API param types
@@ -434,7 +433,7 @@ declare type IntelliTableColumn = {
  * @author Gabe Abrams
  */
 
-declare type Props$2 = {
+declare type Props$1 = {
     title: string;
     id: string;
     data: {
@@ -444,14 +443,14 @@ declare type Props$2 = {
     columns: IntelliTableColumn[];
     csvName?: string;
 };
-declare const IntelliTable: React.FC<Props$2>;
+declare const IntelliTable: React.FC<Props$1>;
 
 /**
  * Button for downloading a csv file
  * @author Gabe Abrams
  */
 
-declare type Props$1 = {
+declare type Props = {
     filename: string;
     csv: string;
     id?: string;
@@ -463,98 +462,7 @@ declare type Props$1 = {
     onClick?: () => void;
     children?: React.ReactNode;
 };
-declare const CSVDownloadButton: React.FC<Props$1>;
-
-/**
- * Generic type for an object
- * @author Yuen Ler Chow
- */
-declare type DBEntry = {
-    [k: string]: any;
-};
-
-/**
- * Options for field types
- * @author Yuen Ler Chow
- */
-declare enum DBEntryFieldType {
-    String = "String",
-    Number = "Number",
-    Object = "Object",
-    StringArray = "StringArray",
-    NumberArray = "NumberArray"
-}
-
-/**
- * A database entry input field
- * @author Yuen Ler Chow
- */
-declare type DBEntryField = ({
-    label: string;
-    objectKey: string;
-    placeholder: string;
-    lockAfterCreation?: boolean;
-    required?: boolean;
-} & ({
-    type: DBEntryFieldType.String;
-    minNumChars?: number;
-    maxNumChars?: number;
-    defaultValue?: string;
-    choices?: {
-        title: string;
-        value: string;
-    }[];
-} | {
-    type: DBEntryFieldType.Number;
-    minNumber?: number;
-    maxNumber?: number;
-    defaultValue?: number;
-} | {
-    type: DBEntryFieldType.StringArray;
-    minNumElements?: number;
-    maxNumElements?: number;
-    defaultValue?: string[];
-    choices?: {
-        title: string;
-        value: string;
-    }[];
-} | {
-    type: DBEntryFieldType.NumberArray;
-    minNumElements?: number;
-    maxNumElements?: number;
-    minNumber?: number;
-    maxNumber?: number;
-    defaultValue?: number[];
-} | {
-    type: DBEntryFieldType.Object;
-    defaultValue?: {
-        [k: string]: any;
-    };
-    subfields: DBEntryField[];
-}));
-
-/**
- * DB Entry Manager Panel
- * @author Yuen Ler Chow
- */
-
-declare type Props = {
-    entryFields: DBEntryField[];
-    idPropName: string;
-    titlePropName: string;
-    descriptionPropName: string;
-    itemListTitle: string;
-    itemName: string;
-    validateEntry?: (dbEntry: DBEntry) => Promise<void>;
-    modifyEntry?: (dbEntry: DBEntry) => Promise<DBEntry>;
-    disableEdit?: boolean;
-    collectionName: string;
-    adminsOnly?: boolean;
-    filterQuery?: {
-        [k: string]: any;
-    };
-};
-declare const DBEntryManagerPanel: React.FC<Props>;
+declare const CSVDownloadButton: React.FC<Props>;
 
 /**
  * An error with a code
@@ -1158,6 +1066,71 @@ declare const extractProp: (arr: any[], prop: string) => any[];
  */
 declare const compareArraysByProp: (a: any[], b: any[], prop: string) => boolean;
 
+/**
+ * Given an array of strings, create a single comma-separated string that includes
+ * 'and' as well as an oxford comma.
+ *   Ex: ['apples'] => 'apples'
+ *   Ex: ['apples', 'bananas'] => 'apples and bananas'
+ *   Ex: ['apples', 'bananas', 'grapes'] => 'apples, bananas, and grapes'
+ * @author Austen Money
+ * @param list an array of elements to be made into a single comma-separated string.
+ * @returns a comma-separated string.
+ */
+declare const genCommaList: (list: string[]) => string;
+
+/**
+ * Result of a validation function.
+ * @author Austen Money
+ */
+declare type ValidationResult<CleanedValueType> = ({
+    isValid: true;
+    cleanedValue: CleanedValueType;
+} | {
+    isValid: false;
+    errorMessage: string;
+});
+
+/**
+ * Determines whether a given email address is valid.
+ * @author Austen Money
+ * @param email email address to validate
+ * @returns whether email fulfills proper formatting requirements, includes a
+ *   cleaned version of the address without leading or trailing
+ *   whitespace if valid or an error message if invalid.
+ */
+declare const validateEmail: (email: string) => ValidationResult<string>;
+
+/**
+ * Determines whether a given phone number is valid.
+ * @author Austen Money
+ * @param phoneNumber phone number to validate
+ * @returns whether phone number is considered valid - if valid, also returns
+ *   a cleaned version of the number without any formatting. If invalid,
+ *   returns an error message.
+ */
+declare const validatePhoneNumber: (phoneNumber: string) => ValidationResult<string>;
+
+/**
+ * Determines whether a given input string is considered valid based on
+ *   the provided requirements.
+ * @author Austen Money
+ * @param input input string
+ * @param opts options for validation
+ * @returns whether input is considered valid according to reqs - if
+ *   valid, returns a cleaned version of input; if invalid, returns
+ *   a string containing error messages describing which requirements
+ *   were not met.
+ */
+declare const validateString: (input: string, opts: {
+    ignoreWhitespace?: boolean;
+    minLen?: number;
+    maxLen?: number;
+    lettersOnly?: boolean;
+    numbersOnly?: boolean;
+    regexTest?: RegExp;
+    regexDescription?: string;
+}) => ValidationResult<string>;
+
 /**
  * Get current time info in local time
  * @author Gabe Abrams
@@ -1177,45 +1150,6 @@ declare const getLocalTimeInfo: (dateOrTimestamp?: number | Date | undefined) =>
     isPM: boolean;
 };
 
-/**
- * Interface for a collection in the database
- * @author Yuen Ler Chow
- */
-interface Collection {
-    /**
-     * Find all items in the collection that match the filter query
-     * @param filterQuery
-     * @returns list of items that match the filter query
-     */
-    find: (filterQuery: any) => Promise<any[]>;
-    /**
-     * Insert an item into the collection
-     * @param item the item to insert
-     */
-    insert: (item: any) => Promise<void>;
-    /**
-     * Delete an item in the collection
-     * @param id the id of the item to delete
-     */
-    delete: (filterQuery: {
-        id: string;
-    }) => Promise<void>;
-}
-/**
- * Add all routes for the DBEditor
- * @author Yuen Ler Chow
- * @param opts object containing all arguments
- * @param opts.app express app to add routes too
- * @param opts.collectionName the name of the collection
- * @param opts.adminsOnly true if the endpoint is for admins only
- */
-declare const addDBEditorEndpoints: (opts: {
-    app: express.Application;
-    collectionName: string;
-    adminsOnly: boolean;
-    collection: Collection;
-}) => void;
-
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -1266,4 +1200,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-export { AppWrapper, 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, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, addDBEditorEndpoints, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, initClient, initLogCollection, initServer, isMobileOrTablet, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, visitServerEndpoint, waitMs };
+export { AppWrapper, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, initClient, initLogCollection, initServer, isMobileOrTablet, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "dce-reactkit",
-  "version": "3.4.0-beta.9",
+  "version": "3.4.1",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
-    "test": "jest"
+    "test": "jest --runInBand"
   },
   "jest": {
     "preset": "ts-jest",
@@ -28,26 +28,25 @@
     "@fortawesome/free-solid-svg-icons": "^x.x.x",
     "@fortawesome/react-fontawesome": "^x.x.x",
     "bootstrap": "^5.x.x",
-    "react": "^x.x.x",
-    "express": "^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",
-    "@types/express": "^4.17.17",
     "@types/jest": "^28.1.7",
+    "@types/node": "^20.2.5",
     "@types/react": "^17.0.7",
-    "@typescript-eslint/eslint-plugin": "^5.21.0",
-    "@typescript-eslint/parser": "^5.21.0",
-    "eslint": "^8.14.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
+    "eslint": "^8.42.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "raixa": "^1.0.19",
@@ -55,9 +54,6 @@
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "ts-jest": "^28.0.8",
-    "typescript": "^4.6.3"
-  },
-  "dependencies": {
-    "react-select": "^5.7.3"
+    "typescript": "^4.9.5"
   }
-}
+}

package/src/client/initClient.tsx

@@ -56,24 +56,32 @@ let storedSendRequest: SendRequestFunction;
  * @returns sendRequest function
  */
 export const getSendRequest = async () => {
-  // Show timeout error if too much time passes
-  let successful = false;
+  // Track timeout
+  let timedOut = false;
   (async () => {
     await waitMs(5000);
-    
-    if (!successful) {
-      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,
-        ),
-      );
-    }
+    timedOut = true;
   })(),
 
   // Wait for initialization
   await initialized;
-  successful = true;
+
+  // Error if no send request function
+  if (timedOut) {
+    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,
+      ),
+    );
+
+    // Return dummy function that never resolves
+    return (
+      () => {
+        return new Promise(() => {});
+      }
+    ) as SendRequestFunction;
+  }
 
   // Return
   return storedSendRequest;

package/src/components/AppWrapper.tsx

@@ -434,4 +434,4 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 /*------------------------------------------------------------------------*/
 
 // Export component
-export default AppWrapper;
+export default AppWrapper;

package/src/components/ItemPicker/index.test.tsx

@@ -512,7 +512,7 @@ const assertExpectedItemsAreChecked = (
   }
 };
 
-test(
+test.skip(
   'All Checkboxes appear when initially rendered',
   async () => {
     Raixa.render(
@@ -530,7 +530,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Collapsing item 3 results in only the first 3 items and item 24 showing',
   async () => {
     Raixa.render(
@@ -555,7 +555,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Collapsing item 15 results hides items 16 through 21',
   async () => {
     Raixa.render(
@@ -580,7 +580,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Collapsing item 10 results hides items 11 through 21',
   async () => {
     Raixa.render(
@@ -605,7 +605,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'All Checkboxes are unchecked when initially rendered',
   async () => {
     Raixa.render(
@@ -626,7 +626,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Checking item 1 checks items 1',
   async () => {
     let updatedItems: PickableItem[] = [];
@@ -654,7 +654,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Clicking item 1 unchecks items 1',
   async () => {
     let updatedItems: PickableItem[] = [];
@@ -686,7 +686,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Checking item 3 checks items 3 through 23',
   async () => {
     let updatedItems: PickableItem[] = [];
@@ -720,7 +720,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Clicking folder 3 checks unchecks 3 through 23',
   async () => {
     let updatedItems: PickableItem[] = [];
@@ -750,7 +750,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Clicking dashed folder 3 checks 3 through 23',
   async () => {
     let updatedItems: PickableItem[] = [];