From 51a2ac628822e96459b3d570eada953ac8927d43 Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Wed, 19 Jan 2022 21:27:21 +0100
Subject: Added boostrap

---
 package.json                                     |   2 +
 src/_reset.scss                                  |  48 -----
 src/components/App/App.module.scss               |  56 +----
 src/components/App/App.tsx                       | 118 ++++++++---
 src/components/Content/Content.tsx               |  74 +++++--
 src/components/Details/Details.tsx               | 254 ++++++++++++++++-------
 src/components/RequestSummary/RequestSummary.tsx |  49 +++--
 src/index.scss                                   |  12 +-
 src/index.tsx                                    |   2 +
 yarn.lock                                        | 163 ++++++++++++++-
 10 files changed, 531 insertions(+), 247 deletions(-)
 delete mode 100644 src/_reset.scss

diff --git a/package.json b/package.json
index f49df56..24040cc 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,10 @@
   },
   "license": "MIT",
   "dependencies": {
+    "bootstrap": "^5.1.3",
     "classnames": "^2.3.1",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.1.1",
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3"
   },
diff --git a/src/_reset.scss b/src/_reset.scss
deleted file mode 100644
index ed11813..0000000
--- a/src/_reset.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
index 2036eb9..9837cdf 100644
--- a/src/components/App/App.module.scss
+++ b/src/components/App/App.module.scss
@@ -1,55 +1,3 @@
-.app {
-  display: flex;
-  flex-flow: column nowrap;
-  grid-template-rows: auto 1fr;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.main {
-  display: flex;
-  flex-flow: row nowrap;
-  flex-grow: 1;
-  overflow: hidden;
-}
-
-.header {
-  font-size: 1.2em;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: space-between;
-  background: black;
-  color: white;
-  padding: 1em;
-
-  a {
-    color: white;
-  }
-}
-
-.sidebar {
-  width: calc((6 / 16) * 100%);
-  height: 100%;
-  grid-area: sidebar;
-  border-right: 1px solid black;
-  overflow-y: auto;
-
-  li {
-    border-bottom: 1px solid gray;
-  }
-}
-
-.details {
-  width: calc((10 / 16) * 100%);
-  overflow: hidden;
-  height: 100%;
-}
-
-.noRequest, .noRequestSelected {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.content {
+  flex: 1 0 auto;
 }
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index e361aa5..61f88f6 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -6,6 +6,8 @@ import styles from './App.module.scss';
 import Details from "../Details/Details";
 import RequestSummary from "../RequestSummary/RequestSummary";
 import {getHost} from "../../utils";
+import {Container, Navbar, Col, Row, Nav, ListGroup} from "react-bootstrap";
+import classNames from "classnames";
 
 interface Config {
   url: string
@@ -50,29 +52,59 @@ export default function App() {
   ), [selectedRequestIndex, calls]);
 
   return config && (
-    <div className={styles.app}>
-      <header className={styles.header}>
-        {statusMap[readyState]} TTUN
-        <a href={config.url} target="_blank">{config.url}</a>
-      </header>
-      <main className={styles.main}>
-        <ul className={styles.sidebar}>
-          {
-            calls.length > 0
-              ? calls.slice(0).reverse().map((requestResponse, index) => (
-                <li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}>
-                  <RequestSummary requestResponse={requestResponse} />
-                </li>
-              ))
-              : (
-                <div className={styles.noRequest}>
-                  <p>No requests</p>
-                </div>
-              )
-          }
-        </ul>
+    <>
+      <Navbar
+        bg="dark"
+        variant="dark"
+        expand
+      >
+        <Container fluid>
+          <Navbar.Brand>
+            {statusMap[readyState]} TTUN
+          </Navbar.Brand>
+          <Navbar.Text>
+            <a href={config.url} target="_blank">{config.url}</a>
+          </Navbar.Text>
+        </Container>
+      </Navbar>
+      <Container>
 
-        <div className={styles.details}>
+      </Container>
+      <Row className={classNames(styles.content, 'gx-0', 'overflow-hidden')}>
+        <Col className='border-end overflow-auto' xs={4}>
+          <ListGroup variant='flush'>
+            {
+              calls.length > 0
+                ? (
+                  calls.slice(0).reverse().map((requestResponse, index) => {
+                    const selected = selectedRequestIndex === calls.length - index - 1;
+                    return (
+                      <ListGroup.Item
+                        onClick={() => setSelectedRequestIndex(calls.length - index - 1)}
+                        key={`request-${index}`}
+                        className={classNames({
+                          'bg-primary': selected,
+                          'text-light': selected,
+                          'border-bottom': true
+                        })}
+                      >
+                        <RequestSummary
+                          requestResponse={requestResponse}
+                          selected={selected}
+                        />
+                      </ListGroup.Item>
+                    )
+                  })
+                )
+                : (
+                  <div className={styles.noRequest}>
+                    <p>No requests</p>
+                  </div>
+                )
+            }
+          </ListGroup>
+        </Col>
+        <Col xs={8} className=''>
           {
             selectedRequest !== null
               ? (
@@ -83,8 +115,44 @@ export default function App() {
                 </div>
               )
           }
-        </div>
-      </main>
-    </div>
+        </Col>
+      </Row>
+    </>
+    // <div className={styles.app}>
+    //   <header className={styles.header}>
+    //     {statusMap[readyState]} TTUN
+    //     <a href={config.url} target="_blank">{config.url}</a>
+    //   </header>
+    //   <main className={styles.main}>
+    //     <ul className={styles.sidebar}>
+    //       {
+    //         calls.length > 0
+    //           ? calls.slice(0).reverse().map((requestResponse, index) => (
+    //             <li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}>
+    //               <RequestSummary requestResponse={requestResponse} />
+    //             </li>
+    //           ))
+    //           : (
+    //             <div className={styles.noRequest}>
+    //               <p>No requests</p>
+    //             </div>
+    //           )
+    //       }
+    //     </ul>
+    //
+    //     <div className={styles.details}>
+    //       {
+    //         selectedRequest !== null
+    //           ? (
+    //             <Details requestResponse={selectedRequest} />
+    //           ) : (
+    //             <div className={styles.noRequestSelected}>
+    //               <p>Select a request to inspect it</p>
+    //             </div>
+    //           )
+    //       }
+    //     </div>
+    //   </main>
+    // </div>
   );
 }
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index a7b5949..cb5e6bc 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -13,6 +13,21 @@ import {
 } from "react";
 import ReactJson from 'react-json-view';
 import styles from './Content.module.scss';
+import {Col, Container, Row} from "react-bootstrap";
+
+function getHeader(headers: { [key: string]: string }, key: string, unit?: string): string | null {
+  console.log(headers, key)
+  try {
+    const [_, value] = Object
+      .entries(headers)
+      .find(([headerKey]) => headerKey.toLowerCase() === key.toLowerCase())
+    return unit !== undefined
+      ? `${value}${unit}`
+      : value
+  } catch {
+    return null;
+  }
+}
 
 interface ContentProps {
   data: RequestPayload | ResponsePayload
@@ -20,17 +35,29 @@ interface ContentProps {
   raw?: boolean
 }
 
-export default function Content({ raw, setRaw, ...props }: ContentProps): JSX.Element {
+export default function Content({ raw, setRaw, data }: ContentProps): JSX.Element {
   return (
-    <div className={styles.content}>
-      <div className={styles.header}>
-        <input id='raw' type='checkbox' checked={raw} onChange={() => setRaw(!raw)}/>
-        <label htmlFor='raw'>Raw</label>
-      </div>
-      <div className={styles.body}>
+    <>
+      <Container fluid className="border-bottom">
+        <Row className="py-3">
+            <Col>
+              <input id='raw' type='checkbox' checked={raw} onChange={() => setRaw(!raw)}/>
+              <label htmlFor='raw' className="ps-1">Raw</label>
+            </Col>
+          <Col xs="auto">
+            {
+              [
+                getHeader(data.headers, 'content-length', 'bytes'),
+                getHeader(data.headers, 'content-type'),
+              ].filter(x => x !== null).join('; ')
+            }
+          </Col>
+        </Row>
+      </Container>
+      <Row>
         {(() => {
           try {
-            return ContentBody({ ...props, raw })
+            return ContentBody({ data, raw })
           } catch {
             return (
               <div className={styles.renderError}>
@@ -40,8 +67,28 @@ export default function Content({ raw, setRaw, ...props }: ContentProps): JSX.El
             )
           }
         })()}
-      </div>
-    </div>
+      </Row>
+    </>
+    // <div className={styles.content}>
+    //   <div className={styles.header}>
+    //     <input id='raw' type='checkbox' checked={raw} onChange={() => setRaw(!raw)}/>
+    //     <label htmlFor='raw'>Raw</label>
+    //   </div>
+    //   <div className={styles.body}>
+    //     {(() => {
+    //       try {
+    //         return ContentBody({ ...props, raw })
+    //       } catch {
+    //         return (
+    //           <div className={styles.renderError}>
+    //             <p>Body could not be rendered</p>
+    //             <a onClick={() => setRaw(true)}>View raw</a>
+    //           </div>
+    //         )
+    //       }
+    //     })()}
+    //   </div>
+    // </div>
   )
 };
 
@@ -51,12 +98,7 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
         return '';
       }
 
-      const [_, type] = (
-        Object
-          .entries(data.headers)
-          .find(([key]) => key.toLowerCase() === 'content-type')
-      );
-
+      const type = getHeader(data.headers, 'content-type');
       return type.toLowerCase().split(';')[0];
     }, [data, raw]);
 
