lbr-web-toolkit 1.0.0

package/README.md

@@ -0,0 +1,38 @@
+## @lbr/web-toolkit (skeleton inicial)
+
+Toolkit de linha de comando para padronizar a criação de páginas, componentes e estruturas de UI em projetos web LBR (por exemplo, Farm4All Sementeira).
+
+### O que já foi feito neste skeleton
+
+- **Projeto Node/TypeScript** isolado em `web-toolkit/` com:
+  - `package.json`, `tsconfig.json` e binário `lbr-web`.
+  - CLI baseada em `commander` + `inquirer`.
+- **Detecção de projeto**:
+  - Lê `package.json` e `angular.json` na raiz do workspace.
+  - Identifica nome, versão do projeto e se é Angular (incluindo versão de `@angular/core` e `sourceRoot`).
+- **Comandos iniciais**:
+  - `lbr-web info`: mostra as informações detectadas do projeto atual.
+  - `lbr-web init`: cria `.lbr-web-toolkit.json` com caminhos de `pages`, `shared/components`, `layout` e arquivo de rotas.
+
+### Como usar localmente neste repo
+
+```bash
+cd web-toolkit
+npm install
+npm run build
+
+# Executar CLI apontando para a raiz do frontend
+node dist/cli.cjs info
+node dist/cli.cjs init
+```
+
+### Próximos passos (não implementados ainda)
+
+- Implementar motor de geração (core) para templates Angular.
+- Adicionar comandos:
+  - `lbr-web generate page`
+  - `lbr-web generate component`
+  - `lbr-web generate crud`
+- Criar pacote separado para adaptações específicas de Angular (rotas, sidebar, header) usando AST/Schematics.
+
+

package/dist/cli.js

