Examples for overriding scss conflicts and working with bootstrap 4

demo/package.json

@@ -34,7 +34,7 @@
     "@types/react-dom": "16.8.4",
     "immutable": "3.8.2",
     "react": "16.8.6",
-    "react-bootstrap": "0.32.4",
+    "react-bootstrap": "1.0.1",
     "react-dom": "16.8.6"
   },
   "devDependencies": {
@@ -48,6 +48,7 @@
     "@types/react-hot-loader": "4.1.0",
     "babel-loader": "8.0.6",
     "better-npm-run": "0.1.1",
+    "bootstrap-scss": "4.5.0",
     "cross-env": "5.2.1",
     "css-loader": "2.1.1",
     "enzyme": "3.10.0",

demo/src/client/HelloWorldPage/HelloWorld.tsx

@@ -1,13 +1,37 @@
 import React from 'react'
 import "./helloWorld.scss";
+import {Button, Form} from "react-bootstrap";
 
 export class App extends React.PureComponent<any, any> {
 
     render() {
         return (
-            <p>
+            // TODO: Adding a top level class will allow you to scope your bootstrap 4 css just to your application
+            <div className='hello-world-main'>
                 <span className='world-highlight'>Hello World!</span> This is a simple test page to show a LabKey HTML view built with React.
-            </p>
+
+                {/*// TODO: Example copied from bootstrap 4 examples*/}
+                <Form>
+                    <Form.Group controlId="formBasicEmail">
+                        <Form.Label>Email address</Form.Label>
+                        <Form.Control type="email" placeholder="Enter email" />
+                        <Form.Text className="text-muted">
+                            We'll never share your email with anyone else.
+                        </Form.Text>
+                    </Form.Group>
+
+                    <Form.Group controlId="formBasicPassword">
+                        <Form.Label>Password</Form.Label>
+                        <Form.Control type="password" placeholder="Password" />
+                    </Form.Group>
+                    <Form.Group controlId="formBasicCheckbox">
+                        <Form.Check type="checkbox" label="Check me out" />
+                    </Form.Group>
+                    <Button variant="primary" type="submit">
+                        Submit
+                    </Button>
+                </Form>
+            </div>
         )
     }
 }

demo/src/client/HelloWorldPage/app.tsx

@@ -5,5 +5,11 @@ import {App} from './HelloWorld'
 
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {
-    ReactDOM.render(<App/>, document.getElementById('app'));
+    ReactDOM.render(<App/>,
+        // TODO: Use this when not using shadow root
+        document.getElementById('app')
+
+        // TODO: Use this when using shadow root
+        // window['shadowRoot'].getElementById('app')
+    );
 });