dune-react 0.0.5 → 0.0.6

package/dist/components/puck-base/core/with-editable.d.ts

@@ -3,6 +3,15 @@ interface EditableConfig {
     type: string;
     fields: Record<string, any>;
 }
+/**
+ * HOC: 让任意组件在编辑模式下可点击编辑
+ *
+ * 工作原理：
+ * 1. 通过 props 特征值深搜 appState.data，找到 componentId + propPath
+ * 2. 编辑模式下渲染原组件 + hover overlay
+ * 3. 点击打开 Dialog，传递 onSave 回调
+ * 4. 保存时用 dispatch 更新 Puck data
+ */
 export declare function withEditable<P extends Record<string, any>>(Component: ComponentType<P>, config: EditableConfig): (props: P & {
     onEdit?: (props: P, onSave: (updated: Partial<P>) => void) => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-base/core/with-editable.js

@@ -1,28 +1,60 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useCallback } from "react";
+import { useRef, useEffect, useMemo, useCallback } from "react";
+import { registerOverlayPortal } from "@puckeditor/core";
+import { usePuckDispatch, usePuckAppState } from "./hooks.js";
 import { Pencil } from "lucide-react";
 import { useEditorContext } from "../editor-context.js";
+import set from "../../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
 const BLOCK_LEVEL_TYPES = /* @__PURE__ */ new Set(["image"]);
 function withEditable(Component, config) {
   return function EditableComponent(props) {
     const { isEditor: isEditorMode } = useEditorContext();
+    const dispatch = usePuckDispatch();
+    const appState = usePuckAppState();
     const wrapperRef = useRef(null);
     const isBlock = BLOCK_LEVEL_TYPES.has(config.type);
+    useEffect(() => {
+      if (!isEditorMode || !wrapperRef.current) return;
+      return registerOverlayPortal(wrapperRef.current, { disableDrag: true });
+    }, [isEditorMode]);
+    const location = useMemo(() => {
+      if (!isEditorMode || !(appState == null ? void 0 : appState.data)) return null;
+      return findPropsLocation(appState.data, props, config.fields);
+    }, [isEditorMode, appState == null ? void 0 : appState.data, props]);
+    const handleSave = useCallback(
+      (updated) => {
+        if (!location) return;
+        dispatch({
+          type: "setData",
+          data: (prevData) => {
+            const newData = JSON.parse(JSON.stringify(prevData));
+            const { componentId, propPath } = location;
+            const component = findComponentById(newData, componentId);
+            if (!component) return prevData;
+            for (const [key, value] of Object.entries(updated)) {
+              const fullPath = propPath ? `${propPath}.${key}` : key;
+              set(component.props, fullPath, value);
+            }
+            return newData;
+          }
+        });
+      },
+      [location, dispatch]
+    );
     const handleEdit = useCallback(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
         if (props.onEdit) {
-          props.onEdit(props, () => {
-          });
+          props.onEdit(props, handleSave);
         }
       },
-      [props]
+      [props, handleSave]
     );
     if (!isEditorMode) {
       return /* @__PURE__ */ jsx(Component, { ...props });
     }
-    return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: isBlock ? "group relative h-full w-full" : "group relative inline-flex", children: [
+    return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: isBlock ? "group relative block h-full w-full" : "group relative inline-flex", children: [
       /* @__PURE__ */ jsx(Component, { ...props }),
       /* @__PURE__ */ jsx(
         "span",
@@ -35,6 +67,85 @@ function withEditable(Component, config) {
     ] });
   };
 }
+function findPropsLocation(data, targetProps, fields) {
+  if (!data) return null;
+  const content = Array.isArray(data.content) ? data.content : [];
+  for (const component of content) {
+    const result = searchInObject(component.props, targetProps, fields, component.props.id);
+    if (result) return result;
+  }
+  const zones = data.zones && typeof data.zones === "object" ? data.zones : {};
+  for (const zoneKey of Object.keys(zones)) {
+    const zoneComponents = Array.isArray(zones[zoneKey]) ? zones[zoneKey] : [];
+    for (const component of zoneComponents) {
+      const result = searchInObject(component.props, targetProps, fields, component.props.id);
+      if (result) return result;
+    }
+  }
+  return null;
+}
+function searchInObject(obj, targetProps, fields, componentId, currentPath = "") {
+  if (!obj || typeof obj !== "object") return null;
+  if (isMatchingProps(obj, targetProps, fields)) {
+    return { componentId, propPath: currentPath };
+  }
+  if (Array.isArray(obj)) {
+    for (let i = 0; i < obj.length; i++) {
+      const result = searchInObject(
+        obj[i],
+        targetProps,
+        fields,
+        componentId,
+        currentPath ? `${currentPath}[${i}]` : `[${i}]`
+      );
+      if (result) return result;
+    }
+    return null;
+  }
+  for (const key of Object.keys(obj)) {
+    const result = searchInObject(
+      obj[key],
+      targetProps,
+      fields,
+      componentId,
+      currentPath ? `${currentPath}.${key}` : key
+    );
+    if (result) return result;
+  }
+  return null;
+}
+function findComponentById(data, componentId) {
+  const content = Array.isArray(data == null ? void 0 : data.content) ? data.content : [];
+  const contentMatch = content.find((component) => {
+    var _a;
+    return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
+  });
+  if (contentMatch) return contentMatch;
+  const zones = (data == null ? void 0 : data.zones) && typeof data.zones === "object" ? data.zones : {};
+  for (const zoneKey of Object.keys(zones)) {
+    const zoneComponents = Array.isArray(zones[zoneKey]) ? zones[zoneKey] : [];
+    const zoneMatch = zoneComponents.find((component) => {
+      var _a;
+      return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
+    });
+    if (zoneMatch) return zoneMatch;
+  }
+  return null;
+}
+function isMatchingProps(candidate, target, fields) {
+  if (!candidate || typeof candidate !== "object") return false;
+  const fieldKeys = Object.keys(fields);
+  if (fieldKeys.length === 0) return false;
+  let matchCount = 0;
+  for (const key of fieldKeys) {
+    if (key in candidate && key in target) {
+      if (candidate[key] === target[key]) {
+        matchCount++;
+      }
+    }
+  }
+  return matchCount >= Math.min(2, fieldKeys.length);
+}
 export {
   withEditable
 };

package/dist/components/puck-base/editor-context.d.ts

@@ -4,6 +4,7 @@ type EditorContextValue = {
     openAddSection: (index: number, zone: string) => void;
     isEditor: boolean;
     toolbarPortalRef: RefObject<HTMLDivElement | null> | null;
+    fetchLibraryImages?: () => Promise<string[]>;
 };
 export declare const EditorContextProvider: import("react").Provider<EditorContextValue>;
 export declare const useEditorContext: () => EditorContextValue;

package/dist/components/puck-base/error-boundary.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ErrorBoundary as ErrorBoundary$1 } from "react-error-boundary";
+import { ErrorBoundary as m } from "../../node_modules/.pnpm/react-error-boundary@6.1.1_react@19.2.4/node_modules/react-error-boundary/dist/react-error-boundary.js";
 import { Button } from "../shadcn/button.js";
 function ErrorBoundary({ children }) {
-  return /* @__PURE__ */ jsx(ErrorBoundary$1, { FallbackComponent: Fallback, children });
+  return /* @__PURE__ */ jsx(m, { FallbackComponent: Fallback, children });
 }
 function Fallback({ error, resetErrorBoundary }) {
   const message = error instanceof Error ? error.message : String(error);

package/dist/components/puck-base/image.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useRef, useCallback } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import Cropper from "react-easy-crop";
-import { Pencil, Search, Upload, Check, Loader2 } from "lucide-react";
+import { Pencil, Search, Upload, Loader2, Check } from "lucide-react";
 import { cn } from "../../utils/css-utils.js";
 import { withEditable } from "./core/with-editable.js";
 import { image } from "./core/fields.js";
