@rxdrag/website-lib-core 0.0.7 → 0.0.9

package/index.ts

@@ -1 +1 @@
-export * from "./src"
+export * from "./src"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -17,21 +17,25 @@
   },
   "devDependencies": {
     "@babel/types": "^7.26.9",
+    "@iconify/react": "^5.0.2",
+    "@types/gsap": "^3.0.0",
+    "@types/lodash-es": "^4.14.191",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/entify-hooks": "0.2.39",
-    "@rxdrag/eslint-config-custom": "0.2.11",
-    "@rxdrag/slate-preview": "1.2.54",
-    "@rxdrag/tsconfig": "0.2.0"
+    "@rxdrag/entify-hooks": "0.2.40",
+    "@rxdrag/slate-preview": "1.2.55",
+    "@rxdrag/tsconfig": "0.2.0",
+    "@rxdrag/eslint-config-custom": "0.2.12"
   },
   "dependencies": {
     "clsx": "^2.1.0",
-    "motion": "^12.4.7",
+    "gsap": "^3.12.7",
+    "lodash-es": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@rxdrag/rxcms-models": "0.3.45"
+    "@rxdrag/rxcms-models": "0.3.46"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

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

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

package/src/component-logic/index.ts

@@ -0,0 +1,8 @@
+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";

package/src/component-logic/link-client.ts

@@ -0,0 +1,33 @@
+export const initLinks = () => {
+  // 获取当前URL的路径部分（去除域名）
+  const currentPath = window.location.pathname;
+
+  // 获取所有导航链接
+  const links = document.querySelectorAll<HTMLAnchorElement>(
+    "[data-actived-path]"
+  );
+
+  links.forEach((anchorLink) => {
+    // 从链接URL中提取路径部分
+    try {
+      const linkUrl = new URL(anchorLink.href);
+      const linkPath =
+        anchorLink.dataset.activedPath === "true"
+          ? linkUrl.pathname
+          : anchorLink.dataset.activedPath;
+
+      // 检查当前路径是否与链接路径匹配或是其子路径
+      if (
+        currentPath === linkPath ||
+        (linkPath !== "/" && linkPath && currentPath.startsWith(linkPath))
+      ) {
+        anchorLink.classList.add("actived");
+      } else {
+        anchorLink.classList.remove("actived");
+      }
+    } catch (e) {
+      // 处理无效URL的情况
+      console.warn("Invalid URL:", e, anchorLink);
+    }
+  });
+};

package/src/component-logic/link.ts

@@ -0,0 +1,50 @@
+export type LinkType =
+  | "product"
+  | "post"
+  | "page"
+  | "user"
+  | "product-category"
+  | "post-category"
+  | "link"
+  | "products"
+  | "posts";
+
+export function toHref(type: LinkType | string, to: string) {
+  if (type === "link" || !type) {
+    return to;
+  }
+
+  if (type === "products") {
+    return "/products/page/1";
+  }
+
+  if (type === "posts") {
+    return "/posts/page/1";
+  }
+
+  if (type === "page") {
+    return `/${to}`;
+  }
+
+  if (type === "post") {
+    return `/posts/${to}`;
+  }
+
+  if (type === "product") {
+    return `/products/${to}`;
+  }
+
+  if (type === "user") {
+    return `/profiles/${to}`;
+  }
+
+  if (type === "product-category") {
+    return `/products/categories/${to}/1`;
+  }
+
+  if (type === "post-category") {
+    return `/posts/categories/${to}/1`;
+  }
+
+  return `/${type}/${to}`;
+}

package/src/component-logic/modal.ts

@@ -0,0 +1,36 @@
+import { DATA_POPUP, DATA_POPUP_ROLE, PopupRole } from "../controller";
+import { HTMLElementsWithChildren, IMotionProps } from "./motion";
+
+export type ModalTriggerProps = IMotionProps & {
+  popupKey: string;
+  callToAction?: string;
+  as?: HTMLElementsWithChildren;
+};
+
+export function getModalDataAttrs(popupKey?: string) {
+  return {
+    [DATA_POPUP]: popupKey,
+    [DATA_POPUP_ROLE]: PopupRole.ModalContainer,
+  };
+}
+
+export function getModalCloserDataAttrs(popupKey?: string) {
+  return {
+    [DATA_POPUP]: popupKey,
+    [DATA_POPUP_ROLE]: PopupRole.ModalCloser,
+  };
+}
+
+export function getModalPanelDataAttrs(popupKey?: string) {
+  return {
+    [DATA_POPUP]: popupKey,
+    [DATA_POPUP_ROLE]: PopupRole.ModalPanel,
+  };
+}
+
+export function getModalTriggerDataAttrs(popupKey?: string) {
+  return {
+    [DATA_POPUP]: popupKey,
+    [DATA_POPUP_ROLE]: PopupRole.ModalTrigger,
+  };
+}

package/src/component-logic/motion.ts

@@ -0,0 +1,272 @@
+import {
+  normalizeAnimation,
+  DATA_MOTION,
+  DATA_MOTION_HOVER,
+  DATA_MOTION_INVIEW,
+  DATA_MOTION_TAP,
+  AnimationConfig,
+  AosAnimationConfig,
+  HoverAnimationConfig,
+  PopupAnimationConfig,
+  DATA_MOTION_POPUP,
+  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;
+  whilePopup?: PopupAnimationConfig | 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_POPUP]?: string;
+  [DATA_MOTION_SELECTION]?: string;
+  [DATA_MOTION_FLIP]?: string;
+}
+
+export function getMotionProps(props: IMotionProps): MotionAttributes {
+  const {
+    animate,
+    whileHover,
+    whileInView,
+    whileTap,
+    whilePopup,
+    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(whilePopup);
+  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_POPUP]: 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

@@ -0,0 +1,45 @@
+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,
+  };
+}

