Form Builder Plugin

import { createBackendStack } from "@btst/stack/api"
import { createPrismaAdapter } from "@btst/adapter-prisma"
import { formBuilderBackendPlugin } from "@btst/stack/plugins/form-builder/api"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

const { handler, dbSchema } = createBackendStack({
  basePath: "/api/data",
  plugins: {
    formBuilder: formBuilderBackendPlugin({
      hooks: {
        // Rate limiting for public submissions
        onBeforeSubmission: async (formSlug, data, ctx) => {
          // Check rate limit by IP
          const isAllowed = await checkRateLimit(ctx.ipAddress, formSlug)
          if (!isAllowed) throw new Error("Rate limit exceeded")
          return data
        },
        // Post-submission actions
        onAfterSubmission: async (submission, form, ctx) => {
          // Send notification email
          await sendEmail({
            to: "admin@example.com",
            subject: `New submission: ${form.name}`,
            body: JSON.stringify(JSON.parse(submission.data), null, 2),
          })
          // CRM integration
          await updateCRM(submission.data)
        },
      },
    })
  },
  adapter: (db) => createPrismaAdapter(prisma, db, {
    provider: "postgresql",
    transaction: true,
  })({})
})

export { handler, dbSchema }

import { createClientStack } from "@btst/stack/client"
import { formBuilderClientPlugin } from "@btst/stack/plugins/form-builder/client"
import { QueryClient } from "@tanstack/react-query"

function getBaseURL(serverOrigin?: string) {
  if (typeof window !== "undefined") return window.location.origin
  return (
    serverOrigin ||
    process.env.BTST_SITE_URL ||
    process.env.BASE_URL ||
    "http://localhost:3000"
  )
}

export const getStackClient = (
  queryClient: QueryClient,
  options?: { headers?: Headers; origin?: string },
) => {
  const baseURL = getBaseURL(options?.origin)
  return createClientStack({
    api: {
      baseURL,
      basePath: "/api/data",
      headers: options?.headers,
    },
    site: { baseURL, basePath: "/pages" },
    queryClient,
    plugins: {
      formBuilder: formBuilderClientPlugin({
        hooks: {
          onErrorLoad: (error, context) => {
            reportRouteLoadError(error, context)
          },
        },
      })
    }
  })
}

import { nextRouter } from "@btst/stack/next"

<StackProvider
  stack={clientStack}
  router={nextRouter()}
  overrides={{
    formBuilder: {
      // Optional custom field implementations
      fieldComponents: {
        file: MyFileField,
      },
      // Lifecycle hooks
      onRouteRender: async (routeName, context) => {
        console.log(`Form Builder route:`, routeName)
      },
      onRouteError: async (routeName, error, context) => {
        console.error(`Form Builder error:`, routeName, error.message)
      },
    }
  }}
>
  {children}
</StackProvider>

@import "@btst/stack/plugins/form-builder/css";

formBuilderClientPlugin({
  // ... other config
  pageComponents: {
    // Replace the form list page
    formList: MyCustomFormList,
    // Replace the new form page
    newForm: MyCustomNewForm,
    // Replace the form editor page — receives the route context as props
    editForm: ({ params }) => <MyCustomFormEditor id={params.id} />,
    // Replace the form submissions page — receives the route context as props
    submissions: ({ params }) => <MyCustomSubmissions formId={params.id} />,
  },
})

"use client"

import { FormRenderer } from "@btst/stack/plugins/form-builder/client/components"

export default function FormDemoPage({ params }: { params: { slug: string } }) {
  return (
    <div className="max-w-2xl mx-auto p-6">
      <FormRenderer
        slug={params.slug}
        onSuccess={(submission) => {
          console.log("Form submitted:", submission)
          // submission.form contains successMessage and redirectUrl
        }}
        onError={(error) => {
          console.error("Submission error:", error)
        }}
        // Optional: Custom loading/error states
        LoadingComponent={() => <div>Loading form...</div>}
        ErrorComponent={({ error }) => (
          <div>Form not found: {error.message}</div>
        )}
        // Optional: Custom submit button text
        submitButtonText="Send Message"
        // Optional: Custom success message (overrides form's successMessage)
        successMessage="Thanks for your submission!"
        className="space-y-6"
      />
    </div>
  )
}

