@parallelworks/ui 0.18.0 → 0.19.1

package/dist/form/SpecialTypes/FormikCustomDropdown.js

@@ -0,0 +1,122 @@
+import { isCategory } from "../../components/dropdownUtils.js";
+import Dropdown from "../../components/Dropdown.js";
+import { useFieldControlProps, useFieldRequired } from "../fieldContext.js";
+import { applySecondaryField, findSecondaryOption } from "../utils/secondaryField.js";
+import cx from "classnames";
+import { memo, useEffect, useEffectEvent, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import deepEqual from "fast-deep-equal";
+//#region src/form/SpecialTypes/FormikCustomDropdown.tsx
+function toComparableOptions(options) {
+	return options?.map((option) => {
+		if (typeof option === "string") return option;
+		if (isCategory(option)) return {
+			category: option.category,
+			options: option.options.map((o) => {
+				const base = {
+					label: o.label,
+					value: o.value,
+					disabled: o.disabled
+				};
+				return o.description !== void 0 ? {
+					...base,
+					description: o.description
+				} : base;
+			})
+		};
+		const base = {
+			label: option.label,
+			value: option.value,
+			disabled: option.disabled
+		};
+		return option.description !== void 0 ? {
+			...base,
+			description: option.description
+		} : base;
+	});
+}
+function arePropsEqual(prev, next) {
+	for (const key of Object.keys(next)) if (key === "options") {
+		if (!deepEqual(toComparableOptions(prev.options), toComparableOptions(next.options))) return false;
+	} else if (prev[key] !== next[key]) return false;
+	return true;
+}
+var FormikCustomDropdown_default = memo(function FormikCustomDropdown({ name, ariaLabel, options, setFormDirty, onChange, parentValue, className, secondaryField, disabled = false, loading = false, invalid = false, autoselect, value, allowCustomValue = false, customValueLabel, placeholder, currentValue, setFieldValue, setFieldTouched }) {
+	const required = useFieldRequired();
+	const controlProps = useFieldControlProps();
+	const prevParentRef = useRef(parentValue);
+	const handleChange = (val) => {
+		if (secondaryField && typeof options[0] !== "string") {
+			const option = findSecondaryOption(options, val);
+			if (option) applySecondaryField(secondaryField, option.secondaryValue, setFieldValue);
+		}
+		if (onChange) onChange(val);
+		setFieldValue(name, val);
+		setFieldTouched(name, true);
+		setFormDirty(true);
+	};
+	useEffect(() => {
+		prevParentRef.current = parentValue;
+	});
+	const prevOptions = useRef(null);
+	const syncAutoselect = useEffectEvent((options, autoselect) => {
+		if (deepEqual(prevOptions.current, toComparableOptions(options))) return;
+		if (prevOptions.current === null && currentValue !== void 0 && currentValue !== null) {
+			prevOptions.current = toComparableOptions(options);
+			return;
+		}
+		prevOptions.current = toComparableOptions(options);
+		if (autoselect === false || !options?.length) return;
+		if (autoselect === void 0) {
+			if (options.length && isCategory(options[0])) {
+				let optionCount = 0;
+				for (const category of options) {
+					if (isCategory(category)) optionCount += category.options.length;
+					if (optionCount > 1) return;
+				}
+			} else if (options.length !== 1) return;
+		}
+		if (!options?.find((option) => {
+			if (typeof option === "string") return option === currentValue;
+			else if (isCategory(option)) return option.options.some((subOption) => {
+				return subOption.value === currentValue;
+			});
+			return option.value === currentValue;
+		}) || autoselect) {
+			let val;
+			for (const option of options) if (typeof option === "string") {
+				val = option;
+				break;
+			} else if (isCategory(option)) {
+				const enabled = option.options.find((o) => !o.disabled);
+				if (enabled) {
+					val = enabled.value;
+					break;
+				}
+			} else if (!option.disabled) {
+				val = option.value;
+				break;
+			}
+			if (val !== void 0) handleChange(val);
+		}
+	});
+	useEffect(() => {
+		syncAutoselect(options, autoselect);
+	}, [options, autoselect]);
+	return /* @__PURE__ */ jsx(Dropdown, {
+		...controlProps,
+		textBoxClassName: cx(className, invalid && "invalid"),
+		ariaLabel,
+		required,
+		onChange: (val) => handleChange(val),
+		value: options?.length === 0 && !allowCustomValue ? value : currentValue,
+		options,
+		placeholder,
+		disabled,
+		loading,
+		allowCustomValue,
+		customValueLabel
+	});
+}, arePropsEqual);
+//#endregion
+export { FormikCustomDropdown_default as default };

package/dist/form/SpecialTypes/FormikCustomInput.js

@@ -0,0 +1,111 @@
+import { EyeIcon, EyeOffIcon } from "../../icons.js";
+import { useFieldControlProps, useFieldRequired } from "../fieldContext.js";
+import cx from "classnames";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useField, useFormikContext } from "formik";
+//#region src/form/SpecialTypes/FormikCustomInput.tsx
+var DEBOUNCE_MS = 500;
+function FormikCustomInput({ name, type, step, placeholder, onChange, disabled, min, max, sanitize, invalid = false, lowercase = false, minLength, maxLength, defaultValue = "", value }) {
+	const [field] = useField(name);
+	const required = useFieldRequired();
+	const controlProps = useFieldControlProps();
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const [showPassword, setShowPassword] = useState(false);
+	const isPassword = type === "password";
+	const [localValue, setLocalValue] = useState(value ?? field.value);
+	const isFocused = useRef(false);
+	const debounceRef = useRef(null);
+	useEffect(() => {
+		if (!isFocused.current) setLocalValue(value ?? field.value);
+	}, [field.value, value]);
+	const sanitizeName = useCallback((val) => {
+		if (sanitize === void 0) return lowercase ? val.toLowerCase() : val;
+		try {
+			const regexp = new RegExp(sanitize);
+			if (lowercase) val = val.toLowerCase();
+			return val.replace(regexp, "");
+		} catch {
+			console.error("Invalid regex for sanitization:", sanitize);
+		}
+		return val;
+	}, [sanitize, lowercase]);
+	const flushToFormik = useCallback((val) => {
+		if (onChange) onChange(val);
+		setFieldTouched(name, true);
+		setFieldValue(name, val);
+	}, [
+		name,
+		onChange,
+		setFieldTouched,
+		setFieldValue
+	]);
+	const handleChange = (e) => {
+		const text = sanitize ? sanitizeName(e.target.value) : e.target.value;
+		let val = text;
+		if (type === "number") {
+			const parsed = parseFloat(text);
+			val = isNaN(parsed) ? void 0 : parsed;
+		}
+		if (type === "password" && val === "") val = defaultValue;
+		setLocalValue(val);
+		clearTimeout(debounceRef.current ?? void 0);
+		debounceRef.current = setTimeout(() => flushToFormik(val), DEBOUNCE_MS);
+	};
+	const handleFocus = () => {
+		isFocused.current = true;
+	};
+	const handleBlur = () => {
+		isFocused.current = false;
+		clearTimeout(debounceRef.current ?? void 0);
+		const current = localValue;
+		if (current === void 0 || current === null) return;
+		const text = current.toString();
+		let val = text;
+		if (type === "number") {
+			const parsed = parseFloat(text);
+			if (Number.isNaN(parsed)) val = void 0;
+			else if (min !== void 0 && parsed < min) val = min;
+			else if (max !== void 0 && parsed > max) val = max;
+			else val = parsed;
+		}
+		setLocalValue(val);
+		flushToFormik(val);
+	};
+	const displayValue = isPassword && localValue === defaultValue ? "" : localValue ?? "";
+	const resolvedType = isPassword ? showPassword ? "text" : "password" : type === "string" ? "text" : type;
+	const input = /* @__PURE__ */ jsx("input", {
+		...controlProps,
+		"data-1p-ignore": true,
+		className: cx("w-full", disabled && "disabled", invalid && "invalid", isPassword && "pr-8"),
+		name,
+		value: displayValue,
+		type: resolvedType,
+		"aria-required": required || void 0,
+		disabled,
+		placeholder,
+		minLength,
+		maxLength,
+		onChange: handleChange,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		min,
+		max,
+		step
+	});
+	if (!isPassword) return input;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full",
+		children: [input, /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "absolute right-2 top-1/2 -translate-y-1/2 theme-muted-text",
+			onClick: () => setShowPassword((prev) => !prev),
+			disabled,
+			tabIndex: -1,
+			"aria-label": showPassword ? "Hide value" : "Show value",
+			children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "h-4 w-4" })
+		})]
+	});
+}
+//#endregion
+export { FormikCustomInput as default };

