@salas-ds/cli 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { Command } from 'commander';
 import chalk2 from 'chalk';
-import fs from 'fs-extra';
+import fs2 from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { glob } from 'glob';
@@ -229,7 +229,7 @@ export const throttle = <T extends (...args: any[]) => any>(
 var CONFIG_FILE = "salas-ds.json";
 async function injectStyleImport(projectRoot, componentsPath) {
   const angularJsonPath = path.join(projectRoot, "angular.json");
-  const angularJson = await fs.readJSON(angularJsonPath);
+  const angularJson = await fs2.readJSON(angularJsonPath);
   const projectName = Object.keys(angularJson.projects)[0];
   if (!projectName) return null;
   const project = angularJson.projects[projectName];
@@ -241,20 +241,20 @@ async function injectStyleImport(projectRoot, componentsPath) {
   if (!globalStyleEntry) return null;
   const globalStyleRelative = typeof globalStyleEntry === "string" ? globalStyleEntry : globalStyleEntry.input;
   const globalStyleAbsolute = path.join(projectRoot, globalStyleRelative);
-  if (!await fs.pathExists(globalStyleAbsolute)) return null;
+  if (!await fs2.pathExists(globalStyleAbsolute)) return null;
   const styleDir = path.dirname(globalStyleAbsolute);
   const salasStylesAbsolute = path.join(componentsPath, "styles.css");
   let importPath = path.relative(styleDir, salasStylesAbsolute).replace(/\\/g, "/");
   if (!importPath.startsWith(".")) {
     importPath = "./" + importPath;
   }
-  const content = await fs.readFile(globalStyleAbsolute, "utf-8");
+  const content = await fs2.readFile(globalStyleAbsolute, "utf-8");
   const importLine = `@import '${importPath}';`;
   if (content.includes(importPath)) {
     return null;
   }
   const newContent = importLine + "\n" + content;
-  await fs.writeFile(globalStyleAbsolute, newContent);
+  await fs2.writeFile(globalStyleAbsolute, newContent);
   return globalStyleRelative;
 }
 async function initCommand(options) {
@@ -263,13 +263,13 @@ async function initCommand(options) {
   const componentsPath = path.join(projectRoot, options.path);
   try {
     const angularJsonPath = path.join(projectRoot, "angular.json");
-    const isAngular = await fs.pathExists(angularJsonPath);
+    const isAngular = await fs2.pathExists(angularJsonPath);
     if (!isAngular) {
       console.error(chalk2.red("\u274C Projeto Angular n\xE3o detectado (angular.json n\xE3o encontrado)."));
       console.log(chalk2.gray("Execute este comando na raiz de um projeto Angular."));
       process.exit(1);
     }
-    await fs.ensureDir(componentsPath);
+    await fs2.ensureDir(componentsPath);
     const config = {
       $schema: "https://salas-ds.dev/schema.json",
       framework: options.framework,
@@ -277,11 +277,11 @@ async function initCommand(options) {
       utils: `${options.path}/utils.ts`,
       styles: `${options.path}/styles.css`
     };
-    await fs.writeJSON(path.join(projectRoot, CONFIG_FILE), config, { spaces: 2 });
+    await fs2.writeJSON(path.join(projectRoot, CONFIG_FILE), config, { spaces: 2 });
     const cssPath = path.join(componentsPath, "styles.css");
-    await fs.writeFile(cssPath, THEME_CSS);
+    await fs2.writeFile(cssPath, THEME_CSS);
     const utilsPath = path.join(componentsPath, "utils.ts");
-    await fs.writeFile(utilsPath, UTILS_TS);
+    await fs2.writeFile(utilsPath, UTILS_TS);
     const injectedFile = await injectStyleImport(projectRoot, componentsPath);
     console.log(chalk2.green("\u2705 Salas Design System inicializado com sucesso!\n"));
     console.log(chalk2.gray("Arquivos criados:"));
@@ -312,6 +312,103 @@ async function initCommand(options) {
     process.exit(1);
   }
 }
+var SIDEBAR_LAYOUT_CSS = `
+/* Salas Sidebar - layout (adicionado pelo CLI) */
+.salas-sidebar .salas-sidebar-content {
+  min-height: 120px;
+}
+`;
+async function getGlobalStylesPath(projectRoot) {
+  const angularJsonPath = path.join(projectRoot, "angular.json");
+  if (!await fs2.pathExists(angularJsonPath)) return null;
+  const angularJson = await fs2.readJSON(angularJsonPath);
+  const projectName = Object.keys(angularJson.projects)[0];
+  if (!projectName) return null;
+  const project = angularJson.projects[projectName];
+  const stylesArray = project?.architect?.build?.options?.styles ?? [];
+  const globalStyleEntry = stylesArray.find((s) => {
+    const file = typeof s === "string" ? s : s.input;
+    return /\.(css|scss|sass|less)$/.test(file);
+  });
+  if (!globalStyleEntry) return null;
+  const globalStyleRelative = typeof globalStyleEntry === "string" ? globalStyleEntry : globalStyleEntry.input;
+  const globalStyleAbsolute = path.join(projectRoot, globalStyleRelative);
+  if (!await fs2.pathExists(globalStyleAbsolute)) return null;
+  return globalStyleAbsolute;
+}
+async function patchIndexHtmlForSidebar(projectRoot) {
+  const indexPath = path.join(projectRoot, "src", "index.html");
+  if (!await fs2.pathExists(indexPath)) return false;
+  let content = await fs2.readFile(indexPath, "utf-8");
+  if (content.includes("data-theme=")) return false;
+  const htmlOpenTag = content.match(/<html(?:\s[^>]*)?>/);
+  if (!htmlOpenTag) return false;
+  const current = htmlOpenTag[0];
+  let next = current;
+  if (!next.includes("lang=")) {
+    next = next.replace("<html", '<html lang="en"');
+  }
+  next = next.replace(/>$/, ' data-theme="light">');
+  if (next === current) return false;
+  content = content.replace(current, next);
+  await fs2.writeFile(indexPath, content);
+  return true;
+}
+async function appendSidebarLayoutStyles(projectRoot) {
+  const stylePath = await getGlobalStylesPath(projectRoot);
+  if (!stylePath) return false;
+  const content = await fs2.readFile(stylePath, "utf-8");
+  if (content.includes("Salas Sidebar - layout") || content.includes(".salas-sidebar-content")) {
+    return false;
+  }
+  await fs2.appendFile(stylePath, SIDEBAR_LAYOUT_CSS);
+  return true;
+}
+var LUCIDE_SIDEBAR_IMPORT = "import { LucideAngularModule, Home, Settings, PanelLeft, PanelRight } from 'lucide-angular';";
+var LUCIDE_SIDEBAR_PROVIDERS = "...LucideAngularModule.pick({ Home, Settings, PanelLeft, PanelRight }),";
+async function patchAppConfigForLucide(projectRoot) {
+  const configPath = path.join(projectRoot, "src", "app", "app.config.ts");
+  if (!await fs2.pathExists(configPath)) return false;
+  let content = await fs2.readFile(configPath, "utf-8");
+  if (content.includes("PanelLeft") || content.includes("LucideAngularModule.pick")) {
+    return false;
+  }
+  let modified = false;
+  if (!content.includes("from 'lucide-angular'")) {
+    const firstImportMatch = content.match(/^(\s*import\s+.+;\s*\n)/m);
+    if (firstImportMatch) {
+      content = content.replace(
+        /^(\s*import\s+.+;\s*\n)/m,
+        `$1${LUCIDE_SIDEBAR_IMPORT}
+`
+      );
+      modified = true;
+    }
+  }
+  if (!content.includes(LUCIDE_SIDEBAR_PROVIDERS)) {
+    const providersMatch = content.match(/providers:\s*\[/);
+    if (providersMatch) {
+      content = content.replace(
+        /(providers:\s*\[)(\s*\n?)/,
+        `$1
+    ${LUCIDE_SIDEBAR_PROVIDERS}$2`
+      );
+      modified = true;
+    }
+  }
+  if (modified) {
+    await fs2.writeFile(configPath, content);
+  }
+  return modified;
+}
+async function runSidebarScaffold(projectRoot) {
+  const indexPatched = await patchIndexHtmlForSidebar(projectRoot);
+  const stylesPatched = await appendSidebarLayoutStyles(projectRoot);
+  const appConfigPatched = await patchAppConfigForLucide(projectRoot);
+  return { indexPatched, stylesPatched, appConfigPatched };
+}
+
+// src/commands/add.ts
 var __filename$1 = fileURLToPath(import.meta.url);
 var __dirname$1 = path.dirname(__filename$1);
 var COMPONENTS = [
@@ -338,7 +435,7 @@ var COMPONENTS = [
   "toast",
   "tooltip"
 ];
-var LUCIDE_COMPONENTS = ["autocomplete", "datepicker", "input", "select", "textarea"];
+var LUCIDE_COMPONENTS = ["autocomplete", "datepicker", "input", "select", "sidebar", "textarea"];
 var CONFIG_FILE2 = "salas-ds.json";
 function toPascalCase(str) {
   return str.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
@@ -346,24 +443,24 @@ function toPascalCase(str) {
 async function readConfig() {
   const projectRoot = process.cwd();
   const configPath = path.join(projectRoot, CONFIG_FILE2);
-  if (!await fs.pathExists(configPath)) {
+  if (!await fs2.pathExists(configPath)) {
     return null;
   }
-  return fs.readJSON(configPath);
+  return fs2.readJSON(configPath);
 }
 async function addSingleComponent(componentName, componentsDir, options) {
   const projectRoot = process.cwd();
   const componentPath = path.join(projectRoot, componentsDir, componentName);
-  if (await fs.pathExists(componentPath)) {
+  if (await fs2.pathExists(componentPath)) {
     if (!options.overwrite) {
       console.log(chalk2.yellow(`   \u26A0 ${componentName} j\xE1 existe. Use --overwrite para substituir.`));
       return false;
     }
-    await fs.remove(componentPath);
+    await fs2.remove(componentPath);
   }
-  await fs.ensureDir(componentPath);
+  await fs2.ensureDir(componentPath);
   const templatePath = path.join(__dirname$1, "..", "templates", "angular", componentName);
-  if (!await fs.pathExists(templatePath)) {
+  if (!await fs2.pathExists(templatePath)) {
     console.error(chalk2.red(`   \u274C Template n\xE3o encontrado para: ${componentName}`));
     return false;
   }
@@ -375,8 +472,8 @@ async function addSingleComponent(componentName, componentsDir, options) {
   for (const file of templateFiles) {
     const srcPath = path.join(templatePath, file);
     const destPath = path.join(componentPath, file);
-    await fs.ensureDir(path.dirname(destPath));
-    await fs.copyFile(srcPath, destPath);
+    await fs2.ensureDir(path.dirname(destPath));
+    await fs2.copyFile(srcPath, destPath);
   }
   return true;
 }
@@ -428,11 +525,27 @@ Exemplos:`));
     console.log(chalk2.yellow("\nNenhum componente adicionado."));
     return;
   }
-  process.cwd();
+  const projectRoot = process.cwd();
   console.log(chalk2.green(`
 \u2705 ${added.length} componente(s) adicionado(s) com sucesso!`));
   console.log(chalk2.gray(`   Localiza\xE7\xE3o: ${componentsDir}/
 `));
+  if (added.includes("sidebar")) {
+    const { indexPatched, stylesPatched, appConfigPatched } = await runSidebarScaffold(projectRoot);
+    if (indexPatched || stylesPatched || appConfigPatched) {
+      console.log(chalk2.blue("\u{1F4D0} Sidebar: configura\xE7\xE3o aplicada no projeto:"));
+      if (indexPatched) console.log(chalk2.gray('   \u2022 src/index.html: data-theme="light" e lang="en" no <html>'));
+      if (stylesPatched) console.log(chalk2.gray("   \u2022 Estilos globais: min-height da \xE1rea do menu (.salas-sidebar-content)"));
+      if (appConfigPatched) console.log(chalk2.gray("   \u2022 app.config.ts: \xEDcones Lucide (Home, Settings, PanelLeft, PanelRight) registrados"));
+      console.log("");
+    }
+    if (added.includes("sidebar") && needsLucide.has("sidebar")) {
+      console.log(chalk2.yellow("   Instale lucide-angular para o trigger e \xEDcones do menu: npm install lucide-angular"));
+      console.log("");
+    }
+    console.log(chalk2.blue("\u{1F4A1} Sidebar: use no template com salas-sidebar-provider, salas-sidebar, salas-sidebar-header, salas-sidebar-content e salas-sidebar-inset."));
+    console.log(chalk2.gray("   \xCDcones do trigger (PanelLeft/PanelRight) e do menu (Home, Settings) usam lucide-angular.\n"));
+  }
   if (needsLucide.size > 0) {
     console.log(chalk2.yellow("\u26A0  Os seguintes componentes precisam do lucide-angular:"));
     console.log(chalk2.gray(`   ${[...needsLucide].join(", ")}`));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salas-ds/cli",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "CLI para adicionar componentes do Salas Design System ao projeto (estilo shadcn)",
   "type": "module",
   "bin": {

package/templates/angular/dialog/dialog.component.ts

@@ -1,4 +1,35 @@
 import {
+
+export type DialogSize = 'default' | 'sm';
+
+export interface DialogProps {
+  /**
+   * Controlled open state. If provided, the dialog becomes controlled and
+   * will not manage its own internal state.
+   */
+  open?: boolean;
+  /**
+   * Width of the dialog panel. Accepts any valid CSS width value (e.g. '480px', '32rem', '50%').
+   */
+  width?: string;
+  /**
+   * Height of the dialog panel. Accepts any valid CSS height value.
+   */
+  height?: string;
+  /**
+   * Named size preset. When provided, defines sensible defaults for width and padding.
+   */
+  size?: DialogSize;
+  /**
+   * If true, closes the dialog when the user clicks on the overlay.
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * If true, hides the X close button in the top-right corner.
+   */
+  hideCloseButton?: boolean;
+}
+
   Component,
   Input,
   Output,
@@ -7,8 +38,6 @@ import {
   HostListener,
 } from '@angular/core';
 
-export type DialogSize = 'default' | 'sm';
-
 @Component({
   selector: 'salas-dialog',
   standalone: true,

package/templates/angular/sidebar/sidebar-content.component.ts

@@ -14,7 +14,7 @@ import { Component } from '@angular/core';
     }
     .salas-sidebar-content {
       flex: 1;
-      min-height: 0;
+      min-height: 120px;
       overflow-y: auto;
       overflow-x: hidden;
       padding: 0.5rem;

package/templates/angular/sidebar/sidebar-trigger.component.ts

@@ -1,22 +1,17 @@
 import { Component, Optional } from '@angular/core';
+import { LucideAngularModule } from 'lucide-angular';
 import { SidebarService } from './sidebar.service';
 
 @Component({
   selector: 'salas-sidebar-trigger',
   standalone: true,
-  imports: [],
+  imports: [LucideAngularModule],
   template: `
     <button type="button" class="salas-sidebar-trigger" [class.salas-sidebar-trigger--right]="isRight" (click)="onClick()" aria-label="Toggle sidebar">
       @if (isRight) {
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <rect width="18" height="18" x="3" y="3" rx="2"/>
-          <path d="M15 3v18"/>
-        </svg>
+        <lucide-icon name="panel-right" [size]="20" />
       } @else {
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <rect width="18" height="18" x="3" y="3" rx="2"/>
-          <path d="M9 3v18"/>
-        </svg>
+        <lucide-icon name="panel-left" [size]="20" />
       }
     </button>
   `,

package/templates/angular/sidebar/sidebar.component.ts

@@ -65,6 +65,7 @@ export interface SidebarProviderProps {
       width: var(--salas-sidebar-width);
     }
 
+    /* Layout dos filhos: header e content participam do flex */
     .salas-sidebar > salas-sidebar-header {
       flex-shrink: 0;
       display: block;
@@ -84,15 +85,57 @@ export interface SidebarProviderProps {
       width: 100%;
       padding: 0.5rem;
     }
-    .salas-sidebar salas-sidebar-menu {
+    .salas-sidebar salas-sidebar-menu,
+    .salas-sidebar .salas-sidebar-menu {
       display: flex;
       flex-direction: column;
       gap: 0.125rem;
     }
-    .salas-sidebar salas-sidebar-menu-item {
+    .salas-sidebar salas-sidebar-menu-item,
+    .salas-sidebar .salas-sidebar-menu-item {
       display: block;
     }
 
+    /* Plain HTML menu (ul/li/a with classes) */
+    .salas-sidebar .salas-sidebar-menu-button,
+    .salas-sidebar salas-sidebar-menu-button {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      width: 100%;
+      padding: 0.5rem 0.75rem;
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+      color: var(--salas-text);
+      text-decoration: none;
+      transition: background-color 0.2s, color 0.2s, padding 0.2s, gap 0.2s;
+      cursor: pointer;
+      border: none;
+      background: none;
+      font-family: inherit;
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+    .salas-sidebar .salas-sidebar-menu-button:hover,
+    .salas-sidebar salas-sidebar-menu-button:hover {
+      background-color: var(--salas-gray-100);
+      color: var(--salas-text);
+    }
+    .salas-sidebar .salas-sidebar-menu-button--active,
+    .salas-sidebar .salas-sidebar-menu-button[aria-current="page"],
+    .salas-sidebar salas-sidebar-menu-button.salas-sidebar-menu-button--active {
+      background-color: var(--salas-gray-100);
+      color: var(--salas-text);
+      font-weight: 500;
+    }
+    .salas-sidebar .salas-sidebar-menu-icon,
+    .salas-sidebar .salas-sidebar-menu-button .salas-sidebar-menu-icon {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     .salas-sidebar[data-side="left"] {
       left: 0;
     }