04forms · live showcase

Forms vivi.

Le 5 decisioni di 04-forms.html implementate in TSX: FormField primitive · DatePicker (react-aria-components) · CadenceEditor (linear + drag dnd-kit) · PredicateBuilder (react-querybuilder) · state via react-hook-form + Zod.

← index·Lead Explorer

FormField primitive + 6 field types

Layout 2-col (Label sx · Control dx). react-hook-form + Zod resolver. Error inline, AI hint indigo.

DatePicker · single + range · react-aria-components

A11y best-in-class, i18n it-IT, focus/keyboard nav nativi. Style 100% Lenses tokens.

Schedula task

mmddyyyy

Single date + presets PA-friendly

Periodo report

mmddyyyy

Range con presets Q corrente / YTD / ultimi N giorni

CadenceEditor · linear list + drag (dnd-kit)

Linear list, drag-reorder via @dnd-kit/sortable. Modello dati forward-compatible: ogni step ha id stabile, in futuro si può migrare a AST con root: GroupNode (branching/loops).

4 step · linear

+giorni
↓
maxgiorni o reply
↓
+giorni
↓
+giorni

aggiungi

JSON serialization

{
  "name": "Outbound PA standard",
  "steps": [
    {
      "id": "s1",
      "kind": "email",
      "offsetDays": 0,
      "templateRef": "pa-intro-v3"
    },
    {
      "id": "s2",
      "kind": "wait",
      "offsetDays": 0,
      "waitMaxDays": 3
    },
    {
      "id": "s3",
      "kind": "email",
      "offsetDays": 3,
      "templateRef": "pa-followup-v2"
    },
    {
      "id": "s4",
      "kind": "call",
      "offsetDays": 7,
      "title": "Chiamata diretta al referente"
    }
  ]
}

PredicateBuilder · react-querybuilder + Lenses style

AST AND/OR · controls custom (FieldSelector + OperatorSelector + ValueEditor + Combinator) sostituiti con i nostri primitives. JSON IO allineato backend predicates.

✦ aiprova: condizioni AND in alto + group OR per OR-of-AND patterns

JSON predicate

{
  "combinator": "and",
  "rules": [
    {
      "field": "stage",
      "operator": "=",
      "value": "qualified"
    },
    {
      "field": "domain",
      "operator": "=",
      "value": "pa"
    },
    {
      "field": "icpScore",
      "operator": ">=",
      "value": 0.7
    }
  ]
}

{ "name": "Outbound PA standard", "steps": [ { "id": "s1", "kind": "email", "offsetDays": 0, "templateRef": "pa-intro-v3" }, { "id": "s2", "kind": "wait", "offsetDays": 0, "waitMaxDays": 3 }, { "id": "s3", "kind": "email", "offsetDays": 3, "templateRef": "pa-followup-v2" }, { "id": "s4", "kind": "call", "offsetDays": 7, "title": "Chiamata diretta al referente" } ] }

{ "combinator": "and", "rules": [ { "field": "stage", "operator": "=", "value": "qualified" }, { "field": "domain", "operator": "=", "value": "pa" }, { "field": "icpScore", "operator": ">=", "value": 0.7 } ] }