codemeld 2.1.0

package/dist/generators/form-generator.js

@@ -0,0 +1,662 @@
+// ─── Form Generator ────────────────────────────────────────────────
+// Generates form handling code (hooks, validation, components, schemas)
+// for converted React components.
+// ─── HTML Detection ────────────────────────────────────────────────
+/**
+ * Parse an HTML string and extract form field metadata from
+ * `<input>`, `<select>`, and `<textarea>` elements.
+ */
+export function detectFormFields(html) {
+    const fields = [];
+    const seen = new Set();
+    // Pre-parse label associations: for="id" → label text
+    const labelMap = new Map();
+    const labelRegex = /<label[^>]*\bfor\s*=\s*["']([^"']+)["'][^>]*>([\s\S]*?)<\/label>/gi;
+    let labelMatch;
+    while ((labelMatch = labelRegex.exec(html)) !== null) {
+        const forId = labelMatch[1];
+        const text = stripTags(labelMatch[2]).trim();
+        if (forId && text) {
+            labelMap.set(forId, text);
+        }
+    }
+    // ── <input> elements ──────────────────────────────────────────
+    const inputRegex = /<input\b([^>]*?)\/?>/gi;
+    let match;
+    while ((match = inputRegex.exec(html)) !== null) {
+        const attrs = match[1];
+        const type = extractAttr(attrs, 'type') || 'text';
+        // Skip submit/reset/button inputs – they aren't data fields
+        if (['submit', 'reset', 'button', 'image'].includes(type))
+            continue;
+        const name = extractAttr(attrs, 'name') || extractAttr(attrs, 'id') || '';
+        if (!name || seen.has(name))
+            continue;
+        seen.add(name);
+        const id = extractAttr(attrs, 'id') || '';
+        const label = labelMap.get(id) ||
+            labelMap.get(name) ||
+            extractAttr(attrs, 'placeholder') ||
+            undefined;
+        fields.push({
+            name,
+            type,
+            label,
+            required: hasAttr(attrs, 'required'),
+            placeholder: extractAttr(attrs, 'placeholder') || undefined,
+            pattern: extractAttr(attrs, 'pattern') || undefined,
+            min: extractAttr(attrs, 'min') || undefined,
+            max: extractAttr(attrs, 'max') || undefined,
+        });
+    }
+    // ── <textarea> elements ───────────────────────────────────────
+    const textareaRegex = /<textarea\b([^>]*)>([\s\S]*?)<\/textarea>/gi;
+    while ((match = textareaRegex.exec(html)) !== null) {
+        const attrs = match[1];
+        const name = extractAttr(attrs, 'name') || extractAttr(attrs, 'id') || '';
+        if (!name || seen.has(name))
+            continue;
+        seen.add(name);
+        const id = extractAttr(attrs, 'id') || '';
+        const label = labelMap.get(id) ||
+            labelMap.get(name) ||
+            extractAttr(attrs, 'placeholder') ||
+            undefined;
+        fields.push({
+            name,
+            type: 'textarea',
+            label,
+            required: hasAttr(attrs, 'required'),
+            placeholder: extractAttr(attrs, 'placeholder') || undefined,
+        });
+    }
+    // ── <select> elements ─────────────────────────────────────────
+    const selectRegex = /<select\b([^>]*)>([\s\S]*?)<\/select>/gi;
+    while ((match = selectRegex.exec(html)) !== null) {
+        const attrs = match[1];
+        const inner = match[2];
+        const name = extractAttr(attrs, 'name') || extractAttr(attrs, 'id') || '';
+        if (!name || seen.has(name))
+            continue;
+        seen.add(name);
+        const id = extractAttr(attrs, 'id') || '';
+        const label = labelMap.get(id) || labelMap.get(name) || undefined;
+        const options = [];
+        const optRegex = /<option[^>]*\bvalue\s*=\s*["']([^"']*)["'][^>]*>/gi;
+        let optMatch;
+        while ((optMatch = optRegex.exec(inner)) !== null) {
+            if (optMatch[1])
+                options.push(optMatch[1]);
+        }
+        fields.push({
+            name,
+            type: 'select',
+            label,
+            required: hasAttr(attrs, 'required'),
+            options: options.length > 0 ? options : undefined,
+        });
+    }
+    return fields;
+}
+// ─── Hook Generation ───────────────────────────────────────────────
+/**
+ * Generate a custom `useForm` hook that manages field values, touched
+ * state, errors, and submit handling.
+ *
+ * Returns code string exporting:
+ * `{ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, isValid, reset }`
+ */
+export function generateFormHook(formFields) {
+    const fieldNames = formFields.map((f) => f.name);
+    const initialValues = formFields
+        .map((f) => {
+        if (f.type === 'checkbox')
+            return `  ${f.name}: false,`;
+        if (f.type === 'number')
+            return `  ${f.name}: '',`;
+        if (f.type === 'file')
+            return `  ${f.name}: null as File | null,`;
+        return `  ${f.name}: '',`;
+    })
+        .join('\n');
+    const touchedInit = fieldNames.map((n) => `  ${n}: false,`).join('\n');
+    const errorsInit = fieldNames.map((n) => `  ${n}: '',`).join('\n');
+    return `import { useState, useCallback } from 'react';
+
+interface FormValues {
+${formFields
+        .map((f) => {
+        if (f.type === 'checkbox')
+            return `  ${f.name}: boolean;`;
+        if (f.type === 'file')
+            return `  ${f.name}: File | null;`;
+        return `  ${f.name}: string;`;
+    })
+        .join('\n')}
+}
+
+interface FormErrors {
+${fieldNames.map((n) => `  ${n}: string;`).join('\n')}
+}
+
+interface FormTouched {
+${fieldNames.map((n) => `  ${n}: boolean;`).join('\n')}
+}
+
+type ValidateFn = (values: FormValues) => FormErrors;
+
+const initialValues: FormValues = {
+${initialValues}
+};
+
+const initialTouched: FormTouched = {
+${touchedInit}
+};
+
+const initialErrors: FormErrors = {
+${errorsInit}
+};
+
+/**
+ * Custom form hook with validation, touched tracking, and submit handling.
+ */
+export function useForm(validate: ValidateFn, onSubmit: (values: FormValues) => Promise<void> | void) {
+  const [values, setValues] = useState<FormValues>(initialValues);
+  const [errors, setErrors] = useState<FormErrors>(initialErrors);
+  const [touched, setTouched] = useState<FormTouched>(initialTouched);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const isValid = Object.values(errors).every((e) => e === '');
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+      const { name, type } = e.target;
+      const value =
+        type === 'checkbox'
+          ? (e.target as HTMLInputElement).checked
+          : type === 'file'
+            ? (e.target as HTMLInputElement).files?.[0] ?? null
+            : e.target.value;
+
+      setValues((prev) => {
+        const next = { ...prev, [name]: value } as FormValues;
+        setErrors(validate(next));
+        return next;
+      });
+    },
+    [validate],
+  );
+
+  const handleBlur = useCallback(
+    (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+      const { name } = e.target;
+      setTouched((prev) => ({ ...prev, [name]: true }));
+      setErrors(validate(values));
+    },
+    [validate, values],
+  );
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+
+      // Mark all fields as touched
+      const allTouched = Object.keys(touched).reduce(
+        (acc, key) => ({ ...acc, [key]: true }),
+        {} as FormTouched,
+      );
+      setTouched(allTouched);
+
+      const validationErrors = validate(values);
+      setErrors(validationErrors);
+
+      if (Object.values(validationErrors).some((e) => e !== '')) return;
+
+      setIsSubmitting(true);
+      try {
+        await onSubmit(values);
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [values, touched, validate, onSubmit],
+  );
+
+  const reset = useCallback(() => {
+    setValues(initialValues);
+    setErrors(initialErrors);
+    setTouched(initialTouched);
+    setIsSubmitting(false);
+  }, []);
+
+  return { values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, isValid, reset };
+}
+`;
+}
+// ─── Validation Generation ─────────────────────────────────────────
+/**
+ * Generate a `validate` function that checks every field based on its
+ * type and HTML validation attributes (required, pattern, min, max).
+ */
+export function generateFormValidation(fields) {
+    const checks = fields
+        .map((f) => {
+        const lines = [];
+        const val = `values.${f.name}`;
+        // ── required ──────────────────────────────────────────
+        if (f.required) {
+            if (f.type === 'checkbox') {
+                lines.push(`  if (!${val}) errors.${f.name} = '${labelFor(f)} is required';`);
+            }
+            else if (f.type === 'file') {
+                lines.push(`  if (!${val}) errors.${f.name} = '${labelFor(f)} is required';`);
+            }
+            else {
+                lines.push(`  if (!${val} || (typeof ${val} === 'string' && ${val}.trim() === '')) errors.${f.name} = '${labelFor(f)} is required';`);
+            }
+        }
+        // Type-specific validations (only when value is present)
+        const guard = f.type === 'file' || f.type === 'checkbox' ? '' : `${val} && `;
+        switch (f.type) {
+            case 'email':
+                lines.push(`  if (${guard}!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(${val})) errors.${f.name} = 'Please enter a valid email address';`);
+                break;
+            case 'password':
+                lines.push(`  if (${guard}${val}.length < 8) errors.${f.name} = 'Password must be at least 8 characters';`);
+                lines.push(`  else if (${guard}!/[A-Z]/.test(${val})) errors.${f.name} = 'Password must contain an uppercase letter';`);
+                lines.push(`  else if (${guard}!/[a-z]/.test(${val})) errors.${f.name} = 'Password must contain a lowercase letter';`);
+                lines.push(`  else if (${guard}!/[0-9]/.test(${val})) errors.${f.name} = 'Password must contain a number';`);
+                break;
+            case 'tel':
+                lines.push(`  if (${guard}!/^[\\+]?[0-9\\s\\-\\(\\)]{7,15}$/.test(${val})) errors.${f.name} = 'Please enter a valid phone number';`);
+                break;
+            case 'url':
+                lines.push(`  if (${guard}!/^https?:\\/\\/[^\\s]+\\.[^\\s]+$/.test(${val})) errors.${f.name} = 'Please enter a valid URL';`);
+                break;
+            case 'number': {
+                lines.push(`  if (${guard}isNaN(Number(${val}))) errors.${f.name} = '${labelFor(f)} must be a number';`);
+                if (f.min !== undefined) {
+                    lines.push(`  else if (${guard}Number(${val}) < ${f.min}) errors.${f.name} = '${labelFor(f)} must be at least ${f.min}';`);
+                }
+                if (f.max !== undefined) {
+                    lines.push(`  else if (${guard}Number(${val}) > ${f.max}) errors.${f.name} = '${labelFor(f)} must be at most ${f.max}';`);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+        // ── custom pattern ────────────────────────────────────
+        if (f.pattern && f.type !== 'file' && f.type !== 'checkbox') {
+            lines.push(`  if (${guard}!/${f.pattern}/.test(${val})) errors.${f.name} = '${labelFor(f)} format is invalid';`);
+        }
+        return lines.join('\n');
+    })
+        .filter(Boolean)
+        .join('\n\n');
+    const fieldNames = fields.map((f) => f.name);
+    const errorsType = fieldNames.map((n) => `  ${n}: string;`).join('\n');
+    const errorsInit = fieldNames.map((n) => `  ${n}: '',`).join('\n');
+    return `interface FormValues {
+${fields
+        .map((f) => {
+        if (f.type === 'checkbox')
+            return `  ${f.name}: boolean;`;
+        if (f.type === 'file')
+            return `  ${f.name}: File | null;`;
+        return `  ${f.name}: string;`;
+    })
+        .join('\n')}
+}
+
+interface FormErrors {
+${errorsType}
+}
+
+/**
+ * Validate all form fields and return an errors object.
+ */
+export function validate(values: FormValues): FormErrors {
+  const errors: FormErrors = {
+${errorsInit}
+  };
+
+${checks}
+
+  return errors;
+}
+`;
+}
+// ─── Component Generation ──────────────────────────────────────────
+/**
+ * Generate a complete React form component with controlled inputs,
+ * inline validation errors, accessible labels, loading submit state,
+ * and file-upload drag-and-drop support.
+ */
+export function generateFormComponent(fields, action) {
+    const componentName = 'GeneratedForm';
+    const inputElements = fields
+        .map((f) => {
+        const id = `field-${f.name}`;
+        const errorId = `${id}-error`;
+        const labelText = f.label || humanize(f.name);
+        // ── File upload with drag-and-drop ─────────────────────
+        if (f.type === 'file') {
+            return `      {/* ${labelText} */}
+      <div className="form-field">
+        <label htmlFor="${id}">${labelText}${f.required ? ' *' : ''}</label>
+        <div
+          className={\`drop-zone\${dragOver === '${f.name}' ? ' drop-zone--active' : ''}\`}
+          onDragOver={(e) => { e.preventDefault(); setDragOver('${f.name}'); }}
+          onDragLeave={() => setDragOver(null)}
+          onDrop={(e) => {
+            e.preventDefault();
+            setDragOver(null);
+            const file = e.dataTransfer.files[0];
+            if (file) {
+              const syntheticEvent = {
+                target: { name: '${f.name}', type: 'file', files: [file] },
+              } as unknown as React.ChangeEvent<HTMLInputElement>;
+              handleChange(syntheticEvent);
+            }
+          }}
+        >
+          <input
+            id="${id}"
+            name="${f.name}"
+            type="file"
+            onChange={handleChange}
+            aria-describedby={touched.${f.name} && errors.${f.name} ? '${errorId}' : undefined}
+            aria-invalid={touched.${f.name} && !!errors.${f.name}}
+          />
+          <p>Drag & drop a file here, or click to browse</p>
+        </div>
+        {touched.${f.name} && errors.${f.name} && (
+          <span id="${errorId}" className="field-error" role="alert">{errors.${f.name}}</span>
+        )}
+      </div>`;
+        }
+        // ── Textarea ───────────────────────────────────────────
+        if (f.type === 'textarea') {
+            return `      {/* ${labelText} */}
+      <div className="form-field">
+        <label htmlFor="${id}">${labelText}${f.required ? ' *' : ''}</label>
+        <textarea
+          id="${id}"
+          name="${f.name}"
+          value={values.${f.name}}
+          onChange={handleChange}
+          onBlur={handleBlur}${f.placeholder ? `\n          placeholder="${f.placeholder}"` : ''}${f.required ? '\n          required' : ''}
+          aria-describedby={touched.${f.name} && errors.${f.name} ? '${errorId}' : undefined}
+          aria-invalid={touched.${f.name} && !!errors.${f.name}}
+        />
+        {touched.${f.name} && errors.${f.name} && (
+          <span id="${errorId}" className="field-error" role="alert">{errors.${f.name}}</span>
+        )}
+      </div>`;
+        }
+        // ── Select ─────────────────────────────────────────────
+        if (f.type === 'select') {
+            const opts = (f.options || [])
+                .map((o) => `          <option value="${o}">${o}</option>`)
+                .join('\n');
+            return `      {/* ${labelText} */}
+      <div className="form-field">
+        <label htmlFor="${id}">${labelText}${f.required ? ' *' : ''}</label>
+        <select
+          id="${id}"
+          name="${f.name}"
+          value={values.${f.name}}
+          onChange={handleChange}
+          onBlur={handleBlur}${f.required ? '\n          required' : ''}
+          aria-describedby={touched.${f.name} && errors.${f.name} ? '${errorId}' : undefined}
+          aria-invalid={touched.${f.name} && !!errors.${f.name}}
+        >
+          <option value="">Select...</option>
+${opts}
+        </select>
+        {touched.${f.name} && errors.${f.name} && (
+          <span id="${errorId}" className="field-error" role="alert">{errors.${f.name}}</span>
+        )}
+      </div>`;
+        }
+        // ── Radio ──────────────────────────────────────────────
+        if (f.type === 'radio') {
+            const radios = (f.options || [])
+                .map((o) => `          <label>
+            <input
+              type="radio"
+              name="${f.name}"
+              value="${o}"
+              checked={values.${f.name} === '${o}'}
+              onChange={handleChange}
+              onBlur={handleBlur}
+            />
+            ${o}
+          </label>`)
+                .join('\n');
+            return `      {/* ${labelText} */}
+      <fieldset className="form-field">
+        <legend>${labelText}${f.required ? ' *' : ''}</legend>
+${radios}
+        {touched.${f.name} && errors.${f.name} && (
+          <span id="${errorId}" className="field-error" role="alert">{errors.${f.name}}</span>
+        )}
+      </fieldset>`;
+        }
+        // ── Checkbox ───────────────────────────────────────────
+        if (f.type === 'checkbox') {
+            return `      {/* ${labelText} */}
+      <div className="form-field form-field--checkbox">
+        <label>
+          <input
+            id="${id}"
+            name="${f.name}"
+            type="checkbox"
+            checked={values.${f.name} as unknown as boolean}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            aria-describedby={touched.${f.name} && errors.${f.name} ? '${errorId}' : undefined}
+            aria-invalid={touched.${f.name} && !!errors.${f.name}}
+          />
+          ${labelText}${f.required ? ' *' : ''}
+        </label>
+        {touched.${f.name} && errors.${f.name} && (
+          <span id="${errorId}" className="field-error" role="alert">{errors.${f.name}}</span>
+        )}
+      </div>`;
+        }
+        // ── Hidden ─────────────────────────────────────────────
+        if (f.type === 'hidden') {
+            return `      <input type="hidden" name="${f.name}" value={values.${f.name}} />`;
+        }
+        // ── Default (text-like inputs) ─────────────────────────
+        return `      {/* ${labelText} */}
+      <div className="form-field">
+        <label htmlFor="${id}">${labelText}${f.required ? ' *' : ''}</label>
+        <input
+          id="${id}"
+          name="${f.name}"
+          type="${f.type}"
+          value={values.${f.name}}
+          onChange={handleChange}
+          onBlur={handleBlur}${f.placeholder ? `\n          placeholder="${f.placeholder}"` : ''}${f.required ? '\n          required' : ''}
+          aria-describedby={touched.${f.name} && errors.${f.name} ? '${errorId}' : undefined}
+          aria-invalid={touched.${f.name} && !!errors.${f.name}}
+        />
+        {touched.${f.name} && errors.${f.name} && (
+          <span id="${errorId}" className="field-error" role="alert">{errors.${f.name}}</span>
+        )}
+      </div>`;
+    })
+        .join('\n\n');
+    const hasFileField = fields.some((f) => f.type === 'file');
+    const dragOverState = hasFileField
+        ? `\n  const [dragOver, setDragOver] = useState<string | null>(null);`
+        : '';
+    const actionAttr = action ? `\n        action="${action}"` : '';
+    return `import React, { useState } from 'react';
+import { useForm } from './useForm';
+import { validate } from './validate';
+
+/**
+ * ${componentName} – auto-generated form component.
+ */
+export default function ${componentName}() {
+  const { values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, isValid, reset } = useForm(validate, async (values) => {
+    // TODO: implement form submission${action ? `\n    // action: ${action}` : ''}
+    console.log('Form submitted', values);
+  });${dragOverState}
+
+  return (
+    <form
+      onSubmit={handleSubmit}${actionAttr}
+      noValidate
+    >
+${inputElements}
+
+      <div className="form-actions">
+        <button type="submit" disabled={isSubmitting || !isValid}>
+          {isSubmitting ? 'Submitting...' : 'Submit'}
+        </button>
+        <button type="button" onClick={reset} disabled={isSubmitting}>
+          Reset
+        </button>
+      </div>
+    </form>
+  );
+}
+`;
+}
+// ─── Zod Schema Generation ─────────────────────────────────────────
+/**
+ * Generate a Zod validation schema string that mirrors the form fields.
+ * Maps field types to `z.string()`, `z.number()`, `z.boolean()`, etc.
+ * with appropriate refinements.
+ */
+export function generateZodSchema(fields) {
+    const schemaFields = fields
+        .map((f) => {
+        const parts = [];
+        switch (f.type) {
+            case 'checkbox':
+                parts.push(`z.boolean()`);
+                if (f.required) {
+                    parts.push(`.refine((v) => v === true, { message: '${labelFor(f)} is required' })`);
+                }
+                break;
+            case 'number':
+                parts.push(`z.coerce.number({ invalid_type_error: '${labelFor(f)} must be a number' })`);
+                if (f.min !== undefined)
+                    parts.push(`.min(${f.min}, '${labelFor(f)} must be at least ${f.min}')`);
+                if (f.max !== undefined)
+                    parts.push(`.max(${f.max}, '${labelFor(f)} must be at most ${f.max}')`);
+                break;
+            case 'email':
+                parts.push(`z.string()`);
+                if (f.required)
+                    parts.push(`.min(1, '${labelFor(f)} is required')`);
+                parts.push(`.email('Please enter a valid email address')`);
+                break;
+            case 'url':
+                parts.push(`z.string()`);
+                if (f.required)
+                    parts.push(`.min(1, '${labelFor(f)} is required')`);
+                parts.push(`.url('Please enter a valid URL')`);
+                break;
+            case 'password':
+                parts.push(`z.string()`);
+                if (f.required)
+                    parts.push(`.min(1, '${labelFor(f)} is required')`);
+                parts.push(`.min(8, 'Password must be at least 8 characters')`);
+                parts.push(`.regex(/[A-Z]/, 'Password must contain an uppercase letter')`);
+                parts.push(`.regex(/[a-z]/, 'Password must contain a lowercase letter')`);
+                parts.push(`.regex(/[0-9]/, 'Password must contain a number')`);
+                break;
+            case 'tel':
+                parts.push(`z.string()`);
+                if (f.required)
+                    parts.push(`.min(1, '${labelFor(f)} is required')`);
+                parts.push(`.regex(/^[\\+]?[0-9\\s\\-\\(\\)]{7,15}$/, 'Please enter a valid phone number')`);
+                break;
+            case 'file':
+                parts.push(`z.instanceof(File)`);
+                if (!f.required) {
+                    parts.length = 0;
+                    parts.push(`z.instanceof(File).nullable().optional()`);
+                }
+                break;
+            case 'date':
+                parts.push(`z.string()`);
+                if (f.required)
+                    parts.push(`.min(1, '${labelFor(f)} is required')`);
+                parts.push(`.refine((v) => !isNaN(Date.parse(v)), { message: 'Please enter a valid date' })`);
+                break;
+            case 'hidden':
+                parts.push(`z.string()`);
+                break;
+            default:
+                // text, textarea, select, radio, and any other string-based types
+                parts.push(`z.string()`);
+                if (f.required)
+                    parts.push(`.min(1, '${labelFor(f)} is required')`);
+                if (f.pattern) {
+                    parts.push(`.regex(/${f.pattern}/, '${labelFor(f)} format is invalid')`);
+                }
+                if (f.type === 'select' && f.options && f.options.length > 0) {
+                    // replace z.string() with z.enum() for selects with known options
+                    parts.length = 0;
+                    const opts = f.options.map((o) => `'${o}'`).join(', ');
+                    parts.push(`z.enum([${opts}])`);
+                    if (!f.required) {
+                        parts.push(`.optional()`);
+                    }
+                }
+                break;
+        }
+        return `  ${f.name}: ${parts.join('')},`;
+    })
+        .join('\n');
+    return `import { z } from 'zod';
+
+/**
+ * Zod schema for form validation.
+ */
+export const formSchema = z.object({
+${schemaFields}
+});
+
+export type FormData = z.infer<typeof formSchema>;
+`;
+}
+// ─── Internal Helpers ──────────────────────────────────────────────
+/** Extract a single HTML attribute value from an attribute string. */
+function extractAttr(attrs, name) {
+    // Handles both single and double quotes, as well as unquoted values
+    const regex = new RegExp(`\\b${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s>]+))`, 'i');
+    const m = regex.exec(attrs);
+    if (!m)
+        return null;
+    return m[1] ?? m[2] ?? m[3] ?? null;
+}
+/** Check whether a boolean attribute is present. */
+function hasAttr(attrs, name) {
+    return new RegExp(`\\b${name}\\b`, 'i').test(attrs);
+}
+/** Strip HTML tags from a string. */
+function stripTags(html) {
+    return html.replace(/<[^>]*>/g, '');
+}
+/** Derive a human-readable label for error messages. */
+function labelFor(f) {
+    return f.label || humanize(f.name);
+}
+/** Convert a camelCase or snake_case name to a human-readable label. */
+function humanize(name) {
+    return name
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/[_-]/g, ' ')
+        .replace(/^\w/, (c) => c.toUpperCase())
+        .trim();
+}
+//# sourceMappingURL=form-generator.js.map