import { 
  useFormBySlug,
  useSubmitForm,
  useFormsAdmin 
} from "@btst/stack/plugins/form-builder/client/hooks"

// Public: Fetch form by slug
function ContactPage() {
  const { form, isLoading } = useFormBySlug("contact-form")
  const submitForm = useSubmitForm("contact-form")

  if (isLoading || !form) return <Loading />

  return (
    <AutoForm
      schema={JSON.parse(form.schema)}
      onSubmit={async (data) => {
        await submitForm.mutateAsync({ data })
      }}
    />
  )
}

// Admin: List all forms
function FormsAdmin() {
  const { forms, total, isLoading } = useFormsAdmin()
  
  return (
    <ul>
      {forms.map(form => (
        <li key={form.id}>{form.name} - {form.status}</li>
      ))}
    </ul>
  )
}

import { defineAuthorization } from "@btst/stack/authorization"
import { formBuilderPermissions } from "@btst/stack/plugins/form-builder/permissions"
import { z } from "zod"

export const authorization = defineAuthorization({
  identity: z.object({
    id: z.string(),
    role: z.enum(["user", "admin"]),
  }),
  permissions: [formBuilderPermissions] as const,
  rules: ({ forms }) => [
    forms.form.read.when(({ identity, facts }) =>
      identity?.role === "admin" ||
      (facts.scope === "record" && identity?.id === facts.ownerId),
    ),
    forms.form.render.allow(),
    forms.form.create.when(({ identity }) => identity?.role === "admin"),
    forms.form.update.when(({ identity, facts }) =>
      identity?.role === "admin" || identity?.id === facts.ownerId,
    ),
    forms.form.delete.when(({ identity, facts }) =>
      identity?.role === "admin" || identity?.id === facts.ownerId,
    ),
    forms.submission.create.allow(),
    forms.submission.read.when(({ identity, facts }) =>
      identity?.role === "admin" || identity?.id === facts.ownerId,
    ),
    forms.submission.delete.when(({ identity, facts }) =>
      identity?.role === "admin" || identity?.id === facts.ownerId,
    ),
  ],
})

import "server-only"
import { createServerAuth } from "@btst/stack/authorization/server"
import { authorization } from "./authorization"

export const serverAuth = createServerAuth({
  authorization,
  getIdentityFromHeaders: async ({ headers }) => {
    const session = await getSession(headers)
    return session?.user ?? null
  },
})

const clientAuth = createClientAuth({
  authorization,
  getIdentity: () => session?.user ?? null,
  loginPath: "/auth/sign-in",
})

<StackProvider
  stack={clientStack}
  auth={clientAuth}
  initialIdentity={initialIdentity}
>
  {children}
</StackProvider>

await app.forRequest(request).operations.formBuilder.updateForm({
  id: formId,
  data: { name: "Updated" },
})

await app.trusted.formBuilder.updateForm({
  id: formId,
  data: { name: "Updated by a trusted job" },
})

formBuilderBackendPlugin({
  hooks: {
    onBeforeSubmission: async (formSlug, data, ctx) => {
      const allowed = await checkRateLimit(ctx.ipAddress, formSlug)
      if (!allowed) throw new Error("Rate limit exceeded")
      if (containsSpam(data)) throw new Error("Submission rejected")
      return data
    },
    onAfterSubmission: async (submission, form, ctx) => {
      await sendSubmissionNotification(submission, form)
    },
    onError: async (error, operation, ctx) => {
      reportFormBuilderError(error, operation, ctx)
    },
  },
})

interface Form {
  id: string
  name: string          // Display name
  slug: string          // URL-friendly identifier
  schema: string        // JSON Schema as string
  successMessage?: string  // Message shown after submission
  redirectUrl?: string     // URL to redirect after submission
  status: "active" | "inactive" | "archived"
  createdBy?: string      // Owner identity used by application rules
  createdAt: Date
  updatedAt: Date
}

