dce-reactkit 3.0.0-beta.1 → 3.0.0-beta.12

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

@@ -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
  */
 import React from 'react';

package/dist/index.d.ts

@@ -3,7 +3,7 @@ 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
  */
 

package/package.json

@@ -1,12 +1,9 @@
 {
   "name": "dce-reactkit",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.12",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "files": [
-    "dist"
-  ],
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rm -rf dist && rollup -c"
@@ -22,18 +19,28 @@
   },
   "homepage": "https://github.com/harvard-edtech/dce-reactkit#readme",
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-bootstrap": "^2.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.18"
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "bootstrap": "^5.1.3",
+    "react": "^18.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.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",
     "typescript": "^4.6.3"
   }
 }

package/rollup.config.js

@@ -0,0 +1,45 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+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 [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      sourcemaps(),
+    ],
+    external: [
+      ...Object.keys(packageJson.dependencies || {}),
+      ...Object.keys(packageJson.peerDependencies || {}),
+    ],
+  },
+  {
+    input: "dist/esm/types/index.d.ts",
+    output: [{ file: "dist/index.d.ts", format: "esm" }],
+    plugins: [dts()],
+    external: [
+      ...Object.keys(packageJson.dependencies || {}),
+      ...Object.keys(packageJson.peerDependencies || {}),
+    ],
+  },
+];

package/src/components/AppWrapper.tsx

