@promptui-lib/codegen 0.1.7 → 0.1.8

package/dist/generators/index.d.ts

@@ -1,3 +1,4 @@
 export { generateTSX, generateIndex } from './tsx-generator.js';
 export { generateSCSS, generateFlatSCSS } from './scss-generator.js';
+export { generateDefaultVariables } from './variables-generator.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/generators/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/generators/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/generators/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/generators/index.js

@@ -1,2 +1,3 @@
 export { generateTSX, generateIndex } from './tsx-generator.js';
 export { generateSCSS, generateFlatSCSS } from './scss-generator.js';
+export { generateDefaultVariables } from './variables-generator.js';

package/dist/generators/scss-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scss-generator.d.ts","sourceRoot":"","sources":["../../src/generators/scss-generator.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAA+B,MAAM,oBAAoB,CAAC;AAoHrF;;GAEG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAavD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAc3D"}
+{"version":3,"file":"scss-generator.d.ts","sourceRoot":"","sources":["../../src/generators/scss-generator.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAA+B,MAAM,oBAAoB,CAAC;AAgIrF;;GAEG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAYvD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAU3D"}

package/dist/generators/scss-generator.js

@@ -55,10 +55,15 @@ function generateBEMStructure(styles, blockName) {
         }
     }
     // Elementos (__element)
