@parallelworks/ui 0.19.0 → 0.19.1

package/dist/form/Wizard/WizardStepIndicator.js

@@ -0,0 +1,108 @@
+import cx from "classnames";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/Wizard/WizardStepIndicator.tsx
+function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, invalidSteps, onStepClick, allowJump = false, hideStepNumbers = false }) {
+	const currentIndex = useMemo(() => stepOrder.indexOf(currentStep), [stepOrder, currentStep]);
+	const getStepStatus = (stepKey, index) => {
+		if (stepKey === currentStep) return "active";
+		if (index < currentIndex) return "completed";
+		return "upcoming";
+	};
+	const handleStepClick = (stepKey) => {
+		if (!allowJump || !visitedSteps.has(stepKey)) return;
+		onStepClick?.(stepKey);
+	};
+	const isClickable = (stepKey) => {
+		return allowJump && visitedSteps.has(stepKey) && stepKey !== currentStep;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-start justify-between w-full mb-2 gap-4 py-2",
+		children: stepOrder.map((stepKey, index) => {
+			const stepConfig = steps[stepKey];
+			const status = getStepStatus(stepKey, index);
+			const isInvalid = invalidSteps.has(stepKey);
+			const isClickable_ = isClickable(stepKey);
+			const isDotActive = status === "active";
+			const isDotCompleted = status === "completed";
+			const isDotUpcoming = status === "upcoming";
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center flex-1 relative",
+				children: [
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => handleStepClick(stepKey),
+						disabled: !isClickable_,
+						className: cx("w-12 h-12 rounded-full border-3 flex items-center justify-center font-bold text-base transition-all duration-300 flex-shrink-0 relative", {
+							"cursor-pointer": isClickable_,
+							"cursor-not-allowed": !isClickable_
+						}, {
+							"text-white": isDotActive,
+							"bg-green-500 border-green-600 text-white shadow-md": isDotCompleted && !isInvalid,
+							"bg-(--theme-border) theme-border theme-muted-text shadow-sm": isDotUpcoming && !isInvalid,
+							"bg-(--theme-muted-panel-bg) theme-border theme-muted-text shadow-sm": !isDotActive && !isDotCompleted && !isDotUpcoming && !isInvalid,
+							"bg-red-50 border-red-500 text-red-600 shadow-sm": isInvalid && status !== "active"
+						}),
+						style: isDotActive ? {
+							backgroundColor: "var(--theme-element)",
+							borderColor: "var(--theme-element)",
+							color: "var(--theme-element-text)",
+							boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+							zIndex: 10
+						} : { zIndex: 10 },
+						"aria-label": `Step ${index + 1}: ${stepConfig?.title}`,
+						title: stepConfig?.title,
+						children: [!hideStepNumbers && /* @__PURE__ */ jsx("span", {
+							className: cx({ hidden: status === "completed" }),
+							children: index + 1
+						}), status === "completed" && /* @__PURE__ */ jsx("svg", {
+							"aria-hidden": "true",
+							className: "w-4 h-4",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ jsx("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 3,
+								d: "M5 13l4 4L19 7"
+							})
+						})]
+					}),
+					index < stepOrder.length - 1 && /* @__PURE__ */ jsx("div", {
+						className: cx("absolute h-1 transition-all duration-300", {
+							"bg-green-500": index < currentIndex,
+							"bg-(--theme-border)": index >= currentIndex,
+							"opacity-25": index >= currentIndex
+						}),
+						style: {
+							top: "24px",
+							left: "calc(50% + 24px)",
+							right: "-50%",
+							boxShadow: index < currentIndex ? "0 1px 2px rgba(34, 197, 94, 0.2)" : "none"
+						},
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "mt-2 text-center",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cx("text-sm text-center transition-colors duration-300 max-w-30", {
+								"font-bold text-green-600": isDotCompleted && !isInvalid,
+								"font-bold text-red-600": isInvalid && status !== "active",
+								"font-semibold theme-muted-text": !isDotActive && !isDotCompleted && !isInvalid,
+								"font-bold text-white": isDotActive
+							}),
+							style: isDotActive ? { color: "var(--theme-element)" } : {},
+							children: stepConfig?.title
+						}), stepConfig?.description && /* @__PURE__ */ jsx("div", {
+							className: "text-xs theme-muted-text mt-1 text-center max-w-30",
+							children: stepConfig.description
+						})]
+					})
+				]
+			}, stepKey);
+		})
+	});
+}
+//#endregion
+export { WizardStepIndicator };

package/dist/form/Wizard/useWizardState.js

