@page-speed/forms 0.5.1 → 0.5.3

package/dist/integration.js

@@ -1,4 +1,8 @@
-import * as React from 'react';
+import { useForm, Field } from './chunk-24RPM43T.js';
+import { TextInput, TextArea, Select, MultiSelect, Radio, Checkbox, CheckboxGroup, DatePicker, DateRangePicker, TimePicker, FileInput } from './chunk-5NT5T5XY.js';
+import { cn } from './chunk-232KNGJI.js';
+import * as React2 from 'react';
+import { useState, useCallback, useMemo } from 'react';
 
 // src/integration/ContactFormSerializer.ts
 var STANDARD_FIELDS = [
@@ -139,7 +143,7 @@ function deserializeErrors(railsErrors) {
   }
   return formErrors;
 }
-var BlockErrorBoundary = class extends React.Component {
+var BlockErrorBoundary = class extends React2.Component {
   constructor(props) {
     super(props);
     this.state = { error: null };
@@ -159,16 +163,16 @@ var BlockErrorBoundary = class extends React.Component {
       if (this.props.fallback) {
         return this.props.fallback(this.state.error, this.props.block);
       }
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React2.createElement(
         "div",
         {
           className: "block-error border border-destructive bg-destructive p-4 rounded text-destructive-foreground",
           "data-block-id": this.props.block._id,
           "data-block-type": this.props.block._type
         },
-        /* @__PURE__ */ React.createElement("p", { className: "font-semibold" }, "Block Render Error"),
-        /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "Block: ", this.props.block._name || this.props.block._id, " (", this.props.block._type, ")"),
-        /* @__PURE__ */ React.createElement("p", { className: "text-sm mt-1" }, this.state.error.message)
+        /* @__PURE__ */ React2.createElement("p", { className: "font-semibold" }, "Block Render Error"),
+        /* @__PURE__ */ React2.createElement("p", { className: "text-sm" }, "Block: ", this.props.block._name || this.props.block._id, " (", this.props.block._type, ")"),
+        /* @__PURE__ */ React2.createElement("p", { className: "text-sm mt-1" }, this.state.error.message)
       );
     }
     return this.props.children;
@@ -199,9 +203,9 @@ function createBlockAdapter(Component2, options = {}) {
       ...dataAttrs
     };
     const renderedChildren = renderChildren ? renderChildren(block._id) : children;
-    const element = /* @__PURE__ */ React.createElement(Component2, { ...componentProps }, renderedChildren);
+    const element = /* @__PURE__ */ React2.createElement(Component2, { ...componentProps }, renderedChildren);
     if (withErrorBoundary) {
-      return /* @__PURE__ */ React.createElement(BlockErrorBoundary, { block, fallback: errorFallback }, element);
+      return /* @__PURE__ */ React2.createElement(BlockErrorBoundary, { block, fallback: errorFallback }, element);
     }
     return element;
   };
@@ -226,6 +230,559 @@ function createBlockAdapters(components, options = {}) {
   return adapted;
 }
 
-export { createBlockAdapter, createBlockAdapters, deserializeErrors, serializeForRails, standardInputTransformer };
+// src/integration/form-submit.ts
+var PageSpeedFormSubmissionError = class extends Error {
+  constructor(message, options = {}) {
+    super(message);
+    this.name = "PageSpeedFormSubmissionError";
+    this.formErrors = options.formErrors;
+    this.status = options.status;
+  }
+};
+var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function isValidEmail(value) {
+  return EMAIL_REGEX.test(value);
+}
+function buildUrlWithParams(endpoint, values) {
+  const base = typeof window === "undefined" ? "http://localhost" : window.location.origin;
+  const url = new URL(endpoint, base);
+  Object.entries(values).forEach(([key, value]) => {
+    if (value === void 0 || value === null) return;
+    if (Array.isArray(value)) {
+      value.forEach((item) => {
+        if (item !== void 0 && item !== null) {
+          url.searchParams.append(key, String(item));
+        }
+      });
+      return;
+    }
+    url.searchParams.set(key, String(value));
+  });
+  return url.toString();
+}
+function normalizeMethod(method) {
+  return (method || "post").toUpperCase();
+}
+function resolveFormat(config) {
+  if (config?.format) return config.format;
+  return config?.apiKey ? "rails" : "json";
+}
+function mergeValues(values, config) {
+  return {
+    ...config?.values ?? {},
+    ...values
+  };
+}
+async function submitPageSpeedForm(values, config) {
+  if (!config?.endpoint) {
+    return null;
+  }
+  const payload = mergeValues(values, config);
+  const method = normalizeMethod(config.method);
+  const format = resolveFormat(config);
+  const headers = { ...config.headers ?? {} };
+  if (format === "rails") {
+    if (!config.apiKey) {
+      throw new PageSpeedFormSubmissionError(
+        "Missing apiKey for Rails form submission."
+      );
+    }
+    const railsConfig = {
+      apiKey: config.apiKey,
+      contactCategoryToken: config.contactCategoryToken,
+      locationId: config.locationId,
+      websiteId: config.websiteId,
+      websiteFormAssignmentId: config.websiteFormAssignmentId,
+      visitorIpAddress: config.visitorIpAddress
+    };
+    const serialized = serializeForRails(payload, railsConfig);
+    if (serialized.contact.contact_form_upload_tokens) {
+      serialized.contact.contact_form_upload_tokens = serialized.contact.contact_form_upload_tokens.map((token) => token.replace(/^upload_/, ""));
+    }
+    headers["Content-Type"] ?? (headers["Content-Type"] = "application/json");
+    const response2 = await fetch(config.endpoint, {
+      method,
+      headers,
+      body: JSON.stringify(serialized)
+    });
+    const data2 = await response2.json().catch(() => null);
+    if (!response2.ok || data2 && data2.errors) {
+      const errorResponse = {
+        errors: data2?.errors ?? { base: ["Form submission failed"] },
+        status: data2?.status ?? response2.status
+      };
+      const formErrors = deserializeErrors(errorResponse);
+      throw new PageSpeedFormSubmissionError("Form submission failed.", {
+        formErrors,
+        status: errorResponse.status
+      });
+    }
+    return data2;
+  }
+  if (method === "GET") {
+    const url = buildUrlWithParams(config.endpoint, payload);
+    const response2 = await fetch(url, { method, headers });
+    const data2 = await response2.json().catch(() => null);
+    if (!response2.ok) {
+      throw new PageSpeedFormSubmissionError(
+        data2?.message || "Form submission failed.",
+        { status: response2.status }
+      );
+    }
+    return data2;
+  }
+  headers["Content-Type"] ?? (headers["Content-Type"] = "application/json");
+  const response = await fetch(config.endpoint, {
+    method,
+    headers,
+    body: JSON.stringify(payload)
+  });
+  const data = await response.json().catch(() => null);
+  if (!response.ok) {
+    throw new PageSpeedFormSubmissionError(
+      data?.message || "Form submission failed.",
+      { status: response.status }
+    );
+  }
+  return data;
+}
+
+// src/integration/form-field-types.ts
+function generateInitialValues(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      if (field.type === "checkbox") {
+        acc[field.name] = false;
+      } else if (field.type === "checkbox-group" || field.type === "multi-select") {
+        acc[field.name] = [];
+      } else if (field.type === "file") {
+        acc[field.name] = [];
+      } else if (field.type === "date-range") {
+        acc[field.name] = { start: null, end: null };
+      } else {
+        acc[field.name] = "";
+      }
+      return acc;
+    },
+    {}
+  );
+}
+function generateValidationSchema(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      acc[field.name] = (value, allValues) => {
+        if (field.required) {
+          if (!value || typeof value === "string" && !value.trim()) {
+            return `${field.label} is required`;
+          }
+        }
+        if (field.type === "email" && value) {
+          if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+            return "Please enter a valid email address";
+          }
+        }
+        if (field.type === "url" && value) {
+          try {
+            new URL(value);
+          } catch {
+            return "Please enter a valid URL";
+          }
+        }
+        if (field.validator) {
+          return field.validator(value, allValues);
+        }
+        return void 0;
+      };
+      return acc;
+    },
+    {}
+  );
+}
+var columnSpanClasses = {
+  1: "col-span-12 md:col-span-1",
+  2: "col-span-12 md:col-span-2",
+  3: "col-span-12 md:col-span-3",
+  4: "col-span-12 md:col-span-4",
+  5: "col-span-12 md:col-span-5",
+  6: "col-span-12 md:col-span-6",
+  7: "col-span-12 md:col-span-7",
+  8: "col-span-12 md:col-span-8",
+  9: "col-span-12 md:col-span-9",
+  10: "col-span-12 md:col-span-10",
+  11: "col-span-12 md:col-span-11",
+  12: "col-span-12"
+};
+function getColumnSpanClass(span) {
+  if (!span || span === 12) return "col-span-12";
+  const clamped = Math.max(1, Math.min(span, 12));
+  return columnSpanClasses[clamped] || "col-span-12";
+}
+var DEFAULT_UPLOAD_ENDPOINT = "https://api.dashtrack.com/contacts/_/contact_form_uploads";
+function useFileUpload(options) {
+  const [uploadTokens, setUploadTokens] = useState([]);
+  const [uploadProgress, setUploadProgress] = useState({});
+  const [isUploading, setIsUploading] = useState(false);
+  const endpoint = options?.endpoint || DEFAULT_UPLOAD_ENDPOINT;
+  const uploadFiles = useCallback(
+    async (files) => {
+      if (files.length === 0) return;
+      setIsUploading(true);
+      try {
+        const tokens = [];
+        for (const file of files) {
+          const formData = new FormData();
+          formData.append("contact_form_upload[file_upload]", file);
+          formData.append("contact_form_upload[title]", file.name);
+          formData.append("contact_form_upload[file_name]", file.name);
+          formData.append("contact_form_upload[file_size]", String(file.size));
+          const response = await fetch(endpoint, {
+            method: "POST",
+            body: formData
+          });
+          if (!response.ok) {
+            throw new Error(`Upload failed: ${response.statusText}`);
+          }
+          const data = await response.json();
+          if (data.contact_form_upload?.token) {
+            tokens.push(`upload_${data.contact_form_upload.token}`);
+          }
+          setUploadProgress((prev) => ({
+            ...prev,
+            [file.name]: 100
+          }));
+        }
+        setUploadTokens(tokens);
+      } catch (error) {
+        options?.onError?.(error);
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [endpoint, options]
+  );
+  const removeFile = useCallback((file, index) => {
+    setUploadTokens((prev) => prev.filter((_, i) => i !== index));
+    setUploadProgress((prev) => {
+      const next = { ...prev };
+      delete next[file.name];
+      return next;
+    });
+  }, []);
+  const resetUpload = useCallback(() => {
+    setUploadTokens([]);
+    setUploadProgress({});
+  }, []);
+  return {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  };
+}
+function resolveRedirect(redirectUrl) {
+  const trimmed = redirectUrl.trim();
+  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
+    return { destination: trimmed, internalHref: trimmed };
+  }
+  if (typeof window === "undefined") {
+    return { destination: trimmed };
+  }
+  try {
+    const url = new URL(trimmed, window.location.href);
+    if (url.origin === window.location.origin) {
+      return {
+        destination: url.toString(),
+        internalHref: `${url.pathname}${url.search}${url.hash}`
+      };
+    }
+    return { destination: url.toString() };
+  } catch {
+    return { destination: trimmed };
+  }
+}
+function useContactForm(options) {
+  const {
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess,
+    onError,
+    resetOnSuccess = true,
+    uploadTokens = [],
+    navigate
+  } = options;
+  const [submissionError, setSubmissionError] = useState(null);
+  const submissionConfig = formConfig?.submissionConfig;
+  const redirectUrl = submissionConfig?.redirectUrl;
+  const resetSubmissionState = useCallback(() => {
+    setSubmissionError(null);
+  }, []);
+  const performRedirect = useCallback(() => {
+    if (!redirectUrl || typeof window === "undefined") {
+      return;
+    }
+    const { destination, internalHref } = resolveRedirect(redirectUrl);
+    const attemptInternalNavigation = () => {
+      if (!internalHref) return false;
+      if (navigate) {
+        return navigate(internalHref) !== false;
+      }
+      const handler = window.__opensiteNavigationHandler;
+      if (typeof handler === "function") {
+        try {
+          return handler(internalHref, void 0) !== false;
+        } catch {
+          return false;
+        }
+      }
+      return false;
+    };
+    window.setTimeout(() => {
+      if (attemptInternalNavigation()) return;
+      window.location.assign(destination);
+    }, 150);
+  }, [navigate, redirectUrl]);
+  const form = useForm({
+    initialValues: useMemo(
+      () => generateInitialValues(formFields),
+      [formFields]
+    ),
+    validationSchema: useMemo(
+      () => generateValidationSchema(formFields),
+      [formFields]
+    ),
+    onSubmit: async (values, helpers) => {
+      resetSubmissionState();
+      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
+      if (!shouldAutoSubmit && !onSubmit) {
+        return;
+      }
+      try {
+        let result;
+        const submissionValues = {
+          ...values,
+          ...uploadTokens.length > 0 && {
+            contact_form_upload_tokens: uploadTokens
+          }
+        };
+        if (shouldAutoSubmit) {
+          result = await submitPageSpeedForm(submissionValues, formConfig);
+        }
+        if (onSubmit) {
+          await onSubmit(submissionValues);
+        }
+        if (shouldAutoSubmit || onSubmit) {
+          try {
+            await submissionConfig?.handleFormSubmission?.({
+              formData: submissionValues,
+              responseData: result
+            });
+          } catch {
+          }
+          if (resetOnSuccess) {
+            helpers.resetForm();
+          }
+          onSuccess?.(result);
+          if (submissionConfig?.behavior === "redirect" && submissionConfig.redirectUrl) {
+            performRedirect();
+          }
+        }
+      } catch (error) {
+        if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
+          helpers.setErrors(error.formErrors);
+        }
+        const errorMessage = error instanceof Error ? error.message : "Form submission failed";
+        setSubmissionError(errorMessage);
+        onError?.(error);
+      }
+    }
+  });
+  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
+  return {
+    form,
+    isSubmitted: form.status === "success",
+    submissionError,
+    formMethod,
+    resetSubmissionState
+  };
+}
+function DynamicFormField({
+  field,
+  className,
+  uploadProgress = {},
+  onFileUpload,
+  onFileRemove,
+  isUploading = false
+}) {
+  const fieldId = field.name;
+  const usesGroupLegend = field.type === "radio" || field.type === "checkbox-group";
+  const usesInlineCheckboxLabel = field.type === "checkbox";
+  const shouldRenderFieldLabel = !usesGroupLegend && !usesInlineCheckboxLabel;
+  return /* @__PURE__ */ React2.createElement(
+    Field,
+    {
+      name: field.name,
+      label: shouldRenderFieldLabel ? field.label : void 0,
+      description: shouldRenderFieldLabel ? field.description : void 0,
+      required: field.required,
+      className: cn("space-y-2", className)
+    },
+    ({ field: formField, meta }) => /* @__PURE__ */ React2.createElement("div", null, (field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "search" || field.type === "password" || field.type === "url") && /* @__PURE__ */ React2.createElement(
+      TextInput,
+      {
+        ...formField,
+        id: fieldId,
+        type: field.type,
+        placeholder: field.placeholder,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ), field.type === "number" && /* @__PURE__ */ React2.createElement(
+      TextInput,
+      {
+        ...formField,
+        id: fieldId,
+        type: "text",
+        placeholder: field.placeholder,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ), field.type === "textarea" && /* @__PURE__ */ React2.createElement(
+      TextArea,
+      {
+        ...formField,
+        id: fieldId,
+        placeholder: field.placeholder,
+        rows: field.rows || 4,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ), field.type === "select" && field.options && /* @__PURE__ */ React2.createElement(
+      Select,
+      {
+        ...formField,
+        id: fieldId,
+        options: field.options,
+        placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ), field.type === "multi-select" && field.options && /* @__PURE__ */ React2.createElement(
+      MultiSelect,
+      {
+        ...formField,
+        id: fieldId,
+        options: field.options,
+        placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ), field.type === "radio" && field.options && /* @__PURE__ */ React2.createElement(
+      Radio,
+      {
+        ...formField,
+        id: fieldId,
+        options: field.options,
+        label: field.label,
+        description: field.description,
+        required: field.required,
+        disabled: field.disabled,
+        layout: field.layout || "stacked",
+        error: meta.touched && !!meta.error,
+        "aria-label": field.label
+      }
+    ), field.type === "checkbox" && /* @__PURE__ */ React2.createElement(
+      Checkbox,
+      {
+        ...formField,
+        id: fieldId,
+        value: formField.value === true || formField.value === "true",
+        onChange: (checked) => formField.onChange(checked),
+        label: field.label,
+        description: field.description,
+        disabled: field.disabled,
+        required: field.required,
+        error: meta.touched && !!meta.error,
+        "aria-label": field.label
+      }
+    ), field.type === "checkbox-group" && field.options && /* @__PURE__ */ React2.createElement(
+      CheckboxGroup,
+      {
+        ...formField,
+        id: fieldId,
+        options: field.options,
+        label: field.label,
+        description: field.description,
+        required: field.required,
+        disabled: field.disabled,
+        layout: field.layout || "stacked",
+        error: meta.touched && !!meta.error,
+        "aria-label": field.label
+      }
+    ), (field.type === "date-picker" || field.type === "date") && /* @__PURE__ */ React2.createElement(
+      DatePicker,
+      {
+        ...formField,
+        id: fieldId,
+        placeholder: field.placeholder,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ), field.type === "date-range" && /* @__PURE__ */ React2.createElement(
+      DateRangePicker,
+      {
+        ...formField,
+        id: fieldId,
+        placeholder: field.placeholder,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ), field.type === "time" && /* @__PURE__ */ React2.createElement(
+      TimePicker,
+      {
+        ...formField,
+        id: fieldId,
+        placeholder: field.placeholder,
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled,
+        "aria-label": field.label
+      }
+    ), field.type === "file" && /* @__PURE__ */ React2.createElement(
+      FileInput,
+      {
+        ...formField,
+        id: fieldId,
+        accept: field.accept,
+        maxSize: field.maxSize || 5 * 1024 * 1024,
+        maxFiles: field.maxFiles || 1,
+        multiple: field.multiple || false,
+        placeholder: field.placeholder || "Choose file(s)...",
+        error: meta.touched && !!meta.error,
+        disabled: field.disabled || isUploading,
+        showProgress: true,
+        uploadProgress,
+        onChange: (files) => {
+          formField.onChange(files);
+          if (files.length > 0 && onFileUpload) {
+            onFileUpload(files);
+          }
+        },
+        onFileRemove,
+        "aria-label": field.label
+      }
+    ))
+  );
+}
+
+export { DynamicFormField, PageSpeedFormSubmissionError, createBlockAdapter, createBlockAdapters, deserializeErrors, generateInitialValues, generateValidationSchema, getColumnSpanClass, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };
 //# sourceMappingURL=integration.js.map
 //# sourceMappingURL=integration.js.map