@@ -13,6 +13,7 @@ import { ScrollArea } from "../shadcn/scroll-area.js";
 import { Slider } from "../shadcn/slider.js";
 import { Tabs, TabsList, TabsTrigger } from "../shadcn/tabs.js";
 import useUpload from "./use-upload.js";
+import { useEditorContext } from "./editor-context.js";
 const createImage = (url) => new Promise((resolve, reject) => {
   const image2 = new Image();
   image2.addEventListener("load", () => resolve(image2));
@@ -44,15 +45,7 @@ const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
     canvas.toBlob((blob) => resolve(blob), "image/jpeg", 0.95);
   });
 };
-const LIBRARY_IMAGES = [
-  "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=300&fit=crop",
-  "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=400&h=300&fit=crop",
-  "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=400&h=300&fit=crop",
-  "https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=400&h=300&fit=crop",
-  "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=400&h=300&fit=crop",
-  "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=300&fit=crop",
-  "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=300&fit=crop"
-];
+const DEFAULT_LIBRARY_IMAGES = [];
 function CompoundImageBase(props) {
   return /* @__PURE__ */ jsx("img", { src: props.src, alt: props.alt, className: cn("block h-full w-full object-cover", props.className) });
 }
@@ -64,6 +57,17 @@ function ImageEditDialog({
 }) {
   const [tab, setTab] = useState("library");
   const [alt, setAlt] = useState(initialData.alt ?? "");
+  const [libraryImages, setLibraryImages] = useState(DEFAULT_LIBRARY_IMAGES);
+  const [isLoadingImages, setIsLoadingImages] = useState(false);
+  const { fetchLibraryImages } = useEditorContext();
+  useEffect(() => {
+    if (!open || !fetchLibraryImages) return;
+    setIsLoadingImages(true);
+    fetchLibraryImages().then((images) => {
+      if (images.length > 0) setLibraryImages(images);
+    }).catch(() => {
+    }).finally(() => setIsLoadingImages(false));
+  }, [open, fetchLibraryImages]);
   const [crop, setCrop] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
   const [rotation, setRotation] = useState(0);
@@ -159,7 +163,11 @@ function ImageEditDialog({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3 px-6 py-4", tab !== "library" && "hidden"), children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[280px]", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: LIBRARY_IMAGES.map((src) => {
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3 px-6 py-4", tab !== "library" && "hidden"), children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[280px]", children: isLoadingImages ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center py-20", children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) }) : libraryImages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center py-20 text-center", children: [
+          /* @__PURE__ */ jsx(Search, { className: "h-8 w-8 text-gray-300" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-gray-500", children: "No images available" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Try uploading an image instead" })
+        ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: libraryImages.map((src) => {
           const isSelected = selectedImg === src;
           return /* @__PURE__ */ jsxs(
             "button",

package/dist/node_modules/.pnpm/react-error-boundary@6.1.1_react@19.2.4/node_modules/react-error-boundary/dist/react-error-boundary.js

@@ -0,0 +1,70 @@
+import { Component, createElement, createContext } from "react";
+const h = createContext(null), c = {
+  didCatch: false,
+  error: null
+};
+class m extends Component {
+  constructor(e) {
+    super(e), this.resetErrorBoundary = this.resetErrorBoundary.bind(this), this.state = c;
+  }
+  static getDerivedStateFromError(e) {
+    return { didCatch: true, error: e };
+  }
+  resetErrorBoundary(...e) {
+    var _a, _b;
+    const { error: t } = this.state;
+    t !== null && ((_b = (_a = this.props).onReset) == null ? void 0 : _b.call(_a, {
+      args: e,
+      reason: "imperative-api"
+    }), this.setState(c));
+  }
+  componentDidCatch(e, t) {
+    var _a, _b;
+    (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, e, t);
+  }
+  componentDidUpdate(e, t) {
+    var _a, _b;
+    const { didCatch: o } = this.state, { resetKeys: s } = this.props;
+    o && t.error !== null && C(e.resetKeys, s) && ((_b = (_a = this.props).onReset) == null ? void 0 : _b.call(_a, {
+      next: s,
+      prev: e.resetKeys,
+      reason: "keys"
+    }), this.setState(c));
+  }
+  render() {
+    const { children: e, fallbackRender: t, FallbackComponent: o, fallback: s } = this.props, { didCatch: n, error: a } = this.state;
+    let i = e;
+    if (n) {
+      const u = {
+        error: a,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof t == "function")
+        i = t(u);
+      else if (o)
+        i = createElement(o, u);
+      else if (s !== void 0)
+        i = s;
+      else
+        throw a;
+    }
+    return createElement(
+      h.Provider,
+      {
+        value: {
+          didCatch: n,
+          error: a,
+          resetErrorBoundary: this.resetErrorBoundary
+        }
+      },
+      i
+    );
+  }
+}
+function C(r = [], e = []) {
+  return r.length !== e.length || r.some((t, o) => !Object.is(t, e[o]));
+}
+export {
+  m as ErrorBoundary,
+  h as ErrorBoundaryContext
+};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "dune-react",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "license": "MIT",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "gen:meta": "tsx scripts/generate-component-meta.ts",
+    "gen:meta": "node --import ./scripts/register-mocks.mjs --import tsx/esm scripts/generate-component-meta.ts",
     "build": "pnpm gen:meta && vite build && tsc --project tsconfig.build.json",
     "watch": "vite build --watch & tsc --project tsconfig.build.json --watch --preserveWatchOutput &",
     "build:sync": "pnpm build && cd /Volumes/code/magent && pnpm sync:dune",
@@ -13,7 +13,7 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 8080",
     "preview-storybook": "npx http-server storybook-static",
-    "build-storybook": "storybook build",
+    "build-storybook": "storybook build && cp -r skills storybook-static/skills",
     "deploy-storybook": "storybook-to-ghpages -- --existing-output-dir=storybook-static",
     "ondeploy": "pnpm build-storybook && pnpm deploy-storybook"
   },
@@ -70,7 +70,6 @@
     "eslint-plugin-storybook": "^10.2.19",
     "motion": "12.23.12",
     "react-easy-crop": "5.5.6",
-    "react-error-boundary": "6.1.1",
     "sass": "^1.90.0",
     "sass-loader": "^16.0.5",
     "storybook": "^10.2.19",
@@ -143,7 +142,6 @@
     "react-day-picker": "^9.0.0",
     "react-dom": "^19.0.0",
     "react-easy-crop": "^5.0.0",
-    "react-error-boundary": "^4.0.0",
     "react-is": "^19.0.0",
     "react-remove-scroll": "^2.0.0",
     "react-resizable-panels": "^2.0.0",
@@ -404,6 +402,7 @@
     "strip-ansi": "^6"
   },
   "dependencies": {
+    "react-error-boundary": "6.1.1",
     "shadcn": "4.0.8"
   }
 }