package/src/component-logic/popover.ts

@@ -0,0 +1,51 @@
+import { DATA_POPUP, DATA_POPUP_ROLE, PopupRole } from "../controller";
+import { AnimationConfig, PopupAnimationConfig } from "../motion";
+
+export const defaultPopoverPanelOpen: AnimationConfig = {
+  fromTo: {
+    from: {
+      height: 0,
+      opacity: 0,
+    },
+    to: {
+      height: "auto",
+      opacity: 1,
+    },
+  },
+  duration: 0.6,
+  ease: "spring",
+};
+
+export const defaultPopoverPanelClose: 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 defaultPopoverPanelAnimation: PopupAnimationConfig = {
+  open: defaultPopoverPanelOpen,
+  close: defaultPopoverPanelClose,
+};
+
+export function getPopoverDataAttrs(popupKey?: string) {
+  return {
+    [DATA_POPUP]: popupKey,
+    [DATA_POPUP_ROLE]: PopupRole.PopoverContainer,
+  };
+}
+
+export function getPopoverPanelDataAttrs(popupKey?: string) {
+  return {
+    [DATA_POPUP]: popupKey || "",
+    [DATA_POPUP_ROLE]: PopupRole.PopoverPanel,
+  };
+}

package/src/component-logic/tabs.ts

@@ -0,0 +1,10 @@
+export const DATA_TABS = "data-tabs";
+export const DATA_TABS_HEADER = "data-tabs-header";
+export const DATA_TABS_PANEL = "data-tabs-panel";
+export const DATA_TABS_TAB = "data-tabs-tab";
+export const DATA_TABS_BODY = "data-tabs-body";
+//当前选中的选项卡
+export const DATA_TABS_SELECTION = "data-tabs-selection";
+//选中动画,存动画数据
+export const DATA_MOTION_SELECTION = "data-motion-selection";
+export const DATA_MOTION_FLIP = "data-motion-flip";

package/src/controller/AnimateController.ts

