dce-reactkit 3.1.4 → 3.1.7

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import React from 'react';
  * @author Gabe Abrams
  */
 
-declare type Props$c = {
+declare type Props$d = {
     children: React.ReactNode;
     sendRequest: SendRequestFunction;
     dark?: boolean;
@@ -52,7 +52,7 @@ declare const confirm: (title: string, text: string) => Promise<boolean>;
  * @param [errorTitle] title of the error box
  */
 declare const showFatalError: (error: any, errorTitle?: string) => undefined;
-declare const AppWrapper: React.FC<Props$c>;
+declare const AppWrapper: React.FC<Props$d>;
 
 /**
  * Loading spinner/indicator
@@ -65,12 +65,12 @@ declare const LoadingSpinner: () => JSX.Element;
  * @author Gabe Abrams
  */
 
-declare type Props$b = {
+declare type Props$c = {
     error: any;
     title?: string;
     onClose?: () => void;
 };
-declare const ErrorBox: React.FC<Props$b>;
+declare const ErrorBox: React.FC<Props$c>;
 
 /**
  * Bootstrap variants
@@ -136,7 +136,7 @@ declare enum ModalType {
  * @author Gabe Abrams
  */
 
-declare type Props$a = {
+declare type Props$b = {
     type?: ModalType;
     size?: ModalSize;
     title?: React.ReactNode;
@@ -165,27 +165,27 @@ declare type Props$a = {
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
 };
-declare const Modal: React.FC<Props$a>;
+declare const Modal: React.FC<Props$b>;
 
 /**
  * A box with a tab on the top that holds buttons and other content
  * @author Gabe Abrams
  */
 
-declare type Props$9 = {
+declare type Props$a = {
     title: React.ReactNode;
     children: React.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };
-declare const TabBox: React.FC<Props$9>;
+declare const TabBox: React.FC<Props$a>;
 
 /**
  * A radio selection button
  * @author Gabe Abrams
  */
 
-declare type Props$8 = {
+declare type Props$9 = {
     text: string;
     onSelected: () => void;
     ariaLabel: string;
@@ -197,14 +197,14 @@ declare type Props$8 = {
     unselectedVariant?: Variant;
     small?: boolean;
 };
-declare const RadioButton: React.FC<Props$8>;
+declare const RadioButton: React.FC<Props$9>;
 
 /**
  * A checkbox button
  * @author Gabe Abrams
  */
 
-declare type Props$7 = {
+declare type Props$8 = {
     text: string;
     onChanged: (checked: boolean) => void;
     ariaLabel: string;
@@ -218,26 +218,26 @@ declare type Props$7 = {
     small?: boolean;
     dashed?: boolean;
 };
-declare const CheckboxButton: React.FC<Props$7>;
+declare const CheckboxButton: React.FC<Props$8>;
 
 /**
  * Input group with a title and space for buttons
  * @author Gabe Abrams
  */
 
-declare type Props$6 = {
+declare type Props$7 = {
     label: string;
     minLabelWidth?: string;
     children: React.ReactNode;
 };
-declare const ButtonInputGroup: React.FC<Props$6>;
+declare const ButtonInputGroup: React.FC<Props$7>;
 
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
  */
 
-declare type Props$5 = {
+declare type Props$6 = {
     ariaLabel: string;
     name: string;
     month: number;
@@ -252,60 +252,60 @@ declare type Props$5 = {
     onChange: (month: number, day: number, year: number) => void;
     numMonthsToShow?: number;
 };
-declare const SimpleDateChooser: React.FC<Props$5>;
+declare const SimpleDateChooser: React.FC<Props$6>;
 
 /**
  * Drawer container
  * @author Gabe Abrams
  */
 
-declare type Props$4 = {
+declare type Props$5 = {
     children: React.ReactNode;
 };
-declare const Drawer: React.FC<Props$4>;
+declare const Drawer: React.FC<Props$5>;
 
 /**
  * Success checkmark that pops into view
  * @author Gabe Abrams
  */
 
-declare type Props$3 = {
+declare type Props$4 = {
     sizeRem?: number;
     circleVariant?: string;
     checkVariant?: string;
 };
-declare const PopSuccessMark: React.FC<Props$3>;
+declare const PopSuccessMark: React.FC<Props$4>;
 
 /**
  * Failure x mark that pops into view
  * @author Gabe Abrams
  */
 
-declare type Props$2 = {
+declare type Props$3 = {
     sizeRem?: number;
     circleVariant?: string;
     xVariant?: string;
 };
-declare const PopFailureMark: React.FC<Props$2>;
+declare const PopFailureMark: React.FC<Props$3>;
 
 /**
  * Failure pending that pops into view
  * @author Gabe Abrams
  */
 
-declare type Props$1 = {
+declare type Props$2 = {
     sizeRem?: number;
     circleVariant?: string;
     hourglassVariant?: string;
 };
-declare const PopPendingMark: React.FC<Props$1>;
+declare const PopPendingMark: React.FC<Props$2>;
 
 /**
  * Copiable text box
  * @author Gabe Abrams
  */
 
-declare type Props = {
+declare type Props$1 = {
     text: string;
     maxTextWidthRem?: number;
     label: string;
@@ -317,7 +317,40 @@ declare type Props = {
     textAreaId?: string;
     copyButtonId?: string;
 };
-declare const CopiableBox: React.FC<Props>;
+declare const CopiableBox: React.FC<Props$1>;
+
+/**
+ * An item that can be chosen (for use within ItemPicker)
+ * @author Gabe Abrams
+ */
+declare type PickableItem = ({
+    id: number | string;
+    name: string;
+    link?: string;
+} & ({
+    isGroup: false;
+    checked: boolean;
+} | {
+    isGroup: true;
+    children: PickableItem[];
+}));
+
+/**
+ * Reusable nested item picker
+ * @author Yuen Ler Chow
+ */
+
+declare type Props = {
+    title: string;
+    items: PickableItem[];
+    /**
+     * Handler to call when item selection is changed
+     * @param updatedItems an updated copy of the list of items with checked
+     *   values updated
+     */
+    onChanged: (updatedItems: PickableItem[]) => void;
+};
+declare const ItemPicker: React.FC<Props>;
 
 /**
  * An error with a code
@@ -622,6 +655,18 @@ declare const stringsToHumanReadableList: (items: string[]) => string;
  */
 declare const onlyKeepLetters: (str: string) => string;
 
+/**
+ * Run tasks in parallel with a limit on how many tasks can execute at once.
+ *   No guarantees are made about the order of task execution
+ * @author Gabe Abrams
+ * @param taskFunctions functions that start asynchronous tasks and optionally
+ *   resolve with values
+ * @param [limit=no limit] maximum number of asynchronous tasks to permit to run at
+ *   once
+ * @returns array of resolved values in the same order as the task functions
+ */
+declare const parallelLimit: (taskFunctions: (() => Promise<any>)[], limit?: number | undefined) => Promise<any[]>;
+
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -653,4 +698,4 @@ declare enum DayOfWeek {
     Sunday = "u"
 }
 
-export { AppWrapper, ButtonInputGroup, CheckboxButton, CopiableBox, DAY_IN_MS, DayOfWeek, Drawer, ErrorBox, ErrorWithCode, HOUR_IN_MS, LoadingSpinner, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getHumanReadableDate, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, initServer, onlyKeepLetters, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, visitServerEndpoint, waitMs };
+export { AppWrapper, ButtonInputGroup, CheckboxButton, CopiableBox, DAY_IN_MS, DayOfWeek, Drawer, ErrorBox, ErrorWithCode, HOUR_IN_MS, ItemPicker, LoadingSpinner, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getHumanReadableDate, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, initServer, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, visitServerEndpoint, waitMs };

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "dce-reactkit",
-  "version": "3.1.4",
+  "version": "3.1.7",
   "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"
+    "build": "rm -rf dist && rollup -c",
+    "test": "jest"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom"
   },
   "repository": {
     "type": "git",
@@ -30,6 +35,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@rollup/plugin-typescript": "^8.3.2",
+    "@types/jest": "^28.1.7",
     "@types/react": "^17.0.7",
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
@@ -40,9 +46,13 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "raixa": "^1.0.19",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
+    "ts-jest": "^28.0.8",
     "typescript": "^4.6.3"
   }
 }

package/sandbox.js

@@ -0,0 +1,20 @@
+const { parallelLimit, waitMs } = require('.');
+
+(async () => {
+
+  const tasks = [2, 4, 3, 5, 6, 20, 1, 1, 1, 1, 5, 4, 6].map((sec, i) => {
+    return async () => {
+      let prefix = '';
+      for (let j = 0; j < i; j++) {
+        prefix += '\t';
+      }
+      for (let j = 0; j < sec * 5; j++) {
+        await waitMs(200);
+        console.log(`${prefix}${j}/${sec * 5}`);
+      }
+      return i;
+    };
+  });
+
+  const results = await parallelLimit(tasks, 1000);
+})();

package/src/components/ItemPicker/NestableItemList.tsx

@@ -0,0 +1,288 @@
+/**
+ * Reusable nested item picker
+ * @author Yuen Ler Chow
+ */
+
+// Import React
+import React, { useReducer } from 'react';
+
+// Import FontAwesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faChevronRight,
+  faChevronDown,
+} from '@fortawesome/free-solid-svg-icons';
+
+// Import shared components
+import CheckboxButton from '../CheckboxButton';
+import Variant from '../../types/Variant';
+
+// Import types
+import PickableItem from './types/PickableItem';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // List of items to show
+  items: PickableItem[],
+  /**
+   * Handler to call when item selection is changed
+   * @param updatedItems an updated copy of the list of items with checked
+   *   values updated
+   */
+  onChanged: (updatedItems: PickableItem[]) => void,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  State                                 */
+/*------------------------------------------------------------------------*/
+
+/* -------- State Definition -------- */
+
+type State = {
+  // True if children are being shown
+  isShowingItems: boolean,
+};
+
+/* ------------- Actions ------------ */
+
+// Types of actions
+enum ActionType {
+  // Toggle whether the children are being shown
+  ToggleItems = 'toggle-items',
+}
+
+// Action definitions
+type Action = (
+  | {
+    // Action type
+    type: ActionType.ToggleItems,
+  }
+);
+
+/**
+ * Reducer that executes actions
+ * @author Yuen Ler Chow
+ * @param state current state
+ * @param action action to execute
+ */
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case ActionType.ToggleItems: {
+      return { isShowingItems: !state.isShowingItems };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const NestableItemList: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    items,
+    onChanged,
+  } = props;
+
+  /* -------------- State ------------- */
+
+  // Initial state
+  const initialState: State = {
+    isShowingItems: true,
+  };
+
+  // Initialize state
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  // Destructure common state
+  const {
+    isShowingItems,
+  } = state;
+
+  /*------------------------------------------------------------------------*/
+  /*                           Component Functions                          */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Checks if all items in a list are checked
+   * @author Yuen Ler Chow
+   * @param pickableItems a list of items
+   * @returns true if all items are checked. If any item is a group,
+   *   we recursively check its children
+   */
+  const allChecked = (pickableItems: PickableItem[]): boolean => {
+    return pickableItems.every((item: PickableItem) => {
+      if (item.isGroup) {
+        return allChecked(item.children);
+      }
+      return item.checked;
+    });
+  };
+
+  /**
+   * Checks if none of the items in a list are checked
+   * @author Yuen Ler Chow
+   * @param pickableItems a list of items
+   * @returns true if all items are unchecked. If any item is a group, we
+   *   recursively check its children
+   */
+  const noneChecked = (pickableItems: PickableItem[]): boolean => {
+    return pickableItems.every((item: PickableItem) => {
+      if (item.isGroup) {
+        return noneChecked(item.children);
+      }
+      return !item.checked;
+    });
+  };
+
+  /**
+   * Change whether specific items are checked
+   * @author Yuen Ler Chow
+   * @param id the id of the item we want to check or uncheck OR true if
+   *   we are checking/unchecking all items, independent of their id
+   * @param checked if true, the item will be checked.
+   * @param pickableItems the list of items we iterate through to find the item
+   *   we want to check/uncheck
+   * @returns a list of items with the item now checked/unchecked.
+   *   If it is a group, its children will also become checked/unchecked
+   */
+  const changeChecked = (id: string | number | true, checked: boolean, pickableItems: PickableItem[]): PickableItem[] => {
+    const updatedItems: PickableItem[] = pickableItems.map((item: PickableItem) => {
+      if (item.id === id || id === true) {
+        if (item.isGroup) {
+          return {
+            ...item,
+            children: changeChecked(true, checked, item.children),
+          };
+        }
+        return {
+          ...item,
+          checked,
+        };
+      }
+      if (item.isGroup) {
+        return {
+          ...item,
+          children: changeChecked(id, checked, item.children),
+        };
+      }
+      return item;
+    });
+    return updatedItems;
+  };
+
+  /**
+   * Within a tree of items, swap in the list of updated items into the spot
+   *   indicated by the id
+   * @author Yuen Ler Chow
+   * @param id the id of the item group we want to change
+   * @param updatedItems the list of items we want to change the items in the group to
+   * @returns a list of all items containing the updated items
+   */
+  const changeItems = (id: string | number, updatedItems: PickableItem[]): PickableItem[] => {
+    return items.map((item: PickableItem) => {
+      if (item.id === id) {
+        return {
+          ...item,
+          children: updatedItems,
+        };
+      }
+      return item;
+    });
+  };
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  return (
+    <div>
+      {
+        items.map((item) => {
+          return (
+            <div key={item.id}>
+              {/* Dropdown Button */}
+              <span
+                className="NestableItemList-dropdown-button-container d-inline-block"
+                style={{
+                  minWidth: '2rem',
+                }}
+              >
+                {item.isGroup && (
+                  <button
+                    className={`NestableItemList-dropdown-button NestableItemList-dropdown-button-${item.id}`}
+                    style={{
+                      border: 0,
+                      backgroundColor: 'transparent',
+                    }}
+                    type="button"
+                    onClick={() => {
+                      dispatch({
+                        type: ActionType.ToggleItems,
+                      });
+                    }}
+                    aria-label={`${isShowingItems ? 'Hide' : 'Show'} items in ${item.name}`}
+                  >
+                    <FontAwesomeIcon
+                      icon={isShowingItems ? faChevronDown : faChevronRight}
+                    />
+                  </button>
+                )}
+              </span>
+
+              {/* Checkbox and Text */}
+              <CheckboxButton
+                className={`NestableItemList-CheckboxButton-${item.id}`}
+                text={item.name}
+                checked={item.isGroup ? allChecked(item.children) : item.checked}
+                dashed={item.isGroup ? !noneChecked(item.children) : false}
+                onChanged={(checked) => {
+                  onChanged(changeChecked(item.id, checked, items));
+                }}
+                ariaLabel={`Select ${item.name}`}
+                checkedVariant={Variant.Light}
+              />
+
+              {/* Children */}
+              {item.isGroup && isShowingItems && (
+                <div
+                  className="NestableItemList-children-container"
+                  style={{
+                    paddingLeft: '2.2rem',
+                  }}
+                >
+                  <NestableItemList
+                    items={item.children}
+                    onChanged={(updatedItems) => {
+                      onChanged(changeItems(item.id, updatedItems));
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          );
+        })
+      }
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default NestableItemList;