dce-reactkit 3.5.1-beta.1 → 3.5.3

package/dist/esm/index.js

@@ -1275,6 +1275,7 @@ const getMonthName = (month) => {
     return ((_a = monthNames[month - 1]) !== null && _a !== void 0 ? _a : monthNames[0]);
 };
 
+// Constants
 const ORDINALS = ['th', 'st', 'nd', 'rd'];
 /**
  * Get a number's ordinal
@@ -2270,12 +2271,13 @@ const roundToNumDecimals = (num, numDecimals) => {
  * @returns escaped cell text
  */
 const escapeCellText = (text) => {
-    if (!String(text).includes(',')) {
+    if (!String(text).includes(',')
+        && !String(text).includes('"')) {
         // No need to escape
         return String(text);
     }
     // Perform escape
-    return `"${String(text).replace(/"/g, '""')}`;
+    return `"${String(text).replace(/"/g, '""')}"`;
 };
 /**
  * Generate a CSV file
@@ -39431,7 +39433,12 @@ var CreatableSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 var CreatableSelect$1 = CreatableSelect;
 
-// Import React
+/**
+ * Multiselect component that allows the user to type in values and add them to
+ *   the multiselect component
+ * @author Yuen Ler Chow
+ * @author Gabe Abrams
+ */
 /* ------------- Actions ------------ */
 // Types of actions
 var ActionType$2;
@@ -39444,6 +39451,7 @@ var ActionType$2;
  * @author Yuen Ler Chow
  * @param state current state
  * @param action action to execute
+ * @returns updated state
  */
 const reducer$2 = (state, action) => {
     switch (action.type) {
@@ -39477,14 +39485,18 @@ const CreatableMultiselect = (props) => {
      * Creates an option for the multiselect component
      * @author Yuen Ler Chow
      * @param label label of the option
+     * @returns the new option
      */
     const createOption = (label) => {
         // set the value to the label without special characters and spaces, and lowercase
         return {
             label,
             value: (label
+                // Make lowercase
                 .toLowerCase()
+                // Replace special characters with nothing
                 .replace(/\W/g, '')
+                // Replace spaces with dashes
                 .replace(' ', '-')),
         };
     };
@@ -39514,6 +39526,7 @@ const CreatableMultiselect = (props) => {
                     return value === numberVal;
                 });
             }));
+            // Notify parent of new values
             onChange([...values, ...newValues]);
         }
         else {
@@ -39534,9 +39547,10 @@ const CreatableMultiselect = (props) => {
                     return value === val;
                 });
             }));
+            // Notify parent of new values
             onChange([...values, ...newValues]);
         }
