Feature : Add `registerFieldType()` for full custom field support

[lattln]

Description

@mieweb/forms-engine currently exports registerFieldComponent(key, component), which only mutates the internal componentMap. This enables the renderer to render custom field types if they exist in a schema, but it does not integrate custom fields into the rest of the system (editor field picker, default props, placeholders, answer extraction grouping, etc.).

We need a complete registration API that registers both:

1. The render component
2. The field type configuration metadata used by the editor and engine

---

Problem / Motivation

Without first-class custom field type registration:

• Advanced users cannot extend the editor UI (no picker entry, no label/category)
• Custom fields have no standardized defaultProps or placeholders when created
• Response extraction cannot reliably classify answers (answerType missing)
• The current API appears supported but is incomplete in practice

This limits extensibility and encourages internal config modification instead of proper extension.

---

Proposed Approach

1. Add registerFieldType(key, config) in Engine

Implement registerFieldType() in:

packages/forms-engine/src/helper_shared/fieldTypes-config.js

Responsibilities:

• Register/merge config into fieldTypes[key]
• Optionally register componentMap[key] if config.component is provided
• Update FIELDS_BY_ANSWER_TYPE to include the new key under its answerType

Important:

• FIELDS_BY_ANSWER_TYPE is currently derived at module initialization.
  Runtime registration must either:

  • Mutate the structure safely, or
  • Refactor it to be lazily computed / rebuilt when new types are added.

• Preserve backward compatibility: registerFieldComponent() must continue to work.

---

2. Export from @mieweb/forms-engine

Update:

packages/forms-engine/index.js

Add:

registerFieldType

to the public exports.

---

3. Editor Integration

Ensure custom field types:

• Appear in the editor field picker
• Are grouped by category
• Display label
• Use defaultProps when created
• Respect placeholder configuration

---

4. Documentation + Example

Add:

apps/mieweb-forms-docs/docs/advanced/custom-fields.md

Documentation should cover:

• Component structure (useFieldController, FieldWrapper)
• Edit mode vs preview mode expectations
• Full config options supported by registerFieldType
• answerType usage
• When custom extraction logic is required
• Complete working example

Add example under:

packages/forms-engine/examples/

Include:

• CustomRatingField.jsx
• register-custom-field.js
• README.md

---

Acceptance Criteria

• registerFieldType(key, config) exists in engine and is exported
• Registering a custom field makes it renderable via getFieldComponent()
• Custom field appears in editor field picker with correct label and category
• Creating the field uses defaultProps (must include fieldType: key)
• FIELDS_BY_ANSWER_TYPE reflects runtime registration without restart
• Response extraction works for built-in answerTypes
• Documentation clearly explains custom answerType extraction requirements
• Existing registerFieldComponent() continues to function
• Docs page is linked in sidebar
• Example implementation is functional

---

Notes / Constraints

• Align defaults with existing built-in field definitions

• Decide behavior on re-registration:

  • Ignore if already exists (current pattern), or
  • Allow override with explicit flag

• Custom answerTypes require extraction logic in the store layer (e.g., buildFieldResponse())

---

Implementation Checklist

• Implement registerFieldType() in fieldTypes-config.js
• Update runtime grouping for FIELDS_BY_ANSWER_TYPE
• Export from packages/forms-engine/index.js
• Update editor field picker integration
• Add documentation page
• Add example implementation
• Add minimal validation / helpful error messages
• Test in renderer
• Test in editor
• Test response extraction behavior

---

Related Files

• packages/forms-engine/src/helper_shared/fieldTypes-config.js
• packages/forms-engine/index.js
• packages/forms-engine/src/state/formStore.js
• packages/forms-editor/...
• apps/mieweb-forms-docs/docs/advanced/custom-fields.md