@@ -0,0 +1,303 @@
+#!/usr/bin/env node
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const chalk_1 = __importDefault(require("chalk"));
+const inquirer_1 = __importDefault(require("inquirer"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+const project_detector_1 = require("./project-detector");
+const config_1 = require("./config");
+const generator_1 = require("./generator");
+const program = new commander_1.Command();
+program
+    .name('lbr-web')
+    .description('LBR Web Toolkit - CLI de geração e integração front-end reutilizável')
+    .version('1.0.0', '-v, --version', 'Mostra a versão do @lbr/web-toolkit');
+program
+    .command('info')
+    .description('Mostra informações sobre o projeto atual e a detecção do toolkit')
+    .action(async () => {
+    const detected = await (0, project_detector_1.detectProject)();
+    console.log(chalk_1.default.cyan('\n🔍 Projeto detectado:\n'));
+    console.log(`  • Root:        ${chalk_1.default.green(detected.root)}`);
+    console.log(`  • Nome:        ${chalk_1.default.green(detected.name ?? 'desconhecido')}`);
+    console.log(`  • Versão:      ${chalk_1.default.green(detected.version ?? 'desconhecida')}`);
+    console.log(`  • Framework:   ${chalk_1.default.green(detected.framework)}`);
+    if (detected.angular) {
+        console.log(chalk_1.default.cyan('\n  Angular:'));
+        console.log(`    - Projeto:     ${chalk_1.default.green(detected.angular.projectName ?? 'desconhecido')}`);
+        console.log(`    - Versão:      ${chalk_1.default.green(detected.angular.version ?? 'desconhecida')}`);
+        console.log(`    - sourceRoot:  ${chalk_1.default.green(detected.angular.sourceRoot ?? 'desconhecido')}`);
+    }
+    console.log();
+});
+program
+    .command('init')
+    .description('Inicializa configuração do LBR Web Toolkit no projeto atual')
+    .action(async () => {
+    const detected = await (0, project_detector_1.detectProject)();
+    console.log(chalk_1.default.cyan('\n🚀 Iniciando configuração do LBR Web Toolkit...\n'));
+    if (detected.framework !== 'angular') {
+        console.log(chalk_1.default.yellow('  Aviso: framework não identificado como Angular. A configuração será criada em modo genérico.'));
+    }
+    const answers = await inquirer_1.default.prompt([
+        {
+            name: 'pagesDir',
+            type: 'input',
+            message: 'Diretório de páginas (relativo à raiz do projeto):',
+            default: detected.angular?.sourceRoot ? `${detected.angular.sourceRoot}/app/pages` : 'src/app/pages',
+        },
+        {
+            name: 'sharedComponentsDir',
+            type: 'input',
+            message: 'Diretório de componentes compartilhados:',
+            default: detected.angular?.sourceRoot
+                ? `${detected.angular.sourceRoot}/app/shared/components`
+                : 'src/app/shared/components',
+        },
+        {
+            name: 'layoutDir',
+            type: 'input',
+            message: 'Diretório de layout (header/sidebar/etc):',
+            default: detected.angular?.sourceRoot
+                ? `${detected.angular.sourceRoot}/app/shared/layout`
+                : 'src/app/shared/layout',
+        },
+        {
+            name: 'routingFile',
+            type: 'input',
+            message: 'Arquivo principal de rotas:',
+            default: detected.angular?.sourceRoot ? `${detected.angular.sourceRoot}/app/app.routes.ts` : 'src/app/app.routes.ts',
+        },
+    ]);
+    const config = {
+        framework: detected.framework,
+        project: {
+            name: detected.name,
+            version: detected.version,
+        },
+        angular: detected.angular,
+        paths: {
+            pages: answers.pagesDir,
+            sharedComponents: answers.sharedComponentsDir,
+            layout: answers.layoutDir,
+        },
+        routing: {
+            file: answers.routingFile,
+        },
+    };
+    const configPath = path_1.default.join(process.cwd(), '.lbr-web-toolkit.json');
+    await fs_extra_1.default.writeJson(configPath, config, { spaces: 2 });
+    console.log(chalk_1.default.green(`\n✅ Configuração criada em ${configPath}\n`));
+});
+// Comandos de geração
+const generate = program
+    .command('generate')
+    .aliases(['g', 'add'])
+    .description('Comandos de geração (páginas, componentes, CRUD, etc.)');
+generate
+    .command('page')
+    .description('Gera uma nova página Angular standalone usando o template padrão LBR')
+    .action(async () => {
+    const cwd = process.cwd();
+    const cfg = await (0, config_1.loadToolkitConfig)(cwd);
+    if (!cfg) {
+        console.log(chalk_1.default.red('\n❌ Arquivo .lbr-web-toolkit.json não encontrado.\n   Rode "lbr-web init" na raiz do projeto antes de gerar páginas.\n'));
+        process.exitCode = 1;
+        return;
+    }
+    // Descobrir categorias atuais do sidebar
+    const sidebarFile = path_1.default.join(cwd, cfg.paths.layout, 'app-sidebar', 'app-sidebar.component.ts');
+    let sidebarCategories = [];
+    try {
+        if (await fs_extra_1.default.pathExists(sidebarFile)) {
+            const sidebarContent = await fs_extra_1.default.readFile(sidebarFile, 'utf-8');
+            const catRegex = /\{\s*icon:\s*'([^']+)',\s*name:\s*"([^"]+)",\s*subItems:\s*\[/g;
+            let m;
+            while ((m = catRegex.exec(sidebarContent)) !== null) {
+                sidebarCategories.push({ icon: m[1], name: m[2] });
+            }
+        }
+    }
+    catch {
+        // ignore parsing errors
+    }
+    const defaultTitleBase = (name) => name
+        .split(/[-_\s]/)
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+        .join(' ');
+    const answers = await inquirer_1.default.prompt([
+        {
+            name: 'name',
+            type: 'input',
+            message: 'Nome da página (kebab-case, ex: usuarios-list):',
+            validate: (val) => (!!val && /^[a-z0-9\-]+$/.test(val)) || 'Use apenas letras minúsculas, números e "-".',
+        },
+        {
+            name: 'subfolder',
+            type: 'input',
+            message: 'Subpasta dentro de pages (opcional, ex: admin):',
+            default: '',
+        },
+        {
+            name: 'headerTitle',
+            type: 'input',
+            message: 'Título para o header (opcional, enter para usar padrão):',
+            default: (ans) => defaultTitleBase(ans.name),
+        },
+        {
+            name: 'headerSubtitle',
+            type: 'input',
+            message: 'Descrição/subtítulo do header (opcional, enter para padrão):',
+            default: (ans) => `Gerencie ${defaultTitleBase(ans.name).toLowerCase()}`,
+        },
+        {
+            name: 'sidebarCategory',
+            type: 'list',
+            message: 'Onde adicionar no sidebar?',
+            choices: [
+                ...sidebarCategories.map((c) => ({
+                    name: `${c.name} (${c.icon})`,
+                    value: c.name,
+                })),
+                { name: 'Criar nova categoria...', value: '__NEW__' },
+                { name: 'Não adicionar ao sidebar', value: '__NONE__' },
+            ],
+            when: () => sidebarCategories.length > 0,
+            default: sidebarCategories[0]?.name,
+        },
+        {
+            name: 'newSidebarCategory',
+            type: 'input',
+            message: 'Nome da nova categoria do sidebar:',
+            when: (ans) => !sidebarCategories.length || ans.sidebarCategory === '__NEW__',
+        },
+        {
+            name: 'sidebarItemName',
+            type: 'input',
+            message: 'Nome do item no sidebar (como aparece no menu):',
+            default: (ans) => ans.headerTitle || defaultTitleBase(ans.name),
+            when: (ans) => ans.sidebarCategory !== '__NONE__',
+        },
+        {
+            name: 'sidebarIcon',
+            type: 'input',
+            message: 'Ícone do item no sidebar (ex: file-text, settings, users):',
+            default: 'file-text',
+            when: (ans) => ans.sidebarCategory !== '__NONE__',
+        },
+    ]);
+    const sidebarCategory = answers.sidebarCategory === '__NEW__' || !answers.sidebarCategory
+        ? answers.newSidebarCategory
+        : answers.sidebarCategory === '__NONE__'
+            ? undefined
+            : answers.sidebarCategory;
+    await (0, generator_1.generatePage)({
+        name: answers.name,
+        subfolder: answers.subfolder || undefined,
+        headerTitle: answers.headerTitle || undefined,
+        headerSubtitle: answers.headerSubtitle || undefined,
+        sidebarCategory: sidebarCategory || undefined,
+        sidebarItemName: answers.sidebarItemName || undefined,
+        sidebarIcon: answers.sidebarIcon || undefined,
+    }, cwd);
+});
+program
+    .command('version')
+    .alias('v')
+    .description('Mostra a versão do CLI e do projeto atual, e compara com a última publicada')
+    .action(async () => {
+    // Versão do CLI (package.json do próprio toolkit)
+    const cliPkgPath = path_1.default.join(__dirname, '..', 'package.json');
+    let cliVersion = 'desconhecida';
+    try {
+        const cliPkg = await fs_extra_1.default.readJson(cliPkgPath);
+        cliVersion = cliPkg.version ?? cliVersion;
+    }
+    catch {
+        // ignore
+    }
+    const detected = await (0, project_detector_1.detectProject)();
+    // Tenta buscar última versão publicada no npm
+    let latestVersion = null;
+    try {
+        const res = await fetchLatestNpmVersion('lbr-web-toolkit');
+        latestVersion = res;
+    }
+    catch {
+        latestVersion = null;
+    }
+    console.log(chalk_1.default.cyan('\n📦 Versões\n'));
+    console.log(`  • CLI local (@lbr/web-toolkit): ${chalk_1.default.green(cliVersion)}`);
+    if (latestVersion) {
+        console.log(`  • CLI publicado (npm):          ${chalk_1.default.green(latestVersion)}`);
+        if (latestVersion !== cliVersion) {
+            console.log(chalk_1.default.yellow('  • Aviso: a versão instalada não é a mais recente publicada no npm.'));
+        }
+    }
+    else {
+        console.log(chalk_1.default.yellow('  • Não foi possível consultar a última versão publicada no npm (sem conexão ou ainda não publicado).'));
+    }
+    console.log(`  • Projeto:                      ${chalk_1.default.green(detected.name ?? 'desconhecido')} (${detected.version ?? 'desconhecida'})`);
+    if (detected.angular?.version) {
+        console.log(`  • Angular:                      ${chalk_1.default.green(detected.angular.version)}`);
+    }
+    console.log();
+});
+async function fetchLatestNpmVersion(pkgName) {
+    const https = await Promise.resolve().then(() => __importStar(require('https')));
+    const url = `https://registry.npmjs.org/${encodeURIComponent(pkgName)}/latest`;
+    return new Promise((resolve) => {
+        https.get(url, (res) => {
+            let data = '';
+            res.on('data', (chunk) => (data += chunk));
+            res.on('end', () => {
+                try {
+                    const json = JSON.parse(data);
+                    resolve(json.version ?? null);
+                }
+                catch {
+                    resolve(null);
+                }
+            });
+        }).on('error', () => resolve(null));
+    });
+}
+program.parseAsync(process.argv);

package/dist/config.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadToolkitConfig = loadToolkitConfig;
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+async function loadToolkitConfig(cwd = process.cwd()) {
+    const configPath = path_1.default.join(cwd, '.lbr-web-toolkit.json');
+    if (!(await fs_extra_1.default.pathExists(configPath))) {
+        return null;
+    }
+    const raw = await fs_extra_1.default.readJson(configPath);
+    return raw;
+}

package/dist/generator.js

@@ -0,0 +1,179 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generatePage = generatePage;
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+const chalk_1 = __importDefault(require("chalk"));
+const config_1 = require("./config");
+const integration_1 = require("./integration");
+async function generatePage(options, cwd = process.cwd()) {
+    const config = await (0, config_1.loadToolkitConfig)(cwd);
+    if (!config) {
+        throw new Error('Arquivo .lbr-web-toolkit.json não encontrado. Rode "lbr-web init" primeiro na raiz do projeto.');
+    }
+    const pagesRoot = path_1.default.join(cwd, config.paths.pages);
+    const targetDir = path_1.default.join(pagesRoot, options.subfolder ?? '', options.name);
+    await fs_extra_1.default.ensureDir(targetDir);
+    const className = toPascalCase(options.name) + 'PageComponent';
+    const selector = 'app-' + toKebabCase(options.name);
+    const tsPath = path_1.default.join(targetDir, `${options.name}.component.ts`);
+    const htmlPath = path_1.default.join(targetDir, `${options.name}.component.html`);
+    const tsContent = `import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: '${selector}',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './${options.name}.component.html',
+})
+export class ${className} {
+  isLoading = true;
+
+  demoTableData = [
+    { id: 1, name: 'Exemplo 1', status: 'Ativo' },
+    { id: 2, name: 'Exemplo 2', status: 'Pendente' },
+  ];
+
+  constructor() {
+    // Simula carregamento inicial
+    setTimeout(() => {
+      this.isLoading = false;
+    }, 800);
+  }
+}
+`;
+    const htmlContent = `<div class="p-4 sm:p-6 xl:p-8">
+  <!-- Header da página -->
+  <div class="flex items-center justify-between mb-6">
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+        ${className}
+      </h1>
+      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+        Página gerada pelo @lbr/web-toolkit. Use este layout como base para a sua feature.
+      </p>
+    </div>
+  </div>
+
+  <!-- Área de loading global da página -->
+  <div *ngIf="isLoading" class="flex items-center justify-center py-16">
+    <div class="flex items-center gap-3 text-gray-500 dark:text-gray-300">
+      <span class="inline-flex h-5 w-5 animate-spin rounded-full border-2 border-gray-300 border-t-transparent"></span>
+      <span>Carregando dados iniciais...</span>
+    </div>
+  </div>
+
+  <!-- Conteúdo principal -->
+  <div *ngIf="!isLoading" class="space-y-6">
+    <!-- Bloco de exemplo: cards/estatísticas -->
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div class="rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/5">
+        <p class="text-sm text-gray-500 dark:text-gray-400">Total de registros</p>
+        <p class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">2</p>
+      </div>
+      <div class="rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/5">
+        <p class="text-sm text-gray-500 dark:text-gray-400">Status principal</p>
+        <p class="mt-2 text-2xl font-semibold text-emerald-500">Ativo</p>
+      </div>
+      <div class="rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/5">
+        <p class="text-sm text-gray-500 dark:text-gray-400">Observações</p>
+        <p class="mt-2 text-sm text-gray-700 dark:text-gray-200">
+          Substitua estes cards pelos indicadores da sua tela.
+        </p>
+      </div>
+    </div>
+
+    <!-- Bloco de exemplo: tabela simples -->
+    <div class="rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/5">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+          Lista de exemplos
+        </h2>
+        <button
+          type="button"
+          class="inline-flex items-center rounded-lg bg-emerald-600 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 dark:ring-offset-slate-900"
+        >
+          Novo registro
+        </button>
+      </div>
+
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800 text-sm">
+          <thead class="bg-gray-50 dark:bg-white/5">
+            <tr>
+              <th class="px-4 py-2 text-left font-medium text-gray-700 dark:text-gray-200">ID</th>
+              <th class="px-4 py-2 text-left font-medium text-gray-700 dark:text-gray-200">Nome</th>
+              <th class="px-4 py-2 text-left font-medium text-gray-700 dark:text-gray-200">Status</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
+            <tr *ngFor="let item of demoTableData">
+              <td class="px-4 py-2 text-gray-800 dark:text-gray-100">{{ item.id }}</td>
+              <td class="px-4 py-2 text-gray-800 dark:text-gray-100">{{ item.name }}</td>
+              <td class="px-4 py-2">
+                <span
+                  class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
+                  [ngClass]="{
+                    'bg-emerald-100 text-emerald-700': item.status === 'Ativo',
+                    'bg-amber-100 text-amber-700': item.status === 'Pendente'
+                  }"
+                >
+                  {{ item.status }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <p class="mt-4 text-xs text-gray-500 dark:text-gray-400">
+        Dica: troque este array <code>demoTableData</code> no componente por dados reais vindos do seu serviço.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+    await fs_extra_1.default.writeFile(tsPath, tsContent, 'utf-8');
+    await fs_extra_1.default.writeFile(htmlPath, htmlContent, 'utf-8');
+    console.log(chalk_1.default.green('\n✅ Página gerada com sucesso!'));
+    console.log(chalk_1.default.cyan(`  Diretório: ${targetDir}\n`));
+    // Integração com rotas, header e sidebar
+    const routePath = [
+        options.subfolder?.replace(/^\/|\/$/g, ''),
+        options.name.replace(/^\/|\/$/g, ''),
+    ]
+        .filter(Boolean)
+        .join('/');
+    try {
+        await (0, integration_1.integratePage)({
+            name: options.name,
+            subfolder: options.subfolder,
+            className,
+            routePath,
+            headerTitle: options.headerTitle,
+            headerSubtitle: options.headerSubtitle,
+            sidebarCategory: options.sidebarCategory,
+            sidebarItemName: options.sidebarItemName,
+            sidebarIcon: options.sidebarIcon,
+        }, config, cwd);
+    }
+    catch (err) {
+        console.log(chalk_1.default.red(`⚠️  Erro ao integrar página: ${err?.message ?? err}`));
+    }
+}
+function toPascalCase(str) {
+    return str
+        .split(/[-_\s]/)
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+        .join('');
+}
+function toKebabCase(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/[\s_]+/g, '-')
+        .toLowerCase();
+}