@parallelworks/ui 0.19.0 → 0.19.1

package/dist/{chunks/FieldWrapper-Cszwg-4B.js → form/lib.js}

@@ -1,52 +1,4 @@
-import { t as RequiredMark } from "./RequiredMark-DfLdYbYZ.js";
-import cx from "classnames";
-import { createContext, useContext, useId, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/form/fieldContext.tsx
-var FieldContext = createContext({ required: false });
-var FieldProvider = FieldContext.Provider;
-/** True when the surrounding FieldWrapper is showing the required asterisk. */
-function useFieldRequired() {
-	return useContext(FieldContext).required;
-}
-/** Ties the single focusable control of a field to its FieldWrapper label. */
-function useFieldControlProps() {
-	const { id, descriptionId } = useContext(FieldContext);
-	return {
-		id,
-		"aria-describedby": descriptionId
-	};
-}
-/** For controls and groups that can only be named through aria-labelledby. */
-function useFieldLabelledByProps() {
-	const { labelId, descriptionId } = useContext(FieldContext);
-	return {
-		"aria-labelledby": labelId,
-		"aria-describedby": descriptionId
-	};
-}
-//#endregion
-//#region src/form/utils/secondaryField.ts
-function findSecondaryOption(options, value) {
-	for (const candidate of options) {
-		if (!candidate || typeof candidate !== "object") continue;
-		const option = candidate;
-		if (option.value === value) return option;
-		if (Array.isArray(option.options)) {
-			const nestedOption = findSecondaryOption(option.options, value);
-			if (nestedOption) return nestedOption;
-		}
-	}
-}
-function applySecondaryField(secondaryField, secondaryValue, setFieldValue) {
-	if (secondaryField === void 0 || secondaryValue === void 0) return;
-	const fields = Array.isArray(secondaryField) ? secondaryField : [secondaryField];
-	const values = Array.isArray(secondaryValue) ? secondaryValue : [secondaryValue];
-	fields.forEach((field, index) => {
-		setFieldValue(field, values[index]);
-	});
-}
-//#endregion
+import { applySecondaryField, findSecondaryOption } from "./utils/secondaryField.js";
 //#region src/form/lib.ts
 var EMPTY_ENTRY = {};
 function asRecord(value) {
@@ -201,51 +153,4 @@ function initializeValues(options, srcData = {}, blankDefault) {
 	}, data);
 }
 //#endregion
-//#region src/form/FieldWrapper.tsx
-function FieldWrapper({ label, tooltipComponent, description, labelPosition = "left", spaceCompact = false, optional = false, children }) {
-	const isOptional = Boolean(resolvedFlag(optional));
-	const uid = useId();
-	const id = `${uid}control`;
-	const labelId = `${uid}label`;
-	const descriptionId = description ? `${uid}description` : void 0;
-	const field = useMemo(() => ({
-		required: !isOptional,
-		id,
-		labelId,
-		descriptionId
-	}), [
-		isOptional,
-		id,
-		labelId,
-		descriptionId
-	]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex w-full", labelPosition === "left" ? "items-start" : "items-left flex-col"),
-		children: [/* @__PURE__ */ jsxs("label", {
-			htmlFor: id,
-			id: labelId,
-			className: cx("relative", labelPosition === "left" ? "form-label" : "form-label-top", spaceCompact && "form-label-compact"),
-			children: [
-				label,
-				!isOptional && /* @__PURE__ */ jsx(RequiredMark, {}),
-				tooltipComponent
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "w-full",
-			children: [/* @__PURE__ */ jsx(FieldProvider, {
-				value: field,
-				children: typeof children === "function" ? children({
-					id,
-					labelId,
-					describedBy: descriptionId
-				}) : children
-			}), description && /* @__PURE__ */ jsx("div", {
-				id: descriptionId,
-				className: "text-xs theme-muted-text mt-1 leading-relaxed",
-				children: description
-			})]
-		})]
-	});
-}
-//#endregion
-export { initializeValues as a, findSecondaryOption as c, useFieldLabelledByProps as d, useFieldRequired as f, impureSetValueFromPath as i, FieldProvider as l, enforceOneMustBeTrue as n, resolvedFlag as o, flattenGroups as r, applySecondaryField as s, FieldWrapper as t, useFieldControlProps as u };
+export { enforceOneMustBeTrue, flattenGroups, impureSetValueFromPath, initializeValues, resolvedFlag };

package/dist/form/useParsedOpts.js

