@seniorsistemas/angular-components-mcp 1.0.0-beta.4 → 1.0.0

package/dist/data/component-rules/confirm-dialog.md

@@ -0,0 +1,86 @@
+# Dialog — Regras de UX
+
+## Variantes
+
+| Variante                       | Quando usar                                                                   |
+| ------------------------------ | ----------------------------------------------------------------------------- |
+| **Confirmação simples**        | Utilizar quando há apenas uma ação possível e não existe reversão.            |
+| **Confirmação + Cancelamento** | Utilizar quando o usuário deve ter a opção de prosseguir ou desistir da ação. |
+
+# Regras
+
+## ⛔ Regras de erro
+
+- Não utilizar Dialog para formulários complexos ou com múltiplos campos.
+- Não inserir no Dialog componentes além de título, texto e botões.
+- Não exibir conteúdo secundário ou informações que não interrompam o fluxo do usuário.
+- Não deixar o Dialog sem uma ação clara ou sem possibilidade de fechamento.
+- Não usar quando a mensagem não for importante ou não exigir decisão imediata.
+
+## ⚠️ Regras de recomendação
+
+- Utilizar o Dialog apenas para interromper o usuário quando necessário.
+- Manter o conteúdo sempre claro, objetivo e focado na decisão.
+- A ação principal deve responder diretamente à pergunta apresentada no título.
+- Usar confirmação única quando não houver alternativa reversível.
+- Em casos críticos, destacar visualmente a ação verdadeira.
+
+# Layout e Alinhamento
+
+- O Dialog deve ser centralizado na tela em todos os dispositivos.
+- A estrutura deve seguir a ordem: título → texto → ações.
+- Em telas menores, o espaçamento interno pode ser reduzido, mantendo legibilidade.
+
+# Responsividade
+
+- Deve se adaptar a diferentes larguras sem comprometer a leitura.
+- O fechamento deve ser possível em qualquer tamanho de dispositivo.
+
+# Estados
+
+| Estado                                   | Descrição                                      |
+| ---------------------------------------- | ---------------------------------------------- |
+| **Default (confirmação simples)**        | Exibe texto e um botão de confirmação.         |
+| **Default (confirmação + cancelamento)** | Exibe dois botões: confirmar e cancelar.       |
+| **Focus**                                | O foco deve estar no botão principal ao abrir. |
+
+# Labels
+
+- O título deve apresentar claramente a ação ou decisão.
+- O texto deve complementar o título e reforçar o impacto da ação.
+- Os botões devem usar verbos claros e diretos.
+
+# Acessibilidade
+
+- O foco deve ser direcionado automaticamente ao botão principal ao abrir o Dialog.
+- Deve permitir navegação por teclado.
+- O overlay deve bloquear interações com o conteúdo principal.
+- O conteúdo deve ser textual e acessível para leitores de tela.
+
+# Do’s
+
+- Usar para confirmar ações importantes, como exclusões.
+- Manter estrutura simples e objetiva.
+- Garantir mensagens curtas e diretas.
+- Interromper o usuário apenas quando necessário para validação crítica.
+
+# Don’ts
+
+- Não usar para formulários longos.
+- Não inserir múltiplos componentes ou conteúdos complexos.
+- Não usar para mensagens informativas que não exigem ação.
+- Não deixar ações ambíguas ou pouco claras.
+
+# Boas práticas de UX
+
+- Escrever mensagens diretas e sem redundância.
+- Formular perguntas como “Deseja excluir este item?”.
+- A ação principal deve refletir a escolha mais esperada pelo usuário.
+- Evitar gerar ansiedade: comunicação simples, calma e objetiva.
+
+# Anti-patterns
+
+- Usar Dialog como substituto de modais complexos.
+- Criar sequências de Dialogs em cadeia.
+- Exibir feedback simples que poderia ser apresentado inline ou como toast.
+- Interromper o usuário para ações triviais.

package/dist/data/component-rules/index.json

@@ -1,3 +1,3 @@
 {
-  "components": ["button", "checkbox"]
+  "components": ["button", "checkbox", "confirm-dialog", "radio-button"]
 }