@parallelworks/ui 0.40.1 → 0.42.0

package/dist/form/Fields/StringField.js

@@ -1,13 +1,33 @@
+import { LuEye } from "../../icons/lu/LuEye.js";
+import { LuEyeOff } from "../../icons/lu/LuEyeOff.js";
 import { FieldWrapper } from "../FieldWrapper.js";
-import FormikCustomInput from "../SpecialTypes/FormikCustomInput.js";
+import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
 //#region src/form/Fields/StringField.tsx
-var StringField_default = memo(function StringField(props) {
-	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, currentValue } = props;
-	const fieldName = field.name ?? "";
-	const value = field.prefillDefault ? currentValue : void 0;
+function StringField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact }) {
+	const [value, change] = useFieldValue(field.name ?? "");
+	const [revealed, setRevealed] = useState(false);
+	const password = field.type === "password";
+	const fallback = field.default ?? "";
+	const disallowed = useMemo(() => {
+		if (field.sanitize === void 0) return;
+		try {
+			return new RegExp(field.sanitize, "g");
+		} catch {
+			console.error("Invalid regex for sanitization:", field.sanitize);
+			return;
+		}
+	}, [field.sanitize]);
+	const handleChange = (e) => {
+		const cased = field.lowercase ? e.target.value.toLowerCase() : e.target.value;
+		const text = disallowed ? cased.replace(disallowed, "") : cased;
+		const next = password && text === "" ? fallback : text;
+		onChange?.(next);
+		change(next);
+	};
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
 		label,
@@ -15,24 +35,36 @@ var StringField_default = memo(function StringField(props) {
 		description: field.description,
 		labelPosition,
 		spaceCompact,
-		children: /* @__PURE__ */ jsx(FormikCustomInput, {
-			invalid: missing,
-			name: fieldName,
-			type: field.type,
-			lowercase: field.lowercase,
-			placeholder: field.type === "password" && field.placeholder === void 0 ? "•".repeat((field.default ?? "").toString().length > 0 ? 16 : 0) : getPlaceholder(field.placeholder, field.default),
-			disabled,
-			step: field.step,
-			min: field.min,
-			max: field.max,
-			minLength: field.minLength,
-			maxLength: field.maxLength,
-			sanitize: field.sanitize,
-			defaultValue: field.default,
-			value,
-			...onChange && { onChange }
-		}, field.name)
+		children: ({ id, describedBy }) => {
+			const input = /* @__PURE__ */ jsx("input", {
+				id,
+				"aria-describedby": describedBy,
+				"data-1p-ignore": true,
+				className: clsx("w-full", disabled && "disabled", missing && "invalid", password && "pr-8"),
+				name: field.name,
+				value: password && value === fallback ? "" : value ?? "",
+				type: password && !revealed ? "password" : "text",
+				"aria-required": field.optional ? void 0 : true,
+				disabled,
+				placeholder: password && field.placeholder === void 0 ? "•".repeat(fallback.toString().length > 0 ? 16 : 0) : getPlaceholder(field.placeholder, field.default),
+				minLength: field.minLength,
+				maxLength: field.maxLength,
+				onChange: handleChange
+			});
+			return password ? /* @__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: () => setRevealed((shown) => !shown),
+					disabled,
+					tabIndex: -1,
+					"aria-label": revealed ? "Hide value" : "Show value",
+					children: revealed ? /* @__PURE__ */ jsx(LuEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(LuEye, { className: "h-4 w-4" })
+				})]
+			}) : input;
+		}
 	});
-});
+}
 //#endregion
-export { StringField_default as default };
+export { StringField as default };

package/dist/form/Fields/TextAreaField.js

@@ -1,12 +1,12 @@
 import { FieldWrapper } from "../FieldWrapper.js";
+import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
-import { Field } from "formik";
 //#region src/form/Fields/TextAreaField.tsx
 function TextAreaField(props) {
 	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact } = props;
-	const fieldName = field.name ?? "";
+	const [value, change] = useFieldValue(field.name ?? "");
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
 		label,
