dce-reactkit 3.0.0-beta.9 → 3.0.2

package/dist/index.d.ts

@@ -7,11 +7,29 @@ import React from 'react';
  * @author Gabe Abrams
  */
 
-declare type Props$3 = {
+declare type Props$7 = {
     children: React.ReactNode;
+    sendRequest: SendRequestFunction;
     dark?: boolean;
     sessionExpiredMessage?: string;
 };
+declare type SendRequestFunction = (opts: {
+    path: string;
+    method: ('GET' | 'POST' | 'DELETE' | 'PUT');
+    params?: {
+        [x: string]: any;
+    } | undefined;
+    headers?: {
+        [x: string]: any;
+    } | undefined;
+    numRetries?: number | undefined;
+}) => Promise<{
+    body: any;
+    status: number;
+    headers: {
+        [x: string]: any;
+    };
+}>;
 /**
  * Show an alert modal with an "Okay" button
  * @author Gabe Abrams
@@ -34,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$3>;
+declare const AppWrapper: React.FC<Props$7>;
 
 /**
  * Loading spinner/indicator
@@ -47,12 +65,12 @@ declare const LoadingSpinner: () => JSX.Element;
  * @author Gabe Abrams
  */
 
-declare type Props$2 = {
+declare type Props$6 = {
     error: any;
     title?: string;
     onClose?: () => void;
 };
-declare const ErrorBox: React.FC<Props$2>;
+declare const ErrorBox: React.FC<Props$6>;
 
 /**
  * Bootstrap variants
@@ -118,7 +136,7 @@ declare enum ModalType {
  * @author Gabe Abrams
  */
 
-declare type Props$1 = {
+declare type Props$5 = {
     type?: ModalType;
     size?: ModalSize;
     title?: React.ReactNode;
@@ -147,18 +165,91 @@ declare type Props$1 = {
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
 };
-declare const Modal: React.FC<Props$1>;
+declare const Modal: React.FC<Props$5>;
 
 /**
  * A box with a tab on the top that holds buttons and other content
  * @author Gabe Abrams
  */
 
-declare type Props = {
+declare type Props$4 = {
     title: React.ReactNode;
     children: React.ReactNode;
+    noBottomPadding?: boolean;
+};
+declare const TabBox: React.FC<Props$4>;
+
+/**
+ * A radio selection button
+ * @author Gabe Abrams
+ */
+
+declare type Props$3 = {
+    text: string;
+    onSelected: () => void;
+    ariaLabel: string;
+    title?: string;
+    selected?: boolean;
+    id?: string;
+    noMarginOnRight?: boolean;
+    selectedVariant?: Variant;
+    unselectedVariant?: Variant;
+    small?: boolean;
+};
+declare const RadioButton: React.FC<Props$3>;
+
+/**
+ * A checkbox button
+ * @author Gabe Abrams
+ */
+
+declare type Props$2 = {
+    text: string;
+    onChanged: (checked: boolean) => void;
+    ariaLabel: string;
+    title?: string;
+    checked?: boolean;
+    id?: string;
+    noMarginOnRight?: boolean;
+    checkedVariant?: Variant;
+    uncheckedVariant?: Variant;
+    small?: boolean;
+};
+declare const CheckboxButton: React.FC<Props$2>;
+
+/**
+ * Input group with a title and space for buttons
+ * @author Gabe Abrams
+ */
+
+declare type Props$1 = {
+    label: string;
+    minLabelWidth?: string;
+    children: React.ReactNode;
+};
+declare const ButtonInputGroup: React.FC<Props$1>;
+
+/**
+ * A very simple, lightweight date chooser
+ * @author Gabe Abrams
+ */
+
+declare type Props = {
+    ariaLabel: string;
+    name: string;
+    month: number;
+    day: number;
+    year: number;
+    /**
+     * Handler for when date changes
+     * @param month new 1-indexed month number
+     * @param day new 1-indexed day number
+     * @param year new full year number
+     */
+    onChange: (month: number, day: number, year: number) => void;
+    numMonthsToShow?: number;
 };
-declare const TabBox: React.FC<Props>;
+declare const SimpleDateChooser: React.FC<Props>;
 
 /**
  * An error with a code
@@ -258,6 +349,134 @@ declare const sum: (nums: number[]) => number;
  */
 declare const waitMs: (ms?: number) => Promise<unknown>;
 
+/**
+ * Visit an endpoint on the server [for client only]
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.path - the path of the server endpoint
+ * @param [opts.method=GET] - the method of the endpoint
+ * @param [opts.params] - query/body parameters to include
+ * @returns response from server
+ */
+declare const visitServerEndpoint: (opts: {
+    path: string;
+    method?: "GET" | "POST" | "DELETE" | "PUT" | undefined;
+    params?: {
+        [x: string]: any;
+    } | undefined;
+}) => Promise<any>;
+
+/**
+ * Server-side API param types
+ * @author Gabe Abrams
+ */
+declare enum ParamType {
+    Boolean = "boolean",
+    BooleanOptional = "boolean-optional",
+    Float = "float",
+    FloatOptional = "float-optional",
+    Int = "int",
+    IntOptional = "int-optional",
+    JSON = "json",
+    JSONOptional = "json-optional",
+    String = "string",
+    StringOptional = "string-optional"
+}
+
+/**
+ * Handle an error and respond to the client
+ * @author Gabe Abrams
+ * @param res express response
+ * @param error error info
+ * @param opts.err the error to send to the client
+ *   or the error message
+ * @param [opts.code] an error code (only used if err.code is not
+ *   included)
+ * @param [opts.status=500] the https status code to use
+ *   defined)
+ */
+declare const handleError: (res: any, error: ({
+    message: any;
+    code?: string;
+    status?: number;
+} | Error | string | any)) => undefined;
+
+/**
+ * Send successful API response
+ * @author Gabe Abrams
+ * @param res express response
+ * @param body the body of the response to send to the client
+ */
+declare const handleSuccess: (res: any, body: any) => undefined;
+
+/**
+ * Generate an express API route handler
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.paramTypes map containing the types for each parameter that is
+ *   included in the request (map: param name => type)
+ * @param opts.handler function that processes the request
+ * @returns express route handler that takes the following arguments:
+ *   params (map: param name => value), handleSuccess (function for handling
+ *   successful requests), handleError (function for handling failed requests),
+ *   req (express request object), res (express response object),
+ *   next (express next function)
+ */
+declare const genRouteHandler: (opts: {
+    paramTypes?: {
+        [k: string]: ParamType;
+    } | undefined;
+    handler: (opts: {
+        params: {
+            [k: string]: any;
+        };
+        handleSuccess: (body: any) => void;
+        handleError: (error: any) => void;
+        req: any;
+        res: any;
+        next: () => void;
+    }) => void;
+}) => (req: any, res: any, next: () => void) => Promise<undefined>;
+
+declare type GetLaunchInfoFunction = (req: any) => {
+    launched: boolean;
+    launchInfo?: any;
+};
+/**
+ * Prepare dce-reactkit to run on the server
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.getLaunchInfo CACCL LTI's get launch info function
+ */
+declare const initServer: (opts: {
+    getLaunchInfo: GetLaunchInfoFunction;
+}) => void;
+
+/**
+ * Get a number's ordinal
+ * @author Gabe Abrams
+ * @param num the number being analyzed
+ * @returns ordinal
+ */
+declare const getOrdinal: (num: number) => string;
+
+/**
+ * Get current time info in US Boston Eastern Time, independent of machine
+ *   timezone
+ * @author Gabe Abrams
+ * @param {Date} [date=now] the date to get info on
+ * @returns object with timestamp (ms since epoch) and numbers
+ *   corresponding to ET time values for year, month, day, hour, minute
+ */
+declare const getTimeInfoInET: (date?: Date | undefined) => {
+    timestamp: number;
+    year: number;
+    month: number;
+    day: number;
+    hour: number;
+    minute: number;
+};
+
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -268,7 +487,9 @@ declare enum ReactKitErrorCode {
     SessionExpired = "DRK3",
     MissingParameter = "DRK4",
     InvalidParameter = "DRK5",
-    WrongCourse = "DRK6"
+    WrongCourse = "DRK6",
+    NoCACCLSendRequestFunction = "DRK7",
+    NoCACCLGetLaunchInfoFunction = "DRK8"
 }
 
-export { AppWrapper, ErrorBox, ErrorWithCode, LoadingSpinner, Modal, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, sum, waitMs };
+export { AppWrapper, ButtonInputGroup, CheckboxButton, ErrorBox, ErrorWithCode, LoadingSpinner, Modal, ModalButtonType, ModalSize, ModalType, ParamType, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getOrdinal, getTimeInfoInET, handleError, handleSuccess, initServer, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, sum, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.2",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/harvard-edtech/dce-reactkit#readme",
   "peerDependencies": {
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "bootstrap": "^5.1.3",
@@ -26,6 +27,7 @@
   },
   "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/react": "^18.0.7",

package/rollup.config.js

@@ -4,7 +4,6 @@ import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
 import sourcemaps from 'rollup-plugin-sourcemaps';
 
-
 const packageJson = require("./package.json");
 
 export default [

package/src/components/AppWrapper.tsx

@@ -28,22 +28,70 @@ import ErrorWithCode from '../errors/ErrorWithCode';
 type Props = {
   // The entire app
   children: React.ReactNode,
+  // Copy of CACCL's send request function
+  sendRequest: SendRequestFunction,
   // True if this app is a dark-themed app
   dark?: boolean,
   // Custom session expired message
   sessionExpiredMessage?: string,
 };
 
+// Type of CACCL's send request function
+type SendRequestFunction = (
+  opts: {
+    path: string;
+    method: ('GET' | 'POST' | 'DELETE' | 'PUT');
+    params?: {
+      [x: string]: any;
+    } | undefined;
+    headers?: {
+      [x: string]: any;
+    } | undefined;
+    numRetries?: number | undefined;
+  },
+) => Promise<{
+  body: any;
+  status: number;
+  headers: {
+    [x: string]: any;
+  };
+}>;
+
 /*------------------------------------------------------------------------*/
 /*                             Static Helpers                             */
 /*------------------------------------------------------------------------*/
 
+/*----------------------------------------*/
+/*              Send Request              */
+/*----------------------------------------*/
+
+// Store copy of caccl send request
+let _cacclSendRequest: SendRequestFunction;
+
+/**
+ * Send a request using caccl's send request feature
+ * @author Gabe Abrams
+ * @param opts send request options
+ * @returns send request response
+ */
+export const cacclSendRequest: SendRequestFunction = async (opts) => {
+  // Make sure send request has been passed in
+  if (!_cacclSendRequest) {
+    throw new ErrorWithCode(
+      'The request could not be sent because the AppWrapper component does not have a copy of sendRequest from CACCL.',
+      ReactKitErrorCode.NoCACCLSendRequestFunction,
+    );
+  }
+
+  return _cacclSendRequest(opts);
+};
+
 /*----------------------------------------*/
 /*                  Alert                 */
 /*----------------------------------------*/
 
 // Stored copies of setters
-let setAlertInfo: (info: { title: string, text: string }) => void;
+let setAlertInfo: (info: undefined | { title: string, text: string }) => void;
 let onAlertClosed: () => void;
 
 /**
@@ -79,7 +127,7 @@ export const alert = async (title: string, text: string): Promise<undefined> =>
 /*----------------------------------------*/
 
 // Stored copies of setters
-let setConfirmInfo: (info: { title: string, text: string }) => void;
+let setConfirmInfo: (info: undefined | { title: string, text: string }) => void;
 let onConfirmClosed: (confirmed: boolean) => void;
 
 /**
@@ -190,10 +238,14 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
   const {
     children,
+    sendRequest,
     dark,
     sessionExpiredMessage = 'Your session has expired. Please go back to Canvas and start over.',
   } = props;
 
+  // Store copy of send request
+  _cacclSendRequest = sendRequest;
+
   /* -------------- State ------------- */
 
   // Fatal error
@@ -217,20 +269,26 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   const [
     alertInfo,
     setAlertInfoInner,
-  ] = useState<{
-    title: string,
-    text: string
-  }>();
+  ] = useState<
+    undefined
+    | {
+      title: string,
+      text: string
+    }
+  >(undefined);
   setAlertInfo = setAlertInfoInner;
 
   // Confirm
   const [
     confirmInfo,
     setConfirmInfoInner,
-  ] = useState<{
-    title: string,
-    text: string
-  }>();
+  ] = useState<
+    undefined
+    | {
+      title: string,
+      text: string
+    }
+  >(undefined);
   setConfirmInfo = setConfirmInfoInner;
 
   // Session expired
@@ -256,10 +314,12 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   if (alertInfo) {
     modal = (
       <Modal
+        key={`alert-${alertInfo.title}-${alertInfo.text}`}
         title={alertInfo.title}
         type={ModalType.Okay}
         onClose={() => {
           // Alert closed
+          setAlertInfo(undefined);
           if (onAlertClosed) {
             onAlertClosed();
           }
@@ -276,16 +336,18 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   if (confirmInfo) {
     modal = (
       <Modal
+        key={`confirm-${confirmInfo.title}-${confirmInfo.text}`}
         title={confirmInfo.title}
         type={ModalType.OkayCancel}
         onClose={(buttonType) => {
+          setConfirmInfo(undefined);
           if (onConfirmClosed) {
             onConfirmClosed(buttonType === ModalButtonType.Okay);
           }
         }}
         dontAllowBackdropExit
       >
-
+        {confirmInfo.text}
       </Modal>
     );
   }

package/src/components/ButtonInputGroup.tsx

@@ -0,0 +1,89 @@
+/**
+ * Input group with a title and space for buttons
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // Label text
+  label: string,
+  // Minimum width of the label (css units)
+  minLabelWidth?: string,
+  // Buttons
+  children: React.ReactNode,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const ButtonInputGroup: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    label,
+    minLabelWidth,
+    children,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  return (
+    <div className="input-group">
+      <div className="input-group-prepend d-flex w-100">
+        {/* Label */}
+        <span
+          className="input-group-text"
+          style={{
+            minWidth: (
+              minLabelWidth
+              ?? undefined
+            ),
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+          }}
+        >
+          {label}
+        </span>
+
+        {/* Contents */}
+        <span
+          className="input-group-text flex-grow-1 rounded-right"
+          style={{
+            backgroundColor: 'white',
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            borderLeftWidth: 0,
+          }}
+        >
+          {children}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default ButtonInputGroup;

package/src/components/CheckboxButton.tsx

@@ -0,0 +1,100 @@
+/**
+ * A checkbox button
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import FontAwesome Icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheckSquare } from '@fortawesome/free-solid-svg-icons';
+import { faSquare } from '@fortawesome/free-regular-svg-icons';
+
+// Import shared types
+import Variant from '../types/Variant';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Text of the button
+  text: string,
+  // Handler for when this item is toggled
+  onChanged: (checked: boolean) => void,
+  // Aria label
+  ariaLabel: string,
+  // Button title
+  title?: string,
+  // True if checked
+  checked?: boolean,
+  // The id of the button
+  id?: string,
+  // If true, no margin on right
+  noMarginOnRight?: boolean,
+  // Variant for when checkbox is checked
+  checkedVariant?: Variant,
+  // Variant for when checkbox is not checked
+  uncheckedVariant?: Variant,
+  // True if using a small button
+  small?: boolean,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const CheckboxButton: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    text,
+    onChanged,
+    ariaLabel,
+    title,
+    checked,
+    id,
+    noMarginOnRight,
+    checkedVariant = Variant.Secondary,
+    uncheckedVariant = Variant.Light,
+    small,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                Main UI                 */
+  /*----------------------------------------*/
+
+  return (
+    <button
+      type="button"
+      id={id}
+      title={title}
+      className={`btn btn-${checked ? checkedVariant : uncheckedVariant}${checked ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'}`}
+      aria-label={`${ariaLabel}${checked ? ': currently checked' : ''}`}
+      onClick={() => {
+        onChanged(!checked);
+      }}
+    >
+      <FontAwesomeIcon
+        icon={checked ? faCheckSquare : faSquare}
+        className="me-1"
+      />
+      {text}
+    </button>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap up                                */
+/*------------------------------------------------------------------------*/
+
+export default CheckboxButton;