@xwadex/fesd-next 0.3.4-7.20 → 0.3.4-7.22

package/dist/components/content-builders/content-builder-pucks-context.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, memo, use } from "react";
+import { useBuilderPucks } from "./content-builder-pucks-hooks";
+import { useBuilderContext } from "./content-builder-context";
+const BuilderPucksContext = createContext(null);
+export const BuilderPucksContextProviders = memo(({ children }) => {
+    const { builderProps } = useBuilderContext();
+    const BuilderRoots = useBuilderPucks({ config: builderProps.config });
+    return _jsx(BuilderPucksContext, { value: BuilderRoots, children: children });
+});
+export const useBuilderPucksContext = () => {
+    const context = use(BuilderPucksContext);
+    if (!context)
+        throw new Error("BuilderPucksContext must be used inside BuilderPucksContextProviders");
+    return context;
+};

package/dist/components/content-builders/content-builder-pucks-hooks.d.ts

@@ -0,0 +1,17 @@
+import { scrollToBlock } from "./content-builder-helpers";
+import type { Config, PuckApi } from "@puckeditor/core";
+type UsePuckHook<C extends Config = Config> = <T = PuckApi<C>>(selector: (state: PuckApi<C>) => T) => T;
+export declare const usePuck: UsePuckHook<Config>;
+export declare const getPuckSelectedItem: () => import("@puckeditor/core").ComponentData<any, string, import("@puckeditor/core").DefaultComponents> | null;
+export declare const getPuckPreviewMode: () => "edit" | "interactive";
+export interface BuilderRootsHooks {
+    config: Config;
+}
+export declare const useBuilderPucks: ({ config }: BuilderRootsHooks) => {
+    setPreviewMode: (state: "edit" | "interactive" | ((previewMode: "edit" | "interactive") => typeof previewMode)) => void;
+    setComponentData: ({ propsKey, value }: any) => void;
+    selectBlock: (id?: string | null) => void;
+    insterBlock: (inster?: "before" | "after") => Promise<void>;
+    scrollToBlock: typeof scrollToBlock;
+};
+export {};

package/dist/components/content-builders/content-builder-pucks-hooks.js

@@ -0,0 +1,89 @@
+"use client";
+import { useCallback, useMemo } from "react";
+import { createUsePuck, setDeep, useGetPuck, walkTree } from "@puckeditor/core";
+import { createComponentId, scrollToBlock } from "./content-builder-helpers";
+import { useBuilderContext } from "./content-builder-context";
+export const usePuck = createUsePuck();
+export const getPuckSelectedItem = () => usePuck((api) => api.selectedItem);
+export const getPuckPreviewMode = () => usePuck((api) => api.appState.ui.previewMode);
+export const useBuilderPucks = ({ config }) => {
+    const getPuck = useGetPuck();
+    const { selectBuilderBlocks, setBuilderPanels } = useBuilderContext();
+    const selectBlock = useCallback((id) => {
+        const { dispatch, getSelectorForId } = getPuck();
+        const selector = id ? getSelectorForId(id) : null;
+        dispatch({ type: "setUi", ui: { itemSelector: selector } });
+    }, []);
+    const unSelectBlock = useCallback(() => {
+        const { dispatch } = getPuck();
+        dispatch({ type: "setUi", ui: { itemSelector: undefined } });
+    }, []);
+    const onAfterInsterBlock = useCallback((id) => {
+        selectBlock(id);
+        requestAnimationFrame(() => scrollToBlock(id));
+    }, []);
+    const insterBlock = useCallback(async (inster) => {
+        const { appState, dispatch, selectedItem, getParentById } = getPuck();
+        const blockType = await selectBuilderBlocks?.();
+        if (typeof blockType !== "string")
+            return;
+        const { id: itemId } = selectedItem?.props ?? {};
+        const itemParent = itemId ? getParentById(itemId) : { type: "root" };
+        if (itemParent?.type !== "root")
+            return;
+        const nextContent = [...appState.data.content];
+        const selectedIndex = nextContent.findIndex((item) => item.props.id == itemId);
+        const safeIndex = selectedIndex < 0 ? nextContent.length : selectedIndex;
+        const insertIndex = inster === "before" ? safeIndex : safeIndex + 1;
+        const blockId = createComponentId(blockType);
+        dispatch({
+            type: "insert",
+            componentType: blockType,
+            destinationIndex: insertIndex,
+            destinationZone: "root:default-zone",
+            id: blockId,
+        });
+        requestAnimationFrame(() => onAfterInsterBlock(blockId));
+    }, [selectBuilderBlocks]);
+    const setComponentData = useCallback(({ propsKey, value }) => {
+        const { appState, dispatch, selectedItem, getParentById } = getPuck();
+        if (!selectedItem)
+            return;
+        const { id: itemId } = selectedItem.props;
+        const { id: parentId } = getParentById(itemId)?.props ?? {};
+        const nextData = walkTree(appState.data, config, (content, options) => parentId == options.parentId
+            ? content.map((child) => child.props.id == itemId
+                ? setDeep(child, propsKey, value)
+                : child)
+            : content);
+        dispatch({ type: "setData", data: nextData });
+    }, [config]);
+    const setPreviewMode = (state) => {
+        const { appState, dispatch } = getPuck();
+        const ui = {
+            previewMode: typeof state == "function" ? state(appState.ui.previewMode) : state,
+            itemSelector: null
+        };
+        dispatch({ type: "setUi", ui });
+        requestAnimationFrame(() => {
+            setBuilderPanels((panels) => Object.keys(panels).reduce((init, key) => {
+                const nextValue = { ...panels[key], active: false };
+                return { ...init, [key]: nextValue };
+            }, {}));
+        });
+    };
+    const BuilderRoots = useMemo(() => ({
+        setPreviewMode,
+        setComponentData,
+        selectBlock,
+        insterBlock,
+        scrollToBlock
+    }), [
+        setPreviewMode,
+        setComponentData,
+        selectBlock,
+        insterBlock,
+        scrollToBlock
+    ]);
+    return BuilderRoots;
+};

package/dist/components/content-builders/content-builder-roots.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentData, Config, RootData } from "@puckeditor/core";
+export interface PuckProps {
+    data: {
+        root: RootData;
+        content: ComponentData[];
+    };
+    overrides: Record<string, any>;
+    config: Config;
+    height?: string;
+}
+export interface BuilderPuckRootProps extends PuckProps {
+    children: React.ReactNode;
+}
+export declare const BuilderPuckRoot: React.FC<BuilderPuckRootProps>;
+export declare const BuilderRoots: React.FC<React.ComponentProps<"div">>;

package/dist/components/content-builders/content-builder-roots.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Puck, } from "@puckeditor/core";
+import { useBuilderContext } from "./content-builder-context";
+import { cn } from "../../shadcns/index.js";
+export const BuilderPuckRoot = memo(({ height = "100%", ...props }) => {
+    return (_jsx(Puck, { height: height, ...props }));
+});
+export const BuilderRoots = memo((props) => {
+    const { builderRef, viewport } = useBuilderContext();
+    const isFullScreen = viewport.view == "fullscreen";
+    return (_jsx("div", { ref: builderRef, className: cn("w-full h-full relative", "data-[drag=true]:pointer-events-none!", isFullScreen && ["fixed top-0 w-screen h-screen"]), ...props }));
+});

package/dist/components/content-builders/content-builder.d.ts

@@ -0,0 +1,7 @@
+import type { PuckProps } from "./content-builder-roots";
+import type { BuildersViewport } from "./content-builder-hooks";
+export interface ContentBuilderProps extends PuckProps {
+    defaultViewport?: BuildersViewport["view"];
+}
+declare const ContentBuilder: React.FC<ContentBuilderProps>;
+export { ContentBuilder };

package/dist/components/content-builders/content-builder.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { BuilderFunctionBar } from "./content-builder-functionbar";
+import { BuilderContextProviders } from "./content-builder-context";
+import { BuilderEditorPannel, BuilderPanelsContext } from "./content-builder-panels";
+import { BuilderRoots, BuilderPuckRoot, } from "./content-builder-roots";
+import { BuilderPreview } from "./content-builder-preview";
+import { BuilderPucksContextProviders } from "./content-builder-pucks-context";
+import { BuilderBlocks } from "./content-builder-blocks";
+const ContentBuilder = memo((props) => {
+    if (!props?.data || !props?.config)
+        return null;
+    return (_jsx(BuilderContextProviders, { ...props, children: _jsx(BuilderRoots, { children: _jsx(BuilderPuckRoot, { ...props, children: _jsxs(BuilderPucksContextProviders, { children: [_jsx(BuilderPanelsContext, { children: _jsx(BuilderEditorPannel, {}) }), _jsx(BuilderBlocks, {}), _jsx(BuilderFunctionBar, {}), _jsx(BuilderPreview, {})] }) }) }) }));
+});
+ContentBuilder.displayName = "ContentBuilder";
+export { ContentBuilder };

