New source found from dndbeyond.com

2026-07-08 01:00:09 -07:00
parent 9a983a6d7b
commit dcefa0d2f2
2865 changed files with 222467 additions and 49053 deletions
@@ -0,0 +1,98 @@
+import { StepType, TourContext, TourProvider } from "@reactour/tour";
+import clsx from "clsx";
+import { Dispatch, FC, HTMLAttributes, SetStateAction } from "react";
+
+import QuestionIcon from "@dndbeyond/fontawesome-cache/svgs/solid/question.svg";
+
+import { Button } from "../Button";
+import styles from "./styles.module.css";
+
+export interface GuidedTourProps extends HTMLAttributes<HTMLDivElement> {
+  afterOpen?: (target: Element | null) => void;
+  beforeClose?: (target: Element | null) => void;
+  cookieName?: string;
+  setStep?: SetStateAction<any>;
+  showOnFirstLoad?: boolean;
+  steps?: StepType[];
+  step?: number;
+}
+
+export const GuidedTour: FC<GuidedTourProps> = ({
+  afterOpen,
+  beforeClose,
+  children,
+  className,
+  cookieName = "ddbGuidedTour",
+  setStep,
+  showOnFirstLoad,
+  step = 0,
+  steps = [],
+  ...props
+}) => {
+  const handleBeforeClose = () => {
+    const html = document.querySelector("html");
+    if (html) html.style.overflowY = "visible";
+    if (beforeClose) beforeClose(null);
+  };
+
+  const handleAfterOpen = () => {
+    const html = document.querySelector("html");
+    if (html) html.style.overflowY = "hidden";
+    if (afterOpen) afterOpen(null);
+  };
+
+  const handleLoad = (setIsOpen: Dispatch<SetStateAction<boolean>>) => {
+    if (showOnFirstLoad) {
+      const viewedTour = localStorage.getItem(cookieName);
+
+      if (!viewedTour) {
+        setIsOpen(true);
+        localStorage.setItem(cookieName, "true");
+      }
+    }
+  };
+
+  const PrevButton = ({ Button, ...props }) => (
+    <Button {...props} kind="prev" hideArrow={step === 0} />
+  );
+
+  const NextButton = ({ Button, ...props }) => (
+    <Button
+      {...props}
+      kind="next"
+      hideArrow={step === (steps?.length || 0) - 1}
+    />
+  );
+
+  return (
+    <div className={clsx([styles.guidedTour, className])} {...props}>
+      <TourProvider
+        steps={steps}
+        currentStep={step}
+        setCurrentStep={setStep}
+        afterOpen={handleAfterOpen}
+        beforeClose={handleBeforeClose}
+        showDots={false}
+        prevButton={PrevButton}
+        nextButton={NextButton}
+      >
+        <TourContext.Consumer>
+          {({ setIsOpen }) => (
+            <div onLoad={() => handleLoad(setIsOpen)}>
+              {children}
+              <Button
+                className={styles.tourButton}
+                onClick={() => setIsOpen(true)}
+                color="info"
+                size="small"
+                aria-label="Open guided tour"
+              >
+                <QuestionIcon />
+              </Button>
+            </div>
+          )}
+        </TourContext.Consumer>
+      </TourProvider>
+    </div>
+  );
+};