@saastro/forms 0.1.3 → 0.2.0

package/dist/index.d.ts

@@ -96,7 +96,7 @@ type ConditionGroup = {
  * Cada acción puede tener su propio trigger (cuándo se ejecuta).
  */
 
-type SubmitActionType = 'http' | 'webhook' | 'email' | 'custom';
+type SubmitActionType = 'http' | 'webhook' | 'email' | 'custom' | 'integration';
 interface HttpEndpointConfig {
     url: string;
     method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
@@ -184,7 +184,26 @@ interface CustomSubmitAction {
     /** Función que se ejecuta con los valores del formulario */
     handler: (values: Record<string, unknown>) => Promise<unknown>;
 }
-type SubmitAction = HttpSubmitAction | WebhookSubmitAction | EmailSubmitAction | CustomSubmitAction;
+/**
+ * References a `site_integrations` row in Saastro Hub. The form runtime
+ * itself doesn't execute integrations (Hub does, server-side, after
+ * receiving the submission); this action exists so the form schema can
+ * declare which integrations Hub should dispatch on submit.
+ *
+ * `integrationRef` is the UUID Hub assigned to the integration when
+ * the user configured it in `/w/{ws}/s/{site}/settings/integrations`.
+ *
+ * Optional `fieldMapping` lets the user rename form field keys to
+ * different names in the destination (e.g. form field "name" →
+ * Sheets column "Full Name"). Default: pass-through.
+ */
+interface IntegrationSubmitAction {
+    type: 'integration';
+    name: string;
+    integrationRef: string;
+    fieldMapping?: Record<string, string>;
+}
+type SubmitAction = HttpSubmitAction | WebhookSubmitAction | EmailSubmitAction | CustomSubmitAction | IntegrationSubmitAction;
 type SubmitTriggerType = 'onSubmit' | 'onStepEnter' | 'onStepExit' | 'onFieldChange' | 'onFieldBlur' | 'onDelay' | 'manual';
 interface SubmitTrigger {
     type: SubmitTriggerType;
@@ -3697,6 +3716,70 @@ declare function executeSubmitActions(actions: SubmitActionNode[], values: Recor
  */
 declare function executeSubmitActionsByTrigger(config: FormConfig, triggerType: SubmitTriggerType, values: Record<string, unknown>, triggerValue?: string): Promise<SubmitActionsResult>;
 
+/**
+ * Build a `CustomSubmitConfig` that routes form submissions to a
+ * Saastro Hub site. Used by Astro / React sites whose forms are
+ * authored in Hub (`builder.saastro.io` embed mode) and stored there.
+ *
+ * The flow is:
+ *
+ *   1. Walk the field values and split into `payload` (scalar/JSON-safe)
+ *      and `files` (instances of File). Hub keeps text fields together;
+ *      files take a separate path.
+ *   2. For each file, POST `/api/public/forms/:siteId/:slug/upload-url`
+ *      to get a presigned R2 PUT URL, then PUT the binary directly to
+ *      that URL. Hub never touches the file body — R2 receives it.
+ *   3. POST `/api/public/forms/:siteId/:slug/submit` with the textual
+ *      payload + an `attachments` array describing the uploaded R2
+ *      keys. Hub inserts the submission row and dispatches integrations
+ *      (Sheets / Resend / etc.) per the form's schema.
+ *
+ * Turnstile: if the form schema declares `meta.requireCaptcha=true`,
+ * the host app must render the Turnstile widget and pass the token
+ * via the special `_turnstile` field in the form values. The helper
+ * extracts it before sending.
+ *
+ * Honeypot: pass via `_hp` (or whatever `meta.honeypotField` says).
+ * The Hub will silently 200 the request and not store anything if
+ * the honeypot is non-empty.
+ */
+
+interface CreateHubFormSubmitOptions {
+    /** Hub origin, e.g. `https://hub.saastro.io`. No trailing slash. */
+    hubUrl: string;
+    siteId: string;
+    formSlug: string;
+}
+/**
+ * Build a `CustomSubmitConfig` to plug into `<Form config={{...,
+ * submit: createHubFormSubmit({...})}} />`.
+ *
+ * On submit:
+ *   - Files are uploaded to R2 first (presigned URLs).
+ *   - Then the payload + attachments are POSTed to Hub's submit endpoint.
+ *   - Throws on any non-2xx so the caller's `<Form>` shows the error.
+ */
+declare function createHubFormSubmit(opts: CreateHubFormSubmitOptions): CustomSubmitConfig;
+
+interface HubFormProps {
+    /** Origin of the Hub API. e.g. `https://hub.saastro.io`. No trailing slash. */
+    hubUrl: string;
+    siteId: string;
+    formSlug: string;
+    /** Custom UI while the schema is being fetched. Defaults to a skeleton. */
+    loadingFallback?: ReactNode;
+    /**
+     * Custom UI when the schema fetch fails. Receives the error message
+     * as a string. Defaults to a minimal red banner.
+     */
+    errorFallback?: (error: string) => ReactNode;
+    /**
+     * Forwarded to `<Form>` — every prop except `config` (which we own).
+     */
+    formProps?: Omit<FormProps, 'config'>;
+}
+declare function HubForm({ hubUrl, siteId, formSlug, loadingFallback, errorFallback, formProps, }: HubFormProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element;
+
 /**
  * Test Data Generator — generates realistic field values for form testing.
  *
@@ -3751,4 +3834,4 @@ declare function getFieldClass(formLayout?: {
  */
 declare function getHiddenClasses(hidden?: Partial<Record<Breakpoint, 'visible' | 'hidden'>>): string;
 
-export { type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, BUILD_METHODS, BUILTIN_RESOLVERS, type BaseFieldProps, type Breakpoint$1 as Breakpoint, type BuiltinTransform, type ButtonCardFieldProps, type ButtonCardOption, type ButtonCheckboxFieldProps, type ButtonConfig, type ButtonProps, type ButtonRadioFieldProps, COMMON_CLASSES, COMMON_METHODS, COMMON_STRINGS, type CalendarProps, type CheckboxFieldProps, type CheckboxGroupFieldProps, type CheckboxProps, type ColumnsValue, type ComboboxFieldProps, type CommandEmptyProps, type CommandFieldProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, type ComponentName, type ComponentOverrides, ComponentProvider, type ComponentProviderProps, type ComponentRegistry, type ComponentRegistryInput, ComponentResolver, type ComponentResolverConfig, type Condition, type ConditionGroup, type ConditionOperator, type CurrencyFieldProps, type CustomSubmitAction, type CustomSubmitConfig, type DatabowlConfig, type DateFieldProps, type DateRangeFieldProps, type DefaultSubmitConfig, type DefinePlugin, type DialogContentProps, type DialogDescriptionProps, type DialogHeaderProps, type DialogProps, type DialogTitleProps, type DialogTriggerProps, type EmailProvider, type EmailSubmitAction, type EndpointConfig, FIELD_DEFAULTS, FieldBuilder, type FieldConfig, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldLayoutConfig, type FieldMapEntry, type FieldMapping, type FieldMappingConfig, type FieldProps, FieldRenderer, type FieldResolver, type FieldTransformFn, type Fields, type FileFieldProps, Form, FormBuilder, type FormButtonProps, type FormButtons, FormComponentsProvider, type FormComponentsProviderProps, type FormConfig, type FormControlProps, type FormFieldProps, type FormLayout, type FormPlugin, type FormProps, type FormRef, type FormStepsInfo, type GapValue, type GlobModules, type HiddenFieldProps, type HtmlFieldProps, type HttpAuthConfig, type HttpBodyConfig, type HttpEndpointConfig, type HttpRetryConfig, type HttpSubmitAction, type InputGroupFieldProps, type InputOTPGroupProps, type InputOTPProps, type InputOTPSlotProps, type InputProps, type InputSize, InternalComponentProvider, type InternalComponentProviderProps, type LabelProps, MissingComponentFallback, type MissingComponentFallbackProps, type NativeSelectFieldProps, type NativeSelectProps, OPTION_BASED_TYPES, type Option, type OtpFieldProps, type PartialComponentRegistry, PluginManager, type PopoverContentProps, type PopoverProps, type PopoverTriggerProps, type PropertyMapping, type RadioFieldProps, type RadioGroupItemProps, type RadioGroupProps, type RangeFieldProps, type RecaptchaConfig, type RecaptchaPluginConfig, type RepeaterFieldProps, type ResolvedComponents, SUSPENSE_CONFIG, type SchemaType, type SelectContentProps, type SelectFieldProps, type SelectItemProps, type SelectProps, type SelectTriggerProps, type SelectValueProps, type SeparatorProps, type SerializableFieldResolver, type SerializationHint, type SliderFieldProps, type SliderProps, type Step, type StepCondition, type StepInfo, type StepStatus, type Steps, StepsAccordion, StepsNavigation, StepsProgress, type SubmitAction, type SubmitActionCondition, type SubmitActionNode, type SubmitActionResult, type SubmitActionType, type SubmitActionsResult, type SubmitConfig, type SubmitConfirmationConfig, type SubmitExecutionConfig, type SubmitTrigger, type SubmitTriggerType, type SubmitType, type SwitchFieldProps, type SwitchGroupFieldProps, type SwitchProps, TYPE_SPECIFIC_PROPERTIES, type TestDataLocale, type TestDataOptions, type TextFieldProps, type TextareaFieldProps, type TextareaProps, type TooltipContentProps, type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps, type UseSubmitConfirmationReturn, VALIDATION_METHODS, type ValidateComponentRegistry, type ValidationContext, type ValidationPresetMeta, type ValidationRules, type WebhookSubmitAction, analyticsPlugin, applyBuiltinTransform, applyFieldMapping, applyFieldMappingSync, applyFieldTransforms, applyTransform, autosavePlugin, compileValidationRules, configureComponents, coreComponents, createComponentRegistry, createMissingComponentPlaceholder, createShadcnRegistry, databowlAction, databowlPlugin, defaultSubmit, definePlugin, detectLocale, executeCustomAction, executeEmailAction, executeHttpAction, executeSubmitAction, executeSubmitActions, executeSubmitActionsByTrigger, executeWebhookAction, fieldTypeComponents, generateFieldValue, generateTestData, getActionsByTrigger, getAllKnownMethods, getAvailablePresets, getComponentResolver, getFieldClass, getFormGridClass, getHiddenClasses, getInstallCommand, getMinDelayMs, getMissingComponents, getRequiredComponents, globalPluginManager, groupMissingByPackage, iconVariants, iconVariantsConfig, inputVariants, inputVariantsConfig, isAdvancedMapping, isValidationRules, isZodSchema, localStoragePlugin, mergeComponentRegistries, parseGlobModules, pxToRem, recaptchaPlugin, registerPreset, resolvePreset, resolveValue, resolveValueSync, textareaVariants, textareaVariantsConfig, useComponentMode, useComponents, useComputedFields, useFormLayout, useFormState, useFormStepsInfo, useHasComponentProvider, useHiddenFieldResolvers, usePartialComponents, useRecaptcha, useSubmitActionTriggers, useSubmitConfirmation, withComponents };
+export { type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, BUILD_METHODS, BUILTIN_RESOLVERS, type BaseFieldProps, type Breakpoint$1 as Breakpoint, type BuiltinTransform, type ButtonCardFieldProps, type ButtonCardOption, type ButtonCheckboxFieldProps, type ButtonConfig, type ButtonProps, type ButtonRadioFieldProps, COMMON_CLASSES, COMMON_METHODS, COMMON_STRINGS, type CalendarProps, type CheckboxFieldProps, type CheckboxGroupFieldProps, type CheckboxProps, type ColumnsValue, type ComboboxFieldProps, type CommandEmptyProps, type CommandFieldProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, type ComponentName, type ComponentOverrides, ComponentProvider, type ComponentProviderProps, type ComponentRegistry, type ComponentRegistryInput, ComponentResolver, type ComponentResolverConfig, type Condition, type ConditionGroup, type ConditionOperator, type CreateHubFormSubmitOptions, type CurrencyFieldProps, type CustomSubmitAction, type CustomSubmitConfig, type DatabowlConfig, type DateFieldProps, type DateRangeFieldProps, type DefaultSubmitConfig, type DefinePlugin, type DialogContentProps, type DialogDescriptionProps, type DialogHeaderProps, type DialogProps, type DialogTitleProps, type DialogTriggerProps, type EmailProvider, type EmailSubmitAction, type EndpointConfig, FIELD_DEFAULTS, FieldBuilder, type FieldConfig, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldLayoutConfig, type FieldMapEntry, type FieldMapping, type FieldMappingConfig, type FieldProps, FieldRenderer, type FieldResolver, type FieldTransformFn, type Fields, type FileFieldProps, Form, FormBuilder, type FormButtonProps, type FormButtons, FormComponentsProvider, type FormComponentsProviderProps, type FormConfig, type FormControlProps, type FormFieldProps, type FormLayout, type FormPlugin, type FormProps, type FormRef, type FormStepsInfo, type GapValue, type GlobModules, type HiddenFieldProps, type HtmlFieldProps, type HttpAuthConfig, type HttpBodyConfig, type HttpEndpointConfig, type HttpRetryConfig, type HttpSubmitAction, HubForm, type HubFormProps, type InputGroupFieldProps, type InputOTPGroupProps, type InputOTPProps, type InputOTPSlotProps, type InputProps, type InputSize, type IntegrationSubmitAction, InternalComponentProvider, type InternalComponentProviderProps, type LabelProps, MissingComponentFallback, type MissingComponentFallbackProps, type NativeSelectFieldProps, type NativeSelectProps, OPTION_BASED_TYPES, type Option, type OtpFieldProps, type PartialComponentRegistry, PluginManager, type PopoverContentProps, type PopoverProps, type PopoverTriggerProps, type PropertyMapping, type RadioFieldProps, type RadioGroupItemProps, type RadioGroupProps, type RangeFieldProps, type RecaptchaConfig, type RecaptchaPluginConfig, type RepeaterFieldProps, type ResolvedComponents, SUSPENSE_CONFIG, type SchemaType, type SelectContentProps, type SelectFieldProps, type SelectItemProps, type SelectProps, type SelectTriggerProps, type SelectValueProps, type SeparatorProps, type SerializableFieldResolver, type SerializationHint, type SliderFieldProps, type SliderProps, type Step, type StepCondition, type StepInfo, type StepStatus, type Steps, StepsAccordion, StepsNavigation, StepsProgress, type SubmitAction, type SubmitActionCondition, type SubmitActionNode, type SubmitActionResult, type SubmitActionType, type SubmitActionsResult, type SubmitConfig, type SubmitConfirmationConfig, type SubmitExecutionConfig, type SubmitTrigger, type SubmitTriggerType, type SubmitType, type SwitchFieldProps, type SwitchGroupFieldProps, type SwitchProps, TYPE_SPECIFIC_PROPERTIES, type TestDataLocale, type TestDataOptions, type TextFieldProps, type TextareaFieldProps, type TextareaProps, type TooltipContentProps, type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps, type UseSubmitConfirmationReturn, VALIDATION_METHODS, type ValidateComponentRegistry, type ValidationContext, type ValidationPresetMeta, type ValidationRules, type WebhookSubmitAction, analyticsPlugin, applyBuiltinTransform, applyFieldMapping, applyFieldMappingSync, applyFieldTransforms, applyTransform, autosavePlugin, compileValidationRules, configureComponents, coreComponents, createComponentRegistry, createHubFormSubmit, createMissingComponentPlaceholder, createShadcnRegistry, databowlAction, databowlPlugin, defaultSubmit, definePlugin, detectLocale, executeCustomAction, executeEmailAction, executeHttpAction, executeSubmitAction, executeSubmitActions, executeSubmitActionsByTrigger, executeWebhookAction, fieldTypeComponents, generateFieldValue, generateTestData, getActionsByTrigger, getAllKnownMethods, getAvailablePresets, getComponentResolver, getFieldClass, getFormGridClass, getHiddenClasses, getInstallCommand, getMinDelayMs, getMissingComponents, getRequiredComponents, globalPluginManager, groupMissingByPackage, iconVariants, iconVariantsConfig, inputVariants, inputVariantsConfig, isAdvancedMapping, isValidationRules, isZodSchema, localStoragePlugin, mergeComponentRegistries, parseGlobModules, pxToRem, recaptchaPlugin, registerPreset, resolvePreset, resolveValue, resolveValueSync, textareaVariants, textareaVariantsConfig, useComponentMode, useComponents, useComputedFields, useFormLayout, useFormState, useFormStepsInfo, useHasComponentProvider, useHiddenFieldResolvers, usePartialComponents, useRecaptcha, useSubmitActionTriggers, useSubmitConfirmation, withComponents };

package/dist/index.js

@@ -6799,6 +6799,166 @@ var BUILTIN_RESOLVERS = [
   { id: "urlParam", label: "URL Parameter", description: "Value from a URL query parameter" }
 ];
 
+// src/lib/createHubFormSubmit.ts
+function publicBase({ hubUrl, siteId, formSlug }) {
+  const cleanHub = hubUrl.replace(/\/+$/, "");
+  return `${cleanHub}/api/public/forms/${encodeURIComponent(siteId)}/${encodeURIComponent(formSlug)}`;
+}
+async function presignAndUpload(base, file) {
+  const presignRes = await fetch(`${base}/upload-url`, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({
+      filename: file.name,
+      size: file.size,
+      mime: file.type || "application/octet-stream"
+    })
+  });
+  const presignBody = await presignRes.json().catch(() => ({}));
+  if (!presignRes.ok || !presignBody.ok || !presignBody.uploadUrl || !presignBody.key) {
+    const detail = presignBody.detail ?? presignBody.error ?? presignRes.statusText;
+    throw new Error(`upload-url failed: ${detail}`);
+  }
+  const putRes = await fetch(presignBody.uploadUrl, {
+    method: "PUT",
+    headers: { "content-type": file.type || "application/octet-stream" },
+    body: file
+  });
+  if (!putRes.ok) {
+    throw new Error(`upload PUT to R2 failed: ${putRes.status} ${putRes.statusText}`);
+  }
+  return {
+    key: presignBody.key,
+    filename: file.name,
+    size: file.size,
+    mime: file.type || "application/octet-stream"
+  };
+}
+function partitionValues(values) {
+  const payload = {};
+  const files = [];
+  let turnstileToken = null;
+  const honeypotEntries = [];
+  for (const [key, value] of Object.entries(values)) {
+    if (key === "_turnstile") {
+      if (typeof value === "string") turnstileToken = value;
+      continue;
+    }
+    if (key.startsWith("_hp") || key === "_hp") {
+      if (typeof value === "string") {
+        honeypotEntries.push({ field: key, value });
+      }
+      continue;
+    }
+    if (typeof File !== "undefined" && value instanceof File) {
+      files.push({ field: key, file: value });
+      continue;
+    }
+    if (Array.isArray(value)) {
+      const onlyFiles = value.every((v) => typeof File !== "undefined" && v instanceof File);
+      if (onlyFiles && value.length > 0) {
+        for (const f of value) files.push({ field: key, file: f });
+        continue;
+      }
+    }
+    payload[key] = value;
+  }
+  return { payload, files, turnstileToken, honeypotEntries };
+}
+function createHubFormSubmit(opts) {
+  const base = publicBase(opts);
+  return {
+    type: "custom",
+    async onSubmit(values) {
+      const { payload, files, turnstileToken, honeypotEntries } = partitionValues(values);
+      const attachments = files.length ? await Promise.all(files.map(({ file }) => presignAndUpload(base, file))) : void 0;
+      const honeypotEntry = {};
+      for (const { field, value } of honeypotEntries) honeypotEntry[field] = value;
+      const submitRes = await fetch(`${base}/submit`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          payload,
+          attachments,
+          turnstile: turnstileToken ?? void 0,
+          ...honeypotEntry
+        })
+      });
+      const body = await submitRes.json().catch(() => ({}));
+      if (!submitRes.ok || !body.ok) {
+        const detail = body.detail ?? body.error ?? submitRes.statusText;
+        throw new Error(`submit failed: ${detail}`);
+      }
+    }
+  };
+}
+
+// src/components/HubForm.tsx
+import { useEffect as useEffect8, useState as useState5 } from "react";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function HubForm({
+  hubUrl,
+  siteId,
+  formSlug,
+  loadingFallback,
+  errorFallback,
+  formProps
+}) {
+  const [state, setState] = useState5({ status: "loading" });
+  useEffect8(() => {
+    let cancelled = false;
+    const cleanHub = hubUrl.replace(/\/+$/, "");
+    const url = `${cleanHub}/api/public/forms/${encodeURIComponent(siteId)}/${encodeURIComponent(formSlug)}.json`;
+    fetch(url, { headers: { accept: "application/json" } }).then(async (res) => {
+      if (!res.ok) throw new Error(`schema fetch failed: ${res.status} ${res.statusText}`);
+      return res.json();
+    }).then((schema) => {
+      if (!cancelled) setState({ status: "ready", schema });
+    }).catch((err) => {
+      if (!cancelled) {
+        setState({
+          status: "error",
+          error: err instanceof Error ? err.message : String(err)
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [hubUrl, siteId, formSlug]);
+  if (state.status === "loading") {
+    return loadingFallback ?? /* @__PURE__ */ jsx14("div", { "data-saastro-hubform-loading": true, style: loadingStyle, children: "Loading\u2026" });
+  }
+  if (state.status === "error") {
+    if (errorFallback) return /* @__PURE__ */ jsx14(Fragment3, { children: errorFallback(state.error) });
+    return /* @__PURE__ */ jsxs11("div", { role: "alert", style: errorStyle, children: [
+      "Could not load form: ",
+      state.error
+    ] });
+  }
+  const config = {
+    ...state.schema,
+    submit: createHubFormSubmit({ hubUrl, siteId, formSlug })
+  };
+  return /* @__PURE__ */ jsx14(Form, { ...formProps, config });
+}
+var loadingStyle = {
+  padding: "2rem 1rem",
+  textAlign: "center",
+  color: "#888",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  fontSize: "0.9rem"
+};
+var errorStyle = {
+  padding: "1rem",
+  background: "#fef2f2",
+  color: "#991b1b",
+  border: "1px solid #fecaca",
+  borderRadius: "0.375rem",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  fontSize: "0.875rem"
+};
+
 // src/utils/testDataGenerator.ts
 var SPANISH_PATTERNS = [
   "nombre",
@@ -7029,6 +7189,7 @@ export {
   Form,
   FormBuilder,
   FormComponentsProvider,
+  HubForm,
   InternalComponentProvider,
   MissingComponentFallback,
   OPTION_BASED_TYPES,
@@ -7050,6 +7211,7 @@ export {
   configureComponents,
   coreComponents,
   createComponentRegistry,
+  createHubFormSubmit,
   createMissingComponentPlaceholder,
   createShadcnRegistry,
   databowlAction,