@rxdrag/website-lib-core 0.0.103 → 0.0.105

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.103",
+  "version": "0.0.105",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,8 +24,8 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/slate-preview": "1.2.63",
     "@rxdrag/tsconfig": "0.2.0",
+    "@rxdrag/slate-preview": "1.2.63",
     "@rxdrag/eslint-config-custom": "0.2.12"
   },
   "dependencies": {
@@ -34,13 +34,13 @@
     "gsap": "^3.12.7",
     "hls.js": "^1.6.13",
     "lodash-es": "^4.17.21",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
     "@rxdrag/entify-lib": "0.0.23",
     "@rxdrag/rxcms-models": "0.3.96"
   },
   "peerDependencies": {
-    "astro": "^4.0.0 || ^5.0.0"
+    "astro": "^4.0.0 || ^5.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "scripts": {
     "lint": "eslint . --ext .ts,tsx",

package/src/component-logic/index.ts

@@ -1,9 +1,2 @@
-export * from "./collapse";
-export * from "./motion";
-export * from "../controller/FlipController";
 export * from "./link";
-export * from "./link-client";
-export * from "./popover";
-export * from "./tabs";
-export * from "./modal";
-export * from "./number";
+export * from "./link-client";

package/src/global.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    lastCta?: string;
+  }
+}

package/src/index.ts

@@ -1,8 +1,6 @@
 export * from "./astro";
-export * from "./entify";
 export * from "./component-logic";
-export * from "./motion";
+export * from "./entify";
 export * from "./react";
-export * from "./controller";
 export * from "./robots";
 export * from "./lib";

package/src/react/components/BackgroundHlsVideoPlayer.tsx

@@ -1,10 +1,39 @@
 import { useEffect, useRef, type VideoHTMLAttributes } from "react";
 import Hls from "hls.js";
 
+// 需要过滤掉的非 video 属性（Astro runtime 透传的方法/对象）
+const FORBIDDEN_PROPS = new Set([
+  'createMetadata',
+  'createComponent',
+  'createAstro',
+  'renderComponent',
+  'renderSlot',
+  'render',
+  'addAttribute',
+  'spreadAttributes',
+  'defineStyleVars',
+  'defineScriptVars',
+  'Fragment',
+  'unescapeHTML',
+  'maybeRenderHead',
+  'renderHead',
+  'slots',
+  'props',
+  'children',
+]);
+
 export function BackgroundHlsVideoPlayer(
   props: VideoHTMLAttributes<HTMLVideoElement>
 ) {
-  const { poster, src, className, ...restProps } = props;
+  const { poster, src, className, ...rawRestProps } = props;
+  // 过滤掉 Astro runtime 透传的非 video 属性
+  const restProps: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(rawRestProps)) {
+    if (FORBIDDEN_PROPS.has(k)) continue;
+    if (k.startsWith('_')) continue;
+    if (typeof v === 'function') continue;
+    restProps[k] = v;
+  }
   const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {

package/src/react/components/ContactForm/ContactForm.tsx

@@ -2,7 +2,6 @@ import { forwardRef, useState } from "react";
 import { Submit } from "./Submit";
 import { type UploadedFile } from "./FileUpload2";
 import clsx from "clsx";
-import { modal } from "../../../controller";
 import { encrypt } from "./funcs";
 import { ContactFormProps, QuoteRequest } from "./types";
 import { getControl, getFileUpload } from "./factory";
@@ -22,6 +21,7 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
       fields = [],
       className,
       classNames,
+      fromCta,
       ...rest
     } = props;
     const [formData, setFormData] = useState<QuoteRequest>({
@@ -129,7 +129,8 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
           method: "POST",
           body: JSON.stringify({
             ...formData,
-            fromCta: modal.lastCta,
+            //TODO:后面改成从window 或者传入
+            fromCta: fromCta || window?.lastCta,
             encryptedField: encrypt(formData.phone, formSalt),
           }),
           headers: {

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

@@ -39,6 +39,7 @@ export type ContactFormProps = {
     required?: string;
   };
   fields: FieldConfig[];
+  fromCta?: string;
 };
 
 export interface FileAttachment {

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

@@ -1,41 +1,25 @@
 import { Product } from "@rxdrag/rxcms-models";
 import "./style.css";
-import {
-  DATA_OPENABLE,
-  DATA_POPUP_CTA,
-  DATA_OPENABLE_ROLE,
-  popover,
-  OpenAble,
-} from "../../../../controller";
-import { useRef } from "react";
+import type { ReactNode } from "react";
 
 //TODO: 跟询盘触发器同样的实现原理，给询盘对话框发消息
 export function ProductCta(props: {
   product?: Product;
   openableKey?: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }) {
   const { product, openableKey = "enquiry-modal", children } = props;
-  const ref = useRef<HTMLButtonElement>(null);
   const roleProps = {
-    [DATA_POPUP_CTA]: `From RichText ProductCard-${product?.title}-${product?.id}`,
-    [DATA_OPENABLE_ROLE]: OpenAble.ModalTrigger,
-    [DATA_OPENABLE]: openableKey,
-  };
-
-  const handleClick = () => {
-    if (ref.current) {
-      popover.open(openableKey, ref.current);
-    }
+    "data-modal-open": openableKey,
+    "data-call-to-action": `From RichText ProductCard-${product?.title}-${product?.id}`,
   };
 
   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}
+        type="button"
       >
         {children || "Get a quote"}
       </button>

package/src/react/components/Scroller.tsx

@@ -1,11 +1,39 @@
-import { useScroll } from "../hooks";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export const defaultThreshold = 10;
 
 export type ScrollerProps = {
   threshold?: number;
 };
 
 export function Scroller(props: ScrollerProps) {
-  const { threshold } = props;
-  useScroll(threshold);
-  return <></>;
+  const { threshold = defaultThreshold } = props;
+  const ref = useRef<HTMLDivElement>(null);
+  const [win, setWin] = useState<Window | null>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      setWin(ref.current.ownerDocument.defaultView);
+    }
+  }, []);
+
+  const onScroll = useCallback(() => {
+    if (!win) return;
+    const scrolled = win.scrollY > threshold;
+    const doc = win.document;
+
+    if (scrolled) {
+      doc.body.classList.add("scrolled");
+    } else {
+      doc.body.classList.remove("scrolled");
+    }
+  }, [threshold, win]);
+
+  useEffect(() => {
+    if (!win) return;
+    win.addEventListener("scroll", onScroll);
+    return () => win.removeEventListener("scroll", onScroll);
+  }, [onScroll, win]);
+
+  return <div ref={ref} style={{ display: "none" }} />;
 }

