@plitzi/sdk-elements 0.30.19

package/dist/elements/advanced/Custom/Custom.mjs

@@ -0,0 +1,75 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/PluginRemote.mjs";
+import n from "../../../Element/hocs/withElement.mjs";
+import { use as r, useEffect as i, useMemo as a } from "react";
+import o from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import s from "@plitzi/sdk-shared/elements/ComponentContext";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "clsx";
+import d from "@plitzi/sdk-shared/elements/hooks/useElement";
+var f = n(({ ref: n, className: f = "", renderType: p = "", settings: m = "{}", isPlugin: h = !1, pluginScope: g = "", assets: _ = "", scriptUrl: v = "" }) => {
+	let { id: y, rootId: b } = d(), { contexts: { PluginsContext: x } } = o(), { registerCustomAssets: S, unregisterCustomAssets: C } = r(x), { components: w } = r(s), T = a(() => {
+		if (!m) return {};
+		try {
+			return JSON.parse(m);
+		} catch {}
+		return !1;
+	}, [m]), E = T === !1, D = a(() => ({
+		id: y,
+		rootId: b,
+		...E ? {} : T
+	}), [
+		y,
+		b,
+		E,
+		T
+	]), O = a(() => _ ? _.split("\n").filter((e) => !!e && e.trim() !== "").map((e) => e.endsWith(".js") ? {
+		id: e,
+		type: "script",
+		params: {
+			src: e,
+			type: "text/javascript"
+		}
+	} : {
+		id: e,
+		type: "link",
+		params: {
+			href: e,
+			rel: "stylesheet",
+			type: "text/css"
+		}
+	}) : [], [_]);
+	if (i(() => {
+		if (O.length !== 0) return S(O), () => {
+			C(O.map((e) => e.type === "script" ? e.params.url : e.params.href));
+		};
+	}, [
+		O,
+		S,
+		C
+	]), h && v && g && !E) return /* @__PURE__ */ c(t, {
+		url: v,
+		scope: g,
+		internalProps: D,
+		autoRegister: !1
+	});
+	let k = w.current[p];
+	return k && !E ? /* @__PURE__ */ c(k, {
+		internalProps: D,
+		extraProps: k.extraProps
+	}) : /* @__PURE__ */ l(e, {
+		ref: n,
+		className: u("plitzi-component__custom", f),
+		children: [
+			p && !E && /* @__PURE__ */ l("span", { children: [
+				"Custom Component ",
+				/* @__PURE__ */ c("b", { children: p }),
+				" Not Found"
+			] }),
+			E && /* @__PURE__ */ c("span", { children: "Settings Malformed" }),
+			!p && /* @__PURE__ */ c("span", { children: "Custom Component" })
+		]
+	});
+});
+//#endregion
+export { f as default };

package/dist/elements/advanced/Custom/Settings.d.ts

@@ -0,0 +1,11 @@
+type SettingsProps = {
+    renderType?: string;
+    settings?: string;
+    assets?: string;
+    scriptUrl?: string;
+    pluginScope?: string;
+    isPlugin?: boolean;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ renderType, settings, isPlugin, assets, scriptUrl, pluginScope, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/advanced/Custom/Settings.mjs

@@ -0,0 +1,91 @@
+import { use as e, useCallback as t, useEffect as n, useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@plitzi/plitzi-ui/CodeMirror";
+import { ThemeContext as c } from "@plitzi/sdk-shared/theme/ThemeProvider";
+import l from "@plitzi/plitzi-ui/Alert";
+import u from "@plitzi/plitzi-ui/Checkbox";
+import d from "@plitzi/plitzi-ui/Input";
+import f from "@plitzi/plitzi-ui/TextArea";
+//#region src/elements/advanced/Custom/Settings.tsx
+var p = ({ renderType: p = "", settings: m = "{}", isPlugin: h = !1, assets: g = "", scriptUrl: _ = "", pluginScope: v = "", onUpdate: y }) => {
+	let { theme: b } = e(c), [x, S] = r(!0), C = t((e) => (t) => y?.(e, t), [y]), w = t((e) => {
+		e ||= "{}";
+		try {
+			y?.("settings", e), JSON.stringify(JSON.parse(e)), S(!0);
+		} catch {
+			S(!1);
+		}
+	}, [y]), T = t((e) => y?.("isPlugin", e.target.checked), [y]);
+	return n(() => {
+		if (!y || !m) {
+			y?.("settings", "{}"), S(!0);
+			return;
+		}
+		try {
+			let e = JSON.stringify(JSON.parse(m), null, 2);
+			e !== m && y("settings", e), S(!0);
+		} catch {
+			S(!1);
+		}
+	}, [y]), /* @__PURE__ */ o("div", {
+		className: "flex flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ a(d, {
+				value: p,
+				label: "Render Type",
+				onChange: C("renderType"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ a("label", { children: "Settings" }), /* @__PURE__ */ a(s, {
+					className: "min-h-62.5",
+					value: m,
+					theme: b === "dark" ? "dark" : "light",
+					mode: "json",
+					size: "xs",
+					lineWrapping: !0,
+					onChange: w
+				})]
+			}),
+			!x && /* @__PURE__ */ a(l, {
+				className: "mt-1",
+				solid: !1,
+				intent: "warning",
+				size: "xs",
+				children: /* @__PURE__ */ a("div", {
+					className: "flex h-full w-full items-center",
+					children: "This json is invalid"
+				})
+			}),
+			/* @__PURE__ */ a(u, {
+				checked: h,
+				onChange: T,
+				label: "Is Plugin",
+				size: "xs"
+			}),
+			h && /* @__PURE__ */ o(i, { children: [
+				/* @__PURE__ */ a(d, {
+					value: v,
+					label: "Plugin Scope",
+					onChange: C("pluginScope"),
+					size: "xs"
+				}),
+				/* @__PURE__ */ a(d, {
+					value: _,
+					label: "Plugin Script Url",
+					onChange: C("scriptUrl"),
+					size: "xs"
+				}),
+				/* @__PURE__ */ a(f, {
+					value: g,
+					label: "Plugin Assets (Styles)",
+					onChange: C("assets"),
+					size: "xs"
+				})
+			] })
+		]
+	});
+};
+//#endregion
+export { p as default };