diff --git a/src/components/Details/Details.tsx b/src/components/Details/Details.tsx
index e91c98c..c96aa7b 100644
--- a/src/components/Details/Details.tsx
+++ b/src/components/Details/Details.tsx
@@ -10,6 +10,16 @@ import RequestSummary from "../RequestSummary/RequestSummary";
 import classNames from 'classnames';
 import Content from "../Content/Content";
 import {getHost} from "../../utils";
+import {
+  Button,
+  Card,
+  Col,
+  Container,
+  Nav,
+  NavItem,
+  Row,
+  Table
+} from "react-bootstrap";
 
 
 interface TimingProps {
@@ -39,17 +49,31 @@ interface HeadersProps {
 
 function Headers({ title, headers }: HeadersProps) {
   return (
-    <div className={styles.headers}>
-      <h2>{ title }</h2>
-      {
-        Object.entries(headers).map(([key, value]) => (
-          <>
-            <div>{key}</div>
-            <div>{value}</div>
-          </>
-        ))
-      }
-    </div>
+    <Card className="m-3">
+        <Table
+          striped
+          responsive
+          borderless
+          hover
+          className='mb-0'
+        >
+          <thead>
+            <tr>
+              <th colSpan={2} className="bg-dark text-white rounded-top">{ title }</th>
+            </tr>
+          </thead>
+          <tbody>
+          {
+            Object.entries(headers).map(([key, value]) => (
+              <tr>
+                <td>{key}</td>
+                <td>{value}</td>
+              </tr>
+            ))
+          }
+          </tbody>
+        </Table>
+    </Card>
   )
 }
 
@@ -75,73 +99,147 @@ export default function Details({ requestResponse }: DetailsProps) {
   ), [requestResponse]);
 
   return (
-    <div className={styles.details}>
-      <div className={styles.header}>
-        <RequestSummary requestResponse={requestResponse} className={styles.summary}/>
-
-        <div className={styles.tabs}>
-          <button
-            onClick={() => selectTab('headers')}
-            className={classNames(styles.tab, {
-              [styles.selected]: tab === 'headers'
-            })}
-          >
-            Headers
-          </button>
-          <button
-            onClick={() => selectTab('request')}
-            className={classNames(styles.tab, {
-              [styles.selected]: tab === 'request'
-            })}
+    <>
+      <Row>
+        <Col>
+          <Container fluid style={{ fontSize: '1.5em' }} className="py-3">
+            <RequestSummary requestResponse={requestResponse} className={styles.summary}/>
+          </Container>
+        </Col>
+      </Row>
+      <Row className="gx-0 d-flex">
+        <Col>
+          <Nav
+            variant="tabs"
+            activeKey={tab}
+            onSelect={(tab) => selectTab(tab as Tab)}
           >
-            Request
-          </button>
-          <button
-            onClick={() => selectTab('response')}
-            className={classNames(styles.tab, {
-              [styles.selected]: tab === 'response'
-            })}
-            disabled={requestResponse.response === undefined}
-          >
-            Response
-          </button>
-
-          <div className={styles.emptySpace}>
-            <Timing timing={requestResponse.response?.timing ?? NaN} />
-            <button className={styles.resend} onClick={() => resend()}>Resend</button>
-          </div>
-        </div>
-      </div>
-      <div className={styles.content}>
-        {
-          tab === 'headers' && (
-            <>
-              <Headers
-                title="Request Headers"
-                headers={requestResponse.request.headers}
-              />
-              {
-                requestResponse.response && (
-                  <Headers
-                    title="Response Headers"
-                    headers={requestResponse.response.headers}
-                  />
-                )
-              }
-            </>
-          )
-        }
-        {
-          tab === 'request' && (
-            <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/>
-          )
-        }
-        {
-          tab === 'response' && requestResponse.response !== undefined && (
-            <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/>
-          )
-        }
-      </div>
-    </div>
+            <Nav.Item>
+              <Nav.Link eventKey="headers">
+                Headers
+              </Nav.Link >
+            </Nav.Item>
+            <Nav.Item>
+              <Nav.Link eventKey="request">
+                Request
+              </Nav.Link>
+            </Nav.Item>
+            <Nav.Item>
+              <Nav.Link
+                eventKey="response"
+                disabled={requestResponse.response === undefined}
+              >
+                Response
+              </Nav.Link>
+            </Nav.Item>
+          </Nav>
+        </Col>
+        <Col className="border-bottom px-3 " xs="auto">
+          <Timing timing={requestResponse.response?.timing ?? NaN} />
+          <Button variant="outline-primary" onClick={() => resend()} className="ms-3">
+            Resend
+          </Button>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          {
+            tab === 'headers' && (
+              <>
+                <Headers
+                  title="Request Headers"
+                  headers={requestResponse.request.headers}
+                />
+                {
+                  requestResponse.response && (
+                    <Headers
+                      title="Response Headers"
+                      headers={requestResponse.response.headers}
+                    />
+                  )
+                }
+              </>
+            )
+          }
+          {
+            tab === 'request' && (
+              <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/>
+            )
+          }
+          {
+            tab === 'response' && requestResponse.response !== undefined && (
+              <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/>
+            )
+          }
+        </Col>
+      </Row>
+    </>
+    // <div className={styles.details}>
+    //   <div className={styles.header}>
+    //
+    //     <div className={styles.tabs}>
+    //       <button
+    //         onClick={() => selectTab('headers')}
+    //         className={classNames(styles.tab, {
+    //           [styles.selected]: tab === 'headers'
+    //         })}
+    //       >
+    //         Headers
+    //       </button>
+    //       <button
+    //         onClick={() => selectTab('request')}
+    //         className={classNames(styles.tab, {
+    //           [styles.selected]: tab === 'request'
+    //         })}
+    //       >
+    //         Request
+    //       </button>
+    //       <button
+    //         onClick={() => selectTab('response')}
+    //         className={classNames(styles.tab, {
+    //           [styles.selected]: tab === 'response'
+    //         })}
+    //         disabled={requestResponse.response === undefined}
+    //       >
+    //         Response
+    //       </button>
+    //
+    //       <div className={styles.emptySpace}>
+    //         <Timing timing={requestResponse.response?.timing ?? NaN} />
+    //         <button className={styles.resend} onClick={() => resend()}>Resend</button>
+    //       </div>
+    //     </div>
+    //   </div>
+    //   <div className={styles.content}>
+    //     {
+    //       tab === 'headers' && (
+    //         <>
+    //           <Headers
+    //             title="Request Headers"
+    //             headers={requestResponse.request.headers}
+    //           />
+    //           {
+    //             requestResponse.response && (
+    //               <Headers
+    //                 title="Response Headers"
+    //                 headers={requestResponse.response.headers}
+    //               />
+    //             )
+    //           }
+    //         </>
+    //       )
+    //     }
+    //     {
+    //       tab === 'request' && (
+    //         <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/>
+    //       )
+    //     }
+    //     {
+    //       tab === 'response' && requestResponse.response !== undefined && (
+    //         <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/>
+    //       )
+    //     }
+    //   </div>
+    // </div>
   )
 }
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx
index af928c0..ea28f3e 100644
--- a/src/components/RequestSummary/RequestSummary.tsx
+++ b/src/components/RequestSummary/RequestSummary.tsx
@@ -3,31 +3,48 @@ import * as React from "react";
 import classNames from "classnames";
 
 import styles from './RequestSummary.module.scss';
