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

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.3",
+  "version": "3.0.0-beta.7",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -21,14 +21,23 @@
   "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-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/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
@@ -21,54 +20,6 @@ import ModalType from '../types/ModalType';
 /*------------------------------------------------------------------------*/
 
 const style = `
-/* More opaque backdrop */
-.Modal-backdrop {
-  background-color: black !important;
-  opacity: 0.8 !important;
-  z-index: 10000000 !important;
-}
-
-/* Customize the modal header and body */
-.modal-header {
-  /* Dark theme */
-  background-color: #222 !important;
-  color: white !important;
-
-  /* Border */
-  border: 1px solid #545454 !important;
-}
-.modal-body {
-  /* Dark theme */
-  background-color: #222 !important;
-  color: white !important;
-
-  /* Border */
-  border-top: 0 !important;
-  border-left: 1px solid #545454 !important;
-  border-bottom: 1px solid #545454 !important;
-  border-right: 1px solid #545454 !important;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-/* Create our own animation */
-.modal-content {
-  animation-name: Modal-drop-in;
-  animation-duration: 0.4s;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-out;
-}
-@keyframes Modal-drop-in {
-  0% {
-    transform: scale(0.8);
-    opacity: 0.5;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
 `;
 
 /*------------------------------------------------------------------------*/
@@ -368,14 +319,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 +329,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>
   );
 };