@rxdrag/website-lib-core 0.0.11 → 0.0.13

package/src/react/components/Medias/index.tsx

@@ -8,146 +8,227 @@ export type MediasProps = {
   children?: React.ReactNode;
   // Aspect ratio, format is `aspect-[width/height]`
   aspect?: string;
+  thumbnailAspect?: string;
 };
 
-export const Medias = forwardRef<HTMLDivElement, MediasProps>(
-  (props, ref) => {
-    const {
-      value,
-      className,
-      children,
-      aspect = "aspect-[5/4]",
-      ...rest
-    } = props;
-    const [selectedId, setSelectedId] = useState<string | undefined | null>(
+export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
+  const {
+    value,
+    className,
+    children,
+    aspect = "aspect-[1/1]",
+    thumbnailAspect = "aspect-[5/4]",
+    ...rest
+  } = props;
+  const [selectedId, setSelectedId] = useState<string | undefined | null>(
+    value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
+  );
+  const [videoUrl, setVideoUrl] = useState<string>("");
+  const [thumbnailUrl, setThumbnailUrl] = useState<string>("");
+
+  useEffect(() => {
+    setSelectedId(
       value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
     );
-    const [videoUrl, setVideoUrl] = useState<string>("");
-    const [thumbnailUrl, setThumbnailUrl] = useState<string>("");
+  }, [value]);
 
-    useEffect(() => {
-      setSelectedId(
-        value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
+  useEffect(() => {
+    if (value?.externalVideoUrl) {
+      const baseUrl = value.externalVideoUrl.replace(
+        "https://youtu.be/",
+        "https://www.youtube.com/embed/"
       );
-    }, [value]);
-
-    useEffect(() => {
-      if (value?.externalVideoUrl) {
-        const baseUrl = value.externalVideoUrl.replace(
-          "https://youtu.be/",
-          "https://www.youtube.com/embed/"
-        );
-        const separator = baseUrl.includes("?") ? "&" : "?";
-        setVideoUrl(
-          `${baseUrl}${separator}autoplay=1&muted=1&modestbranding=1&rel=0&controls=1&playsinline=1&enablejsapi=1&origin=${encodeURIComponent(
-            window.location.origin
-          )}`
-        );
-      }
-    }, [value?.externalVideoUrl]);
+      const separator = baseUrl.includes("?") ? "&" : "?";
+      setVideoUrl(
+        `${baseUrl}${separator}autoplay=1&muted=1&modestbranding=1&rel=0&controls=1&playsinline=1&enablejsapi=1&origin=${encodeURIComponent(
+          window.location.origin
+        )}`
+      );
+    }
+  }, [value?.externalVideoUrl]);
 
-    useEffect(() => {
-      if (value?.externalVideoUrl) {
-        const videoId = value.externalVideoUrl.includes("youtu.be/")
-          ? value.externalVideoUrl.split("youtu.be/")[1].split("?")[0]
-          : value.externalVideoUrl.split("v=")[1]?.split("&")[0];
+  useEffect(() => {
+    if (value?.externalVideoUrl) {
+      const videoId = value.externalVideoUrl.includes("youtu.be/")
+        ? value.externalVideoUrl.split("youtu.be/")[1].split("?")[0]
+        : value.externalVideoUrl.split("v=")[1]?.split("&")[0];
 
-        if (videoId) {
-          setThumbnailUrl(
-            `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`
-          );
-        }
+      if (videoId) {
+        setThumbnailUrl(`https://img.youtube.com/vi/${videoId}/hqdefault.jpg`);
       }
-    }, [value?.externalVideoUrl]);
+    }
+  }, [value?.externalVideoUrl]);
 
-    const selectedIndex = value?.externalVideoUrl
-      ? selectedId === "video"
-        ? 0
-        : (value?.medias?.findIndex((media) => media.id === selectedId) || 0) +
-          1
-      : value?.medias?.findIndex((media) => media.id === selectedId) || 0;
+  const selectedIndex = value?.externalVideoUrl
+    ? selectedId === "video"
+      ? 0
+      : (value?.medias?.findIndex((media) => media.id === selectedId) || 0) + 1
+    : value?.medias?.findIndex((media) => media.id === selectedId) || 0;
 
-    const totalItems =
-      (value?.externalVideoUrl ? 1 : 0) + (value?.medias?.length || 0);
+  const totalItems =
+    (value?.externalVideoUrl ? 1 : 0) + (value?.medias?.length || 0);
 
-    // Calculate visible thumbnails (show 6 items)
-    const visibleCount = 6;
-    const halfVisible = Math.floor(visibleCount / 2);
-    const startIndex = Math.max(
-      0,
-      Math.min(selectedIndex - halfVisible, totalItems - visibleCount)
-    );
-    const endIndex = Math.min(startIndex + visibleCount, totalItems);
+  // Calculate visible thumbnails (show 6 items)
+  const visibleCount = 6;
+  const halfVisible = Math.floor(visibleCount / 2);
+  const startIndex = Math.max(
+    0,
+    Math.min(selectedIndex - halfVisible, totalItems - visibleCount)
+  );
+  const endIndex = Math.min(startIndex + visibleCount, totalItems);
 
-    const handlePrevious = useCallback(() => {
-      if (selectedIndex > 0) {
-        if (value?.externalVideoUrl) {
-          if (selectedIndex === 1) {
-            setSelectedId("video");
-          } else {
-            const prevIndex = selectedIndex - 2;
-            setSelectedId(value.medias?.[prevIndex]?.id || "");
-          }
+  const handlePrevious = useCallback(() => {
+    if (selectedIndex > 0) {
+      if (value?.externalVideoUrl) {
+        if (selectedIndex === 1) {
+          setSelectedId("video");
         } else {
-          const prevIndex = selectedIndex - 1;
-          setSelectedId(value?.medias?.[prevIndex]?.id || "");
+          const prevIndex = selectedIndex - 2;
+          setSelectedId(value.medias?.[prevIndex]?.id || "");
         }
+      } else {
+        const prevIndex = selectedIndex - 1;
+        setSelectedId(value?.medias?.[prevIndex]?.id || "");
       }
-    }, [selectedIndex, value]);
+    }
+  }, [selectedIndex, value]);
 
-    const handleNext = useCallback(() => {
-      if (selectedIndex < totalItems - 1) {
-        if (value?.externalVideoUrl) {
-          if (selectedId === "video") {
-            setSelectedId(value.medias?.[0]?.id || "");
-          } else {
-            const currentMediaIndex =
-              value.medias?.findIndex((media) => media.id === selectedId) || 0;
-            const nextIndex = currentMediaIndex + 1;
-            setSelectedId(value.medias?.[nextIndex]?.id || "");
-          }
+  const handleNext = useCallback(() => {
+    if (selectedIndex < totalItems - 1) {
+      if (value?.externalVideoUrl) {
+        if (selectedId === "video") {
+          setSelectedId(value.medias?.[0]?.id || "");
         } else {
           const currentMediaIndex =
-            value?.medias?.findIndex((media) => media.id === selectedId) || 0;
+            value.medias?.findIndex((media) => media.id === selectedId) || 0;
           const nextIndex = currentMediaIndex + 1;
-          setSelectedId(value?.medias?.[nextIndex]?.id || "");
+          setSelectedId(value.medias?.[nextIndex]?.id || "");
         }
+      } else {
+        const currentMediaIndex =
+          value?.medias?.findIndex((media) => media.id === selectedId) || 0;
+        const nextIndex = currentMediaIndex + 1;
+        setSelectedId(value?.medias?.[nextIndex]?.id || "");
       }
-    }, [selectedIndex, totalItems, value, selectedId]);
+    }
+  }, [selectedIndex, totalItems, value, selectedId]);
 
-    const handleKeyDown = useCallback(
-      (e: KeyboardEvent) => {
-        if (e.key === "ArrowLeft") {
-          handlePrevious();
-        } else if (e.key === "ArrowRight") {
-          handleNext();
-        }
-      },
-      [handleNext, handlePrevious]
-    );
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft") {
+        handlePrevious();
+      } else if (e.key === "ArrowRight") {
+        handleNext();
+      }
+    },
+    [handleNext, handlePrevious]
+  );
 
-    useEffect(() => {
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [handleKeyDown]);
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
 
-    const canPrevious = selectedIndex > 0;
-    const canNext = selectedIndex < totalItems - 1;
+  const canPrevious = selectedIndex > 0;
+  const canNext = selectedIndex < totalItems - 1;
+
+  return (
+    <div ref={ref} className={clsx("flex flex-col", className)} {...rest}>
+      {children}
+      {/* Main display area */}
+      <div className={clsx("relative group")}>
+        {canPrevious && (
+          <button
+            onClick={handlePrevious}
+            className="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            aria-label="Previous slide"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+          </button>
+        )}
+        {canNext && (
+          <button
+            onClick={handleNext}
+            className="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            aria-label="Next slide"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </button>
+        )}
+        {value?.externalVideoUrl && selectedId === "video" && (
+          <div className={clsx("w-full rounded-md overflow-hidden", aspect)}>
+            <iframe
+              src={videoUrl}
+              className="w-full h-full"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; autoplay"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+            />
+          </div>
+        )}
+        {value?.medias?.map((media) => (
+          <div
+            key={media.id}
+            className={clsx(
+              "transition-opacity duration-300 overflow-hidden rounded-md",
+              media.id === selectedId ? "opacity-100" : "opacity-0 hidden",
+              aspect
+            )}
+          >
+            <img
+              src={media?.resize || media?.url}
+              alt={media?.alt}
+              className="w-full h-full object-cover object-center"
+            />
+          </div>
+        ))}
+      </div>
 
-    return (
-      <div ref={ref} className={clsx("flex flex-col", className)} {...rest}>
-        {children}
-        {/* Main display area */}
-        <div className={clsx("relative group")}>
-          {canPrevious && (
+      {/* Thumbnail navigation */}
+      <div className="relative mt-4">
+        <div className="flex items-stretch gap-2">
+          {totalItems > 6 && (
             <button
               onClick={handlePrevious}
-              className="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-              aria-label="Previous slide"
+              disabled={!canPrevious}
+              className={clsx(
+                "flex items-center justify-center w-6",
+                "transition-colors duration-200 rounded-l-md",
+                !canPrevious
+                  ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                  : "bg-gray-200 hover:bg-gray-300 text-gray-700"
+              )}
+              aria-label="Previous"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className="h-6 w-6"
+                className="h-4 w-4 md:h-5 md:w-5"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -161,15 +242,88 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>(
               </svg>
             </button>
           )}
-          {canNext && (
+          <div className="flex-1">
+            <div className="grid grid-cols-6 gap-2">
+              {value?.externalVideoUrl && startIndex === 0 && (
+                <div
+                  className={clsx(
+                    "relative cursor-pointer overflow-hidden rounded-sm border-2",
+                    thumbnailAspect,
+                    selectedId === "video"
+                      ? "border-primary-500"
+                      : "border-transparent hover:border-primary-300"
+                  )}
+                  onClick={() => setSelectedId("video")}
+                >
+                  <img
+                    src={thumbnailUrl}
+                    alt="Video thumbnail"
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-8 w-8 text-white"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="currentColor"
+                        fill-rule="evenodd"
+                        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
+                        clipRule="evenodd"
+                        opacity="0.5"
+                      />
+                      <path
+                        fill="currentColor"
+                        d="m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              )}
+              {value?.medias?.map((media, index) => {
+                const adjustedIndex = value?.externalVideoUrl
+                  ? index + 1
+                  : index;
+                return adjustedIndex >= startIndex &&
+                  adjustedIndex < endIndex ? (
+                  <div
+                    key={media.id}
+                    className={clsx(
+                      "relative cursor-pointer overflow-hidden rounded-sm border-2",
+                      thumbnailAspect,
+                      selectedId === media.id
+                        ? "border-primary-500"
+                        : "border-transparent hover:border-primary-300"
+                    )}
+                    onClick={() => setSelectedId(media.id)}
+                  >
+                    <img
+                      src={media?.resize || media?.url}
+                      alt={media?.alt}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ) : null;
+              })}
+            </div>
+          </div>
+          {totalItems > 6 && (
             <button
               onClick={handleNext}
-              className="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-              aria-label="Next slide"
+              disabled={!canNext}
+              className={clsx(
+                "flex items-center justify-center w-6",
+                "transition-colors duration-200 rounded-r-md",
+                !canNext
+                  ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                  : "bg-gray-200 hover:bg-gray-300 text-gray-700"
+              )}
+              aria-label="Next"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className="h-6 w-6"
+                className="h-4 w-4 md:h-5 md:w-5"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -183,165 +337,8 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>(
               </svg>
             </button>
           )}
-          {value?.externalVideoUrl && selectedId === "video" && (
-            <div className={clsx("w-full rounded-md overflow-hidden", aspect)}>
-              <iframe
-                src={videoUrl}
-                className="w-full h-full"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; autoplay"
-                referrerPolicy="strict-origin-when-cross-origin"
-                allowFullScreen
-              />
-            </div>
-          )}
-          {value?.medias?.map((media) => (
-            <div
-              key={media.id}
-              className={clsx(
-                "transition-opacity duration-300 overflow-hidden rounded-md",
-                media.id === selectedId ? "opacity-100" : "opacity-0 hidden",
-                aspect
-              )}
-            >
-              <img
-                src={media?.resize || media?.url}
-                alt={media?.alt}
-                className="w-full h-full object-cover object-center"
-              />
-            </div>
-          ))}
-        </div>
-
-        {/* Thumbnail navigation */}
-        <div className="relative mt-4">
-          <div className="flex items-stretch gap-2">
-            {totalItems > 6 && (
-              <button
-                onClick={handlePrevious}
-                disabled={!canPrevious}
-                className={clsx(
-                  "flex items-center justify-center w-6",
-                  "transition-colors duration-200 rounded-l-md",
-                  !canPrevious
-                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                    : "bg-gray-200 hover:bg-gray-300 text-gray-700"
-                )}
-                aria-label="Previous"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4 md:h-5 md:w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M15 19l-7-7 7-7"
-                  />
-                </svg>
-              </button>
-            )}
-            <div className="flex-1">
-              <div className="grid grid-cols-6 gap-2">
-                {value?.externalVideoUrl && startIndex === 0 && (
-                  <div
-                    className={clsx(
-                      "relative cursor-pointer overflow-hidden rounded-sm border-2",
-                      aspect,
-                      selectedId === "video"
-                        ? "border-primary-500"
-                        : "border-transparent hover:border-primary-300"
-                    )}
-                    onClick={() => setSelectedId("video")}
-                  >
-                    <img
-                      src={thumbnailUrl}
-                      alt="Video thumbnail"
-                      className="w-full h-full object-cover"
-                    />
-                    <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-8 w-8 text-white"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
-                          clipRule="evenodd"
-                          opacity="0.5"
-                        />
-                        <path
-                          fill="currentColor"
-                          d="m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                )}
-                {value?.medias?.map((media, index) => {
-                  const adjustedIndex = value?.externalVideoUrl
-                    ? index + 1
-                    : index;
-                  return adjustedIndex >= startIndex &&
-                    adjustedIndex < endIndex ? (
-                    <div
-                      key={media.id}
-                      className={clsx(
-                        "relative cursor-pointer overflow-hidden rounded-sm border-2",
-                        aspect,
-                        selectedId === media.id
-                          ? "border-primary-500"
-                          : "border-transparent hover:border-primary-300"
-                      )}
-                      onClick={() => setSelectedId(media.id)}
-                    >
-                      <img
-                        src={media?.resize || media?.url}
-                        alt={media?.alt}
-                        className="w-full h-full object-cover"
-                      />
-                    </div>
-                  ) : null;
-                })}
-              </div>
-            </div>
-            {totalItems > 6 && (
-              <button
-                onClick={handleNext}
-                disabled={!canNext}
-                className={clsx(
-                  "flex items-center justify-center w-6",
-                  "transition-colors duration-200 rounded-r-md",
-                  !canNext
-                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                    : "bg-gray-200 hover:bg-gray-300 text-gray-700"
-                )}
-                aria-label="Next"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4 md:h-5 md:w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
-              </button>
-            )}
-          </div>
         </div>
       </div>
-    );
-  }
-);
+    </div>
+  );
+});

package/src/react/components/ProductCard/ProductCta/index.tsx

@@ -25,7 +25,7 @@ export function ProductCta(props: {
 
   const handleClick = () => {
     if (ref.current) {
-      popover.open(roleProps[DATA_POPUP_CTA] || openableKey, ref.current);
+      popover.open(openableKey, ref.current);
     }
   };
 

package/src/react/components/RichTextOutline/index.tsx

@@ -1,5 +1,5 @@
 import { extractOutline, mdxToSlate } from "@rxdrag/slate-preview";
-import { forwardRef, ReactNode, useEffect } from "react";
+import { forwardRef, useEffect } from "react";
 import { useAcitviedHeading } from "./useAcitviedHeading";
 import clsx from "clsx";
 
@@ -16,8 +16,8 @@ export const RichTextOutline = forwardRef<
   HTMLUListElement,
   RichTextOutlineProps
 >((props, ref) => {
-  const { className, itemClassName, value, yOffset = 100, ...rest } = props;
-  const activiedId = useAcitviedHeading();
+  const { className, itemClassName, value, yOffset = 200, ...rest } = props;
+  const activiedId = useAcitviedHeading(yOffset);
   const nodes = mdxToSlate(value ?? "");
   const outline = extractOutline(nodes ?? []);
 
@@ -38,7 +38,7 @@ export const RichTextOutline = forwardRef<
     return () => {
       window.removeEventListener("hashchange", handleHashChange);
     };
-  }, []);
+  }, [yOffset]);
 
   return outline?.length ? (
     <ul ref={ref} className={className} {...rest}>
@@ -57,7 +57,6 @@ export const RichTextOutline = forwardRef<
                 e.preventDefault();
                 const element = document.getElementById(item?.key);
                 if (element) {
-                  const yOffset = -100; // 偏移量
                   const y =
                     element.getBoundingClientRect().top +
                     window.scrollY +