@rxdrag/website-lib-core 0.0.4 → 0.0.7

package/src/react/components/GoogleConsent/GoogleConsent.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useMemo, useState } from "react";
+import { CumtomizedModal } from "./CumtomizedModal";
+import Cookies from "universal-cookie"
+import { ConsentSettings } from "./types";
+import { Container } from "../Container";
+import { gtag } from "./gtags";
+
+const COOKIE_NAME = "gdpr-consent";
+
+const DEINED_ALL: ConsentSettings = {
+  strictlyNecessary: true,
+  analytics: false,
+  functionality: false,
+  advertisement: false,
+}
+
+export function XGoogleConsent(props: {
+  domain?: string
+}) {
+  const { domain } = props;
+
+  const [decisionMade, setDecisionMade] = useState(true) // start with true to avoid flashing
+  const cookies = useMemo(() => new Cookies(), []);
+
+  useEffect(() => {
+    const consent = cookies.get(COOKIE_NAME);
+    if (consent !== undefined) {
+      setDecisionMade(true)
+      sendConsent(consent)
+    } else {
+      setDecisionMade(false)
+      // 默认设置
+      gtag.consent(DEINED_ALL);
+    }
+  }, [cookies, setDecisionMade])
+
+  const handleSavePreferences = (consent: ConsentSettings) => {
+    saveDecision(consent)
+  };
+
+  const handleDeclineAll = () => {
+    saveDecision(DEINED_ALL)
+  };
+
+  const saveDecision = (consent: ConsentSettings) => {
+    sendConsent(consent);
+
+    cookies.set(COOKIE_NAME, consent, {
+      expires: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
+      path: "/",
+      domain: domain
+    })
+
+    setDecisionMade(true)
+  }
+
+  const sendConsent = (consent: ConsentSettings) => {
+    gtag.consent(consent);
+  }
+
+  const handleAcceptAll = () => {
+    saveDecision({
+      advertisement: true,
+      analytics: true,
+      functionality: true,
+      strictlyNecessary: true
+    })
+  };
+
+  if (decisionMade) {
+    return null;
+  }
+
+  return (
+    <div className="fixed left-0 bottom-0 w-full shadow-lg bg-gray-600">
+      <Container>
+        <div className="text-white p-6 w-full">
+          <div className="flex flex-1 items-center gap-8 justify-between">
+            <div className="text-sm">
+              <h2 className="text-md font-bold pb-2">We Value Your Privacy</h2>
+              We use cookies for site improvement, personalization, and ads. Accepting enhances your experience, but you can manage preferences or decline non-essential cookies. See our <a className="text-blue-500" target="_blank" href="/privacy-policy">Cookie Policy</a> for details.
+            </div>
+            <div className="grid grid-cols-2 w-[300px] gap-2 text-sm">
+              <button onClick={handleAcceptAll} className="bg-green-400 hover:bg-green-500 text-white py-2 px-2 rounded">
+                Accept All
+              </button>
+              <button onClick={handleDeclineAll} className="text-white py-2 px-2 rounded  bg-gray-700 hover:bg-gray-800">
+                Decline All
+              </button>
+              <CumtomizedModal
+                onAcceptAll={handleAcceptAll}
+                onRejectAll={handleDeclineAll}
+                onSavePreferences={handleSavePreferences}
+              />
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+}

package/src/react/components/GoogleConsent/README.md

@@ -0,0 +1 @@
+统一配置，根据语言设置，自动切换语言，不需要作为页面组件

package/src/react/components/GoogleConsent/gtags.ts

@@ -0,0 +1,68 @@
+import { ConsentSettings } from "./types";
+
+declare global {
+  interface Window {
+    gtag: (...args: unknown[]) => void;
+  }
+}
+
+export const consent = (consent: ConsentSettings) => {
+  if (!window.gtag) {
+    console.warn(
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.",
+    );
+    return;
+  }
+
+  window.gtag("consent", "update", {
+    ad_storage: consent.advertisement ? "granted" : "denied",
+    analytics_storage: consent.analytics ? "granted" : "denied",
+    ad_user_data: consent.advertisement ? "granted" : "denied",
+    ad_personalization: consent.advertisement ? "granted" : "denied",
+  });
+};
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+ */
+export const pageview = (url: string, trackingId: string) => {
+  if (!window.gtag) {
+    console.warn(
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.",
+    );
+    return;
+  }
+  window.gtag("config", trackingId, {
+    page_path: url,
+  });
+};
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/events
+ */
+export const event = ({
+  action,
+  category,
+  label,
+  value,
+}: Record<string, string>) => {
+  if (!window.gtag) {
+    console.warn(
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.",
+    );
+    return;
+  }
+  window.gtag("event", action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  });
+};
+
+export const gtag = {
+  consent,
+  pageview,
+  event
+}