@@ -14,18 +14,20 @@ function TextAreaField(props) {
 		description: field.description,
 		labelPosition,
 		spaceCompact,
-		children: ({ id, describedBy }) => /* @__PURE__ */ jsx(Field, {
-			className: cx("theme-input h-[82px] w-full rounded leading-4 overflow-y-scroll", disabled && "disabled", missing && "border-red-600 focus:border-red-600 focus:ring-red-500"),
-			as: "textarea",
+		children: ({ id, describedBy }) => /* @__PURE__ */ jsx("textarea", {
+			className: clsx("theme-input h-[82px] w-full rounded leading-4 overflow-y-scroll", disabled && "disabled", missing && "border-red-600 focus:border-red-600 focus:ring-red-500"),
 			id,
 			"aria-describedby": describedBy,
 			"aria-required": field.optional ? void 0 : true,
-			name: fieldName,
-			type: "search",
+			name: field.name,
+			value: value ?? "",
 			placeholder: getPlaceholder(field.placeholder, field.default),
 			disabled,
-			...onChange && { onChange }
-		}, field.name)
+			onChange: (e) => {
+				onChange?.(e.target.value);
+				change(e.target.value);
+			}
+		})
 	});
 }
 //#endregion

package/dist/form/Form.d.ts

@@ -1,5 +1,4 @@
-import { type FormikProps, type FormikValues } from 'formik';
-import React, { type SetStateAction } from 'react';
+import { type UseFormReturn } from 'react-hook-form';
 import type { WorkflowVariables } from '../engine.js';
 import { type FieldComponent } from './fieldRegistry.js';
 interface FormMeta {
@@ -15,7 +14,8 @@ export declare function resolveMetaOverrides(options: {
 };
 /** Cheap signature of every list's length; gates the expensive collect walk. */
 export declare function listLengthsSignature(options: Record<string, unknown>, values?: Record<string, unknown>, prefix?: string): string;
-/** Collects every field with a `default` for the form-level sync to track. */
+/** Collects every field with a `default` for the form-level sync to track, named as the form store
+ * names it: a row's fields by `list.0.field`. */
 export declare function collectFieldsWithDefaults(options: Record<string, unknown>, values?: Record<string, unknown>, prefix?: string): Array<{
     name: string;
     defaultValue: unknown;
@@ -23,8 +23,8 @@ export declare function collectFieldsWithDefaults(options: Record<string, unknow
 }>;
 export declare function defaultReferencesField(defaultValue: unknown, fieldPath: string): boolean;
 export declare function findSelfReferencingFieldNames(schema: Record<string, unknown>, values?: Record<string, unknown>): string[];
-/** Resolves schema defaults into form values as dependencies change. Store-agnostic so the Formik
- * form and hosts with their own store share one implementation. */
+/** Resolves schema defaults into form values as dependencies change. Store-agnostic so the form and
+ * hosts with their own store share one implementation. */
 export declare function useDynamicDefaultsSync({ options, values, setValue, isTouched, }: {
     options: Record<string, unknown>;
     values: Record<string, unknown>;
@@ -34,65 +34,46 @@ export declare function useDynamicDefaultsSync({ options, values, setValue, isTo
 export declare function DynamicDefaultsSync({ options }: {
     options: Record<string, unknown>;
 }): null;
-export declare function GroupHeader({ children, open, setOpen, title, }: {
-    children?: React.ReactNode;
-    open: boolean;
-    setOpen: React.Dispatch<SetStateAction<boolean>>;
-    title: React.ReactNode;
-}): React.JSX.Element;
-export type TSetFormDirty = (dirty: boolean) => void;
-interface MultiSelectOption {
-    label: string;
-    secondaryLabel?: string;
-    value: string | boolean | number;
-    selected?: boolean;
+export type FormValues = Record<string, unknown>;
+/** Called by a field marked `one_must_be_true` in a list's row, so the list can keep one row on. */
+type RowFlagChange = (fieldName: string, index: number, changeOtherValuesTo?: string | boolean, keepOneValueOf?: string | boolean, currentValue?: string | boolean) => void;
+/** Where fields that are part of another field, as an object's or a list row's, keep their values. */
+export interface ParentInfo {
+    computeOn?: boolean | undefined;
+    fieldNamePrefix: string;
+    arrayIndex?: number | undefined;
+    onChange?: RowFlagChange | undefined;
 }
-export declare function MultiSelectionDropdown({ name, label, invalid, options: initialOptions, setFormDirty, onChange, parentValue, }: {
-    name: string;
-    label: string;
-    invalid?: boolean;
-    options?: (string | MultiSelectOption)[];
-    setFormDirty: TSetFormDirty;
-    onChange?: ((val: unknown) => void) | undefined;
-    parentValue?: unknown;
-}): React.JSX.Element;
-export declare function FieldsFromOptions({ options, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition, missingFields, spaceCompact, workflowForm, }: {
+/** Renders a schema's fields. Inside another field, `parentInfo` says where their values sit. */
+export declare function FieldsFromOptions({ options, parentInfo, labelPosition, spaceCompact, }: {
     options: Record<string, unknown>;
-    values: Record<string, unknown>;
-    setFormDirty: TSetFormDirty;
-    setFieldValue: (field: string, value: unknown, shouldValidate?: boolean) => void;
-    setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => void;
-    /** If fields are part of other field, this is the info needed*/
-    parentInfo?: {
-        computeOn?: boolean | undefined;
-        parentName: string;
-        fieldNamePrefix: string;
-        arrayIndex?: number | undefined;
-        onChange?: (fieldName: string, index: number, changeOtherValuesTo?: string | boolean, keepOneValueOf?: string | boolean, currentValue?: string | boolean) => void;
-    } | undefined;
+    parentInfo?: ParentInfo | undefined;
     labelPosition?: 'left' | 'top' | undefined;
-    missingFields?: string[];
     spaceCompact?: boolean;
-    /** Prevents deletion of hidden+ignored field values (workflow forms filter at submit time) */
-    workflowForm?: boolean | undefined;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 export interface DynamicFormProps {
+    /**
+     * The form to render into, from the host's own `useForm()`, which then reads and drives it:
+     * `formState.isDirty`, `getValues`, `reset`, `trigger`. Without one, the form keeps its own.
+     */
+    form?: UseFormReturn<FormValues>;
     /** Enables validated layout-only CSS declarations on authored layout nodes. */
     allowLayoutCSS?: boolean;
     formJSONs: Record<string, unknown>;
+    /** Loads `initialValues` again whenever they change, as Formik's `enableReinitialize` did. */
     reinitialize?: boolean;
-    setFormDirty?: (dirty: boolean) => void;
     initialValues: object;
-    setValues?: (values: Record<string, unknown>) => void;
-    formikRef?: React.RefObject<FormikProps<FormikValues> | null>;
+    /** Every change to the form's values, as it happens. */
+    onValuesChange?: (values: FormValues) => void;
     labelPosition?: 'left' | 'top';
+    /** Fields to mark as missing a value, by name; the form sets them as `required` errors. */
     missingFields?: string[] | undefined;
     spaceCompact?: boolean;
     organizationVariables?: WorkflowVariables | undefined;
     /** A remote workflow's repo/branch/yaml, so `${{ remote.* }}` resolves the same here as it does on the run. */
     remoteVars?: Record<string, string | undefined> | undefined;
     needsOrganizationVariables?: boolean;
-    onSubmit?: ((values: Record<string, unknown>) => void) | undefined;
+    onSubmit?: ((values: FormValues) => void) | undefined;
     submitLabel?: string;
     className?: string;
     /** Prevents deletion of hidden+ignored field values (workflow forms filter at submit time). */
@@ -106,5 +87,6 @@ export interface DynamicFormProps {
     /** Host-supplied field components, merged over the core registry by type. */
     fields?: Record<string, FieldComponent>;
 }
-export declare function DynamicForm({ formJSONs: options, reinitialize, initialValues, setValues, setFormDirty, formikRef, labelPosition, missingFields, spaceCompact, organizationVariables, remoteVars, needsOrganizationVariables, onSubmit, submitLabel, className, workflowForm, contextKey, skipValueParse, fields, allowLayoutCSS, }: DynamicFormProps): React.JSX.Element;
+/** A form drawn from a workflow's schema. */
+export declare function DynamicForm({ form, ...props }: DynamicFormProps): import("react").JSX.Element;
 export {};