dune-react 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/components/puck-base/action-field.js +1 -0
  2. package/dist/components/puck-base/button.js +1 -0
  3. package/dist/components/puck-base/core/with-editable.d.ts +9 -0
  4. package/dist/components/puck-base/core/with-editable.js +117 -5
  5. package/dist/components/puck-base/editor-context.d.ts +1 -0
  6. package/dist/components/puck-base/editor-context.js +1 -0
  7. package/dist/components/puck-base/error-boundary.js +3 -2
  8. package/dist/components/puck-base/image-upload-field.js +1 -0
  9. package/dist/components/puck-base/image.js +21 -12
  10. package/dist/components/puck-base/inline-editable.js +1 -0
  11. package/dist/components/puck-block/contact-sections/contact-us-1/contact-us.js +1 -0
  12. package/dist/components/puck-block/faq-sections/accordion-1/accordion.js +1 -0
  13. package/dist/components/puck-block/header-sections/header-1/header.js +1 -0
  14. package/dist/components/puck-block/hero-sections/hero-1/hero.js +1 -0
  15. package/dist/components/puck-block/testimonial-sections/customers-1/customers.js +1 -0
  16. package/dist/components/puck-block/testimonial-sections/testimonials-1/testimonials.js +1 -0
  17. package/dist/components/puck-block/text-sections/tab-section-1/tab-section.js +1 -0
  18. package/dist/components/shadcn/accordion.js +1 -0
  19. package/dist/components/shadcn/alert-dialog.js +1 -0
  20. package/dist/components/shadcn/animated-theme-toggler.js +1 -0
  21. package/dist/components/shadcn/avatar.js +1 -0
  22. package/dist/components/shadcn/button.js +1 -0
  23. package/dist/components/shadcn/calendar.js +1 -0
  24. package/dist/components/shadcn/carousel.js +1 -0
  25. package/dist/components/shadcn/chart.js +1 -0
  26. package/dist/components/shadcn/checkbox.js +1 -0
  27. package/dist/components/shadcn/collapsible.js +1 -0
  28. package/dist/components/shadcn/combobox.js +1 -0
  29. package/dist/components/shadcn/command.js +1 -0
  30. package/dist/components/shadcn/context-menu.js +1 -0
  31. package/dist/components/shadcn/dialog.js +1 -0
  32. package/dist/components/shadcn/drawer.js +1 -0
  33. package/dist/components/shadcn/dropdown-menu.js +1 -0
  34. package/dist/components/shadcn/field.js +1 -0
  35. package/dist/components/shadcn/form.js +1 -0
  36. package/dist/components/shadcn/hover-card.js +1 -0
  37. package/dist/components/shadcn/input-group.js +1 -0
  38. package/dist/components/shadcn/input-otp.js +1 -0
  39. package/dist/components/shadcn/label.js +1 -0
  40. package/dist/components/shadcn/layout-text-flip.js +1 -0
  41. package/dist/components/shadcn/menubar.js +1 -0
  42. package/dist/components/shadcn/popover.js +1 -0
  43. package/dist/components/shadcn/progress.js +1 -0
  44. package/dist/components/shadcn/radio-group.js +1 -0
  45. package/dist/components/shadcn/resizable-navbar.js +1 -0
  46. package/dist/components/shadcn/resizable.js +1 -0
  47. package/dist/components/shadcn/scroll-area.js +1 -0
  48. package/dist/components/shadcn/select.js +1 -0
  49. package/dist/components/shadcn/separator.js +1 -0
  50. package/dist/components/shadcn/sheet.js +1 -0
  51. package/dist/components/shadcn/sidebar.js +1 -0
  52. package/dist/components/shadcn/slider.js +1 -0
  53. package/dist/components/shadcn/sonner.js +1 -0
  54. package/dist/components/shadcn/switch.js +1 -0
  55. package/dist/components/shadcn/table.js +1 -0
  56. package/dist/components/shadcn/tabs.js +1 -0
  57. package/dist/components/shadcn/toggle-group.js +1 -0
  58. package/dist/components/shadcn/toggle.js +1 -0
  59. package/dist/components/shadcn/tooltip.js +1 -0
  60. package/dist/components/shadcn/tweet-card-client.js +1 -0
  61. package/dist/components/ui-block/cover/index.js +1 -0
  62. package/dist/components/ui-block/sparkles/index.js +1 -0
  63. package/dist/node_modules/.pnpm/lucide-react@0.540.0_react@19.2.4/node_modules/lucide-react/dist/esm/DynamicIcon.js +2 -0
  64. 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 +71 -0
  65. package/package.json +5 -5
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
3
  import { Input } from "../shadcn/input.js";