+import {Badge, Card, Col, Row} from "react-bootstrap";
 
 interface RequestSummaryProps {
+  selected?: boolean
   requestResponse: RequestResponse
-  className?: string
 }
 
 function isBetween(value: number, min: number, max: number) {
   return value >= min && value <= max
 }
 
-export default function RequestSummary({ requestResponse: { request, response }, className = ''}: RequestSummaryProps) {
-  const statusCode = response?.status ?? 0
+function calcBadgeVariant(statusCode: number | undefined): string {
+  if (statusCode === undefined) {
+    return 'secondary';
+  } else if (isBetween(statusCode, 100, 199)) {
+    return 'info';
+  } else if (isBetween(statusCode, 200, 299)) {
+    return 'success';
+  } else if (isBetween(statusCode, 300, 399)) {
+    return 'primary';
+  } else if (isBetween(statusCode, 400, 499)) {
+    return 'danger';
+  } else if (isBetween(statusCode, 500, 599)) {
+    return 'warning';
+  }
+}
+
+export default function RequestSummary({ requestResponse: { request, response }, selected = false }: RequestSummaryProps) {
   return (
-    <div className={classNames(styles.requestSummary, className)}>
-      <span className={styles.method}>{ request.method }</span>
-      <p>{ request.path }</p>
-      <span className={classNames(styles.statusCode, {
-        [styles.info]: isBetween(statusCode, 100, 199),
-        [styles.success]: isBetween(statusCode, 200, 299),
-        [styles.redirect]: isBetween(statusCode, 300, 399),
-        [styles.clientError]: isBetween(statusCode, 400, 499),
-        [styles.serverError]: isBetween(statusCode, 500, 599)
-      })}>
-        { response?.status ?? 'Loading...'}
-      </span>
-    </div>
+    <Row>
+      <Col className='flex-grow-0 d-flex align-items-center'>{request.method}</Col>
+      <Col className='flex-grow-1'>{ request.path }</Col>
+      <Col className='flex-grow-0 d-flex align-items-center'>
+        <Badge
+          className={classNames({
+            'border': selected,
+          })}
+          bg={calcBadgeVariant(response?.status)}
+        >
+          { response?.status ?? 'Loading...'}
+        </Badge>
+      </Col>
+    </Row>
   )
 }
diff --git a/src/index.scss b/src/index.scss
index ef8fd7f..3d8dd7a 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,16 +1,14 @@
-@import "reset";
-
 * {
   box-sizing: border-box;
 }
 
 html, body, #root {
-  margin: 0;
-  padding: 0;
-
   height: 100vh;
   width: 100vw;
 
-  font-family: sans-serif;
-  overflow: hidden;
+}
+
+#root {
+  display: flex;
+  flex-flow: column nowrap;
 }
