design-system-metrics v1.0.0

📏 Design System Metrics

Como metrificar o uso do meu Design System no meu produto?

Essa também era a minha dúvida! Pensando nisso, essa biblioteca foi criada com o objetivo de gerar uma documentação simples com algumas métricas sobre o uso do meu Design System dentro de um produto.

📖 Índice

1. 📌 Exemplo
2. 📊 Métricas Geradas
3. 🚀 Como Usar
4. ⚙️ Parâmetros

📌 Exemplo

Se quiser ver um exemplo completo, clique aqui!

📊 Métricas Geradas

Até o momento, estas são as métricas geradas em documentação simples nos formatos Markdown e JSON:

• ✅ Total de arquivos lidos
• ✅ Total de componentes encontrados
• ✅ Total de componentes do Design System encontrados e utilizados
• ✅ Total de outros componentes encontrados e utilizados
• ✅ Percentual de componentes do Design System utilizados
• ✅ Top 10 componentes do Design System mais utilizados
• ✅ Total e percentual de componentes do Design System por página
• ✅ Percentual de páginas com pelo menos um componente do Design System
• ✅ Qual página tem mais componentes do Design System sendo usados
• ✅ Média de componentes do Design System por página

🚀 Como Usar

Veja como adicionar essa biblioteca ao seu projeto de forma simples:

1️⃣ Instale a biblioteca no seu projeto

yarn add -D design-system-metrics

2️⃣ Crie um arquivo .js chamado metrics-ds na raiz do seu projeto

metrics-ds.js

3️⃣ Adicione o seguinte código ao arquivo criado

const { generateMetrics } = require("design-system-metrics");

generateMetrics({
   dirRead: ["./src/pages"],
   extensions: ["tsx"],
   prefixDs: "DS",
   regexToSearchComponent: / <([A-Z])\w+[ ,>,\w]/g, // <Component
});

4️⃣ Adicione o seguinte script ao seu package.json

"metrics-ds": "node metrics-ds.js"

5️⃣ Agora é só rodar o comando no terminal

yarn metrics-ds

⚙️ Parâmetros