Adoption Guide

Como integrar o Design System Rank em produtos RankMyApp. Três estratégias disponíveis: Vendor Local, CDN Vercel, Git Subtree.

Estratégias de Integração

Recomendado

Vendor Local

Copia dist/ds.css e ds/charts/*.js para vendor/design-system-rank/ no produto.

  • ✓ Zero dependência de rede em produção
  • ✓ Controle total de versão
  • ✓ Funciona offline
  • ✗ Atualização manual necessária

CDN Vercel

Referencia diretamente a URL do Vercel com versão fixada.

  • ✓ Sem setup
  • ✓ Sempre na versão certa se usar tag
  • ✗ Depende de conectividade
  • ✗ Latência adicional

Git Subtree

Inclui o repositório como subtree no projeto.

  • ✓ Atualização via git pull
  • ✓ Controle por commit SHA
  • ✗ Mais complexo de configurar
  • ✗ Aumenta o repositório

Setup — Vendor Local (Recomendado)

1

Copiar o dist

mkdir -p vendor/design-system-rank/v1.0.0
cp path/to/design-system-rank/dist/ds.css vendor/design-system-rank/v1.0.0/
cp -r path/to/design-system-rank/ds/charts/ vendor/design-system-rank/v1.0.0/charts/
2

Incluir no HTML base

<html data-ds-theme="ads-intelligence" lang="pt-BR">
<head>
  <link rel="stylesheet" href="/static/vendor/design-system-rank/v1.0.0/ds.css">
</head>
3

Adicionar scripts de charts (opcional)

<!-- Apenas se usar gráficos -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script src="/static/vendor/design-system-rank/v1.0.0/charts/chart-theme.js"></script>
<script src="/static/vendor/design-system-rank/v1.0.0/charts/chart-utils.js"></script>
<script src="/static/vendor/design-system-rank/v1.0.0/charts/chart-base.js"></script>
<!-- Adicionar apenas os renderers que usar -->
<script src="/static/vendor/design-system-rank/v1.0.0/charts/line-chart.js"></script>
4

Verificar aderência ao DS

python scripts/ds_audit.py --path . --format html --output audit-results/report.html

Produtos e Status de Adoção

Produto Tema Modo Status Prioridade
RIOC rioc Dark piloto P1
Ads Intelligence ads-intelligence Dark planejado P2
DataRank datarank Dark planejado P2
RankMyGEO rankmygeo Dark planejado P3
Rank Community rank-community Light planejado P3
Samurai / Hub samurai-hub Dark planejado P4
PostPigeon postpigeon Light planejado P4
Copiado!