@page-speed/forms 0.6.3 → 0.6.4

package/dist/integration.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { ReactNode } from 'react';
-import { d as FormSubmissionBehavior, N as NewFormSubmissionActionConfig, t as FormFieldConfig, m as UseFormReturn } from './types-BPxsUGm_.js';
-export { x as FormFieldType, y as SelectOption, u as generateInitialValues, v as generateValidationSchema, w as getColumnSpanClass } from './types-BPxsUGm_.js';
+import { e as FormSubmissionConfig, t as FormLayoutSettings, u as FormFieldConfig, m as UseFormReturn, B as ButtonGroupFormFieldConfig } from './types-BhcLAcZe.js';
+export { y as FormFieldType, z as SelectOption, v as generateInitialValues, w as generateValidationSchema, x as getColumnSpanClass } from './types-BhcLAcZe.js';
 
 /**
  * @page-speed/forms - Rails API Serializer
@@ -387,12 +386,12 @@ interface PageSpeedFormSubmissionResult {
     formData: Record<string, any>;
     responseData: unknown;
 }
-interface PageSpeedFormSubmissionConfig {
-    /**
-     * Post-submit behavior.
-     * @default "showConfirmation"
-     */
-    behavior?: FormSubmissionBehavior;
+/**
+ * PageSpeed-specific extension of the core FormSubmissionConfig.
+ * Inherits behavior, customComponent, and newFormSubmissionAction from the
+ * base type and adds integration-layer callbacks and redirect support.
+ */
+interface PageSpeedFormSubmissionConfig extends FormSubmissionConfig {
     /**
      * Optional callback triggered on successful submission.
      */
@@ -401,14 +400,6 @@ interface PageSpeedFormSubmissionConfig {
      * Redirect destination used when behavior is "redirect".
      */
     redirectUrl?: string;
-    /**
-     * Custom component rendered when behavior is "renderCustomComponent".
-     */
-    customComponent?: ReactNode;
-    /**
-     * Optional action to allow a fresh submission after success.
-     */
-    newFormSubmissionAction?: NewFormSubmissionActionConfig;
 }
 interface PageSpeedFormConfig {
     /**
@@ -466,6 +457,12 @@ interface PageSpeedFormConfig {
      * Optional post-submission behavior configuration.
      */
     submissionConfig?: PageSpeedFormSubmissionConfig;
+    /**
+     * Optional layout and presentation settings.
+     * Provides a typed home for layout props (formLayout, buttonGroupSize, etc.)
+     * so consumers don't need an `as any` cast when passing them alongside API config.
+     */
+    formLayoutSettings?: FormLayoutSettings;
 }
 declare class PageSpeedFormSubmissionError extends Error {
     formErrors?: FormErrors;
@@ -572,4 +569,92 @@ interface DynamicFormFieldProps {
  */
 declare function DynamicFormField({ field, className, uploadProgress, onFileUpload, onFileRemove, isUploading, renderLabel, }: DynamicFormFieldProps): React.JSX.Element;
 
-export { type AdaptedComponentProps, type Block, type BlockAdapterOptions, DynamicFormField, type DynamicFormFieldProps, type FileUploadProgress, type FormErrors, FormFieldConfig, type PageSpeedFormConfig, type PageSpeedFormMethod, type PageSpeedFormSubmissionConfig, PageSpeedFormSubmissionError, type PageSpeedFormSubmissionFormat, type PageSpeedFormSubmissionResult, type RailsApiConfig, type RailsErrorResponse, type SerializedFormData, type UseContactFormOptions, type UseContactFormReturn, type UseFileUploadOptions, type UseFileUploadReturn, createBlockAdapter, createBlockAdapters, deserializeErrors, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };
+interface ButtonGroupFormSetup {
+    size?: "xs" | "sm" | "default" | "lg";
+    submitLabel?: React.ReactNode;
+    submitVariant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
+    submitIconName?: string;
+    submitIconComponent?: React.ReactNode;
+}
+interface FormEngineSubmitButtonSetup {
+    submitLabel?: React.ReactNode;
+    submitVariant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
+    submitIconName?: string;
+    submitIconComponent?: React.ReactNode;
+}
+interface FormEngineStyleRules {
+    /** ClassName applied to the div wrapping the `<form>` element */
+    formContainer?: string;
+    /** ClassName applied to the grid div wrapping all field columns (standard layout) */
+    fieldsContainer?: string;
+    /** Fallback className applied to each field wrapper when the field has no own className */
+    fieldClassName?: string;
+    /** className forwarded to the `<form>` element itself via FormStyleConfig */
+    formClassName?: string;
+    /** className forwarded to the success message container via FormStyleConfig */
+    successMessageClassName?: string;
+    /** className forwarded to the error message container via FormStyleConfig */
+    errorMessageClassName?: string;
+}
+interface FormEngineLayoutSettings {
+    styleRules?: FormEngineStyleRules;
+    formLayout?: "standard" | "button-group";
+    /** Settings for button-group layout (only used when formLayout is "button-group") */
+    buttonGroupSetup?: ButtonGroupFormSetup;
+    /** Settings for the submit button in standard layout */
+    submitButtonSetup?: FormEngineSubmitButtonSetup;
+}
+interface FormEngineProps {
+    /** API / submission configuration */
+    api?: PageSpeedFormConfig;
+    /** Form field definitions */
+    fields: (FormFieldConfig | ButtonGroupFormFieldConfig)[];
+    /** Layout, style, and submit-button settings */
+    formLayoutSettings?: FormEngineLayoutSettings;
+    /** Success message shown after a successful submission */
+    successMessage?: React.ReactNode;
+    /** Custom submit handler (called in addition to any api endpoint) */
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /** Called after a successful submission with the server response */
+    onSuccess?: (data: unknown) => void;
+    /** Called when submission fails */
+    onError?: (error: Error) => void;
+    /** Navigation handler for internal redirects (return false to fall back to browser navigation) */
+    navigate?: (href: string) => boolean | void;
+    /** Reset form values after success @default true */
+    resetOnSuccess?: boolean;
+    /** File upload tokens to merge into the payload */
+    uploadTokens?: string[];
+    /** Called when files are selected for upload */
+    onFileUpload?: (files: File[]) => Promise<void>;
+    /** Called when a file is removed */
+    onFileRemove?: (file: File, index: number) => void;
+    /** Whether a file upload is in progress */
+    isUploading?: boolean;
+    /** Per-file upload progress map (fileName → 0-100) */
+    uploadProgress?: {
+        [fileName: string]: number;
+    };
+}
+/**
+ * FormEngine — declarative form component with built-in API integration.
+ *
+ * Handles `useContactForm` orchestration internally so callers only need to
+ * supply `api`, `fields`, and optional layout/style settings.
+ *
+ * @example Standard layout
+ * ```tsx
+ * <FormEngine api={api} fields={fields} formLayoutSettings={{ submitButtonSetup: { submitLabel: "Send" } }} />
+ * ```
+ *
+ * @example Button-group layout
+ * ```tsx
+ * <FormEngine api={api} fields={[emailField]} formLayoutSettings={{ formLayout: "button-group", buttonGroupSetup: { size: "lg", submitLabel: "Subscribe" } }} />
+ * ```
+ */
+declare function FormEngine({ api, fields, formLayoutSettings, successMessage, onSubmit, onSuccess, onError, navigate, resetOnSuccess, uploadTokens, onFileUpload, onFileRemove, isUploading, uploadProgress, }: FormEngineProps): React.JSX.Element;
+declare namespace FormEngine {
+    var displayName: string;
+}
+
+export { type AdaptedComponentProps, type Block, type BlockAdapterOptions, ButtonGroupFormFieldConfig, type ButtonGroupFormSetup, DynamicFormField, type DynamicFormFieldProps, type FileUploadProgress, FormEngine, type FormEngineLayoutSettings, type FormEngineProps, type FormEngineStyleRules, type FormEngineSubmitButtonSetup, type FormErrors, FormFieldConfig, FormLayoutSettings, type PageSpeedFormConfig, type PageSpeedFormMethod, type PageSpeedFormSubmissionConfig, PageSpeedFormSubmissionError, type PageSpeedFormSubmissionFormat, type PageSpeedFormSubmissionResult, type RailsApiConfig, type RailsErrorResponse, type SerializedFormData, type UseContactFormOptions, type UseContactFormReturn, type UseFileUploadOptions, type UseFileUploadReturn, createBlockAdapter, createBlockAdapters, deserializeErrors, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };

package/dist/integration.js

@@ -1,6 +1,6 @@
-import { useForm, Field } from './chunk-SNSK3TMG.js';
+import { useForm, Field, Form } from './chunk-A7MVZ757.js';
 import { TextArea, Select, MultiSelect, Radio, Checkbox, CheckboxGroup, DatePicker, DateRangePicker, TimePicker, FileInput } from './chunk-ML6FGUYS.js';
-import { TextInput } from './chunk-J37BGNM6.js';
+import { TextInput, cn, Button } from './chunk-J37BGNM6.js';
 import * as React2 from 'react';
 import { useState, useCallback, useMemo } from 'react';
 
@@ -783,7 +783,104 @@ function DynamicFormField({
     ))
   );
 }
+function FormEngine({
+  api,
+  fields,
+  formLayoutSettings,
+  successMessage,
+  onSubmit,
+  onSuccess,
+  onError,
+  navigate,
+  resetOnSuccess,
+  uploadTokens,
+  onFileUpload,
+  onFileRemove,
+  isUploading,
+  uploadProgress
+}) {
+  const {
+    styleRules,
+    formLayout = "standard",
+    buttonGroupSetup,
+    submitButtonSetup
+  } = formLayoutSettings ?? {};
+  const isButtonGroup = formLayout === "button-group";
+  const normalizedFields = React2.useMemo(
+    () => fields.map((f) => ({ ...f, label: f.label ?? f.name })),
+    [fields]
+  );
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields: normalizedFields,
+    formConfig: api,
+    onSubmit,
+    onSuccess,
+    onError,
+    navigate,
+    resetOnSuccess,
+    uploadTokens
+  });
+  const legacyFormConfig = React2.useMemo(() => {
+    if (isButtonGroup) {
+      return {
+        formLayout: "button-group",
+        buttonGroupSize: buttonGroupSetup?.size,
+        submitLabel: buttonGroupSetup?.submitLabel,
+        submitVariant: buttonGroupSetup?.submitVariant,
+        submitIconName: buttonGroupSetup?.submitIconName,
+        submitIconComponent: buttonGroupSetup?.submitIconComponent,
+        endpoint: api?.endpoint,
+        submissionConfig: api?.submissionConfig
+      };
+    }
+    return {
+      formLayout: "standard",
+      endpoint: api?.endpoint,
+      submissionConfig: api?.submissionConfig
+    };
+  }, [isButtonGroup, buttonGroupSetup, api]);
+  return /* @__PURE__ */ React2.createElement("div", { className: styleRules?.formContainer }, /* @__PURE__ */ React2.createElement(
+    Form,
+    {
+      form,
+      fields: isButtonGroup ? fields : void 0,
+      formConfig: legacyFormConfig,
+      method: formMethod,
+      notificationConfig: {
+        submissionError: submissionError ?? void 0,
+        successMessage
+      },
+      styleConfig: {
+        formClassName: styleRules?.formClassName,
+        successMessageClassName: styleRules?.successMessageClassName,
+        errorMessageClassName: styleRules?.errorMessageClassName
+      },
+      onNewSubmission: resetSubmissionState
+    },
+    !isButtonGroup && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { className: cn("grid grid-cols-12 gap-6", styleRules?.fieldsContainer) }, normalizedFields.map((field) => /* @__PURE__ */ React2.createElement("div", { key: field.name, className: cn(getColumnSpanClass(field.columnSpan ?? 12), "min-w-0") }, /* @__PURE__ */ React2.createElement(
+      DynamicFormField,
+      {
+        field,
+        className: field.className ?? styleRules?.fieldClassName,
+        uploadProgress,
+        onFileUpload,
+        onFileRemove,
+        isUploading
+      }
+    )))), /* @__PURE__ */ React2.createElement(
+      Button,
+      {
+        type: "submit",
+        variant: submitButtonSetup?.submitVariant ?? "default",
+        disabled: form.isSubmitting,
+        className: "mt-6 w-full"
+      },
+      submitButtonSetup?.submitLabel ?? "Submit"
+    ))
+  ));
+}
+FormEngine.displayName = "FormEngine";
 
-export { DynamicFormField, PageSpeedFormSubmissionError, createBlockAdapter, createBlockAdapters, deserializeErrors, generateInitialValues, generateValidationSchema, getColumnSpanClass, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };
+export { DynamicFormField, FormEngine, PageSpeedFormSubmissionError, createBlockAdapter, createBlockAdapters, deserializeErrors, generateInitialValues, generateValidationSchema, getColumnSpanClass, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };
 //# sourceMappingURL=integration.js.map
 //# sourceMappingURL=integration.js.map