diff --git a/src/index.tsx b/src/index.tsx
index a6c4952..c381d4a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import App from "./components/App/App";
 
+import 'bootstrap/dist/css/bootstrap.min.css';
+
 import './index.scss';
 
 ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/yarn.lock b/yarn.lock
index 95617d4..ea89d82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -236,7 +236,7 @@
     babel-plugin-polyfill-regenerator "^0.3.0"
     semver "^6.3.0"
 
-"@babel/runtime@^7.10.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.13.16", "@babel/runtime@^7.14.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
   integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
@@ -276,7 +276,47 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@types/prop-types@*":
+"@popperjs/core@^2.10.1":
+  version "2.11.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9"
+  integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==
+
+"@react-aria/ssr@^3.0.1":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.1.0.tgz#b7163e6224725c30121932a8d1422ef91d1fab22"
+  integrity sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
+"@restart/hooks@^0.4.0", "@restart/hooks@^0.4.5":
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.5.tgz#e7acbea237bfc9e479970500cf87538b41a1ed02"
+  integrity sha512-tLGtY0aHeIfT7aPwUkvQuhIy3+q3w4iqmUzFLPlOAf/vNUacLaBt1j/S//jv/dQhenRh8jvswyMojCwmLvJw8A==
+  dependencies:
+    dequal "^2.0.2"
+
+"@restart/ui@^0.2.5":
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-0.2.6.tgz#43ecf7160c90d723310388aa9820e88b4ec1f2d1"
+  integrity sha512-lcutEWPvsxz0uEyRxuysCbHBfXDFnMKNMNTsnuPmLFjZXgW9fVmhksS6rpFklXHMwxOM9g6hRTBq0gS3QRKgzQ==
+  dependencies:
+    "@babel/runtime" "^7.13.16"
+    "@popperjs/core" "^2.10.1"
+    "@react-aria/ssr" "^3.0.1"
+    "@restart/hooks" "^0.4.0"
+    "@types/warning" "^3.0.0"
+    dequal "^2.0.2"
+    dom-helpers "^5.2.0"
+    prop-types "^15.7.2"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
+
+"@types/invariant@^2.2.33":
+  version "2.2.35"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
+  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
+
+"@types/prop-types@*", "@types/prop-types@^15.7.3":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
@@ -288,6 +328,22 @@
   dependencies:
     "@types/react" "^16"
 