interface FormSubmission {
  id: string
  formId: string        // Reference to form
  data: string          // Submitted data as JSON string
  ipAddress?: string    // Client IP
  userAgent?: string    // Client user agent
  submittedBy?: string    // Authenticated submitter, when present
  submittedAt: Date
}

{
  "type": "object",
  "allOf": [
    {
      "title": "Step 1: Personal Info",
      "properties": {
        "name": { "type": "string", "label": "Full Name" },
        "email": { "type": "string", "format": "email" }
      }
    },
    {
      "title": "Step 2: Details",
      "properties": {
        "company": { "type": "string" },
        "message": { "type": "string", "fieldType": "textarea" }
      }
    }
  ]
}

import type { AutoFormInputComponentProps } from "@btst/stack/plugins/form-builder/client"

function CustomRating({ field, label }: AutoFormInputComponentProps) {
  return (
    <div>
      <label>{label}</label>
      <StarRating 
        value={field.value} 
        onChange={field.onChange} 
      />
    </div>
  )
}

<FormRenderer
  slug="feedback"
  fieldComponents={{
    rating: CustomRating,
    richText: MyRichTextEditor,
  }}
/>

import { zodToFormSchema } from "@btst/stack/plugins/form-builder/client"

const jsonSchema = zodToFormSchema(ContactFormSchema, {
  steps: [
    { id: "personal", title: "Personal Information" },
    { id: "message", title: "Your Message" }
  ],
  stepGroupMap: {
    name: 0,
    email: 0,
    message: 1
  }
})

import { formSchemaToZod } from "@btst/stack/plugins/form-builder/client"

// Convert JSON Schema from database to Zod for validation
const zodSchema = formSchemaToZod(jsonSchema)
const result = zodSchema.safeParse(submissionData)

import { dehydrate, HydrationBoundary } from "@tanstack/react-query"
import { getOrCreateQueryClient } from "@/lib/query-client"
import { getStackClient } from "@/lib/stack-client"
import { myStack } from "@/lib/stack"
import { metaElementsToObject, normalizePath } from "@btst/stack/client"
import type { Metadata } from "next"

export async function generateStaticParams() {
  return [{}]
}

// export const revalidate = 3600 // uncomment for ISR

export async function generateMetadata(): Promise<Metadata> {
  const queryClient = getOrCreateQueryClient()
  const stackClient = getStackClient(queryClient)
  const route = stackClient.router.getRoute(normalizePath(["forms"]))
  if (!route) return { title: "Forms" }
  await myStack.raw.formBuilder.prefetchForRoute("formList", queryClient)
  return metaElementsToObject(route.meta?.() ?? []) satisfies Metadata
}

export default async function FormsListPage() {
  const queryClient = getOrCreateQueryClient()
  const stackClient = getStackClient(queryClient)
  const route = stackClient.router.getRoute(normalizePath(["forms"]))
  if (!route) return null
  // Reads directly from DB — works at build time, no HTTP server required
  await myStack.raw.formBuilder.prefetchForRoute("formList", queryClient)
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <route.PageComponent />
    </HydrationBoundary>
  )
}

import { revalidatePath } from "next/cache"
import type { FormBuilderBackendHooks } from "@btst/stack/plugins/form-builder"

const formHooks: FormBuilderBackendHooks = {
  onAfterCreateForm: async (form) => {
    revalidatePath("/forms", "page")
  },
  onAfterUpdateForm: async (form) => {
    revalidatePath("/forms", "page")
  },
}

import { formBuilderClientPlugin } from "@btst/stack/plugins/form-builder/client"
// Import your ejected (and customized) page components
import { FormListPageComponent } from "@/components/btst/form-builder/client/components/pages/form-list-page"
import { EditFormPageComponent } from "@/components/btst/form-builder/client/components/pages/edit-form-page"

formBuilderClientPlugin({
  pageComponents: {
    formList: FormListPageComponent, // replaces the form list page
    // Param routes receive the route context ({ params }) as props
    editForm: ({ params }) => <EditFormPageComponent id={params.id} />,
    // newForm, submissions — omit to keep built-in defaults
  },
})