dce-reactkit 3.0.0-beta.3 → 3.0.0-beta.32

package/dist/esm/types/components/AppWrapper.d.ts

@@ -1,14 +1,39 @@
 /**
  * A wrapper for the entire React app that adds global functionality like
- *   handling for fatal error messages
+ *   handling for fatal error messages, adds bootstrap support
  * @author Gabe Abrams
  */
 import React from 'react';
 declare type Props = {
     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;
+    };
+}>;
+/**
+ * Send a request using caccl's send request feature
+ * @author Gabe Abrams
+ * @param opts send request options
+ * @returns send request response
+ */
+export declare const cacclSendRequest: SendRequestFunction;
 /**
  * Show an alert modal with an "Okay" button
  * @author Gabe Abrams

package/dist/esm/types/components/TabBox.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 declare type Props = {
     title: React.ReactNode;
     children: React.ReactNode;
+    noBottomPadding?: boolean;
 };
 declare const TabBox: React.FC<Props>;
 export default TabBox;

package/dist/esm/types/helpers/genRouteHandler.d.ts

@@ -0,0 +1,30 @@
+import ParamType from '../types/ParamType';
+import handleError from './handleError';
+import handleSuccess from './handleSuccess';
+/**
+ * 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>;
+export default genRouteHandler;

package/dist/esm/types/helpers/handleError.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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;
+export default handleError;

package/dist/esm/types/helpers/handleSuccess.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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;
+export default handleSuccess;

package/dist/esm/types/helpers/visitServerEndpoint.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Set the session expiry handler
+ * @author Gabe Abrams
+ * @param handler new handler to use when session expires
+ */
+export declare const setSessionExpiryHandler: (handler: () => void) => void;
+/**
+ * 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>;
+export default visitServerEndpoint;

package/dist/esm/types/index.d.ts

@@ -14,9 +14,15 @@ import padZerosLeft from './helpers/padZerosLeft';
 import roundToNumDecimals from './helpers/roundToNumDecimals';
 import sum from './helpers/sum';
 import waitMs from './helpers/waitMs';
+import visitServerEndpoint from './helpers/visitServerEndpoint';
+import genRouteHandler from './helpers/genRouteHandler';
+import handleError from './helpers/handleError';
+import handleSuccess from './helpers/handleSuccess';
+import initServer from './server/initServer';
 import ModalButtonType from './types/ModalButtonType';
 import ModalSize from './types/ModalSize';
 import ModalType from './types/ModalType';
 import ReactKitErrorCode from './types/ReactKitErrorCode';
 import Variant from './types/Variant';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, alert, confirm, showFatalError, ErrorWithCode, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, };
+import ParamType from './types/ParamType';
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, alert, confirm, showFatalError, ErrorWithCode, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, visitServerEndpoint, initServer, genRouteHandler, handleError, handleSuccess, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, ParamType, };

package/dist/esm/types/server/initServer.d.ts

@@ -0,0 +1,21 @@
+declare type GetLaunchInfoFunction = (req: any) => {
+    launched: boolean;
+    launchInfo?: any;
+};
+/**
+ * Get launch info via CACCL
+ * @author Gabe Abrams
+ * @param req express request object
+ * @returns object { launched, launchInfo }
+ */
+export declare const cacclGetLaunchInfo: GetLaunchInfoFunction;
+/**
+ * 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;
+export default initServer;

package/dist/esm/types/types/ParamType.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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"
+}
+export default ParamType;

package/dist/esm/types/types/ReactKitErrorCode.d.ts

@@ -8,6 +8,8 @@ declare enum ReactKitErrorCode {
     SessionExpired = "DRK3",
     MissingParameter = "DRK4",
     InvalidParameter = "DRK5",
-    WrongCourse = "DRK6"
+    WrongCourse = "DRK6",
+    NoCACCLSendRequestFunction = "DRK7",
+    NoCACCLGetLaunchInfoFunction = "DRK8"
 }
 export default ReactKitErrorCode;

package/dist/index.d.ts

@@ -3,15 +3,33 @@ import React from 'react';
 
 /**
  * A wrapper for the entire React app that adds global functionality like
- *   handling for fatal error messages
+ *   handling for fatal error messages, adds bootstrap support
  * @author Gabe Abrams
  */
 
 declare type Props$3 = {
     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
@@ -157,6 +175,7 @@ declare const Modal: React.FC<Props$1>;
 declare type Props = {
     title: React.ReactNode;
     children: React.ReactNode;
+    noBottomPadding?: boolean;
 };
 declare const TabBox: React.FC<Props>;
 
@@ -258,6 +277,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 +388,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, ErrorBox, ErrorWithCode, LoadingSpinner, Modal, ModalButtonType, ModalSize, ModalType, ParamType, 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.3",
+  "version": "3.0.0-beta.32",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -21,14 +21,24 @@
   "peerDependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
-    "react": "^18.0.0",
-    "react-bootstrap": "^2.3.0"
+    "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

@@ -1,6 +1,6 @@
 /**
  * A wrapper for the entire React app that adds global functionality like
- *   handling for fatal error messages
+ *   handling for fatal error messages, adds bootstrap support
  * @author Gabe Abrams
  */
 
@@ -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
@@ -260,6 +318,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
         type={ModalType.Okay}
         onClose={() => {
           // Alert closed
+          setAlertInfo(undefined);
           if (onAlertClosed) {
             onAlertClosed();
           }
@@ -279,13 +338,14 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
         title={confirmInfo.title}
         type={ModalType.OkayCancel}
         onClose={(buttonType) => {
+          setConfirmInfo(undefined);
           if (onConfirmClosed) {
             onConfirmClosed(buttonType === ModalButtonType.Okay);
           }
         }}
         dontAllowBackdropExit
       >
-
+        {confirmInfo.text}
       </Modal>
     );
   }

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 */