@praxisui/dynamic-form 1.0.0-beta.60 → 1.0.0-beta.62

package/README.md

@@ -37,19 +37,24 @@ keywords:
   - "schema-driven"
   - "layout editor"
   - "settings integration"
-last_updated: "2026-03-07"
+last_updated: "2026-03-12"
 ---
 
 # @praxisui/dynamic-form
 
 > Standalone dynamic form component with schema-driven UI, native field cascades, settings integration, and a built-in configuration editor.
 
-## 🔰 Exemplos / Quickstart
+## Documentation
 
-Para ver esta biblioteca em funcionamento em uma aplicação completa, utilize o projeto de exemplo (Quickstart):
+- Official documentation: https://praxisui.dev
+- Quickstart reference app: https://github.com/codexrodrigues/praxis-ui-quickstart
+- Recommended for: schema-driven screens that need runtime forms, settings integration and contract-first metadata
 
-- Repositório: https://github.com/codexrodrigues/praxis-ui-quickstart
-- O Quickstart demonstra a integração das bibliotecas `@praxisui/*` em um app Angular, incluindo instalação, configuração e uso em telas reais.
+## When to use
+
+- Build forms from metadata instead of hand-coding each screen
+- Keep runtime editing and layout governance inside the host application
+- Integrate with other `@praxisui/*` packages through shared contracts and settings flows
 
 ## Install
 
@@ -159,6 +164,7 @@ O `@praxisui/dynamic-form` agora aceita uma surface fundacional para hospedar bl
 
 Inputs relevantes:
 - `config.formBlocksBefore?: WidgetDefinition[]`
+- `config.formBlocksBeforeActions?: WidgetDefinition[]`
 - `config.formBlocksAfter?: WidgetDefinition[]`
 - `config.editorialContext?: Record<string, unknown>`
 - `[editorialContext]?: Record<string, unknown>`
