Modal Skeleton

package.json

@@ -10,10 +10,12 @@
     "@types/node": "^18.15.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "bootstrap": "^5.2.3",
     "firebaseui": "^0.600.0",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.7.2",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^2.1.3",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/App.tsx

@@ -1,23 +1,25 @@
-import logo from './logo.svg';
+import React, { useState } from 'react';
 import './App.css';
+import ConfirmationModal from './modalskeleton/ConfirmationModal';
+import FileUploadModal from './modalskeleton/FileUploadModal';
+import FormModal from './modalskeleton/FormModal';
 
 function App() {
+  const [text, setText] = useState("");
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      {<ConfirmationModal title={"hi"} body={""} button={"try"} reminder={""} hasText={true} setText={setText}/>}
+      {<FormModal titleInput={[["email", setText], ["password", setText]]} button={"submit"}/>}
+      {<FileUploadModal 
+        title={"Upload your new RFP here"} 
+        button={"Submit"} 
+        body={"Please submit a SINGLE .pdf file with the RFP form as the first page followed by all relevant information at the back"}
+        note={"File number limit: 1    Single file size limit: 100MB   Allowed file types: PDF"}
+        hasText={true}
+        textTitle={"Reason:"}
+        textBody={"Wrong GL code"}
+        />}
+      {text}
     </div>
   );
 }

src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from "react-dom";
 import './index.css';
 import App from './App';
+import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(
   <React.StrictMode>

src/modalskeleton/ConfirmationModal.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import Modal from 'react-bootstrap/Modal';
+
+interface Props {
+  title: string;
+  body: string;
+  button: string;
+  reminder: string;
+  hasText: boolean;
+  setText: React.Dispatch<React.SetStateAction<string>>
+}
+
+function ConfirmationModal({title, body, button, reminder, hasText, setText} : Props) {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
+    return (
+      <>
+        <Button variant="primary" onClick={handleShow}>
+          Confirmation Modal
+        </Button>
+
+        <Modal
+          show={show}
+          onHide={handleClose}
+          backdrop="static"
+          keyboard={false}
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>{title}</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            {body}
+            <br/>
+            <b style = {{color: 'red'}}>
+            {reminder}
+            </b>
+            {hasText ? 
+              <Form.Control 
+                as="textarea" 
+                rows={3}
+                placeholder="Enter Text Here"
+                onChange={e => setText(e.target.value)}
+              /> 
+              : 
+              <></>
+            }
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="primary">{button}</Button>
+            <Button variant="secondary" onClick={handleClose}>
+              Cancel
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </>
+    );
+}
+
+export default ConfirmationModal;

src/modalskeleton/FileUploadModal.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import Modal from 'react-bootstrap/Modal';
+
+interface Props {
+  title: string
+  button: string;
+  body: string;
+  note: string;
+  hasText: boolean;
+  textTitle: string;
+  textBody: string;
+}
+
+
+function FileUploadModal({title, button, body, note, hasText, textTitle, textBody} : Props) {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        File Upload Modal
+      </Button>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Body>
+          <Form>
+            {hasText ?
+              <>
+                <h4>{textTitle}</h4>
+                <p>{textBody}</p>
+              </>
+              : <></>
+            }
+            <Form.Group className="mb-3" controlId="formFile">
+              <h4>{title}</h4>
+              <Form.Label>{body}</Form.Label>
+              <Form.Control type="file" />
+              <p>{note}</p>
+            </Form.Group>
+          </Form>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="primary" onClick={handleClose}>
+              {button}
+            </Button>
+            <Button variant="secondary" onClick={handleClose}>
+              Cancel
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </>
+  );
+}
+
+export default FileUploadModal;

src/modalskeleton/FormModal.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import Modal from 'react-bootstrap/Modal';
+
+interface Props {
+  titleInput: [string, React.Dispatch<React.SetStateAction<string>>][];
+  button: string;
+}
+
+
+function FormModal({titleInput, button} : Props) {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      <Button variant="primary" onClick={handleShow}>
+        Form Modal
+      </Button>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Body>
+          <Form>
+            {titleInput.map((titleInput)=> {
+                return(
+                  <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
+                    <Form.Label>{titleInput[0]}</Form.Label>
+                    <Form.Control
+                      type="email"
+                      placeholder="Insert Text Here"
+                      autoFocus
+                      onChange={e => titleInput[1](e.target.value)}
+                    />
+                  </Form.Group>
+                )
+              })
+            }
+          </Form>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="primary" onClick={handleClose}>
+              {button}
+            </Button>
+            <Button variant="secondary" onClick={handleClose}>
+              Cancel
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </>
+  );
+}
+
+  export default FormModal;

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

tsconfig.json

@@ -1,21 +1,27 @@
 {
-    "compilerOptions": {
-      "target": "es5",
-      "lib": ["dom", "dom.iterable", "esnext"],
-      "allowJs": true,
-      "skipLibCheck": true,
-      "esModuleInterop": true,
-      "allowSyntheticDefaultImports": true,
-      "strict": true,
-      "forceConsistentCasingInFileNames": true,
-      "noFallthroughCasesInSwitch": true,
-      "module": "esnext",
-      "moduleResolution": "node",
-      "resolveJsonModule": true,
-      "isolatedModules": true,
-      "noEmit": true,
-      "jsx": "react-jsx",
-      "baseUrl": "./src"
-    },
-    "include": ["src", "src/custom.d.ts"]
-  }
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "src",
+    "src/custom.d.ts"
+  ]
+}