@page-speed/forms 0.6.3 → 0.6.4

package/dist/chunk-A7MVZ757.js

@@ -0,0 +1,701 @@
+import { cn, FieldLabel, TextInput, Button, FieldDescription, Field, LabelGroup, FieldError } from './chunk-J37BGNM6.js';
+import * as React5 from 'react';
+import { useRef, useCallback, useContext } from 'react';
+import { useObservable, useSelector } from '@legendapp/state/react';
+import { useMap } from '@opensite/hooks/useMap';
+import { cva } from 'class-variance-authority';
+import 'radix-ui';
+import { Icon } from '@page-speed/icon';
+
+function useForm(options) {
+  const {
+    initialValues,
+    validationSchema,
+    validateOn = "onBlur",
+    revalidateOn = "onChange",
+    onSubmit,
+    onError,
+    debug = false
+  } = options;
+  const state$ = useObservable({
+    values: initialValues,
+    errors: {},
+    touched: {},
+    isSubmitting: false,
+    status: "idle",
+    initialValues: { ...initialValues },
+    // Create a copy to prevent reference sharing
+    hasValidated: {}
+  });
+  const validationInProgress = useRef(/* @__PURE__ */ new Set());
+  const [, fieldMetadataActions] = useMap();
+  const validateField = useCallback(
+    async (field) => {
+      const validators = validationSchema?.[field];
+      if (!validators) return void 0;
+      const fieldKey = String(field);
+      validationInProgress.current.add(fieldKey);
+      const currentMeta = fieldMetadataActions.get(fieldKey) || {
+        validationCount: 0
+      };
+      fieldMetadataActions.set(fieldKey, {
+        lastValidated: Date.now(),
+        validationCount: currentMeta.validationCount + 1
+      });
+      try {
+        const value = state$.values[field].get();
+        const allValues = state$.values.get();
+        const validatorArray = Array.isArray(validators) ? validators : [validators];
+        for (const validator of validatorArray) {
+          const error = await validator(value, allValues);
+          if (error) {
+            state$.errors[field].set(error);
+            validationInProgress.current.delete(fieldKey);
+            return error;
+          }
+        }
+        state$.errors[field].set(void 0);
+        validationInProgress.current.delete(fieldKey);
+        return void 0;
+      } catch (error) {
+        validationInProgress.current.delete(fieldKey);
+        const errorMessage = error instanceof Error ? error.message : "Validation error";
+        state$.errors[field].set(errorMessage);
+        return errorMessage;
+      }
+    },
+    [validationSchema, state$, fieldMetadataActions]
+  );
+  const validateForm = useCallback(async () => {
+    if (!validationSchema) return {};
+    const fields = Object.keys(validationSchema);
+    const errors2 = {};
+    await Promise.all(
+      fields.map(async (field) => {
+        const error = await validateField(field);
+        if (error) {
+          errors2[field] = error;
+        }
+      })
+    );
+    state$.errors.set(errors2);
+    return errors2;
+  }, [validationSchema, validateField, state$]);
+  const setFieldValue = useCallback(
+    (field, value) => {
+      state$.values[field].set(value);
+      const shouldRevalidate = revalidateOn === "onChange" && state$.hasValidated[String(field)].get();
+      if (shouldRevalidate && validationSchema?.[field]) {
+        validateField(field);
+      }
+      if (debug) {
+        console.log("[useForm] setFieldValue:", { field, value });
+      }
+    },
+    [state$, revalidateOn, validationSchema, validateField, debug]
+  );
+  const setFieldTouched = useCallback(
+    (field, touched2) => {
+      state$.touched[field].set(touched2);
+      if (touched2 && validateOn === "onBlur" && validationSchema?.[field]) {
+        state$.hasValidated[String(field)].set(true);
+        validateField(field);
+      }
+      if (debug) {
+        console.log("[useForm] setFieldTouched:", { field, touched: touched2 });
+      }
+    },
+    [state$, validateOn, validationSchema, validateField, debug]
+  );
+  const resetForm = useCallback(() => {
+    state$.values.set(state$.initialValues.get());
+    state$.errors.set({});
+    state$.touched.set({});
+    state$.isSubmitting.set(false);
+    state$.status.set("idle");
+    state$.hasValidated.set({});
+    fieldMetadataActions.clear();
+    if (debug) {
+      console.log("[useForm] Form reset");
+    }
+  }, [state$, fieldMetadataActions, debug]);
+  const handleSubmit = useCallback(
+    async (e) => {
+      e?.preventDefault();
+      if (debug) {
+        console.log("[useForm] handleSubmit started");
+      }
+      state$.isSubmitting.set(true);
+      state$.status.set("submitting");
+      try {
+        const errors2 = await validateForm();
+        const hasErrors = Object.keys(errors2).length > 0;
+        if (hasErrors) {
+          state$.status.set("error");
+          onError?.(errors2);
+          if (debug) {
+            console.log("[useForm] Validation errors:", errors2);
+          }
+          return;
+        }
+        const helpers = {
+          setValues: (values2) => {
+            if (typeof values2 === "function") {
+              state$.values.set(values2(state$.values.get()));
+            } else {
+              state$.values.set(values2);
+            }
+          },
+          setFieldValue,
+          setErrors: (errors3) => state$.errors.set(errors3),
+          setFieldError: (field, error) => state$.errors[field].set(error),
+          setTouched: (touched2) => state$.touched.set(touched2),
+          setFieldTouched,
+          setSubmitting: (submitting) => state$.isSubmitting.set(submitting),
+          resetForm
+        };
+        await onSubmit(state$.values.get(), helpers);
+        state$.status.set("success");
+        if (debug) {
+          console.log("[useForm] Submit successful");
+        }
+      } catch (error) {
+        state$.status.set("error");
+        if (debug) {
+          console.error("[useForm] Submit error:", error);
+        }
+        throw error;
+      } finally {
+        state$.isSubmitting.set(false);
+      }
+    },
+    [
+      state$,
+      validateForm,
+      onSubmit,
+      onError,
+      setFieldValue,
+      setFieldTouched,
+      resetForm,
+      debug
+    ]
+  );
+  const getFieldProps = useCallback(
+    (field) => {
+      return {
+        name: String(field),
+        value: state$.values[field].get(),
+        onChange: (value) => setFieldValue(field, value),
+        onBlur: () => setFieldTouched(field, true)
+      };
+    },
+    [state$, setFieldValue, setFieldTouched]
+  );
+  const getFieldMeta = useCallback(
+    (field) => {
+      const fieldKey = String(field);
+      const metadata = fieldMetadataActions.get(fieldKey);
+      return {
+        error: state$.errors[field].get(),
+        touched: state$.touched[field].get() ?? false,
+        isDirty: state$.values[field].get() !== state$.initialValues[field].get(),
+        isValidating: validationInProgress.current.has(fieldKey),
+        // Additional metadata from @opensite/hooks
+        validationCount: metadata?.validationCount,
+        lastValidated: metadata?.lastValidated
+      };
+    },
+    [state$, fieldMetadataActions]
+  );
+  const values = useSelector(() => state$.values.get());
+  const errors = useSelector(() => state$.errors.get());
+  const touched = useSelector(() => state$.touched.get());
+  const isSubmitting = useSelector(() => state$.isSubmitting.get());
+  const status = useSelector(() => state$.status.get());
+  const isValid = useSelector(() => Object.keys(state$.errors.get()).length === 0);
+  const isDirty = useSelector(() => {
+    const currentValues = state$.values.get();
+    const initialValues2 = state$.initialValues.get();
+    return Object.keys(currentValues).some(
+      (key) => currentValues[key] !== initialValues2[key]
+    );
+  });
+  return {
+    // State
+    values,
+    errors,
+    touched,
+    isSubmitting,
+    isValid,
+    isDirty,
+    status,
+    // Actions
+    handleSubmit,
+    setValues: (values2) => {
+      if (typeof values2 === "function") {
+        state$.values.set(values2(state$.values.get()));
+      } else {
+        state$.values.set(values2);
+      }
+    },
+    setFieldValue,
+    setErrors: (errors2) => state$.errors.set(errors2),
+    setFieldError: (field, error) => state$.errors[field].set(error),
+    setTouched: (touched2) => state$.touched.set(touched2),
+    setFieldTouched,
+    validateForm,
+    validateField,
+    resetForm,
+    getFieldProps,
+    getFieldMeta
+  };
+}
+var FormContext = React5.createContext(null);
+FormContext.displayName = "FormContext";
+function useField(options) {
+  const { name, validate, transform } = options;
+  const form = useContext(FormContext);
+  if (!form) {
+    throw new Error(
+      "useField must be used within a FormContext. Wrap your component with <Form> or use useForm's getFieldProps instead."
+    );
+  }
+  const baseFieldProps = form.getFieldProps(name);
+  const field = {
+    ...baseFieldProps,
+    value: baseFieldProps.value,
+    onChange: (value) => {
+      const transformedValue = transform ? transform(value) : value;
+      baseFieldProps.onChange(transformedValue);
+      if (validate) {
+        const result = validate(transformedValue, form.values);
+        if (result instanceof Promise) {
+          result.then((error) => {
+            if (error !== void 0) {
+              form.setFieldError(name, error);
+            }
+          });
+        } else if (result !== void 0) {
+          form.setFieldError(name, result);
+        }
+      }
+    }
+  };
+  const meta = form.getFieldMeta(name);
+  const helpers = {
+    setValue: useCallback(
+      (value) => {
+        const transformedValue = transform ? transform(value) : value;
+        form.setFieldValue(name, transformedValue);
+      },
+      [name, transform, form]
+    ),
+    setTouched: useCallback(
+      (touched) => {
+        form.setFieldTouched(name, touched);
+      },
+      [name, form]
+    ),
+    setError: useCallback(
+      (error) => {
+        form.setFieldError(name, error);
+      },
+      [name, form]
+    )
+  };
+  return {
+    field,
+    meta,
+    helpers
+  };
+}
+function renderMessage(message, fallbackClassName, className) {
+  if (typeof message === "string") {
+    return /* @__PURE__ */ React5.createElement(
+      "p",
+      {
+        className: cn(
+          "text-sm font-medium text-center text-balance",
+          className
+        )
+      },
+      message
+    );
+  }
+  return /* @__PURE__ */ React5.createElement("div", { className: cn(fallbackClassName, className) }, message);
+}
+function FormFeedback({
+  successMessage,
+  submissionError,
+  successMessageClassName,
+  errorMessageClassName
+}) {
+  if (!successMessage && !submissionError) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, successMessage ? /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: cn(
+        "rounded-md border border-primary bg-primary px-4 py-3 shadow-sm",
+        successMessageClassName
+      ),
+      role: "status",
+      "aria-live": "polite"
+    },
+    renderMessage(
+      successMessage,
+      "text-primary-foreground",
+      "text-primary-foreground"
+    )
+  ) : null, submissionError ? /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: cn(
+        "rounded-md border border-destructive bg-destructive px-4 py-3 shadow-sm",
+        errorMessageClassName
+      ),
+      role: "alert",
+      "aria-live": "assertive"
+    },
+    renderMessage(
+      submissionError,
+      "text-destructive-foreground",
+      "text-destructive-foreground"
+    )
+  ) : null);
+}
+FormFeedback.displayName = "FormFeedback";
+var buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+var FieldFeedback = ({
+  errorId,
+  errorClassName,
+  error,
+  shouldRenderError
+}) => {
+  const errorText = Array.isArray(error) ? error.join(", ") : error;
+  if (!errorText || !shouldRenderError) return null;
+  return /* @__PURE__ */ React5.createElement(FieldError, { id: errorId, className: errorClassName }, errorText);
+};
+var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
+var INPUT_SIZE_CLASSES = {
+  xs: "h-6 text-xs px-3",
+  // button: h-6  → match
+  sm: "text-sm px-3",
+  // button: h-8 overridden to h-9 below → match
+  default: "text-base px-4",
+  // button: h-9 (no override needed)
+  lg: "h-10 text-md px-6"
+  // button: h-10 → match
+};
+function ButtonGroupForm({
+  name,
+  label,
+  description,
+  inputProps,
+  submitLabel = "Submit",
+  submitVariant = "default",
+  size = "default",
+  isSubmitting = false,
+  submitIconName,
+  submitIconComponent,
+  errorText,
+  className,
+  labelClassName
+}) {
+  const inputId = React5.useMemo(() => {
+    return `button-group-input-${name}`;
+  }, [name]);
+  const errorId = `${inputId}-error`;
+  const hasValue = React5.useMemo(() => {
+    return String(inputProps.value ?? "").trim().length > 0;
+  }, [inputProps.value]);
+  const hasError = React5.useMemo(() => {
+    return !!inputProps.error;
+  }, [inputProps.error]);
+  const buttonSize = React5.useMemo(() => {
+    if (submitIconName || submitIconComponent) {
+      return size === "default" || size === "sm" ? "icon" : `icon-${size}`;
+    }
+    return size;
+  }, [submitIconName, size, submitIconComponent]);
+  const labelElement = React5.useMemo(() => {
+    if (submitIconName) {
+      return /* @__PURE__ */ React5.createElement(Icon, { name: submitIconName, apiKey: DEFAULT_ICON_API_KEY });
+    } else if (submitIconComponent) {
+      return submitIconComponent;
+    } else if (submitLabel) {
+      return submitLabel;
+    } else {
+      return "Submit";
+    }
+  }, [submitIconComponent, submitIconName, submitLabel]);
+  return /* @__PURE__ */ React5.createElement("div", { className: cn("space-y-2", className) }, label && /* @__PURE__ */ React5.createElement(FieldLabel, { htmlFor: inputId, className: labelClassName }, label), /* @__PURE__ */ React5.createElement(
+    ButtonGroup,
+    {
+      className: cn(
+        "rounded-md",
+        !hasError && hasValue && "ring-2 ring-ring",
+        hasError && "ring-1 ring-destructive"
+      )
+    },
+    /* @__PURE__ */ React5.createElement(
+      TextInput,
+      {
+        ...inputProps,
+        id: inputId,
+        suppressValueRing: true,
+        "aria-describedby": hasError ? errorId : void 0,
+        className: cn(
+          INPUT_SIZE_CLASSES[size],
+          "border-r-0 rounded-r-none focus-visible:z-10",
+          inputProps.className
+        )
+      }
+    ),
+    /* @__PURE__ */ React5.createElement(
+      Button,
+      {
+        size: buttonSize,
+        type: "submit",
+        variant: submitVariant,
+        disabled: isSubmitting,
+        className: cn(
+          "relative rounded-l-none ring-0",
+          // 'sm' button variant is h-8; override to h-9 to align with input
+          size === "sm" && "h-9"
+        )
+      },
+      isSubmitting ? /* @__PURE__ */ React5.createElement("span", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }, /* @__PURE__ */ React5.createElement(
+        Icon,
+        {
+          name: "line-md/loading-twotone-loop",
+          apiKey: DEFAULT_ICON_API_KEY
+        }
+      )) : null,
+      /* @__PURE__ */ React5.createElement(
+        "span",
+        {
+          className: cn(
+            "transition-opacity duration-200",
+            isSubmitting ? "opacity-0" : "opacity-100"
+          )
+        },
+        labelElement
+      )
+    )
+  ), description && /* @__PURE__ */ React5.createElement(FieldDescription, null, description), /* @__PURE__ */ React5.createElement(
+    FieldFeedback,
+    {
+      error: errorText,
+      shouldRenderError: hasError,
+      errorId
+    }
+  ));
+}
+ButtonGroupForm.displayName = "ButtonGroupForm";
+function Form({
+  form,
+  children,
+  fields,
+  className,
+  action,
+  method,
+  noValidate = true,
+  submissionConfig,
+  successMessage,
+  submissionError,
+  successMessageClassName,
+  errorMessageClassName,
+  onNewSubmission,
+  notificationConfig,
+  styleConfig,
+  formConfig,
+  ...props
+}) {
+  const handleFormSubmit = React5.useCallback(
+    async (e) => {
+      try {
+        await form.handleSubmit(e);
+      } catch {
+      }
+    },
+    [form]
+  );
+  const resolvedClassName = className ?? styleConfig?.formClassName;
+  const resolvedAction = action ?? formConfig?.endpoint;
+  const resolvedMethod = method ?? formConfig?.method ?? "post";
+  const resolvedSubmissionConfig = submissionConfig ?? formConfig?.submissionConfig;
+  const resolvedSuccessMessage = successMessage ?? notificationConfig?.successMessage;
+  const resolvedSubmissionError = submissionError ?? notificationConfig?.submissionError;
+  const resolvedSuccessMessageClassName = successMessageClassName ?? styleConfig?.successMessageClassName;
+  const resolvedErrorMessageClassName = errorMessageClassName ?? styleConfig?.errorMessageClassName;
+  const behavior = resolvedSubmissionConfig?.behavior || "showConfirmation";
+  const shouldManageSubmissionUi = resolvedSubmissionConfig !== void 0 || resolvedSuccessMessage !== void 0 || resolvedSuccessMessageClassName !== void 0 || resolvedErrorMessageClassName !== void 0 || resolvedSubmissionError != null || onNewSubmission !== void 0;
+  const hasSubmissionError = Boolean(resolvedSubmissionError);
+  const isSubmissionSuccessful = shouldManageSubmissionUi && form.status === "success" && !hasSubmissionError;
+  const defaultSuccessMessage = behavior === "redirect" ? "Form submitted successfully. Redirecting..." : "Thank you. Your form has been submitted successfully.";
+  const finalSuccessMessage = resolvedSuccessMessage ?? defaultSuccessMessage;
+  const shouldRenderCustomComponent = isSubmissionSuccessful && behavior === "renderCustomComponent" && Boolean(resolvedSubmissionConfig?.customComponent);
+  const newSubmissionAction = resolvedSubmissionConfig?.newFormSubmissionAction;
+  const showNewSubmissionAction = isSubmissionSuccessful && (typeof newSubmissionAction?.enable === "boolean" ? newSubmissionAction.enable : Boolean(newSubmissionAction?.label));
+  const newSubmissionLabel = newSubmissionAction?.label ?? "Submit another response";
+  const handleNewSubmission = React5.useCallback(() => {
+    form.resetForm();
+    onNewSubmission?.();
+  }, [form, onNewSubmission]);
+  const formLayout = formConfig?.formLayout ?? "standard";
+  const isButtonGroupLayout = formLayout === "button-group";
+  const hasTextField = fields && fields.length === 1 && fields[0] && ["text", "email", "password", "url", "tel", "search"].includes(
+    fields[0].type
+  );
+  const shouldUseButtonGroup = isButtonGroupLayout && hasTextField;
+  const buttonGroupContent = React5.useMemo(() => {
+    if (!shouldUseButtonGroup || !fields || fields.length === 0) return null;
+    const field = fields[0];
+    const fieldProps = form.getFieldProps(field.name);
+    const fieldMeta = form.getFieldMeta(field.name);
+    return /* @__PURE__ */ React5.createElement(
+      ButtonGroupForm,
+      {
+        name: field.name,
+        label: field.label,
+        description: field.description,
+        className: field.className,
+        inputProps: {
+          name: fieldProps.name,
+          value: fieldProps.value,
+          onChange: fieldProps.onChange,
+          onBlur: fieldProps.onBlur,
+          type: field.type,
+          placeholder: field.placeholder,
+          required: field.required,
+          disabled: field.disabled,
+          error: fieldMeta.touched && !!fieldMeta.error
+        },
+        errorText: fieldMeta.touched ? fieldMeta.error : void 0,
+        submitLabel: formConfig?.submitLabel,
+        submitVariant: formConfig?.submitVariant,
+        submitIconName: formConfig?.submitIconName,
+        submitIconComponent: formConfig?.submitIconComponent,
+        size: formConfig?.buttonGroupSize,
+        isSubmitting: form.isSubmitting
+      }
+    );
+  }, [shouldUseButtonGroup, fields, form, formConfig]);
+  return /* @__PURE__ */ React5.createElement(FormContext.Provider, { value: form }, /* @__PURE__ */ React5.createElement(
+    "form",
+    {
+      onSubmit: handleFormSubmit,
+      action: resolvedAction,
+      method: resolvedMethod,
+      noValidate,
+      className: resolvedClassName,
+      ...props
+    },
+    isSubmissionSuccessful ? /* @__PURE__ */ React5.createElement("div", { className: "space-y-4" }, shouldRenderCustomComponent ? resolvedSubmissionConfig?.customComponent : /* @__PURE__ */ React5.createElement(
+      FormFeedback,
+      {
+        successMessage: finalSuccessMessage,
+        successMessageClassName: resolvedSuccessMessageClassName
+      }
+    ), showNewSubmissionAction ? /* @__PURE__ */ React5.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        onClick: handleNewSubmission
+      },
+      newSubmissionLabel
+    ) : null) : /* @__PURE__ */ React5.createElement(React5.Fragment, null, shouldUseButtonGroup ? buttonGroupContent : children, resolvedSubmissionError ? /* @__PURE__ */ React5.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React5.createElement(
+      FormFeedback,
+      {
+        submissionError: resolvedSubmissionError,
+        errorMessageClassName: resolvedErrorMessageClassName
+      }
+    )) : null)
+  ));
+}
+Form.displayName = "Form";
+function Field2({
+  name,
+  label,
+  description,
+  children,
+  showError = true,
+  className,
+  errorClassName,
+  required = false,
+  validate
+}) {
+  const fieldState = useField({ name, validate });
+  const { meta } = fieldState;
+  const hasError = React5.useMemo(() => {
+    return showError && meta.touched && meta.error ? true : false;
+  }, [meta?.touched, meta?.error, showError]);
+  const errorId = `${name}-error`;
+  const descriptionId = `${name}-description`;
+  return /* @__PURE__ */ React5.createElement(
+    Field,
+    {
+      className,
+      "data-field": name,
+      invalid: hasError
+    },
+    /* @__PURE__ */ React5.createElement(
+      LabelGroup,
+      {
+        labelHtmlFor: name,
+        required,
+        variant: "label",
+        secondaryId: descriptionId,
+        secondary: description,
+        primary: label
+      }
+    ),
+    /* @__PURE__ */ React5.createElement("div", { "data-slot": "field-control" }, typeof children === "function" ? children(fieldState) : children),
+    /* @__PURE__ */ React5.createElement(
+      FieldFeedback,
+      {
+        errorId,
+        errorClassName,
+        shouldRenderError: hasError,
+        error: meta.error
+      }
+    )
+  );
+}
+Field2.displayName = "Field";
+
+export { ButtonGroupForm, Field2 as Field, Form, FormContext, FormFeedback, useField, useForm };
+//# sourceMappingURL=chunk-A7MVZ757.js.map
+//# sourceMappingURL=chunk-A7MVZ757.js.map