package/dist/form/SpecialTypes/FormikMultiSelectDropdown.js

@@ -0,0 +1,31 @@
+import MultiSelectDropdown from "../../components/MultiSelect.js";
+import { useFieldLabelledByProps, useFieldRequired } from "../fieldContext.js";
+import { jsx } from "react/jsx-runtime";
+import { useField, useFormikContext } from "formik";
+//#region src/form/SpecialTypes/FormikMultiSelectDropdown.tsx
+function FormikMultiSelectDropdown({ name, options, setFormDirty, onChange, disabled = false, loading = false, invalid = false, placeholder, compareBy }) {
+	const [field] = useField(name);
+	const required = useFieldRequired();
+	const labelledByProps = useFieldLabelledByProps();
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const handleChange = (next) => {
+		setFieldValue(name, next);
+		setFieldTouched(name, true);
+		setFormDirty(true);
+		onChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(MultiSelectDropdown, {
+		...labelledByProps,
+		textBoxClassName: invalid ? "invalid" : void 0,
+		options,
+		required,
+		value: Array.isArray(field.value) ? field.value : [],
+		onChange: handleChange,
+		disabled,
+		loading,
+		placeholder,
+		compareBy
+	});
+}
+//#endregion
+export { FormikMultiSelectDropdown as default };

package/dist/form/SpecialTypes/FormikNumericInput.js

@@ -0,0 +1,60 @@
+import { useFieldControlProps, useFieldRequired } from "../fieldContext.js";
+import cx from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useField, useFormikContext } from "formik";
+import { NumericFormat } from "react-number-format";
+//#region src/form/SpecialTypes/FormikNumericInput.tsx
+var DEBOUNCE_MS = 500;
+function FormikNumericInput({ name, placeholder, onChange, disabled, min, max, invalid = false }) {
+	const [field] = useField(name);
+	const required = useFieldRequired();
+	const controlProps = useFieldControlProps();
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const [localValue, setLocalValue] = useState(field.value);
+	const isFocused = useRef(false);
+	const debounceRef = useRef(null);
+	useEffect(() => {
+		if (!isFocused.current) setLocalValue(field.value);
+	}, [field.value]);
+	const flush = (val) => {
+		onChange?.(val);
+		setFieldTouched(name, true);
+		setFieldValue(name, val);
+	};
+	const handleBlur = () => {
+		isFocused.current = false;
+		clearTimeout(debounceRef.current ?? void 0);
+		let val = localValue;
+		if (val !== void 0) {
+			if (min !== void 0 && val < min) val = min;
+			if (max !== void 0 && val > max) val = max;
+		}
+		setLocalValue(val);
+		flush(val);
+	};
+	return /* @__PURE__ */ jsx(NumericFormat, {
+		...controlProps,
+		"data-1p-ignore": true,
+		className: cx("w-full", disabled && "disabled", invalid && "invalid"),
+		name,
+		...localValue === void 0 ? {} : { value: localValue },
+		"aria-required": required || void 0,
+		thousandSeparator: ",",
+		decimalScale: 20,
+		allowNegative: true,
+		disabled,
+		placeholder,
+		onValueChange: (v) => {
+			setLocalValue(v.floatValue);
+			clearTimeout(debounceRef.current ?? void 0);
+			debounceRef.current = setTimeout(() => flush(v.floatValue), DEBOUNCE_MS);
+		},
+		onFocus: () => {
+			isFocused.current = true;
+		},
+		onBlur: handleBlur
+	});
+}
+//#endregion
+export { FormikNumericInput as default };