-    if (elements.length > 0) {
+    // Filtra elementos com nome válido (não vazio)
+    const validElements = elements.filter((element) => {
+        const elementName = element.selector.replace(`.${blockName}__`, '');
+        return elementName && elementName.trim() !== '';
+    });
+    if (validElements.length > 0) {
         lines.push('');
         lines.push('  // Elements');
-        for (const element of elements) {
+        for (const element of validElements) {
             const elementName = element.selector.replace(`.${blockName}__`, '');
             lines.push('');
             lines.push(`  &__${elementName} {`);
@@ -69,10 +74,15 @@ function generateBEMStructure(styles, blockName) {
         }
     }
     // Modificadores (--modifier)
-    if (modifiers.length > 0) {
+    // Filtra modificadores com nome válido (não vazio)
+    const validModifiers = modifiers.filter((modifier) => {
+        const modifierName = modifier.selector.split('--')[1];
+        return modifierName && modifierName.trim() !== '';
+    });
+    if (validModifiers.length > 0) {
         lines.push('');
         lines.push('  // Modifiers');
-        for (const modifier of modifiers) {
+        for (const modifier of validModifiers) {
             const modifierName = modifier.selector.split('--')[1];
             lines.push('');
             lines.push(`  &--${modifierName} {`);
@@ -90,13 +100,12 @@ function generateBEMStructure(styles, blockName) {
  */
 export function generateSCSS(ast) {
     const lines = [];
-    // Import de variáveis
-    lines.push("@use '@styles/variables' as *;");
+    // Import do arquivo de variáveis (caminho relativo para src/styles/_variables.scss)
+    lines.push("@use '../../../styles/variables' as *;");
     lines.push('');
     // Gera estrutura BEM
     const blockName = ast.fileName;
-    const bemCode = generateBEMStructure(ast.styles, blockName);
-    lines.push(bemCode);
+    lines.push(generateBEMStructure(ast.styles, blockName));
     return lines.join('\n');
 }
 /**
@@ -104,9 +113,6 @@ export function generateSCSS(ast) {
  */
 export function generateFlatSCSS(ast) {
     const lines = [];
-    // Import de variáveis
-    lines.push("@use '@styles/variables' as *;");
-    lines.push('');
     // Blocos individuais
     for (const block of ast.styles) {
         lines.push(generateStyleBlock(block));

package/dist/generators/variables-generator.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Variables Generator
+ * Gera arquivo SCSS com variáveis padrão (tokens)
+ */
+/**
+ * Gera o conteúdo do arquivo _variables.scss com tokens padrão
+ */
+export declare function generateDefaultVariables(): string;
+//# sourceMappingURL=variables-generator.d.ts.map

package/dist/generators/variables-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables-generator.d.ts","sourceRoot":"","sources":["../../src/generators/variables-generator.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CAuIjD"}

package/dist/generators/variables-generator.js

@@ -0,0 +1,143 @@
+/**
+ * Variables Generator
+ * Gera arquivo SCSS com variáveis padrão (tokens)
+ */
+/**
+ * Gera o conteúdo do arquivo _variables.scss com tokens padrão
+ */
+export function generateDefaultVariables() {
+    return `// PromptUI - Design Tokens
+// Auto-generated by PromptUI CLI
+// Run 'promptui sync tokens' to update from Figma
+
+// =============================================================================
+// COLORS
+// =============================================================================
+
+// Brand Colors
+$color-primary: #2d6dff;
+$color-primary-light: #5a8fff;
+$color-primary-dark: #1a4fcc;
+$color-secondary: #5f6368;
+
+// Semantic Colors
+$color-success: #34a853;
+$color-error: #ea4335;
+$color-warning: #fbbc04;
+$color-info: #4285f4;
+
+// Text Colors
+$color-text-primary: #1a1a1a;
+$color-text-secondary: #4f4f4f;
+$color-text-tertiary: #9c9c9c;
+$color-text-disabled: #9aa0a6;
+$color-text-inverse: #ffffff;
+
+// Background Colors
+$color-bg-primary: #ffffff;
+$color-bg-secondary: #f8f9fa;
+$color-bg-tertiary: #e8eaed;
+
+// Border Colors
+$color-border: #dadce0;
+$color-border-primary: #d8d8d8;
+$color-divider: #e8eaed;
+
+// =============================================================================
+// TYPOGRAPHY
+// =============================================================================
+
+// Font Families
+$font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+$font-family-secondary: "Manrope", sans-serif;
+$font-family-mono: "Fira Code", "Consolas", monospace;
+
+// Font Sizes
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-md: 16px;
+$font-size-lg: 18px;
+$font-size-xl: 20px;
+$font-size-2xl: 24px;
+$font-size-3xl: 30px;
+$font-size-4xl: 36px;
+
+// Font Weights
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+// Line Heights
+$line-height-tight: 1.25;
+$line-height-normal: 1.5;
+$line-height-relaxed: 1.75;
+
+// =============================================================================
+// SPACING
+// =============================================================================
+
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+$spacing-2xl: 48px;
+$spacing-3xl: 64px;
+
+// Gap (for flexbox/grid)
+$gap-1: 4px;
+$gap-2: 8px;
+$gap-3: 12px;
+$gap-4: 16px;
+$gap-5: 20px;
+$gap-6: 24px;
+$gap-8: 32px;
+
+// =============================================================================
+// BORDERS
+// =============================================================================
+
+// Border Radius
+$radius-none: 0;
+$radius-small: 4px;
+$radius-medium: 8px;
+$radius-large: 12px;
+$radius-xl: 16px;
+$radius-full: 9999px;
+
+// Border Width
+$border-width-thin: 1px;
+$border-width-medium: 2px;
+$border-width-thick: 4px;
+
+// =============================================================================
+// SHADOWS
+// =============================================================================
+
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+
+// =============================================================================
+// TRANSITIONS
+// =============================================================================
+
+$transition-fast: 150ms ease;
+$transition-normal: 250ms ease;
+$transition-slow: 350ms ease;
+
+// =============================================================================
+// Z-INDEX
+// =============================================================================
+
+$z-dropdown: 1000;
+$z-sticky: 1020;
+$z-fixed: 1030;
+$z-modal-backdrop: 1040;
+$z-modal: 1050;
+$z-popover: 1060;
+$z-tooltip: 1070;
+`;
+}

package/dist/writers/file-writer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-writer.d.ts","sourceRoot":"","sources":["../../src/writers/file-writer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIxF,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE;QACL,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAqBD;;GAEG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,aAAa,GAAG,cAAc,CAM/D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,MAAM,GACf,MAAM,CAER;AAED;;GAEG;AACH,wBAAsB,cAAc,CAClC,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,aAAa,GACrB,OAAO,CAAC,YAAY,CAAC,CAmDvB;AAED;;GAEG;AACH,wBAAsB,eAAe,CACnC,IAAI,EAAE,aAAa,EAAE,EACrB,OAAO,EAAE,aAAa,GACrB,OAAO,CAAC,YAAY,EAAE,CAAC,CASzB"}
+{"version":3,"file":"file-writer.d.ts","sourceRoot":"","sources":["../../src/writers/file-writer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAKxF,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE;QACL,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAqBD;;GAEG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,aAAa,GAAG,cAAc,CAM/D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,MAAM,GACf,MAAM,CAER;AA2BD;;GAEG;AACH,wBAAsB,cAAc,CAClC,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,aAAa,GACrB,OAAO,CAAC,YAAY,CAAC,CAyDvB;AAED;;GAEG;AACH,wBAAsB,eAAe,CACnC,IAAI,EAAE,aAAa,EAAE,EACrB,OAAO,EAAE,aAAa,GACrB,OAAO,CAAC,YAAY,EAAE,CAAC,CASzB"}

package/dist/writers/file-writer.js

@@ -3,9 +3,10 @@
  * Escreve arquivos gerados no sistema de arquivos
  */
 import { mkdir, writeFile, access } from 'node:fs/promises';
-import { join } from 'node:path';
+import { join, dirname } from 'node:path';
 import { generateTSX, generateIndex } from '../generators/tsx-generator.js';
 import { generateSCSS } from '../generators/scss-generator.js';
+import { generateDefaultVariables } from '../generators/variables-generator.js';
 /**
  * Verifica se um arquivo existe
  */
@@ -40,6 +41,29 @@ export function generateCode(ast) {
 export function getOutputPath(basePath, layer, fileName) {
     return join(basePath, layer, fileName);
 }
+/**
+ * Garante que o arquivo de variáveis existe
+ */
+async function ensureVariablesFile(basePath) {
+    // Calcula o caminho da pasta styles (irmã de components)
+    // basePath = src/components -> stylesDir = src/styles
+    const parentDir = dirname(basePath);
+    const stylesDir = join(parentDir, 'styles');
+    const variablesPath = join(stylesDir, '_variables.scss');
+    // Verifica se já existe
+    const exists = await fileExists(variablesPath);
+    if (exists) {
+        return null; // Já existe, não precisa criar
+    }
+    try {
+        await ensureDir(stylesDir);
+        await writeFile(variablesPath, generateDefaultVariables(), 'utf-8');
+        return variablesPath;
+    }
+    catch {
+        return null;
+    }
+}
 /**
  * Escreve os arquivos do componente
  */
@@ -64,6 +88,11 @@ export async function writeComponent(ast, options) {
         }
     }
     try {
+        // Garante que o arquivo de variáveis existe
+        const variablesCreated = await ensureVariablesFile(options.basePath);
+        if (variablesCreated) {
+            console.log(`  📁 Created: ${variablesCreated}`);
+        }
         // Cria diretório
         await ensureDir(componentDir);
         // Escreve arquivos

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptui-lib/codegen",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": false,
   "description": "Code generator for PromptUI - generates React TSX and SCSS",
   "license": "UNLICENSED",
@@ -30,7 +30,7 @@
     "dist"
   ],
   "dependencies": {
-    "@promptui-lib/core": "0.1.7"
+    "@promptui-lib/core": "0.1.8"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",