@@ -0,0 +1,62 @@
+import { useWorkflowEngine } from "../components/Provider.js";
+import { useRef } from "react";
+import deepEqual from "fast-deep-equal";
+//#region src/form/useParsedOpts.ts
+var EMPTY_VARS = {};
+var EMPTY_KEYS = [];
+/**
+* useMemo won't work here — Formik values changes on every keystroke, so this hook extracts which inputs.* keys the schema references and re-parses only when those change. Defaults `userVars`/`secretKeys` to empty — callers in React scope should pass them from `useUserVars()` so the parser leaves `${{ var.SECRET }}` literal during template eval (otherwise the recursive substitution turns `"https://${{ var.PAT }}@host/"` into `"https://@host/"`).
+*/
+function useParsedOpts(rawOptions, values, organizationVariables, userVars = EMPTY_VARS, secretKeys = EMPTY_KEYS, remoteVars = EMPTY_VARS) {
+	const engine = useWorkflowEngine();
+	const c = useRef({
+		rawOptions: null,
+		orgVars: void 0,
+		userVars: null,
+		secretKeys: null,
+		remoteVars: null,
+		converted: {},
+		inputDeps: /* @__PURE__ */ new Set(),
+		hasExpressions: false,
+		relevantSnapshot: {},
+		result: null
+	}).current;
+	if (rawOptions !== c.rawOptions) {
+		c.rawOptions = rawOptions;
+		c.converted = engine.convertInputs(rawOptions);
+		const { inputDeps, hasExpressions } = engine.inputDependencies(c.converted);
+		c.inputDeps = inputDeps;
+		c.hasExpressions = hasExpressions;
+		c.result = null;
+	}
+	if (organizationVariables !== c.orgVars || userVars !== c.userVars || secretKeys !== c.secretKeys || remoteVars !== c.remoteVars) {
+		c.orgVars = organizationVariables;
+		c.userVars = userVars;
+		c.secretKeys = secretKeys;
+		c.remoteVars = remoteVars;
+		c.result = null;
+	}
+	if (c.result !== null) {
+		if (c.inputDeps.size === 0) return c.result;
+		let inputsChanged = false;
+		for (const key of c.inputDeps) if (!deepEqual(values[key], c.relevantSnapshot[key])) {
+			inputsChanged = true;
+			break;
+		}
+		if (!inputsChanged) return c.result;
+	}
+	const parsed = engine.evaluate({
+		inputs: values,
+		obj: c.converted,
+		orgVars: organizationVariables,
+		userVars,
+		secretKeys,
+		remoteVars
+	});
+	c.result = parsed;
+	c.relevantSnapshot = {};
+	for (const key of c.inputDeps) c.relevantSnapshot[key] = values[key];
+	return parsed;
+}
+//#endregion
+export { useParsedOpts };

package/dist/form/usePrevious.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from "react";
+//#region src/form/usePrevious.ts
+function usePrevious(value) {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+}
+//#endregion
+export { usePrevious };

package/dist/form/utils/checkShowIfObject.js

@@ -0,0 +1,14 @@
+import { getValueUsingPath } from "./getValueUsingPath.js";
+//#region src/form/utils/checkShowIfObject.ts
+function checkShowIfObject(showIfObject, formValues, index) {
+	const valueList = [];
+	for (let [key, value] of Object.entries(showIfObject)) {
+		if (index !== void 0) key = key.replace("[index]", `[${index}]`);
+		const dependsOnValue = getValueUsingPath(formValues, key);
+		if (typeof value === "boolean" || typeof value === "string" || typeof value === "number") valueList.push(dependsOnValue !== null && dependsOnValue !== void 0 && dependsOnValue.toString() === value.toString());
+		else if (Array.isArray(value)) valueList.push(value.includes(dependsOnValue));
+	}
+	return valueList;
+}
+//#endregion
+export { checkShowIfObject };

package/dist/form/utils/duration.js