@@ -0,0 +1,138 @@
+import { AnimationConfig, DATA_MOTION } from "../motion";
+import { applyAnimation } from "./applyAnimation";
+import { applyInitialState } from "./applyInitialState";
+
+export class AnimateController {
+  private static instance: Record<string, AnimateController> = {};
+  private animations: gsap.core.Tween[] = [];
+  private unmountHandlers: Array<() => void> = [];
+  private registeredElements: WeakSet<Element> = new WeakSet();
+
+  /**
+   * 私有构造函数，防止外部直接创建实例
+   * @param clientDoc - 可选的Document对象，在SSR环境中可能为undefined
+   */
+  private constructor(private clientDoc?: Document) {}
+
+  /**
+   * 获取单例实例
+   * @param key - 实例的唯一标识，默认为"default"
+   * @param clientDoc - 可选的Document对象
+   * @returns AnimateController 实例
+   */
+  public static getInstance(
+    key: string = "runtime",
+    clientDoc?: Document
+  ): AnimateController {
+    if (!AnimateController.instance[key]) {
+      // 在服务器端渲染时，document 不存在，传入 undefined
+      const doc =
+        clientDoc || (typeof document !== "undefined" ? document : undefined);
+      AnimateController.instance[key] = new AnimateController(doc);
+    }
+    // 这个代码很有必要，需要替换掉旧doc，因为react不确定刷新的问题
+    if (clientDoc) {
+      AnimateController.instance[key].destroy();
+      AnimateController.instance[key].setClientDoc(clientDoc);
+    }
+    return AnimateController.instance[key];
+  }
+
+  /**
+   * 销毁指定的实例
+   * @param key - 实例的唯一标识
+   */
+  public static destroyInstance(key: string = "runtime"): void {
+    if (AnimateController.instance[key]) {
+      AnimateController.instance[key].destroy();
+      delete AnimateController.instance[key];
+    }
+  }
+
+  /**
+   * 重置所有实例（主要用于测试）
+   */
+  public static resetAll(): void {
+    Object.keys(AnimateController.instance).forEach((key) => {
+      AnimateController.instance[key].destroy();
+    });
+    AnimateController.instance = {};
+  }
+
+  /**
+   * 设置客户端文档对象
+   * @param clientDoc - Document对象
+   */
+  public setClientDoc(clientDoc: Document): void {
+    this.clientDoc = clientDoc;
+  }
+
+  /**
+   * 挂载动画控制器，初始化所有动画
+   * @param clientDoc - 可选的Document对象，如果未提供则使用构造函数中的文档
+   */
+  public mount(clientDoc?: Document): void {
+    const doc = clientDoc || this.clientDoc;
+    if (!doc) return;
+
+    // 查找所有带有 data-motion 属性的元素
+    const elements = doc.querySelectorAll(`[${DATA_MOTION}]`);
+    // 初始化新的动画
+    elements.forEach((element) => {
+      // 检查元素是否已经被注册过
+      if (this.registeredElements.has(element)) {
+        return; // 如果已经注册过，则跳过
+      }
+
+      if (
+        doc.defaultView &&
+        element instanceof doc.defaultView.HTMLElement &&
+        element.dataset.motion
+      ) {
+        try {
+          const animation = JSON.parse(element.dataset.motion) as
+            | AnimationConfig
+            | undefined;
+          if (animation) {
+            if (animation.initial) {
+              applyInitialState(element, animation.initial);
+            }
+            // 执行动画
+            const tween = applyAnimation(element, animation);
+            if (tween) {
+              this.animations.push(tween);
+              // 将元素添加到已注册集合中
+              this.registeredElements.add(element);
+            }
+          }
+        } catch (error) {
+          console.error("解析动画配置失败", error);
+        }
+      }
+    });
+  }
+
+  /**
+   * 销毁动画控制器，清理所有动画和事件监听器
+   */
+  public destroy(): void {
+    // 停止所有动画
+    this.animations.forEach((tween) => {
+      tween.kill();
+    });
+    this.animations = [];
+
+    // 执行所有卸载处理函数
+    this.unmountHandlers.forEach((handler) => handler());
+    this.unmountHandlers = [];
+
+    // 创建新的 WeakSet 来清理已注册元素的跟踪
+    this.registeredElements = new WeakSet();
+  }
+}
+
+// 导出默认实例，方便直接使用
+export const animate = AnimateController.getInstance(
+  "runtime",
+  typeof document !== "undefined" ? document : undefined
+);