@parallelworks/ui 0.18.0 → 0.19.1

package/dist/chunks/editor-9_uVtUyy.js

@@ -1,347 +0,0 @@
-import { i as useNotify, u as useStrings } from "./Provider-Ghua9PkN.js";
-import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
-import { t as Loader } from "./Loader-BXoXTZGc.js";
-import { t as SwitchToggleSmall } from "./SwitchToggleSmall-FcsaYSTs.js";
-import { i as impureSetValueFromPath, r as flattenGroups, t as FieldWrapper } from "./FieldWrapper-Bef01EWO.js";
-import cx from "classnames";
-import { Suspense, lazy, useId, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { convertToDynamicForm, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
-import { useField, useFormikContext } from "formik";
-//#region src/editor/Editor.tsx
-var MonacoEditor = lazy(() => import("./Monaco-C1POOdVv.js"));
-function Editor({ ...props }) {
-	return /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),
-		children: /* @__PURE__ */ jsx(MonacoEditor, { ...props })
-	});
-}
-//#endregion
-//#region src/editor/EditorField.tsx
-function hasResetKeys(obj) {
-	return typeof obj === "object" && obj !== null && "editorKeyPostfix" in obj && typeof obj.editorKeyPostfix === "string";
-}
-function EditorField(props) {
-	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
-	const [fieldState] = useField(field.name);
-	const { setFieldValue, setFieldTouched, values } = useFormikContext();
-	const debounceRef = useRef(null);
-	const touchedRef = useRef(false);
-	const handleChange = (val) => {
-		touchedRef.current = true;
-		if (debounceRef.current) clearTimeout(debounceRef.current);
-		debounceRef.current = setTimeout(() => {
-			if (onChange) onChange(val);
-			setFieldTouched(field.name, true);
-			setFieldValue(field.name, val);
-			setFormDirty(true);
-		}, 500);
-	};
-	let editorKeyPostfix = "";
-	if (hasResetKeys(values)) editorKeyPostfix = values.editorKeyPostfix;
-	const postfixKey = useMemo(() => {
-		const randomKey = Math.random().toString(36).substring(7);
-		return editorKeyPostfix || randomKey;
-	}, [editorKeyPostfix]);
-	const value = fieldState.value;
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: field.optional,
-		label,
-		tooltipComponent,
-		labelPosition,
-		spaceCompact,
-		children: /* @__PURE__ */ jsx(Editor, {
-			ariaLabel: label,
-			height: "200px",
-			path: field.name,
-			...touchedRef.current ? {} : { value },
-			className: cx("bg-(--theme-input-bg) w-11 border focus:border rounded text-[10px] leading-4 pl-[6px]", disabled && "opacity-75"),
-			readOnly: disabled,
-			onChange: handleChange,
-			language: field.options?.language || "shell"
-		}, field.name + postfixKey)
-	});
-}
-//#endregion
-//#region src/editor/FormCodePanel.tsx
-var isObject = (value) => typeof value === "object" && value !== null;
-var shouldIgnoreField = (fieldSchema, inputs, arrayIndex) => {
-	if (!fieldSchema?.["ignore"] || !fieldSchema?.["hidden"]) return false;
-	if (!parseStringsOfObjReady) return false;
-	return parseStringsOfObj({
-		inputs,
-		obj: convertToDynamicForm(fieldSchema),
-		index: arrayIndex ?? -1
-	})["hidden"] === true;
-};
-var filterFields = (formJSON, data, prefix, rootData, arrayIndex) => {
-	const filteredFields = [];
-	return {
-		filteredFields,
-		filtered: Object.keys(data).reduce((acc, key) => {
-			const value = data[key];
-			const fieldSchema = formJSON[key];
-			if (value !== null && Array.isArray(value)) {
-				const items = [];
-				acc[key] = items;
-				if (!fieldSchema) return acc;
-				const nestedSchema = isObject(fieldSchema) ? fieldSchema["options"] : void 0;
-				for (let i = 0; i < value.length; i++) {
-					let filteredFieldsNested = [];
-					let filteredNested = {};
-					const item = value[i];
-					if (isObject(item)) {
-						const result = filterFields(isObject(nestedSchema) ? nestedSchema : {}, item, key + `[${i}].`, rootData || data, i);
-						filteredNested = result.filtered;
-						filteredFieldsNested = result.filteredFields;
-					} else filteredNested = item;
-					filteredFields.push(...filteredFieldsNested);
-					items[i] = filteredNested;
-				}
-				return acc;
-			}
-			if (fieldSchema && isObject(value)) {
-				const { filteredFields: filteredFieldsNested, filtered: filteredNested } = filterFields(isObject(fieldSchema) ? fieldSchema : {}, value, key + ".", rootData || data, arrayIndex);
-				filteredFields.push(...filteredFieldsNested);
-				acc[key] = filteredNested;
-				return acc;
-			}
-			if (isObject(fieldSchema) && fieldSchema["sensitive"]) {
-				const name = prefix ? prefix + key : key;
-				filteredFields.push({
-					key: name,
-					value
-				});
-				return acc;
-			}
-			const contextData = rootData || data;
-			if (isObject(fieldSchema) && shouldIgnoreField(fieldSchema, contextData, arrayIndex)) return acc;
-			acc[key] = value;
-			return acc;
-		}, {})
-	};
-};
-var populateFiltered = (filteredFields, data) => {
-	filteredFields.forEach((element) => {
-		impureSetValueFromPath(data, element.key, element.value);
-	});
-	return data;
-};
-function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = false }) {
-	const notify = useNotify();
-	const { common: t } = useStrings();
-	const uid = useId();
-	const [jsonHasErrors, setJsonHasErrors] = useState(false);
-	const [showHidden, setShowHidden] = useState(false);
-	const [copied, setCopied] = useState(false);
-	const copyResetRef = useRef(void 0);
-	const isValidJson = (errors) => {
-		setJsonHasErrors(errors.length > 0);
-	};
-	const { filteredFields, filtered } = filterFields(flattenGroups(formJSON), data || {});
-	const hasHiddenFields = filteredFields.length > 0;
-	const displayObj = showHidden && hasHiddenFields ? populateFiltered(filteredFields, structuredClone(filtered)) : filtered;
-	const showHiddenRef = useRef(showHidden);
-	showHiddenRef.current = showHidden;
-	const filteredFieldsRef = useRef(filteredFields);
-	filteredFieldsRef.current = filteredFields;
-	const json = JSON.stringify(displayObj, null, 2);
-	const handleCopy = async () => {
-		try {
-			await navigator.clipboard.writeText(json);
-			setCopied(true);
-			clearTimeout(copyResetRef.current);
-			copyResetRef.current = setTimeout(() => setCopied(false), 2e3);
-		} catch {
-			notify.error(t.copyFailed);
-		}
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		style: { height },
-		className: "flex w-full flex-col gap-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx("flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border", jsonHasErrors ? "border-red-500" : "border-(--theme-border)"),
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "bg-(--theme-muted-panel-bg) text-(--theme-muted-panel-color) flex shrink-0 items-center gap-3 border-b border-(--theme-border) px-3 py-2",
-				children: [hasHiddenFields && /* @__PURE__ */ jsxs("label", {
-					htmlFor: `${uid}-show-hidden`,
-					title: t.showHiddenFieldsHint,
-					className: "flex cursor-pointer select-none items-center gap-2 text-sm text-(--theme-app)",
-					children: [/* @__PURE__ */ jsx(SwitchToggleSmall, {
-						id: `${uid}-show-hidden`,
-						value: showHidden,
-						"aria-label": t.showHiddenFields,
-						onClick: () => setShowHidden((prev) => !prev)
-					}), /* @__PURE__ */ jsxs("span", {
-						className: "flex items-center gap-1.5",
-						children: [showHidden ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}), t.showHiddenFields]
-					})]
-				}), /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: handleCopy,
-					"aria-label": copied ? t.copied : t.copy,
-					className: "ml-auto flex shrink-0 items-center gap-1.5 rounded-md border border-(--theme-border) px-2.5 py-1.5 text-sm text-(--theme-app) transition-colors duration-150 hover:bg-(--theme-hover) focus:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-link)",
-					children: [copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "text-(--theme-muted-text-color)" }), copied ? t.copied : t.copy]
-				})]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1",
-				children: /* @__PURE__ */ jsx(Editor, {
-					height: "100%",
-					value: json,
-					onValidate: isValidJson,
-					className: "!rounded-none !border-0",
-					minimap: { enabled: false },
-					scrollBeyondLastLine: false,
-					overviewRulerLanes: 0,
-					overviewRulerBorder: false,
-					lineNumbersMinChars: 3,
-					lineDecorationsWidth: 8,
-					renderLineHighlight: "none",
-					padding: {
-						top: 12,
-						bottom: 12
-					},
-					fontSize: 13,
-					scrollbar: {
-						verticalScrollbarSize: 10,
-						horizontalScrollbarSize: 10
-					},
-					onChange: (e) => {
-						try {
-							const parsed = JSON.parse(e);
-							if (!isObject(parsed)) return;
-							mutate(showHiddenRef.current ? parsed : populateFiltered(filteredFieldsRef.current, parsed));
-						} catch {
-							console.log("JSON.parse error in slurm editor");
-						}
-					},
-					language: "json",
-					disabled
-				})
-			})]
-		}), jsonHasErrors && /* @__PURE__ */ jsx("p", {
-			className: "shrink-0 text-sm text-red-500",
-			children: t.jsonHasErrors
-		})]
-	});
-}
-//#endregion
-//#region src/editor/themes.ts
-function expandShorthandHex(color) {
-	return /^#([0-9a-fA-F]{3,4})$/.test(color) ? "#" + color.slice(1).split("").map((c) => c + c).join("") : color;
-}
-function normalizeThemeColors(colors) {
-	return Object.fromEntries(Object.entries(colors).map(([key, value]) => [key, expandShorthandHex(value)]));
-}
-function themeVar(name, fallback) {
-	if (typeof window === "undefined") return fallback;
-	return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
-}
-function createEditorThemes() {
-	const dark = {
-		foreground: themeVar("--theme-app", "#e6edf3"),
-		background: themeVar("--theme-panel-bg", "#161b22"),
-		border: themeVar("--theme-border", "#30363d"),
-		lineHighlight: themeVar("--theme-muted-panel-bg", "#21262d"),
-		lineNumber: themeVar("--theme-muted-text-color", "#8b949e"),
-		selection: themeVar("--theme-element", "#2f81f7"),
-		selectionFg: themeVar("--theme-element-text", "#ffffff"),
-		disabledBg: themeVar("--theme-input-disabled-bg", "#1c2128"),
-		disabledFg: themeVar("--theme-muted-text-color", "#8b949e")
-	};
-	const light = {
-		disabledBg: themeVar("--theme-input-disabled-bg", "#f3f4f6"),
-		disabledFg: themeVar("--theme-muted-text-color", "#5f6b76"),
-		border: themeVar("--theme-border", "#d1d5db"),
-		selection: themeVar("--theme-element", "#2f81f7"),
-		selectionFg: themeVar("--theme-element-text", "#ffffff")
-	};
-	return {
-		"app-dark": {
-			base: "vs-dark",
-			inherit: true,
-			rules: [],
-			colors: {
-				"editor.foreground": dark.foreground,
-				"editor.background": dark.background,
-				"editor.border": dark.border,
-				"editorCursor.foreground": dark.foreground,
-				"editor.lineHighlightBackground": dark.lineHighlight,
-				"editorLineNumber.foreground": dark.lineNumber,
-				"editor.selectionBackground": dark.selection,
-				"editor.selectionForeground": dark.selectionFg
-			}
-		},
-		"app-dark-disabled": {
-			base: "vs-dark",
-			inherit: true,
-			rules: [],
-			colors: {
-				"editor.foreground": dark.disabledFg,
-				"editor.background": dark.disabledBg,
-				"editor.border": dark.border,
-				"editorCursor.foreground": "transparent",
-				"editor.lineHighlightBackground": dark.disabledBg,
-				"editorLineNumber.foreground": dark.disabledFg,
-				"editor.selectionBackground": dark.selection,
-				"editor.selectionForeground": dark.selectionFg
-			}
-		},
-		"app-light-disabled": {
-			base: "vs",
-			inherit: true,
-			rules: [],
-			colors: {
-				"editor.foreground": light.disabledFg,
-				"editor.background": light.disabledBg,
-				"editor.border": light.border,
-				"editorCursor.foreground": "transparent",
-				"editor.lineHighlightBackground": light.disabledBg,
-				"editorLineNumber.foreground": light.disabledFg,
-				"editor.selectionBackground": light.selection,
-				"editor.selectionForeground": light.selectionFg
-			}
-		}
-	};
-}
-function defineEditorThemes(monacoEditor) {
-	const themes = createEditorThemes();
-	for (const [name, themeData] of Object.entries(themes)) monacoEditor.defineTheme(name, {
-		...themeData,
-		colors: normalizeThemeColors(themeData.colors)
-	});
-}
-function getThemeName(isDark, disabled) {
-	if (isDark) return disabled ? "app-dark-disabled" : "app-dark";
-	return disabled ? "app-light-disabled" : "vs";
-}
-//#endregion
-//#region src/editor/workers.ts
-var monacoEnvironment = { getWorker(_moduleId, label) {
-	if (label === "json") return new Worker(new URL(
-		/* @vite-ignore */
-		"/assets/json.worker-8ytS02vz.js",
-		"" + import.meta.url
-	), { type: "module" });
-	if (label === "yaml") return new Worker(new URL(
-		/* @vite-ignore */
-		"/assets/yaml.worker-DJC-VUcv.js",
-		"" + import.meta.url
-	), { type: "module" });
-	return new Worker(new URL(
-		/* @vite-ignore */
-		"/assets/editor.worker-CuBRIwi-.js",
-		"" + import.meta.url
-	), { type: "module" });
-} };
-/**
-* Points window.MonacoEnvironment at the bundled workers. Idempotent, and a
-* host that already configured its own MonacoEnvironment wins — the editor
-* calls this on first load only when nothing is configured.
-*/
-function setupMonacoWorkers() {
-	if (window.MonacoEnvironment) return;
-	window.MonacoEnvironment = monacoEnvironment;
-}
-//#endregion
-export { EditorField as a, FormCodePanel as i, defineEditorThemes as n, Editor as o, getThemeName as r, setupMonacoWorkers as t };