@saastro/forms 0.1.3 → 0.2.1

package/dist/index.js

@@ -11,7 +11,7 @@ import {
   useHasComponentProvider,
   usePartialComponents,
   withComponents
-} from "./chunk-GHDCNAWC.js";
+} from "./chunk-G2ZSBYVS.js";
 import {
   applyBuiltinTransform,
   applyFieldMapping,
@@ -1362,7 +1362,7 @@ function renderSwitchGroupField(fieldConfig, ctx) {
 import { Suspense, lazy } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var DateRenderersLazy = lazy(
-  () => import("./DateRenderers-3JUQNLKJ.js").then((m) => ({ default: m.DateRenderers }))
+  () => import("./DateRenderers-QKRBXFC6.js").then((m) => ({ default: m.DateRenderers }))
 );
 function renderDateField(fieldConfig, ctx, control, name) {
   return /* @__PURE__ */ jsx7(
@@ -6799,6 +6799,391 @@ var BUILTIN_RESOLVERS = [
   { id: "urlParam", label: "URL Parameter", description: "Value from a URL query parameter" }
 ];
 
+// src/templates/contact.ts
+function createContactTemplate() {
+  return FormBuilder.create("contact").layout("auto").columns(1).gap(4).addField(
+    "name",
+    (f) => f.type("text").label("Name").placeholder("Your full name").required("Please enter your name").minLength(2, "Name must be at least 2 characters")
+  ).addField(
+    "email",
+    (f) => f.type("email").label("Email").placeholder("you@example.com").required("Please enter your email").email("Please enter a valid email address")
+  ).addField(
+    "message",
+    (f) => f.type("textarea").label("Message").placeholder("How can we help?").required("Please write a short message").minLength(10, "Message must be at least 10 characters")
+  ).addStep("main", ["name", "email", "message"]).initialStep("main").buttons({
+    submit: { type: "submit", label: "Send message" },
+    align: "end"
+  }).build();
+}
+
+// src/templates/newsletter.ts
+function createNewsletterTemplate() {
+  return FormBuilder.create("newsletter").layout("auto").columns(1).gap(4).addField(
+    "email",
+    (f) => f.type("email").label("Email").placeholder("you@example.com").required("Please enter your email").email("Please enter a valid email address")
+  ).addField(
+    "consent",
+    (f) => f.type("checkbox").label("I agree to receive newsletter emails").required("You must agree to receive the newsletter")
+  ).addStep("main", ["email", "consent"]).initialStep("main").buttons({
+    submit: { type: "submit", label: "Subscribe" },
+    align: "end"
+  }).build();
+}
+
+// src/templates/lead-gen.ts
+function createLeadGenTemplate() {
+  return FormBuilder.create("lead-gen").layout("auto").columns(2).gap(4).addField(
+    "name",
+    (f) => f.type("text").label("Full name").placeholder("Jane Doe").required("Please enter your name").minLength(2, "Name must be at least 2 characters").columns({ default: 1 })
+  ).addField(
+    "email",
+    (f) => f.type("email").label("Work email").placeholder("jane@acme.com").required("Please enter your email").email("Please enter a valid email address").columns({ default: 1 })
+  ).addField(
+    "phone",
+    (f) => f.type("tel").label("Phone").placeholder("+1 555 0123").optional().columns({ default: 1 })
+  ).addField(
+    "company",
+    (f) => f.type("text").label("Company").placeholder("Acme Inc.").optional().columns({ default: 1 })
+  ).addField(
+    "message",
+    (f) => f.type("textarea").label("What are you looking to solve?").placeholder("A few words about your project or use case").required("Please describe your need briefly").minLength(10, "Message must be at least 10 characters").columns({ default: 2 })
+  ).addStep("main", ["name", "email", "phone", "company", "message"]).initialStep("main").buttons({
+    submit: { type: "submit", label: "Request a call" },
+    align: "end"
+  }).build();
+}
+
+// src/templates/event-rsvp.ts
+function createEventRsvpTemplate() {
+  return FormBuilder.create("event-rsvp").layout("auto").columns(2).gap(4).addField(
+    "name",
+    (f) => f.type("text").label("Full name").placeholder("Jane Doe").required("Please enter your name").minLength(2, "Name must be at least 2 characters").columns({ default: 1 })
+  ).addField(
+    "email",
+    (f) => f.type("email").label("Email").placeholder("jane@example.com").required("Please enter your email").email("Please enter a valid email address").columns({ default: 1 })
+  ).addField(
+    "attending",
+    (f) => f.type("radio").label("Will you attend?").options([
+      { label: "Yes, I will be there", value: "yes" },
+      { label: "No, I cannot make it", value: "no" },
+      { label: "Not sure yet", value: "maybe" }
+    ]).required("Please pick one").columns({ default: 2 })
+  ).addField(
+    "guests",
+    (f) => f.type("number").label("Number of guests (including yourself)").min(1).max(10).optional().columns({ default: 1 })
+  ).addField(
+    "dietary",
+    (f) => f.type("textarea").label("Dietary notes").placeholder("Allergies, preferences, etc.").optional().columns({ default: 2 })
+  ).addStep("main", ["name", "email", "attending", "guests", "dietary"]).initialStep("main").buttons({
+    submit: { type: "submit", label: "Send RSVP" },
+    align: "end"
+  }).build();
+}
+
+// src/templates/quote-request.ts
+function createQuoteRequestTemplate() {
+  return FormBuilder.create("quote-request").layout("auto").columns(2).gap(4).addField(
+    "name",
+    (f) => f.type("text").label("Full name").placeholder("Jane Doe").required("Please enter your name").minLength(2, "Name must be at least 2 characters").columns({ default: 1 })
+  ).addField(
+    "email",
+    (f) => f.type("email").label("Work email").placeholder("jane@acme.com").required("Please enter your email").email("Please enter a valid email address").columns({ default: 1 })
+  ).addField(
+    "company",
+    (f) => f.type("text").label("Company").placeholder("Acme Inc.").required("Please enter your company name").columns({ default: 1 })
+  ).addField(
+    "service",
+    (f) => f.type("select").label("Service type").placeholder("Pick the closest match").options([
+      { label: "Design", value: "design" },
+      { label: "Development", value: "development" },
+      { label: "Consulting", value: "consulting" },
+      { label: "Other", value: "other" }
+    ]).required("Please pick a service").columns({ default: 1 })
+  ).addField(
+    "budget",
+    (f) => f.type("select").label("Estimated budget").placeholder("Pick a range").options([
+      { label: "Under $5k", value: "under-5k" },
+      { label: "$5k \u2013 $25k", value: "5k-25k" },
+      { label: "$25k \u2013 $100k", value: "25k-100k" },
+      { label: "$100k+", value: "100k+" },
+      { label: "Not sure yet", value: "unknown" }
+    ]).required("Please pick a budget range").columns({ default: 2 })
+  ).addField(
+    "details",
+    (f) => f.type("textarea").label("Project details").placeholder("Goals, timeline, anything we should know").required("Please share a few sentences about the project").minLength(20, "Project details must be at least 20 characters").columns({ default: 2 })
+  ).addStep("main", ["name", "email", "company", "service", "budget", "details"]).initialStep("main").buttons({
+    submit: { type: "submit", label: "Request a quote" },
+    align: "end"
+  }).build();
+}
+
+// src/templates/index.ts
+var TEMPLATES = {
+  contact: createContactTemplate,
+  newsletter: createNewsletterTemplate,
+  "lead-gen": createLeadGenTemplate,
+  "event-rsvp": createEventRsvpTemplate,
+  "quote-request": createQuoteRequestTemplate
+};
+var TEMPLATE_META = [
+  {
+    id: "contact",
+    label: "Contact",
+    description: "Name, email, and a message. The classic three-field form.",
+    fieldCount: 3
+  },
+  {
+    id: "newsletter",
+    label: "Newsletter",
+    description: "Email plus a GDPR-friendly consent checkbox.",
+    fieldCount: 2
+  },
+  {
+    id: "lead-gen",
+    label: "Lead generation",
+    description: "Name, work email, phone, company, and a brief message.",
+    fieldCount: 5
+  },
+  {
+    id: "event-rsvp",
+    label: "Event RSVP",
+    description: "Name, email, attendance answer, guest count, and dietary notes.",
+    fieldCount: 5
+  },
+  {
+    id: "quote-request",
+    label: "Quote request",
+    description: "Contact info plus service type, budget range, and a details field.",
+    fieldCount: 6
+  }
+];
+
+// 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, useMemo as useMemo7, useState as useState5 } from "react";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function isRenderableSchema(value) {
+  if (!value || typeof value !== "object") return false;
+  const schema = value;
+  const fields = schema.fields;
+  const steps = schema.steps;
+  if (!fields || typeof fields !== "object" || Object.keys(fields).length === 0) {
+    return false;
+  }
+  if (!steps || typeof steps !== "object" || Object.keys(steps).length === 0) {
+    return false;
+  }
+  return true;
+}
+function HubForm({
+  hubUrl,
+  siteId,
+  formSlug,
+  loadingFallback,
+  errorFallback,
+  unconfiguredFallback,
+  successFallback,
+  onSuccess,
+  onError,
+  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) return;
+      if (isRenderableSchema(schema)) {
+        setState({ status: "ready", schema });
+      } else {
+        setState({ status: "unconfigured" });
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setState({
+          status: "error",
+          error: err instanceof Error ? err.message : String(err)
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [hubUrl, siteId, formSlug]);
+  const wrappedSubmit = useMemo7(() => {
+    const base = createHubFormSubmit({ hubUrl, siteId, formSlug });
+    return {
+      type: "custom",
+      async onSubmit(values) {
+        try {
+          await base.onSubmit(values);
+          onSuccess?.(values);
+          setState({ status: "submitted" });
+        } catch (err) {
+          const error = err instanceof Error ? err : new Error(String(err));
+          onError?.(error);
+          throw error;
+        }
+      }
+    };
+  }, [hubUrl, siteId, formSlug, onSuccess, onError]);
+  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
+    ] });
+  }
+  if (state.status === "unconfigured") {
+    if (unconfiguredFallback !== void 0) return /* @__PURE__ */ jsx14(Fragment3, { children: unconfiguredFallback });
+    return /* @__PURE__ */ jsx14("div", { role: "status", style: unconfiguredStyle, "data-saastro-hubform-unconfigured": true, children: "This form has not been configured yet. Open it in the Hub builder to add fields." });
+  }
+  if (state.status === "submitted") {
+    if (successFallback !== void 0) return /* @__PURE__ */ jsx14(Fragment3, { children: successFallback });
+    return /* @__PURE__ */ jsx14("div", { role: "status", style: successStyle, "data-saastro-hubform-submitted": true, children: "Thanks \u2014 we'll get back to you soon." });
+  }
+  const config = {
+    ...state.schema,
+    submit: wrappedSubmit
+  };
+  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"
+};
+var unconfiguredStyle = {
+  padding: "1rem",
+  background: "#fffbeb",
+  color: "#92400e",
+  border: "1px solid #fcd34d",
+  borderRadius: "0.375rem",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  fontSize: "0.875rem"
+};
+var successStyle = {
+  padding: "1.25rem 1rem",
+  background: "#ecfdf5",
+  color: "#065f46",
+  border: "1px solid #6ee7b7",
+  borderRadius: "0.375rem",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  fontSize: "0.95rem",
+  textAlign: "center"
+};
+
 // src/utils/testDataGenerator.ts
 var SPANISH_PATTERNS = [
   "nombre",
@@ -7029,6 +7414,7 @@ export {
   Form,
   FormBuilder,
   FormComponentsProvider,
+  HubForm,
   InternalComponentProvider,
   MissingComponentFallback,
   OPTION_BASED_TYPES,
@@ -7037,6 +7423,8 @@ export {
   StepsAccordion,
   StepsNavigation,
   StepsProgress,
+  TEMPLATES,
+  TEMPLATE_META,
   TYPE_SPECIFIC_PROPERTIES,
   VALIDATION_METHODS,
   analyticsPlugin,
@@ -7050,7 +7438,13 @@ export {
   configureComponents,
   coreComponents,
   createComponentRegistry,
+  createContactTemplate,
+  createEventRsvpTemplate,
+  createHubFormSubmit,
+  createLeadGenTemplate,
   createMissingComponentPlaceholder,
+  createNewsletterTemplate,
+  createQuoteRequestTemplate,
   createShadcnRegistry,
   databowlAction,
   databowlPlugin,