Removed react-tooltip

package-lock.json

@@ -16,7 +16,6 @@
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-swipeable": "^6.2.0",
-        "react-tooltip": "^4.2.21",
         "turndown": "^7.1.1"
       },
       "devDependencies": {
@@ -2960,6 +2959,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -3035,7 +3035,8 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
     },
     "node_modules/react-swipeable": {
       "version": "6.2.0",
@@ -3045,22 +3046,6 @@
         "react": "^16.8.3 || ^17"
       }
     },
-    "node_modules/react-tooltip": {
-      "version": "4.2.21",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
-      "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==",
-      "dependencies": {
-        "prop-types": "^15.7.2",
-        "uuid": "^7.0.3"
-      },
-      "engines": {
-        "npm": ">=6.13"
-      },
-      "peerDependencies": {
-        "react": ">=16.0.0",
-        "react-dom": ">=16.0.0"
-      }
-    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3555,14 +3540,6 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
-    "node_modules/uuid": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-      "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -5740,6 +5717,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -5786,7 +5764,8 @@
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
     },
     "react-swipeable": {
       "version": "6.2.0",
@@ -5794,15 +5773,6 @@
       "integrity": "sha512-nWQ8dEM8e/uswZLSIkXUsAnQmnX4MTcryOHBQIQYRMJFDpgDBSiVbKsz/BZVCIScF4NtJh16oyxwaNOepR6xSw==",
       "requires": {}
     },
-    "react-tooltip": {
-      "version": "4.2.21",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
-      "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==",
-      "requires": {
-        "prop-types": "^15.7.2",
-        "uuid": "^7.0.3"
-      }
-    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -6143,11 +6113,6 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
-    "uuid": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-      "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
-    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

package.json

@@ -18,7 +18,6 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-swipeable": "^6.2.0",
-    "react-tooltip": "^4.2.21",
     "turndown": "^7.1.1"
   },
   "devDependencies": {

src/components/AppLayout.tsx

@@ -7,9 +7,8 @@ import Head from "next/head";
 import { useSwipeable } from "react-swipeable";
 import { useRouter } from "next/router";
 import Button from "components/Button";
-import { getOgImage, OgImage, prettyLanguage } from "queries/helpers";
+import { getOgImage, OgImage } from "queries/helpers";
 import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery";
-import ReactTooltip from "react-tooltip";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { ImageQuality } from "./Img";
 import Popup from "./Popup";
@@ -25,7 +24,6 @@ interface AppLayoutProps extends AppStaticProps {
   navTitle: string;
   thumbnail?: StrapiImage;
   description?: string;
-  extra?: React.ReactNode;
 }
 
 export default function AppLayout(props: AppLayoutProps): JSX.Element {
@@ -413,20 +411,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
             </div>
           </div>
         </Popup>
-
-        <ReactTooltip
-          id="MainPanelTooltip"
-          place="right"
-          type="light"
-          effect="solid"
-          delayShow={300}
-          delayHide={100}
-          disable={!appLayout.mainPanelReduced || isMobile || isCoarse}
-          className="drop-shadow-shade-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left !text-black"
-        />
       </div>
-
-      {props.extra}
     </div>
   );
 }

src/components/Chip.tsx

