@saastro/forms 0.2.0 → 0.3.0

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,165 @@ 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(/\/+$/, "");
@@ -6894,14 +7053,31 @@ function createHubFormSubmit(opts) {
 }
 
 // src/components/HubForm.tsx
-import { useEffect as useEffect8, useState as useState5 } from "react";
+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" });
@@ -6913,7 +7089,12 @@ function HubForm({
       if (!res.ok) throw new Error(`schema fetch failed: ${res.status} ${res.statusText}`);
       return res.json();
     }).then((schema) => {
-      if (!cancelled) setState({ status: "ready", schema });
+      if (cancelled) return;
+      if (isRenderableSchema(schema)) {
+        setState({ status: "ready", schema });
+      } else {
+        setState({ status: "unconfigured" });
+      }
     }).catch((err) => {
       if (!cancelled) {
         setState({
@@ -6926,6 +7107,23 @@ function HubForm({
       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" });
   }
@@ -6936,9 +7134,17 @@ function HubForm({
       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: createHubFormSubmit({ hubUrl, siteId, formSlug })
+    submit: wrappedSubmit
   };
   return /* @__PURE__ */ jsx14(Form, { ...formProps, config });
 }
@@ -6958,6 +7164,25 @@ var errorStyle = {
   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 = [
@@ -7198,6 +7423,8 @@ export {
   StepsAccordion,
   StepsNavigation,
   StepsProgress,
+  TEMPLATES,
+  TEMPLATE_META,
   TYPE_SPECIFIC_PROPERTIES,
   VALIDATION_METHODS,
   analyticsPlugin,
@@ -7211,8 +7438,13 @@ export {
   configureComponents,
   coreComponents,
   createComponentRegistry,
+  createContactTemplate,
+  createEventRsvpTemplate,
   createHubFormSubmit,
+  createLeadGenTemplate,
   createMissingComponentPlaceholder,
+  createNewsletterTemplate,
+  createQuoteRequestTemplate,
   createShadcnRegistry,
   databowlAction,
   databowlPlugin,