@duffcloudservices/site-forms 0.1.2 → 0.1.3

package/src/__tests__/validation.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import { validateField } from '../composables/useFormValidation'
+import type { PortalFormField } from '../types'
+
+describe('managed form validation', () => {
+  it('treats whitespace-only strings as empty for required fields', () => {
+    const field: PortalFormField = {
+      id: 'name',
+      type: 'text',
+      label: 'Name',
+      required: true,
+    }
+
+    expect(validateField(field, '   ')).toBe('Name is required')
+  })
+
+  it('runs string length validation against trimmed input', () => {
+    const field: PortalFormField = {
+      id: 'message',
+      type: 'textarea',
+      label: 'Message',
+      required: true,
+      validation: { minLength: 10 },
+    }
+
+    expect(validateField(field, '          ')).toBe('Message is required')
+    expect(validateField(field, '   short   ')).toBe('Message must be at least 10 characters')
+  })
+})

package/src/__tests__/visible-if.test.ts

@@ -5,7 +5,6 @@ import type { PortalFormDefinition } from '../types'
 
 const def: PortalFormDefinition = {
   formId: 'gated',
-  title: 'Gated',
   submission: { kind: 'lead' },
   fields: [
     {
@@ -98,7 +97,7 @@ describe('visibleIf', () => {
     await flushPromises()
     expect(fetchMock).toHaveBeenCalledTimes(1)
     const [url, init] = fetchMock.mock.calls[0]
-    expect(url).toBe('https://api.test/public/sites/site-x/form-submissions')
+    expect(url).toBe('https://api.test/sites/site-x/forms/gated/submissions')
     const body = JSON.parse((init as RequestInit).body as string)
     expect(body).toEqual({
       formId: 'gated',

package/src/composables/useFormSubmission.ts

@@ -16,7 +16,7 @@ export interface SubmitOptions {
 
 /**
  * POSTs a form submission to
- * `${apiBase}/public/sites/{siteSlug}/form-submissions`.
+ * `${apiBase}/sites/{siteSlug}/forms/{formId}/submissions`.
  *
  * Uses JSON for plain values and `multipart/form-data` when any
  * value is a `File` (file-upload fields).
@@ -27,9 +27,9 @@ export async function submitFormValues(
   const { apiBase, siteSlug, payload } = opts
   const retries = opts.retries ?? 1
   const fetchImpl = opts.fetchImpl ?? fetch
-  const url = `${apiBase.replace(/\/$/, '')}/public/sites/${encodeURIComponent(
+  const url = `${apiBase.replace(/\/$/, '')}/sites/${encodeURIComponent(
     siteSlug,
-  )}/form-submissions`
+  )}/forms/${encodeURIComponent(payload.formId)}/submissions`
 
   const hasFile = Object.values(payload.values).some(
     (v) => typeof File !== 'undefined' && v instanceof File,

package/src/composables/useFormValidation.ts

@@ -35,10 +35,11 @@ export function validateField(
     return undefined
   }
 
+  const normalizedValue = typeof value === 'string' ? value.trim() : value
   const isEmpty =
     value === undefined ||
     value === null ||
-    value === '' ||
+    normalizedValue === '' ||
     (Array.isArray(value) && value.length === 0)
 
   if (field.required && isEmpty) {
@@ -47,8 +48,8 @@ export function validateField(
   if (isEmpty) return undefined
 
   // Type-specific built-ins
-  if (field.type === 'email' && typeof value === 'string') {
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+  if (field.type === 'email' && typeof normalizedValue === 'string') {
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedValue)) {
       return `${field.label} must be a valid email address`
     }
   }
@@ -56,16 +57,16 @@ export function validateField(
   const v = field.validation
   if (!v) return undefined
 
-  if (typeof value === 'string') {
-    if (v.minLength != null && value.length < v.minLength) {
+  if (typeof normalizedValue === 'string') {
+    if (v.minLength != null && normalizedValue.length < v.minLength) {
       return `${field.label} must be at least ${v.minLength} characters`
     }
-    if (v.maxLength != null && value.length > v.maxLength) {
+    if (v.maxLength != null && normalizedValue.length > v.maxLength) {
       return `${field.label} must be at most ${v.maxLength} characters`
     }
     if (v.regex) {
       try {
-        if (!new RegExp(v.regex).test(value)) {
+        if (!new RegExp(v.regex).test(normalizedValue)) {
           return `${field.label} is invalid`
         }
       } catch {

package/src/index.ts

@@ -26,6 +26,14 @@ export { submitFormValues } from './composables/useFormSubmission'
 export type { SubmitOptions } from './composables/useFormSubmission'
 
 export { loadFormDefinitions, parseFormYaml } from './loaders/yaml'
+export {
+  buildStandardFormDefinition,
+  STANDARD_FORM_PRESET_META,
+} from './presets'
+export type {
+  StandardFormPreset,
+  BuildStandardFormOptions,
+} from './presets'
 export {
   validateFormDefinition,
   warnIfInvalid,
@@ -40,6 +48,9 @@ export type {
   FormValues,
   PortalFormDefinition,
   PortalFormField,
+  PortalFormKind,
+  PortalFormFieldRole,
+  PortalFormAttachmentPolicy,
   PortalFormFieldType,
   PortalFormFieldOption,
   PortalFormFieldValidation,

package/src/presets.ts

@@ -0,0 +1,192 @@
+import type { PortalFormDefinition, PortalFormField } from './types'
+
+export type StandardFormPreset = 'contact' | 'revenue-contractor' | 'resume-submission' | 'custom'
+
+export interface BuildStandardFormOptions {
+  formId?: string
+  submitLabel?: string
+  successMessage?: string
+  leadCategory?: string
+}
+
+export const STANDARD_FORM_PRESET_META: Record<StandardFormPreset, { label: string; description: string }> = {
+  contact: {
+    label: 'Contact',
+    description: 'Canonical contact form with standard contact fields.',
+  },
+  'revenue-contractor': {
+    label: 'Revenue contractor',
+    description: 'Contact fields plus a required project summary and optional image upload.',
+  },
+  'resume-submission': {
+    label: 'Resume submission',
+    description: 'Candidate contact fields plus a required resume upload.',
+  },
+  custom: {
+    label: 'Custom / free-form',
+    description: 'Flexible starter that stays fully editable for questionnaires and bespoke intake.',
+  },
+}
+
+const buildContactFields = (): PortalFormField[] => [
+  { id: 'name', type: 'text', role: 'contact-name', label: 'Full name', required: true, width: 'full' },
+  { id: 'email', type: 'email', role: 'contact-email', label: 'Email', required: true, width: 'half' },
+  { id: 'phone', type: 'tel', role: 'contact-phone', label: 'Phone', width: 'half' },
+  { id: 'company', type: 'text', role: 'contact-company', label: 'Company', width: 'full' },
+  {
+    id: 'message',
+    type: 'textarea',
+    role: 'message',
+    label: 'How can we help?',
+    required: true,
+    width: 'full',
+    validation: { minLength: 10, maxLength: 2000 },
+  },
+]
+
+const buildRevenueContractorFields = (): PortalFormField[] => [
+  { id: 'name', type: 'text', role: 'contact-name', label: 'Full name', required: true, width: 'full' },
+  { id: 'email', type: 'email', role: 'contact-email', label: 'Email', required: true, width: 'half' },
+  { id: 'phone', type: 'tel', role: 'contact-phone', label: 'Phone', required: true, width: 'half' },
+  { id: 'company', type: 'text', role: 'contact-company', label: 'Company', width: 'full' },
+  {
+    id: 'message',
+    type: 'textarea',
+    role: 'summary',
+    label: 'Project summary',
+    helpText: 'Tell us what you want built, repaired, or updated.',
+    required: true,
+    width: 'full',
+    validation: { minLength: 20, maxLength: 4000 },
+  },
+  {
+    id: 'project-image',
+    type: 'file',
+    role: 'image-attachments',
+    label: 'Reference image',
+    helpText: 'Optional. Upload one photo or inspiration image to help us understand the request.',
+    width: 'full',
+    validation: { accept: ['image/*'] },
+  },
+]
+
+const buildResumeSubmissionFields = (): PortalFormField[] => [
+  { id: 'name', type: 'text', role: 'contact-name', label: 'Full name', required: true, width: 'full' },
+  { id: 'email', type: 'email', role: 'contact-email', label: 'Email', required: true, width: 'half' },
+  { id: 'phone', type: 'tel', role: 'contact-phone', label: 'Phone', width: 'half' },
+  { id: 'position', type: 'text', label: 'Role you are applying for', width: 'full' },
+  {
+    id: 'message',
+    type: 'textarea',
+    role: 'message',
+    label: 'Anything else we should know?',
+    width: 'full',
+    validation: { maxLength: 2000 },
+  },
+  {
+    id: 'resume',
+    type: 'file',
+    role: 'resume',
+    label: 'Resume',
+    required: true,
+    width: 'full',
+    validation: {
+      accept: [
+        'application/pdf',
+        'application/msword',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      ],
+    },
+  },
+]
+
+const buildCustomFields = (): PortalFormField[] => [
+  { id: 'name', type: 'text', label: 'Full name', required: true, width: 'full' },
+  { id: 'email', type: 'email', label: 'Email', required: true, width: 'half' },
+  { id: 'phone', type: 'tel', label: 'Phone', width: 'half' },
+  {
+    id: 'message',
+    type: 'textarea',
+    label: 'Message',
+    required: true,
+    width: 'full',
+    validation: { minLength: 10, maxLength: 2000 },
+  },
+]
+
+export function buildStandardFormDefinition(
+  preset: StandardFormPreset,
+  options: BuildStandardFormOptions = {},
+): PortalFormDefinition {
+  const resolvedPreset = preset ?? 'custom'
+
+  switch (resolvedPreset) {
+    case 'contact':
+      return {
+        formId: options.formId ?? 'contact',
+        formKind: 'contact',
+        submitLabel: options.submitLabel ?? 'Send',
+        successMessage: options.successMessage ?? 'Thanks — we’ll be in touch shortly.',
+        submission: {
+          kind: 'lead',
+          ...(options.leadCategory ? { category: options.leadCategory } : {}),
+        },
+        fields: buildContactFields(),
+      }
+
+    case 'revenue-contractor':
+      return {
+        formId: options.formId ?? 'contact',
+        formKind: 'revenue-contractor',
+        submitLabel: options.submitLabel ?? 'Request estimate',
+        successMessage: options.successMessage ?? 'Thanks — we’ll review your project and follow up soon.',
+        submission: {
+          kind: 'lead',
+          ...(options.leadCategory ? { category: options.leadCategory } : {}),
+        },
+        attachmentPolicy: {
+          expected: true,
+          required: false,
+          maxFiles: 5,
+          accept: ['image/*'],
+        },
+        fields: buildRevenueContractorFields(),
+      }
+
+    case 'resume-submission':
+      return {
+        formId: options.formId ?? 'resume',
+        formKind: 'resume-submission',
+        submitLabel: options.submitLabel ?? 'Submit resume',
+        successMessage: options.successMessage ?? 'Thanks — your application was received.',
+        submission: {
+          kind: 'lead',
+          ...(options.leadCategory ? { category: options.leadCategory } : {}),
+        },
+        attachmentPolicy: {
+          expected: true,
+          required: true,
+          maxFiles: 1,
+          accept: [
+            'application/pdf',
+            'application/msword',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+          ],
+        },
+        fields: buildResumeSubmissionFields(),
+      }
+
+    default:
+      return {
+        formId: options.formId ?? 'custom-form',
+        formKind: 'freeform',
+        submitLabel: options.submitLabel ?? 'Send',
+        successMessage: options.successMessage ?? 'Thanks — we received your submission.',
+        submission: {
+          kind: 'lead',
+          ...(options.leadCategory ? { category: options.leadCategory } : {}),
+        },
+        fields: buildCustomFields(),
+      }
+  }
+}