@parallelworks/ui 0.20.0 → 0.21.1

package/dist/form/lib.js

@@ -23,56 +23,44 @@ function enforceOneMustBeTrue(items, options, promoteIndex) {
 		const fieldSchema = options[fieldKey];
 		const opts = typeof fieldSchema === "object" && fieldSchema && "options" in fieldSchema ? fieldSchema.options : void 0;
 		const trueOption = typeof opts === "object" && opts && !Array.isArray(opts) && "onOption" in opts ? opts.onOption || true : true;
-		if (!items.some((item) => item[fieldKey] === trueOption)) items[clampedIndex][fieldKey] = trueOption;
+		const hasTrue = items.some((item) => item[fieldKey] === trueOption);
+		const promoted = items[clampedIndex];
+		if (!hasTrue && promoted) promoted[fieldKey] = trueOption;
 	}
 	return items;
 }
 function flattenGroups(schema) {
 	if (!schema || typeof schema !== "object") return {};
-	const fields = schema;
-	let flattenedFields = {};
-	Object.keys(fields).forEach((key) => {
-		const entry = fields[key];
-		if (entry?.type === "group") {
-			const flattenedGroup = flattenGroups(entry.options);
-			flattenedFields = {
-				...flattenedFields,
-				...flattenedGroup
-			};
-		} else if (entry?.type === "object") {
-			const flattenedGroup = flattenGroups(entry.options);
-			flattenedFields = {
-				...flattenedFields,
-				[key]: flattenedGroup
-			};
-		} else flattenedFields[key] = entry;
-	});
-	return flattenedFields;
+	const flattened = {};
+	for (const [key, entry] of Object.entries(schema)) if (entry?.type === "group") Object.assign(flattened, flattenGroups(entry.options));
+	else if (entry?.type === "object") flattened[key] = flattenGroups(entry.options);
+	else flattened[key] = entry;
+	return flattened;
 }
 /**Not a pure function. Edits 'obj' passed into function */
 function impureSetValueFromPath(obj, path, value) {
-	const pathArray = path.split(".");
-	if (pathArray.length === 1) {
-		obj[pathArray[0]] = value;
-		return;
-	}
+	const parents = path.split(".");
+	const leaf = parents.pop() ?? "";
 	let current = obj;
-	for (let i = 0; i < pathArray.length - 1; i++) {
-		const segment = pathArray[i];
+	for (const segment of parents) {
 		const arrayMatch = segment.match(/^(.+)\[(\d+)\]$/);
 		if (arrayMatch) {
-			const key = arrayMatch[1];
-			const index = Number(arrayMatch[2]);
+			const [, key = "", indexText] = arrayMatch;
+			const index = Number(indexText);
 			if (!current[key]) current[key] = [];
 			const list = current[key];
-			if (!list[index]) list[index] = {};
-			current = list[index];
+			let item = list[index];
+			if (!item) {
+				item = {};
+				list[index] = item;
+			}
+			current = item;
 		} else {
 			if (!current[segment]) current[segment] = {};
 			current = current[segment];
 		}
 	}
-	current[pathArray[pathArray.length - 1]] = value;
+	current[leaf] = value;
 }
 function initializeValues(options, srcData = {}, blankDefault) {
 	if (!options || typeof options !== "object") return;
@@ -82,25 +70,13 @@ function initializeValues(options, srcData = {}, blankDefault) {
 	return Object.keys(schema).reduce((acc, field) => {
 		if (field.startsWith("$")) return acc;
 		const fieldSchema = schema[field] ?? EMPTY_ENTRY;
-		if (fieldSchema.type === "group") {
+		const flattenStep = fieldSchema.type === "step" && schema["$meta"]?.wizard?.flatten !== false;
+		if (fieldSchema.type === "group" || flattenStep) {
 			const values = initializeValues(fieldSchema.options, data);
-			if (!values) return acc;
-			Object.keys(values).forEach((key) => {
-				acc[key] = data[key] ?? values[key];
-			});
-			return acc;
-		}
-		if (fieldSchema.type === "step") {
-			if (schema["$meta"]?.wizard?.flatten !== false) {
-				const values = initializeValues(fieldSchema.options, data);
-				if (!values) return acc;
-				Object.keys(values).forEach((key) => {
-					acc[key] = data[key] ?? values[key];
-				});
-			} else acc[field] = initializeValues(fieldSchema.options, asRecord(data[field]));
+			for (const key of Object.keys(values ?? {})) acc[key] = data[key] ?? values?.[key];
 			return acc;
 		}
-		if (fieldSchema.type === "object") {
+		if (fieldSchema.type === "step" || fieldSchema.type === "object") {
 			acc[field] = initializeValues(fieldSchema.options, asRecord(data[field]));
 			return acc;
 		}
@@ -110,14 +86,12 @@ function initializeValues(options, srcData = {}, blankDefault) {
 				acc[field] = Array.isArray(listData) ? [...listData] : [];
 				return acc;
 			}
-			const arr = [];
-			if (Array.isArray(listData)) for (let i = 0; i < listData.length; i++) arr.push(initializeValues(fieldSchema.options, asRecord(listData[i])));
-			acc[field] = arr;
+			acc[field] = Array.isArray(listData) ? listData.map((item) => initializeValues(fieldSchema.options, asRecord(item))) : [];
 			return acc;
 		}
 		if (data[field] !== void 0) {
 			acc[field] = data[field];
-			if ((fieldSchema.type === "dropdown" || fieldSchema.type === "storage") && fieldSchema.secondaryField && fieldSchema.options && Array.isArray(fieldSchema.options)) {
+			if ((fieldSchema.type === "dropdown" || fieldSchema.type === "storage") && fieldSchema.secondaryField && Array.isArray(fieldSchema.options)) {
 				const option = findSecondaryOption(fieldSchema.options, data[field]);
 				applySecondaryField(fieldSchema.secondaryField, option?.secondaryValue, (secondaryField, secondaryValue) => {
 					if (!(fieldSchema.type === "storage" && Object.hasOwn(options, secondaryField) && source[secondaryField] !== void 0)) impureSetValueFromPath(acc, secondaryField, secondaryValue);
@@ -135,8 +109,8 @@ function initializeValues(options, srcData = {}, blankDefault) {
 			else acc[field] = false;
 		}
 		if (fieldSchema.type === "dropdown") {
-			if (fieldSchema.options && Array.isArray(fieldSchema.options) && fieldSchema.options.length > 0) acc[field] = fieldSchema.options[0].value;
-			if (fieldSchema.type === "dropdown" && fieldSchema.secondaryField && fieldSchema.options && Array.isArray(fieldSchema.options)) {
+			if (Array.isArray(fieldSchema.options) && fieldSchema.options.length > 0) acc[field] = fieldSchema.options[0].value;
+			if (fieldSchema.secondaryField && Array.isArray(fieldSchema.options)) {
 				const option = fieldSchema.options.find((option) => option.value === data[field]);
 				const secondaryField = Array.isArray(fieldSchema.secondaryField) ? fieldSchema.secondaryField : [fieldSchema.secondaryField];
 				const secondaryValue = Array.isArray(option?.secondaryValue) ? option?.secondaryValue : [option?.secondaryValue];

package/dist/form/types/fieldTypes.d.ts

@@ -15,7 +15,8 @@ export interface RuntimeFieldExtensions {
     one_must_be_true?: boolean;
     computeOn?: boolean;
     labelPosition?: LabelPosition;
-    resetOnChange?: boolean;
+    /** Path of another field; when its value changes, this field's value is cleared. */
+    resetOnChange?: string;
     options?: unknown;
 }
 export interface BaseField extends RuntimeFieldExtensions {
@@ -36,14 +37,13 @@ interface WizardConfig {
     /** Navigation UI options */
     navigation?: {
         showSteps?: boolean;
-        showProgress?: boolean;
         allowJump?: boolean;
         hideStepNumbers?: boolean;
     };
     /** Label for the final submit button */
     submitLabel?: string;
-    /** Use URL-based routing instead of component state */
-    urlBased?: boolean;
+    /** Flatten step fields into top-level inputs (default: true). Set false to keep each step's fields under its key. */
+    flatten?: boolean;
 }
 interface StepField extends BaseField {
     type: 'step';
@@ -51,7 +51,6 @@ interface StepField extends BaseField {
     description?: string;
     options: Record<string, AnyField>;
     validateOnNext?: boolean;
-    canSkip?: boolean;
     nextLabel?: string;
     prevLabel?: string;
 }

package/dist/form/utils/dependentOptions.d.ts

@@ -0,0 +1,6 @@
+/** Options for a field whose list is keyed by another field's value: with
+ * depends_on, the list follows whatever is currently chosen at that path. */
+export declare function dependentOptions<T>(options: T[] | Record<string, T[]>, dependsOn: string | undefined, values: Record<string, unknown>): {
+    options: T[];
+    parentValue: unknown;
+};

package/dist/form/utils/dependentOptions.js

@@ -0,0 +1,21 @@
+import { getValueUsingPath } from "./getValueUsingPath.js";
+//#region src/form/utils/dependentOptions.ts
+/** Options for a field whose list is keyed by another field's value: with
+* depends_on, the list follows whatever is currently chosen at that path. */
+function dependentOptions(options, dependsOn, values) {
+	if (Array.isArray(options)) return {
+		options,
+		parentValue: void 0
+	};
+	const parentValue = dependsOn ? getValueUsingPath(values, dependsOn) : void 0;
+	if (parentValue === void 0 || parentValue === null) return {
+		options: [],
+		parentValue
+	};
+	return {
+		options: options[String(parentValue)] ?? [],
+		parentValue
+	};
+}
+//#endregion
+export { dependentOptions };

package/dist/form/utils/getParentValue.d.ts

@@ -1,3 +1,4 @@
-export declare function getParentValue(index: number | undefined, targetField: unknown, values: object, dependentPath: string, field: {
+/** `index` replaces a path's `[index]` placeholder when the field sits in a list row. */
+export declare function getParentValue(index: number | undefined, targetField: unknown, values: object, field: {
     depends_on?: string | undefined;
 }): unknown;

package/dist/form/utils/getParentValue.js

@@ -1,23 +1,18 @@
 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);
+/** `index` replaces a path's `[index]` placeholder when the field sits in a list row. */
+function getParentValue(index, targetField, values, field) {
+	const atIndex = (path) => index === void 0 ? path : path.replace("[index]", `[${index}]`);
+	if (typeof targetField === "object" && targetField !== null && !Array.isArray(targetField)) return !checkShowIfObject(targetField, values, index).includes(false);
+	if (field.depends_on) {
+		const dependsOnValue = getValueUsingPath(values, atIndex(field.depends_on));
 		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);
+		if (Array.isArray(targetField)) return targetField.includes(dependsOnValue) || targetField.includes(dependsOnText);
+		if (typeof targetField === "string") return dependsOnText !== void 0 && targetField.includes(dependsOnText);
+		return targetField === dependsOnValue;
 	}
-	return parentValue;
+	return getValueUsingPath(values, typeof targetField === "string" ? atIndex(targetField) : "");
 }
 //#endregion
 export { getParentValue };

package/dist/form/utils/getValueUsingPath.js

@@ -10,7 +10,7 @@ function getValueUsingPath(obj, path) {
 			const [arrayKey = "", indexStr = ""] = key.split("[");
 			const index = parseInt(indexStr.slice(0, -1), 10);
 			const list = container[arrayKey];
-			if (!Array.isArray(list) || isNaN(index)) return;
+			if (!Array.isArray(list) || Number.isNaN(index)) return;
 			current = list[index];
 		} else {
 			if (!(key in container)) return;

package/dist/graph/AnnotationBanner.d.ts

@@ -1,6 +1,6 @@
 import type { WorkflowJob } from './types.js';
 interface AnnotationBannerProps {
-    executedJobs: Record<string, WorkflowJob> | null | undefined;
+    executedJobs: Record<string, WorkflowJob>;
 }
 export declare function AnnotationBanner({ executedJobs }: AnnotationBannerProps): import("react").JSX.Element | null;
 export {};

package/dist/graph/AnnotationBanner.js

@@ -1,4 +1,8 @@
-import { ChevronDownIcon, ChevronRightIcon, ErrorIcon, InfoIcon, WarningIcon } from "../icons.js";
+import { BiError } from "../icons/bi/BiError.js";
+import { FaChevronDown } from "../icons/fa/FaChevronDown.js";
+import { FaInfoCircle } from "../icons/fa/FaInfoCircle.js";
+import { IoWarningOutline } from "../icons/io5/IoWarningOutline.js";
+import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
 import { keyedByContent } from "../components/keys.js";
 import cx from "classnames";
 import { useState } from "react";
@@ -11,21 +15,21 @@ var typeOrder = {
 };
 var typeConfig = {
 	error: {
-		icon: ErrorIcon,
+		icon: BiError,
 		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,
+		icon: IoWarningOutline,
 		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,
+		icon: FaInfoCircle,
 		label: "Notice",
 		accentClass: "text-blue-500",
 		bgClass: "bg-blue-500/5 dark:bg-blue-500/10",
@@ -48,6 +52,7 @@ function collectAnnotations(executedJobs, parentPath) {
 					title: annotation.title,
 					file: annotation.file,
 					line: annotation.line,
+					id: annotation.id,
 					jobName: fullJobName,
 					stepName: step?.name,
 					stepIndex
@@ -62,7 +67,6 @@ function collectAnnotations(executedJobs, parentPath) {
 }
 function AnnotationBanner({ executedJobs }) {
 	const [expanded, setExpanded] = useState(false);
-	if (!executedJobs) return null;
 	const annotations = collectAnnotations(executedJobs);
 	if (annotations.length === 0) return null;
 	const counts = {
@@ -71,7 +75,7 @@ function AnnotationBanner({ executedJobs }) {
 		notice: 0
 	};
 	for (const a of annotations) counts[a.type]++;
-	const ChevronIcon = expanded ? ChevronDownIcon : ChevronRightIcon;
+	const ChevronIcon = expanded ? FaChevronDown : LuChevronRight;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("rounded-lg border border-[var(--theme-border)] overflow-hidden", "bg-[var(--theme-panel-bg)]"),
 		children: [/* @__PURE__ */ jsxs("button", {

package/dist/graph/Collapse.d.ts

@@ -1,6 +1,6 @@
-import { type ReactNode } from 'react';
-export declare function Collapse({ expanded, children, releaseOverflow, }: {
+import type { ReactNode } from 'react';
+export declare function Collapse({ expanded, id, children, }: {
     expanded: boolean;
+    id?: string;
     children: ReactNode;
-    releaseOverflow?: boolean;
 }): import("react").JSX.Element;

package/dist/graph/Collapse.js

@@ -1,12 +1,11 @@
-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);
+function Collapse({ expanded, id, children }) {
 	return /* @__PURE__ */ jsx(AnimatePresence, {
 		initial: false,
 		children: expanded && /* @__PURE__ */ jsx(motion.div, {
+			id,
 			initial: {
 				height: 0,
 				opacity: 0
@@ -28,11 +27,7 @@ function Collapse({ expanded, children, releaseOverflow = true }) {
 					1
 				]
 			},
-			style: { overflow: overflowVisible ? "visible" : "hidden" },
-			onAnimationStart: () => setOverflowVisible(false),
-			onAnimationComplete: () => {
-				if (expanded && releaseOverflow) setOverflowVisible(true);
-			},
+			className: "overflow-hidden",
 			children
 		}, "collapse")
 	});

package/dist/graph/DependencyGraph.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
-import { type RunLink } from './types.js';
+import { type RunLink, type WorkflowJob } from './types.js';
 export type ViewMode = 'dag' | 'tree';
+export declare const addCleanupSteps: ({ jobs }: {
+    jobs: Record<string, WorkflowJob>;
+}) => Record<string, WorkflowJob>;
 interface GraphRun {
     id?: string | undefined;
     number?: number | undefined;
@@ -13,17 +16,15 @@ interface GraphRun {
     executedJobs?: Record<string, unknown> | undefined;
     links?: Record<string, RunLink> | undefined;
 }
-export default function DependencyGraph({ run, preview, initialScale, removeBorder, viewMode, setViewMode, }: {
+export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, }: {
     run: GraphRun;
     preview?: boolean;
-    initialScale?: number;
     removeBorder?: boolean | undefined;
     viewMode?: ViewMode;
     setViewMode?: (mode: ViewMode) => void;
 }): React.JSX.Element | undefined;
 export declare function DependencyGraphPreview(inputs: {
     yml?: Record<string, unknown>;
-    initialScale?: number;
     removeBorder?: boolean;
 }): React.JSX.Element;
 export {};