-        // resets text field to empty because the values have been added
+        // Reset text field to empty because the values have been added
         dispatch({
             type: ActionType$2.SetInputValue,
             value: '',
@@ -39595,7 +39609,7 @@ const CreatableMultiselect = (props) => {
         // Update values based on type
         if (type === DBEntryFieldType$1.NumberArray) {
             const numberValues = newValues.map((val) => {
-                return Number(val.value);
+                return Number.parseFloat(val.value);
             });
             onChange(numberValues);
         }
@@ -39617,6 +39631,7 @@ const CreatableMultiselect = (props) => {
 /**
  * Panel for adding a DBEntry to the database
  * @author Yuen Ler Chow
+ * @author Gabe Abrams
  */
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Style ------------------------------- */
@@ -39640,6 +39655,7 @@ var ActionType$1;
  * @author Yuen Ler Chow
  * @param state current state
  * @param action action to execute
+ * @returns updated state
  */
 const reducer$1 = (state, action) => {
     switch (action.type) {
@@ -39690,7 +39706,10 @@ const AddOrEditDBEntry = (props) => {
                 entry[field.objectKey] = field.defaultValue;
             }
         });
-        const modifiedEntry = modifyEntry ? modifyEntry(entry) : entry;
+        // Modify entry if needed
+        const modifiedEntry = (modifyEntry
+            ? yield modifyEntry(entry)
+            : entry);
         // add id key to entry so that when we delete the item, the key will always be "id"
         modifiedEntry.id = modifiedEntry[idPropName];
         // Send to server
@@ -39727,14 +39746,18 @@ const AddOrEditDBEntry = (props) => {
         for (let i = 0; i < fields.length; i += 1) {
             const field = fields[i];
             const value = entry[field.objectKey];
-            // Check if required field is empty. Field is automatically required if it is the idPropName
+            // Check if required field is empty. Field is automatically required if
+            // it is the idPropName
             if ((field.required || (field.objectKey === idPropName)) && !value) {
                 validationError = `Please fill in the ${field.label} field`;
                 return validationError;
             }
             // Check if unique field is unique
             if (field.objectKey === idPropName && !dbEntryToEdit) {
-                if (entries.find((e) => { return e[idPropName] === value; })) {
+                const notUnique = entries.find((e) => {
+                    return e[idPropName] === value;
+                });
+                if (notUnique) {
                     validationError = `An item with the ${field.label} ${value} already exists. ${field.label} must be unique.`;
                     return validationError;
                 }
@@ -39846,6 +39869,7 @@ const AddOrEditDBEntry = (props) => {
          * @author Yuen Ler Chow
          * @param field the entry field to render
          * @param disabled true if the field should be disabled
+         * @returns rendered entry field
          */
         const renderEntryField = (field, disabled) => {
             if (field.type === DBEntryFieldType$1.String) {
@@ -39967,9 +39991,11 @@ const AddOrEditDBEntry = (props) => {
             }),
             React__default.createElement("div", { className: "text-center mt-2" },
                 React__default.createElement("button", { type: "button", id: "AddOrEditDBEntry-save-changes-button", className: "btn btn-primary btn-lg me-1", "aria-label": "Save changes", onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                        // Show validation errors
                         if (validationError && validationError.length > 0) {
                             return alert$1('Please fix the following error', validationError);
                         }
+                        // Run the included validator if it exists
                         if (validateEntry) {
                             try {
                                 yield validateEntry(entry);
@@ -39982,7 +40008,7 @@ const AddOrEditDBEntry = (props) => {
                     }) },
                     React__default.createElement(FontAwesomeIcon, { icon: faSave, className: "me-1" }),
                     "Save"),
-                React__default.createElement("button", { type: "button", id: "AddOrEditDBEntry-cancel-button", className: "btn btn-secondary btn-lg me-1", "aria-label": "save changes", onClick: cancel }, "Cancel"))));
+                React__default.createElement("button", { type: "button", id: "AddOrEditDBEntry-cancel-button", className: "btn btn-secondary btn-lg", "aria-label": "save changes", onClick: cancel }, "Cancel"))));
     }
     /*----------------------------------------*/
     /* --------------- Main UI -------------- */
@@ -40009,6 +40035,7 @@ const generateEndpointPath = (collectionName, adminsOnly) => {
 /**
  * DB Entry Manager Panel
  * @author Yuen Ler Chow
+ * @author Gabe Abrams
  */
 /* ------------- Actions ------------ */
 // Types of actions
@@ -40032,6 +40059,7 @@ var ActionType;
  * @author Yuen Ler Chow
  * @param state current state
  * @param action action to execute
+ * @returns updated state
  */
 const reducer = (state, action) => {
     switch (action.type) {
@@ -41661,8 +41689,14 @@ const initLogCollection = (Collection) => {
     });
 };
 
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Cache ------------------------------- */
+/*------------------------------------------------------------------------*/
 // Cache user's ability
 let canReview = undefined;
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Main -------------------------------- */
+/*------------------------------------------------------------------------*/
 /**
  * Check if the current user can review logs
  * @author Gabe Abrams
@@ -41702,36 +41736,49 @@ const extractProp = (arr, prop) => {
     });
 };
 
-// Import shared helpers
 /**
  * Compare two arrays of objects by only comparing the values in a specific
  *  property (e.g. compare user arrays by comparing their user.id values)
  * @author Gabe Abrams
  * @param a the first array
  * @param b the second array
- * @param prop the property to compare with
+ * @param prop the property to compare with, or an array of props to compare
+ *   with (if array, all values associated with those props must match)
  * @returns true if the arrays contain the same objects as determined by
  *   the values associated with each object's prop
  */
 const compareArraysByProp = (a, b, prop) => {
-    // Extract values for comparison
-    const aVals = new Set(extractProp(a, prop));
-    const bVals = new Set(extractProp(b, prop));
-    // Compare sizes first
-    if (aVals.size !== bVals.size) {
+    // Immediately return if size of arrays is different
+    if (a.length !== b.length) {
         return false;
     }
-    // Same number of items. Make sure every object in aVals appears in bVals
-    // (if so, they should be equivalent since the sizes are the same)
-    // > Create map of items in bVals
-    const inBVals = {}; // item => true if in bVals
-    Array.from(bVals.values()).forEach((item) => {
-        inBVals[item] = true;
-    });
-    // > Loop through aVals and make sure every item is in bVals
-    return Array.from(aVals.values()).every((item) => {
-        return inBVals[item];
-    });
+    // Get all props
+    const props = (Array.isArray(prop) ? prop : [prop]);
+    // Clone second array so we can work on it
+    const bCloned = [...b];
+    // Remove elements from b as we find them in a
+    for (let i = 0; i < a.length; i++) {
+        // Find matching element in b
+        const matchingIndex = bCloned.findIndex((bItem) => {
+            // Compare based on all props
+            return props.every((propToCompareBy) => {
+                var _a;
+                const aVal = ((_a = a[i]) !== null && _a !== void 0 ? _a : {})[propToCompareBy];
+                const bVal = (bItem !== null && bItem !== void 0 ? bItem : {})[propToCompareBy];
+                return aVal === bVal;
+            });
+        });
+        // Check if no match
+        const noMatch = (matchingIndex < 0);
+        // If no match, there's no corresponding element in b
+        if (noMatch) {
+            return false;
+        }
+        // Remove the matching element
+        bCloned.splice(matchingIndex, 1);
+    }
+    // If we made it here, all elements in a have a corresponding element in b
+    return true;
 };
 
 /**
@@ -41789,9 +41836,11 @@ const getLocalTimeInfo = (dateOrTimestamp) => {
  * @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
+ * @param opts.collection dce-mango db collection
  */
 const addDBEditorEndpoints = (opts) => {
     const { app, collectionName, adminsOnly, collection, } = opts;
+    // Generate the endpoint path
     const endpointPath = generateEndpointPath(collectionName, adminsOnly);
     /**
      * List all items in the collection
@@ -41840,6 +41889,246 @@ const addDBEditorEndpoints = (opts) => {
     }));
 };
 
+/**
+ * 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.
+ */
+const genCommaList = (list) => {
+    const { length } = list;
+    return (length < 2
+        ? list.join('')
+        : `${list.slice(0, length - 1).join(', ')}${length < 3 ? ' and ' : ', and '}${list[length - 1]}`);
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Constants ----------------------------- */
+/*------------------------------------------------------------------------*/
+const INVALID_REGEX_ERROR = 'input does not follow the requested format';
+const INVALID_EMAIL_ERROR = 'Please provide a valid email address.';
+const INVALID_PHONE_ERROR = 'Please provide a valid phone number.';
+const INVALID_STRING_ERRORS = {
+    MIN_LEN: (minLen) => {
+        return `input must not be under ${minLen} character(s)`;
+    },
+    MAX_LEN: (maxLen) => {
+        return `input must not be over ${maxLen} character(s)`;
+    },
+    LETTERS_ONLY: 'input must only contain letters',
+    NUMBERS_ONLY: 'input must only contain numbers',
+    MESSAGE_INTRO: 'The following error(s) occurred: ',
+};
+
+// Import constants
+/**
+ * Determines whether a given input string is considered valid based on
+ *   the provided regex.
+ * @author Austen Money
+ * @param opts object containing all args
+ * @param opts.input user-provided input to validate
+ * @param opts.regex regular expression to check against input
+ * @param [opts.regexDescription] description of what regexString is checking
+ *   for, used to customize error message
+ * @returns the unchanged input if valid, or a customized error message if
+ *   invalid
+ */
+const validateRegex = (opts) => {
+    // customize error message in case of invalid input
+    const errorMessage = `${INVALID_REGEX_ERROR}${opts.regexDescription
+        ? ': '
+        : ''}${opts.regexDescription}`;
+    // return error message if test is invalid, or input string if valid
+    return (opts.regex.test(opts.input)
+        ? {
+            isValid: true,
+            cleanedValue: opts.input,
+        }
+        : {
+            isValid: false,
+            errorMessage,
+        });
+};
+
+// Import helpers
+/**
+ * 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.
+ */
+const validateEmail = (email) => {
+    // validation regex, sourced from HTML living standard: http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#e-mail-state-(type=email)
+    // eslint-disable-next-line max-len
+    const emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+    // remove leading and trailing whitespace
+    const cleanedValue = email.replace(/^\s+|\s+$/g, '');
+    // validate email with regex, and return error if not valid
+    return (validateRegex({
+        input: cleanedValue,
+        regex: emailRegex,
+    }).isValid
+        ? {
+            isValid: true,
+            cleanedValue,
+        }
+        : {
+            isValid: false,
+            errorMessage: INVALID_EMAIL_ERROR,
+        });
+};
+
+// Import helpers
+/**
+ * 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.
+ */
+const validatePhoneNumber = (phoneNumber) => {
+    // regex to validate phone number
+    const validationRegex = /^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$/;
+    // validate phone number with regex
+    const validationResponse = validateRegex({
+        input: phoneNumber,
+        regex: validationRegex,
+    });
+    // remove all non-digits from number
+    const cleanedValue = phoneNumber.replace(/\D/g, '');
+    // return cleaned value if valid, or error message if invalid
+    return (validationResponse.isValid
+        ? {
+            isValid: true,
+            cleanedValue,
+        }
+        : {
+            isValid: false,
+            errorMessage: INVALID_PHONE_ERROR,
+        });
+};
+
+// Import helpers
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Constants ----------------------------- */
+/*------------------------------------------------------------------------*/
+// define minimum and maximum range for lowercase ASCII chars
+const LOWERCASE_MIN = 65;
+const LOWERCASE_MAX = 90;
+// define minimum and maximum range for uppercase ASCII chars
+const UPPERCASE_MIN = 97;
+const UPPERCASE_MAX = 122;
+// define minimum and maximum range for ASCII digits
+const DIGIT_MIN = 48;
+const DIGIT_MAX = 57;
+/*------------------------------------------------------------------------*/
+/* ---------------------------- Main Function --------------------------- */
+/*------------------------------------------------------------------------*/
+/**
+ * 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.
+ */
+const validateString = (input, opts) => {
+    // stores all invalid input errors
+    const errorMessages = [];
+    // contains version of input that will be returned
+    let cleanedValue = input;
+    // remove whitespace if required
+    if (opts.ignoreWhitespace) {
+        cleanedValue = input.replace(/\s+/g, '');
+    }
+    // apply max char requirement
+    if (opts.minLen) {
+        if (cleanedValue.length < opts.minLen) {
+            errorMessages.push(INVALID_STRING_ERRORS.MIN_LEN(opts.minLen));
+        }
+    }
+    // apply max char requirement
+    if (opts.maxLen) {
+        if (cleanedValue.length > opts.maxLen) {
+            errorMessages.push(INVALID_STRING_ERRORS.MAX_LEN(opts.maxLen));
+        }
+    }
+    // apply alphabetical requirement
+    if (opts.lettersOnly) {
+        // remove diacritics
+        cleanedValue = cleanedValue.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+        const containsNonLetters = (cleanedValue
+            // split into characters
+            .split('')
+            // convert into character codes
+            .map((curr) => {
+            return curr.charCodeAt(0);
+        })
+            // check for non-letters
+            .some((currCode) => {
+            return (!(currCode >= LOWERCASE_MIN && currCode <= LOWERCASE_MAX)
+                && !(currCode >= UPPERCASE_MIN && currCode <= UPPERCASE_MAX));
+        }));
+        if (containsNonLetters) {
+            errorMessages.push(INVALID_STRING_ERRORS.LETTERS_ONLY);
+        }
+    }
+    // apply numerical requirement
+    if (opts.numbersOnly) {
+        const containsNonNumbers = (cleanedValue
+            // split into characters
+            .split('')
+            // convert into character codes
+            .map((curr) => {
+            return curr.charCodeAt(0);
+        })
+            // check for non-numbers
+            .some((currCode) => {
+            return (!(currCode >= DIGIT_MIN && currCode <= DIGIT_MAX));
+        }));
+        if (containsNonNumbers) {
+            errorMessages.push(INVALID_STRING_ERRORS.NUMBERS_ONLY);
+        }
+    }
+    // apply regex requirement
+    if (opts.regexTest) {
+        const regex = opts.regexTest;
+        // validate and create customized error message if description is provided
+        const result = validateRegex({
+            input: cleanedValue,
+            regex,
+            regexDescription: opts.regexDescription,
+        });
+        // if string did not pass regex validation, add error message
+        if (result.isValid === false) {
+            errorMessages.push(result.errorMessage);
+        }
+    }
+    // combine all error messages into one string to return
+    const errorMessage = `${INVALID_STRING_ERRORS.MESSAGE_INTRO}${genCommaList(errorMessages)}.`;
+    return (
+    // if no error messages, string is valid; if not, it is invalid
+    errorMessages.length === 0
+        ? {
+            isValid: true,
+            cleanedValue,
+        }
+        : {
+            isValid: false,
+            errorMessage,
+        });
+};
+
 /**
  * Days of the week
  * @author Gabe Abrams
@@ -41856,5 +42145,5 @@ var DayOfWeek;
 })(DayOfWeek || (DayOfWeek = {}));
 var DayOfWeek$1 = DayOfWeek;
 
-export { AppWrapper, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntryFieldType$1 as DBEntryFieldType, DBEntryManagerPanel, DayOfWeek$1 as DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, ItemPicker, LoadingSpinner, LogAction$1 as LogAction, LogBuiltInMetadata, LogReviewer, LogSource$1 as LogSource, LogType$1 as LogType, MINUTE_IN_MS, Modal, ModalButtonType$1 as ModalButtonType, ModalSize$1 as ModalSize, ModalType$1 as ModalType, ParamType$1 as ParamType, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode$1 as ReactKitErrorCode, SimpleDateChooser, TabBox, Variant$1 as Variant, abbreviate, addDBEditorEndpoints, alert$1 as 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, DBEntryFieldType$1 as DBEntryFieldType, DBEntryManagerPanel, DayOfWeek$1 as DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, ItemPicker, LoadingSpinner, LogAction$1 as LogAction, LogBuiltInMetadata, LogReviewer, LogSource$1 as LogSource, LogType$1 as LogType, MINUTE_IN_MS, Modal, ModalButtonType$1 as ModalButtonType, ModalSize$1 as ModalSize, ModalType$1 as ModalType, ParamType$1 as ParamType, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode$1 as ReactKitErrorCode, SimpleDateChooser, TabBox, Variant$1 as Variant, abbreviate, addDBEditorEndpoints, alert$1 as 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 };
 //# sourceMappingURL=index.js.map