@rxdrag/website-lib-react 0.0.7 → 0.0.8

package/src/components/ProductCard/ProductCard.tsx

@@ -1,24 +0,0 @@
-import { CSSProperties } from "react";
-import { TSlateResizable } from "@rxdrag/tiptap-preview";
-import { ProductView } from "./ProductView";
-import { Product } from "@rxdrag/rxcms-models";
-
-export type TSlateProduct = TSlateResizable & {
-  product?: Product;
-  title?: string;
-  description?: string;
-  aspect?: string;
-  ctaTitle?: 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} ctaTitle={node?.ctaTitle}/>;
-};

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

@@ -1,28 +0,0 @@
-import { Product } from "@rxdrag/rxcms-models";
-import "./style.css";
-import type { ReactNode } from "react";
-
-//TODO: 跟询盘触发器同样的实现原理，给询盘对话框发消息
-export function ProductCta(props: {
-  product?: Product;
-  openableKey?: string;
-  children?: ReactNode;
-}) {
-  const { product, openableKey = "enquiry-modal", children } = props;
-  const roleProps = {
-    "data-modal-open": openableKey,
-    "data-call-to-action": `From RichText ProductCard-${product?.title}-${product?.id}`,
-  };
-
-  return (
-    <div className="flex justify-center items-center">
-      <button
-        {...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"
-        type="button"
-      >
-        {children || "Get a quote"}
-      </button>
-    </div>
-  );
-}

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

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

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

@@ -1,13 +0,0 @@
-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/components/ProductCard/ProductDescription/style.css

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

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

@@ -1,35 +0,0 @@
-import { HtmlHTMLAttributes } from "react";
-import "./style.css";
-import { TProduct } from "../../../types/view-model";
-
-export function ProductMedia(
-  props: {
-    product?: TProduct;
-    width?: number;
-    aspect?: string;
-  } & HtmlHTMLAttributes<HTMLImageElement>
-) {
-  const { product, style, width, className, aspect, ...rest } = props;
-
-  return (
-    <div
-      className={"product-media " + className}
-      style={{
-        aspectRatio: aspect || "4 / 3",
-        borderRadius: "1rem",
-        overflow: "hidden",
-        ...style,
-        width,
-      }}
-      {...rest}
-    >
-      <img
-        style={{
-          width: "100%",
-        }}
-        src={product?.coverUrl}
-        alt={product?.title}
-      />
-    </div>
-  );
-}

package/src/components/ProductCard/ProductMedia/style.css

@@ -1,6 +0,0 @@
-.x-figure .product-media {
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

package/src/components/ProductCard/ProductTitle/index.tsx

@@ -1,7 +0,0 @@
-import { HTMLAttributes } from "react";
-import "./style.css";
-
-export function ProductTitle(props: HTMLAttributes<HTMLHeadingElement>) {
-  const { className, ...rest } = props;
-  return <h3 className={"product-title " + className} {...rest} />;
-}

package/src/components/ProductCard/ProductTitle/style.css

@@ -1,4 +0,0 @@
-.x-figure .product-title{
-  margin-top: 0.6rem;
-  padding-top: 0;
-}

package/src/components/ProductCard/ProductView.tsx

@@ -1,36 +0,0 @@
-import { ProductCardProps } from "./ProductCard";
-import { Figcaption, Figure, FigureContent } from "@rxdrag/tiptap-preview";
-import { ProductMedia } from "./ProductMedia";
-import { ProductTitle } from "./ProductTitle";
-import { ProductDescription } from "./ProductDescription";
-import { ProductCta } from "./ProductCta";
-import { TProduct } from "../../types/view-model";
-
-export function ProductView(
-  props: {
-    product?: TProduct;
-    ctaTitle?: string;
-  } & ProductCardProps
-) {
-  const { product, ctaTitle, node } = props;
-
-  const title = node?.title || product?.title;
-  const description = node?.description || product?.description;
-
-  return (
-    <Figure>
-      <FigureContent width={node?.width} align={node?.align}>
-        <a href={`/products/${product?.slug}`}>
-          <ProductMedia product={product} aspect={node?.aspect} />
-        </a>
-      </FigureContent>
-      <Figcaption width={node?.width} align={node?.align}>
-        <a href={`/products/${product?.slug}`}>
-          <ProductTitle>{title}</ProductTitle>
-        </a>
-        <ProductDescription>{description}</ProductDescription>
-        <ProductCta product={product}>{ctaTitle}</ProductCta>
-      </Figcaption>
-    </Figure>
-  );
-}

package/src/components/ProductCard/index.ts

@@ -1,5 +0,0 @@
-export * from "./ProductCta";
-export * from "./ProductTitle";
-export * from "./ProductDescription";
-export * from "./ProductCard";
-export * from "./ProductMedia";

package/src/components/ProductCard/useQueryProduct.ts

@@ -1,32 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Product } from "@rxdrag/rxcms-models";
-
-export function useQueryProduct(productId?: string, websiteId?: string) {
-  const active = useRef<boolean>(false);
-  const [product, setProduct] = useState<Product | undefined>({});
-
-  const url = websiteId
-    ? `/${websiteId}/api/product/${productId}`
-    : `/api/product/${productId}`;
-
-  useEffect(() => {
-    if (active.current && !productId) {
-      return;
-    }
-
-    fetch(url)
-      .then((res) => res.json())
-      .then((data) => {
-        setProduct(data);
-        active.current = true;
-      });
-  }, [productId]);
-
-  useEffect(() => {
-    return () => {
-      active.current = false;
-    };
-  });
-
-  return product;
-}

package/src/components/ReactModalTrigger.tsx

@@ -1,28 +0,0 @@
-import React, { type ReactNode } from "react";
-
-export function ReactModalTrigger(props: {
-  className?: string;
-  openableKey?: string;
-  callToAction?: string;
-  children?: ReactNode;
-}) {
-  const {
-    className,
-    callToAction,
-    openableKey = "enquiry-modal",
-    children,
-  } = props;
-  const roleProps = {
-    "data-modal-open": openableKey,
-    "data-call-to-action": callToAction,
-  };
-  return (
-    <button
-      {...roleProps}
-      className={className}
-      type="button"
-    >
-      {children || "Get a quote"}
-    </button>
-  );
-}

package/src/components/ReactVideoPlayer.tsx

@@ -1,332 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  forwardRef,
-} from "react";
-import Hls from "hls.js";
-import type { Media } from "@rxdrag/rxcms-models";
-import { ReactModalTrigger } from "./ReactModalTrigger";
-import clsx from "clsx";
-import { VideoPlayIcon } from "./VideoPlayIcon";
-
-export type ID = string | number;
-
-export type VideoPlayerClassNames = {
-  container?: string;
-  aspect?: string;
-  video?: string;
-  playButton?: string;
-  playButtonOuter?: string;
-  playButtonInner?: string;
-  playIcon?: string;
-  loadingOverlay?: string;
-  loadingContent?: string;
-  overlay?: string;
-  overlayTitle?: string;
-  ctaButton?: string;
-  overlayReplayButton?: string;
-};
-
-export const ReactVideoPlayer = forwardRef<
-  HTMLDivElement,
-  {
-    endTitle?: string;
-    media?: Media;
-    posterUrl?: string;
-    eagerLoad?: boolean;
-    classNames?: VideoPlayerClassNames;
-    callToAction?: string;
-    onToggleSelect?: (id: ID) => void;
-    designMode?: boolean;
-    children?: React.ReactNode;
-    
-  }
->((props, ref) => {
-  const {
-    endTitle,
-    media,
-    onToggleSelect,
-    posterUrl,
-    eagerLoad,
-    classNames,
-    callToAction,
-    designMode,
-    children,
-    ...rest
-  } = props;
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const hlsRef = useRef<Hls | null>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isEnded, setIsEnded] = useState(false);
-  const [isSourceReady, setIsSourceReady] = useState(false);
-  const sourceReadyRef = useRef(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const isEndedRef = useRef(false);
-  const [hasStarted, setHasStarted] = useState(false);
-
-  const ensureSourceReady = useCallback(() => {
-    const video = videoRef.current;
-    const url = media?.file?.original;
-    if (!video || !url) return false;
-    if (sourceReadyRef.current) return true;
-
-    if (media?.storageType === "cloudflare_stream") {
-      if (!Hls.isSupported()) {
-        if (video.canPlayType("application/vnd.apple.mpegurl")) {
-          video.src = url;
-          sourceReadyRef.current = true;
-          setIsSourceReady(true);
-          return true;
-        }
-        return false;
-      }
-
-      const hls = new Hls({ enableWorker: true });
-      hls.on(Hls.Events.ERROR, (_event, data) => {
-        if (data.fatal) {
-          switch (data.type) {
-            case Hls.ErrorTypes.NETWORK_ERROR:
-              hls.startLoad();
-              break;
-            case Hls.ErrorTypes.MEDIA_ERROR:
-              hls.recoverMediaError();
-              break;
-            default:
-              hls.destroy();
-              break;
-          }
-        }
-      });
-      hls.loadSource(url);
-      hls.attachMedia(video);
-      hlsRef.current = hls;
-      sourceReadyRef.current = true;
-      setIsSourceReady(true);
-      return true;
-    }
-
-    video.src = url;
-    sourceReadyRef.current = true;
-    setIsSourceReady(true);
-    return true;
-  }, [media?.file?.original, media?.storageType]);
-
-  const handleContainerClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (designMode) return;
-      if (isPlaying && videoRef.current) {
-        e.stopPropagation();
-        videoRef.current.pause();
-        return;
-      }
-      if (media?.id != null) {
-        onToggleSelect?.(media.id);
-      }
-    },
-    [isPlaying, media?.id, onToggleSelect, designMode],
-  );
-
-  const handlePlayClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (designMode) return;
-      e.stopPropagation();
-      const v = videoRef.current;
-      if (!v) return;
-      if (isPlaying) {
-        v.pause();
-        return;
-      }
-
-      const ok = ensureSourceReady();
-      if (!ok) return;
-
-      setIsLoading(true);
-
-      v.play().catch((error) => {
-        console.log("ReactVideoPlayer play() failed:", error);
-        setIsLoading(false);
-      });
-    },
-    [isPlaying, designMode, ensureSourceReady],
-  );
-
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-
-    video.pause();
-    if (hlsRef.current) {
-      hlsRef.current.destroy();
-      hlsRef.current = null;
-    }
-    video.removeAttribute("src");
-    video.load();
-    setIsSourceReady(false);
-    sourceReadyRef.current = false;
-
-    const onPlay = () => {
-      setIsPlaying(true);
-      setIsEnded(false);
-      isEndedRef.current = false;
-      setIsLoading(false);
-      setHasStarted(true);
-    };
-    const onPause = () => setIsPlaying(false);
-    const onEnded = () => {
-      setIsPlaying(false);
-      setIsEnded(true);
-      isEndedRef.current = true;
-      setIsLoading(false);
-    };
-    const onWaiting = () => {
-      if (!isEndedRef.current) setIsLoading(true);
-    };
-    const onCanPlay = () => {
-      setIsLoading(false);
-    };
-
-    video.addEventListener("play", onPlay);
-    video.addEventListener("pause", onPause);
-    video.addEventListener("ended", onEnded);
-    video.addEventListener("waiting", onWaiting);
-    video.addEventListener("canplay", onCanPlay);
-    video.addEventListener("playing", onCanPlay);
-
-    if (eagerLoad) {
-      ensureSourceReady();
-    }
-
-    return () => {
-      video.removeEventListener("play", onPlay);
-      video.removeEventListener("pause", onPause);
-      video.removeEventListener("ended", onEnded);
-      video.removeEventListener("waiting", onWaiting);
-      video.removeEventListener("canplay", onCanPlay);
-      video.removeEventListener("playing", onCanPlay);
-
-      if (hlsRef.current) {
-        hlsRef.current.destroy();
-        hlsRef.current = null;
-      }
-    };
-  }, [eagerLoad, ensureSourceReady, media?.file?.original, media?.storageType]);
-
-  return (
-    <div
-      ref={ref}
-      className={clsx(
-        "relative w-full rounded-2xl",
-        classNames?.aspect ?? "aspect-video",
-        classNames?.container,
-      )}
-      onClick={handleContainerClick}
-      {...rest}
-    >
-      <video
-        ref={videoRef}
-        onClick={(e) => !designMode && e.stopPropagation()}
-        preload={eagerLoad ? "metadata" : "none"}
-        poster={posterUrl ?? media?.file?.thumbnail}
-        className={clsx(
-          "w-full h-full rounded-lg object-cover",
-          classNames?.video,
-        )}
-        playsInline
-        controls={!designMode && hasStarted}
-        disablePictureInPicture
-        controlsList="nodownload noremoteplayback noplaybackrate"
-      >
-        {!media?.storageType &&
-        media?.file?.original &&
-        (eagerLoad || isSourceReady) ? (
-          <source src={media.file.original} />
-        ) : null}
-        Your browser does not support video playback.
-      </video>
-
-      {!isPlaying && !isEnded && !isLoading && (
-        <button
-          type="button"
-          onClick={handlePlayClick}
-          className={clsx(
-            "absolute inset-0 items-center justify-center w-full h-full transition rounded-lg z-10",
-            hasStarted ? "hidden md:flex" : "flex",
-            classNames?.playButton,
-          )}
-        >
-          {children || <VideoPlayIcon classNames={classNames} />}
-        </button>
-      )}
-
-      {!isPlaying && !isEnded && isLoading && (
-        <div
-          className={clsx(
-            "absolute inset-0 flex items-center justify-center w-full h-full rounded-lg z-10 bg-black/20",
-            classNames?.loadingOverlay,
-          )}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <div
-            className={clsx(
-              "flex items-center gap-3 rounded-full bg-black/50 px-4 py-2 text-white",
-              classNames?.loadingContent,
-            )}
-          >
-            <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-            <span className="text-sm">Loading...</span>
-          </div>
-        </div>
-      )}
-
-      <div
-        className={clsx(
-          "absolute inset-0 bg-black/50 flex-col gap-6 items-center justify-center text-center text-white hidden z-10 rounded-2xl",
-          classNames?.overlay,
-        )}
-        style={{ display: isEnded ? "flex" : "none" }}
-      >
-        <p
-          className={clsx("text-4xl drop-shadow-lg", classNames?.overlayTitle)}
-        >
-          {endTitle ?? "Contact Us Now"}
-        </p>
-        <div className="flex items-center gap-4">
-          <ReactModalTrigger
-            className={clsx(
-              "btn btn-primary px-10 py-2.5 rounded-full ripple",
-              classNames?.ctaButton,
-            )}
-            callToAction={callToAction}
-          >
-            Consult Now
-          </ReactModalTrigger>
-          <button
-            type="button"
-            className={clsx(
-              "px-10 py-2.5 bg-white/20 hover:bg-white/30 rounded-full transition text-sm",
-              classNames?.overlayReplayButton,
-            )}
-            onClick={(e) => {
-              e.stopPropagation();
-              const v = videoRef.current;
-              if (!v) return;
-              const ok = ensureSourceReady();
-              if (!ok) return;
-              setIsLoading(true);
-              v.currentTime = 0;
-              setIsEnded(false);
-              v.play().catch((error) => {
-                console.log("ReactVideoPlayer play() failed:", error);
-                setIsLoading(false);
-              });
-            }}
-          >
-            Replay
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-});