package/src/react/components/Share/socials.tsx

@@ -1,8 +1,7 @@
-
 export interface IconListType {
   [key: string]: {
     title: string;
-    path: JSX.Element;
+    path: Element;
     url: (l: string, t?: string, ti?: string) => string;
     color: string;
     viewBox?: string;

package/src/react/index.ts

@@ -1,2 +1 @@
-export * from "./components";
-export * from "./hooks";
+export * from "./components";

package/src/component-logic/collapse.ts

@@ -1,61 +0,0 @@
-import { DATA_OPENABLE, DATA_OPENABLE_ROLE, OpenAble } from "../controller";
-import { AnimationConfig, OpenableAnimationConfig } from "../motion";
-import { HTMLElementsWithChildren, IMotionProps } from "./motion";
-
-export type CollapseTriggerProps = IMotionProps & {
-  as?: HTMLElementsWithChildren;
-};
-
-export const defaultCollapsePanelOpen: AnimationConfig = {
-  fromTo: {
-    from: {
-      height: 0,
-      opacity: 0,
-    },
-    to: {
-      height: "auto",
-      opacity: 1,
-    },
-  },
-  duration: 0.6,
-  ease: "spring",
-};
-
-export const defaultCollapsePanelClose: AnimationConfig = {
-  fromTo: {
-    from: {
-      height: "auto",
-      opacity: 1,
-    },
-    to: {
-      height: 0,
-      opacity: 0,
-    },
-  },
-  duration: 0.25,
-  ease: "cubic-bezier(0.4, 0.0, 0.2, 1)",
-};
-
-export const defaultCollapsePanelAnimation: OpenableAnimationConfig = {
-  open: defaultCollapsePanelOpen,
-  close: defaultCollapsePanelClose,
-};
-
-export function getCollapseDataAttrs(openableKey: string = crypto.randomUUID()) {
-  return {
-    [DATA_OPENABLE]: openableKey,
-    [DATA_OPENABLE_ROLE]: OpenAble.CollapseContainer,
-  };
-}
-
-export function getCollapseTriggerDataAttrs() {
-  return {
-    [DATA_OPENABLE_ROLE]: OpenAble.CollapseTrigger,
-  };
-}
-
-export function getCollapsePanelDataAttrs() {
-  return {
-    [DATA_OPENABLE_ROLE]: OpenAble.CollapsePanel,
-  };
-}

package/src/component-logic/gsap.d.ts

@@ -1,4 +0,0 @@
-declare module 'gsap/dist/gsap' {
-  export * from 'gsap';
-  export { default } from 'gsap';
-}

package/src/component-logic/modal.ts

@@ -1,45 +0,0 @@
-import {
-  DATA_OPENABLE,
-  DATA_OPENABLE_ROLE,
-  DATA_POPUP_CTA,
-  OpenAble,
-} from "../controller";
-import { HTMLElementsWithChildren, IMotionProps } from "./motion";
-
-export type ModalTriggerProps = IMotionProps & {
-  openableKey: string;
-  callToAction?: string;
-  as?: HTMLElementsWithChildren;
-};
-
-export function getModalDataAttrs(openableKey?: string) {
-  return {
-    [DATA_OPENABLE]: openableKey,
-    [DATA_OPENABLE_ROLE]: OpenAble.ModalContainer,
-  };
-}
-
-export function getModalCloserDataAttrs(openableKey?: string) {
-  return {
-    [DATA_OPENABLE]: openableKey,
-    [DATA_OPENABLE_ROLE]: OpenAble.ModalCloser,
-  };
-}
-
-export function getModalPanelDataAttrs(openableKey?: string) {
-  return {
-    [DATA_OPENABLE]: openableKey,
-    [DATA_OPENABLE_ROLE]: OpenAble.ModalPanel,
-  };
-}
-
-export function getModalTriggerDataAttrs(
-  openableKey: string | undefined,
-  callToAction?: string
-) {
-  return {
-    [DATA_OPENABLE]: openableKey,
-    [DATA_OPENABLE_ROLE]: OpenAble.ModalTrigger,
-    [DATA_POPUP_CTA]: callToAction,
-  };
-}

package/src/component-logic/motion.ts

@@ -1,272 +0,0 @@
-import {
-  normalizeAnimation,
-  DATA_MOTION,
-  DATA_MOTION_HOVER,
-  DATA_MOTION_INVIEW,
-  DATA_MOTION_TAP,
-  AnimationConfig,
-  AosAnimationConfig,
-  HoverAnimationConfig,
-  OpenableAnimationConfig,
-  DATA_MOTION_OPENABLE,
-  normalizePopupAnimation,
-  normalizeAosAnimation,
-} from "../motion";
-import { DATA_MOTION_SELECTION, DATA_MOTION_FLIP } from "./tabs";
-import { CSSProperties } from "react";
-
-// 排除不能包含子元素的标签
-export type ExcludedElements =
-  | "img"
-  | "input"
-  | "br"
-  | "hr"
-  | "area"
-  | "base"
-  | "col"
-  | "embed"
-  | "link"
-  | "meta"
-  | "param"
-  | "source"
-  | "track"
-  | "wbr";
-
-export type HTMLElementsWithChildren = Exclude<
-  keyof HTMLElementTagNameMap,
-  ExcludedElements
->;
-
-// CSS 属性的单位处理映射
-export const cssPropertyUnits = {
-  // 无单位的属性
-  opacity: "",
-  scale: "",
-  fontWeight: "",
-  lineHeight: "",
-  zIndex: "",
-  flex: "",
-  flexGrow: "",
-  flexShrink: "",
-  order: "",
-  // 使用px的属性
-  width: "px",
-  height: "px",
-  minWidth: "px",
-  minHeight: "px",
-  maxWidth: "px",
-  maxHeight: "px",
-  padding: "px",
-  margin: "px",
-  top: "px",
-  right: "px",
-  bottom: "px",
-  left: "px",
-  gap: "px",
-  columnGap: "px",
-  rowGap: "px",
-  // transform 相关的属性
-  x: "transform",
-  y: "transform",
-  z: "transform",
-} as const;
-
-export interface IMotionProps {
-  animate?: AnimationConfig | string;
-  whileHover?: HoverAnimationConfig | string;
-  whileInView?: AosAnimationConfig | string;
-  whileTap?: AnimationConfig | string;
-  whileOpenable?: OpenableAnimationConfig | string;
-  whileSelection?: AnimationConfig | string;
-  // 在flip的父元素中使用
-  flipTransition?: AnimationConfig | string;
-  class?: string;
-  style?: CSSProperties;
-}
-
-export interface MotionAttributes {
-  className?: string;
-  style?: CSSProperties;
-  class?: string;
-  [DATA_MOTION]?: string;
-  [DATA_MOTION_HOVER]?: string;
-  [DATA_MOTION_INVIEW]?: string;
-  [DATA_MOTION_TAP]?: string;
-  [DATA_MOTION_OPENABLE]?: string;
-  [DATA_MOTION_SELECTION]?: string;
-  [DATA_MOTION_FLIP]?: string;
-}
-
-export function getMotionProps(props: IMotionProps): MotionAttributes {
-  const {
-    animate,
-    whileHover,
-    whileInView,
-    whileTap,
-    whileOpenable,
-    whileSelection,
-    flipTransition,
-    class: className,
-    style,
-    ...rest
-  } = props;
-  const normalizedAnimate = normalizeAnimation(animate);
-  const normalizedWhileHover = normalizeAnimation(whileHover);
-  const normalizedWhileInView = normalizeAosAnimation(whileInView);
-  const normalizedWhileTap = normalizeAnimation(whileTap);
-  const normalizedWhilePopup = normalizePopupAnimation(whileOpenable);
-  const normalizedWhileSelection = normalizeAnimation(whileSelection);
-
-  const dataWhileHover = JSON.stringify(normalizedWhileHover);
-  const dataWhileInView = JSON.stringify(normalizedWhileInView);
-  const dataWhileTap = JSON.stringify(normalizedWhileTap);
-  const dataWhilePopup = JSON.stringify(normalizedWhilePopup);
-  const dataWhileSelection = JSON.stringify(normalizedWhileSelection);
-  const motions: Record<string, string> = {
-    [DATA_MOTION_HOVER]: dataWhileHover,
-    [DATA_MOTION_INVIEW]: dataWhileInView,
-    [DATA_MOTION_TAP]: dataWhileTap,
-    [DATA_MOTION_OPENABLE]: dataWhilePopup,
-    [DATA_MOTION_SELECTION]: dataWhileSelection,
-    [DATA_MOTION_FLIP]: JSON.stringify(flipTransition),
-  };
-
-  if (Object.keys(normalizedAnimate || {}).length > 0) {
-    motions[DATA_MOTION] = JSON.stringify(normalizedAnimate);
-  }
-
-  const newClassName = className || "";
-  const newProps = { ...motions, ...rest };
-  const mergedStyle = { ...style };
-
-  if (normalizedAnimate?.initial) {
-    // 处理特殊的transform属性 (x, y, z, rotation, scale等)
-    // 这些属性需要转换为CSS的transform属性
-
-    // 处理标准CSS属性
-    if (normalizedAnimate.initial.opacity !== undefined)
-      mergedStyle.opacity = String(normalizedAnimate.initial.opacity);
-    if (normalizedAnimate.initial.backgroundColor !== undefined)
-      mergedStyle.backgroundColor = normalizedAnimate.initial.backgroundColor;
-    if (normalizedAnimate.initial.color !== undefined)
-      mergedStyle.color = normalizedAnimate.initial.color;
-    if (normalizedAnimate.initial.width !== undefined) {
-      mergedStyle.width =
-        typeof normalizedAnimate.initial.width === "number"
-          ? `${normalizedAnimate.initial.width}px`
-          : normalizedAnimate.initial.width;
-    }
-    if (normalizedAnimate.initial.height !== undefined) {
-      mergedStyle.height =
-        typeof normalizedAnimate.initial.height === "number"
-          ? `${normalizedAnimate.initial.height}px`
-          : normalizedAnimate.initial.height;
-    }
-
-    // 处理transformOrigin
-    if (normalizedAnimate.initial.transformOrigin !== undefined) {
-      mergedStyle.transformOrigin = normalizedAnimate.initial.transformOrigin;
-    }
-
-    // 处理transform属性
-    const transforms: string[] = [];
-
-    // 注意：对于x和y，我们使用translateX和translateY，但要确保单位是正确的
-    if (normalizedAnimate.initial.x !== undefined) {
-      const value =
-        typeof normalizedAnimate.initial.x === "number"
-          ? `${normalizedAnimate.initial.x}px`
-          : normalizedAnimate.initial.x;
-      transforms.push(`translateX(${value})`);
-    }
-
-    if (normalizedAnimate.initial.y !== undefined) {
-      const value =
-        typeof normalizedAnimate.initial.y === "number"
-          ? `${normalizedAnimate.initial.y}px`
-          : normalizedAnimate.initial.y;
-      transforms.push(`translateY(${value})`);
-    }
-
-    if (normalizedAnimate.initial.z !== undefined) {
-      const value =
-        typeof normalizedAnimate.initial.z === "number"
-          ? `${normalizedAnimate.initial.z}px`
-          : normalizedAnimate.initial.z;
-      transforms.push(`translateZ(${value})`);
-    }
-
-    // 处理旋转
-    if (normalizedAnimate.initial.rotation !== undefined) {
-      transforms.push(`rotate(${normalizedAnimate.initial.rotation}deg)`);
-    }
-
-    if (normalizedAnimate.initial.rotationX !== undefined) {
-      transforms.push(`rotateX(${normalizedAnimate.initial.rotationX}deg)`);
-    }
-
-    if (normalizedAnimate.initial.rotationY !== undefined) {
-      transforms.push(`rotateY(${normalizedAnimate.initial.rotationY}deg)`);
-    }
-
-    if (normalizedAnimate.initial.rotationZ !== undefined) {
-      transforms.push(`rotateZ(${normalizedAnimate.initial.rotationZ}deg)`);
-    }
-
-    // 处理缩放
-    if (normalizedAnimate.initial.scale !== undefined) {
-      transforms.push(`scale(${normalizedAnimate.initial.scale})`);
-    }
-
-    if (normalizedAnimate.initial.scaleX !== undefined) {
-      transforms.push(`scaleX(${normalizedAnimate.initial.scaleX})`);
-    }
-
-    if (normalizedAnimate.initial.scaleY !== undefined) {
-      transforms.push(`scaleY(${normalizedAnimate.initial.scaleY})`);
-    }
-
-    // 如果有transform属性，合并它们
-    if (transforms.length > 0) {
-      mergedStyle.transform = transforms.join(" ");
-    }
-
-    // 处理其他属性
-    const handledProps = [
-      "opacity",
-      "backgroundColor",
-      "color",
-      "width",
-      "height",
-      "transformOrigin",
-      "x",
-      "y",
-      "z",
-      "rotation",
-      "rotationX",
-      "rotationY",
-      "rotationZ",
-      "scale",
-      "scaleX",
-      "scaleY",
-    ];
-
-    // 复制其他没有特殊处理的属性
-    for (const key in normalizedAnimate.initial) {
-      if (!handledProps.includes(key)) {
-        // @ts-expect-error - 允许动态属性赋值
-        mergedStyle[key] = normalizedAnimate.initial[key];
-      }
-    }
-  }
-
-  // 将 styleProp 的定义移到条件块外部，确保它始终被定义
-  const styleProp =
-    Object.keys(mergedStyle).length > 0
-      ? {
-          style: mergedStyle,
-        }
-      : undefined;
-
-  return { ...newProps, ...styleProp, class: newClassName };
-}

package/src/component-logic/number.ts

@@ -1,45 +0,0 @@
-import { DATA_MOTION_NUMBER, DATA_MOTION_NUMBER_ONCE } from "../motion/consts";
-
-/**
- * Animation options for GSAP animations
- */
-export interface AnimationOptions {
-  /** Animation duration in seconds */
-  duration?: number;
-  /** GSAP easing function (e.g., "power1.out", "power2.in", "elastic.out") */
-  ease?: string;
-  /** Delay before animation starts in seconds */
-  delay?: number;
-  /** Repeat count (-1 for infinite) */
-  repeat?: number;
-  /** Whether to yoyo the animation (play in reverse after completion) */
-  yoyo?: boolean;
-  /** Stagger value for multiple animations */
-  stagger?: number;
-}
-
-export interface AnimationNumberProps {
-  start?: number;
-  end?: number;
-  transition?: AnimationOptions;
-  class?: string;
-  sign?: string;
-  once?: boolean;
-  type?: "int" | "float" | "percentage" | "currency";
-  fractionDigits?: number;
-}
-
-export function getAnimationNumberDataAttrs(props: AnimationNumberProps) {
-  const { start, end, transition, type, fractionDigits } = props;
-  const motionValue = {
-    start,
-    end,
-    transition,
-    type,
-    fractionDigits,
-  };
-  return {
-    [DATA_MOTION_NUMBER]: JSON.stringify(motionValue),
-    [DATA_MOTION_NUMBER_ONCE]: props.once,
-  };
-}