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

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

@@ -1,9 +1,11 @@
 /**
  * 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';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.min';
 declare type Props = {
     children: React.ReactNode;
     dark?: boolean;

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.3",
+  "version": "3.0.0-beta.4",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -21,8 +21,7 @@
   "peerDependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
-    "react": "^18.0.0",
-    "react-bootstrap": "^2.3.0"
+    "react": "^18.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",

package/src/components/AppWrapper.tsx

@@ -1,12 +1,16 @@
 /**
  * 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
 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';
 

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>
   );
 };