package/dist/form/Wizard/WizardContainer.js

@@ -0,0 +1,138 @@
+import { useWizardState } from "./useWizardState.js";
+import { WizardNavigation } from "./WizardNavigation.js";
+import { WizardStepContent } from "./WizardStepContent.js";
+import { WizardStepIndicator } from "./WizardStepIndicator.js";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+//#region src/form/Wizard/WizardContainer.tsx
+function hasNestedError(stepErrors, fieldName) {
+	return typeof stepErrors === "object" && stepErrors !== null && fieldName in stepErrors;
+}
+function WizardContainer({ wizardConfig, values, onChange, onSubmit, className = "", labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false, setFieldValue, setFieldTouched }) {
+	const { validateForm, setTouched, touched } = useFormikContext();
+	const { config, steps, stepOrder } = wizardConfig;
+	const validateCurrentStep = useCallback(async (stepKey) => {
+		const stepConfig = steps[stepKey];
+		if (!stepConfig?.options) return true;
+		const stepFieldNames = Object.keys(stepConfig.options);
+		const shouldFlatten = config.flatten !== false;
+		const errors = await validateForm();
+		const hasStepErrors = shouldFlatten ? stepFieldNames.some((fieldName) => errors[fieldName]) : stepFieldNames.some((fieldName) => hasNestedError(errors[stepKey], fieldName));
+		if (hasStepErrors) {
+			const touchedFields = stepFieldNames.reduce((acc, fieldName) => {
+				acc[fieldName] = true;
+				return acc;
+			}, {});
+			if (shouldFlatten) setTouched({
+				...touched,
+				...touchedFields
+			}, false);
+			else setTouched({
+				...touched,
+				[stepKey]: touchedFields
+			}, false);
+		}
+		return !hasStepErrors;
+	}, [
+		steps,
+		config,
+		validateForm,
+		setTouched,
+		touched
+	]);
+	const { currentStep, visitedSteps, invalidSteps, isLastStep, canGoBack, goToNext, goToPrevious, jumpToStep } = useWizardState({
+		stepOrder,
+		steps,
+		validateStep: validateCurrentStep
+	});
+	const currentStepConfig = steps[currentStep];
+	const config_ = config.navigation || {};
+	const handleGoToNext = useCallback(async () => {
+		const success = await goToNext();
+		if (success) onChange?.(values);
+		return success;
+	}, [
+		goToNext,
+		values,
+		onChange
+	]);
+	const handleJumpToStep = useCallback((stepKey) => {
+		if (!config_.allowJump || !visitedSteps.has(stepKey)) return false;
+		return jumpToStep(stepKey);
+	}, [
+		jumpToStep,
+		config_.allowJump,
+		visitedSteps
+	]);
+	const handleSubmit = useCallback(async () => {
+		if (!isLastStep) return;
+		const errors = await validateForm();
+		if (Object.keys(errors).length > 0) {
+			const touchedFields = Object.keys(values).reduce((acc, fieldName) => {
+				acc[fieldName] = true;
+				return acc;
+			}, {});
+			setTouched({
+				...touched,
+				...touchedFields
+			}, false);
+			throw new Error("Please fix errors before submitting");
+		}
+		await onSubmit?.(values);
+	}, [
+		isLastStep,
+		validateForm,
+		values,
+		setTouched,
+		touched,
+		onSubmit
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [
+			config_.showSteps !== false && /* @__PURE__ */ jsx(WizardStepIndicator, {
+				stepOrder,
+				currentStep,
+				steps,
+				visitedSteps,
+				invalidSteps,
+				onStepClick: handleJumpToStep,
+				allowJump: config_.allowJump,
+				hideStepNumbers: config_.hideStepNumbers
+			}),
+			currentStepConfig && /* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: /* @__PURE__ */ jsx(WizardStepContent, {
+					currentStep,
+					stepConfig: currentStepConfig,
+					flatten: config.flatten,
+					values,
+					onValuesChange: onChange,
+					labelPosition,
+					missingFields,
+					spaceCompact,
+					setFormDirty: () => onChange?.(values),
+					workflowForm,
+					setFieldValue,
+					setFieldTouched
+				})
+			}),
+			/* @__PURE__ */ jsx(WizardNavigation, {
+				currentStep,
+				stepOrder,
+				canGoToNext: !isLastStep,
+				canGoBack,
+				isCurrentStepValid: !invalidSteps.has(currentStep),
+				nextLabel: currentStepConfig?.nextLabel,
+				prevLabel: currentStepConfig?.prevLabel,
+				submitLabel: config.submitLabel || "Execute",
+				onNext: handleGoToNext,
+				onPrevious: goToPrevious,
+				onSubmit: handleSubmit
+			})
+		]
+	});
+}
+//#endregion
+export { WizardContainer };