+"@types/react-transition-group@^4.4.1":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@>=16.14.8", "@types/react@>=16.9.11":
+  version "17.0.38"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
+  integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/react@^16", "@types/react@^16.9.34":
   version "16.14.21"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a"
@@ -302,6 +358,11 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/warning@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
+  integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=
+
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -365,6 +426,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+bootstrap@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
+  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
+
 braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -463,6 +529,19 @@ debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "2.1.2"
 
+dequal@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
+dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 electron-to-chromium@^1.4.17:
   version "1.4.31"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz#8d5ccc3f8253cd142b07afaa84f200fd33a7f2a6"
@@ -670,6 +749,13 @@ immutable@^4.0.0:
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
   integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -733,7 +819,7 @@ lodash.flow@^3.3.0:
   resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
   integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
 
-loose-envify@^1.0.0, loose-envify@^1.1.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -806,6 +892,23 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types-extra@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b"
+  integrity sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==
+  dependencies:
+    react-is "^16.3.2"
+    warning "^4.0.0"
+
+prop-types@^15.6.2, prop-types@^15.7.2:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 pure-color@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
@@ -821,6 +924,28 @@ react-base16-styling@^0.6.0:
     lodash.flow "^3.3.0"
     pure-color "^1.2.0"
 
