@duffcloudservices/site-forms 0.1.1 → 0.1.3

package/src/fields/DcsFormTextarea.vue

@@ -1,43 +1,43 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { PortalFormField } from '../types'
-import DcsFormFieldWrapper from './DcsFormFieldWrapper.vue'
-
-const props = defineProps<{
-  field: PortalFormField
-  modelValue: string | undefined
-  error?: string
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  blur: []
-}>()
-
-const inputId = computed(() => `field-${props.field.id}`)
-</script>
-
-<template>
-  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
-    <slot
-      name="input"
-      :id="inputId"
-      :value="modelValue"
-      :on-input="(e: Event) => emit('update:modelValue', (e.target as HTMLTextAreaElement).value)"
-      :on-blur="() => emit('blur')"
-    >
-      <textarea
-        :id="inputId"
-        class="dcs-form-input dcs-form-textarea"
-        :name="field.id"
-        :placeholder="field.placeholder"
-        :required="field.required"
-        :aria-invalid="!!error"
-        rows="5"
-        :value="modelValue ?? ''"
-        @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
-        @blur="emit('blur')"
-      />
-    </slot>
-  </DcsFormFieldWrapper>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PortalFormField } from '../types'
+import DcsFormFieldWrapper from './DcsFormFieldWrapper.vue'
+
+const props = defineProps<{
+  field: PortalFormField
+  modelValue: string | undefined
+  error?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  blur: []
+}>()
+
+const inputId = computed(() => `field-${props.field.id}`)
+</script>
+
+<template>
+  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
+    <slot
+      name="input"
+      :id="inputId"
+      :value="modelValue"
+      :on-input="(e: Event) => emit('update:modelValue', (e.target as HTMLTextAreaElement).value)"
+      :on-blur="() => emit('blur')"
+    >
+      <textarea
+        :id="inputId"
+        class="dcs-form-input dcs-form-textarea"
+        :name="field.id"
+        :placeholder="field.placeholder"
+        :required="field.required"
+        :aria-invalid="!!error"
+        rows="5"
+        :value="modelValue ?? ''"
+        @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+        @blur="emit('blur')"
+      />
+    </slot>
+  </DcsFormFieldWrapper>
+</template>

package/src/index.ts

@@ -1,51 +1,64 @@
-export { default as DcsForm } from './DcsForm.vue'
-export { default as DcsFormText } from './fields/DcsFormText.vue'
-export { default as DcsFormTextarea } from './fields/DcsFormTextarea.vue'
-export { default as DcsFormSelect } from './fields/DcsFormSelect.vue'
-export { default as DcsFormRadio } from './fields/DcsFormRadio.vue'
-export { default as DcsFormCheckboxGroup } from './fields/DcsFormCheckboxGroup.vue'
-export { default as DcsFormCheckbox } from './fields/DcsFormCheckbox.vue'
-export { default as DcsFormDate } from './fields/DcsFormDate.vue'
-export { default as DcsFormFile } from './fields/DcsFormFile.vue'
-export { default as DcsFormHidden } from './fields/DcsFormHidden.vue'
-export { default as DcsFormSection } from './fields/DcsFormSection.vue'
-export { default as DcsFormHtmlBlock } from './fields/DcsFormHtmlBlock.vue'
-export { default as DcsFormFieldWrapper } from './fields/DcsFormFieldWrapper.vue'
-
-export { useDcsForm } from './composables/useDcsForm'
-export type { UseDcsFormOptions, UseDcsFormReturn } from './composables/useDcsForm'
-export {
-  validateField,
-  validateForm,
-  isFieldVisible,
-  hasErrors,
-} from './composables/useFormValidation'
-export { submitFormValues } from './composables/useFormSubmission'
-export type { SubmitOptions } from './composables/useFormSubmission'
-
-export { loadFormDefinitions, parseFormYaml } from './loaders/yaml'
-export {
-  validateFormDefinition,
-  warnIfInvalid,
-} from './schema/validate'
-export type { SchemaValidationResult } from './schema/validate'
-
-export type {
-  DcsFormSubmitPayload,
-  DcsFormSubmitSuccess,
-  DcsFormSubmitError,
-  FormErrors,
-  FormValues,
-  PortalFormDefinition,
-  PortalFormField,
-  PortalFormFieldType,
-  PortalFormFieldOption,
-  PortalFormFieldValidation,
-  PortalFormFieldVisibleIf,
-  PortalFormFieldWidth,
-  PortalFormStep,
-  PortalFormSubmissionConfig,
-  PortalFormSubmissionLeadConfig,
-  PortalFormSubmissionEmailConfig,
-  PortalFormSubmissionWebhookConfig,
-} from './types'
+import './style.css'
+
+export { default as DcsForm } from './DcsForm.vue'
+export { default as DcsFormText } from './fields/DcsFormText.vue'
+export { default as DcsFormTextarea } from './fields/DcsFormTextarea.vue'
+export { default as DcsFormSelect } from './fields/DcsFormSelect.vue'
+export { default as DcsFormRadio } from './fields/DcsFormRadio.vue'
+export { default as DcsFormCheckboxGroup } from './fields/DcsFormCheckboxGroup.vue'
+export { default as DcsFormCheckbox } from './fields/DcsFormCheckbox.vue'
+export { default as DcsFormDate } from './fields/DcsFormDate.vue'
+export { default as DcsFormFile } from './fields/DcsFormFile.vue'
+export { default as DcsFormHidden } from './fields/DcsFormHidden.vue'
+export { default as DcsFormSection } from './fields/DcsFormSection.vue'
+export { default as DcsFormHtmlBlock } from './fields/DcsFormHtmlBlock.vue'
+export { default as DcsFormFieldWrapper } from './fields/DcsFormFieldWrapper.vue'
+
+export { useDcsForm } from './composables/useDcsForm'
+export type { UseDcsFormOptions, UseDcsFormReturn } from './composables/useDcsForm'
+export {
+  validateField,
+  validateForm,
+  isFieldVisible,
+  hasErrors,
+} from './composables/useFormValidation'
+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,
+} from './schema/validate'
+export type { SchemaValidationResult } from './schema/validate'
+
+export type {
+  DcsFormSubmitPayload,
+  DcsFormSubmitSuccess,
+  DcsFormSubmitError,
+  FormErrors,
+  FormValues,
+  PortalFormDefinition,
+  PortalFormField,
+  PortalFormKind,
+  PortalFormFieldRole,
+  PortalFormAttachmentPolicy,
+  PortalFormFieldType,
+  PortalFormFieldOption,
+  PortalFormFieldValidation,
+  PortalFormFieldVisibleIf,
+  PortalFormFieldWidth,
+  PortalFormStep,
+  PortalFormSubmissionConfig,
+  PortalFormSubmissionLeadConfig,
+  PortalFormSubmissionEmailConfig,
+  PortalFormSubmissionWebhookConfig,
+} from './types'