@@ -0,0 +1,69 @@
+import { Duration } from "luxon";
+//#region src/form/utils/duration.ts
+var WITH_DAYS = /^(\d+)-(\d{1,2})(?::(\d{1,2})(?::(\d{1,2}))?)?$/;
+var WITHOUT_DAYS = /^(\d+):(\d{1,2}):(\d{1,2})$/;
+function parseDuration(text) {
+	const trimmed = text.trim();
+	let days = 0;
+	let hours;
+	let minutes;
+	let seconds;
+	const withDays = trimmed.match(WITH_DAYS);
+	if (withDays) {
+		days = Number(withDays[1]);
+		hours = Number(withDays[2]);
+		minutes = Number(withDays[3] ?? 0);
+		seconds = Number(withDays[4] ?? 0);
+		if (hours > 23) return null;
+	} else {
+		const withoutDays = trimmed.match(WITHOUT_DAYS);
+		if (!withoutDays) return null;
+		hours = Number(withoutDays[1]);
+		minutes = Number(withoutDays[2]);
+		seconds = Number(withoutDays[3]);
+	}
+	if (minutes > 59 || seconds > 59) return null;
+	return days * 86400 + hours * 3600 + minutes * 60 + seconds;
+}
+function formatDuration(totalSeconds) {
+	if (!Number.isFinite(totalSeconds) || totalSeconds < 0) return "";
+	const parts = Duration.fromObject({ seconds: Math.floor(totalSeconds) }).shiftTo("days", "hours", "minutes", "seconds");
+	const pad = (n) => String(n).padStart(2, "0");
+	const time = `${pad(parts.hours)}:${pad(parts.minutes)}:${pad(parts.seconds)}`;
+	return parts.days > 0 ? `${parts.days}-${time}` : time;
+}
+var FLEX_MAX_DURATION_RANGE = {
+	min: 600,
+	max: 604800
+};
+var FLEX_WAIT_TIME_RANGE = {
+	min: 30,
+	max: 604800
+};
+var STANDARD_MAX_DURATION_RANGE = {
+	min: 30,
+	max: 10368e3
+};
+var DURATION_PATH = /^partitions\[\d+\]\.(maxDuration|flexStartWaitTime|suspendTime)$/;
+function collectPartitionDurationIssues(partitions, invalidDurationPaths) {
+	const issues = new Set(invalidDurationPaths.filter((path) => DURATION_PATH.test(path)));
+	(partitions ?? []).forEach((partition, i) => {
+		const p = partition;
+		const check = (fieldName, range, required) => {
+			const raw = p?.[fieldName];
+			if (raw === void 0 || raw === null || raw === "") {
+				if (required) issues.add(`partitions[${i}].${fieldName}`);
+				return;
+			}
+			const value = Number(raw);
+			if (!Number.isFinite(value) || value < range.min || value > range.max) issues.add(`partitions[${i}].${fieldName}`);
+		};
+		if (p?.provisioningMode === "flex") {
+			check("maxDuration", FLEX_MAX_DURATION_RANGE, true);
+			check("flexStartWaitTime", FLEX_WAIT_TIME_RANGE, true);
+		} else check("maxDuration", STANDARD_MAX_DURATION_RANGE, false);
+	});
+	return [...issues];
+}
+//#endregion
+export { FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, STANDARD_MAX_DURATION_RANGE, collectPartitionDurationIssues, formatDuration, parseDuration };

package/dist/form/utils/getParentValue.js

@@ -0,0 +1,23 @@
+import { getValueUsingPath } from "./getValueUsingPath.js";
+import { checkShowIfObject } from "./checkShowIfObject.js";
+//#region src/form/utils/getParentValue.ts
+function getParentValue(index, targetField, values, dependentPath, field) {
+	let parentValue;
+	if (typeof targetField === "object" && targetField !== null && !Array.isArray(targetField)) parentValue = !checkShowIfObject(targetField, values, index).includes(false);
+	else if (field.depends_on) {
+		dependentPath = field.depends_on;
+		if (index !== void 0) dependentPath = field.depends_on.replace("[index]", `[${index}]`);
+		const dependsOnValue = getValueUsingPath(values, dependentPath);
+		const dependsOnText = dependsOnValue === null || dependsOnValue === void 0 ? void 0 : String(dependsOnValue);
+		if (Array.isArray(targetField)) parentValue = targetField.includes(dependsOnValue) || targetField.includes(dependsOnText);
+		else if (typeof targetField === "string") parentValue = dependsOnText !== void 0 && targetField.includes(dependsOnText);
+		else parentValue = targetField === dependsOnValue;
+	} else {
+		dependentPath = typeof targetField === "string" ? targetField : "";
+		if (index !== void 0 && typeof targetField === "string") dependentPath = targetField.replace("[index]", `[${index}]`);
+		parentValue = getValueUsingPath(values, dependentPath);
+	}
+	return parentValue;
+}
+//#endregion
+export { getParentValue };

