Create WCM React Artefato

Gerador automatizado de artefatos WCM React - cria projetos completos baseados em templates.

📋 Pré-requisitos

• Node.js >= 14.0.0
• npm ou yarn

� Guia de Uso

1. Clone o repositório

git clone https://github.com/seu-usuario/create-wcm-react-artefato.git
cd create-wcm-react-artefato

2. Instale as dependências

npm install

3. Execute o gerador localmente

Para gerar um novo WCM, execute o comando:

node bin/index.js nome-do-WCM

Ou simplesmente:

node bin/index.js

Se você não especificar o nome, o WCM será criado com o nome padrão meu-WCM.

4. Responda às perguntas interativas

O gerador irá fazer algumas perguntas para configurar seu WCM:

• Descrição do WCM: Descrição breve do que o WCM faz
• Autor: Seu nome ou nome da equipe
• Versão inicial: Versão inicial do WCM (padrão: 1.0.0)

5. Projeto criado!

Após responder as perguntas, seu WCM será criado na pasta especificada com toda a estrutura configurada.

nome-do-WCM/
├── src/
│   ├── main/
│   │   ├── react-app/          # Aplicação React com Vite
│   │   ├── resources/          # Arquivos de propriedades i18n
│   │   └── webapp/             # Recursos web (CSS, JS, imagens)
│   │       └── WEB-INF/        # Configurações Java/JBoss
└── pom.xml                      # Configuração Maven

O arquivo template-config.js contém toda a configuração de perguntas e placeholders. É muito simples de usar:

Estrutura da Configuração

module.exports = {
  questions: {
    // Cada pergunta tem:
    nomeUnico: {
      question: "Texto da pergunta: ",
      placeholders: ["{{PLACEHOLDER1}}", "{{PLACEHOLDER2}}"], // pode ser um ou mais
      default: "valor padrão se usuário não responder",
    },
  },

  autoPlaceholders: {
    // Placeholders preenchidos automaticamente
    "{{PLACEHOLDER}}": "valor", // ou função: () => "valor"
  },
};

Exemplos de Uso

Adicionar uma nova pergunta simples

license: {
  question: "📄 Escolha a licença (MIT/GPL/Apache): ",
  placeholders: ["{{PROJECT_LICENSE}}"],
  default: "MIT"
}

Pergunta com múltiplos placeholders

framework: {
  question: "🚀 Framework (vue/react/vanilla): ",
  placeholders: ["{{FRAMEWORK}}", "{{PROJECT_FRAMEWORK}}", "{{TECH_STACK}}"],
  default: "vanilla"
}

Placeholder automático

autoPlaceholders: {
  "{{CURRENT_DATE}}": () => new Date().toLocaleDateString('pt-BR'),
  "{{PROJECT_VERSION}}": "1.0.0"
}

Vantagens

✅ Simples: Apenas um arquivo para configurar tudo
✅ Flexível: Um placeholder pode ser usado em vários arquivos
✅ Reutilizável: Uma pergunta pode preencher vários placeholders
✅ Automático: Alguns placeholders são preenchidos automaticamente
✅ Expansível: Fácil de adicionar novas perguntas sem modificar código

Como usar nos templates

Nos seus arquivos template (HTML, CSS, JS), simplesmente use os placeholders:

<title>{{PROJECT_NAME}}</title>
<meta name="description" content="{{PROJECT_DESCRIPTION}}" />
<meta name="author" content="{{PROJECT_AUTHOR}}" />
<meta name="license" content="{{PROJECT_LICENSE}}" />

// {{PROJECT_DESCRIPTION}}
const projectInfo = {
  name: "{{PROJECT_NAME}}",
  version: "{{PROJECT_VERSION}}",
  framework: "{{FRAMEWORK}}",
};

O sistema irá fazer todas as perguntas configuradas e substituir os placeholders automaticamente!

Testando modificações no template

1. Modifique os arquivos em templates/
2. Execute novamente o gerador para ver as mudanças
3. O novo WCM será criado com as modificações aplicadas

Siga este passo a passo para publicar o gerador no NPM e permitir que outros desenvolvedores usem via npx create-wcm-react-artefato.

1. Criar conta no NPM

Se ainda não tem uma conta:

# Acesse https://www.npmjs.com/signup e crie sua conta
# Ou crie via terminal
npm adduser

2. Fazer login no NPM

npm login

Você será solicitado a fornecer:

• Username
• Password
• Email
• One-time password (se tiver 2FA ativado)

4. Verificar se o nome está disponível

npm search create-wcm-react-artefato

Se aparecer algum resultado, o nome já está em uso. Escolha outro nome.

5. Testar localmente antes de publicar

# Criar um link simbólico global
npm link

# Testar em outra pasta
cd /tmp
npx create-wcm-react-artefato teste-projeto

# Se funcionar, desinstalar o link
npm unlink -g create-wcm-react-artefato

6. Publicar no NPM

# Publicar a primeira versão
npm publish

7. Verificar a publicação

Acesse: https://www.npmjs.com/package/create-wcm-react-artefato

8. Usar o pacote publicado

Agora qualquer pessoa pode usar:

# Usando npx (recomendado - não precisa instalar)
npx create-wcm-react-artefato meu-projeto

Passo a passo completo para publicar suas modificações

Opção 1: Passo a passo rápido

# 1. Incrementar a versão (escolha um dos comandos)
npm version patch --no-git-tag-version    # Para correções de bugs (1.0.1 -> 1.0.2)
npm version minor --no-git-tag-version    # Para novas funcionalidades (1.0.1 -> 1.1.0)
npm version major --no-git-tag-version    # Para mudanças incompatíveis (1.0.1 -> 2.0.0)

# 2. Publicar no NPM
npm publish

### Opção 2: Com Git Tag (recomendado)

```bash
# 1. Commitar suas mudanças primeiro
git add .
git commit -m "feat: descrição das mudanças"

# 2. Incrementar versão e criar tag automaticamente
npm version patch    # ou minor, ou major

# 3. Publicar no NPM
npm publish

# 4. Enviar tag para o repositório remoto
git push origin main --tags

Tipos de versão (Semantic Versioning)

| Comando | De | Para | Quando usar | | ------------------- | ----- | ----- | ----------------------------------------- | | npm version patch | 1.0.1 | 1.0.2 | Correções de bugs | | npm version minor | 1.0.1 | 1.1.0 | Novas funcionalidades (compatível) | | npm version major | 1.0.1 | 2.0.0 | Mudanças incompatíveis (breaking changes) |

🔍 Verificar a publicação

Após publicar, verifique em:

• NPM: https://www.npmjs.com/package/create-wcm-react-artefato
• Testar: npx create-wcm-react-artefato@latest teste-projeto

📋 Checklist antes de publicar

• [ ] Testou as mudanças localmente com node bin/index.js
• [ ] Atualizou o README se necessário
• [ ] Incrementou a versão no package.json
• [ ] Commitou as mudanças no Git
• [ ] Verificou que não há erros no código

💡 Dicas Importantes

• Versão semântica: Sempre siga o padrão MAJOR.MINOR.PATCH
• Teste antes: Use npm link para testar localmente antes de publicar
• README atualizado: Mantenha a documentação sempre sincronizada
• Changelog: Considere manter um arquivo CHANGELOG.md com as mudanças
• Licença: Garanta que a licença está correta no package.json

🔗 Links Úteis

• Documentação do projeto
• Reportar problemas

📄 Licença

MIT