Ana Gaming Storybook

Este repositório contém os componentes reutilizáveis utilizados nos projetos de gamificação da Ana Gaming.

🚀 Como utilizar os componentes

Você pode instalar este pacote em qualquer projeto React/Next.js com:

# Versão temporária via Git, para testes em branch local
npm install https://github.com/growthdigitalmarketing/gamification-storybook.git

Já publicado publicado no NPM com:

npm install @tech-front/storybook

🎨 Estilização

Para garantir que os estilos dos componentes sejam aplicados corretamente, você deve importar o CSS global do pacote.

⚠️ IMPORTANTE: Adicione a seguinte linha no seu arquivo layout.tsx (ou equivalente):

import '@tech-front/storybook/dist/index.css'; // <--- ADICIONE ESTA LINHA!

Isso é essencial para que os componentes sejam exibidos corretamente com as estilizações do Storybook.

📦 Estrutura dos Componentes

Os componentes disponíveis foram construídos com:

• React
• TypeScript

Eles são totalmente tipados e prontos para uso em produção.

📖 Documentação

Você pode visualizar os componentes e sua documentação diretamente no Storybook:

🔗 Storybook Online
TODO – Será desenvolvido futuramente

💻 Desenvolvimento local

Clone este repositório e execute localmente com:

npm install
npm run storybook

🛠️ Build

Para gerar o pacote para publicação (build dos componentes):

npm run build

🧩 Versionamento via Git (sem NPM)

Este projeto utiliza versionamento semântico e distribuição via GitHub com tags. O fluxo de release segue os seguintes passos:

🧭 Etapas para gerar um release:

# 1. Vá para a main e faça merge da develop
git checkout main
git merge develop

# 2. Gere o build dos componentes
npm run build

# 3. Faça commit do build
git add .
git commit -m "build: prepara release 1.0.0"

# 4. Atualize a versão do pacote
npm version 1.0.0

# Isso cria:
# - nova versão no package.json
# - commit automático
# - tag Git v1.0.0

# 5. Suba a tag e os commits
git push
git push --tags

Após isso, o pacote estará pronto para instalação no projeto consumidor via:

npm install @tech-front/storybook

🧠 Versionamento Semântico

Utilizamos o padrão de versionamento SemVer, seguindo estas regras:

| Tipo de mudança | Comando sugerido | Exemplo | |-----------------------------------|--------------------------|-------------------| | 🔧 Correção (bug fix, ajuste leve)| npm version patch | 1.0.0 → 1.0.1 | | 🌱 Nova funcionalidade (sem quebra)| npm version minor | 1.0.1 → 1.1.0 | | 💥 Alteração que quebra a API | npm version major | 1.1.0 → 2.0.0 |

Após definir a versão:

npm run build
git push
git push --tags
npm publish

Você também pode adicionar scripts no package.json para facilitar:

"scripts": {
  "release:patch": "npm run build && npm version patch && git push && git push --tags && npm publish",
  "release:minor": "npm run build && npm version minor && git push && git push --tags && npm publish",
  "release:major": "npm run build && npm version major && git push && git push --tags && npm publish"
}

⚙️ Automação de Release (via GitHub Actions) EM DESENVOLVIMENTO

Sempre que houver um push na branch main, a lib será automaticamente:

• Buildada (npm run build)
• Versionada (npm version patch)
• Tagueada (vX.X.X)
• Enviada para o repositório Git

A automação é feita com o arquivo .github/workflows/release.yml.

🧑‍💻 Manutenção

Este pacote é mantido pela equipe da Ana Gaming.