@delmaredigital/payload-puck 0.2.0 → 0.3.0

package/dist/AnimatedWrapper.mjs

@@ -1,377 +0,0 @@
-"use client";
-import { useRef, useState, useCallback, useEffect } from 'react';
-import { jsx, Fragment } from 'react/jsx-runtime';
-
-function useScrollAnimation(options = {}) {
-  const {
-    triggerOnScroll = true,
-    threshold = 0.1,
-    once = true,
-    rootMargin = "0px",
-    delay = 0
-  } = options;
-  const ref = useRef(null);
-  const [isInView, setIsInView] = useState(false);
-  const [hasAnimated, setHasAnimated] = useState(false);
-  const timeoutRef = useRef(null);
-  const hasMountedRef = useRef(false);
-  const reset = useCallback(() => {
-    setIsInView(false);
-    setHasAnimated(false);
-    hasMountedRef.current = false;
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }, []);
-  useEffect(() => {
-    if (!triggerOnScroll) {
-      if (hasMountedRef.current) return;
-      hasMountedRef.current = true;
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          if (delay > 0) {
-            timeoutRef.current = setTimeout(() => {
-              setIsInView(true);
-              setHasAnimated(true);
-            }, delay);
-          } else {
-            setIsInView(true);
-            setHasAnimated(true);
-          }
-        });
-      });
-      return;
-    }
-    if (once && hasAnimated) {
-      return;
-    }
-    const element = ref.current;
-    if (!element) return;
-    if (typeof IntersectionObserver === "undefined") {
-      setIsInView(true);
-      setHasAnimated(true);
-      return;
-    }
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const [entry] = entries;
-        const inView = entry.isIntersecting;
-        if (inView) {
-          if (delay > 0) {
-            timeoutRef.current = setTimeout(() => {
-              setIsInView(true);
-              setHasAnimated(true);
-            }, delay);
-          } else {
-            setIsInView(true);
-            setHasAnimated(true);
-          }
-          if (once) {
-            observer.disconnect();
-          }
-        } else if (!once) {
-          if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
-          }
-          setIsInView(false);
-        }
-      },
-      {
-        threshold,
-        rootMargin
-      }
-    );
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-    };
-  }, [triggerOnScroll, threshold, once, rootMargin, delay, hasAnimated]);
-  return {
-    ref,
-    isInView,
-    hasAnimated,
-    reset
-  };
-}
-
-// src/fields/shared.ts
-var EASING_CSS_MAP = {
-  linear: "linear",
-  ease: "ease",
-  "ease-in": "ease-in",
-  "ease-out": "ease-out",
-  "ease-in-out": "ease-in-out",
-  spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-  "spring-gentle": "cubic-bezier(0.34, 1.56, 0.64, 1)",
-  bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
-  "bounce-in": "cubic-bezier(0.6, -0.28, 0.735, 0.045)",
-  "bounce-out": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-  "back-in": "cubic-bezier(0.6, -0.28, 0.735, 0.045)",
-  "back-out": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-  "back-in-out": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
-  elastic: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
-};
-function animationOriginToCSS(origin) {
-  if (!origin) return "center";
-  const originMap = {
-    center: "center",
-    top: "top",
-    bottom: "bottom",
-    left: "left",
-    right: "right",
-    "top-left": "top left",
-    "top-right": "top right",
-    "bottom-left": "bottom left",
-    "bottom-right": "bottom right"
-  };
-  return originMap[origin] || "center";
-}
-function animationValueToCSS(anim) {
-  if (!anim || anim.mode !== "custom") return void 0;
-  const duration = anim.duration ?? 300;
-  const delay = anim.delay ?? 0;
-  const easing = anim.easing ?? "ease";
-  const easingCSS = EASING_CSS_MAP[easing] || "ease";
-  return {
-    transition: `all ${duration}ms ${easingCSS} ${delay}ms`,
-    transitionProperty: "opacity, transform, filter, background-color, color, border-color, box-shadow"
-  };
-}
-function getEntranceAnimationStyles(anim) {
-  const defaultResult = {
-    initial: {},
-    animate: {},
-    duration: 500,
-    delay: 0,
-    easing: "ease",
-    origin: "center"
-  };
-  if (!anim || anim.mode !== "preset" || anim.entrance === "none") {
-    return defaultResult;
-  }
-  const duration = anim.entranceDuration ?? 500;
-  const delay = anim.entranceDelay ?? 0;
-  const easing = EASING_CSS_MAP[anim.easing ?? "ease"] || "ease";
-  const origin = animationOriginToCSS(anim.origin);
-  const distance = anim.distance ?? 24;
-  const scaleFrom = anim.scaleFrom ?? 0.9;
-  const rotateAngle = anim.rotateAngle ?? 15;
-  const blurAmount = anim.blurAmount ?? 8;
-  const entrance = anim.entrance ?? "none";
-  let initial = {};
-  let animate = {};
-  switch (entrance) {
-    // ==================== FADE (6) ====================
-    case "fade-in":
-      initial = { opacity: 0 };
-      animate = { opacity: 1 };
-      break;
-    case "fade-up":
-      initial = { opacity: 0, transform: `translateY(${distance}px)` };
-      animate = { opacity: 1, transform: "translateY(0)" };
-      break;
-    case "fade-down":
-      initial = { opacity: 0, transform: `translateY(-${distance}px)` };
-      animate = { opacity: 1, transform: "translateY(0)" };
-      break;
-    case "fade-left":
-      initial = { opacity: 0, transform: `translateX(${distance}px)` };
-      animate = { opacity: 1, transform: "translateX(0)" };
-      break;
-    case "fade-right":
-      initial = { opacity: 0, transform: `translateX(-${distance}px)` };
-      animate = { opacity: 1, transform: "translateX(0)" };
-      break;
-    case "fade-scale":
-      initial = { opacity: 0, transform: `scale(${scaleFrom})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-    // ==================== SCALE (4) ====================
-    case "scale-in":
-      initial = { opacity: 0, transform: `scale(${scaleFrom})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-    case "scale-up":
-      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(${distance}px)` };
-      animate = { opacity: 1, transform: "scale(1) translateY(0)" };
-      break;
-    case "scale-down":
-      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(-${distance}px)` };
-      animate = { opacity: 1, transform: "scale(1) translateY(0)" };
-      break;
-    case "scale-out":
-      initial = { opacity: 0, transform: `scale(${2 - scaleFrom})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-    // ==================== SLIDE (4) ====================
-    case "slide-up":
-      initial = { transform: `translateY(${distance}px)` };
-      animate = { transform: "translateY(0)" };
-      break;
-    case "slide-down":
-      initial = { transform: `translateY(-${distance}px)` };
-      animate = { transform: "translateY(0)" };
-      break;
-    case "slide-left":
-      initial = { transform: `translateX(${distance}px)` };
-      animate = { transform: "translateX(0)" };
-      break;
-    case "slide-right":
-      initial = { transform: `translateX(-${distance}px)` };
-      animate = { transform: "translateX(0)" };
-      break;
-    // ==================== BLUR (3) ====================
-    case "blur-in":
-      initial = { opacity: 0, filter: `blur(${blurAmount}px)` };
-      animate = { opacity: 1, filter: "blur(0)" };
-      break;
-    case "blur-up":
-      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(${distance}px)` };
-      animate = { opacity: 1, filter: "blur(0)", transform: "translateY(0)" };
-      break;
-    case "blur-down":
-      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(-${distance}px)` };
-      animate = { opacity: 1, filter: "blur(0)", transform: "translateY(0)" };
-      break;
-    // ==================== ROTATE (3) ====================
-    case "rotate-in":
-      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) scale(${scaleFrom})` };
-      animate = { opacity: 1, transform: "rotate(0) scale(1)" };
-      break;
-    case "rotate-up":
-      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) translateY(${distance}px)` };
-      animate = { opacity: 1, transform: "rotate(0) translateY(0)" };
-      break;
-    case "rotate-down":
-      initial = { opacity: 0, transform: `rotate(-${rotateAngle}deg) translateY(-${distance}px)` };
-      animate = { opacity: 1, transform: "rotate(0) translateY(0)" };
-      break;
-    // ==================== BOUNCE (3) ====================
-    // These use spring/bounce easing by default for the effect
-    case "bounce-in":
-      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.8})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-    case "bounce-up":
-      initial = { opacity: 0, transform: `translateY(${distance * 1.5}px)` };
-      animate = { opacity: 1, transform: "translateY(0)" };
-      break;
-    case "bounce-down":
-      initial = { opacity: 0, transform: `translateY(-${distance * 1.5}px)` };
-      animate = { opacity: 1, transform: "translateY(0)" };
-      break;
-    // ==================== FLIP (2) ====================
-    // Flip uses perspective in transform for proper 3D effect
-    // Starts from -90deg (tilted back) so the flip motion is visible
-    case "flip-x":
-      initial = {
-        transform: "perspective(1000px) rotateX(-90deg)",
-        opacity: 0.2,
-        backfaceVisibility: "hidden"
-      };
-      animate = {
-        transform: "perspective(1000px) rotateX(0deg)",
-        opacity: 1,
-        backfaceVisibility: "hidden"
-      };
-      break;
-    case "flip-y":
-      initial = {
-        transform: "perspective(1000px) rotateY(-90deg)",
-        opacity: 0.2,
-        backfaceVisibility: "hidden"
-      };
-      animate = {
-        transform: "perspective(1000px) rotateY(0deg)",
-        opacity: 1,
-        backfaceVisibility: "hidden"
-      };
-      break;
-    // ==================== ZOOM (2) ====================
-    case "zoom-in":
-      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.5})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-    case "zoom-out":
-      initial = { opacity: 0, transform: `scale(${2.5 - scaleFrom})` };
-      animate = { opacity: 1, transform: "scale(1)" };
-      break;
-  }
-  return {
-    initial,
-    animate,
-    duration,
-    delay,
-    easing,
-    origin
-  };
-}
-function AnimatedWrapper({
-  animation,
-  children,
-  className,
-  style,
-  as: Component = "div"
-}) {
-  const hasAnimation = animation && (animation.mode === "preset" && animation.entrance && animation.entrance !== "none" || animation.mode === "custom");
-  if (!hasAnimation) {
-    if (className || style) {
-      return /* @__PURE__ */ jsx(Component, { className, style, children });
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  const { ref, isInView } = useScrollAnimation({
-    triggerOnScroll: animation.triggerOnScroll ?? true,
-    threshold: animation.triggerThreshold ?? 0.1,
-    once: animation.triggerOnce ?? true,
-    rootMargin: animation.triggerMargin
-  });
-  if (animation.mode === "preset") {
-    const { initial, animate, duration, delay, easing, origin } = getEntranceAnimationStyles(animation);
-    const animationStyles = isInView ? animate : initial;
-    const transitionProperties = [
-      `opacity ${duration}ms ${easing} ${delay}ms`,
-      `transform ${duration}ms ${easing} ${delay}ms`,
-      `filter ${duration}ms ${easing} ${delay}ms`
-    ].join(", ");
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        className,
-        style: {
-          ...style,
-          ...animationStyles,
-          transition: transitionProperties,
-          transformOrigin: origin
-        },
-        children
-      }
-    );
-  }
-  const customStyles = animationValueToCSS(animation);
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ref,
-      className,
-      style: {
-        ...style,
-        ...customStyles,
-        // Apply opacity for visibility-based transitions
-        opacity: isInView ? 1 : 0
-      },
-      children
-    }
-  );
-}
-
-export { AnimatedWrapper };
-//# sourceMappingURL=AnimatedWrapper.mjs.map
-//# sourceMappingURL=AnimatedWrapper.mjs.map

package/dist/admin/client.d.mts

@@ -1,108 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { UIFieldClientComponent, DefaultCellComponentProps } from 'payload';
-
-/**
- * Props for EditWithPuckButton when used standalone
- */
-interface EditWithPuckButtonProps {
-    /**
-     * Document ID to edit
-     */
-    id?: string;
-    /**
-     * Collection slug
-     * @default 'pages'
-     */
-    collectionSlug?: string;
-    /**
-     * Custom path pattern for the Puck editor
-     * Use {id} as placeholder for the document ID
-     * @default '/pages/{id}/edit'
-     */
-    editorPathPattern?: string;
-    /**
-     * Button label
-     * @default 'Edit with Puck'
-     */
-    label?: string;
-    /**
-     * Whether to show as icon only
-     * @default false
-     */
-    iconOnly?: boolean;
-}
-/**
- * Edit with Puck button for use in Payload admin document edit views
- *
- * Links to a Puck editor page outside of Payload admin. Configure the
- * `editorPathPattern` to match your editor route.
- *
- * @example
- * ```tsx
- * // In your Payload collection config:
- * {
- *   name: 'puckEdit',
- *   type: 'ui',
- *   admin: {
- *     position: 'sidebar',
- *     components: {
- *       Field: '@delmaredigital/payload-puck/admin/client#EditWithPuckButton',
- *     },
- *     custom: {
- *       editorPathPattern: '/pages/{id}/edit', // Your editor route
- *       label: 'Visual Editor',
- *     },
- *   },
- * }
- * ```
- */
-declare const EditWithPuckButton: UIFieldClientComponent;
-/**
- * Standalone version of the button that doesn't rely on Payload context
- */
-declare function EditWithPuckLink({ id, editorPathPattern, label, iconOnly, }: EditWithPuckButtonProps & {
-    id: string;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * Props for configuring the EditWithPuckCell component
- */
-interface EditWithPuckCellConfig {
-    /**
-     * Collection slug for building the editor URL
-     * @default 'pages'
-     */
-    collectionSlug?: string;
-    /**
-     * Custom editor path pattern
-     * Use {id} as placeholder for the document ID
-     * @default '/admin/puck/{collectionSlug}/{id}/edit'
-     */
-    editorPathPattern?: string;
-}
-/**
- * Custom cell component that renders an "Edit with Puck" button in list views
- *
- * Add this to a UI field in your collection to show the visual editor button
- * in the list view table.
- *
- * @example
- * ```ts
- * // In your collection config:
- * {
- *   name: 'puckEdit',
- *   type: 'ui',
- *   admin: {
- *     components: {
- *       Cell: '@delmaredigital/payload-puck/admin#EditWithPuckCell',
- *     },
- *     custom: {
- *       collectionSlug: 'pages',
- *     },
- *   },
- * }
- * ```
- */
-declare const EditWithPuckCell: React.FC<DefaultCellComponentProps>;
-
-export { EditWithPuckButton, type EditWithPuckButtonProps, EditWithPuckCell, type EditWithPuckCellConfig, EditWithPuckLink };

package/dist/admin/client.mjs

@@ -1,173 +0,0 @@
-"use client";
-import { useDocumentInfo } from '@payloadcms/ui';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function PuckIcon({ size = 18 }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
-        /* @__PURE__ */ jsx("path", { d: "M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z" })
-      ]
-    }
-  );
-}
-var EditWithPuckButton = (props) => {
-  const { id } = useDocumentInfo();
-  const customProps = props?.field?.custom;
-  const label = customProps?.label || "Edit with Puck";
-  const iconOnly = customProps?.iconOnly || false;
-  const pattern = customProps?.editorPathPattern || "/pages/{id}/edit";
-  const editorPath = pattern.replace("{id}", String(id));
-  if (!id) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxs(
-    "a",
-    {
-      href: editorPath,
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: "8px",
-        padding: iconOnly ? "8px" : "10px 16px",
-        backgroundColor: "#2563eb",
-        color: "#fff",
-        borderRadius: "6px",
-        textDecoration: "none",
-        fontSize: "14px",
-        fontWeight: 500,
-        transition: "background-color 0.2s"
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = "#1d4ed8";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.backgroundColor = "#2563eb";
-      },
-      title: iconOnly ? label : void 0,
-      children: [
-        /* @__PURE__ */ jsx(PuckIcon, { size: iconOnly ? 20 : 18 }),
-        !iconOnly && label
-      ]
-    }
-  ) });
-};
-function EditWithPuckLink({
-  id,
-  editorPathPattern = "/pages/{id}/edit",
-  label = "Edit with Puck",
-  iconOnly = false
-}) {
-  const path = editorPathPattern.replace("{id}", id);
-  return /* @__PURE__ */ jsxs(
-    "a",
-    {
-      href: path,
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: "8px",
-        padding: iconOnly ? "8px" : "10px 16px",
-        backgroundColor: "#2563eb",
-        color: "#fff",
-        borderRadius: "6px",
-        textDecoration: "none",
-        fontSize: "14px",
-        fontWeight: 500,
-        transition: "background-color 0.2s"
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = "#1d4ed8";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.backgroundColor = "#2563eb";
-      },
-      title: iconOnly ? label : void 0,
-      children: [
-        /* @__PURE__ */ jsx(PuckIcon, { size: iconOnly ? 20 : 18 }),
-        !iconOnly && label
-      ]
-    }
-  );
-}
-function PuckIcon2({ size = 16 }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
-        /* @__PURE__ */ jsx("path", { d: "M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z" })
-      ]
-    }
-  );
-}
-var EditWithPuckCell = ({
-  rowData,
-  field,
-  collectionSlug: contextCollectionSlug
-}) => {
-  const id = rowData?.id;
-  const customConfig = field?.custom;
-  const collectionSlug = customConfig?.collectionSlug || contextCollectionSlug || "pages";
-  if (!id) {
-    return null;
-  }
-  const editorPath = customConfig?.editorPathPattern ? customConfig.editorPathPattern.replace("{id}", id).replace("{collectionSlug}", collectionSlug) : `/admin/puck/${collectionSlug}/${id}/edit`;
-  return /* @__PURE__ */ jsxs(
-    "a",
-    {
-      href: editorPath,
-      onClick: (e) => e.stopPropagation(),
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "6px 10px",
-        backgroundColor: "#2563eb",
-        color: "#fff",
-        borderRadius: "4px",
-        textDecoration: "none",
-        fontSize: "12px",
-        fontWeight: 500,
-        gap: "4px",
-        transition: "background-color 0.2s",
-        whiteSpace: "nowrap"
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = "#1d4ed8";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.backgroundColor = "#2563eb";
-      },
-      title: "Edit with Puck Visual Editor",
-      children: [
-        /* @__PURE__ */ jsx(PuckIcon2, { size: 14 }),
-        /* @__PURE__ */ jsx("span", { children: "Visual Editor" })
-      ]
-    }
-  );
-};
-
-export { EditWithPuckButton, EditWithPuckCell, EditWithPuckLink };
-//# sourceMappingURL=client.mjs.map
-//# sourceMappingURL=client.mjs.map