dce-reactkit 3.0.0-beta.4 → 3.0.0-beta.40

package/dist/index.d.ts

@@ -7,11 +7,29 @@ import React from 'react';
  * @author Gabe Abrams
  */
 
-declare type Props$3 = {
+declare type Props$6 = {
     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$6>;
 
 /**
  * Loading spinner/indicator
@@ -47,12 +65,12 @@ declare const LoadingSpinner: () => JSX.Element;
  * @author Gabe Abrams
  */
 
-declare type Props$2 = {
+declare type Props$5 = {
     error: any;
     title?: string;
     onClose?: () => void;
 };
-declare const ErrorBox: React.FC<Props$2>;
+declare const ErrorBox: React.FC<Props$5>;
 
 /**
  * Bootstrap variants
@@ -118,7 +136,7 @@ declare enum ModalType {
  * @author Gabe Abrams
  */
 
-declare type Props$1 = {
+declare type Props$4 = {
     type?: ModalType;
     size?: ModalSize;
     title?: React.ReactNode;
@@ -147,18 +165,69 @@ declare type Props$1 = {
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
 };
-declare const Modal: React.FC<Props$1>;
+declare const Modal: React.FC<Props$4>;
 
 /**
  * A box with a tab on the top that holds buttons and other content
  * @author Gabe Abrams
  */
 
-declare type Props = {
+declare type Props$3 = {
     title: React.ReactNode;
     children: React.ReactNode;
+    noBottomPadding?: boolean;
+};
+declare const TabBox: React.FC<Props$3>;
+
+/**
+ * A radio selection button
+ * @author Gabe Abrams
+ */
+
+declare type Props$2 = {
+    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$2>;
+
+/**
+ * A checkbox button
+ * @author Gabe Abrams
+ */
+
+declare type Props$1 = {
+    text: string;
+    onChanged: (checked: boolean) => void;
+    ariaLabel: string;
+    title?: string;
+    checked?: boolean;
+    id?: string;
+    noMarginOnRight?: boolean;
+    checkedVariant?: Variant;
+    uncheckedVariant?: Variant;
+    small?: boolean;
 };
-declare const TabBox: React.FC<Props>;
+declare const CheckboxButton: React.FC<Props$1>;
+
+/**
+ * Input group with a title and space for buttons
+ * @author Gabe Abrams
+ */
+
+declare type Props = {
+    label: string;
+    minLabelWidth?: string;
+    children: React.ReactNode;
+};
+declare const ButtonInputGroup: React.FC<Props>;
 
 /**
  * An error with a code
@@ -258,6 +327,107 @@ 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)
+ */
+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;
+    }) => void;
+}) => (req: any, res: any) => 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;
+
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -268,7 +438,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, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, 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.4",
+  "version": "3.0.0-beta.40",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -19,15 +19,27 @@
   },
   "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",
     "react": "^18.0.0"
   },
   "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",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
+    "eslint": "^8.14.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",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-sourcemaps": "^0.6.3",

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

@@ -7,10 +7,6 @@
 // Import React
 import React, { useState } from 'react';
 
-// Import bootstrap stylesheet and javascript
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.min';
-
 // Import shared components
 import ErrorBox from './ErrorBox';
 
@@ -32,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;
 
 /**
@@ -83,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;
 
 /**
@@ -194,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
@@ -221,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
@@ -260,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();
           }
@@ -280,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;

package/src/components/ErrorBox.tsx

@@ -63,9 +63,9 @@ const ErrorBox: React.FC<Props> = (props) => {
         <span
           style={{
             backgroundColor: 'white',
-            borderRadius: '5px',
-            paddingLeft: '3px',
-            paddingRight: '3px',
+            borderRadius: '0.3rem',
+            paddingLeft: '0.2rem',
+            paddingRight: '0.2rem',
             color: '#DC4150',
             fontVariant: 'small-caps',
             fontSize: '80%',
@@ -85,7 +85,7 @@ const ErrorBox: React.FC<Props> = (props) => {
     <div
       className="alert alert-danger text-center"
       style={{
-        maxWidth: '650px',
+        maxWidth: '40rem',
         margin: 'auto',
       }}
     >

package/src/components/LoadingSpinner.tsx

@@ -20,10 +20,10 @@ const style = `
 .LoadingSpinner-blip-2,
 .LoadingSpinner-blip-3,
 .LoadingSpinner-blip-4 {
-  font-size: 25px;
+  font-size: 1.8rem;
   opacity: 0.6;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 /* First Blip */