@portosaur/theme 0.1.0

package/theme/components/Preview/components/PreviewHeader.jsx

@@ -0,0 +1,411 @@
+import React, { useState, useRef } from "react";
+import Tooltip from "../../Tooltip/index.js";
+import styles from "../styles.module.css";
+import { PreviewMode } from "../state/index.js";
+import IconDock from "../../../assets/img/svg/icon-dock.svg";
+import IconPopup from "../../../assets/img/svg/icon-popup.svg";
+import IconSave from "../../../assets/img/svg/icon-save.svg";
+import IconLink from "../../../assets/img/svg/icon-link.svg";
+import IconClose from "../../../assets/img/svg/icon-close.svg";
+export default function PreviewHeader({
+  displayTitle,
+  fileType,
+  fileUrl,
+  mode,
+  zoomLevel,
+  onZoomChange,
+  onToggleMode,
+  onClose,
+  onDownload,
+  isDownloading,
+  modeSwitch = true,
+  showDockLabel = true,
+}) {
+  const [showZoomMenu, setShowZoomMenu] = useState(false);
+  const zoomMenuRef = useRef(null);
+  const zoomMenuTimer = useRef(null);
+  const isMobileSize =
+    typeof window !== "undefined" && window.innerWidth <= 768;
+  const toggleLabel =
+    mode === "popup" ? "Dock" : mode === "dock" ? "PiP" : "Dock";
+  const toggleTooltip =
+    mode === "popup"
+      ? "Dock to side"
+      : mode === "dock"
+        ? "Open as PiP"
+        : "Dock to side";
+  return jsxDEV_7x81h0kn(
+    Fragment_8vg9x3sq,
+    {
+      children: [
+        mode === "dock" &&
+          !isMobileSize &&
+          jsxDEV_7x81h0kn(
+            "div",
+            {
+              className: styles.revealHeader,
+              children: jsxDEV_7x81h0kn(
+                "h1",
+                {
+                  className: styles.popupTitle,
+                  children: jsxDEV_7x81h0kn(
+                    "span",
+                    { className: styles.primaryText, children: "Preview " },
+                    undefined,
+                    false,
+                    undefined,
+                    this,
+                  ),
+                },
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+            },
+            undefined,
+            false,
+            undefined,
+            this,
+          ),
+        jsxDEV_7x81h0kn(
+          "div",
+          {
+            className: styles.popupHeader,
+            children: [
+              jsxDEV_7x81h0kn(
+                "div",
+                {
+                  className: styles.headerLeft,
+                  children: jsxDEV_7x81h0kn(
+                    "h4",
+                    {
+                      className: styles.popupTitle,
+                      children: jsxDEV_7x81h0kn(
+                        "span",
+                        {
+                          className: styles.baseTitleText,
+                          children: displayTitle,
+                        },
+                        undefined,
+                        false,
+                        undefined,
+                        this,
+                      ),
+                    },
+                    undefined,
+                    false,
+                    undefined,
+                    this,
+                  ),
+                },
+                undefined,
+                false,
+                undefined,
+                this,
+              ),
+              jsxDEV_7x81h0kn(
+                "div",
+                {
+                  className: styles.headerControls,
+                  children: [
+                    !isMobileSize &&
+                      fileType !== "web" &&
+                      jsxDEV_7x81h0kn(
+                        "div",
+                        {
+                          className: styles.zoomDropdown,
+                          ref: zoomMenuRef,
+                          onMouseEnter: () => {
+                            if (zoomMenuTimer.current)
+                              clearTimeout(zoomMenuTimer.current);
+                            setShowZoomMenu(true);
+                          },
+                          onMouseLeave: () => {
+                            zoomMenuTimer.current = setTimeout(
+                              () => setShowZoomMenu(false),
+                              150,
+                            );
+                          },
+                          children: [
+                            jsxDEV_7x81h0kn(
+                              "button",
+                              {
+                                onClick: () => setShowZoomMenu(!showZoomMenu),
+                                className: styles.zoomVal,
+                                title: "Change Zoom",
+                                children: [
+                                  Math.round(zoomLevel * 100),
+                                  "%",
+                                  jsxDEV_7x81h0kn(
+                                    "span",
+                                    {
+                                      className: styles.dropdownArrow,
+                                      children: "▼",
+                                    },
+                                    undefined,
+                                    false,
+                                    undefined,
+                                    this,
+                                  ),
+                                ],
+                              },
+                              undefined,
+                              true,
+                              undefined,
+                              this,
+                            ),
+                            showZoomMenu &&
+                              jsxDEV_7x81h0kn(
+                                "div",
+                                {
+                                  className: styles.zoomMenu,
+                                  children: [0.5, 0.75, 1, 1.25, 1.5, 2].map(
+                                    (level) =>
+                                      jsxDEV_7x81h0kn(
+                                        "button",
+                                        {
+                                          className: `${styles.zoomMenuItem} ${zoomLevel === level ? styles.zoomMenuItemActive : ""}`,
+                                          onClick: () => {
+                                            onZoomChange(level);
+                                            setShowZoomMenu(false);
+                                          },
+                                          children:
+                                            level === 1
+                                              ? "100% (Fit)"
+                                              : `${Math.round(level * 100)}%`,
+                                        },
+                                        level,
+                                        false,
+                                        undefined,
+                                        this,
+                                      ),
+                                  ),
+                                },
+                                undefined,
+                                false,
+                                undefined,
+                                this,
+                              ),
+                          ],
+                        },
+                        undefined,
+                        true,
+                        undefined,
+                        this,
+                      ),
+                    fileType === "web"
+                      ? jsxDEV_7x81h0kn(
+                          Tooltip,
+                          {
+                            msg: "Open externally",
+                            position: "bottom",
+                            underline: false,
+                            children: jsxDEV_7x81h0kn(
+                              "a",
+                              {
+                                href: fileUrl,
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                className: styles.headerAction,
+                                children: [
+                                  jsxDEV_7x81h0kn(
+                                    IconLink,
+                                    { className: styles.headerIcon },
+                                    undefined,
+                                    false,
+                                    undefined,
+                                    this,
+                                  ),
+                                  jsxDEV_7x81h0kn(
+                                    "span",
+                                    {
+                                      className: styles.btnText,
+                                      children: "Visit",
+                                    },
+                                    undefined,
+                                    false,
+                                    undefined,
+                                    this,
+                                  ),
+                                ],
+                              },
+                              undefined,
+                              true,
+                              undefined,
+                              this,
+                            ),
+                          },
+                          undefined,
+                          false,
+                          undefined,
+                          this,
+                        )
+                      : jsxDEV_7x81h0kn(
+                          Tooltip,
+                          {
+                            msg: isDownloading
+                              ? "Downloading..."
+                              : "Download file",
+                            position: "bottom",
+                            underline: false,
+                            children: jsxDEV_7x81h0kn(
+                              "button",
+                              {
+                                onClick: onDownload,
+                                disabled: isDownloading,
+                                className: `${styles.headerAction} ${styles.downloadButton} ${isDownloading ? styles.headerActionDisabled : ""}`,
+                                children: [
+                                  isDownloading
+                                    ? jsxDEV_7x81h0kn(
+                                        "div",
+                                        { className: styles.spinnerSmall },
+                                        undefined,
+                                        false,
+                                        undefined,
+                                        this,
+                                      )
+                                    : jsxDEV_7x81h0kn(
+                                        IconSave,
+                                        { className: styles.headerIconSmall },
+                                        undefined,
+                                        false,
+                                        undefined,
+                                        this,
+                                      ),
+                                  jsxDEV_7x81h0kn(
+                                    "span",
+                                    {
+                                      className: styles.btnText,
+                                      children: isDownloading
+                                        ? "Saving"
+                                        : "Save",
+                                    },
+                                    undefined,
+                                    false,
+                                    undefined,
+                                    this,
+                                  ),
+                                ],
+                              },
+                              undefined,
+                              true,
+                              undefined,
+                              this,
+                            ),
+                          },
+                          undefined,
+                          false,
+                          undefined,
+                          this,
+                        ),
+                    modeSwitch &&
+                      jsxDEV_7x81h0kn(
+                        Tooltip,
+                        {
+                          msg: toggleTooltip,
+                          position: "bottom",
+                          underline: false,
+                          children: jsxDEV_7x81h0kn(
+                            "button",
+                            {
+                              onClick: onToggleMode,
+                              className: `${styles.headerAction} ${styles.dockToggle}`,
+                              children: [
+                                mode === "popup" || mode === "pip"
+                                  ? jsxDEV_7x81h0kn(
+                                      IconDock,
+                                      { className: styles.headerIcon },
+                                      undefined,
+                                      false,
+                                      undefined,
+                                      this,
+                                    )
+                                  : jsxDEV_7x81h0kn(
+                                      IconPopup,
+                                      {
+                                        className: `${styles.headerIcon} ${styles.iconPopupTweak}`,
+                                      },
+                                      undefined,
+                                      false,
+                                      undefined,
+                                      this,
+                                    ),
+                                showDockLabel &&
+                                  jsxDEV_7x81h0kn(
+                                    "span",
+                                    {
+                                      className: styles.btnText,
+                                      children: toggleLabel,
+                                    },
+                                    undefined,
+                                    false,
+                                    undefined,
+                                    this,
+                                  ),
+                              ],
+                            },
+                            undefined,
+                            true,
+                            undefined,
+                            this,
+                          ),
+                        },
+                        undefined,
+                        false,
+                        undefined,
+                        this,
+                      ),
+                    jsxDEV_7x81h0kn(
+                      Tooltip,
+                      {
+                        msg: "Close",
+                        position: "bottom",
+                        underline: false,
+                        children: jsxDEV_7x81h0kn(
+                          "button",
+                          {
+                            onClick: onClose,
+                            className: `${styles.headerAction} ${styles.headerActionClose}`,
+                            children: jsxDEV_7x81h0kn(
+                              IconClose,
+                              { className: styles.headerIconSmall },
+                              undefined,
+                              false,
+                              undefined,
+                              this,
+                            ),
+                          },
+                          undefined,
+                          false,
+                          undefined,
+                          this,
+                        ),
+                      },
+                      undefined,
+                      false,
+                      undefined,
+                      this,
+                    ),
+                  ],
+                },
+                undefined,
+                true,
+                undefined,
+                this,
+              ),
+            ],
+          },
+          undefined,
+          true,
+          undefined,
+          this,
+        ),
+      ],
+    },
+    undefined,
+    true,
+    undefined,
+    this,
+  );
+}

package/theme/components/Preview/components/Triggers/Pv.jsx

@@ -0,0 +1,253 @@
+import React, { useEffect, useMemo } from "react";
+import { useLocation } from "@docusaurus/router";
+import { usePreview } from "../../state";
+import Tooltip from "../../../Tooltip";
+import {
+  generatePvSlug,
+  generatePvHash,
+  parsePvHash,
+  classify,
+} from "../../utils";
+import styles from "../../styles.module.css";
+export function normalizeSources({
+  href,
+  path,
+  sources,
+  children,
+  desc,
+  title,
+  id,
+}) {
+  const rawSources =
+    sources && sources.length > 0
+      ? sources
+      : href || path
+        ? [{ path: (href || path).trim(), label: null, desc }]
+        : [];
+  return rawSources.map((src) => {
+    const sPath = (src.path || src.href || "").trim();
+    const sDesc = src.desc || "";
+    const childrenText = React.Children.toArray(children)
+      .map((c) => (typeof c === "string" || typeof c === "number" ? c : ""))
+      .join("")
+      .trim();
+    const label = src.label || childrenText;
+    let urlLabel = "";
+    let domain = "";
+    let type = "text";
+    if (sPath) {
+      type = classify(sPath);
+      const cleanPath = sPath.split(/[?#]/)[0].toLowerCase();
+      urlLabel = cleanPath.split("/").filter(Boolean).pop();
+      try {
+        if (sPath.startsWith("http") || sPath.startsWith("//")) {
+          const url = new URL(
+            sPath.startsWith("//") ? `https:${sPath}` : sPath,
+          );
+          domain = url.hostname.replace("www.", "");
+        }
+      } catch (e) {}
+    }
+    const source = domain || urlLabel || "Local";
+    const displayLabel = label || source;
+    const tooltip = sDesc || null;
+    return {
+      path: sPath,
+      label: displayLabel,
+      domain,
+      type,
+      source,
+      tooltip,
+      id: src.id || id,
+      title: src.title || title,
+    };
+  });
+}
+export default function Pv(props) {
+  const {
+    children,
+    id: manualId,
+    activeIdx = 0,
+    sources: overrideSources,
+    title,
+    mode = "popup",
+    modeSwitch = true,
+    underline = true,
+  } = props;
+  const hasSingleSource = !!(props.href || props.path);
+  const hasMultiSource = !!(overrideSources && overrideSources.length > 0);
+  if (!hasSingleSource && !hasMultiSource) {
+    console.error(
+      "<Pv> component requires either 'href', 'path', or 'sources' prop.",
+    );
+    return jsxDEV_7x81h0kn(
+      "span",
+      { style: { color: "red" }, children: "[Preview Error: Missing href]" },
+      undefined,
+      false,
+      undefined,
+      this,
+    );
+  }
+  if (hasSingleSource && hasMultiSource) {
+    console.error(
+      "<Pv> component cannot accept both 'href' and 'sources'. Choose one.",
+    );
+    return jsxDEV_7x81h0kn(
+      "span",
+      { style: { color: "red" }, children: "[Preview Error: Conflict]" },
+      undefined,
+      false,
+      undefined,
+      this,
+    );
+  }
+  const {
+    isOpen,
+    mode: currentMode,
+    sources: activeSources,
+    activeIndex,
+    openPreview,
+    closePreview,
+    setMode,
+  } = usePreview();
+  const location = useLocation();
+  const srcList = useMemo(
+    () => overrideSources || normalizeSources(props),
+    [props, overrideSources, title],
+  );
+  const baseSlug = useMemo(() => {
+    if (manualId) return generatePvSlug(manualId);
+    if (title) return generatePvSlug(title);
+    const pathOrHref = props.href || props.path || srcList[activeIdx]?.path;
+    if (pathOrHref) {
+      const filename = pathOrHref
+        .split(/[?#]/)[0]
+        .split("/")
+        .filter(Boolean)
+        .pop();
+      if (filename) return generatePvSlug(filename);
+    }
+    const childrenText = typeof children === "string" ? children.trim() : null;
+    if (childrenText) return generatePvSlug(childrenText);
+    return "preview";
+  }, [manualId, title, props.href, props.path, srcList, activeIdx, children]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const parsed = parsePvHash(window.location.hash);
+      if (parsed && parsed.slug === baseSlug) {
+        const hashMode = parsed.mode || mode;
+        setMode(hashMode);
+        openPreview(
+          srcList,
+          activeIdx,
+          generatePvHash(baseSlug, hashMode),
+          hashMode,
+          baseSlug,
+          modeSwitch,
+        );
+      }
+    }, 150);
+    return () => clearTimeout(timer);
+  }, [
+    location.hash,
+    baseSlug,
+    srcList,
+    openPreview,
+    setMode,
+    mode,
+    activeIdx,
+    modeSwitch,
+  ]);
+  if (srcList.length === 0)
+    return jsxDEV_7x81h0kn(
+      "span",
+      { children },
+      undefined,
+      false,
+      undefined,
+      this,
+    );
+  const isCurrentlyActive =
+    isOpen &&
+    activeSources.length === srcList.length &&
+    activeSources[activeIdx]?.path === srcList[activeIdx]?.path &&
+    activeIndex === activeIdx;
+  const handleClick = () => {
+    if (isCurrentlyActive) {
+      closePreview();
+    } else {
+      setMode(mode);
+      openPreview(
+        srcList,
+        activeIdx,
+        generatePvHash(baseSlug, mode),
+        mode,
+        baseSlug,
+        modeSwitch,
+      );
+    }
+  };
+  const targetHash = generatePvHash(baseSlug, mode);
+  const trigger = jsxDEV_7x81h0kn(
+    "a",
+    {
+      href: `#${targetHash}`,
+      className: `${styles.previewTrigger} ${isCurrentlyActive ? styles.activeTrigger : ""} ${!underline ? styles.noUnderline : ""}`,
+      onClick: (e) => {
+        e.preventDefault();
+        handleClick();
+      },
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      children: children || srcList[activeIdx]?.label,
+    },
+    undefined,
+    false,
+    undefined,
+    this,
+  );
+  const hasTooltip = !!srcList[activeIdx]?.tooltip;
+  if (!hasTooltip) {
+    return jsxDEV_7x81h0kn(
+      "span",
+      { className: styles.previewContainer, children: trigger },
+      undefined,
+      false,
+      undefined,
+      this,
+    );
+  }
+  const tooltipMsg = srcList[activeIdx]?.tooltip;
+  return jsxDEV_7x81h0kn(
+    "span",
+    {
+      className: styles.previewContainer,
+      children: tooltipMsg
+        ? jsxDEV_7x81h0kn(
+            Tooltip,
+            {
+              msg: tooltipMsg,
+              position: "top",
+              underline: false,
+              children: trigger,
+            },
+            undefined,
+            false,
+            undefined,
+            this,
+          )
+        : trigger,
+    },
+    undefined,
+    false,
+    undefined,
+    this,
+  );
+}