semmet-angular-basic

Geração de interfaces Angular simples e sem acessibilidade embutida, seguindo apenas o guia de estilo oficial do Angular.

Agentes de IA: antes de gerar ou editar código com esta biblioteca, leia AI_USAGE_GUIDE.md. O documento contém regras operacionais para fluxos de trabalho do Figma para código, uma tabela de mapeamento entre padrões do Figma e comandos, além do que pode ser alterado livremente (não há contrato de acessibilidade a preservar).

Semmet Angular Basic é uma coleção de schematics do Angular CLI que geram código de aplicação editável: componentes, blocos iniciais, testes e estruturas de entrega. É um fork de semmet-angular com o mesmo vocabulário de componentes e os mesmos comandos, mas sem nenhuma lógica de acessibilidade (sem atributos ARIA, sem gerenciamento de foco, sem comportamento de teclado). Cada componente gerado vem com um arquivo .css estrutural (layout, espaçamento, foco visível, estados nativos como :disabled/:checked) — sem cor, tipografia ou qualquer decisão de marca, que continuam por conta do projeto consumidor.

O código gerado pertence ao projeto consumidor. Não há um pacote de interface para importar em tempo de execução; semmet-angular-basic só é necessário durante a geração de arquivos.

Posicionamento principal

Semmet Angular Basic não é um sistema de design visual e não é uma biblioteca de acessibilidade.

Ele gera blocos Angular simples com HTML semântico, classes BEM derivadas do nome da instância e estado baseado em signals, seguindo apenas as convenções do guia de estilo oficial do Angular: componentes standalone, inject(), protected para membros usados só no template, [class]/[style] em vez de NgClass/NgStyle, e o novo controle de fluxo nativo (@if/@for).

Nenhum componente gerado inclui role, atributos aria-*, gerenciamento de foco ou navegação por teclado. O projeto consumidor é responsável por qualquer requisito de acessibilidade, além do layout final, espaçamento, tipografia, cores, raios, sombras, movimento e expressão da marca.

Use componentes isolados para criar interfaces de aplicação precisas e blocos iniciais opcionais para estruturas editáveis de seções comuns.

A proposta do produto é simples:

• gerar interfaces Angular com mais rapidez, sem código extra que você não pediu;
• testar o comportamento gerado com testes unitários e testes e2e opcionais do Playwright;
• verificar a aplicação com scripts npm comuns;
• empacotar e implantar com arquivos padrão do Angular, CI, Docker e hospedagem.

Fluxo de trabalho do Figma assistido por IA

Use o Semmet Angular Basic como a camada de estrutura e entrega em um processo de implementação orientado pelo Figma.

Ciclo recomendado:

1. Copie uma seleção do Figma ou descreva a tela desejada.
2. Peça a um agente de IA para identificar campos de formulário, navegação, caixas de diálogo, tabelas, listas, abas, cartões, botões, estados de feedback e outros padrões de interface.
3. Mapeie cada padrão para o menor schematic útil do Semmet.
4. Gere os componentes ou as diretivas headless com ng generate.
5. Monte a página na aplicação Angular consumidora.
6. Substitua o conteúdo provisório e edite o HTML localmente para corresponder ao design real do Figma, adicionando o próprio CSS.
7. Execute o build e os testes; depois, adicione estruturas de e2e, CI, Docker ou implantação quando o projeto estiver pronto.

O agente deve tratar a saída do Semmet Angular Basic como código da aplicação: editável, legível e livre para reformulação total (não há contrato de acessibilidade ou CSS a preservar). Para obter um prompt pronto para copiar e colar e uma lista de verificação de mapeamento, consulte AI_USAGE_GUIDE.md.

Uso

ng add semmet-angular-basic
ng generate semmet-angular-basic:button cta-button
ng generate semmet-angular-basic:list-group feature-list
ng generate semmet-angular-basic:currency-input transfer-amount
ng generate semmet-angular-basic:transaction-list account-activity
ng generate semmet-angular-basic:account-selector source-account
ng generate semmet-angular-basic:beneficiary-form new-beneficiary
ng generate semmet-angular-basic:pix-payment pix-transfer
ng generate semmet-angular-basic:authorization-queue approval-queue
ng generate semmet-angular-basic:confirmation-summary transfer-review
ng generate semmet-angular-basic:transaction-detail transaction-receipt
ng generate semmet-angular-basic:block section-card
ng generate semmet-angular-basic:feature payments
ng generate semmet-angular-basic:api-resource payments --path src/app/payments
ng generate semmet-angular-basic:e2e
ng generate semmet-angular-basic:ci
ng generate semmet-angular-basic:docker
ng generate semmet-angular-basic:deploy

Os componentes gerados são arquivos Angular standalone, com um stylesheet estrutural próprio:

cta-button.ts
cta-button.html
cta-button.css
cta-button.spec.ts

O HTML usa classes BEM derivadas do nome escolhido para a instância (ex.: cta-button, cta-button__icon, cta-button--disabled) como ganchos de estilo. O .css gerado cobre apenas layout, espaçamento e estados estruturais (:disabled, :focus-visible, :checked, animações) — sem cor, tipografia, sombra ou qualquer opinião de marca. Adicione o design visual do projeto consumidor sobre essas classes.

