Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Now using Tippy for Tooltips + prettier integration #11

Merged
DrMint merged 9 commits from develop into main 2022-03-13 15:26:56 +00:00
Conversation 0 Commits 9 Files Changed 30 +29 -229
11 changed files with 29 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f4217a597c - Show all commits

47
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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": {

17
src/components/AppLayout.tsx
View File

@ -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>
);
}

15
src/components/Chip.tsx
View File

@ -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] ${
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"]}
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.children}
</div>

18
src/components/Chronology/ChronologyItemComponent.tsx
View File

@ -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
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>
<Chip>{translation.status}</Chip>
)}
{translation.title ? <h3>{translation.title}</h3> : ""}
</div>

13
src/components/PanelComponents/NavOption.tsx
View File

@ -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}`}

13
src/components/Panels/MainPanel.tsx
View File

@ -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)}
/>

44
src/components/RecorderChip.tsx
View File

@ -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
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
>
<Chip key={recorder.id}>
{recorder.attributes.anonymize
? `Recorder#${recorder.attributes.anonymous_code}`
: recorder.attributes.username}

51
src/pages/contents/[slug]/read.tsx
View File

@ -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
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>
<Chip>{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

11
src/pages/wiki/chronology.tsx
View File

@ -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>
);

28
src/queries/helpers.ts
View File

@ -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 {
switch (code) {
case "en":
return "English";
case "es":
return "Español";
case "fr":
return "Français";
case "ja":
return "日本語";
case "en":
return "English";
case "xx":
return "██";
default:
return code;
}
export function prettyLanguage(
code: string,
languages: GetLanguagesQuery["languages"]["data"]
): string {
let result = code;
languages.forEach((language) => {
if (language.attributes.code === code)
result = language.attributes.localized_name;
});
return result;
}
export function prettyTestWarning(