3
4
  import { Label } from "../shadcn/label.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
3
  import { useState, useCallback } from "react";
3
4
  import { Button, buttonVariants } from "../shadcn/button.js";
@@ -3,6 +3,15 @@ interface EditableConfig {
3
3
  type: string;
4
4
  fields: Record<string, any>;
5
5
  }
6
+ /**
7
+ * HOC: 让任意组件在编辑模式下可点击编辑
8
+ *
9
+ * 工作原理:
10
+ * 1. 通过 props 特征值深搜 appState.data,找到 componentId + propPath
11
+ * 2. 编辑模式下渲染原组件 + hover overlay
12
+ * 3. 点击打开 Dialog,传递 onSave 回调
13
+ * 4. 保存时用 dispatch 更新 Puck data
14
+ */
6
15
  export declare function withEditable<P extends Record<string, any>>(Component: ComponentType<P>, config: EditableConfig): (props: P & {
7
16
  onEdit?: (props: P, onSave: (updated: Partial<P>) => void) => void;
8
17
  }) => import("react/jsx-runtime").JSX.Element;
@@ -1,28 +1,61 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useRef, useCallback } from "react";
3
+ import { useRef, useEffect, useMemo, useCallback } from "react";
4
+ import { registerOverlayPortal } from "@puckeditor/core";
5
+ import { usePuckDispatch, usePuckAppState } from "./hooks.js";
3
6
  import { Pencil } from "lucide-react";
4
7
  import { useEditorContext } from "../editor-context.js";
8
+ import set from "../../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
5
9
  const BLOCK_LEVEL_TYPES = /* @__PURE__ */ new Set(["image"]);