@@ -0,0 +1,370 @@
+/**
+ * A wrapper for the entire React app that adds global functionality like
+ *   handling for fatal error messages, adds bootstrap support
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React, { useState } from 'react';
+
+// Import shared components
+import ErrorBox from './ErrorBox';
+
+// Import shared types
+import ReactKitErrorCode from '../types/ReactKitErrorCode';
+import ModalButtonType from '../types/ModalButtonType';
+import ModalType from '../types/ModalType';
+
+// Import shared components
+import Modal from './Modal';
+
+// Import custom errors
+import ErrorWithCode from '../errors/ErrorWithCode';
+
+/*------------------------------------------------------------------------*/
+/*                                  Props                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // The entire app
+  children: React.ReactNode,
+  // True if this app is a dark-themed app
+  dark?: boolean,
+  // Custom session expired message
+  sessionExpiredMessage?: string,
+};
+
+/*------------------------------------------------------------------------*/
+/*                             Static Helpers                             */
+/*------------------------------------------------------------------------*/
+
+/*----------------------------------------*/
+/*                  Alert                 */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setAlertInfo: (info: { title: string, text: string }) => void;
+let onAlertClosed: () => void;
+
+/**
+ * Show an alert modal with an "Okay" button
+ * @author Gabe Abrams
+ * @param title the title text to display at the top of the alert
+ * @param text the text to display in the alert
+ */
+export const alert = async (title: string, text: string): Promise<undefined> => {
+  // Fallback if alert not available
+  if (!setAlertInfo) {
+    window.alert(`${title}\n\n${text}`);
+    return undefined;
+  }
+
+  // Return promise that resolves when alert is closed
+  return new Promise((resolve) => {
+    // Setup handler
+    onAlertClosed = () => {
+      resolve(undefined);
+    };
+
+    // Show the alert
+    setAlertInfo({
+      title,
+      text,
+    });
+  });
+};
+
+/*----------------------------------------*/
+/*                 Confirm                */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setConfirmInfo: (info: { title: string, text: string }) => void;
+let onConfirmClosed: (confirmed: boolean) => void;
+
+/**
+ * Show a confirmation modal with an "Okay" and a "Cancel" button
+ * @author Gabe Abrams
+ * @param title the title text to display at the top of the alert
+ * @param text the text to display in the alert
+ * @returns true if the user confirmed
+ */
+export const confirm = async (
+  title: string,
+  text: string,
+): Promise<boolean> => {
+  // Fallback if confirm is not available
+  if (!setConfirmInfo) {
+    return window.confirm(`${title}\n\n${text}`);
+  }
+
+  // Return promise that resolves with result of confirmation
+  return new Promise((resolve) => {
+    // Setup handler
+    onConfirmClosed = (confirmed: boolean) => {
+      resolve(confirmed)
+    };
+
+    // Show the confirm
+    setConfirmInfo({
+      title,
+      text,
+    });
+  });
+};
+
+/*----------------------------------------*/
+/*               Fatal Error              */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setFatalErrorMessage: (message: string) => void;
+let setFatalErrorCode: (code: string) => void;
+let setFatalErrorTitle: (title: string) => void;
+
+/**
+ * Show a fatal error message
+ * @author Gabe Abrams
+ * @param error the error to show
+ * @param [errorTitle] title of the error box
+ */
+export const showFatalError = (
+  error: any,
+  errorTitle: string = 'An Error Occurred',
+): undefined => {
+  // Determine message and code
+  const message: string = (
+    typeof error === 'string'
+      ? error.trim()
+      : String(error.message ?? 'An unknown error occurred.')
+  );
+  const code: string = (
+    typeof error === 'string'
+      ? ReactKitErrorCode.NoCode
+      : String(error.code ?? ReactKitErrorCode.NoCode)
+  );
+
+  // Handle case where app hasn't loaded
+  if (!setFatalErrorMessage || !setFatalErrorCode) {
+    alert(
+      errorTitle,
+      `${message} (code: ${code}). Please contact support.`,
+    );
+    return undefined;
+  }
+
+  // Use setters
+  setFatalErrorMessage(message);
+  setFatalErrorCode(code);
+  setFatalErrorTitle(errorTitle);
+
+  return undefined;
+};
+
+/*----------------------------------------*/
+/*             Session Expired            */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setSessionHasExpired: (isExpired: boolean) => void;
+
+/**
+ * Show the "session expired" message
+ * @author Gabe Abrams
+ */
+export const showSessionExpiredMessage = (): undefined => {
+  setSessionHasExpired(true);
+  return undefined;
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    children,
+    dark,
+    sessionExpiredMessage = 'Your session has expired. Please go back to Canvas and start over.',
+  } = props;
+
+  /* -------------- State ------------- */
+
+  // Fatal error
+  const [
+    fatalErrorMessage,
+    setFatalErrorMessageInner,
+  ] = useState<string | undefined>();
+  setFatalErrorMessage = setFatalErrorMessageInner;
+  const [
+    fatalErrorCode,
+    setFatalErrorCodeInner,
+  ] = useState<string | undefined>();
+  setFatalErrorCode = setFatalErrorCodeInner;
+  const [
+    fatalErrorTitle,
+    setFatalErrorTitleInner,
+  ] = useState<string | undefined>();
+  setFatalErrorTitle = setFatalErrorTitleInner;
+
+  // Alert
+  const [
+    alertInfo,
+    setAlertInfoInner,
+  ] = useState<{
+    title: string,
+    text: string
+  }>();
+  setAlertInfo = setAlertInfoInner;
+
+  // Confirm
+  const [
+    confirmInfo,
+    setConfirmInfoInner,
+  ] = useState<{
+    title: string,
+    text: string
+  }>();
+  setConfirmInfo = setConfirmInfoInner;
+
+  // Session expired
+  const [
+    sessionHasExpired,
+    setSessionHasExpiredInner,
+  ] = useState<boolean>(false);
+  setSessionHasExpired = setSessionHasExpiredInner;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                  Modal                 */
+  /*----------------------------------------*/
+
+  // Modal that may be defined
+  let modal: React.ReactNode;
+
+  /* -------------- Alert ------------- */
+
+  if (alertInfo) {
+    modal = (
+      <Modal
+        title={alertInfo.title}
+        type={ModalType.Okay}
+        onClose={() => {
+          // Alert closed
+          if (onAlertClosed) {
+            onAlertClosed();
+          }
+        }}
+        onTopOfOtherModals
+      >
+        {alertInfo.text}
+      </Modal>
+    );
+  }
+
+  /* ------------- Confirm ------------ */
+
+  if (confirmInfo) {
+    modal = (
+      <Modal
+        title={confirmInfo.title}
+        type={ModalType.OkayCancel}
+        onClose={(buttonType) => {
+          if (onConfirmClosed) {
+            onConfirmClosed(buttonType === ModalButtonType.Okay);
+          }
+        }}
+        dontAllowBackdropExit
+      >
+
+      </Modal>
+    );
+  }
+
+  /*----------------------------------------*/
+  /*                  Views                 */
+  /*----------------------------------------*/
+
+  // Body that will be filled with the current view
+  let body: React.ReactNode;
+
+  /* ----------- Fatal Error ---------- */
+
+  if (fatalErrorMessage || fatalErrorCode || sessionHasExpired) {
+    // Re-encapsulate in an error
+    const error = (
+      sessionHasExpired
+        ? new ErrorWithCode(
+          (fatalErrorMessage ?? 'An unknown error has occurred. Please contact support.'),
+          (fatalErrorCode ?? ReactKitErrorCode.NoCode),
+        )
+        : new ErrorWithCode(
+          sessionExpiredMessage,
+          ReactKitErrorCode.SessionExpired,
+        )
+    );
+
+    // Build error screen
+    body = (
+      <div
+        style={{
+          display: 'block',
+          width: '100vw',
+          minHeight: '100vh',
+          paddingTop: '2rem',
+          backgroundColor: (
+            dark
+              ? '#222'
+              : '#fff'
+          ),
+        }}
+      >
+        <ErrorBox
+          title={(
+            sessionHasExpired
+              ? 'Session Expired'
+              : fatalErrorTitle
+          )}
+          error={error}
+        />
+      </div>
+    );
+  }
+
+  /* --------------- App -------------- */
+
+  if (!body) {
+    body = (
+      <>
+        {children}
+      </>
+    );
+  }
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  return (
+    <>
+      {modal}
+      {body}
+    </>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default AppWrapper;

package/src/components/ErrorBox.tsx

@@ -0,0 +1,124 @@
+/**
+ * Displays an error
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import FontAwesome Icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+
+// Import shared types
+import ReactKitErrorCode from '../types/ReactKitErrorCode';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Error to display
+  error: any,
+  // Customized title of error box
+  title?: string,
+  // Handler for close,
+  onClose?: () => void,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const ErrorBox: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    error,
+    title = 'An Error Occurred',
+    onClose,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  // Determine error text
+  const errorText: string = (
+    typeof error === 'string'
+      ? error.trim()
+      : String(error.message || 'An unknown error occurred. Please contact support.')
+  );
+
+  // Error code box
+  let errorCodeBox;
+  if (error && (error as any).code) {
+    errorCodeBox = (
+      <span>
+        {' '}
+        <span
+          style={{
+            backgroundColor: 'white',
+            borderRadius: '5px',
+            paddingLeft: '3px',
+            paddingRight: '3px',
+            color: '#DC4150',
+            fontVariant: 'small-caps',
+            fontSize: '80%',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          code:
+          {' '}
+          {String((error as any).code ?? ReactKitErrorCode.NoCode).toUpperCase()}
+        </span>
+      </span>
+    );
+  }
+
+  // Main UI
+  return (
+    <div
+      className="alert alert-danger text-center"
+      style={{
+        maxWidth: '650px',
+        margin: 'auto',
+      }}
+    >
+      <h4 className="mb-1">
+        <FontAwesomeIcon
+          icon={faExclamationTriangle}
+          className="me-2"
+        />
+        {title}
+      </h4>
+      <div>
+        {errorText}
+        {errorCodeBox}
+      </div>
+      {onClose && (
+        <div className="mt-2">
+          <button
+            type="button"
+            className="btn btn-light"
+            aria-label="dismiss error and close this activity or view"
+            onClick={onClose}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default ErrorBox;

package/src/components/LoadingSpinner.tsx

@@ -0,0 +1,108 @@
+/**
+ * Loading spinner/indicator
+ * @author Gabe Abrams
+ */
+
+// Import react
+import React from 'react';
+
+// Import FontAwesome Icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+/* Blips */
+.LoadingSpinner-blip-1,
+.LoadingSpinner-blip-2,
+.LoadingSpinner-blip-3,
+.LoadingSpinner-blip-4 {
+  font-size: 25px;
+  opacity: 0.6;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+/* First Blip */
+.LoadingSpinner-blip-1 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+}
+
+/* Second Blip */
+.LoadingSpinner-blip-2 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+
+/* Third Blip */
+.LoadingSpinner-blip-3 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  animation-delay: 0.2s;
+}
+
+/* Fourth Blip */
+.LoadingSpinner-blip-4 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  animation-delay: 0.3s;
+}
+
+/* Pop Animation for Each Blip */
+@keyframes LoadingSpinner-pop-animation {
+  0%  {
+    transform: scale(1.0);
+  }
+  10% {
+    transform: scale(1.5);
+  }
+  30% {
+    transform: scale(1.0);
+  }
+  100% {
+    transform: scale(1.0);
+  }
+}
+`;
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const LoadingSpinner = () => {
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  // Add all four blips to a container
+  return (
+    <div className="text-center LoadingSpinner LoadingSpinner-container">
+      <style>{style}</style>
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-1 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-2 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-3 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-4"
+      />
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default LoadingSpinner;