package/src/react/components/GoogleConsent/index.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./GoogleConsent";
+export * from "./gtags";

package/src/react/components/GoogleConsent/types.ts

@@ -0,0 +1,18 @@
+export type ConsentSettings = {
+  strictlyNecessary: boolean;
+  analytics: boolean;
+  functionality: boolean;
+  advertisement: boolean;
+};
+
+
+export type CookieItem = {
+  title: string;
+  content: string;
+  checkbox: {
+    valueName: string;
+    label?: string;
+    alwaysActive?: boolean;
+  }
+}
+

package/src/react/components/GoogleConsent//345/217/202/350/200/203.md

@@ -0,0 +1,4 @@
+https://baijiahao.baidu.com/s?id=1794747324846977848&wfr=spider&for=pc
+https://github.com/fordooo/use-consent-mode-cookie-banner/tree/main
+https://github.com/orestbida/cookieconsent
+https://maxket.com/google-consent-mode-v2/

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

@@ -0,0 +1,347 @@
+import clsx from "clsx";
+import { forwardRef, useEffect, useState, useCallback } from "react";
+import { TMedias } from "../../../entify";
+
+export type MediasProps = {
+  value?: TMedias;
+  className?: string;
+  children?: React.ReactNode;
+  // Aspect ratio, format is `aspect-[width/height]`
+  aspect?: 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>(
+      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 || ""
+      );
+    }, [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]);
+
+    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`
+          );
+        }
+      }
+    }, [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 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);
+
+    const handlePrevious = useCallback(() => {
+      if (selectedIndex > 0) {
+        if (value?.externalVideoUrl) {
+          if (selectedIndex === 1) {
+            setSelectedId("video");
+          } else {
+            const prevIndex = selectedIndex - 2;
+            setSelectedId(value.medias?.[prevIndex]?.id || "");
+          }
+        } else {
+          const prevIndex = selectedIndex - 1;
+          setSelectedId(value?.medias?.[prevIndex]?.id || "");
+        }
+      }
+    }, [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 || "");
+          }
+        } else {
+          const currentMediaIndex =
+            value?.medias?.findIndex((media) => media.id === selectedId) || 0;
+          const nextIndex = currentMediaIndex + 1;
+          setSelectedId(value?.medias?.[nextIndex]?.id || "");
+        }
+      }
+    }, [selectedIndex, totalItems, value, selectedId]);
+
+    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]);
+
+    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>
+
+        {/* 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>
+    );
+  }
+);

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

@@ -0,0 +1,23 @@
+import { CSSProperties } from "react";
+import { TSlateResizable } from "@rxdrag/slate-preview";
+import { ProductView } from "./ProductView";
+import { Product } from "@rxdrag/rxcms-models";
+
+export type TSlateProduct = TSlateResizable & {
+  product?: Product;
+  title?: string;
+  description?: string;
+  aspect?: string;
+};
+
+export const PRODUCT_KEY = "Product";
+
+export type ProductCardProps = {
+  node?: TSlateProduct;
+  style?: CSSProperties;
+};
+
+// Slate用的渲染组件
+export const ProductCard = ({ node }: ProductCardProps) => {
+  return <ProductView product={node?.product} node={node} />;
+};

package/src/react/components/ProductCard/ProductCardPreview.tsx

@@ -0,0 +1,12 @@
+import { useQueryProduct } from "./useQueryProduct";
+import { ProductCardProps } from "./ProductCard";
+import { ProductView } from "./ProductView";
+
+
+export const createXProductCardPreview = (websiteId?: string) => {
+  return ({ node }: ProductCardProps) => {
+    const product = useQueryProduct(node?.productId, websiteId);
+
+    return <ProductView product={product} node={node} />;
+  }
+}

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

@@ -0,0 +1,41 @@
+import { Product } from "@rxdrag/rxcms-models";
+import "./style.css";
+import {
+  DATA_POPUP,
+  DATA_POPUP_CTA,
+  DATA_POPUP_ROLE,
+  DEFAULT_ENQUIRY_POPUP,
+  openPopup,
+  PopupRole,
+} from "../../../../scripts";
+import { useRef } from "react";
+
+//TODO: 跟询盘触发器同样的实现原理，给询盘对话框发消息
+export function ProductCta(props: { product?: Product; popupKey?: string }) {
+  const { product, popupKey = DEFAULT_ENQUIRY_POPUP } = props;
+  const ref = useRef<HTMLButtonElement>(null);
+  const roleProps = {
+    [DATA_POPUP_CTA]: `From RichText ProductCard-${product?.title}-${product?.id}`,
+    [DATA_POPUP_ROLE]: PopupRole.ModalTrigger,
+    [DATA_POPUP]: popupKey,
+  };
+
+  const handleClick = () => {
+    if (ref.current) {
+      openPopup(roleProps[DATA_POPUP_CTA] || popupKey, ref.current);
+    }
+  };
+
+  return (
+    <div className="flex justify-center items-center">
+      <button
+        ref={ref}
+        {...roleProps}
+        className="product-cta-button relative flex-1 mt-2 flex items-center justify-center rounded-md border border-transparent bg-sky-600 text-md font-smibold text-white hover:bg-sky-700"
+        onClick={handleClick}
+      >
+        Get a quote
+      </button>
+    </div>
+  );
+}

package/src/react/components/ProductCard/ProductCta/style.css

@@ -0,0 +1,4 @@
+.product-cta-button {
+  width: 100%;
+  padding: 8px 16px;
+}

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

@@ -0,0 +1,13 @@
+import clsx from "clsx"
+import { HTMLAttributes } from "react"
+import "./style.css"
+
+export function ProductDescription(props: HTMLAttributes<HTMLParagraphElement>) {
+  const { className, ...rest } = props
+  return (
+    <p
+      className={clsx("product-description", className)}
+      {...rest}
+    />
+  )
+}

package/src/react/components/ProductCard/ProductDescription/style.css

@@ -0,0 +1,6 @@
+.x-figure .product-description {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0.4rem;
+}

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

@@ -0,0 +1,34 @@
+import { Product } from "@rxdrag/rxcms-models";
+import { HtmlHTMLAttributes } from "react";
+import "./style.css";
+
+export function ProductMedia(
+  props: {
+    product?: Product;
+    width?: number;
+    aspect?: string;
+  } & HtmlHTMLAttributes<HTMLImageElement>
+) {
+  const { product, style, width, className, aspect, ...rest } = props;
+  const media = product?.mediaPivots?.[0]?.media;
+
+  return (
+    <div
+      className={"product-media " + className}
+      style={{
+        aspectRatio: aspect || "4 / 3",
+        ...style,
+        width,
+      }}
+      {...rest}
+    >
+      <img
+        style={{
+          width: "100%",
+        }}
+        src={media?.file?.resize || media?.file?.url || media?.file?.thumbnail}
+        alt={product?.mediaPivots?.[0]?.altText}
+      />
+    </div>
+  );
+}