web-architect-cli 1.0.3 → 1.0.4

package/README.md

@@ -1,2 +1,145 @@
-# web-architect-cli
- 
+# 🏗️ Web Architect CLI
+
+O **Web Architect CLI** é uma ferramenta de linha de comando projetada para padronizar e acelerar a criação de interfaces web (especialmente para o ecossistema Sankhya). Com um único comando, você gera uma estrutura completa, configurada com TailwindCSS e um sistema de build automático.
+
+## 📦 Instalação
+
+Para utilizar a ferramenta em qualquer lugar do seu computador, instale a versão mais recente globalmente via npm:
+
+Bash
+
+```
+npm install -g web-architect-cli@latest
+```
+
+> **Nota:** É necessário ter o [Node.js](https://nodejs.org/) instalado.
+
+---
+
+## 🚀 Como Utilizar
+
+### 1. Criando um Novo Projeto
+
+Abra o terminal na pasta onde deseja iniciar o trabalho e execute:
+
+Bash
+
+```
+web-arch
+```
+
+O assistente interativo iniciará:
+
+1. Ele pedirá o **nome do projeto** (ex: `painel-metas`).
+
+2. Criará automaticamente toda a estrutura de pastas e arquivos.
+
+3. Instalará as dependências necessárias.
+
+### 2. Fluxo de Desenvolvimento (O "Pulo do Gato")
+
+Após criar o projeto, entre na pasta e inicie o modo de desenvolvimento:
+
+Bash
+
+```
+cd painel-metas
+npm start
+```
+
+**O que acontece agora?**
+
+- O sistema entra em modo **WATCH** (monitoramento).
+
+- Qualquer arquivo que você salvar dentro da pasta (HTML, CSS, JS), o script **automaticamente compacta o projeto** em um arquivo `.zip` com o nome da pasta (ex: `painel-metas.zip`).
+
+- **Benefício:** Você não precisa zipar manualmente os arquivos toda vez que quiser subir para o ERP/Portal. Basta arrastar o zip gerado.
+
+---
+
+## 💡 Casos de Uso (Workflows)
+
+Aqui estão os cenários comuns onde o **Web Architect CLI** brilha:
+
+### Caso A: Início Rápido de Dashboards (HTML/JSP)
+
+> *Você precisa criar uma tela customizada para apresentar indicadores.*
+
+1. Rode `web-arch` e nomeie como `dash-financeiro`.
+
+2. O projeto já nasce com `index.jsp` contendo as importações Sankhya (`<snk:load/>`) e `index.html` para testes locais.
+
+3. Edite o `src/views/main.js` ou o HTML.
+
+4. O arquivo `dash-financeiro.zip` é atualizado instantaneamente.
+
+5. Faça o upload do ZIP no "Repositório de Arquivos" do sistema.
+
+### Caso B: Prototipagem com TailwindCSS
+
+> *Você quer testar um layout moderno sem configurar Webpack ou PostCSS.*
+
+1. Rode `web-arch`.
+
+2. Vá direto ao HTML e comece a usar classes utilitárias:
+   
+   HTML
+   
+   ```
+   <div class="bg-blue-600 text-white p-4 rounded-lg shadow-md">
+      Olá, Mundo!
+   </div>
+   ```
+
+3. O Tailwind já vem injetado e pronto para uso via script (CDN/Local), sem build complexo.
+
+### Caso C: Padronização de Equipe
+
+> *Vários desenvolvedores trabalhando em telas diferentes.*
+
+Ao usar o comando `web-arch`, todos os projetos seguem a mesma árvore:
+
+- `src/controllers/` (Lógica de negócio)
+
+- `src/views/` (Manipulação de DOM)
+
+- `src/services/` (Chamadas de API)
+
+Isso facilita a manutenção cruzada: qualquer desenvolvedor sabe onde encontrar o código.
+
+---
+
+## 📂 Estrutura do Projeto Gerado
+
+Plaintext
+
+```
+meu-projeto/
+├── .git/
+├── node_modules/
+├── src/
+│   ├── assets/
+│   │   ├── css/       # Estilos globais
+│   │   ├── js/        # Bibliotecas (Tailwind, etc)
+│   ├── components/    # Fragmentos de UI
+│   ├── controllers/   # Lógica
+│   ├── services/      # Integrações
+│   ├── utils/         # Funções auxiliares
+│   └── main.js        # Ponto de entrada JS
+├── build.js           # Script de automação (Zip automático)
+├── index.html         # Para rodar no navegador local
+├── index.jsp          # Para rodar no servidor
+├── package.json
+└── README.md
+```
+
+---
+
+## 🛠 Comandos do Projeto (Scripts)
+
+Dentro da pasta do projeto criado, você pode usar:
+
+| **Comando**     | **Ação**                                            |
+| --------------- | --------------------------------------------------- |
+| `npm start`     | Inicia o monitoramento. Altera arquivo -> Gera ZIP. |
+| `npm run build` | Gera o ZIP apenas uma vez e encerra.                |

package/bin/index.js

@@ -9,8 +9,6 @@ const rl = readline.createInterface({
     output: process.stdout
 });
 
-// --- 1. DEFINIÇÃO DOS CONTEÚDOS DOS ARQUIVOS ---
-
 const CONTEUDO_INDEX_JSP = `<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored ="false"%>
     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     <%@ page import="java.util.*" %>
@@ -146,8 +144,6 @@ const CONTEUDO_GITIGNORE = `node_modules/
 
 const CONTEUDO_GITATTRIBUTES = `* text=auto`;
 
-// --- 2. FUNÇÕES DO SISTEMA ---
-
 const logPasso = (emoji, msg) => console.log(`${emoji} ${msg}`);
 
 function criarPasta(caminho) {
@@ -164,8 +160,6 @@ function criarArquivo(caminho, conteudo) {
     logPasso('📄', `Arquivo criado: ${caminho}`);
 }
 
-// --- 3. EXECUÇÃO PRINCIPAL ---
-
 rl.question('🚀 Digite o nome do projeto: ', (nomeProjeto) => {
     if (!nomeProjeto) {
         console.log('❌ Nome inválido.');
@@ -179,7 +173,6 @@ rl.question('🚀 Digite o nome do projeto: ', (nomeProjeto) => {
     console.log(`🔨 INICIANDO CRIAÇÃO DO PROJETO: ${nomeProjeto}`);
     console.log(`---------------------------------------------------\n`);
 
-    // 1. Criar Pasta Raiz
     if (fs.existsSync(raiz)) {
         console.log(`❌ A pasta '${nomeProjeto}' já existe.`);
         rl.close();
@@ -187,7 +180,6 @@ rl.question('🚀 Digite o nome do projeto: ', (nomeProjeto) => {
     }
     criarPasta(raiz);
 
-    // 2. Criar Estrutura de Pastas
     const pastas = [
         'src/assets/css',
         'src/assets/img',
@@ -201,7 +193,6 @@ rl.question('🚀 Digite o nome do projeto: ', (nomeProjeto) => {
 
     pastas.forEach(p => criarPasta(path.join(raiz, p)));
 
-    // 3. Criar Arquivos de Configuração e Raiz
     criarArquivo(path.join(raiz, 'index.jsp'), CONTEUDO_INDEX_JSP);
     criarArquivo(path.join(raiz, 'index.html'), CONTEUDO_INDEX_HTML);
     criarArquivo(path.join(raiz, 'build.js'), CONTEUDO_BUILD_JS);
@@ -209,7 +200,6 @@ rl.question('🚀 Digite o nome do projeto: ', (nomeProjeto) => {
     criarArquivo(path.join(raiz, '.gitattributes'), CONTEUDO_GITATTRIBUTES);
     criarArquivo(path.join(raiz, 'README.md'), `# ${nomeProjeto}\n\nProjeto gerado automaticamente.`);
 
-    // 4. Criar Package.json
     const packageJson = {
         name: nomeProjeto,
         version: "1.0.0",
@@ -224,13 +214,10 @@ rl.question('🚀 Digite o nome do projeto: ', (nomeProjeto) => {
     };
     criarArquivo(path.join(raiz, 'package.json'), JSON.stringify(packageJson, null, 2));
 
-    // 5. Criar Arquivos dentro de SRC
     criarArquivo(path.join(raiz, 'src/main.js'), `console.log('Aplicação iniciada');`);
     
-    // 6. Criar Arquivos dentro de ASSETS (CSS)
     criarArquivo(path.join(raiz, 'src/assets/css/style.css'), `/* Estilos Globais */\nbody { font-family: 'Inter', sans-serif; }`);
     
-    // --- LÓGICA DE CÓPIA DO TAILWIND ---
     const origemTailwind = path.join(__dirname, 'tailwindcss.js');
     const destinoTailwind = path.join(raiz, 'src/assets/js/tailwindcss.js');
 
@@ -251,11 +238,9 @@ rl.question('🚀 Digite o nome do projeto: ', (nomeProjeto) => {
     console.log(`---------------------------------------------------\n`);
 
     try {
-        // 7. Inicializar GIT
         logPasso('GitHub', '📦 Inicializando repositório Git...');
         execSync('git init', { cwd: raiz, stdio: 'inherit' });
 
-        // 8. Instalar Dependências (Archiver)
         logPasso('NPM', ' 📦 Instalando dependência: archiver...');
         execSync('npm install archiver', { cwd: raiz, stdio: 'inherit' });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-architect-cli",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "",
   "main": "index.js",
   "bin": {