Frontend improvement and cleanup (#1690)

* Replace Create-React-App with Vite.js

* Update React-Router to v6

* Cleanup unused codes

3 files changed, 353 insertions, 156 deletions

diff --git a/libs/knowit/defaults.yml b/libs/knowit/defaults.yml
index af6b79c32..9dd7e46db 100644
--- a/libs/knowit/defaults.yml
+++ b/libs/knowit/defaults.yml
@@ -455,46 +455,46 @@ profiles:
 
   VideoProfileLevel:
     L1:
-      default: '1'
+      default: "1"
       technical: Level 1
     L11:
-      default: '1.1'
+      default: "1.1"
       technical: Level 1.1
     L13:
-      default: '1.3'
+      default: "1.3"
       technical: Level 1.3
     L2:
-      default: '2'
+      default: "2"
       technical: Level 2
     L21:
-      default: '2.1'
+      default: "2.1"
       technical: Level 2.1
     L22:
-      default: '2.2'
+      default: "2.2"
       technical: Level 2.2
     L3:
-      default: '3'
+      default: "3"
       technical: Level 3
     L31:
-      default: '3.1'
+      default: "3.1"
       technical: Level 3.1
     L32:
-      default: '3.2'
+      default: "3.2"
       technical: Level 3.2
     L4:
-      default: '4'
+      default: "4"
       technical: Level 4
     L41:
-      default: '4.1'
+      default: "4.1"
       technical: Level 4.1
     L42:
-      default: '4.2'
+      default: "4.2"
       technical: Level 4.2
     L5:
-      default: '5'
+      default: "5"
       technical: Level 5
     L51:
-      default: '5.1'
+      default: "5.1"
       technical: Level 5.1
     LOW:
       default: Low
diff --git a/libs/werkzeug/debug/shared/debugger.js b/libs/werkzeug/debug/shared/debugger.js
index 2354f0300..f6a445e56 100644
--- a/libs/werkzeug/debug/shared/debugger.js
+++ b/libs/werkzeug/debug/shared/debugger.js
@@ -11,8 +11,10 @@ docReady(() => {
   if (EVALEX) {
     addConsoleIconToFrames(frames);
   }
-  addEventListenersToElements(document.querySelectorAll("div.detail"), "click", () =>
-    document.querySelector("div.traceback").scrollIntoView(false)
+  addEventListenersToElements(
+    document.querySelectorAll("div.detail"),
+    "click",
+    () => document.querySelector("div.traceback").scrollIntoView(false)
   );
   addToggleFrameTraceback(frames);
   addToggleTraceTypesOnClick(document.querySelectorAll("h2.traceback"));
@@ -23,12 +25,13 @@ docReady(() => {
 function addToggleFrameTraceback(frames) {
   frames.forEach((frame) => {
     frame.addEventListener("click", () => {
-      frame.getElementsByTagName("pre")[0].parentElement.classList.toggle("expanded");
+      frame
+        .getElementsByTagName("pre")[0]
+        .parentElement.classList.toggle("expanded");
     });
-  })
+  });
 }
 
-
 function wrapPlainTraceback() {
   const plainTraceback = document.querySelector("div.plain textarea");
   const wrapper = document.createElement("pre");
@@ -51,7 +54,7 @@ function initPinBox() {
         `${document.location.pathname}?__debugger__=yes&cmd=pinauth&pin=${pin}&s=${encodedSecret}`
       )
         .then((res) => res.json())
-        .then(({auth, exhausted}) => {
+        .then(({ auth, exhausted }) => {
           if (auth) {
             EVALEX_TRUSTED = true;
             fadeOut(document.getElementsByClassName("pin-prompt")[0]);
@@ -276,7 +279,9 @@ function handleConsoleSubmit(e, command, frameID) {
     };
     const paramString = Object.keys(params)
       .map((key) => {
-        return "&" + encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
+        return (
+          "&" + encodeURIComponent(key) + "=" + encodeURIComponent(params[key])
+        );
       })
       .join("");
 
@@ -351,7 +356,10 @@ function fadeIn(element, display) {
 }
 
 function docReady(fn) {
-  if (document.readyState === "complete" || document.readyState === "interactive") {
+  if (
+    document.readyState === "complete" ||
+    document.readyState === "interactive"
+  ) {
     setTimeout(fn, 1);
   } else {
     document.addEventListener("DOMContentLoaded", fn);
diff --git a/libs/werkzeug/debug/shared/style.css b/libs/werkzeug/debug/shared/style.css
index bd996134d..176051357 100644
--- a/libs/werkzeug/debug/shared/style.css
+++ b/libs/werkzeug/debug/shared/style.css
@@ -1,163 +1,352 @@
 @font-face {
-  font-family: 'Ubuntu';
+  font-family: "Ubuntu";
   font-style: normal;
   font-weight: normal;
-  src: local('Ubuntu'), local('Ubuntu-Regular'),
-    url('?__debugger__=yes&cmd=resource&f=ubuntu.ttf') format('truetype');
-}
-
-body, input  { font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva',
-               'Verdana', sans-serif; color: #000; text-align: center;
-               margin: 1em; padding: 0; font-size: 15px; }
-h1, h2, h3   { font-family: 'Ubuntu', 'Lucida Grande', 'Lucida Sans Unicode',
-               'Geneva', 'Verdana', sans-serif; font-weight: normal; }
-
-input        { background-color: #fff; margin: 0; text-align: left;
-               outline: none !important; }
-input[type="submit"] { padding: 3px 6px; }
-a            { color: #11557C; }
-a:hover      { color: #177199; }
-pre, code,
-textarea     { font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono',
-               monospace; font-size: 14px; }
-
-div.debugger { text-align: left; padding: 12px; margin: auto;
-               background-color: white; }
-h1           { font-size: 36px; margin: 0 0 0.3em 0; }
-div.detail { cursor: pointer; }
-div.detail p { margin: 0 0 8px 13px; font-size: 14px; white-space: pre-wrap;
-               font-family: monospace; }
-div.explanation { margin: 20px 13px; font-size: 15px; color: #555; }
-div.footer   { font-size: 13px; text-align: right; margin: 30px 0;
-               color: #86989B; }
-
-h2           { font-size: 16px; margin: 1.3em 0 0.0 0; padding: 9px;
-               background-color: #11557C; color: white; }
-h2 em, h3 em { font-style: normal; color: #A5D6D9; font-weight: normal; }
-
-div.traceback, div.plain { border: 1px solid #ddd; margin: 0 0 1em 0; padding: 10px; }
-div.plain p      { margin: 0; }
+  src: local("Ubuntu"), local("Ubuntu-Regular"),
+    url("?__debugger__=yes&cmd=resource&f=ubuntu.ttf") format("truetype");
+}
+
+body,
+input {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Geneva", "Verdana",
+    sans-serif;
+  color: #000;
+  text-align: center;
+  margin: 1em;
+  padding: 0;
+  font-size: 15px;
+}
+h1,
+h2,
+h3 {
+  font-family: "Ubuntu", "Lucida Grande", "Lucida Sans Unicode", "Geneva",
+    "Verdana", sans-serif;
+  font-weight: normal;
+}
+
+input {
+  background-color: #fff;
+  margin: 0;
+  text-align: left;
+  outline: none !important;
+}
+input[type="submit"] {
+  padding: 3px 6px;
+}
+a {
+  color: #11557c;
+}
+a:hover {
+  color: #177199;
+}
+pre,
+code,
+textarea {
+  font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", monospace;
+  font-size: 14px;
+}
+
+div.debugger {
+  text-align: left;
+  padding: 12px;
+  margin: auto;
+  background-color: white;
+}
+h1 {
+  font-size: 36px;
+  margin: 0 0 0.3em 0;
+}
+div.detail {
+  cursor: pointer;
+}
+div.detail p {
+  margin: 0 0 8px 13px;
+  font-size: 14px;
+  white-space: pre-wrap;
+  font-family: monospace;
+}
+div.explanation {
+  margin: 20px 13px;
+  font-size: 15px;
+  color: #555;
+}
+div.footer {
+  font-size: 13px;
+  text-align: right;
+  margin: 30px 0;
+  color: #86989b;
+}
+
+h2 {
+  font-size: 16px;
+  margin: 1.3em 0 0 0;
+  padding: 9px;
+  background-color: #11557c;
+  color: white;
+}
+h2 em,
+h3 em {
+  font-style: normal;
+  color: #a5d6d9;
+  font-weight: normal;
+}
+
+div.traceback,
+div.plain {
+  border: 1px solid #ddd;
+  margin: 0 0 1em 0;
+  padding: 10px;
+}
+div.plain p {
+  margin: 0;
+}
 div.plain textarea,
-div.plain pre { margin: 10px 0 0 0; padding: 4px;
-                background-color: #E8EFF0; border: 1px solid #D3E7E9; }
-div.plain textarea { width: 99%; height: 300px; }
-div.traceback h3 { font-size: 1em; margin: 0 0 0.8em 0; }
-div.traceback ul { list-style: none; margin: 0; padding: 0 0 0 1em; }
-div.traceback h4 { font-size: 13px; font-weight: normal; margin: 0.7em 0 0.1em 0; }
-div.traceback pre { margin: 0; padding: 5px 0 3px 15px;
-                    background-color: #E8EFF0; border: 1px solid #D3E7E9; }
-div.traceback .library .current { background: white; color: #555; }
-div.traceback .expanded .current { background: #E8EFF0; color: black; }
-div.traceback pre:hover { background-color: #DDECEE; color: black; cursor: pointer; }
-div.traceback div.source.expanded pre + pre { border-top: none; }
-
-div.traceback span.ws { display: none; }
-div.traceback pre.before, div.traceback pre.after { display: none; background: white; }
+div.plain pre {
+  margin: 10px 0 0 0;
+  padding: 4px;
+  background-color: #e8eff0;
+  border: 1px solid #d3e7e9;
+}
+div.plain textarea {
+  width: 99%;
+  height: 300px;
+}
+div.traceback h3 {
+  font-size: 1em;
+  margin: 0 0 0.8em 0;
+}
+div.traceback ul {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 1em;
+}
+div.traceback h4 {
+  font-size: 13px;
+  font-weight: normal;
+  margin: 0.7em 0 0.1em 0;
+}
+div.traceback pre {
+  margin: 0;
+  padding: 5px 0 3px 15px;
+  background-color: #e8eff0;
+  border: 1px solid #d3e7e9;
+}
+div.traceback .library .current {
+  background: white;
+  color: #555;
+}
+div.traceback .expanded .current {
+  background: #e8eff0;
+  color: black;
+}
+div.traceback pre:hover {
+  background-color: #ddecee;
+  color: black;
+  cursor: pointer;
+}
+div.traceback div.source.expanded pre + pre {
+  border-top: none;
+}
+
+div.traceback span.ws {
+  display: none;
+}
+div.traceback pre.before,
+div.traceback pre.after {
+  display: none;
+  background: white;
+}
 div.traceback div.source.expanded pre.before,
 div.traceback div.source.expanded pre.after {
-    display: block;
+  display: block;
 }
 
 div.traceback div.source.expanded span.ws {
-    display: inline;
-}
-
-div.traceback blockquote { margin: 1em 0 0 0; padding: 0; white-space: pre-line; }
-div.traceback img { float: right; padding: 2px; margin: -3px 2px 0 0; display: none; }
-div.traceback img:hover { background-color: #ddd; cursor: pointer;
-                          border-color: #BFDDE0; }
-div.traceback pre:hover img { display: block; }
-div.traceback cite.filename { font-style: normal; color: #3B666B; }
-
-pre.console { border: 1px solid #ccc; background: white!important;
-              color: black; padding: 5px!important;
-              margin: 3px 0 0 0!important; cursor: default!important;
-              max-height: 400px; overflow: auto; }
-pre.console form { color: #555; }
-pre.console input { background-color: transparent; color: #555;
-                    width: 90%; font-family: 'Consolas', 'Deja Vu Sans Mono',
-                    'Bitstream Vera Sans Mono', monospace; font-size: 14px;
-                     border: none!important; }
-
-span.string { color: #30799B; }
-span.number { color: #9C1A1C; }
-span.help   { color: #3A7734; }
-span.object { color: #485F6E; }
-span.extended { opacity: 0.5; }
-span.extended:hover { opacity: 1; }
-a.toggle { text-decoration: none; background-repeat: no-repeat;
-           background-position: center center;
-           background-image: url(?__debugger__=yes&cmd=resource&f=more.png); }
-a.toggle:hover { background-color: #444; }
-a.open { background-image: url(?__debugger__=yes&cmd=resource&f=less.png); }
+  display: inline;
+}
+
+div.traceback blockquote {
+  margin: 1em 0 0 0;
+  padding: 0;
+  white-space: pre-line;
+}
+div.traceback img {
+  float: right;
+  padding: 2px;
+  margin: -3px 2px 0 0;
+  display: none;
+}
+div.traceback img:hover {
+  background-color: #ddd;
+  cursor: pointer;
+  border-color: #bfdde0;
+}
+div.traceback pre:hover img {
+  display: block;
+}
+div.traceback cite.filename {
+  font-style: normal;
+  color: #3b666b;
+}
+
+pre.console {
+  border: 1px solid #ccc;
+  background: white !important;
+  color: black;
+  padding: 5px !important;
+  margin: 3px 0 0 0 !important;
+  cursor: default !important;
+  max-height: 400px;
+  overflow: auto;
+}
+pre.console form {
+  color: #555;
+}
+pre.console input {
+  background-color: transparent;
+  color: #555;
+  width: 90%;
+  font-family: "Consolas", "Deja Vu Sans Mono", "Bitstream Vera Sans Mono",
+    monospace;
+  font-size: 14px;
+  border: none !important;
+}
+
+span.string {
+  color: #30799b;
+}
+span.number {
+  color: #9c1a1c;
+}
+span.help {
+  color: #3a7734;
+}
+span.object {
+  color: #485f6e;
+}
+span.extended {
+  opacity: 0.5;
+}
+span.extended:hover {
+  opacity: 1;
+}
+a.toggle {
+  text-decoration: none;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-image: url(?__debugger__=yes&cmd=resource&f=more.png);
+}
+a.toggle:hover {
+  background-color: #444;
+}
+a.open {
+  background-image: url(?__debugger__=yes&cmd=resource&f=less.png);
+}
 
 pre.console div.traceback,
-pre.console div.box { margin: 5px 10px; white-space: normal;
-                      border: 1px solid #11557C; padding: 10px;
-                      font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva',
-                      'Verdana', sans-serif;  }
+pre.console div.box {
+  margin: 5px 10px;
+  white-space: normal;
+  border: 1px solid #11557c;
+  padding: 10px;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Geneva", "Verdana",
+    sans-serif;
+}
 pre.console div.box h3,
-pre.console div.traceback h3 { margin: -10px -10px 10px -10px; padding: 5px;
-                               background: #11557C; color: white; }
-
-pre.console div.traceback pre:hover { cursor: default; background: #E8EFF0; }
-pre.console div.traceback pre.syntaxerror { background: inherit; border: none;
-                                            margin: 20px -10px -10px -10px;
-                                            padding: 10px; border-top: 1px solid #BFDDE0;
-                                            background: #E8EFF0; }
-pre.console div.noframe-traceback pre.syntaxerror { margin-top: -10px; border: none; }
-
-pre.console div.box pre.repr { padding: 0; margin: 0; background-color: white; border: none; }
-pre.console div.box table { margin-top: 6px; }
-pre.console div.box pre { border: none; }
-pre.console div.box pre.help { background-color: white; }
-pre.console div.box pre.help:hover { cursor: default; }
-pre.console table tr { vertical-align: top; }
-div.console { border: 1px solid #ccc; padding: 4px; background-color: #fafafa; }
-
-div.traceback pre, div.console pre {
-    white-space: pre-wrap;       /* css-3 should we be so lucky... */
-    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-    white-space: -pre-wrap;      /* Opera 4-6 ?? */
-    white-space: -o-pre-wrap;    /* Opera 7 ?? */
-    word-wrap: break-word;       /* Internet Explorer 5.5+ */
-    _white-space: pre;           /* IE only hack to re-specify in
-                                 addition to word-wrap  */
+pre.console div.traceback h3 {
+  margin: -10px -10px 10px -10px;
+  padding: 5px;
+  background: #11557c;
+  color: white;
 }
 
+pre.console div.traceback pre:hover {
+  cursor: default;
+  background: #e8eff0;
+}
+pre.console div.traceback pre.syntaxerror {
+  background: inherit;
+  border: none;
+  margin: 20px -10px -10px -10px;
+  padding: 10px;
+  border-top: 1px solid #bfdde0;
+  background: #e8eff0;
+}
+pre.console div.noframe-traceback pre.syntaxerror {
+  margin-top: -10px;
+  border: none;
+}
+
+pre.console div.box pre.repr {
+  padding: 0;
+  margin: 0;
+  background-color: white;
+  border: none;
+}
+pre.console div.box table {
+  margin-top: 6px;
+}
+pre.console div.box pre {
+  border: none;
+}
+pre.console div.box pre.help {
+  background-color: white;
+}
+pre.console div.box pre.help:hover {
+  cursor: default;
+}
+pre.console table tr {
+  vertical-align: top;
+}
+div.console {
+  border: 1px solid #ccc;
+  padding: 4px;
+  background-color: #fafafa;
+}
+
+div.traceback pre,
+div.console pre {
+  white-space: pre-wrap; /* css-3 should we be so lucky... */
+  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+  white-space: -pre-wrap; /* Opera 4-6 ?? */
+  white-space: -o-pre-wrap; /* Opera 7 ?? */
+  word-wrap: break-word; /* Internet Explorer 5.5+ */
+  _white-space: pre; /* IE only hack to re-specify in
+                                 addition to word-wrap  */
+}
 
 div.pin-prompt {
-    position: absolute;
-    display: none;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: rgba(255, 255, 255, 0.8);
+  position: absolute;
+  display: none;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(255, 255, 255, 0.8);
 }
 
 div.pin-prompt .inner {
-    background: #eee;
-    padding: 10px 50px;
-    width: 350px;
-    margin: 10% auto 0 auto;
-    border: 1px solid #ccc;
-    border-radius: 2px;
+  background: #eee;
+  padding: 10px 50px;
+  width: 350px;
+  margin: 10% auto 0 auto;
+  border: 1px solid #ccc;
+  border-radius: 2px;
 }
 
 div.exc-divider {
-    margin: 0.7em 0 0 -1em;
-    padding: 0.5em;
-    background: #11557C;
-    color: #ddd;
-    border: 1px solid #ddd;
+  margin: 0.7em 0 0 -1em;
+  padding: 0.5em;
+  background: #11557c;
+  color: #ddd;
+  border: 1px solid #ddd;
 }
 
 .console.active {
-    max-height: 0!important;
-    display: none;
+  max-height: 0 !important;
+  display: none;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }