@alpaca-headless/alpaca-headless-nextjs 0.0.4 → 1.0.19

package/dist/esm/editor/ComponentTree.js

@@ -0,0 +1,196 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditContext } from "..";
+import { Tree, } from "primereact/tree";
+import { useEffect, useRef, useState } from "react";
+import { Tag } from "primereact/tag";
+import { ContextMenu } from "primereact/contextmenu";
+import { confirmDialog } from "primereact/confirmdialog";
+function mapPlaceholderNode(p, parent) {
+    const node = {
+        key: p.key,
+        componentId: p.key,
+        label: p.name,
+        data: p,
+        icon: "pi pi-folder",
+        parent: parent,
+        droppable: true,
+    };
+    node.children = p.components.map((c) => mapComponentNode(c, node));
+    return node;
+}
+function mapPlaceholders(c, parent) {
+    if (c.placeholders.length > 1)
+        return c.placeholders.map((x) => mapPlaceholderNode(x, parent));
+    else if (c.placeholders.length > 0)
+        return c.placeholders[0].components.map((c) => mapComponentNode(c, parent));
+    return [];
+}
+function mapComponentNode(c, parent) {
+    const node = {
+        key: c.linkItemId + "_" + c.id || c.id,
+        componentId: c.id,
+        label: c.name,
+        icon: "pi pi-stop",
+        data: c,
+        parent: parent,
+        tags: [],
+        droppable: true,
+    };
+    if (c.translations && c.translations.length > 1)
+        node.tags.push({
+            severity: "info",
+            value: c.translations.length + " Languages",
+            icon: "pi pi-flag",
+        });
+    if (c.hostingPageItem) {
+        node.tags.push({
+            severity: "warning",
+            value: "Layout",
+            icon: "",
+            color: "rgb(192 132 252)",
+            onClick: () => {
+                var _a;
+                confirmDialog({
+                    header: "Edit layout",
+                    message: "Edit layout " + ((_a = c.hostingPageItem) === null || _a === void 0 ? void 0 : _a.path) + "?",
+                    accept: () => window.open(c.hostingPageItem.editUrl, "_blank"),
+                });
+            },
+        });
+    }
+    node.children = mapPlaceholders(c, node);
+    return node;
+}
+// function selectTreeNode(event: TreeSelectionEvent): void {
+//   editContext.setSelection(event.value.keys());
+// }
+export function ComponentTree({ page, selection, }) {
+    const [expandedKeys, setExpandedKeys] = useState({
+        "0": true,
+    });
+    const [selectedKeys, setSelectedKeys] = useState();
+    const cm = useRef(null);
+    let editContext = useEditContext();
+    useEffect(() => {
+        const newSelectedKeys = {};
+        selection.forEach((id) => {
+            const nodes = findNodesByComponentId(id, nodeDictionary);
+            nodes.forEach((nodeId) => {
+                newSelectedKeys[nodeId] = true;
+            });
+        });
+        const newExpandedKeys = Object.assign({}, expandedKeys);
+        Object.keys(newSelectedKeys).forEach((id) => {
+            const node = nodeDictionary[id];
+            if (node)
+                expandParents(node.parent, newExpandedKeys);
+        });
+        if (!hasSameProps(newExpandedKeys, expandedKeys))
+            setExpandedKeys(newExpandedKeys);
+        setSelectedKeys(newSelectedKeys);
+    }, [selection]);
+    if (!page)
+        return _jsx(_Fragment, {});
+    const componentsNode = {
+        key: "0",
+        componentId: "0",
+        label: "Components",
+        data: "Components Folder",
+        icon: "pi pi-fw pi-list",
+    };
+    componentsNode.children = mapPlaceholders(page, componentsNode);
+    const treeNodes = [componentsNode];
+    const nodeDictionary = {};
+    createMap(treeNodes, nodeDictionary);
+    const nodeTemplate = (node, options) => {
+        var _a;
+        let label = (_jsxs("span", { "data-key": node.key, className: "flex", children: [node.label, (_a = node.tags) === null || _a === void 0 ? void 0 : _a.map((x) => (_jsx(Tag, { icon: x.icon, value: x.value, severity: x.severity, onClick: x.onClick, style: { backgroundColor: x.color, marginLeft: "8px" } }, x.value)))] }));
+        return _jsx("span", { className: options.className, children: label });
+    };
+    const menu = [
+        {
+            label: "View Key",
+            icon: "pi pi-search",
+            command: () => {
+                //  toast.current.show({ severity: 'success', summary: 'Node Key', detail: selectedNodeKey });
+            },
+        },
+        {
+            label: "Toggle",
+            icon: "pi pi-sort",
+            command: () => {
+                // let _expandedKeys = { ...expandedKeys };
+                // if (_expandedKeys[selectedNodeKey]) delete _expandedKeys[selectedNodeKey];
+                // else _expandedKeys[selectedNodeKey] = true;
+                // setExpandedKeys(_expandedKeys);
+            },
+        },
+    ];
+    function findNode(ev) {
+        const treeNodeParent = ev.target.closest(".p-treenode");
+        if (treeNodeParent) {
+            const childWithDataKey = treeNodeParent.querySelector("[data-key]");
+            if (childWithDataKey) {
+                return childWithDataKey;
+            }
+        }
+        return null;
+    }
+    return (_jsxs("div", { onDragOverCapture: (ev) => {
+            var _a;
+            if (!findNode(ev))
+                ev.dataTransfer.dropEffect = "none";
+            ev.dataTransfer.dropEffect =
+                ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.dragObject) === null || _a === void 0 ? void 0 : _a.type) == "template" ? "copy" : "move";
+            ev.preventDefault();
+            ev.stopPropagation();
+        }, onDropCapture: (ev) => {
+            var node = findNode(ev);
+            if (node)
+                alert(node.getAttribute("data-key"));
+            ev.stopPropagation();
+        }, children: [_jsx(ContextMenu, { model: menu, ref: cm }), _jsx(Tree, { value: treeNodes, selectionMode: "multiple", selectionKeys: selectedKeys, className: "a-w-full alpaca-no-border", onToggle: (e) => setExpandedKeys(e.value), expandedKeys: expandedKeys, nodeTemplate: nodeTemplate, dragdropScope: "ignore", onSelectionChange: (ev) => {
+                    if (ev.value) {
+                        const selectedKeys = Object.keys(ev.value);
+                        const selectedComponentIds = selectedKeys
+                            .filter((key) => nodeDictionary[key])
+                            .map((key) => nodeDictionary[key].componentId);
+                        editContext === null || editContext === void 0 ? void 0 : editContext.setSelection(selectedComponentIds);
+                    }
+                    else {
+                        editContext === null || editContext === void 0 ? void 0 : editContext.setSelection([]);
+                    }
+                }, onContextMenu: (e) => { var _a; return (_a = cm.current) === null || _a === void 0 ? void 0 : _a.show(e.originalEvent); } })] }));
+}
+function createMap(treeNodes, nodeDictionary) {
+    treeNodes.forEach((n) => {
+        if (n.key)
+            nodeDictionary[n.key] = n;
+        if (n.children)
+            createMap(n.children, nodeDictionary);
+    });
+}
+function findNodesByComponentId(id, nodesDictionary) {
+    const allNodes = Object.values(nodesDictionary);
+    return allNodes
+        .filter((x) => x.componentId === id)
+        .map((x) => { var _a; return ((_a = x.key) === null || _a === void 0 ? void 0 : _a.toString()) || ""; });
+}
+function expandParents(node, newExpandedKeys) {
+    if (!node)
+        return;
+    if (node.key)
+        newExpandedKeys[node.key] = true;
+    if (node.parent)
+        expandParents(node.parent, newExpandedKeys);
+}
+function hasSameProps(obj1, obj2) {
+    var obj1Props = Object.keys(obj1), obj2Props = Object.keys(obj2);
+    if (obj1Props.length == obj2Props.length) {
+        return obj1Props.every(function (prop) {
+            return obj2Props.indexOf(prop) >= 0;
+        });
+    }
+    return false;
+}

