@parallelworks/ui 0.38.0 → 0.40.0

package/dist/graph/editorFields.js

@@ -9,18 +9,20 @@ import { Button } from "../components/Button.js";
 import { ghostButtonClasses, primaryButtonClasses } from "../components/ghostButton.js";
 import { FilterPill } from "../components/FilterPill.js";
 import { IconButton } from "../components/IconButton.js";
-import { Textarea } from "../components/Input.js";
+import { Input, Textarea } from "../components/Input.js";
 import { Toggle } from "../components/Toggle.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
-import { useFieldLint } from "./fieldProblems.js";
 import { asRecord } from "./records.js";
+import { useFieldLint } from "./fieldProblems.js";
 import { SuggestionInput } from "./SuggestionInput.js";
 import cx from "classnames";
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/editorFields.tsx
 var EXPRESSION = /^\$\{\{.*\}\}$/;
+var ENV_KEY = /^[a-zA-Z0-9_]+$/;
 var EMPTY_EXPRESSION = /^\$\{\{\s*\}\}$/;
+var DURATION = /^(\d+)(d|h|m|s)?$/;
 function withoutUndefined(value) {
 	return Object.fromEntries(Object.entries(value).filter(([, item]) => item !== void 0));
 }
@@ -59,10 +61,36 @@ function diffPatch(original, next) {
 function isEmptyPatch(patch) {
 	return Object.keys(patch.set).length === 0 && patch.unset.length === 0;
 }
+function conditionText(value) {
+	return typeof value === "boolean" ? String(value) : text(value);
+}
+function parseCondition(value) {
+	const trimmed = value.trim();
+	if (!trimmed) return;
+	if (trimmed === "true" || trimmed === "false") return trimmed === "true";
+	return trimmed;
+}
+function durationError(value, t, pattern = DURATION) {
+	const trimmed = value.trim();
+	return !trimmed || pattern.test(trimmed) || EXPRESSION.test(trimmed) ? void 0 : t.invalidDuration;
+}
 function expressionError(value, t) {
 	const trimmed = value.trim();
 	return !trimmed || EXPRESSION.test(trimmed) && !EMPTY_EXPRESSION.test(trimmed) ? void 0 : t.invalidExpressionValue;
 }
+function orUndefined(value) {
+	return value.trim() ? value.trim() : void 0;
+}
+function countError(value, min, message) {
+	const trimmed = value.trim();
+	if (!trimmed || EXPRESSION.test(trimmed)) return;
+	return /^\d+$/.test(trimmed) && Number(trimmed) >= min ? void 0 : message;
+}
+function parseCount(value) {
+	const trimmed = value.trim();
+	if (!trimmed) return;
+	return /^\d+$/.test(trimmed) ? Number(trimmed) : trimmed;
+}
 function parseJson(value) {
 	try {
 		return {
@@ -76,6 +104,39 @@ function parseJson(value) {
 function unchangedValue(text, original, nested = false) {
 	return original !== void 0 && text === (nested ? JSON.stringify(original) : String(original));
 }
+/** Rows for a map; with `nested` false a non-scalar is shown as its JSON text and saved as a string. */
+function rowsFrom(value, nested = true) {
+	return Object.entries(asRecord(value)).map(([key, item]) => isScalar(item) ? {
+		key,
+		value: String(item),
+		original: item
+	} : nested ? {
+		key,
+		value: JSON.stringify(item),
+		nested: true,
+		original: item
+	} : {
+		key,
+		value: JSON.stringify(item) ?? ""
+	});
+}
+function rowsTo(rows, parse) {
+	if (rows.length === 0) return;
+	return Object.fromEntries(rows.map((row) => [row.key.trim(), unchangedValue(row.value, row.original, row.nested) ? row.original : row.nested ? parseJson(row.value).value : parse(row.value)]));
+}
+function rowsError(rows, keyPattern, keyMessage, t, valueError) {
+	const keys = rows.map((row) => row.key.trim());
+	for (const [i, row] of rows.entries()) {
+		const key = keys[i] ?? "";
+		if (!keyPattern.test(key)) return keyMessage;
+		if (keys.indexOf(key) !== i) return t.duplicateKey;
+		const error = row.nested ? parseJson(row.value).ok ? void 0 : t.invalidJson : valueError?.(row.value);
+		if (error) return error;
+	}
+}
+function flagOf(value) {
+	return typeof value === "boolean" || typeof value === "string" ? value : void 0;
+}
 function flagError(value, t) {
 	return typeof value === "string" ? expressionError(value, t) : void 0;
 }
@@ -234,6 +295,86 @@ function AddRowButton({ label, onClick }) {
 		children: label
 	}) });
 }
+function KeyValueEditor({ rows, onChange, error, valuePlaceholder, keyPlaceholder, addLabel, valueSuggestions = [], lint = false }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			withPositionKeys(rows).map(({ key, item: row }, i) => /* @__PURE__ */ jsx(KeyValueRow, {
+				row,
+				onChange: (next) => onChange(updateAt(rows, i, next)),
+				onRemove: () => onChange(removeAt(rows, i)),
+				keyPlaceholder: keyPlaceholder ?? t.key,
+				valuePlaceholder: valuePlaceholder ?? t.value,
+				valueSuggestions,
+				lint
+			}, key)),
+			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(AddRowButton, {
+				label: addLabel ?? t.addRow,
+				onClick: () => onChange([...rows, {
+					key: "",
+					value: ""
+				}])
+			})
+		]
+	});
+}
+function KeyValueRow({ row, onChange, onRemove, keyPlaceholder, valuePlaceholder, valueSuggestions, lint: linted }) {
+	const t = useGraphEditorStrings();
+	const id = useId();
+	const lint = useFieldLint(linted ? row.key.trim() || void 0 : void 0, id, row.value, (value) => onChange({
+		...row,
+		value
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "w-2/5",
+						children: /* @__PURE__ */ jsx(Input, {
+							mono: true,
+							"aria-label": t.key,
+							placeholder: keyPlaceholder,
+							value: row.key,
+							onChange: (e) => onChange({
+								...row,
+								key: e.target.value
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex-1",
+						title: row.nested ? t.jsonValue : void 0,
+						children: /* @__PURE__ */ jsx(SuggestionInput, {
+							id,
+							ariaLabel: t.value,
+							placeholder: valuePlaceholder,
+							value: row.value,
+							suggestions: valueSuggestions.map((value) => ({ value })),
+							onChange: (value) => onChange({
+								...row,
+								value
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+						label: t.removeRow,
+						variant: "ghost",
+						size: "sm",
+						onClick: onRemove
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(FieldError, { message: lint.message }),
+			lint.fixes
+		]
+	});
+}
 function updateAt(items, index, item) {
 	return items.map((current, i) => i === index ? item : current);
 }
@@ -391,4 +532,4 @@ function DialogShell({ title, onClose, onSubmit, saveDisabled, dirty, locked = f
 	});
 }
 //#endregion
-export { AddRowButton, ChoiceButtons, DialogShell, EXPRESSION, ExpressionToggle, FieldError, FieldLabel, GROWING_AREA, GrowingTextarea, KeyHint, LabelledField, Section, SectionMemory, StringListEditor, SuggestedInput, ToggleField, asRecord, diffPatch, expressionError, flagError, flagValue, isEmptyPatch, isScalar, labelled, openOnAddOf, parseJson, parseScalar, removeAt, sameValue, text, unchangedValue, updateAt, useGrowingArea, useSectionMemory, withoutUndefined };
+export { AddRowButton, ChoiceButtons, DURATION, DialogShell, ENV_KEY, EXPRESSION, ExpressionToggle, FieldError, FieldLabel, GROWING_AREA, GrowingTextarea, KeyHint, KeyValueEditor, LabelledField, Section, SectionMemory, StringListEditor, SuggestedInput, ToggleField, asRecord, conditionText, countError, diffPatch, durationError, expressionError, flagError, flagOf, flagValue, isEmptyPatch, isScalar, labelled, openOnAddOf, orUndefined, parseCondition, parseCount, parseJson, parseScalar, removeAt, rowsError, rowsFrom, rowsTo, sameValue, text, unchangedValue, updateAt, useGrowingArea, useSectionMemory, withoutUndefined };

package/dist/graph/editorRows.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+import { type Point } from './editorPrimitives.js';
+import { type EdgeSelection } from './graphEditorState.js';
+/** Drop indicators, the connection line and the selection, drawn in the graph's own coordinates. */
+export declare function GraphEditorCanvas(): import("react").JSX.Element | null;
+/** A multi-job box's handle for moving all its jobs at once. */
+export declare function BoxGrip({ jobs }: {
+    jobs: string[];
+}): import("react").JSX.Element | null;
+/** A job row made draggable, with its menu and matrix badge; shift-click selects it. */
+export declare function EditableJobRow({ job, label, badge, children, }: {
+    job: string;
+    label: string;
+    badge?: boolean;
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+/**
+ * A node's connector circles, where the graph draws its connector dots. Drag from the
+ * right one to add jobs that depend on the node, from the left one to add what it needs.
+ */
+export declare function NodePorts({ jobs, left, right, drawLeft, drawRight, zIndex, }: {
+    jobs: string[];
+    left: Point;
+    right: Point;
+    drawLeft: boolean;
+    drawRight: boolean;
+    zIndex: number;
+}): import("react").JSX.Element | null;
+/** A step row made draggable within its job, with its menu. */
+export declare function EditableStepRow({ job, index, label, children, }: {
+    job: string;
+    index: number;
+    label: string;
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export declare function AddStepButton({ job }: {
+    job: string;
+}): import("react").JSX.Element | null;
+/** Connector hit area: a click selects the dependency, shift adds it, a right-click opens its menu. */
+export declare function EdgeHitPath({ d, edge }: {
+    d: string;
+    edge: EdgeSelection;
+}): import("react").JSX.Element | null;
+/** A selected connector's two ends; dragging one onto another job or node moves that end there. */
+export declare function EdgeEnds({ edge, start, end, zIndex, }: {
+    edge: EdgeSelection;
+    start: Point;
+    end: Point;
+    zIndex: number;
+}): import("react").JSX.Element | null;
+/** Shown in place of the graph when the workflow has no jobs yet. */
+/** The canvas of a graph with no jobs, which takes the graph's keys, so undo and paste still work. */
+export declare function EmptyGraphEditor({ containerRef, overlays, height, removeBorder, }: {
+    containerRef: (el: HTMLDivElement | null) => void;
+    overlays: ReactNode;
+    height: string;
+    removeBorder?: boolean | undefined;
+}): import("react").JSX.Element;