@@ -1,25 +1,12 @@
 type ChipProps = {
   className?: string;
   children: React.ReactNode;
-  "data-tip"?: string;
-  "data-for"?: string;
-  "data-html"?: boolean;
-  "data-multiline"?: boolean;
 };
 
 export default function Chip(props: ChipProps): JSX.Element {
   return (
     <div
-      className={`grid place-content-center place-items-center text-xs pb-[0.14rem] px-1.5 border-[1px] rounded-full opacity-70 transition-[color,_opacity,border-color] ${
+      className={`grid place-content-center place-items-center text-xs pb-[0.14rem] px-1.5 border-[1px] rounded-full opacity-70 transition-[color,_opacity,border-color] ${props.className} `}
-        props.className
-      } ${
-        props["data-tip"] &&
-        "hover:text-dark hover:border-dark hover:opacity-100"
-      }`}
-      data-tip={props["data-tip"]}
-      data-for={props["data-for"]}
-      data-html={props["data-html"]}
-      data-multiline={props["data-multiline"]}
     >
       {props.children}
     </div>

src/components/Chronology/ChronologyItemComponent.tsx

@@ -85,23 +85,7 @@ export default function ChronologyItemComponent(
                 <div className="place-items-start place-content-start grid grid-flow-col gap-2">
                   {translation.status !==
                     Enum_Componenttranslationschronologyitem_Status.Done && (
-                    <Chip
+                    <Chip>{translation.status}</Chip>
-                      data-tip={
-                        translation.status ===
-                        Enum_Componenttranslationschronologyitem_Status.Incomplete
-                          ? "This entry is only partially translated/transcribed."
-                          : translation.status ===
-                            Enum_Componenttranslationschronologyitem_Status.Draft
-                          ? "This entry is just a draft. It usually means that this is a work-in-progress. Translation/transcription might be poor and/or computer-generated."
-                          : translation.status ===
-                            Enum_Componenttranslationschronologyitem_Status.Review
-                          ? "This entry has not yet being proofread. The content should still be accurate."
-                          : ""
-                      }
-                      data-for={"ChronologyTooltip"}
-                    >
-                      {translation.status}
-                    </Chip>
                   )}
                   {translation.title ? <h3>{translation.title}</h3> : ""}
                 </div>

src/components/PanelComponents/NavOption.tsx

@@ -1,14 +1,12 @@
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { MouseEventHandler } from "react";
-import ReactDOMServer from "react-dom/server";
 
 type NavOptionProps = {
   url: string;
   icon?: string;
   title: string;
   subtitle?: string;
-  tooltipId?: string;
   border?: boolean;
   reduced?: boolean;
   onClick?: MouseEventHandler<HTMLDivElement>;
@@ -28,17 +26,6 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
     <Link href={props.url} passHref>
       <div
         onClick={props.onClick}
-        data-html
-        data-multiline
-        data-tip={ReactDOMServer.renderToStaticMarkup(
-          <div className="px-4 py-3">
-            <h3 className="text-2xl">{props.title}</h3>
-            {props.subtitle && (
-              <p className="max-w-[10rem]">{props.subtitle}</p>
-            )}
-          </div>
-        )}
-        data-for={props.tooltipId}
         className={`grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
           props.icon ? "text-left" : "text-center"
         } ${divCommon}`}

src/components/Panels/MainPanel.tsx

@@ -102,7 +102,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         icon="library_books"
         title={langui.library}
         subtitle={langui.library_short_description}
-        tooltipId="MainPanelTooltip"
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -112,7 +111,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         icon="workspaces"
         title={langui.contents}
         subtitle={langui.contents_short_description}
-        tooltipId="MainPanelTooltip"
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -124,7 +122,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         icon="travel_explore"
         title={langui.wiki}
         subtitle={langui.wiki_short_description}
-        tooltipId="MainPanelTooltip"
+        
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -134,7 +132,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         icon="watch_later"
         title={langui.chronicles}
         subtitle={langui.chronicles_short_description}
-        tooltipId="MainPanelTooltip"
+        
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -147,7 +145,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/news"
         icon="feed"
         title={langui.news}
-        tooltipId="MainPanelTooltip"
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -156,7 +153,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/merch"
         icon="store"
         title={langui.merch}
-        tooltipId="MainPanelTooltip"
+        
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -167,7 +164,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/gallery"
         icon="collections"
         title={langui.gallery}
-        tooltipId="MainPanelTooltip"
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -178,7 +174,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/archives"
         icon="inventory"
         title={langui.archives}
-        tooltipId="MainPanelTooltip"
+        
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />
@@ -190,7 +186,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         url="/about-us"
         icon="info"
         title={langui.about_us}
-        tooltipId="MainPanelTooltip"
         reduced={appLayout.mainPanelReduced && isDesktop}
         onClick={() => appLayout.setMainPanelOpen(false)}
       />

src/components/RecorderChip.tsx

@@ -3,8 +3,6 @@ import {
   GetContentTextQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
-import Img, { ImageQuality } from "./Img";
-import ReactDOMServer from "react-dom/server";
 
 type RecorderChipProps = {
   className?: string;
@@ -16,47 +14,7 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
   const recorder = props.recorder;
   const langui = props.langui;
   return (
-    <Chip
+    <Chip key={recorder.id}>
-      key={recorder.id}
-      data-tip={ReactDOMServer.renderToStaticMarkup(
-        <div className="p-2 py-5 grid gap-2">
-          <div className="grid grid-flow-col gap-2 place-items-center place-content-start">
-            {recorder.attributes.avatar.data && (
-              <Img
-                className="w-8 rounded-full"
-                image={recorder.attributes.avatar.data.attributes}
-                quality={ImageQuality.Small}
-                rawImg
-              />
-            )}
-            <h3 className="text-xl">{recorder.attributes.username}</h3>
-          </div>
-          {recorder.attributes.languages.data.length > 0 && (
-            <div className="flex flex-row flex-wrap gap-1">
-              <p>{langui.languages}:</p>
-              {recorder.attributes.languages.data.map((language) => (
-                <Chip key={language.attributes.code}>
-                  {language.attributes.code.toUpperCase()}
-                </Chip>
-              ))}
-            </div>
-          )}
-          {recorder.attributes.pronouns && (
-            <div className="flex flex-row flex-wrap gap-1">
-              <p>{langui.pronouns}:</p>
-              <Chip>{recorder.attributes.pronouns}</Chip>
-            </div>
-          )}
-          <p>
-            {recorder.attributes.bio.length > 0 &&
-              recorder.attributes.bio[0].bio}
-          </p>
-        </div>
-      )}
-      data-for={"RecordersTooltip"}
-      data-multiline
-      data-html
-    >
       {recorder.attributes.anonymize
         ? `Recorder#${recorder.attributes.anonymous_code}`
         : recorder.attributes.username}

src/pages/contents/[slug]/read.tsx

@@ -23,7 +23,6 @@ import {
 import Button from "components/Button";
 import { useRouter } from "next/router";
 import Chip from "components/Chip";
-import ReactTooltip from "react-tooltip";
 import RecorderChip from "components/RecorderChip";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 import TOC from "components/Markdown/TOC";
@@ -35,7 +34,7 @@ interface ContentReadProps extends AppStaticProps {
 
 export default function ContentRead(props: ContentReadProps): JSX.Element {
   useTesting(props);
-  const { langui, content } = props;
+  const { langui, content, languages } = props;
   const router = useRouter();
 
   const subPanel = (
@@ -68,7 +67,8 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
                 }
               >
                 {prettyLanguage(
-                  content.text_set[0].source_language.data.attributes.code
+                  content.text_set[0].source_language.data.attributes.code,
+                  languages
                 )}
               </Button>
             </div>
@@ -77,23 +77,7 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
           <div className="grid grid-flow-col place-items-center place-content-center gap-2">
             <p className="font-headers">{langui.status}:</p>
 
-            <Chip
+            <Chip>{content.text_set[0].status}</Chip>
-              data-tip={
-                content.text_set[0].status ===
-                Enum_Componentsetstextset_Status.Incomplete
-                  ? langui.status_incomplete
-                  : content.text_set[0].status ===
-                    Enum_Componentsetstextset_Status.Draft
-                  ? langui.status_draft
-                  : content.text_set[0].status ===
-                    Enum_Componentsetstextset_Status.Review
-                  ? langui.status_review
-                  : langui.status_done
-              }
-              data-for={"StatusTooltip"}
-            >
-              {content.text_set[0].status}
-            </Chip>
           </div>
 
           {content.text_set[0].transcribers.data.length > 0 && (
@@ -184,32 +168,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
     </ContentPanel>
   );
 
-  const extra = (
-    <>
-      <ReactTooltip
-        id="StatusTooltip"
-        place="top"
-        type="light"
-        effect="solid"
-        delayShow={50}
-        clickable={true}
-        className="drop-shadow-shade-xl !opacity-100 !bg-light !rounded-lg desktop:after:!border-t-light text-left !text-black max-w-xs"
-      />
-
-      <ReactTooltip
-        id="RecordersTooltip"
-        place="top"
-        type="light"
-        effect="solid"
-        delayShow={100}
-        delayUpdate={100}
-        delayHide={100}
-        clickable={true}
-        className="drop-shadow-shade-xl !opacity-100 !bg-light !rounded-lg desktop:after:!border-t-light text-left !text-black max-w-[22rem]"
-      />
-    </>
-  );
-
   return (
     <AppLayout
       navTitle="Contents"
@@ -225,7 +183,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
       thumbnail={content.thumbnail.data?.attributes}
       contentPanel={contentPanel}
       subPanel={subPanel}
-      extra={extra}
       description={`${langui.type}: ${
         content.type.data.attributes.titles.length > 0
           ? content.type.data.attributes.titles[0].title

src/pages/wiki/chronology.tsx

@@ -16,7 +16,6 @@ import {
 } from "queries/helpers";
 import InsetBox from "components/InsetBox";
 import { useRouter } from "next/router";
-import ReactTooltip from "react-tooltip";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface ChronologyProps extends AppStaticProps {
@@ -107,16 +106,6 @@ export default function Chronology(props: ChronologyProps): JSX.Element {
           ))}
         </>
       ))}
-
-      <ReactTooltip
-        id="ChronologyTooltip"
-        place="top"
-        type="light"
-        effect="solid"
-        delayShow={50}
-        clickable={true}
-        className="drop-shadow-shade-xl !opacity-100 mobile:after:!border-r-light !bg-light !rounded-lg desktop:after:!border-t-light text-left !text-black max-w-xs"
-      />
     </ContentPanel>
   );
 

src/queries/helpers.ts

@@ -5,6 +5,7 @@ import {
 } from "components/Img";
 import {
   GetCurrenciesQuery,
+  GetLanguagesQuery,
   GetLibraryItemQuery,
   GetLibraryItemsPreviewQuery,
   GetWebsiteInterfaceQuery,
@@ -138,23 +139,16 @@ export function prettyItemSubType(metadata: {
   }
 }
 
-export function prettyLanguage(code: string): string {
+export function prettyLanguage(
-  switch (code) {
+  code: string,
-    case "en":
+  languages: GetLanguagesQuery["languages"]["data"]
-      return "English";
+): string {
-    case "es":
+  let result = code;
-      return "Español";
+  languages.forEach((language) => {
-    case "fr":
+    if (language.attributes.code === code)
-      return "Français";
+      result = language.attributes.localized_name;
-    case "ja":
+  });
-      return "日本語";
+  return result;
-    case "en":
-      return "English";
-    case "xx":
-      return "██";
-    default:
-      return code;
-  }
 }
 
 export function prettyTestWarning(