Add bug report page

package-lock.json

@@ -23,6 +23,8 @@
         "react-hotkeys-hook": "^4.4.1",
         "react-router-dom": "^6.11.2",
         "react-scripts": "5.0.1",
+        "slate": "^0.94.1",
+        "slate-react": "^0.98.3",
         "socket.io-client": "^4.7.2",
         "unique-names-generator": "^4.7.1",
         "url": "^0.11.1",
@@ -2469,14 +2471,6 @@
         "bezier-easing": "^2.1.0"
       }
     },
-    "node_modules/@douyinfe/semi-foundation/node_modules/scroll-into-view-if-needed": {
-      "version": "2.2.31",
-      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
-      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
-      "dependencies": {
-        "compute-scroll-into-view": "^1.0.20"
-      }
-    },
     "node_modules/@douyinfe/semi-icons": {
       "version": "2.37.0",
       "resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.37.0.tgz",
@@ -2547,14 +2541,6 @@
         "react-dom": "0.14.x || 15.x || 16.x || 17.x"
       }
     },
-    "node_modules/@douyinfe/semi-ui/node_modules/scroll-into-view-if-needed": {
-      "version": "2.2.31",
-      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
-      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
-      "dependencies": {
-        "compute-scroll-into-view": "^1.0.20"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3623,6 +3609,11 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -4349,6 +4340,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/is-hotkey": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.7.tgz",
+      "integrity": "sha512-yB5C7zcOM7idwYZZ1wKQ3pTfjA9BbvFqRWvKB46GFddxnJtHwi/b9y84ykQtxQPg5qhdpg4Q/kWU3EGoCTmLzQ=="
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -4418,6 +4414,11 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.198",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.198.tgz",
+      "integrity": "sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg=="
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -7111,6 +7112,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/direction": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz",
+      "integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==",
+      "bin": {
+        "direction": "cli.js"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -9681,6 +9694,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hotkey": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.8.tgz",
+      "integrity": "sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ=="
+    },
     "node_modules/is-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -9754,6 +9772,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -15701,6 +15727,14 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "2.2.31",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
+      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
+      "dependencies": {
+        "compute-scroll-into-view": "^1.0.20"
+      }
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -15943,6 +15977,37 @@
         "node": ">=8"
       }
     },
