@salas-ds/cli 0.2.0 → 0.2.2

package/dist/index.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 import { Command } from 'commander';
 import chalk2 from 'chalk';
-import fs2 from 'fs-extra';
-import path2 from 'path';
+import fs from 'fs-extra';
+import path from 'path';
 import { fileURLToPath } from 'url';
 import { glob } from 'glob';
 
@@ -227,19 +227,49 @@ export const throttle = <T extends (...args: any[]) => any>(
 
 // src/commands/init.ts
 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 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 fs.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 importLine = `@import '${importPath}';`;
+  if (content.includes(importPath)) {
+    return null;
+  }
+  const newContent = importLine + "\n" + content;
+  await fs.writeFile(globalStyleAbsolute, newContent);
+  return globalStyleRelative;
+}
 async function initCommand(options) {
   console.log(chalk2.blue("\u{1F680} Inicializando Salas Design System...\n"));
   const projectRoot = process.cwd();
-  const componentsPath = path2.join(projectRoot, options.path);
+  const componentsPath = path.join(projectRoot, options.path);
   try {
-    const angularJsonPath = path2.join(projectRoot, "angular.json");
-    const isAngular = await fs2.pathExists(angularJsonPath);
+    const angularJsonPath = path.join(projectRoot, "angular.json");
+    const isAngular = await fs.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 fs2.ensureDir(componentsPath);
+    await fs.ensureDir(componentsPath);
     const config = {
       $schema: "https://salas-ds.dev/schema.json",
       framework: options.framework,
@@ -247,27 +277,32 @@ async function initCommand(options) {
       utils: `${options.path}/utils.ts`,
       styles: `${options.path}/styles.css`
     };
-    await fs2.writeJSON(path2.join(projectRoot, CONFIG_FILE), config, { spaces: 2 });
-    const cssPath = path2.join(componentsPath, "styles.css");
-    await fs2.writeFile(cssPath, THEME_CSS);
-    const utilsPath = path2.join(componentsPath, "utils.ts");
-    await fs2.writeFile(utilsPath, UTILS_TS);
+    await fs.writeJSON(path.join(projectRoot, CONFIG_FILE), config, { spaces: 2 });
+    const cssPath = path.join(componentsPath, "styles.css");
+    await fs.writeFile(cssPath, THEME_CSS);
+    const utilsPath = path.join(componentsPath, "utils.ts");
+    await fs.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:"));
     console.log(chalk2.gray(`   ${CONFIG_FILE}`));
     console.log(chalk2.gray(`   ${options.path}/styles.css`));
-    console.log(chalk2.gray(`   ${options.path}/utils.ts
-`));
-    console.log(chalk2.blue("\u{1F4A1} Pr\xF3ximos passos:"));
-    console.log(chalk2.gray(`   1. Importe o CSS no seu styles.css ou angular.json:`));
-    console.log(chalk2.white(`      @import './${options.path}/styles.css';`));
-    console.log(chalk2.gray(`
-   2. Adicione componentes:`));
+    console.log(chalk2.gray(`   ${options.path}/utils.ts`));
+    if (injectedFile) {
+      console.log(chalk2.green(`
+\u2705 Import adicionado automaticamente em ${injectedFile}`));
+    } else {
+      console.log(chalk2.yellow(`
+\u26A0  Adicione manualmente no seu arquivo de estilos global:`));
+      console.log(chalk2.white(`   @import './components/ui/styles.css';`));
+    }
+    console.log(chalk2.blue("\n\u{1F4A1} Pr\xF3ximos passos:"));
+    console.log(chalk2.gray(`   Adicione componentes:`));
     console.log(chalk2.white(`      npx @salas-ds/cli add button`));
     console.log(chalk2.white(`      npx @salas-ds/cli add input`));
     console.log(chalk2.white(`      npx @salas-ds/cli add --all`));
     console.log(chalk2.gray(`
-   3. Componentes dispon\xEDveis:`));
+   Componentes dispon\xEDveis:`));
     console.log(chalk2.gray(`      accordion, autocomplete, avatar, badge, button, card,`));
     console.log(chalk2.gray(`      checkbox, datepicker, dialog, input, scroll-area, select,`));
     console.log(chalk2.gray(`      separator, sheet, sidebar, skeleton, spinner, table,`));
@@ -278,7 +313,7 @@ async function initCommand(options) {
   }
 }
 var __filename$1 = fileURLToPath(import.meta.url);
-var __dirname$1 = path2.dirname(__filename$1);
+var __dirname$1 = path.dirname(__filename$1);
 var COMPONENTS = [
   "accordion",
   "autocomplete",
@@ -310,25 +345,25 @@ function toPascalCase(str) {
 }
 async function readConfig() {
   const projectRoot = process.cwd();
-  const configPath = path2.join(projectRoot, CONFIG_FILE2);
-  if (!await fs2.pathExists(configPath)) {
+  const configPath = path.join(projectRoot, CONFIG_FILE2);
+  if (!await fs.pathExists(configPath)) {
     return null;
   }
-  return fs2.readJSON(configPath);
+  return fs.readJSON(configPath);
 }
 async function addSingleComponent(componentName, componentsDir, options) {
   const projectRoot = process.cwd();
-  const componentPath = path2.join(projectRoot, componentsDir, componentName);
-  if (await fs2.pathExists(componentPath)) {
+  const componentPath = path.join(projectRoot, componentsDir, componentName);
+  if (await fs.pathExists(componentPath)) {
     if (!options.overwrite) {
       console.log(chalk2.yellow(`   \u26A0 ${componentName} j\xE1 existe. Use --overwrite para substituir.`));
       return false;
     }
-    await fs2.remove(componentPath);
+    await fs.remove(componentPath);
   }
-  await fs2.ensureDir(componentPath);
-  const templatePath = path2.join(__dirname$1, "..", "templates", "angular", componentName);
-  if (!await fs2.pathExists(templatePath)) {
+  await fs.ensureDir(componentPath);
+  const templatePath = path.join(__dirname$1, "..", "templates", "angular", componentName);
+  if (!await fs.pathExists(templatePath)) {
     console.error(chalk2.red(`   \u274C Template n\xE3o encontrado para: ${componentName}`));
     return false;
   }
@@ -338,10 +373,10 @@ async function addSingleComponent(componentName, componentsDir, options) {
     nodir: true
   });
   for (const file of templateFiles) {
-    const srcPath = path2.join(templatePath, file);
-    const destPath = path2.join(componentPath, file);
-    await fs2.ensureDir(path2.dirname(destPath));
-    await fs2.copyFile(srcPath, destPath);
+    const srcPath = path.join(templatePath, file);
+    const destPath = path.join(componentPath, file);
+    await fs.ensureDir(path.dirname(destPath));
+    await fs.copyFile(srcPath, destPath);
   }
   return true;
 }
@@ -407,7 +442,7 @@ Exemplos:`));
   console.log(chalk2.blue("\u{1F4A1} Como usar:"));
   const example = added[0];
   const exampleClass = `Salas${toPascalCase(example)}Component`;
-  const relPath = `./${path2.join(componentsDir, example, example).replace(/\\/g, "/")}`;
+  const relPath = `./${path.join(componentsDir, example, example).replace(/\\/g, "/")}`;
   console.log(chalk2.gray(`   // Standalone component:`));
   console.log(chalk2.white(`   import { ${exampleClass} } from '${relPath}.component';`));
   console.log(chalk2.gray(`

package/package.json

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

package/templates/angular/checkbox/checkbox.component.ts

@@ -138,8 +138,8 @@ export class SalasCheckboxComponent implements CheckboxProps, ControlValueAccess
   }
 
   @HostListener('keydown.space', ['$event'])
-  handleSpace(event: KeyboardEvent): void {
-    event.preventDefault();
+  handleSpace(event: Event): void {
+    (event as KeyboardEvent).preventDefault();
     this.toggle();
   }
 

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

@@ -1,35 +1,4 @@
 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,
@@ -38,6 +7,8 @@ export interface DialogProps {
   HostListener,
 } from '@angular/core';
 
+export type DialogSize = 'default' | 'sm';
+
 @Component({
   selector: 'salas-dialog',
   standalone: true,

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

@@ -6,8 +6,15 @@ import { Component } from '@angular/core';
   imports: [],
   template: `<div class="salas-sidebar-content"><ng-content></ng-content></div>`,
   styles: [`
+    :host {
+      display: flex;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
     .salas-sidebar-content {
       flex: 1;
+      min-height: 0;
       overflow-y: auto;
       overflow-x: hidden;
       padding: 0.5rem;

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

@@ -6,6 +6,9 @@ import { Component } from '@angular/core';
   imports: [],
   template: `<header class="salas-sidebar-header"><ng-content></ng-content></header>`,
   styles: [`
+    :host {
+      display: block;
+    }
     .salas-sidebar-header {
       flex-shrink: 0;
       padding: 1rem 1.25rem;
@@ -14,6 +17,8 @@ import { Component } from '@angular/core';
       overflow: hidden;
       white-space: nowrap;
       transition: padding 0.2s ease, height 0.2s ease, opacity 0.2s ease;
+      font-weight: 600;
+      font-size: 1rem;
     }
   `],
 })

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

@@ -33,7 +33,7 @@ const SIDEBAR_WIDTH_ICON = '3rem';
     .salas-sidebar-inset {
       flex: 1;
       min-width: 0;
-      min-height: 100%;
+      min-height: 100vh;
       padding: 1rem;
       background-color: var(--salas-bg);
       color: var(--salas-text);

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

@@ -22,11 +22,20 @@ const MOBILE_BREAKPOINT = 768;
   providers: [SidebarService],
   template: `<div class="salas-sidebar-provider"><ng-content></ng-content></div>`,
   styles: [`
+    :host {
+      display: block;
+      height: 100%;
+      min-height: 100vh;
+      overflow: visible;
+    }
     .salas-sidebar-provider {
       display: flex;
+      flex-direction: row;
       min-height: 100vh;
       height: 100%;
       width: 100%;
+      position: relative;
+      overflow: visible;
     }
   `],
 })

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

@@ -42,17 +42,21 @@ export interface SidebarProviderProps {
   styles: [`
     :host {
       display: block;
+      flex-shrink: 0;
+      width: 0;
+      min-width: 0;
     }
 
     .salas-sidebar {
       --salas-sidebar-width: 16rem;
       --salas-sidebar-width-icon: 3rem;
+      box-sizing: border-box;
       background-color: var(--salas-bg-elevated);
       color: var(--salas-text);
       border-right: 1px solid var(--salas-gray-200);
       display: flex;
       flex-direction: column;
-      height: 100%;
+      height: 100vh;
       min-height: 100vh;
       position: fixed;
       top: 0;
@@ -61,6 +65,34 @@ export interface SidebarProviderProps {
       width: var(--salas-sidebar-width);
     }
 
+    .salas-sidebar > salas-sidebar-header {
+      flex-shrink: 0;
+      display: block;
+    }
+    .salas-sidebar > salas-sidebar-content {
+      flex: 1 1 0;
+      min-height: 0;
+      display: flex;
+      overflow: hidden;
+    }
+    .salas-sidebar > salas-sidebar-content > .salas-sidebar-content {
+      flex: 1;
+      min-height: 0;
+      display: block;
+      overflow-y: auto;
+      overflow-x: hidden;
+      width: 100%;
+      padding: 0.5rem;
+    }
+    .salas-sidebar salas-sidebar-menu {
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+    }
+    .salas-sidebar salas-sidebar-menu-item {
+      display: block;
+    }
+
     .salas-sidebar[data-side="left"] {
       left: 0;
     }