package/dist/elements/advanced/Custom/index.d.ts

@@ -0,0 +1,60 @@
+declare const Custom: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Custom').CustomProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            renderType: string;
+            settings: string;
+            isPlugin: boolean;
+            pluginScope: string;
+            assets: string;
+            scriptUrl: string;
+        };
+        definition: {
+            label: string;
+            type: string;
+            description: string;
+            bindings: {};
+            styleSelectors: {
+                base: string;
+            };
+            initialState: {
+                visibility: boolean;
+            };
+        };
+        builder: {
+            canDelete: boolean;
+            canSelect: boolean;
+            canDragDrop: boolean;
+            canMove: boolean;
+            canTemplate: boolean;
+            itemsAllowed: never[];
+            itemsNotAllowed: never[];
+        };
+        market: {
+            category: string;
+            owner: string;
+            verified: boolean;
+            license: string;
+            website: string;
+            backgroundColor: string;
+            icon: string;
+        };
+        defaultStyle: {
+            name: string;
+            displayMode: string;
+            style: {
+                base: {
+                    default: {
+                        'min-width': string;
+                        'min-height': string;
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default Custom;

package/dist/elements/advanced/Custom/index.mjs

@@ -0,0 +1,52 @@
+import e from "./Custom.mjs";
+//#region src/elements/advanced/Custom/index.ts
+var t = Object.assign(e, {
+	type: "custom",
+	content: {
+		attributes: {
+			renderType: "",
+			settings: "{}",
+			isPlugin: !1,
+			pluginScope: "",
+			assets: "",
+			scriptUrl: ""
+		},
+		definition: {
+			label: "Custom",
+			type: "custom",
+			description: "",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "advanced",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-paintbrush"
+		},
+		defaultStyle: {
+			name: "Custom Element",
+			displayMode: "desktop",
+			style: { base: { default: {
+				"min-width": "50px",
+				"min-height": "50px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/advanced/NodeHtml/NodeHtml.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode, RefObject, JSX, HTMLAttributes } from 'react';
+export type NodeHtmlProps<T extends keyof JSX.IntrinsicElements = 'span'> = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    subType?: T;
+    children?: ReactNode;
+} & Omit<HTMLAttributes<T>, 'class'>;
+declare const NodeHtml: ({ ref, className, subType, children, ...otherProps }: NodeHtmlProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<NodeHtmlProps<"span">>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { NodeHtml };

package/dist/elements/advanced/NodeHtml/NodeHtml.mjs

@@ -0,0 +1,18 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "clsx";
+import a from "@plitzi/plitzi-ui/hooks/useValueMemo";
+var o = t(({ ref: t, className: o = "", subType: s = "span", children: c, ...l }) => {
+	let u = a(l), d = n(() => Object.fromEntries(Object.entries(u).map(([e, t]) => [e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), t])), [u]);
+	return /* @__PURE__ */ r(e, {
+		ref: t,
+		tag: s,
+		className: i(`plitzi-component__node-html plitzi-component__node-html-${s}`, o),
+		...d,
+		children: c
+	});
+});
+//#endregion
+export { o as default };

package/dist/elements/advanced/NodeHtml/Settings.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+type SettingsProps = {
+    subType?: keyof JSX.IntrinsicElements;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ subType, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/advanced/NodeHtml/Settings.mjs

@@ -0,0 +1,196 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Select";
+//#region src/elements/advanced/NodeHtml/Settings.tsx
+var i = ({ subType: i = "span", onUpdate: a }) => /* @__PURE__ */ t("div", {
+	className: "flex flex-col gap-4 py-2",
+	children: /* @__PURE__ */ n(r, {
+		label: "Node Tag",
+		value: i,
+		onChange: e((e) => (t) => a?.(e, t), [a])("subType"),
+		children: [
+			/* @__PURE__ */ t("option", {
+				value: "div",
+				children: "Div (Container)"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "section",
+				children: "Section"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "article",
+				children: "Article"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "main",
+				children: "Main (Page Content)"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "aside",
+				children: "Aside (Sidebar)"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "header",
+				children: "Header"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "footer",
+				children: "Footer"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "nav",
+				children: "Navigation"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "p",
+				children: "Paragraph"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "span",
+				children: "Span (Inline)"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "strong",
+				children: "Strong (Bold)"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "em",
+				children: "Emphasis (Italic)"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "small",
+				children: "Small Text"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "blockquote",
+				children: "Block Quote"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "pre",
+				children: "Preformatted Text"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "code",
+				children: "Code Block"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "ul",
+				children: "Unordered List"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "ol",
+				children: "Ordered List"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "li",
+				children: "List Item"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "dl",
+				children: "Description List"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "dt",
+				children: "Term"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "dd",
+				children: "Description"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "img",
+				children: "Image"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "figure",
+				children: "Figure"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "figcaption",
+				children: "Figure Caption"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "video",
+				children: "Video"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "audio",
+				children: "Audio"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "form",
+				children: "Form"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "label",
+				children: "Label"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "input",
+				children: "Input Field"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "textarea",
+				children: "Textarea"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "select",
+				children: "Select (Dropdown)"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "option",
+				children: "Option"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "button",
+				children: "Button"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "a",
+				children: "Link"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "details",
+				children: "Details"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "summary",
+				children: "Summary"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "table",
+				children: "Table"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "thead",
+				children: "Table Head"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "tbody",
+				children: "Table Body"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "tr",
+				children: "Table Row"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "th",
+				children: "Table Header Cell"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "td",
+				children: "Table Data Cell"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "hr",
+				children: "Horizontal Rule"
+			}),
+			/* @__PURE__ */ t("option", {
+				value: "br",
+				children: "Line Break"
+			})
+		]
+	})
+});
+//#endregion
+export { i as default };

package/dist/elements/advanced/NodeHtml/index.d.ts

@@ -0,0 +1,69 @@
+declare const NodeHtml: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./NodeHtml').NodeHtmlProps<"span">>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            subType: string;
+        };
+        definition: {
+            label: string;
+            type: string;
+            description: string;
+            items: never[];
+            bindings: {};
+            styleSelectors: {
+                base: string;
+            };
+            initialState: {
+                visibility: boolean;
+            };
+        };
+        builder: {
+            canDelete: boolean;
+            canSelect: boolean;
+            canDragDrop: boolean;
+            canMove: boolean;
+            canTemplate: boolean;
+            itemsAllowed: never[];
+            itemsNotAllowed: never[];
+        };
+        market: {
+            category: string;
+            owner: string;
+            verified: boolean;
+            license: string;
+            website: string;
+            backgroundColor: string;
+            icon: string;
+        };
+        defaultStyle: {
+            name: string;
+            displayMode: string;
+            style: {
+                base: {
+                    default: {
+                        'min-width': string;
+                        'min-height': string;
+                    };
+                };
+            };
+            subTypes: {
+                hr: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'border-top-width': string;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default NodeHtml;

package/dist/elements/advanced/NodeHtml/index.mjs

@@ -0,0 +1,51 @@
+import e from "./NodeHtml.mjs";
+//#region src/elements/advanced/NodeHtml/index.ts
+var t = Object.assign(e, {
+	type: "nodeHtml",
+	content: {
+		attributes: { subType: "div" },
+		definition: {
+			label: "Html Node",
+			type: "nodeHtml",
+			description: "",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "advanced",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-brands fa-html5"
+		},
+		defaultStyle: {
+			name: "Html Node",
+			displayMode: "desktop",
+			style: { base: { default: {
+				"min-width": "50px",
+				"min-height": "50px"
+			} } },
+			subTypes: { hr: {
+				name: "HR Node",
+				displayMode: "desktop",
+				style: { base: { default: { "border-top-width": "1px" } } }
+			} }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/advanced/PlitziSdk/Settings.d.ts

@@ -0,0 +1,8 @@
+import { Environment } from '@plitzi/sdk-shared';
+type SettingsProps = {
+    spaceKey?: string;
+    environment?: Environment;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ spaceKey, environment, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;