+    "node_modules/slate": {
+      "version": "0.94.1",
+      "resolved": "https://registry.npmjs.org/slate/-/slate-0.94.1.tgz",
+      "integrity": "sha512-GH/yizXr1ceBoZ9P9uebIaHe3dC/g6Plpf9nlUwnvoyf6V1UOYrRwkabtOCd3ZfIGxomY4P7lfgLr7FPH8/BKA==",
+      "dependencies": {
+        "immer": "^9.0.6",
+        "is-plain-object": "^5.0.0",
+        "tiny-warning": "^1.0.3"
+      }
+    },
+    "node_modules/slate-react": {
+      "version": "0.98.3",
+      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.98.3.tgz",
+      "integrity": "sha512-p1BnF9eRyRM0i5hkgOb11KgmpWLQm9Zyp6jVkOAj5fPdIGheKhg48Z7aWKrayeJ4nmRyi/NjRZz/io5hQcphmw==",
+      "dependencies": {
+        "@juggle/resize-observer": "^3.4.0",
+        "@types/is-hotkey": "^0.1.1",
+        "@types/lodash": "^4.14.149",
+        "direction": "^1.0.3",
+        "is-hotkey": "^0.1.6",
+        "is-plain-object": "^5.0.0",
+        "lodash": "^4.17.4",
+        "scroll-into-view-if-needed": "^2.2.20",
+        "tiny-invariant": "1.0.6"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.65.3"
+      }
+    },
     "node_modules/socket.io-client": {
       "version": "4.7.2",
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.2.tgz",
@@ -16794,6 +16859,16 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz",
+      "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",

package.json

@@ -18,6 +18,8 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "slate": "^0.94.1",
+    "slate-react": "^0.98.3",
     "socket.io-client": "^4.7.2",
     "unique-names-generator": "^4.7.1",
     "url": "^0.11.1",

src/App.js

@@ -3,6 +3,7 @@ import Editor from "./pages/editor";
 import LandingPage from "./pages/landing_page";
 import Survey from "./pages/survey";
 import Shortcuts from "./pages/shortcuts";
+import BugReport from "./pages/bug_report";
 
 function App() {
   return (
@@ -13,6 +14,7 @@ function App() {
           <Route path="/editor" element={<Editor name="Untitled" />} />
           <Route path="/survey" element={<Survey />} />
           <Route path="/shortcuts" element={<Shortcuts/>}/>
+          <Route path="/bug_report" element={<BugReport/>}/>
         </Routes>
       </Router>
     </>

src/components/control_panel.jsx

@@ -976,7 +976,7 @@ export default function ControlPanel(props) {
         function: () => {},
       },
       "Report a bug": {
-        function: () => {},
+        function: () => window.open("/bug_report", "_blank"),
       },
       "Suggest a feature": {
         function: () => {},

src/components/rich_editor.jsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { createEditor } from "slate";
+import { Slate, Editable, withReact } from "slate-react";
+
+const initialValue = [
+  {
+    type: "paragraph",
+    children: [{ text: "A line of text in a paragraph." }],
+  },
+];
+
+export default function RichEditor() {
+  const [editor] = useState(() => withReact(createEditor()));
+  return (
+    <Slate editor={editor} initialValue={initialValue}>
+      <Editable />
+    </Slate>
+  );
+}

src/index.css

@@ -55,7 +55,7 @@
 
 .card-theme{
   color: var(--semi-color-text-1);
-  background-color: rgba(var(--semi-grey-1), 1);
+  background-color: rgba(var(--semi-grey-0), 1);
 }
 
 .toolbar-theme {

src/pages/bug_report.jsx

@@ -0,0 +1,187 @@
+import React, { useEffect, useState } from "react";
+import logo_light from "../assets/logo_light_46.png";
+import logo_dark from "../assets/logo_dark_46.png";
+import { Banner, Button, Input, Upload } from "@douyinfe/semi-ui";
+import {
+  IconSun,
+  IconMoon,
+  IconGithubLogo,
+  IconPaperclip,
+} from "@douyinfe/semi-icons";
+import RichEditor from "../components/rich_editor";
+
+export default function BugReport() {
+  const [theme, setTheme] = useState("");
+
+  useEffect(() => {
+    const t = localStorage.getItem("theme");
+    setTheme(t);
+    if (t === "dark") {
+      const body = document.body;
+      if (body.hasAttribute("theme-mode")) {
+        body.setAttribute("theme-mode", "dark");
+      }
+    } else {
+      const body = document.body;
+      if (body.hasAttribute("theme-mode")) {
+        body.setAttribute("theme-mode", "light");
+      }
+    }
+    document.title = "Report a bug - drawDB";
+    document.body.setAttribute("class", "theme");
+  }, [setTheme]);
+
+  const changeTheme = () => {
+    const body = document.body;
+    const t = body.getAttribute("theme-mode");
+    if (t === "dark") {
+      if (body.hasAttribute("theme-mode")) {
+        body.setAttribute("theme-mode", "light");
+        setTheme("light");
+      }
+    } else {
+      if (body.hasAttribute("theme-mode")) {
+        body.setAttribute("theme-mode", "dark");
+        setTheme("dark");
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className="sm:py-3 py-5 px-6 flex justify-between items-center">
+        <div className="flex items-center justify-start">
+          <img
+            src={theme === "dark" ? logo_dark : logo_light}
+            alt="logo"
+            className="me-2 sm:h-[28px] md:h-[46px]"
+          />
+          <div className="ms-4 sm:text-sm xl:text-lg font-semibold">
+            Report a bug
+          </div>
+        </div>
+        <div className="flex items-center">
+          <Button
+            icon={
+              theme === "dark" ? (
+                <IconSun size="extra-large" />
+              ) : (
+                <IconMoon size="extra-large" />
+              )
+            }
+            theme="borderless"
+            onClick={changeTheme}
+          ></Button>
+        </div>
+      </div>
+      <hr
+        className={`${
+          theme === "dark" ? "border-zinc-700" : "border-zinc-300"
+        } my-1`}
+      />
+      <div className="grid grid-cols-12 gap-8 my-6 mx-8">
+        <div className="col-span-4 card-theme p-5 rounded-md">
+          <div className="flex items-center">
+            <IconPaperclip />
+            <div className="font-bold ms-1">Describe the bug </div>
+          </div>
+          <div className="text-sm mt-1">
+            Please provide a clear and concise description of what the bug is.
+          </div>
+          <div className="flex items-center mt-3">
+            <IconPaperclip />
+            <div className="font-bold ms-1">Steps to reproduce the bug </div>
+          </div>
+          <div className="text-sm mt-1">
+            Please provide the steps of how to reproduce the bug.
+          </div>
+          <div className="flex items-center mt-3">
+            <IconPaperclip />
+            <div className="font-bold ms-1">Expected behaviour</div>
+          </div>
+          <div className="text-sm mt-1">
+            Tell us what you expected to see vs what you saw.
+          </div>
+          <div className="flex items-center mt-3">
+            <IconPaperclip />
+            <div className="font-bold ms-1">Your browser and device</div>
+          </div>
+          <div className="text-sm mt-1">
+            What web browser and device did you encounter the bug on.
+          </div>
+          <div className="flex items-center mt-3">
+            <IconPaperclip />
+            <div className="font-bold ms-1">Screenshots</div>
+          </div>
+          <div className="text-sm mt-1">
+            Add any relevant images if possible.
+          </div>
+          <div className="flex items-center justify-center my-2">
+            <hr
+              className={`${
+                theme === "dark" ? "border-zinc-700" : "border-zinc-300"
+              } flex-grow`}
+            />
+            <div className="text-sm font-semibold m-2">Alternatively</div>
+            <hr
+              className={`${
+                theme === "dark" ? "border-zinc-700" : "border-zinc-300"
+              } flex-grow`}
+            />
+          </div>
+          <Button
+            block
+            icon={<IconGithubLogo />}
+            style={{ backgroundColor: "#239144", color: "white" }}
+            onClick={() => {
+              window.open(
+                "https://github.com/drawdb-io/drawdb-issues/issues",
+                "_self"
+              );
+            }}
+          >
+            Add an issue
+          </Button>
+        </div>
+        <div className="col-span-8">
+          <Banner
+            fullMode={false}
+            type="info"
+            icon={null}
+            closeIcon={null}
+            description={
+              <div>
+                We value your feedback! If you've encountered a bug or issue
+                while using our platform, please help us improve by reporting
+                it. Your input is invaluable in making our service better.
+              </div>
+            }
+          />
+          <div className="p-5 mt-6 card-theme rounded-md">
+            <Input placeholder="Title" />
+            <RichEditor />
+            <Upload
+              action="#"
+              beforeUpload={({ file, fileList }) => {}}
+              draggable={true}
+              dragMainText="Click to upload the file or drag and drop the file here"
+              dragSubText="Support json"
+              accept="application/json,.ddb"
+              onRemove={() => {}}
+              onFileChange={() => {}}
+              limit={5}
+            ></Upload>
+          </div>
+        </div>
+      </div>
+      <hr
+        className={`${
+          theme === "dark" ? "border-zinc-700" : "border-zinc-300"
+        } my-1`}
+      />
+      <div className="text-center text-sm py-3">
+        &copy; 2024 <strong>drawDB</strong> - All right reserved.
+      </div>
+    </>
+  );
+}