package/dist/components/content-builders/content-render.d.ts

@@ -0,0 +1,7 @@
+import { Config } from "@puckeditor/core";
+export interface ContentRenderProps extends React.ComponentProps<"div"> {
+    data: Record<string, undefined>;
+    config: Config;
+}
+declare const ContentRender: React.FC<ContentRenderProps>;
+export { ContentRender };

package/dist/components/content-builders/content-render.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Render } from "@puckeditor/core";
+const ContentRender = (props) => {
+    return (_jsx(Render, { ...props }));
+};
+ContentRender.displayName = "ContentRender";
+export { ContentRender };

package/dist/components/content-builders/fields/fields-tabs.d.ts

@@ -0,0 +1,5 @@
+export interface PropsTypes extends React.ComponentProps<"div"> {
+    value?: string;
+}
+declare const FieldsTabs: React.FC<PropsTypes>;
+export default FieldsTabs;

package/dist/components/content-builders/fields/fields-tabs.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AutoField, FieldLabel } from "@puckeditor/core";
+import { useState } from "react";
+const FieldsTabs = ({ onChange, value }) => {
+    const [tab, setTab] = useState("A");
+    return (_jsxs(FieldLabel, { label: "Title2", readOnly: true, children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setTab("A"), className: "flex-1 p-2 border", children: "A" }), _jsx("button", { onClick: () => setTab("B"), className: "flex-1 p-2 border", children: "B" })] }), tab == "A" && _jsx("div", { children: _jsx(AutoField, { field: { type: "text" }, onChange: onChange, value: value ?? "wade", readOnly: true }) }), tab == "B" && _jsx("div", { children: "B" })] }));
+};
+FieldsTabs.displayName = "FieldsTabs";
+export default FieldsTabs;

package/dist/components/content-builders/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./blocks";
+export * from "./content-builder";
+export * from "./content-render";
+export * from "./content-builder-initial";
+export * from "./content-builder-hooks";
+export * from "./content-builder-configs";

package/dist/components/content-builders/index.js

@@ -0,0 +1,6 @@
+export * from "./blocks";
+export * from "./content-builder";
+export * from "./content-render";
+export * from "./content-builder-initial";
+export * from "./content-builder-hooks";
+export * from "./content-builder-configs";

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./anchors";
 export * from "./puck-contents";
+export * from "./content-builders";
 export * from "./scroll-containers";
 export * from "./embla-carousels";
 export * from "./tests";

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export * from "./anchors";
 export * from "./puck-contents";
+export * from "./content-builders";
 export * from "./scroll-containers";
 export * from "./embla-carousels";
 export * from "./tests";

package/dist/components/puck-contents/puck-contents-editor.d.ts

@@ -1,4 +1,5 @@
 export interface PropsTypes extends React.ComponentProps<"div"> {
+    previewRoute?: string;
 }
 declare const PuckContentsEditor: React.FC<PropsTypes>;
 export default PuckContentsEditor;

package/dist/components/puck-contents/puck-contents-editor.js

@@ -4,13 +4,13 @@ import { Puck } from "@puckeditor/core";
 import { editorConfig, editorConfigOverrides } from "./puck-configs";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-const PuckContentsEditor = () => {
+const PuckContentsEditor = ({ previewRoute = "/puck/previews" }) => {
     const [state, setstate] = useState({});
     const router = useRouter();
     const save = (data) => {
         console.log(data);
         setstate(prev => ({ ...prev, data }));
-        router.push("/puck/previews?data=" + JSON.stringify(data));
+        router.push(`${previewRoute ?? "/previews"}?data=` + JSON.stringify(data));
     };
     return (_jsx(Puck, { config: editorConfig, data: {}, onPublish: save, overrides: editorConfigOverrides, height: "100%", 
         // _experimentalFullScreenCanvas

package/dist/components/puck-contents/puck-contents-rander.js

@@ -3,7 +3,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Render } from "@puckeditor/core";
 import { renderConfig } from "./puck-configs";
 import { initialData } from "./puck-inital-datas";
+import { useEffect } from "react";
 const PuckContentsRander = ({ datas }) => {
+    useEffect(() => {
+        console.log(datas);
+    }, [datas]);
     return (_jsx(Render, { "data-id": "wade", config: renderConfig, data: datas ?? initialData }));
 };
 PuckContentsRander.displayName = "PuckContentsRander";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xwadex/fesd-next",
-	"version": "0.3.4-7.20",
+	"version": "0.3.4-7.22",
 	"private": false,
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",