dce-reactkit 3.0.0-beta.2 → 3.0.0-beta.6

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,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.6",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -19,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

@@ -2,6 +2,8 @@ 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");
 
@@ -24,6 +26,7 @@ export default [
       resolve(),
       commonjs(),
       typescript({ tsconfig: "./tsconfig.json" }),
+      sourcemaps(),
     ],
     external: [
       ...Object.keys(packageJson.dependencies || {}),

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

package/src/components/Modal.tsx

@@ -7,7 +7,6 @@
 import React, { useState, useEffect } from 'react';
 
 // Import other components
-import BootstrapModal from 'react-bootstrap/Modal';
 import waitMs from '../helpers/waitMs';
 
 // Import types
@@ -368,14 +367,9 @@ const Modal: React.FC<Props> = (props) => {
 
   // Render the modal
   return (
-    <BootstrapModal
-      show={visible}
-      size={size !== ModalSize.Medium ? size : undefined}
-      onHide={() => {
-        if (!dontAllowBackdropExit) {
-          handleClose(ModalButtonType.Cancel);
-        }
-      }}
+    <div
+      className={`modal fade modal-${size}`}
+      tabIndex={-1}
       style={{
         zIndex: (
           onTopOfOtherModals
@@ -383,30 +377,39 @@ const Modal: React.FC<Props> = (props) => {
             : 5000000000
         ),
       }}
-      backdropClassName="Modal-backdrop"
-      centered
     >
-      <style>{style}</style>
-      {title && (
-        <BootstrapModal.Header
-          closeButton={!!onClose}
-        >
-          <BootstrapModal.Title>
-            {title}
-          </BootstrapModal.Title>
-        </BootstrapModal.Header>
-      )}
-      {children && (
-        <BootstrapModal.Body>
-          {children}
-        </BootstrapModal.Body>
-      )}
-      {footer && (
-        <BootstrapModal.Footer>
-          {footer}
-        </BootstrapModal.Footer>
-      )}
-    </BootstrapModal>
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">
+              {title}
+            </h5>
+
+            {onClose && (
+              <button
+                type="button"
+                className="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+                onClick={() => {
+                  handleClose(ModalButtonType.Cancel);
+                }}
+              />
+            )}
+          </div>
+          {children && (
+            <div className="modal-body">
+              {children}
+            </div>
+          )}
+          {footer && (
+            <div className="modal-footer">
+              {footer}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
   );
 };