Os testes e2e do Playwright são opcionais:

ng generate semmet-angular-basic:button cta-button --e2e

Use --e2e somente quando a aplicação consumidora tiver o Playwright configurado — caso não tenha, execute primeiro ng generate semmet-angular-basic:e2e. ng add semmet-angular-basic não configura o Playwright por padrão; a infraestrutura de e2e é opcional e explícita.

Componentes versus blocos iniciais

Componentes

Componentes e diretivas são o núcleo do Semmet Angular Basic. Eles são a melhor escolha quando a aplicação consumidora precisa de controle preciso sobre marcação, layout e design visual.

• elementos raiz semânticos nos casos em que o elemento nativo é importante (button, dialog, table, etc.);
• estado baseado em signals;
• classes BEM derivadas do nome da instância, com CSS estrutural (sem cor/marca) gerado junto;
• projeção de conteúdo por meio de ng-template, quando necessário;
• entradas visuais abertas, como variant e size, do tipo string, em vez de uniões visuais fechadas.

Exemplos:

ng generate semmet-angular-basic:button save-button
ng generate semmet-angular-basic:card testimonial-card
ng generate semmet-angular-basic:input-group search-box
ng generate semmet-angular-basic:list-group feature-list
ng generate semmet-angular-basic:tabs settings-tabs

Blocos iniciais

Os blocos são estruturas opcionais de seções. Eles são úteis para criar rapidamente os primeiros rascunhos, seções comuns de marketing/produto e a estrutura inicial da aplicação.

Eles não são uma API pública de interface. Um bloco gerado é código local da aplicação. Se a interface desejada precisar de outra estrutura, substitua a marcação do bloco ou use componentes isolados.

ng generate semmet-angular-basic:block hero
ng generate semmet-angular-basic:block section-card
ng generate semmet-angular-basic:block section-pricing
ng generate semmet-angular-basic:block section-table
ng generate semmet-angular-basic:block section-form
ng generate semmet-angular-basic:block section-tabs
ng generate semmet-angular-basic:block section-list-group
ng generate semmet-angular-basic:block header-navbar
ng generate semmet-angular-basic:block footer-navigation

O HTML do bloco gerado inclui um comentário em linha para lembrar aos desenvolvedores que a estrutura pode ser editada e substituída.

CSS gerado é estrutural, não visual

Cada componente gerado vem com um arquivo .css e styleUrl próprios. Esse CSS resolve apenas layout, espaçamento, foco visível e estados nativos (:disabled, :checked, animações) — nunca cor, tipografia, sombra ou qualquer decisão de marca. O HTML carrega classes BEM (bloco/elemento/modificador) nomeadas a partir da instância gerada; o projeto consumidor aplica seu próprio design visual (tokens próprios, Tailwind, etc.) sobre essas classes.

Conteúdo projetado

O conteúdo rico usa padrões de projeção do Angular em vez de APIs limitadas a strings.

Exemplo após gerar search-box:

<app-search-box label="Pesquisar" type="search" [(value)]="query">
  <ng-template searchBoxPrefix>
    <app-search-icon />
  </ng-template>

  <ng-template searchBoxSuffix>
    {{ query().length }}
  </ng-template>
</app-search-box>

Exemplo após gerar testimonial-card:

<app-testimonial-card>
  <h3 testimonialCardHeading>Depoimento de cliente</h3>
  <p>O Semmet Angular Basic fornece a estrutura; esta aplicação é responsável pelo conteúdo, estilo e layout.</p>
</app-testimonial-card>

Exemplo após gerar feature-list:

<ul featureList [(activeId)]="activeFeature">
  @for (item of features; track item.id) {
    <li
      featureListItem
      [value]="item.id"
      #featureItem="featureListItem"
      [class.feature-list__item--active]="featureItem.active()"
    >
      <span>{{ item.label }}</span>
      <strong>{{ item.value }}</strong>
    </li>
  }
</ul>

Schematics de entrega

ng generate semmet-angular-basic:e2e
ng generate semmet-angular-basic:ci
ng generate semmet-angular-basic:docker
ng generate semmet-angular-basic:deploy

Os schematics de entrega são explícitos e opcionais:

• e2e configura o Playwright (dependência, scripts npm e playwright.config.ts), cria uma base determinística de harness em src/app/semmet-e2e, falha quando há testes ignorados e incorpora npm run e2e a um script verify existente.
• Os componentes gerados posteriormente com --e2e recebem um host pertencente ao projeto e uma rota filha determinística. Conecte SEMMET_E2E_ROUTES sob a rota pai /__semmet-e2e na configuração de rotas de teste/local da aplicação consumidora; mantenha essa rota pai fora da produção.
• Use ng generate semmet-angular-basic:e2e --register-route para registrar essa rota pai em um app.routes.ts reconhecido. Isso continua opcional, e o shell da aplicação deve renderizar um RouterOutlet.
• ci gera um fluxo de trabalho do GitHub Actions a partir dos scripts existentes no pacote.
• docker gera arquivos de empacotamento Docker/Nginx para uma SPA Angular.
• deploy gera uma configuração mínima de implantação para as plataformas compatíveis.