6
10
  function withEditable(Component, config) {
7
11
  return function EditableComponent(props) {
8
12
  const { isEditor: isEditorMode } = useEditorContext();
13
+ const dispatch = usePuckDispatch();
14
+ const appState = usePuckAppState();
9
15
  const wrapperRef = useRef(null);
10
16
  const isBlock = BLOCK_LEVEL_TYPES.has(config.type);
17
+ useEffect(() => {
18
+ if (!isEditorMode || !wrapperRef.current) return;
19
+ return registerOverlayPortal(wrapperRef.current, { disableDrag: true });
20
+ }, [isEditorMode]);
21
+ const location = useMemo(() => {
22
+ if (!isEditorMode || !(appState == null ? void 0 : appState.data)) return null;
23
+ return findPropsLocation(appState.data, props, config.fields);
24
+ }, [isEditorMode, appState == null ? void 0 : appState.data, props]);
25
+ const handleSave = useCallback(
26
+ (updated) => {
27
+ if (!location) return;
28
+ dispatch({
29
+ type: "setData",
30
+ data: (prevData) => {
31
+ const newData = JSON.parse(JSON.stringify(prevData));
32
+ const { componentId, propPath } = location;
33
+ const component = findComponentById(newData, componentId);
34
+ if (!component) return prevData;
35
+ for (const [key, value] of Object.entries(updated)) {
36
+ const fullPath = propPath ? `${propPath}.${key}` : key;
37
+ set(component.props, fullPath, value);
38
+ }
39
+ return newData;
40
+ }
41
+ });
42
+ },
43
+ [location, dispatch]
44
+ );
11
45
  const handleEdit = useCallback(
12
46
  (e) => {
13
47
  e.preventDefault();
14
48
  e.stopPropagation();
15
49
  if (props.onEdit) {
16
- props.onEdit(props, () => {
17
- });
50
+ props.onEdit(props, handleSave);
18
51
  }
19
52
  },
20
- [props]
53
+ [props, handleSave]
21
54
  );
22
55
  if (!isEditorMode) {
23
56
  return /* @__PURE__ */ jsx(Component, { ...props });
24
57
  }
25
- return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: isBlock ? "group relative h-full w-full" : "group relative inline-flex", children: [
58
+ return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: isBlock ? "group relative block h-full w-full" : "group relative inline-flex", children: [
26
59
  /* @__PURE__ */ jsx(Component, { ...props }),
27
60
  /* @__PURE__ */ jsx(
28
61
  "span",
@@ -35,6 +68,85 @@ function withEditable(Component, config) {
35
68
  ] });
36
69
  };
37
70
  }
71
+ function findPropsLocation(data, targetProps, fields) {
72
+ if (!data) return null;
73
+ const content = Array.isArray(data.content) ? data.content : [];
74
+ for (const component of content) {
75
+ const result = searchInObject(component.props, targetProps, fields, component.props.id);
76
+ if (result) return result;
77
+ }
78
+ const zones = data.zones && typeof data.zones === "object" ? data.zones : {};
79
+ for (const zoneKey of Object.keys(zones)) {
80
+ const zoneComponents = Array.isArray(zones[zoneKey]) ? zones[zoneKey] : [];
81
+ for (const component of zoneComponents) {
82
+ const result = searchInObject(component.props, targetProps, fields, component.props.id);
83
+ if (result) return result;
84
+ }
85
+ }
86
+ return null;
87
+ }
88
+ function searchInObject(obj, targetProps, fields, componentId, currentPath = "") {
89
+ if (!obj || typeof obj !== "object") return null;
90
+ if (isMatchingProps(obj, targetProps, fields)) {
91
+ return { componentId, propPath: currentPath };
92
+ }
93
+ if (Array.isArray(obj)) {
94
+ for (let i = 0; i < obj.length; i++) {
95
+ const result = searchInObject(
96
+ obj[i],
97
+ targetProps,
98
+ fields,
99
+ componentId,
100
+ currentPath ? `${currentPath}[${i}]` : `[${i}]`
101
+ );
102
+ if (result) return result;
103
+ }
104
+ return null;
105
+ }
106
+ for (const key of Object.keys(obj)) {
107
+ const result = searchInObject(
108
+ obj[key],
109
+ targetProps,
110
+ fields,
111
+ componentId,
112
+ currentPath ? `${currentPath}.${key}` : key
113
+ );
114
+ if (result) return result;
115
+ }
116
+ return null;
117
+ }
118
+ function findComponentById(data, componentId) {
119
+ const content = Array.isArray(data == null ? void 0 : data.content) ? data.content : [];
120
+ const contentMatch = content.find((component) => {
121
+ var _a;
122
+ return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
123
+ });
124
+ if (contentMatch) return contentMatch;
125
+ const zones = (data == null ? void 0 : data.zones) && typeof data.zones === "object" ? data.zones : {};
126
+ for (const zoneKey of Object.keys(zones)) {
127
+ const zoneComponents = Array.isArray(zones[zoneKey]) ? zones[zoneKey] : [];
128
+ const zoneMatch = zoneComponents.find((component) => {
129
+ var _a;
130
+ return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
131
+ });
132
+ if (zoneMatch) return zoneMatch;
133
+ }
134
+ return null;
135
+ }
136
+ function isMatchingProps(candidate, target, fields) {
137
+ if (!candidate || typeof candidate !== "object") return false;
138
+ const fieldKeys = Object.keys(fields);
139
+ if (fieldKeys.length === 0) return false;
140
+ let matchCount = 0;
141
+ for (const key of fieldKeys) {
142
+ if (key in candidate && key in target) {
143
+ if (candidate[key] === target[key]) {
144
+ matchCount++;
145
+ }
146
+ }
147
+ }
148
+ return matchCount >= Math.min(2, fieldKeys.length);
149
+ }
38
150
  export {
39
151
  withEditable
40
152
  };
@@ -4,6 +4,7 @@ type EditorContextValue = {
4
4
  openAddSection: (index: number, zone: string) => void;
5
5
  isEditor: boolean;
6
6
  toolbarPortalRef: RefObject<HTMLDivElement | null> | null;
7
+ fetchLibraryImages?: () => Promise<string[]>;
7
8
  };
8
9
  export declare const EditorContextProvider: import("react").Provider<EditorContextValue>;
9
10
  export declare const useEditorContext: () => EditorContextValue;
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { createContext, useContext } from "react";
2
3
  const EditorContext = createContext({
3
4
  openFieldsPanel: () => {
@@ -1,8 +1,9 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { ErrorBoundary as ErrorBoundary$1 } from "react-error-boundary";
3
+ 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";
3
4
  import { Button } from "../shadcn/button.js";
4
5
  function ErrorBoundary({ children }) {
5
- return /* @__PURE__ */ jsx(ErrorBoundary$1, { FallbackComponent: Fallback, children });
6
+ return /* @__PURE__ */ jsx(m, { FallbackComponent: Fallback, children });
6
7
  }
7
8
  function Fallback({ error, resetErrorBoundary }) {
8
9
  const message = error instanceof Error ? error.message : String(error);
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx } from "react/jsx-runtime";
2
3
  import { useState, useCallback } from "react";
3
4
  import { X, Loader2, UploadCloud, ImageIcon } from "lucide-react";
@@ -1,7 +1,8 @@
1
+ "use client";
1
2
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
- import { useState, useRef, useCallback } from "react";
3
+ import { useState, useEffect, useRef, useCallback } from "react";
3
4
  import Cropper from "react-easy-crop";
4
- import { Pencil, Search, Upload, Check, Loader2 } from "lucide-react";
5
+ import { Pencil, Search, Upload, Loader2, Check } from "lucide-react";
5
6
  import { cn } from "../../utils/css-utils.js";
6
7
  import { withEditable } from "./core/with-editable.js";
7
8
  import { image } from "./core/fields.js";
@@ -13,6 +14,7 @@ import { ScrollArea } from "../shadcn/scroll-area.js";
13
14
  import { Slider } from "../shadcn/slider.js";
14
15
  import { Tabs, TabsList, TabsTrigger } from "../shadcn/tabs.js";
15
16
  import useUpload from "./use-upload.js";
17
+ import { useEditorContext } from "./editor-context.js";
16
18
  const createImage = (url) => new Promise((resolve, reject) => {
17
19
  const image2 = new Image();
18
20
  image2.addEventListener("load", () => resolve(image2));
@@ -44,15 +46,7 @@ const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
44
46
  canvas.toBlob((blob) => resolve(blob), "image/jpeg", 0.95);
45
47
  });
46
48
  };
47
- const LIBRARY_IMAGES = [
48
- "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=300&fit=crop",
49
- "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=400&h=300&fit=crop",
50
- "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=400&h=300&fit=crop",
51
- "https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=400&h=300&fit=crop",
52
- "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=400&h=300&fit=crop",
53
- "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=300&fit=crop",
54
- "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=300&fit=crop"
55
- ];
49
+ const DEFAULT_LIBRARY_IMAGES = [];
56
50
  function CompoundImageBase(props) {
57
51
  return /* @__PURE__ */ jsx("img", { src: props.src, alt: props.alt, className: cn("block h-full w-full object-cover", props.className) });
58
52
  }
@@ -64,6 +58,17 @@ function ImageEditDialog({
64
58
  }) {
65
59
  const [tab, setTab] = useState("library");
66
60
  const [alt, setAlt] = useState(initialData.alt ?? "");
61
+ const [libraryImages, setLibraryImages] = useState(DEFAULT_LIBRARY_IMAGES);
62
+ const [isLoadingImages, setIsLoadingImages] = useState(false);
63
+ const { fetchLibraryImages } = useEditorContext();
64
+ useEffect(() => {
65
+ if (!open || !fetchLibraryImages) return;
66
+ setIsLoadingImages(true);
67
+ fetchLibraryImages().then((images) => {
68
+ if (images.length > 0) setLibraryImages(images);
69
+ }).catch(() => {
70
+ }).finally(() => setIsLoadingImages(false));
71
+ }, [open, fetchLibraryImages]);
67
72
  const [crop, setCrop] = useState({ x: 0, y: 0 });
68
73
  const [zoom, setZoom] = useState(1);
69
74
  const [rotation, setRotation] = useState(0);
@@ -159,7 +164,11 @@ function ImageEditDialog({
159
164
  ] })
160
165
  ] })