@@ -179,25 +185,76 @@ const formConfig: FormConfig = {
   editorialContext: {
     accountName: 'Helena Costa',
     accountRole: 'Gestora financeira',
+    accountContext: {
+      user: {
+        name: 'Helena Costa',
+        email: 'helena.costa@praxis.demo',
+        role: 'Gestora financeira',
+      },
+      tenant: {
+        name: 'Praxis Holding',
+      },
+    },
   },
   formBlocksBefore: [
     {
-      id: 'praxis-wizard-content',
+      id: 'widget:hero-banner',
       inputs: {
-        blockId: 'editorial:before:hero:1',
+        instanceId: 'editorial:before:hero:1',
         title: 'Praxis Summit 2026',
         subtitle: 'Inscricao institucional',
-        text: 'Placeholder fundacional para hero/rich text enquanto os widgets editoriais definitivos ainda nao existem.',
+        description: 'Experiencia institucional com composicao editorial hospedada antes do formulario.',
+        variant: 'event',
+      },
+    },
+    {
+      id: 'widget:rich-text-block',
+      inputs: {
+        instanceId: 'editorial:before:rich-text:1',
+        title: 'Antes de comecar',
+        subtitle: 'Contexto editorial',
+        icon: 'info',
+        contentFormat: 'markdown',
+        content: 'Confirme os dados abaixo antes do envio e consulte a [documentacao](https://example.com/docs) se precisar de suporte.',
+      },
+    },
+    {
+      id: 'widget:legal-notice',
+      inputs: {
+        instanceId: 'editorial:before:legal:1',
+        title: 'Uso de dados',
+        contentFormat: 'plain',
+        content: 'Ao participar, voce reconhece a politica institucional aplicavel.',
+        severity: 'info',
+      },
+    },
+  ],
+  formBlocksBeforeActions: [
+    {
+      id: 'form:user-context-summary',
+      inputs: {
+        instanceId: 'editorial:before-actions:user-context:1',
+        title: 'Conta atual',
+        source: 'context',
+        context: '${accountContext}',
+        fields: [
+          { label: 'Nome', valuePath: 'user.name', fallback: '-' },
+          { label: 'E-mail', valuePath: 'user.email', fallback: '-' },
+        ],
       },
     },
   ],
   formBlocksAfter: [
     {
-      id: 'praxis-wizard-inline-notice',
+      id: 'widget:footer-links',
       inputs: {
-        blockId: 'editorial:after:legal:1',
-        tone: 'info',
-        text: 'Placeholder fundacional para legal-notice.',
+        instanceId: 'editorial:after:footer-links:1',
+        brandText: 'Praxis',
+        secondaryText: 'Todos os direitos reservados.',
+        links: [
+          { label: 'Docs', href: '/components/dynamic-form/docs/overview' },
+          { label: 'API', href: '/components/dynamic-form/api' },
+        ],
       },
     },
   ],
@@ -233,10 +290,13 @@ Uso no host:
 ```
 
 Notas:
-- `formBlocksBefore` e `formBlocksAfter` nao entram em `formData`.
-- `widgetEvent` reemite eventos dos widgets hospedados com `placement` (`before` ou `after`).
+- `formBlocksBefore`, `formBlocksBeforeActions` e `formBlocksAfter` nao entram em `formData`.
+- `widgetEvent` reemite eventos dos widgets hospedados com `placement` (`before`, `beforeActions` ou `after`).
 - `editorialContext` deve ser tratado como imutavel; mutacoes in-place nao invalidam o cache do host.
-- No ciclo fundacional, exemplos podem usar widgets existentes como placeholders visuais para hero, rich text, legal notice, user context summary e footer links.
+- A surface editorial ja suporta widgets reais compartilhados para hero, rich text, legal notice, user context summary e footer links.
+- `formBlocksBeforeActions` renderiza depois das secoes e antes da area principal de acoes, sendo o slot recomendado para blocos contextuais como `form:user-context-summary`.
+- `formBlocksAfter` permanece como slot de fechamento e continua renderizando depois do formulario inteiro, incluindo os CTAs.
+- secoes agora suportam `appearance` (`card|plain|step`) e `stepLabel` para cabecalhos mais estruturados.
 
 See public exports: `projects/praxis-dynamic-form/src/public-api.ts`.
 
@@ -262,7 +322,7 @@ Os paths micro são normalizados para `fieldMetadata[].<prop>` para garantir que
 - Semântica de limpeza: valores `null` em `properties/propertiesWhenFalse` removem o override e retornam ao valor base do layout; ausência mantém o valor base.
 - Whitelist por tipo (somente propriedades a seguir são aplicadas; demais são descartadas e logadas em dev):
   - `field`: `visible`, `required`, `readonly`, `disabled`, `className`, `style`, `label`, `description`, `placeholder`, `hint`, `tooltip`, `prefixIcon`, `suffixIcon`, `prefixText`, `suffixText`, `defaultValue`, `options` (array `{label,value,disabled?}`), `appearance` (`fill|outline`), `color` (`primary|accent|warn`), `floatLabel` (`auto|always|never`), `hintPosition` (`start|end`), `validators` (primitivos por chave).
-  - `section`: `visible`, `title`, `description`, `icon`, `className`, `style`, `collapsible`, `collapsed`, `headerTooltip`, `headerAlign` (`start|center`), gaps (`gapBottom`, `titleGapBottom`, `descriptionGapBottom`), cores/tipografia (`titleColor`, `descriptionColor`, `titleStyle`, `descriptionStyle`).
+  - `section`: `visible`, `title`, `description`, `icon`, `className`, `style`, `collapsible`, `collapsed`, `headerTooltip`, `headerAlign` (`start|center`), `appearance` (`card|plain|step`), `stepLabel`, gaps (`gapBottom`, `titleGapBottom`, `descriptionGapBottom`), cores/tipografia (`titleColor`, `descriptionColor`, `titleStyle`, `descriptionStyle`).
   - `action`: `visible`, `disabled`, `loading`, `label`, `icon`, `tooltip`, `color` (`primary|accent|warn|basic`), `variant` (`raised|stroked|flat|fab`), `size` (`small|medium|large`), `className`, `style`.
   - `row`: `visible`, `gap`, `rowGap`, `className`, `style`.
   - `column`: `visible`, `span`, `offset`, `order`, `hidden`, `align` (`start|center|end|stretch`), `padding`, `className`, `style`.
@@ -387,6 +447,49 @@ Ou por seção, via metadado `titleGapBottom` (em pixels), que aplica inline som
 - `@praxisui/dynamic-form` `0.0.x` → Angular `20.x`
 - Module format: `ESM2022`
 
+## Crash Recovery Checkpoint
+
+Estado registrado em `2026-03-15` para retomada rapida do trabalho de E2E do editor `/form-config-editor`.
+
+Suites Playwright ja adicionadas e validadas:
+- `projects/praxis-dynamic-form/test-dev/e2e/form-config-editor-smoke.playwright.spec.ts`
+- `projects/praxis-dynamic-form/test-dev/e2e/form-config-editor-layout.playwright.spec.ts`
+- `projects/praxis-dynamic-form/test-dev/e2e/form-config-editor-rules.playwright.spec.ts`
+- `projects/praxis-dynamic-form/test-dev/e2e/form-config-editor-cascades.playwright.spec.ts`
+- `projects/praxis-dynamic-form/test-dev/e2e/form-config-editor-json.playwright.spec.ts`
+- `projects/praxis-dynamic-form/test-dev/e2e/form-config-editor-hooks.playwright.spec.ts`
+- `projects/praxis-dynamic-form/test-dev/e2e/form-config-editor-actions.playwright.spec.ts`
+- `projects/praxis-dynamic-form/test-dev/e2e/form-config-editor-actions-custom.playwright.spec.ts`
+
+Cobertura ja estabilizada:
+- smoke das tabs principais do editor integrado
+- `Layout`
+- `Regras`
+- `Cascatas`
+- `JSON` com edicao real e bloqueio de payload invalido
+- `Hooks`
+- `Acoes` (`Botoes Padrao` e `Layout`)
+- `Acoes` customizadas profundas (`showAlert` simples e estruturado)
+- `Comportamento`
+- `Mensagens`
+- `Dicas e Tooltips`
+
+Ajuste tecnico aplicado durante essa fase:
+- [praxis-dynamic-form-config-editor.ts](/mnt/d/Developer/praxis-plataform/praxis-ui-angular/projects/praxis-dynamic-form/src/lib/config-editor/praxis-dynamic-form-config-editor.ts) agora chama `this.jsonEditor?.updateJsonFromConfig(this.editedConfig)` em `onConfigChange(...)` para manter o editor JSON sincronizado com mudancas vindas de abas como `Hooks`.
+- [actions-editor.component.ts](/mnt/d/Developer/praxis-plataform/praxis-ui-angular/projects/praxis-dynamic-form/src/lib/actions-editor/actions-editor.component.ts) agora mescla catalogo legado + catalogo global do app para o editor de acoes customizadas.
+- [actions-editor.component.ts](/mnt/d/Developer/praxis-plataform/praxis-ui-angular/projects/praxis-dynamic-form/src/lib/actions-editor/actions-editor.component.ts) agora preserva draft local dos campos globais e usa `track` estavel em `actions.custom`.
+
+Comando base usado para rerodar suites isoladas:
+
+```bash
+node ./node_modules/playwright/cli.js test --config tools/e2e/playwright/praxis-dynamic-form-config-editor.playwright.config.ts <spec>
+```
+
+Se houver crash, retomar daqui:
+1. garantir que o app esteja no ar
+2. rerodar a ultima suite alterada
+3. proximo alvo pendente: consolidar a bateria completa ou seguir para outra area residual do editor
+
 ## License
 
 Apache-2.0 – see the `LICENSE` packaged with this library or the repository root.