package/src/loaders/yaml.ts

@@ -1,51 +1,51 @@
-import yaml from 'js-yaml'
-import type { PortalFormDefinition } from '../types'
-
-/**
- * Eagerly load every form YAML under `/.dcs/forms/*.yaml` from the
- * consuming Vite app and parse them into PortalFormDefinition objects.
- *
- * Vite returns the modules as raw strings (when using `?raw` or the
- * default text loader for unknown extensions) or as parsed objects
- * (when `vite-plugin-yaml` is installed). This helper handles both.
- */
-export function loadFormDefinitions(
-  modules: Record<string, unknown>,
-): Record<string, PortalFormDefinition> {
-  const out: Record<string, PortalFormDefinition> = {}
-  for (const [path, mod] of Object.entries(modules)) {
-    const formId = extractFormId(path)
-    const def = parseModule(mod)
-    if (def) {
-      out[def.formId ?? formId] = def
-    }
-  }
-  return out
-}
-
-function extractFormId(path: string): string {
-  const file = path.split('/').pop() ?? path
-  return file.replace(/\.ya?ml$/i, '')
-}
-
-function parseModule(mod: unknown): PortalFormDefinition | null {
-  if (!mod) return null
-  if (typeof mod === 'string') {
-    return yaml.load(mod) as PortalFormDefinition
-  }
-  if (typeof mod === 'object') {
-    // vite-plugin-yaml returns parsed objects, possibly wrapped in
-    // `{ default: ... }` when imported via `import: 'default'`.
-    const maybeDefault = (mod as { default?: unknown }).default
-    if (maybeDefault && typeof maybeDefault === 'object') {
-      return maybeDefault as PortalFormDefinition
-    }
-    return mod as PortalFormDefinition
-  }
-  return null
-}
-
-/** Parse a single raw YAML string into a PortalFormDefinition. */
-export function parseFormYaml(raw: string): PortalFormDefinition {
-  return yaml.load(raw) as PortalFormDefinition
-}
+import yaml from 'js-yaml'
+import type { PortalFormDefinition } from '../types'
+
+/**
+ * Eagerly load every form YAML under `/.dcs/forms/*.yaml` from the
+ * consuming Vite app and parse them into PortalFormDefinition objects.
+ *
+ * Vite returns the modules as raw strings (when using `?raw` or the
+ * default text loader for unknown extensions) or as parsed objects
+ * (when `vite-plugin-yaml` is installed). This helper handles both.
+ */
+export function loadFormDefinitions(
+  modules: Record<string, unknown>,
+): Record<string, PortalFormDefinition> {
+  const out: Record<string, PortalFormDefinition> = {}
+  for (const [path, mod] of Object.entries(modules)) {
+    const formId = extractFormId(path)
+    const def = parseModule(mod)
+    if (def) {
+      out[def.formId ?? formId] = def
+    }
+  }
+  return out
+}
+
+function extractFormId(path: string): string {
+  const file = path.split('/').pop() ?? path
+  return file.replace(/\.ya?ml$/i, '')
+}
+
+function parseModule(mod: unknown): PortalFormDefinition | null {
+  if (!mod) return null
+  if (typeof mod === 'string') {
+    return yaml.load(mod) as PortalFormDefinition
+  }
+  if (typeof mod === 'object') {
+    // vite-plugin-yaml returns parsed objects, possibly wrapped in
+    // `{ default: ... }` when imported via `import: 'default'`.
+    const maybeDefault = (mod as { default?: unknown }).default
+    if (maybeDefault && typeof maybeDefault === 'object') {
+      return maybeDefault as PortalFormDefinition
+    }
+    return mod as PortalFormDefinition
+  }
+  return null
+}
+
+/** Parse a single raw YAML string into a PortalFormDefinition. */
+export function parseFormYaml(raw: string): PortalFormDefinition {
+  return yaml.load(raw) as PortalFormDefinition
+}

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(),
+      }
+  }
+}