package/src/components/RichTextOutline/index.tsx

@@ -1,74 +0,0 @@
-import { forwardRef, useEffect } from "react";
-import { useAcitviedHeading } from "./useAcitviedHeading";
-import clsx from "clsx";
-import { parseOutline } from "./parseOutline";
-
-export type RichTextOutlineProps = {
-  className?: string;
-  itemClassName?: string;
-  value?: string;
-  //滚动偏移量
-  yOffset?: number;
-  style?: React.CSSProperties;
-};
-
-export const RichTextOutline = forwardRef<
-  HTMLUListElement,
-  RichTextOutlineProps
->((props, ref) => {
-  const { className, itemClassName, value, yOffset = 200, ...rest } = props;
-  const activiedId = useAcitviedHeading(yOffset);
-  const outline = parseOutline(value);
-
-  useEffect(() => {
-    const handleHashChange = () => {
-      const element = document.getElementById(
-        window.location.hash.substring(1)
-      );
-      if (element) {
-        const y =
-          element.getBoundingClientRect().top + window.scrollY - yOffset;
-        window.scrollTo({ top: y, behavior: "smooth" });
-      }
-    };
-
-    window.addEventListener("hashchange", handleHashChange);
-
-    return () => {
-      window.removeEventListener("hashchange", handleHashChange);
-    };
-  }, [yOffset]);
-
-  return outline?.length ? (
-    <ul ref={ref} className={className} {...rest}>
-      {outline?.map((item, index) => {
-        return (
-          <li
-            key={item?.key + index}
-            className={clsx(
-              activiedId === item?.key ? "actived" : "",
-              itemClassName
-            )}
-          >
-            <a
-              href={`#${item?.key}`}
-              onClick={(e) => {
-                e.preventDefault();
-                const element = document.getElementById(item?.key);
-                if (element) {
-                  const y =
-                    element.getBoundingClientRect().top +
-                    window.scrollY +
-                    yOffset;
-                  window.scrollTo({ top: y, behavior: "smooth" });
-                }
-              }}
-            >
-              {item?.text}
-            </a>
-          </li>
-        );
-      })}
-    </ul>
-  ) : null;
-});