New field types and components needed to support real-world CRUD applications

[wilcorrea]

Context

After analyzing a production React application with ~12 CRUD domains, we identified the field types, renderers, and core features that Ybyra needs to fully cover real-world form scenarios.

The target application uses react-hook-form, zod, shadcn/ui, and manual state management. Ybyra can already replace most of this — but several new components are required.

---

Current Coverage

With the existing field types (text, number, currency, date, datetime, select, toggle, checkbox, file), Ybyra can already handle 3 out of 9 CRUD domains without any changes (Coordinator, Manager, Participant). Adding the critical items below would unlock 4 more domains, and the advanced items would cover the remaining 2.

---

🔴 Critical — Block simple domain migration

1. Text.Password kind

• What: A new kind for TextFieldDefinition that renders a password input (masked characters, optional toggle visibility)
• Where it is needed: User management (password field)
• Scope: Core (fields/text.ts — add to Text enum) + renderer implementations

2. TextareaFieldDefinition

• What: A multi-line text field (rendered as <textarea>) with rows() and optionally maxLength() configuration
• Alternative: Could be a Text.Multiline kind instead of a separate field type
• Where it is needed: Journey (description), Template (body/sample fallback), bulk imports
• Scope: Core (new field definition or new kind) + renderer implementations

---

🟡 Important — Block medium-complexity domain migration

3. TimeFieldDefinition

• What: A time-only input field (HH:MM format), without date component
• Where it is needed: Workflow steps (scheduled execution time)
• Scope: Core (new field type in fields/) + renderer implementations

4. MultiSelectFieldDefinition

• What: A select field that allows choosing multiple values, with search/filter and checkbox-based selection
• Where it is needed: Group management (member assignment with search modal, multi-checkbox selection)
• Scope: Core (new field type) + renderer implementations (modal with checkboxes, tag display for selected items)

5. Code Editor Renderer

• What: A custom renderer (not a new field type) that renders a code editor with syntax highlighting (e.g., CodeMirror or Monaco)
• Where it is needed: Template management (Handlebars template body, JSON sample data)
• Scope: Renderer only — can be registered as a custom renderer in consumer apps. Consider providing a reference implementation or documentation for integrating CodeMirror/Monaco as a Ybyra renderer.

6. Bulk Import Scope/Action Pattern

• What: A reusable pattern (scope or action) for importing records via multi-line textarea (e.g., email,name per line)
• Where it is needed: Coordinator, Manager, Participant, Enrollment (all have "bulk add" tabs)
• Scope: Could be a dedicated scope (Scope.import) or a specialized action. Needs documentation/example of how to implement tabbed add forms (individual vs. bulk).

---

🟠 Advanced — Block complex domain migration

7. ListFieldDefinition (sortable item list)

• What: A field that manages an ordered list of complex objects, with add/edit/remove operations via modal dialogs
• Where it is needed: Workflow (steps list), Journey (contents list)
• Key features:
  • Add item → opens modal with nested form
  • Edit item → opens modal pre-populated
  • Remove item → confirms and removes
  • Reorder items (drag-and-drop or move up/down buttons)
  • Auto-recalculate order property on changes
• Scope: Core (new field type) + React package (modal integration, state management for nested items)

8. Nested Form / Sub-Schema Support

• What: Ability to define a sub-schema that renders inside a modal dialog when adding/editing items in a ListFieldDefinition
• Where it is needed: Workflow (StepForm with trigger/day/when/time/resource/options), Journey (ContentForm with type/name/description/content)
• Key features:
  • Sub-schema with its own fields, validation, and events
  • Conditional field visibility within the sub-form (e.g., trigger type changes which fields are visible)
  • Parent form state is preserved while sub-form is open
• Scope: Core (schema composition) + React package (modal rendering, state isolation)

9. TreeFieldDefinition (hierarchical nested list)

• What: Extension of ListFieldDefinition that supports recursive nesting (items can contain sub-items)
• Where it is needed: Journey (contents with phases → phases contain sub-contents)
• Key features:
  • Recursive add/edit/remove at any nesting level
  • Type-based restrictions (e.g., only "phase" type items can have children)
  • Expand/collapse for nested sections
  • Drag-and-drop reordering within and across levels
• Scope: Core (field definition with recursion support) + React package (tree renderer)

---

🔧 Core System Enhancements

10. Row-Level Conditional Actions

• What: Actions in data tables that change their disabled/hidden state based on the current row's data
• Example: "Resend invitation" action only enabled when status === 'pending'; "Invalidate" only when invalidated === false
• Where it is needed: Enrollment list, Entry list
• Scope: React package (useDataTable action resolution) — may already be partially supported via action handlers

11. Derived/Auto-Generated Fields

• What: A field whose value is automatically computed from another field's value (e.g., slug auto-generated from description using a transform function)
• Where it is needed: Template (slug from description)
• Scope: Core (field configuration for derived values) or achievable via field events (onChange of source field updates target field)

---

Implementation Priority

Phase	Items	Domains Unlocked
Phase 1 — Quick wins	Text.Password, TextareaFieldDefinition	Coordinator, Manager, User, Participant
Phase 2 — Medium	TimeField, MultiSelect, Code Editor, Bulk Import	Template, Enrollment
Phase 3 — Advanced	ListField, Nested Forms, TreeField, Conditional Actions	Workflow, Group, Journey

---

Summary

Category	Count
New field types needed	6 (textarea, password kind, time, multiselect, list, tree)
New renderers needed	1 (code editor — reference impl)
Core enhancements needed	4 (bulk import pattern, conditional actions, derived fields, nested forms)
Domains unlockable	9 out of 12
Specialized pages (keep custom)	12