@parallelworks/ui 0.36.0 → 0.38.0

package/dist/form/Wizard/WizardStepContent.js

@@ -1,9 +1,12 @@
 import { stepText } from "./utils.js";
+import { EditingScope, useFormEditing } from "../formEditing.js";
 import { FieldsFromOptions } from "../Form.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/form/Wizard/WizardStepContent.tsx
 function WizardStepContent({ currentStep, stepConfig, flatten = true, values, setFormDirty, setFieldValue, setFieldTouched, fieldNamePrefix = "", copy, ...fieldsProps }) {
+	const editing = useFormEditing();
 	if (!stepConfig.options) return null;
+	const path = editing ? [...editing.parent, currentStep] : null;
 	const parentInfo = copy !== void 0 ? {
 		parentName: currentStep,
 		fieldNamePrefix: `${fieldNamePrefix}${currentStep}[${copy}].`,
@@ -15,7 +18,7 @@ function WizardStepContent({ currentStep, stepConfig, flatten = true, values, se
 		parentName: fieldNamePrefix.slice(0, -1),
 		fieldNamePrefix
 	} : void 0;
-	return /* @__PURE__ */ jsxs("div", {
+	const content = /* @__PURE__ */ jsxs("div", {
 		className: "mb-4 w-full",
 		children: [
 			stepText(stepConfig.title) && /* @__PURE__ */ jsx("h2", {
@@ -28,17 +31,27 @@ function WizardStepContent({ currentStep, stepConfig, flatten = true, values, se
 				style: { color: "var(--theme-muted-text-color)" },
 				children: stepText(stepConfig.description)
 			}),
-			/* @__PURE__ */ jsx(FieldsFromOptions, {
-				options: stepConfig.options,
-				values,
-				setFormDirty,
-				setFieldValue,
-				setFieldTouched,
-				...parentInfo ? { parentInfo } : {},
-				...fieldsProps
-			}, copy === void 0 ? currentStep : `${currentStep}[${copy}]`)
+			/* @__PURE__ */ jsx(EditingScope, {
+				editing,
+				path,
+				children: /* @__PURE__ */ jsx(FieldsFromOptions, {
+					options: stepConfig.options,
+					values,
+					setFormDirty,
+					setFieldValue,
+					setFieldTouched,
+					...parentInfo ? { parentInfo } : {},
+					...fieldsProps
+				}, copy === void 0 ? currentStep : `${currentStep}[${copy}]`)
+			})
 		]
 	});
+	const instance = `${fieldNamePrefix}${currentStep}${copy === void 0 ? "" : `[${copy}]`}`;
+	return editing && path ? /* @__PURE__ */ jsx(editing.Row, {
+		path,
+		instance,
+		children: content
+	}) : content;
 }
 //#endregion
 export { WizardStepContent };

package/dist/form/Wizard/wizardPages.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The page each wizard of a form being edited shows, keyed by its list's path as JSON (`[]` for the
+ * form's own), so the editor can turn its pages as well as the wizard's own controls.
+ */
+export interface WizardPages {
+    page: (wizard: string) => number;
+    setPage: (wizard: string, index: number) => void;
+    /** How many pages the wizard draws, a repeated page's copies included, once it has drawn. */
+    count: (wizard: string) => number | undefined;
+    setCount: (wizard: string, count: number) => void;
+}
+export declare const WizardPagesContext: import("react").Context<WizardPages | null>;

package/dist/form/Wizard/wizardPages.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/form/Wizard/wizardPages.ts
+var WizardPagesContext = createContext(null);
+//#endregion
+export { WizardPagesContext };

package/dist/form/fieldRegistry.js

@@ -1,5 +1,4 @@
 import { useSlots } from "../components/Provider.js";
-import NumberField from "./Fields/NumberField.js";
 import BooleanField from "./Fields/BooleanField.js";
 import CheckboxGroupField from "./Fields/CheckboxGroupField.js";
 import ColorField from "./Fields/ColorField.js";
@@ -7,6 +6,7 @@ import DropdownField from "./Fields/DropdownField.js";
 import DurationField_default from "./Fields/DurationField.js";
 import LabelField from "./Fields/LabelField.js";
 import MultiDropdownField from "./Fields/MultiDropdownField.js";
+import NumberField from "./Fields/NumberField.js";
 import ObjectField from "./Fields/ObjectField.js";
 import RadioField from "./Fields/RadioField.js";
 import RangeField from "./Fields/RangeField.js";

package/dist/form/formEditing.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentType, type ReactNode } from 'react';
+/** Editing controls a form builder wraps around rendered fields. */
+export interface FormEditing {
+    /** Input path of the fields being rendered; empty at the top level. */
+    parent: string[];
+    Row: ComponentType<{
+        path: string[];
+        /** The field isn't drawn, such as one marked hidden. */
+        hidden?: boolean;
+        /** The field's name in the form's values, which tells one input's copies in a list's rows apart. */
+        instance?: string;
+        children?: ReactNode;
+    }>;
+    Add: ComponentType<{
+        parent: string[];
+    }>;
+}
+export declare const FormEditingContext: import("react").Context<FormEditing | null>;
+export declare function useFormEditing(): FormEditing | null;
+/** Fields rendered inside `children` belong to the input at `path`. */
+export declare function EditingScope({ editing, path, children, }: {
+    editing: FormEditing | null;
+    path: string[] | null;
+    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;

package/dist/form/formEditing.js

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/form/formEditing.tsx
+var FormEditingContext = createContext(null);
+function useFormEditing() {
+	return useContext(FormEditingContext);
+}
+/** Fields rendered inside `children` belong to the input at `path`. */
+function EditingScope({ editing, path, children }) {
+	if (!editing) return children;
+	return /* @__PURE__ */ jsx(FormEditingContext.Provider, {
+		value: path ? {
+			...editing,
+			parent: path
+		} : null,
+		children
+	});
+}
+//#endregion
+export { EditingScope, FormEditingContext, useFormEditing };

package/dist/form/index.js

@@ -1,20 +1,20 @@
 import { applySecondaryField, findSecondaryOption } from "./utils/secondaryField.js";
 import { enforceOneMustBeTrue, flattenGroups, impureSetValueFromPath, initializeValues, resolvedFlag } from "./lib.js";
+import { resolveFormLayout } from "./layout.js";
+import { resolveLayoutCSS } from "./layoutCSS.js";
 import { FieldProvider, useFieldControlProps, useFieldLabelledByProps, useFieldRequired } from "./fieldContext.js";
 import { FieldWrapper } from "./FieldWrapper.js";
-import { getInvalidDurationPaths, setDurationValidity } from "./Fields/durationValidity.js";
 import FormikCustomDropdown_default from "./SpecialTypes/FormikCustomDropdown.js";
 import FormikCustomInput from "./SpecialTypes/FormikCustomInput.js";
 import FormikNumericInput from "./SpecialTypes/FormikNumericInput.js";
 import { getPlaceholder } from "./utils/getPlaceholder.js";
-import NumberField from "./Fields/NumberField.js";
-import { ResourceOptionIcon } from "./Fields/ResourceOptionIcon.js";
-import { resolveFormLayout } from "./layout.js";
-import { resolveLayoutCSS } from "./layoutCSS.js";
 import { FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, STANDARD_MAX_DURATION_RANGE, collectPartitionDurationIssues, formatDuration, parseDuration } from "./utils/duration.js";
+import { getInvalidDurationPaths, setDurationValidity } from "./Fields/durationValidity.js";
+import NumberField from "./Fields/NumberField.js";
 import { FieldRegistryContext, Registry } from "./fieldRegistry.js";
 import { useParsedOpts } from "./useParsedOpts.js";
 import { DynamicDefaultsSync, DynamicForm, FieldsFromOptions, GroupHeader, MultiSelectionDropdown, collectFieldsWithDefaults, findSelfReferencingFieldNames, resolveMetaOverrides, useDynamicDefaultsSync } from "./Form.js";
+import { ResourceOptionIcon } from "./Fields/ResourceOptionIcon.js";
 import DropdownWrapper from "./SpecialTypes/DropdownWrapper.js";
 import FormikMultiSelectDropdown from "./SpecialTypes/FormikMultiSelectDropdown.js";
 export { DropdownWrapper, DynamicDefaultsSync, DynamicForm, FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, FieldProvider, FieldRegistryContext, FieldWrapper, FieldsFromOptions, FormikCustomDropdown_default as FormikCustomDropdown, FormikCustomInput, FormikMultiSelectDropdown, FormikNumericInput, GroupHeader, MultiSelectionDropdown, NumberField, Registry, ResourceOptionIcon, STANDARD_MAX_DURATION_RANGE, applySecondaryField, collectFieldsWithDefaults, collectPartitionDurationIssues, enforceOneMustBeTrue, findSecondaryOption, findSelfReferencingFieldNames, flattenGroups, formatDuration, getInvalidDurationPaths, getPlaceholder, impureSetValueFromPath, initializeValues, parseDuration, resolveFormLayout, resolveLayoutCSS, resolveMetaOverrides, resolvedFlag, setDurationValidity, useDynamicDefaultsSync, useFieldControlProps, useFieldLabelledByProps, useFieldRequired, useParsedOpts };

package/dist/graph/InputDialog.d.ts

@@ -0,0 +1,80 @@
+import { type ReactNode } from 'react';
+import type { FieldPatch, GraphEdit, InputPath, WorkflowEditing } from '../editing.js';
+import { type Json, type OpenOnAdd } from './editorFields.js';
+import { type InputsEditorStrings } from './editorStrings.js';
+import { type InputSource } from './inputRefs.js';
+import type { SettingsView } from './settingsViews.js';
+/** Input types by menu group, in the order the add menu lists them. */
+export declare const INPUT_TYPE_GROUPS: [keyof InputsEditorStrings['typeGroups'], string[]][];
+declare const TEXT_FIELDS: readonly ['label', 'description', 'tooltip'];
+declare const FLAG_FIELDS: readonly ['optional', 'hidden', 'disabled', 'ignore'];
+type CommonKey = (typeof TEXT_FIELDS)[number] | (typeof FLAG_FIELDS)[number];
+export declare function inputTypes(): string[];
+export declare function commonKeys(type: string): CommonKey[];
+/** Every key the dialog can write for an input of `type`. */
+export declare function offeredInputKeys(editing: WorkflowEditing, type: string): string[];
+/** The starting definition of a new input of `type`, with what the schema requires. */
+export declare function newInputDefinition(type: string): Json;
+/** An input a dialog creates when it saves, for a field that reads it. */
+export interface PendingInput {
+    name: string;
+    definition: Json;
+}
+export declare function allNames(editing: WorkflowEditing, map: Json, out: Set<string>): Set<string>;
+/** Where a dialog puts the inputs it creates: the top level, or one wizard step. */
+export interface InputHome {
+    parent: string[];
+    index?: number;
+}
+/** `edit` after the edits that add `created` at `home`, as one undo step. */
+export declare function withCreatedInputs(editing: WorkflowEditing, created: PendingInput[], home: InputHome, edit: GraphEdit | null): GraphEdit | null;
+export interface NewInputs {
+    source: InputSource;
+    all: Json;
+    home: InputHome;
+    pending: PendingInput[];
+    adopt: (created: PendingInput[]) => void;
+    dialog: ReactNode;
+    /** The form's edit with the inputs it made, or null when there's nothing to save. */
+    save: (edit: GraphEdit | null) => GraphEdit | null;
+}
+/** Inputs a dialog's fields can read, plus the ones it creates on save. */
+export declare function useNewInputs(inputs: Json | undefined, home?: InputHome): NewInputs;
+/** Every setting of one input; `onSave` gets the whole definition and the change to it. */
+interface InputDialogProps {
+    name: string;
+    definition: Json;
+    isNew: boolean;
+    /** Names already taken in the same container. */
+    siblings: string[];
+    allowStep: boolean;
+    /** The workflow's inputs, for settings that read another input. */
+    inputs?: Json | undefined;
+    /** Where inputs made for this dialog's settings will go. */
+    home?: InputHome | undefined;
+    /** A new input made for one field keeps the type that field needs. */
+    lockedType?: boolean;
+    /** `created` are inputs this dialog made for its own settings. */
+    onSave: (name: string, definition: Json, patch: Required<FieldPatch>, created: PendingInput[]) => void;
+    onDelete?: () => void;
+    onClose: () => void;
+    openOnAdd?: OpenOnAdd | undefined;
+}
+/** Saving an input as YAML text; `path` and `source` give an existing input's text with its comments. */
+export interface InputYaml {
+    source?: string | undefined;
+    path?: InputPath | undefined;
+    /** `created` are the inputs the form made for its settings before switching to the YAML. */
+    onSave: (name: string, yaml: string, created: PendingInput[]) => void;
+}
+/** An input's settings in a form, or as YAML when `yaml` says how to save it; switching carries the edits across. */
+export declare function InputDialog({ yaml, view, onViewChange, ...props }: InputDialogProps & {
+    yaml?: InputYaml | undefined;
+    view?: SettingsView | undefined;
+    onViewChange?: ((view: SettingsView) => void) | undefined;
+}): import("react").JSX.Element;
+/** A compact type chip for rows that list inputs. */
+export declare function TypeBadge({ type }: {
+    type: string;
+}): import("react").JSX.Element;
+export {};