package/dist/esm/editor/ContentTree.js

@@ -0,0 +1,117 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { useEditContext } from "..";
+import { Tree, } from "primereact/tree";
+import { useEffect, useState } from "react";
+import { getChildren } from "./contentService";
+export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, onSelectionChange, filter, templateIds, }) {
+    const [treeNodes, setTreeNodes] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState();
+    const editContext = useEditContext();
+    const loadOnExpand = (event) => __awaiter(this, void 0, void 0, function* () {
+        const node = event.node;
+        node.loading = true;
+        yield loadNodeChildren(node);
+        let value = [...treeNodes];
+        setTreeNodes(value);
+        node.loading = false;
+    });
+    const loadNodeChildren = (node) => __awaiter(this, void 0, void 0, function* () {
+        if (!node.children) {
+            if (!node.key || !editContext)
+                return node.children || [];
+            let children = yield getChildren(node.key, editContext === null || editContext === void 0 ? void 0 : editContext.sessionId, templateIds);
+            if (filter)
+                children = filter(children);
+            node.children = children.map((x) => ({
+                key: x.id,
+                label: x.name,
+                iconUrl: x.icon,
+                isDraggable: isDraggable && isDraggable(x),
+                data: x,
+                leaf: !x.hasChildren,
+            }));
+        }
+        return node.children;
+    });
+    useEffect(() => {
+        const treeNodes = [
+            {
+                key: rootItemId.toLowerCase(),
+                label: "content",
+                leaf: false,
+            },
+        ];
+        const newExpandedKeys = getExpandedKeys();
+        setExpandedKeys(newExpandedKeys);
+        preLoadNodes(newExpandedKeys, treeNodes);
+        setTreeNodes(treeNodes);
+    }, []);
+    function getExpandedKeys() {
+        const newExpandedKeys = {};
+        newExpandedKeys[rootItemId.toLocaleLowerCase()] = true;
+        const idPathArray = expandIdPath.split("/");
+        idPathArray.forEach((x) => {
+            if (x !== "")
+                newExpandedKeys[x.substring(1, x.length - 1).toLowerCase()] = true;
+        });
+        return newExpandedKeys;
+    }
+    function preLoadNodes(expandedKeys, treeNodes) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield doPreloadNodes(expandedKeys, treeNodes);
+            setExpandedKeys(Object.assign({}, expandedKeys));
+            setTreeNodes([...treeNodes]);
+        });
+    }
+    function doPreloadNodes(expandedKeys, treeNodes) {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (let i = 0; i < treeNodes.length; i++) {
+                if (expandedKeys[treeNodes[i].key]) {
+                    const children = yield loadNodeChildren(treeNodes[i]);
+                    yield doPreloadNodes(expandedKeys, children);
+                }
+            }
+        });
+    }
+    const nodeTemplate = (node, options) => {
+        let label = _jsx("b", { children: node.label });
+        if (node.url) {
+            label = (_jsx("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "a-text-primary hover:a-underline a-font-semibold", children: node.label }));
+        }
+        return (_jsxs("span", { onDragStart: (event) => {
+                handleDragStart(event, node.data);
+            }, onDragEnd: handleDragEnd, draggable: node.isDraggable, className: `a-flex a-gap-2 ${node.isDraggable ? "a-cursor-grab" : ""} ${options.className}`, children: [_jsx("img", { src: node.iconUrl, style: { height: "20px" }, width: "20", height: "20", onDragStart: (e) => e.preventDefault() }), label, node.loading && (_jsx(ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
+    };
+    function handleDragStart(event, item) {
+        if (dragStart)
+            dragStart(item);
+        event.stopPropagation();
+    }
+    function handleDragEnd() {
+        if (dragEnd)
+            dragEnd();
+    }
+    const newSelectedKeys = {};
+    selectedItemIds === null || selectedItemIds === void 0 ? void 0 : selectedItemIds.forEach((x) => {
+        newSelectedKeys[x] = true;
+    });
+    return (_jsx("div", { onDragEnterCapture: (ev) => ev.stopPropagation(), onDragOverCapture: (ev) => ev.stopPropagation(), onDragLeaveCapture: (ev) => ev.stopPropagation(), children: _jsx(Tree, { value: treeNodes, expandedKeys: expandedKeys, onToggle: (e) => setExpandedKeys(e.value), nodeTemplate: nodeTemplate, 
+            //dragdropScope={isDraggable ? "alpaca" : undefined}
+            className: "a-w-full alpaca-no-border a-p-0", onExpand: loadOnExpand, selectionMode: selectionMode, onSelectionChange: (ev) => {
+                if (onSelectionChange && selectionMode == "multiple")
+                    onSelectionChange(Object.keys(ev.value || {}));
+                if (onSelectionChange && selectionMode == "single")
+                    onSelectionChange([ev.value]);
+            }, selectionKeys: newSelectedKeys }) }));
+}

package/dist/esm/editor/Debug.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import JSONPretty from "react-json-pretty";
+import "react-json-pretty/themes/monikai.css";
+import { TabView, TabPanel } from "primereact/tabview";
+export function Debug({ component, page }) {
+    if (!component && !page)
+        return;
+    return (_jsxs(TabView, { children: [component && _jsx(TabPanel, { header: "Component", children: _jsx(JSONPretty, { data: component }) }), _jsx(TabPanel, { header: "Page", children: _jsx(JSONPretty, { data: page }) })] }));
+}

package/dist/esm/editor/DictionaryEditor.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DataTable } from "primereact/datatable";
+import { Column } from "primereact/column";
+import { InputText } from "primereact/inputtext";
+import { useEditContext } from "..";
+export function DictionaryEditor({ dictionary }) {
+    if (!dictionary)
+        return;
+    const context = useEditContext();
+    if (!context) {
+        console.log("Context is undefined!");
+        return;
+    }
+    let entries = Object.keys(dictionary).map((k) => ({
+        key: k,
+        translation: dictionary[k],
+    }));
+    entries = [...entries, ...context === null || context === void 0 ? void 0 : context.unresolvedDictionaryKeys.map(x => ({
+            key: x,
+            translation: "[undefined]"
+        }))];
+    entries.sort((a, b) => (a.key > b.key ? -1 : 1));
+    const textEditor = (options) => {
+        if (options.value != "[undefined]")
+            return _jsx(InputText, { type: "text", value: options.value, onChange: (e) => options.editorCallback(e.target.value) });
+        else
+            return null;
+    };
+    return (_jsx(_Fragment, { children: _jsxs(DataTable, { value: entries, children: [_jsx(Column, { field: "key", header: "Key" }), _jsx(Column, { field: "translation", header: "Translation", editor: (options) => textEditor(options) })] }) }));
+}

package/dist/esm/editor/EditFrame.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useEditContext } from "..";
+export function EditFrame({ componentId, children, }) {
+    var _a, _b;
+    const editContext = useEditContext();
+    if (!editContext)
+        return children;
+    const { getComponentById, selection, setSelection } = editContext;
+    const [isRemoved, setIsRemoved] = useState(false);
+    const clientComponent = getComponentById(componentId);
+    if (!clientComponent) {
+        return children;
+    }
+    function select(e) {
+        e.stopPropagation();
+        if (clientComponent)
+            setSelection([clientComponent.id]);
+    }
+    let classNames = "ap-editframe";
+    let color = clientComponent.linkItemId ? "orange-400" : "sky-400";
+    if (clientComponent.hostingPageItem)
+        color = "purple-400";
+    const isSelected = selection && selection.indexOf(clientComponent.id) >= 0;
+    if (isSelected)
+        classNames = `ap-editframe a-relative a-ring-2 a-ring-${color}`;
+    function handleDragStart(event) {
+        if (!clientComponent)
+            return;
+        event.dataTransfer.setData("text/plain", clientComponent.id);
+        event.dataTransfer.setData("alpaca", clientComponent.id);
+        setTimeout(() => {
+            editContext.dragStart({
+                type: "component",
+                templateId: clientComponent.templateId,
+                componentId: clientComponent.id,
+            });
+        }, 50);
+        event.stopPropagation();
+    }
+    const isDraggable = isSelected && !clientComponent.hostingPageItem;
+    if ((_a = children.props) === null || _a === void 0 ? void 0 : _a.className)
+        classNames += " " + ((_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b.className);
+    if (isRemoved)
+        classNames += " ap-removed";
+    return (_jsxs("div", { className: classNames, onClick: select, draggable: isDraggable, onDragStart: handleDragStart, children: [isSelected && (_jsxs("div", { className: `a-absolute a-top-0 a-right-0 a-text-white a-px-3 a-bg-${color} ${isDraggable ? "a-cursor-move" : ""}`, children: [clientComponent.name, _jsx("button", { className: "a-ml-3", onClick: (ev) => {
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                            editContext.removeComponent(clientComponent.linkItemId || clientComponent.id, () => setIsRemoved(true));
+                        }, children: _jsx("i", { className: "pi pi-trash" }) }), clientComponent.placeholders.length > 0 && (_jsx("button", { className: "a-ml-3", onClick: (ev) => {
+                            editContext.setSelectedForInsertion(clientComponent.id);
+                            editContext.openComponentPalette();
+                            ev.stopPropagation();
+                            ev.preventDefault();
+                        }, children: _jsx("i", { className: "pi pi-plus" }) }))] })), children] }));
+}

package/dist/esm/editor/EditHistory.js

@@ -0,0 +1,26 @@
+"use client";
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export function EditHistory({ operations }) {
+    if (!operations)
+        return;
+    const description = (op) => {
+        if (op.type === "add-component")
+            return _jsxs(_Fragment, { children: ["Add ", op.itemName] });
+        if (op.type === "link-component")
+            return _jsxs(_Fragment, { children: ["Insert ", op.itemName] });
+        if (op.type === "remove-component")
+            return _jsxs(_Fragment, { children: ["Remove ", op.id] });
+        if (op.type === "edit-field") {
+            const editFieldOp = op;
+            return (_jsxs(_Fragment, { children: ["Edit ", editFieldOp.fieldName, _jsxs("span", { className: "a-text-gray-400 a-ml-1", children: ["(", editFieldOp.itemName, ", ", editFieldOp.language, ",", " ", editFieldOp.version, ")"] })] }));
+        }
+        return _jsx("div", { children: op.type });
+    };
+    return (_jsxs("div", { className: "a-inset-0 a-absolute", children: [_jsx("div", { className: "a-p-2 a-bg-gray-100 a-m-1", children: "History" }), _jsx("div", { className: "a-flex a-flex-col a-overflow-y-auto a-overflow-x-hidden", style: { height: "calc(100% - 45px)" }, children: operations.map((o, i) => singleOperation(i, o)) })] }));
+    function singleOperation(i, o) {
+        let className = "a-border-b a-p-2 a-flex a-justify-between";
+        if (o.undone)
+            className = className + " a-text-gray-300";
+        return (_jsxs("div", { className: className, children: [_jsx("div", { children: _jsx("small", { className: "a-text-color-secondary", children: description(o) }) }), _jsx("div", { className: "a-text-xs", children: o.user })] }, i));
+    }
+}

package/dist/esm/editor/Editor.js

@@ -0,0 +1,23 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useAlpacaContext, } from "..";
+import { EditorClientHost } from "./EditorClientHost";
+export function Editor({ children, content, }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const data = yield content;
+        if (data.type !== "page")
+            return;
+        if (!data.editing)
+            return _jsx(_Fragment, { children: children });
+        var alpacaContext = useAlpacaContext();
+        return (_jsx(_Fragment, { children: _jsx(EditorClientHost, { content: data, dictionaryObject: alpacaContext.dictionary, edit: alpacaContext.edit, children: children }) }));
+    });
+}