feat(app): fix map bug, migrate to modal2, add doc groups, fix scroll to in creator

biome.json

@@ -41,9 +41,6 @@
         "noUnknownAtRules": "off",
         "useIterableCallbackReturn": "off"
       },
-      "security": {
-        "noDangerouslySetInnerHtml": "off"
-      },
       "style": {
         "useImportType": "off",
         "noNonNullAssertion": "off",

cypress/scenarios/docs-management.ts

@@ -130,7 +130,9 @@ const DOCS_MANAGEMENT_SCENARIOS = {
       .and(`I see text`, [
         editedDocumentName,
         editedDocumentDescription,
-        `angular, vue, node`,
+        "angular",
+        "vue",
+        "node",
       ])
       .when(`I click button`, [`Close additional options`]);
 

gatsby-ssr.tsx

@@ -9,6 +9,7 @@ export const onRenderBody: GatsbySSR["onRenderBody"] = ({
     <script
       id="dark-mode"
       key="dark-mode"
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: <No injection RISK - DONE FULLY DURING SSG>
       dangerouslySetInnerHTML={{
         __html: `
         void function() {

package.json

@@ -24,8 +24,9 @@
     "typecheck": "tsc --noEmit",
     "test": "jest",
     "test:watch": "jest --watch",
-    "e2e:1": "cypress run --spec \"cypress/e2e/user-profile.cy.ts\"",
+    "e2e:1": "cypress run --spec \"cypress/e2e/docs-management.cy.ts\"",
     "e2e:all": "cypress run",
+    "e2e:open": "cypress open",
     "e2e:check-snapshots": "npm run build && start-server-and-test serve http://localhost:9000 \"cypress run\"",
     "ci:lint": "npm run lint",
     "ci:e2e": "npm run build && start-server-and-test serve http://localhost:9000 \"cypress run --env failOnSnapshotDiff=false\"",

src/api-4markdown-contracts/contracts/index.ts

@@ -28,6 +28,7 @@ import type {
   YourAccountDto,
   CommentDto,
   ResourceCompletionDto,
+  ManualDocumentDto,
 } from "../dtos";
 import { AccessGroupDto } from "../dtos/access-group.dto";
 // @TODO[PRIO=1]: [Add better error handling and throwing custom errors].
@@ -137,6 +138,7 @@ type GetYourDocumentsContract = Contract<
     | PrivateDocumentDto
     | Omit<PublicDocumentDto, "author" | "rating">
     | Omit<PermanentDocumentDto, "author" | "rating">
+    | Omit<ManualDocumentDto, "author" | "rating">
   )[]
 >;
 type GetAccessibleDocumentContract = Contract<
@@ -173,12 +175,14 @@ type UpdateDocumentVisibilityContract = Contract<
   | PrivateDocumentDto
   | Omit<PublicDocumentDto, "author" | "rating">
   | Omit<PermanentDocumentDto, "author" | "rating">,
+  | Omit<ManualDocumentDto, "author" | "rating">
   | Pick<PrivateDocumentDto, "id" | "mdate" | "visibility">
   | Pick<PublicDocumentDto, "id" | "mdate" | "visibility">
   | Pick<
       PermanentDocumentDto,
       "id" | "mdate" | "visibility" | "description" | "tags" | "name"
     >
+  | Pick<ManualDocumentDto, "id" | "mdate" | "visibility">
 >;
 
 type UploadImageContract = Contract<

src/components/cookies-modal.tsx

@@ -1,5 +1,5 @@
 import { Button } from "design-system/button";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import React from "react";
 import c from "classnames";
 import { getCookie, setCookie } from "development-kit/cookies";
@@ -67,98 +67,105 @@ const CookiesModal = () => {
   if (accepted) return null;
 
   return (
-    <Modal>
+    <Modal2>
       {view === ViewType.Intro && (
         <>
-          <Modal.Header title="Privacy Policy Settings" skipX />
-          <p className="text-justify mb-2">
-            By clicking <strong>Accept</strong>, you consent to the use of
-            cookies and agree to the <strong>{meta.appName}</strong> privacy
-            policy. These cookies are used to enhance site navigation, analyze
-            usage patterns, and support our marketing efforts
-          </p>
-          <button
-            className="text-sm font-bold underline underline-offset-2 text-blue-800 dark:text-blue-500"
-            title="Read privacy policy"
-            onClick={goToPolicy}
-          >
-            Read Our Privacy Policy
-          </button>
-          <footer className="flex space-x-3 [&_button]:flex-1 mt-8">
-            <Button
-              s={2}
-              i={2}
-              title="Customize cookies"
-              auto
-              onClick={goToManagement}
+          <Modal2.Header title="Privacy Policy Settings" skipX />
+          <Modal2.Body>
+            <p className="text-justify mb-2">
+              By clicking <strong>Accept</strong>, you consent to the use of
+              cookies and agree to the <strong>{meta.appName}</strong> privacy
+              policy. These cookies are used to enhance site navigation, analyze
+              usage patterns, and support our marketing efforts
+            </p>
+            <button
+              className="text-sm font-bold underline underline-offset-2 text-blue-800 dark:text-blue-500"
+              title="Read privacy policy"
+              onClick={goToPolicy}
             >
-              Customize
-            </Button>
-            <Button title="Accept cookies" s={2} i={2} auto onClick={accept}>
-              Accept
-            </Button>
-          </footer>
+              Read Our Privacy Policy
+            </button>
+          </Modal2.Body>
+          <Modal2.Footer>
+            <div className="flex space-x-3 w-full [&_button]:flex-1">
+              <Button
+                s={2}
+                i={2}
+                title="Customize cookies"
+                auto
+                onClick={goToManagement}
+              >
+                Customize
+              </Button>
+              <Button title="Accept cookies" s={2} i={2} auto onClick={accept}>
+                Accept
+              </Button>
+            </div>
+          </Modal2.Footer>
         </>
       )}
 
       {view === ViewType.Manage && (
         <>
-          <Modal.Header title="Manage Consent Preferences" skipX />
-          <div className="space-y-4">
-            {Object.entries(preferences).map(([key, value], index, arr) => (
-              <div
-                key={key}
-                className={c(`pb-4`, {
-                  "border-gray-200 dark:border-gray-700 border-b":
-                    index !== arr.length - 1,
-                })}
-              >
-                <div className="flex justify-between items-center mb-2">
-                  <p className="font-medium capitalize">{key} Cookies</p>
-                  <label className="relative inline-flex items-center cursor-pointer">
-                    <input
-                      type="checkbox"
-                      className="sr-only active:[&+div]:border-white"
-                      checked={value}
-                      onChange={() =>
-                        togglePreferences(key as keyof typeof preferences)
-                      }
-                      disabled={key === COOKIE_TYPE.NECESSARY}
-                    />
-                    <div
-                      className={c(
-                        `w-11 h-6 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out after:content-[""] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all`,
-                        {
-                          "bg-blue-600 dark:bg-blue-500 after:translate-x-5":
-                            value,
-                          "bg-gray-200 dark:bg-gray-500": !value,
-                          "opacity-50 cursor-not-allowed":
-                            key === COOKIE_TYPE.NECESSARY,
-                        },
-                      )}
-                    />
-                  </label>
+          <Modal2.Header title="Manage Consent Preferences" skipX />
+          <Modal2.Body>
+            <div className="space-y-4">
+              {Object.entries(preferences).map(([key, value], index, arr) => (
+                <div
+                  key={key}
+                  className={c(`pb-4`, {
+                    "border-gray-200 dark:border-gray-700 border-b":
+                      index !== arr.length - 1,
+                  })}
+                >
+                  <div className="flex justify-between items-center mb-2">
+                    <p className="font-medium capitalize">{key} Cookies</p>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        className="sr-only active:[&+div]:border-white"
+                        checked={value}
+                        onChange={() =>
+                          togglePreferences(key as keyof typeof preferences)
+                        }
+                        disabled={key === COOKIE_TYPE.NECESSARY}
+                      />
+                      <div
+                        className={c(
+                          `w-11 h-6 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out after:content-[""] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all`,
+                          {
+                            "bg-blue-600 dark:bg-blue-500 after:translate-x-5":
+                              value,
+                            "bg-gray-200 dark:bg-gray-500": !value,
+                            "opacity-50 cursor-not-allowed":
+                              key === COOKIE_TYPE.NECESSARY,
+                          },
+                        )}
+                      />
+                    </label>
+                  </div>
+                  <p className="text-sm">
+                    {key === COOKIE_TYPE.NECESSARY &&
+                      `These cookies are essential for the website to function properly. They cannot be disabled`}
+                    {key === COOKIE_TYPE.PERFORMANCE &&
+                      `These cookies allow us to count visits and traffic sources to measure and improve the performance of our site`}
+                    {key === COOKIE_TYPE.FUNCTIONAL &&
+                      `These cookies enable the website to provide enhanced functionality and personalization`}
+                    {key === COOKIE_TYPE.MARKETING &&
+                      `These cookies may be set through our site by our advertising partners to build a profile of your interests`}
+                  </p>
                 </div>
-                <p className="text-sm">
-                  {key === COOKIE_TYPE.NECESSARY &&
-                    `These cookies are essential for the website to function properly. They cannot be disabled`}
-                  {key === COOKIE_TYPE.PERFORMANCE &&
-                    `These cookies allow us to count visits and traffic sources to measure and improve the performance of our site`}
-                  {key === COOKIE_TYPE.FUNCTIONAL &&
-                    `These cookies enable the website to provide enhanced functionality and personalization`}
-                  {key === COOKIE_TYPE.MARKETING &&
-                    `These cookies may be set through our site by our advertising partners to build a profile of your interests`}
-                </p>
-              </div>
-            ))}
-          </div>
-          <footer className="flex space-x-3 [&_button]:flex-1 mt-8">
+              ))}
+            </div>
+          </Modal2.Body>
+          <Modal2.Footer className="flex space-x-3 w-full">
             <Button
               s={2}
-              i={2}
+              i={1}
               auto
               onClick={goToIntro}
               title="Back to cookies intro"
+              className="flex-1"
             >
               Back
             </Button>
@@ -168,32 +175,35 @@ const CookiesModal = () => {
               auto
               onClick={accept}
               title="Accept customized cookies"
+              className="flex-1"
             >
               Accept
             </Button>
-          </footer>
+          </Modal2.Footer>
         </>
       )}
 
       {view === ViewType.Policy && (
         <>
-          <div className="[&>h1]:pb-3 [&>h2]:pb-1 markdown [&>h1]:text-5xl [&>h2]:text-4xl [&>*]:mb-3">
+          <Modal2.Body>
             <PrivacyPolicyContent />
-          </div>
-          <footer className="flex space-x-3 [&_button]:flex-1 mt-8">
-            <Button
-              s={2}
-              i={2}
-              auto
-              onClick={goToIntro}
-              title="Back to cookies intro"
-            >
-              Back
-            </Button>
-          </footer>
+          </Modal2.Body>
+          <Modal2.Footer>
+            <div className="flex space-x-3 w-full [&_button]:flex-1">
+              <Button
+                s={2}
+                i={2}
+                auto
+                onClick={goToIntro}
+                title="Back to cookies intro"
+              >
+                Back
+              </Button>
+            </div>
+          </Modal2.Footer>
         </>
       )}
-    </Modal>
+    </Modal2>
   );
 };