package/dist/form/utils/getPlaceholder.js

@@ -0,0 +1,9 @@
+//#region src/form/utils/getPlaceholder.ts
+/** `placeholder=""` (empty string) intentionally overrides the default; undefined does not. */
+function getPlaceholder(placeholder, defaultValue) {
+	if (placeholder !== void 0) return placeholder;
+	if (defaultValue && (typeof defaultValue === "string" || typeof defaultValue === "number")) return defaultValue.toString();
+	return "";
+}
+//#endregion
+export { getPlaceholder };

package/dist/form/utils/getValueUsingPath.js

@@ -0,0 +1,23 @@
+//#region src/form/utils/getValueUsingPath.ts
+function getValueUsingPath(obj, path) {
+	if (typeof path !== "string" || !path) return;
+	const keys = path.split(".");
+	let current = obj;
+	for (const key of keys) {
+		if (!current || typeof current !== "object") return;
+		const container = current;
+		if (key.includes("[")) {
+			const [arrayKey = "", indexStr = ""] = key.split("[");
+			const index = parseInt(indexStr.slice(0, -1), 10);
+			const list = container[arrayKey];
+			if (!Array.isArray(list) || isNaN(index)) return;
+			current = list[index];
+		} else {
+			if (!(key in container)) return;
+			current = container[key];
+		}
+	}
+	return current;
+}
+//#endregion
+export { getValueUsingPath };

package/dist/form/utils/secondaryField.js

@@ -0,0 +1,22 @@
+//#region src/form/utils/secondaryField.ts
+function findSecondaryOption(options, value) {
+	for (const candidate of options) {
+		if (!candidate || typeof candidate !== "object") continue;
+		const option = candidate;
+		if (option.value === value) return option;
+		if (Array.isArray(option.options)) {
+			const nestedOption = findSecondaryOption(option.options, value);
+			if (nestedOption) return nestedOption;
+		}
+	}
+}
+function applySecondaryField(secondaryField, secondaryValue, setFieldValue) {
+	if (secondaryField === void 0 || secondaryValue === void 0) return;
+	const fields = Array.isArray(secondaryField) ? secondaryField : [secondaryField];
+	const values = Array.isArray(secondaryValue) ? secondaryValue : [secondaryValue];
+	fields.forEach((field, index) => {
+		setFieldValue(field, values[index]);
+	});
+}
+//#endregion
+export { applySecondaryField, findSecondaryOption };

package/dist/graph/AnnotationBanner.js

