feat: ds-docs plataforma de documentação do design system

[cesaroeduardo]

Adicionando a plataforma de documentação do Azion Design System ao monorepo. O ds-docs é o hub de documentação dos componentes e regras do design system (@aziontech/webkit), permitindo visualizar componentes, fundações (tokens, cores, tipografia), exemplos de uso e um playground interativo.

O que foi entregue

• Documentação de componentes
  Páginas por componente (props, eventos, slots), com conteúdo em src/content/v1/en e src/content/v1/pt, gerado e validado em cima do código em packages/webkit/src.

• Extração automática a partir do webkit
  Scripts que leem packages/webkit/src e geram/atualizam a documentação: extração de API (props, eventos, slots a partir dos .vue) e scaffold de páginas (cria/atualiza os .mdx de componentes). Assim, alterações no webkit podem ser refletidas na doc rodando build:api e build:scaffold (ou build:scaffold --force para sobrescrever arquivos existentes).

• Fundações e tokens
  Páginas de design foundations (tokens semânticos, cores, tipografia) e integração com o tema (@aziontech/theme).

• Playground
  Ambiente interativo para testar componentes do webkit com controles de props, troca de tema (claro/escuro) e mock do status da Azion para o AzionSystemStatus. Permite teste em tempo real; atualizando no webkit reflete no playground.

• Busca
  Busca em toda a documentação via índice estático (search-index.json) gerado no build.

• i18n
  Conteúdo em inglês e português, organizado por versão e idioma (v1/en, v1/pt).

• CI e qualidade

  • Workflow Documentation CI (lint, link check, cobertura de documentação de componentes, extração de API, build).
  • Verificação de cobertura apontando para packages/webkit/src.

Stack e integração

• Astro 5 + Vue 3 (islands), Tailwind, MDX, Shiki.
• Uso dos pacotes do workspace: @aziontech/webkit, @aziontech/icons, @aziontech/theme.
• Scripts de build: índice de busca, extração de API a partir dos .vue do webkit, scaffold de docs e checagens de governança (links, frontmatter, cobertura).

Estrutura relevante

• apps/ds-docs/ — app Astro da documentação.
• Conteúdo em src/content/v1/{en,pt}/ (components, foundations, get-started, etc.).
• Scripts em apps/ds-docs/scripts/ (extractComponentApi, scaffoldComponentDocs, checkComponentDocs, build-search-index, etc.).
• Workflow em .github/workflows/docs.yml (disparo em mudanças em apps/ds-docs/**, packages/** e no próprio workflow).

---

Como testar

Rodar a documentação localmente

# Na raiz do monorepo
pnpm install
pnpm --filter ds-docs run dev

Acesse http://localhost:4321 (ou a URL exibida no terminal).

Build de produção

cd apps/ds-docs
pnpm build
pnpm preview

Extrair componentes do webkit e gerar/atualizar docs

cd apps/ds-docs

# Extração de API (props, eventos, slots) a partir dos .vue do webkit
pnpm run build:api

# Scaffold: cria ou atualiza páginas .mdx para os componentes (não sobrescreve existentes)
pnpm run build:scaffold

# Scaffold com --force: sobrescreve os .mdx existentes (útil após mudanças grandes no webkit)
pnpm run build:scaffold -- --force

Checagens do CI (opcional)

cd apps/ds-docs
pnpm run lint          # frontmatter e regras
pnpm run lint:links    # links internos
pnpm run lint:coverage # cobertura de docs dos componentes do webkit
pnpm run build:api     # extração de API dos componentes

---

Débitos

• Ajustar importação de tokens do primeflex, vide componente label
• Ajustar estilo dos codeblocks de installation
• Refinar documentação de tokens