@plitzi/sdk-elements 0.30.19

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

@@ -0,0 +1,40 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Input";
+import i from "@plitzi/plitzi-ui/Select";
+//#region src/elements/advanced/PlitziSdk/Settings.tsx
+var a = ({ spaceKey: a = "", environment: o = "main", onUpdate: s }) => {
+	let c = e((e) => (t) => s?.(e, t), [s]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-4 py-2",
+		children: [/* @__PURE__ */ t(r, {
+			value: a,
+			label: "Space Key",
+			onChange: c("spaceKey")
+		}), /* @__PURE__ */ n(i, {
+			value: o,
+			label: "Environment",
+			onChange: c("environment"),
+			children: [
+				/* @__PURE__ */ t("option", {
+					value: "main",
+					children: "Main"
+				}),
+				/* @__PURE__ */ t("option", {
+					value: "development",
+					children: "Development"
+				}),
+				/* @__PURE__ */ t("option", {
+					value: "staging",
+					children: "Staging"
+				}),
+				/* @__PURE__ */ t("option", {
+					value: "production",
+					children: "Production"
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { a as default };

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

@@ -0,0 +1,17 @@
+import { ElementLayoutType } from '@plitzi/sdk-shared';
+import { ReactNode, RefObject } from 'react';
+export type ReferenceProps = {
+    ref: RefObject<HTMLElement>;
+    children: ReactNode;
+    className: string;
+    referenceType: ElementLayoutType;
+    referenceId: string;
+    referenceContainer: string;
+};
+declare const Reference: ({ ref, children, className, referenceType, referenceId, referenceContainer }: ReferenceProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ReferenceProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Reference };

package/dist/elements/advanced/Reference/Reference.mjs

@@ -0,0 +1,140 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/PluginManager.mjs";
+import n from "../../../Element/hocs/withElement.mjs";
+import { use as r, useCallback as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import l from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as u } from "@plitzi/plitzi-ui/helpers";
+import { createStoreHook as d } from "@plitzi/sdk-store/createStore";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "clsx";
+import h from "@plitzi/sdk-shared/elements/hooks/useElement";
+import g from "@plitzi/sdk-store/StoreProvider";
+var _ = n(({ ref: n, children: _, className: v = "", referenceType: y = "element", referenceId: b = "", referenceContainer: x = "" }) => {
+	let { id: S, definition: { rootId: C, styleSelectors: w } } = h(), { settings: { previewMode: T, environment: E }, contexts: { SegmentsContext: D } } = l(), { useStore: O } = d(), [[k, A]] = O(["schema", "segments"]), { segmentGet: j } = r(D), M = s(k);
+	M.current = k;
+	let N = s(A);
+	N.current = A;
+	let P = i((e, t) => {
+		let n, r;
+		switch (t) {
+			case "segment": {
+				let t = u(N.current, e);
+				if (!t) return;
+				let i = u(t, "definition.baseElementId");
+				r = u(t, "schema"), n = u(t, `schema.flat.${i}`);
+				break;
+			}
+			default: n = u(M.current, `flat.${e}`), r = M.current;
+		}
+		if (n) return {
+			element: n,
+			elementType: u(n, "definition.type"),
+			referenceContextData: {
+				schema: r,
+				prevSchema: M.current
+			}
+		};
+	}, []), [F, I] = c(P(b, y)), L = i(async (e, t) => {
+		let n = P(e, t);
+		if (n) {
+			I(n);
+			return;
+		}
+		let r, i;
+		switch (t) {
+			case "segment": {
+				let t;
+				if (e && (t = await j(e)), !t) return;
+				let n = u(t, "definition.baseElementId");
+				i = u(t, "schema"), r = u(t, `schema.flat.${n}`);
+				break;
+			}
+			default: r = u(M.current, `flat.${e}`), i = M.current;
+		}
+		if (!r) {
+			I(void 0);
+			return;
+		}
+		I({
+			element: r,
+			elementType: u(r, "definition.type"),
+			referenceContextData: {
+				schema: i,
+				prevSchema: M.current
+			}
+		});
+	}, [P, j]);
+	a(() => {
+		L(b, y);
+	}, [
+		L,
+		b,
+		y
+	]);
+	let R = o(() => ({
+		bodyChildren: _,
+		containerId: x,
+		type: y,
+		referenceId: S,
+		rootId: S
+	}), [
+		x,
+		_,
+		y,
+		S
+	]), z = o(() => ({
+		id: F?.element?.id ?? "",
+		rootId: C,
+		className: w.base
+	}), [
+		F?.element?.id,
+		C,
+		w.base
+	]);
+	if (!F) return /* @__PURE__ */ f(e, {
+		ref: n,
+		className: m("plitzi-component__reference", v, { "reference--build-mode": !T }),
+		children: !T && /* @__PURE__ */ p("div", {
+			className: "reference__label",
+			children: ["Element Reference ", /* @__PURE__ */ f("b", {
+				className: "capitalize",
+				children: y
+			})]
+		})
+	});
+	let { element: B, elementType: V, referenceContextData: H } = F;
+	return T && B && y === "element" ? /* @__PURE__ */ f(g, {
+		value: H,
+		children: /* @__PURE__ */ f(t, {
+			type: V,
+			internalProps: z,
+			plitziElementLayout: R
+		}, `${S}_${b}`)
+	}) : /* @__PURE__ */ p(e, {
+		ref: n,
+		className: m("plitzi-component__reference", v, { "reference--build-mode": !T }),
+		children: [
+			/* @__PURE__ */ f(g, {
+				value: H,
+				children: B && /* @__PURE__ */ f(t, {
+					type: V,
+					internalProps: z,
+					plitziElementLayout: R
+				}, `${S}_${b}`)
+			}),
+			!T && !B && /* @__PURE__ */ p("div", {
+				className: "reference__label",
+				children: ["Element Reference ", y]
+			}),
+			T && !B && y === "segment" && /* @__PURE__ */ p("div", { children: [
+				"Segment ",
+				/* @__PURE__ */ f("b", { children: b }),
+				" not found, publish to ",
+				/* @__PURE__ */ f("b", { children: E }),
+				" environment"
+			] })
+		]
+	});
+});
+//#endregion
+export { _ as default };

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

@@ -0,0 +1,8 @@
+type SettingsProps = {
+    referenceType?: 'element' | 'segment' | '';
+    referenceId?: string;
+    referenceContainer?: string;
+    onUpdate?: (key: string, value: string | number | boolean) => void;
+};
+declare const Settings: ({ referenceType, referenceId, referenceContainer, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

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

@@ -0,0 +1,99 @@
+import { use as e, useCallback as t, useMemo as n } from "react";
+import r from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as i } from "@plitzi/plitzi-ui/helpers";
+import { createStoreHook as a } from "@plitzi/sdk-store/createStore";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@plitzi/plitzi-ui/Select2";
+//#region src/elements/advanced/Reference/Settings.tsx
+var l = ({ referenceType: l = "element", referenceId: u = "", referenceContainer: d = "", onUpdate: f }) => {
+	let { contexts: { SegmentsContext: p } } = r(), { useStore: m } = a(), [[h, g]] = m(["schema", "segments"]), { segmentGet: _, segmentsFetch: v } = e(p), y = t((e) => {
+		f?.("referenceType", e?.value ?? ""), f?.("referenceId", ""), f?.("referenceContainer", "");
+	}, [f]), b = t((e) => {
+		f?.("referenceId", e?.value ?? ""), f?.("referenceContainer", ""), e?.value && l === "segment" && _(e.value);
+	}, [
+		f,
+		l,
+		_
+	]), x = t((e) => f?.("referenceContainer", e?.value ?? ""), [f]), S = n(() => [{
+		value: "element",
+		label: "Element"
+	}, {
+		value: "segment",
+		label: "Segment"
+	}], []), C = n(() => {
+		switch (l) {
+			case "segment": return i(g, `${u}.schema`, void 0);
+			default: return h;
+		}
+	}, [
+		l,
+		g,
+		u,
+		h
+	]), w = n(() => {
+		switch (l) {
+			case "element": return Object.values(C.flat).reduce((e, t) => [...e, {
+				value: t.id,
+				label: i(t, "definition.label")
+			}], []);
+			case "segment": return new Promise((e) => {
+				v().then((t) => {
+					e(i(t, "edges", []).map((e) => ({
+						value: e.identifier,
+						label: i(e, "definition.name", e.id)
+					})));
+				});
+			});
+			default: return [];
+		}
+	}, [
+		C,
+		l,
+		v
+	]), T = n(() => {
+		if (!u) return [];
+		switch (l) {
+			case "segment": {
+				let e = i(i(g, u), "definition.baseElementId");
+				return C?.flat ? Object.values(C.flat).filter((t) => i(t, "definition.type", "") === "container" && i(t, "definition.rootId", "") === e && Array.isArray(i(t, "definition.items")) && i(t, "definition.items", []).length === 0).map((e) => ({
+					value: e.id,
+					label: i(e, "definition.label")
+				})) : [];
+			}
+			default: return [];
+		}
+	}, [
+		u,
+		l,
+		g,
+		C?.flat
+	]);
+	return /* @__PURE__ */ s("div", {
+		className: "flex h-full flex-col py-2",
+		children: [
+			/* @__PURE__ */ o(c, {
+				value: l,
+				onChange: y,
+				placeholder: "Search...",
+				label: "Reference Type",
+				options: S
+			}),
+			/* @__PURE__ */ o(c, {
+				value: u,
+				label: "Reference ID",
+				onChange: b,
+				placeholder: "Search...",
+				options: w
+			}),
+			l === "segment" && /* @__PURE__ */ o(c, {
+				value: d,
+				label: "Reference Container",
+				placeholder: "None",
+				onChange: x,
+				options: T
+			})
+		]
+	});
+};
+//#endregion
+export { l as default };

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

@@ -0,0 +1,58 @@
+declare const Reference: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Reference').ReferenceProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            referenceType: string;
+            referenceId: string;
+            referenceContainer: 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;
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default Reference;

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

@@ -0,0 +1,50 @@
+import e from "./Reference.mjs";
+//#region src/elements/advanced/Reference/index.ts
+var t = Object.assign(e, {
+	type: "reference",
+	content: {
+		attributes: {
+			referenceType: "element",
+			referenceId: "",
+			referenceContainer: ""
+		},
+		definition: {
+			label: "Reference",
+			type: "reference",
+			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-solid fa-asterisk"
+		},
+		defaultStyle: {
+			name: "Reference Element",
+			displayMode: "desktop",
+			style: { base: { default: {
+				"min-width": "50px",
+				"min-height": "50px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/basic/Button/Button.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode, RefObject } from 'react';
+export type ButtonProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    children?: ReactNode;
+    contentPlacement?: 'before' | 'after';
+    content?: string;
+    subType?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+};
+declare const Button: ({ ref, className, children, contentPlacement, content, subType, disabled }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ButtonProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Button };

package/dist/elements/basic/Button/Button.mjs

@@ -0,0 +1,25 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import { useMemo as n } from "react";
+import r from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsxs as i } from "react/jsx-runtime";
+import a from "clsx";
+import o from "@plitzi/sdk-shared/elements/hooks/useElement";
+var s = t(({ ref: t, className: s = "", children: c, contentPlacement: l = "after", content: u = "Button", subType: d = "button", disabled: f = !1 }) => {
+	let { definition: { label: p } } = o(), { settings: { previewMode: m } } = r(), h = n(() => typeof u == "string" ? u : p, [u, p]);
+	return /* @__PURE__ */ i(e, {
+		ref: t,
+		tag: "button",
+		type: m ? d : "button",
+		className: a("plitzi-component__button", s, { "container--empty--skip": !m && !c && u }),
+		disabled: f,
+		"aria-label": h,
+		children: [
+			l === "before" && u,
+			c,
+			l === "after" && u
+		]
+	});
+});
+//#endregion
+export { s as default };

package/dist/elements/basic/Button/Settings.d.ts

@@ -0,0 +1,9 @@
+type SettingsProps = {
+    content?: string;
+    contentPlacement?: 'before' | 'after' | 'elements';
+    subType?: 'button' | 'reset' | 'submit';
+    disabled?: boolean;
+    onUpdate?: (key: string, value: string | number | boolean) => void;
+};
+declare const Settings: ({ content, contentPlacement, subType, disabled, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/basic/Button/Settings.mjs

@@ -0,0 +1,68 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/Input";
+import a from "@plitzi/plitzi-ui/Select";
+//#region src/elements/basic/Button/Settings.tsx
+var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "button", disabled: l = !1, onUpdate: u }) => {
+	let d = e((e) => u?.("content", e), [u]), f = e((e) => u?.("contentPlacement", e), [u]), p = e((e) => u?.("subType", e), [u]), m = e((e) => u?.("disabled", e.target.checked), [u]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex h-full flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ t(i, {
+				value: o,
+				label: "Content",
+				onChange: d,
+				size: "xs"
+			}),
+			/* @__PURE__ */ n(a, {
+				value: s,
+				label: "Mode",
+				onChange: f,
+				size: "xs",
+				children: [
+					/* @__PURE__ */ t("option", {
+						value: "before",
+						children: "Before Elements"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "after",
+						children: "After Elements"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "elements",
+						children: "Only Elements"
+					})
+				]
+			}),
+			/* @__PURE__ */ n(a, {
+				value: c,
+				label: "Button Type",
+				onChange: p,
+				size: "xs",
+				children: [
+					/* @__PURE__ */ t("option", {
+						value: "button",
+						children: "Button"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "submit",
+						children: "Submit"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "reset",
+						children: "Reset"
+					})
+				]
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: l,
+				label: "Is Disabled",
+				onChange: m,
+				size: "xs"
+			})
+		]
+	});
+};
+//#endregion
+export { o as default };

package/dist/elements/basic/Button/index.d.ts

@@ -0,0 +1,126 @@
+declare const Button: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Button').ButtonProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            contentPlacement: string;
+            content: string;
+            subType: string;
+            disabled: boolean;
+        };
+        definition: {
+            label: string;
+            type: 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: {};
+                };
+            };
+            subTypes: {
+                button: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'min-height': string;
+                                'min-width': string;
+                                'padding-top': string;
+                                'padding-left': string;
+                                'padding-right': string;
+                                'padding-bottom': string;
+                                cursor: string;
+                                'font-size': string;
+                                'line-height': string;
+                                'border-top-left-radius': string;
+                                'border-top-right-radius': string;
+                                'border-bottom-left-radius': string;
+                                'border-bottom-right-radius': string;
+                            };
+                        };
+                    };
+                };
+                reset: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'min-height': string;
+                                'min-width': string;
+                                'padding-top': string;
+                                'padding-left': string;
+                                'padding-right': string;
+                                'padding-bottom': string;
+                                cursor: string;
+                                'font-size': string;
+                                'line-height': string;
+                                'border-top-left-radius': string;
+                                'border-top-right-radius': string;
+                                'border-bottom-left-radius': string;
+                                'border-bottom-right-radius': string;
+                            };
+                        };
+                    };
+                };
+                submit: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'min-height': string;
+                                'min-width': string;
+                                'padding-top': string;
+                                'padding-left': string;
+                                'padding-right': string;
+                                'padding-bottom': string;
+                                cursor: string;
+                                'font-size': string;
+                                'line-height': string;
+                                'border-top-left-radius': string;
+                                'border-top-right-radius': string;
+                                'border-bottom-left-radius': string;
+                                'border-bottom-right-radius': string;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default Button;