@@ -0,0 +1,141 @@
+import { ChevronDownIcon, ChevronRightIcon, ErrorIcon, InfoIcon, WarningIcon } from "../icons.js";
+import { keyedByContent } from "../components/keys.js";
+import cx from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/AnnotationBanner.tsx
+var typeOrder = {
+	error: 0,
+	warning: 1,
+	notice: 2
+};
+var typeConfig = {
+	error: {
+		icon: ErrorIcon,
+		label: "Error",
+		accentClass: "text-red-500",
+		bgClass: "bg-red-500/5 dark:bg-red-500/10",
+		countBg: "bg-red-500/15 text-red-700 dark:text-red-400"
+	},
+	warning: {
+		icon: WarningIcon,
+		label: "Warning",
+		accentClass: "text-yellow-500",
+		bgClass: "bg-yellow-500/5 dark:bg-yellow-500/10",
+		countBg: "bg-yellow-500/15 text-yellow-700 dark:text-yellow-400"
+	},
+	notice: {
+		icon: InfoIcon,
+		label: "Notice",
+		accentClass: "text-blue-500",
+		bgClass: "bg-blue-500/5 dark:bg-blue-500/10",
+		countBg: "bg-blue-500/15 text-blue-700 dark:text-blue-400"
+	}
+};
+function collectAnnotations(executedJobs, parentPath) {
+	const annotations = [];
+	for (const [jobName, job] of Object.entries(executedJobs)) {
+		const fullJobName = parentPath ? `${parentPath} > ${jobName}` : jobName;
+		const steps = job?.steps;
+		if (!Array.isArray(steps)) continue;
+		for (let stepIndex = 0; stepIndex < steps.length; stepIndex++) {
+			const step = steps[stepIndex];
+			const stepAnnotations = step?.annotations;
+			if (Array.isArray(stepAnnotations)) {
+				for (const annotation of stepAnnotations) if (annotation?.message) annotations.push({
+					type: annotation.type || "notice",
+					message: annotation.message,
+					title: annotation.title,
+					file: annotation.file,
+					line: annotation.line,
+					jobName: fullJobName,
+					stepName: step?.name,
+					stepIndex
+				});
+			}
+			const subJobs = step?.subworkflow?.jobs;
+			if (subJobs && typeof subJobs === "object") annotations.push(...collectAnnotations(subJobs, fullJobName));
+		}
+	}
+	annotations.sort((a, b) => (typeOrder[a.type] ?? 2) - (typeOrder[b.type] ?? 2));
+	return annotations;
+}
+function AnnotationBanner({ executedJobs }) {
+	const [expanded, setExpanded] = useState(false);
+	if (!executedJobs) return null;
+	const annotations = collectAnnotations(executedJobs);
+	if (annotations.length === 0) return null;
+	const counts = {
+		error: 0,
+		warning: 0,
+		notice: 0
+	};
+	for (const a of annotations) counts[a.type]++;
+	const ChevronIcon = expanded ? ChevronDownIcon : ChevronRightIcon;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("rounded-lg border border-[var(--theme-border)] overflow-hidden", "bg-[var(--theme-panel-bg)]"),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setExpanded((prev) => !prev),
+			className: cx("w-full flex items-center gap-3 px-4 py-2.5 text-left", "hover:bg-[var(--theme-hover)] transition-colors", expanded && "border-b border-[var(--theme-border)]"),
+			children: [
+				/* @__PURE__ */ jsx(ChevronIcon, { className: "w-3.5 h-3.5 text-[var(--theme-muted-text-color)] shrink-0" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium text-[var(--theme-panel-color)]",
+					children: "Annotations"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1.5",
+					children: [
+						"error",
+						"warning",
+						"notice"
+					].map((type) => {
+						if (!counts[type]) return null;
+						const config = typeConfig[type];
+						const Icon = config.icon;
+						return /* @__PURE__ */ jsxs("span", {
+							className: cx("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium", config.countBg),
+							children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), counts[type]]
+						}, type);
+					})
+				})
+			]
+		}), expanded && /* @__PURE__ */ jsx("div", {
+			className: "divide-y divide-[var(--theme-border)] max-h-[400px] overflow-y-auto",
+			children: keyedByContent(annotations, (a) => a.id ?? `${a.type}:${a.title}:${a.message}`).map(({ key, item: annotation }) => {
+				const config = typeConfig[annotation.type] || typeConfig.notice;
+				const Icon = config.icon;
+				return /* @__PURE__ */ jsxs("div", {
+					className: cx("flex items-start gap-2.5 px-4 py-2 text-sm", config.bgClass),
+					children: [/* @__PURE__ */ jsx(Icon, { className: cx("w-4 h-4 mt-0.5 shrink-0", config.accentClass) }), /* @__PURE__ */ jsxs("div", {
+						className: "flex-1 min-w-0",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: cx("font-medium", config.accentClass),
+								children: [annotation.title || config.label, ":"]
+							}),
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "text-[var(--theme-panel-color)]",
+								children: annotation.message
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "text-[var(--theme-muted-text-color)] ml-2 text-xs",
+								children: [
+									"in ",
+									annotation.jobName,
+									" →",
+									" ",
+									annotation.stepName || `step ${annotation.stepIndex}`
+								]
+							})
+						]
+					})]
+				}, key);
+			})
+		})]
+	});
+}
+//#endregion
+export { AnnotationBanner };

package/dist/graph/Collapse.js

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/graph/Collapse.tsx
+function Collapse({ expanded, children, releaseOverflow = true }) {
+	const [overflowVisible, setOverflowVisible] = useState(false);
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: expanded && /* @__PURE__ */ jsx(motion.div, {
+			initial: {
+				height: 0,
+				opacity: 0
+			},
+			animate: {
+				height: "auto",
+				opacity: 1
+			},
+			exit: {
+				height: 0,
+				opacity: 0
+			},
+			transition: {
+				duration: .2,
+				ease: [
+					.25,
+					.1,
+					.25,
+					1
+				]
+			},
+			style: { overflow: overflowVisible ? "visible" : "hidden" },
+			onAnimationStart: () => setOverflowVisible(false),
+			onAnimationComplete: () => {
+				if (expanded && releaseOverflow) setOverflowVisible(true);
+			},
+			children
+		}, "collapse")
+	});
+}
+//#endregion
+export { Collapse };