@@ -0,0 +1,118 @@
+import { useCallback, useState } from "react";
+//#region src/form/Wizard/useWizardState.ts
+function useWizardState({ stepOrder, steps, validateStep, initialStep }) {
+	const firstStep = initialStep || stepOrder[0] || "";
+	const [currentStep, setCurrentStep] = useState(firstStep);
+	const [visitedSteps, setVisitedSteps] = useState(/* @__PURE__ */ new Set([firstStep]));
+	const [invalidSteps, setInvalidSteps] = useState(/* @__PURE__ */ new Set());
+	const currentStepIndex = stepOrder.indexOf(currentStep);
+	const isLastStep = currentStepIndex === stepOrder.length - 1;
+	const canGoBack = currentStepIndex > 0;
+	/**
+	* Mark step as visited
+	*/
+	const markStepVisited = useCallback((stepKey) => {
+		setVisitedSteps((prev) => /* @__PURE__ */ new Set([...prev, stepKey]));
+	}, []);
+	/**
+	* Mark step as invalid
+	*/
+	const markStepInvalid = useCallback((stepKey, invalid) => {
+		setInvalidSteps((prev) => {
+			const next = new Set(prev);
+			if (invalid) next.add(stepKey);
+			else next.delete(stepKey);
+			return next;
+		});
+	}, []);
+	const goToNext = useCallback(async () => {
+		if (isLastStep) return false;
+		if (steps[currentStep]?.validateOnNext !== false) {
+			if (!await validateStep(currentStep)) {
+				markStepInvalid(currentStep, true);
+				return false;
+			}
+		}
+		markStepInvalid(currentStep, false);
+		const nextStepKey = stepOrder[currentStepIndex + 1];
+		setCurrentStep(nextStepKey ?? "");
+		markStepVisited(nextStepKey ?? "");
+		return true;
+	}, [
+		currentStep,
+		currentStepIndex,
+		isLastStep,
+		steps,
+		stepOrder,
+		validateStep,
+		markStepInvalid,
+		markStepVisited
+	]);
+	const goToPrevious = useCallback(() => {
+		if (!canGoBack) return;
+		const prevStepKey = stepOrder[currentStepIndex - 1];
+		setCurrentStep(prevStepKey ?? "");
+	}, [
+		canGoBack,
+		currentStepIndex,
+		stepOrder
+	]);
+	const jumpToStep = useCallback((stepKey) => {
+		if (!stepOrder.includes(stepKey)) return false;
+		if (!visitedSteps.has(stepKey) && stepKey !== currentStep) return false;
+		setCurrentStep(stepKey);
+		return true;
+	}, [
+		stepOrder,
+		visitedSteps,
+		currentStep
+	]);
+	/**
+	* Reset wizard to initial state
+	*/
+	const reset = useCallback(() => {
+		setCurrentStep(firstStep);
+		setVisitedSteps(/* @__PURE__ */ new Set([firstStep]));
+		setInvalidSteps(/* @__PURE__ */ new Set());
+	}, [firstStep]);
+	/**
+	* Get current wizard state
+	*/
+	const getState = useCallback(() => {
+		return {
+			currentStep,
+			visitedSteps,
+			invalidSteps,
+			stepOrder,
+			totalSteps: stepOrder.length,
+			isLastStep,
+			canProceedToNext: !isLastStep,
+			canGoBack
+		};
+	}, [
+		currentStep,
+		visitedSteps,
+		invalidSteps,
+		stepOrder,
+		isLastStep,
+		canGoBack
+	]);
+	return {
+		currentStep,
+		visitedSteps,
+		invalidSteps,
+		isLastStep,
+		canGoBack,
+		currentStepIndex,
+		totalSteps: stepOrder.length,
+		goToNext,
+		goToPrevious,
+		jumpToStep,
+		reset,
+		markStepVisited,
+		markStepInvalid,
+		getState
+	};
+}
+//#endregion
+export { useWizardState };

package/dist/form/Wizard/utils.js

@@ -0,0 +1,34 @@
+//#region src/form/Wizard/utils.ts
+function isWizardMeta(value) {
+	return typeof value === "object" && value !== null && "wizard" in value;
+}
+function isStepField(field) {
+	return typeof field === "object" && field !== null && "type" in field && field.type === "step";
+}
+function parseWizardConfig(options) {
+	const meta = options["$meta"];
+	const wizardConfig = isWizardMeta(meta) ? meta.wizard : void 0;
+	if (!wizardConfig || wizardConfig.mode !== "wizard") return null;
+	const steps = {};
+	const stepOrder = [];
+	const otherFields = {};
+	Object.entries(options).forEach(([key, field]) => {
+		if (key === "$meta") return;
+		if (isStepField(field)) {
+			steps[key] = field;
+			stepOrder.push(key);
+		} else otherFields[key] = field;
+	});
+	if (stepOrder.length === 0) {
+		console.warn("Wizard mode enabled but no steps found");
+		return null;
+	}
+	return {
+		config: wizardConfig,
+		steps,
+		stepOrder,
+		otherFields
+	};
+}
+//#endregion
+export { parseWizardConfig };

package/dist/form/fieldContext.js

@@ -0,0 +1,26 @@
+import { createContext, useContext } from "react";
+//#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
+export { FieldProvider, useFieldControlProps, useFieldLabelledByProps, useFieldRequired };

package/dist/form/fieldRegistry.js

@@ -0,0 +1,50 @@
+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";
+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 ObjectField from "./Fields/ObjectField.js";
+import RadioField from "./Fields/RadioField.js";
+import RangeField from "./Fields/RangeField.js";
+import StepField from "./Fields/StepField.js";
+import StringField_default from "./Fields/StringField.js";
+import TextAreaField from "./Fields/TextAreaField.js";
+import { Suspense, createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/form/fieldRegistry.tsx
+var CORE_FIELD_COMPONENTS = {
+	string: StringField_default,
+	password: StringField_default,
+	number: NumberField,
+	boolean: BooleanField,
+	dropdown: DropdownField,
+	textarea: TextAreaField,
+	range: RangeField,
+	duration: DurationField_default,
+	radio: RadioField,
+	label: LabelField,
+	color: ColorField,
+	"multi-dropdown": MultiDropdownField,
+	"checkbox-group": CheckboxGroupField,
+	object: ObjectField,
+	step: StepField
+};
+var FieldRegistryContext = createContext({});
+/** Returns null for field types no registry knows. Per-form `fields` win over
+* the provider's `slots.formFields`, which win over the core registry. */
+function Registry(props) {
+	const injected = useContext(FieldRegistryContext);
+	const { formFields } = useSlots();
+	const Component = injected[props.field.type] ?? formFields?.[props.field.type] ?? CORE_FIELD_COMPONENTS[props.field.type];
+	if (!Component) return null;
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(Component, { ...props })
+	});
+}
+//#endregion
+export { FieldRegistryContext, Registry };