161
166
  ] }),
162
- /* @__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) => {
167
+ /* @__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: [
168
+ /* @__PURE__ */ jsx(Search, { className: "h-8 w-8 text-gray-300" }),
169
+ /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-gray-500", children: "No images available" }),
170
+ /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Try uploading an image instead" })
171
+ ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: libraryImages.map((src) => {
163
172
  const isSelected = selectedImg === src;
164
173
  return /* @__PURE__ */ jsxs(
165
174
  "button",
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { createElement, useRef, useEffect, useCallback } from "react";
3
4
  import { registerOverlayPortal } from "@puckeditor/core";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { useState } from "react";
3
4
  import { toast } from "sonner";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx } from "react/jsx-runtime";
2
3
  import { useState } from "react";
3
4
  import { cn } from "../../../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
3
  import { useState, Fragment as Fragment$1 } from "react";
3
4
  import { cn } from "../../../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
3
  import { useMemo, useState, useEffect } from "react";
3
4
  import { cn } from "../../../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { useState, useEffect } from "react";
3
4
  import { cn } from "../../../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
3
  import { useState, useEffect } from "react";
3
4
  import { Carousel, CarouselContent, CarouselItem } from "../../../shadcn/carousel.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
3
  import { useState } from "react";
3
4
  import { cn } from "../../../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  function AnimatedThemeToggler({ className, ...props }) {
3
4
  return /* @__PURE__ */ jsx("button", { className, ...props });
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
3
  import { Button as Button$1 } from "@base-ui/react/button";
3
4
  import { cva } from "class-variance-authority";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
4
  import { getDefaultClassNames, DayPicker } from "react-day-picker";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
4
  import useEmblaCarousel from "embla-carousel-react";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
4
  import * as RechartsPrimitive from "recharts";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
3
4
  function Collapsible({
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
4
  import { Combobox as Combobox$1 } from "@base-ui/react";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { Command as Command$1 } from "cmdk";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { Drawer as Drawer$1 } from "vaul";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { Menu } from "@base-ui/react/menu";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { useMemo } from "react";
3
4
  import { cva } from "class-variance-authority";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
4
  const FormFieldContext = React.createContext(
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { PreviewCard } from "@base-ui/react/preview-card";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { cva } from "class-variance-authority";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
4
  import { OTPInput, OTPInputContext } from "input-otp";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { cn } from "../../utils/css-utils.js";
3
4
  function Label({ className, ...props }) {
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { cn } from "../../utils/css-utils.js";
3
4
  function LayoutTextFlip({
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { Menu } from "@base-ui/react/menu";
3
4
  import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { Popover as Popover$1 } from "@base-ui/react/popover";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx } from "react/jsx-runtime";
2
3
  import { Progress as Progress$1 } from "@base-ui/react/progress";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { Radio } from "@base-ui/react/radio";
3
4
  import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { cn } from "../../utils/css-utils.js";
3
4
  import { X, Menu } from "lucide-react";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { PanelResizeHandle, Panel, PanelGroup } from "react-resizable-panels";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx } from "react/jsx-runtime";
2
3
  import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { Select as Select$1 } from "@base-ui/react/select";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { Separator as Separator$1 } from "@base-ui/react/separator";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { Dialog } from "@base-ui/react/dialog";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
4
  import { mergeProps } from "@base-ui/react/merge-props";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
4
  import { Slider as Slider$1 } from "@base-ui/react/slider";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { useTheme } from "next-themes";
3
4
  import { Toaster as Toaster$1 } from "sonner";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { Switch as Switch$1 } from "@base-ui/react/switch";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { cn } from "../../utils/css-utils.js";
3
4
  function Table({ className, ...props }) {
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
3
4
  import { cva } from "class-variance-authority";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
4
  import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
3
4
  import { cva } from "class-variance-authority";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
3
4
  import { cn } from "../../utils/css-utils.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  function TweetCardClient({ children, ...props }) {
3
4
  return /* @__PURE__ */ jsx("div", { ...props, children });
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx } from "react/jsx-runtime";
2
3
  import { cn } from "../../../utils/css-utils.js";
3
4
  import { useState, useRef, useEffect, useId } from "react";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { cn } from "../../../utils/css-utils.js";
3
4
  import Particles, { initParticlesEngine } from "@tsparticles/react";
@@ -1,3 +1,5 @@
1
+ "use strict";
2
+ "use client";
1
3
  import { forwardRef, useState, useEffect, createElement } from "react";
2
4
  import dynamicIconImports from "./dynamicIconImports.js";
3
5
  import Icon from "./Icon.js";
@@ -0,0 +1,71 @@
1
+ "use client";
2
+ import { Component, createElement, createContext } from "react";
3
+ const h = createContext(null), c = {
4
+ didCatch: false,
5
+ error: null
6
+ };
7
+ class m extends Component {
8
+ constructor(e) {
9
+ super(e), this.resetErrorBoundary = this.resetErrorBoundary.bind(this), this.state = c;
10
+ }
11
+ static getDerivedStateFromError(e) {
12
+ return { didCatch: true, error: e };
13
+ }
14
+ resetErrorBoundary(...e) {
15
+ var _a, _b;
16
+ const { error: t } = this.state;
17
+ t !== null && ((_b = (_a = this.props).onReset) == null ? void 0 : _b.call(_a, {
18
+ args: e,
19
+ reason: "imperative-api"
20
+ }), this.setState(c));
21
+ }
22
+ componentDidCatch(e, t) {
23
+ var _a, _b;
24
+ (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, e, t);
25
+ }
26
+ componentDidUpdate(e, t) {
27
+ var _a, _b;
28
+ const { didCatch: o } = this.state, { resetKeys: s } = this.props;
29
+ o && t.error !== null && C(e.resetKeys, s) && ((_b = (_a = this.props).onReset) == null ? void 0 : _b.call(_a, {
30
+ next: s,
31
+ prev: e.resetKeys,
32
+ reason: "keys"
33
+ }), this.setState(c));
34
+ }
35
+ render() {
36
+ const { children: e, fallbackRender: t, FallbackComponent: o, fallback: s } = this.props, { didCatch: n, error: a } = this.state;
37
+ let i = e;
38
+ if (n) {
39
+ const u = {
40
+ error: a,
41
+ resetErrorBoundary: this.resetErrorBoundary
42
+ };
43
+ if (typeof t == "function")
44
+ i = t(u);
45
+ else if (o)
46
+ i = createElement(o, u);
47
+ else if (s !== void 0)
48
+ i = s;
49
+ else
50
+ throw a;
51
+ }
52
+ return createElement(
53
+ h.Provider,
54
+ {
55
+ value: {
56
+ didCatch: n,
57
+ error: a,
58
+ resetErrorBoundary: this.resetErrorBoundary
59
+ }
60
+ },
61
+ i
62
+ );
63
+ }
64
+ }
65
+ function C(r = [], e = []) {
66
+ return r.length !== e.length || r.some((t, o) => !Object.is(t, e[o]));
67
+ }
68
+ export {
69
+ m as ErrorBoundary,
70
+ h as ErrorBoundaryContext
71
+ };
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "dune-react",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "dev": "vite",
8
- "gen:meta": "tsx scripts/generate-component-meta.ts",
8
+ "gen:meta": "node --import ./scripts/register-mocks.mjs --import tsx/esm scripts/generate-component-meta.ts",
9
9
  "build": "pnpm gen:meta && vite build && tsc --project tsconfig.build.json",
10
10
  "watch": "vite build --watch & tsc --project tsconfig.build.json --watch --preserveWatchOutput &",
11
11
  "build:sync": "pnpm build && cd /Volumes/code/magent && pnpm sync:dune",
@@ -13,7 +13,7 @@
13
13
  "preview": "vite preview",
14
14
  "storybook": "storybook dev -p 8080",
15
15
  "preview-storybook": "npx http-server storybook-static",
16
- "build-storybook": "storybook build",
16
+ "build-storybook": "storybook build && cp -r skills storybook-static/skills",
17
17
  "deploy-storybook": "storybook-to-ghpages -- --existing-output-dir=storybook-static",
18
18
  "ondeploy": "pnpm build-storybook && pnpm deploy-storybook"
19
19
  },
@@ -70,7 +70,7 @@
70
70
  "eslint-plugin-storybook": "^10.2.19",
71
71
  "motion": "12.23.12",
72
72
  "react-easy-crop": "5.5.6",
73
- "react-error-boundary": "6.1.1",
73
+ "rollup-plugin-preserve-directives": "0.4.0",
74
74
  "sass": "^1.90.0",
75
75
  "sass-loader": "^16.0.5",
76
76
  "storybook": "^10.2.19",
@@ -143,7 +143,6 @@
143
143
  "react-day-picker": "^9.0.0",
144
144
  "react-dom": "^19.0.0",
145
145
  "react-easy-crop": "^5.0.0",
146
- "react-error-boundary": "^4.0.0",
147
146
  "react-is": "^19.0.0",
148
147
  "react-remove-scroll": "^2.0.0",
149
148
  "react-resizable-panels": "^2.0.0",
@@ -404,6 +403,7 @@
404
403
  "strip-ansi": "^6"
405
404
  },
406
405
  "dependencies": {
406
+ "react-error-boundary": "6.1.1",
407
407
  "shadcn": "4.0.8"
408
408
  }
409
409
  }