Merge develop into main (#15)

package.json

@@ -6,10 +6,10 @@
   "scripts": {
     "dev": "vite",
     "build": "rimraf dist && vite build",
-    "build-docker": "rimraf dist && vite build --base=/designer",
+    "build-docker": "rimraf dist && vite build --base=/templates",
     "clean": "rimraf dist",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "rimraf dist && vite build --base /designer --outDir dist/designer && http-server -a localhost -p 0 -o /designer dist"
+    "preview": "rimraf dist && vite build --base /templates --outDir dist/templates && http-server -a localhost -p 0 -o /templates dist"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -20,14 +20,17 @@
     "@tanstack/react-table": "^8.13.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "easy-autocomplete": "^1.3.5",
     "framer-motion": "^10.18.0",
+    "jquery": "^3.7.1",
     "json-format-highlight": "^1.0.4",
     "lucide-react": "^0.350.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "survey-core": "latest",
     "survey-react-ui": "latest",
+    "surveyjs-widgets": "^1.10.3",
     "swr": "^2.2.4",
     "zustand": "^4.5.0"
   },
@@ -46,4 +49,4 @@
     "rimraf": "^5.0.5",
     "vite": "^5.0.8"
   }
-}
+}

src/DialogComp/PreferencesDialog.tsx

@@ -0,0 +1,49 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import React, { useState } from "react";
+
+import Select from "@/ui/Select";
+
+import "./styles.css";
+const selectUrl = "https://enanomapper.adma.ai/api/projects.json";
+
+const PreferencesDialog = ({ setProjectName, projectName }) => {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button id="makeCopy" className="buttonMenu">
+          Preferences
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className="DialogOverlay" />
+        <Dialog.Content className="DialogContent">
+          <Dialog.Title className="DialogTitle">Choose Project</Dialog.Title>
+          <Dialog.Description className="DialogDescription">
+            You can choose your project.
+            <br />
+          </Dialog.Description>
+
+          <Select
+            url={selectUrl}
+            setProjectName={setProjectName}
+            projectName={projectName}
+          />
+
+          <div
+            style={{
+              display: "flex",
+              marginTop: 25,
+              justifyContent: "flex-end",
+            }}
+          >
+            <Dialog.Close asChild>
+              <button className="Button">Ok</button>
+            </Dialog.Close>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default PreferencesDialog;

src/DialogComp/styles.css

@@ -39,10 +39,10 @@ input {
 }
 
 .DialogTitle {
-  margin: 0;
+  margin: 0 0 1rem 0;
   font-weight: 500;
   color: var(--mauve-12);
-  font-size: 17px;
+  font-size: 20px !important;
 }
 
 .DialogDescription {

src/IconsComponents/BackArrow.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+function BackArrow() {
+  return (
+    <span className={"rotate-90 transition-transform"}>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          x="15.5564"
+          y="7.77817"
+          width="2"
+          height="11"
+          transform="rotate(135 15.5564 7.77817)"
+          fill="#8D8D8D"
+        />
+        <rect
+          x="14.1422"
+          y="6.36395"
+          width="2"
+          height="11"
+          transform="rotate(45 14.1422 6.36395)"
+          fill="#8D8D8D"
+        />
+      </svg>
+    </span>
+  );
+}
+
+export default BackArrow;

src/IconsComponents/CloseIcon.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default function CloseIcon() {
+  return (
+    <svg
+      width="11"
+      height="11"
+      viewBox="0 0 11 11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M1 10L9.99999 1.00001" stroke="#ccc" strokeWidth="2" />
+      <path d="M1 1L9.99999 9.99999" stroke="#ccc" strokeWidth="2" />
+    </svg>
+  );
+}

src/IconsComponents/SearchIcon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function SearchIcon() {
+  return (
+    <svg
+      width="20"
+      height="19"
+      viewBox="0 0 30 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="10.0036"
+        cy="10.0036"
+        r="9.00362"
+        transform="matrix(0.707771 0.706442 -0.706954 0.70726 14.144 0)"
+        stroke="#676767"
+        strokeWidth="2"
+      />
+      <rect
+        width="11.004"
+        height="2.00072"
+        transform="matrix(0.707771 0.706442 -0.706954 0.70726 21.2314 19.7949)"
+        fill="#676767"
+      />
+    </svg>
+  );
+}