Limite opcional de funcionalidade

Os comandos existentes de componentes e blocos permanecem independentes. Use feature somente quando o projeto consumidor se beneficiar de uma pequena estrutura inicial fornecida pelo Semmet:

ng generate semmet-angular-basic:feature payments

Por padrão, são gerados somente um shell de página standalone e rotas preparadas para carregamento lazy:

src/app/payments/
├── payments-page/
│   ├── payments-page.ts
│   ├── payments-page.html
│   ├── payments-page.css
│   └── payments-page.spec.ts
└── payments.routes.ts

Não são gerados interface de pagamento, acesso à API, estado ou modelos, e a rota pai não é registrada, a menos que isso seja solicitado explicitamente. Gere as partes independentemente e coloque-as onde a arquitetura da aplicação exigir:

ng generate semmet-angular-basic:currency-input amount --path src/app/payments
ng generate semmet-angular-basic:confirmation-summary review --path src/app/payments
ng generate semmet-angular-basic:feature reports --register-route

Use --page=false ou --routing=false para obter um limite menor.

Recursos HTTP tipados

api-resource é independente de feature. Ele gera código HTTP Angular editável, com contratos separados de transporte/aplicação, mapeamento puro e testes de requisição:

ng generate semmet-angular-basic:api-resource payments \
  --entity payment \
  --operations list \
  --operations get \
  --operations create \
  --path src/app/payments

As opções de array do Angular CLI devem ser repetidas uma vez para cada valor; um valor separado por vírgulas, como --operations list,get,create, é tratado como uma única operação inválida.

Arquivos gerados:

payments-api.ts
payments-api.spec.ts
payment.dto.ts
payment.model.ts
payment.mapper.ts

O serviço usa inject(HttpClient), e o teste usa provideHttpClient() seguido de provideHttpClientTesting(). Ele não adiciona autenticação, não faz inscrições internamente, não oculta erros nem tenta adivinhar os campos do backend.

Interceptadores HTTP funcionais

Gere um HttpInterceptorFn Angular testado a partir de uma receita explícita:

ng generate semmet-angular-basic:interceptor correlation-id
ng generate semmet-angular-basic:interceptor problem-details
ng generate semmet-angular-basic:interceptor auth-token
ng generate semmet-angular-basic:interceptor logging

Por padrão, o comando cria apenas o interceptador e seu teste HTTP isolado em src/app/http/<recipe>. O registro é explícito:

ng generate semmet-angular-basic:interceptor correlation-id --register

--register atualiza um app.config.ts reconhecido com provideHttpClient(withInterceptors([...])).

Comandos de componentes disponíveis

O catálogo de componentes está dividido em duas famílias práticas:

• componentes genéricos de aplicação para padrões comuns de interface, como botões, caixas de diálogo, abas, formulários, campos de entrada, navegação, tabelas, feedback, sobreposições e estrutura de layout;
• componentes financeiros e bancários para fluxos específicos do domínio, como Pix, boletos, seleção de contas, gerenciamento de beneficiários, aprovações, controles de cartões, gerenciamento de limites, simulação de empréstimos, avisos de conformidade, extratos, comprovantes e transferências.

Sobreposições e conteúdo expansível:

• accordion
• alert-dialog
• dialog
• disclosure
• menu-button
• offcanvas
• popover
• tooltip

Navegação e estrutura:

• breadcrumb
• card
• landmarks
• list-group
• navbar
• navigation-menu
• pagination
• skip-link
• tabs
• toolbar
• tree-view

Formulários e campos de entrada:

• checkbox
• combobox
• currency-input
• form
• input
• input-group
• listbox
• meter
• progress-bar
• radio-group
• select
• slider
• spinbutton
• switch
• textarea

Financeiros e bancários:

• account-selector
• account-summary
• authorization-queue
• beneficiary-form
• beneficiary-list
• card-controls
• compliance-alert
• confirmation-summary
• currency-input
• limit-manager
• loan-simulator
• otp-input
• payment-card
• payment-slip
• pix-payment
• scheduled-payment
• secure-code-input
• transaction-detail
• transaction-filter
• transaction-list
• transfer-form

Feedback, mídia e exibição:

• alert
• avatar
• badge
• button
• button-group
• carousel
• close-button
• rating
• skeleton
• spinner
• steps
• table
• toast

Opções

Opções comuns dos componentes:

• name: obrigatório e posicional.
• project: projeto Angular de destino.
• path: diretório de destino.
• e2e: booleano opcional. Gera um teste do Playwright somente quando solicitado explicitamente.

Relação com semmet-angular

Este projeto é um fork independente de semmet-angular, mantido separadamente. Se você precisa de componentes com acessibilidade completa (ARIA, foco, teclado) seguindo o W3C ARIA Authoring Practices Guide, use semmet-angular. Se você quer apenas a estrutura Angular simples, sem esse contrato, use este pacote.

Licença

MIT