package/dist/form/Wizard/WizardNavigation.js

@@ -0,0 +1,92 @@
+import Loader from "../../components/Loader.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/Wizard/WizardNavigation.tsx
+function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel = "Submit", onNext, onPrevious, onSubmit }) {
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const isLastStep = stepOrder.indexOf(currentStep) === stepOrder.length - 1;
+	const handleNext = async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			if (!await onNext()) setError("Please fix errors before proceeding");
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "An error occurred");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	const handleSubmit = async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			await onSubmit();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "An error occurred");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", { children: [error && /* @__PURE__ */ jsx("div", {
+		className: "mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700",
+		children: error
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-3 justify-between pt-4",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onPrevious,
+			disabled: !canGoBack || isLoading,
+			className: "px-6 py-3 rounded-lg font-medium transition-all duration-200 border flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+			style: {
+				color: "var(--theme-app)",
+				borderColor: "var(--theme-border)",
+				backgroundColor: "var(--theme-app-bg)"
+			},
+			onMouseEnter: (e) => {
+				if (!(!canGoBack || isLoading)) e.currentTarget.style.backgroundColor = "var(--theme-hover)";
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.backgroundColor = "var(--theme-app-bg)";
+			},
+			"aria-label": "Go to previous step",
+			children: prevLabel || "← Previous"
+		}), isLastStep ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: handleSubmit,
+			disabled: !isCurrentStepValid || isLoading,
+			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-white flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
+			style: { backgroundColor: "var(--theme-element)" },
+			onMouseEnter: (e) => {
+				if (!(!isCurrentStepValid || isLoading)) e.currentTarget.style.filter = "brightness(0.9)";
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.filter = "brightness(1)";
+			},
+			"aria-label": submitLabel,
+			children: [isLoading && /* @__PURE__ */ jsx(Loader, {
+				size: 16,
+				full: false
+			}), submitLabel]
+		}) : /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: handleNext,
+			disabled: !canGoToNext || isLoading,
+			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-white flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
+			style: { backgroundColor: "var(--theme-element)" },
+			onMouseEnter: (e) => {
+				if (!(!canGoToNext || isLoading)) e.currentTarget.style.filter = "brightness(0.9)";
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.filter = "brightness(1)";
+			},
+			"aria-label": "Go to next step",
+			children: [isLoading && /* @__PURE__ */ jsx(Loader, {
+				size: 16,
+				full: false
+			}), nextLabel || "Next →"]
+		})]
+	})] });
+}
+//#endregion
+export { WizardNavigation };

package/dist/form/Wizard/WizardStepContent.js

@@ -0,0 +1,35 @@
+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, onValuesChange, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }) {
+	if (!stepConfig?.options) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-4 w-full",
+		children: [
+			stepConfig.title && /* @__PURE__ */ jsx("h2", {
+				className: "text-2xl font-bold mb-2",
+				style: { color: "var(--theme-app)" },
+				children: stepConfig.title
+			}),
+			stepConfig.description && /* @__PURE__ */ jsx("p", {
+				className: "mb-4 leading-relaxed",
+				style: { color: "var(--theme-muted-text-color)" },
+				children: stepConfig.description
+			}),
+			/* @__PURE__ */ jsx(FieldsFromOptions, {
+				options: stepConfig.options,
+				values,
+				setFormDirty,
+				setFieldValue,
+				setFieldTouched,
+				...flatten === false ? { parentInfo: {
+					parentName: currentStep,
+					fieldNamePrefix: `${currentStep}.`
+				} } : {},
+				...fieldsProps
+			}, currentStep)
+		]
+	});
+}
+//#endregion
+export { WizardStepContent };