+react-bootstrap@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.1.1.tgz#a2f162fdda5275e89712ce4ca525ace661a48131"
+  integrity sha512-Igagk6LziNW/HgBlMVx+QiwPVt/oqrZ7tiBKgv31VYc/56kJEU0Y+BCJS6hrQP6QmmIpdVtX8TRaanv9xsmW5A==
+  dependencies:
+    "@babel/runtime" "^7.14.0"
+    "@restart/hooks" "^0.4.5"
+    "@restart/ui" "^0.2.5"
+    "@types/invariant" "^2.2.33"
+    "@types/prop-types" "^15.7.3"
+    "@types/react" ">=16.14.8"
+    "@types/react-transition-group" "^4.4.1"
+    "@types/warning" "^3.0.0"
+    classnames "^2.3.1"
+    dom-helpers "^5.2.1"
+    invariant "^2.2.4"
+    prop-types "^15.7.2"
+    prop-types-extra "^1.1.0"
+    react-transition-group "^4.4.1"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
+
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -830,6 +955,11 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-is@^16.13.1, react-is@^16.3.2:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react-json-view@^1.21.3:
   version "1.21.3"
   resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.21.3.tgz#f184209ee8f1bf374fb0c41b0813cff54549c475"
@@ -854,6 +984,16 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
+react-transition-group@^4.4.1:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -965,6 +1105,16 @@ ua-parser-js@^0.7.30:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
   integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
 
+uncontrollable@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738"
+  integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@types/react" ">=16.9.11"
+    invariant "^2.2.4"
+    react-lifecycles-compat "^3.0.4"
+
 use-composed-ref@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.2.1.tgz#9bdcb5ccd894289105da2325e1210079f56bf849"
@@ -993,3 +1143,10 @@ vite@^2.6.7:
     rollup "^2.59.0"
   optionalDependencies:
     fsevents "~2.3.2"
+
+warning@^4.0.0, warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
-- 
cgit v1.2.3