@promptui-lib/cli 0.1.16 → 0.1.18

package/README.md

@@ -180,6 +180,37 @@ export FIGMA_FILE_ID=ABC123xyz
 **File ID:**
 Da URL do Figma: `https://www.figma.com/file/ABC123xyz/MeuProjeto` → `ABC123xyz`
 
+### Entendendo o fileId vs node-id
+
+> ⚠️ **Importante**: O `fileId` é do **arquivo Figma inteiro**, não de uma tela específica!
+
+Na URL do Figma:
+```
+https://www.figma.com/design/5gCjy5F30XJySmOPpgDKLM/Tela-de-Login?node-id=13-2&m=dev
+                              └──────────────────────┘              └──────┘
+                                     fileId                         node-id (NÃO usar)
+```
+
+| Conceito | O que é | Precisa na config? |
+|----------|---------|-------------------|
+| `fileId` | Identifica o **arquivo Figma inteiro** | ✅ Sim |
+| `node-id` | Identifica um frame específico | ❌ Não |
+
+**Regra:**
+- **Mesmo arquivo Figma, telas diferentes** → Use o **mesmo fileId**
+- **Arquivo Figma diferente** → Precisa de um **novo fileId**
+
+**Exemplo:**
+```
+📁 Meu Projeto (fileId: ABC123xyz)
+  ├── #LoginScreen     ← mesmo fileId
+  ├── #HomeScreen      ← mesmo fileId
+  ├── #ProfileScreen   ← mesmo fileId
+  └── #SettingsScreen  ← mesmo fileId
+```
+
+O CLI busca automaticamente **todos os frames** que começam com `#` dentro do arquivo.
+
 ---
 
 ## Guia para Designers

package/dist/commands/generate.cmd.d.ts

@@ -2,7 +2,7 @@
  * Generate Command
  * Gera componente a partir de um node do Figma ou arquivo JSON local
  */
-import type { ComponentLayer, FrameworkType } from '@promptui-lib/core';
+import type { ComponentLayer, FrameworkType } from "@promptui-lib/core";
 export interface IGenerateOptions {
     force?: boolean;
     output?: string;

package/dist/commands/generate.cmd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate.cmd.d.ts","sourceRoot":"","sources":["../../src/commands/generate.cmd.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAc,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAapF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AA0ED,wBAAsB,eAAe,CACnC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,gBAAgB,GACxB,OAAO,CAAC,IAAI,CAAC,CAqJf;AAyBD;;;;;;;;;GASG;AACH,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CA6HjF"}
+{"version":3,"file":"generate.cmd.d.ts","sourceRoot":"","sources":["../../src/commands/generate.cmd.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EACV,cAAc,EAEd,aAAa,EACd,MAAM,oBAAoB,CAAC;AAiB5B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AA4ED,wBAAsB,eAAe,CACnC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,gBAAgB,GACxB,OAAO,CAAC,IAAI,CAAC,CA2Jf;AAyBD;;;;;;;;;GASG;AACH,wBAAsB,kBAAkB,CACtC,OAAO,EAAE,gBAAgB,GACxB,OAAO,CAAC,IAAI,CAAC,CA0If"}

package/dist/commands/generate.cmd.js

@@ -2,26 +2,26 @@
  * Generate Command
  * Gera componente a partir de um node do Figma ou arquivo JSON local
  */
-import { readFile } from 'node:fs/promises';
-import { createHash } from 'node:crypto';
-import { createFigmaClient } from '@promptui-lib/figma-parser';
-import { parseNode } from '@promptui-lib/figma-parser';
-import { writeComponent, generateCode, generateMuiComponent, generateTailwindComponent, generateBootstrapComponent, FRAMEWORKS, } from '@promptui-lib/codegen';
-import { loadConfig, resolveConfig, validateConfig } from '@promptui-lib/mcp-agent';
+import { readFile } from "node:fs/promises";
+import { createHash } from "node:crypto";
+import { createFigmaClient } from "@promptui-lib/figma-parser";
+import { parseNode } from "@promptui-lib/figma-parser";
+import { writeComponent, generateCode, generateMuiComponent, generateTailwindComponent, generateBootstrapComponent, FRAMEWORKS, } from "@promptui-lib/codegen";
+import { loadConfig, resolveConfig, validateConfig, } from "@promptui-lib/mcp-agent";
 /**
  * Detecta se o input é um arquivo JSON local ou nodeId do Figma
  */
 function isLocalFile(input) {
-    return input.endsWith('.json') || input.startsWith('./') || input.startsWith('/');
+    return (input.endsWith(".json") || input.startsWith("./") || input.startsWith("/"));
 }
 /**
  * Carrega node de arquivo JSON local
  */
 async function loadNodeFromFile(filePath) {
-    const content = await readFile(filePath, 'utf-8');
+    const content = await readFile(filePath, "utf-8");
     const node = JSON.parse(content);
     if (!node.id || !node.name || !node.type) {
-        throw new Error('Invalid Figma node JSON: missing id, name or type');
+        throw new Error("Invalid Figma node JSON: missing id, name or type");
     }
     return node;
 }
@@ -30,10 +30,10 @@ async function loadNodeFromFile(filePath) {
  */
 function generateMeta(node, ast, source, files) {
     const content = JSON.stringify({ node, ast, source, files });
-    const checksum = createHash('sha256').update(content).digest('hex');
+    const checksum = createHash("sha256").update(content).digest("hex");
     return {
-        generator: 'promptui-figma-codegen',
-        version: '1.0.0',
+        generator: "promptui-figma-codegen",
+        version: "1.0.0",
         generatedAt: new Date().toISOString(),
         source: {
             nodeId: node.id,
@@ -52,7 +52,7 @@ function generateMeta(node, ast, source, files) {
 }
 export async function generateCommand(input, options) {
     const isFile = isLocalFile(input);
-    console.log(`[PromptUI] Generating component from ${isFile ? 'file' : 'Figma node'}: ${input}`);
+    console.log(`[PromptUI] Generating component from ${isFile ? "file" : "Figma node"}: ${input}`);
     // Carrega config
     const config = await loadConfig();
     const resolved = resolveConfig(config);
@@ -69,7 +69,7 @@ export async function generateCommand(input, options) {
             // Valida config para API
             const errors = validateConfig(resolved);
             if (errors.length > 0) {
-                console.error('[PromptUI] Configuration errors:');
+                console.error("[PromptUI] Configuration errors:");
                 for (const error of errors) {
                     console.error(`  - ${error}`);
                 }
@@ -88,32 +88,32 @@ export async function generateCommand(input, options) {
         }
         // Parseia
         const ast = parseNode(node, { forceLayer: options.layer });
-        const framework = options.framework ?? 'react';
+        const framework = options.framework ?? "react";
         const frameworkInfo = FRAMEWORKS[framework];
         console.log(`[PromptUI] Parsed: ${ast.name} (${ast.layer})`);
         console.log(`[PromptUI] Framework: ${frameworkInfo?.displayName ?? framework}`);
         // Gera código baseado no framework
         const generateForFramework = () => {
             switch (framework) {
-                case 'mui':
+                case "mui":
                     return {
                         tsx: generateMuiComponent(ast),
-                        scss: '', // MUI usa sx props inline
+                        scss: "", // MUI usa sx props inline
                         index: `export { ${ast.name} } from './${ast.fileName}';\nexport type { I${ast.name}Props } from './${ast.fileName}';\n`,
                     };
-                case 'tailwind':
+                case "tailwind":
                     return {
                         tsx: generateTailwindComponent(ast),
-                        scss: '', // Tailwind usa classes inline
+                        scss: "", // Tailwind usa classes inline
                         index: `export { ${ast.name} } from './${ast.fileName}';\nexport type { I${ast.name}Props } from './${ast.fileName}';\n`,
                     };
-                case 'bootstrap':
+                case "bootstrap":
                     return {
                         tsx: generateBootstrapComponent(ast),
-                        scss: '', // Bootstrap usa classes inline
+                        scss: "", // Bootstrap usa classes inline
                         index: `export { ${ast.name} } from './${ast.fileName}';\nexport type { I${ast.name}Props } from './${ast.fileName}';\n`,
                     };
-                case 'react':
+                case "react":
                 default:
                     return generateCode(ast);
             }
@@ -121,22 +121,22 @@ export async function generateCommand(input, options) {
         // Preview mode
         if (options.preview) {
             const code = generateForFramework();
-            console.log('\n--- TSX ---');
+            console.log("\n--- TSX ---");
             console.log(code.tsx);
             if (code.scss) {
-                console.log('\n--- SCSS ---');
+                console.log("\n--- SCSS ---");
                 console.log(code.scss);
             }
-            console.log('\n--- index.ts ---');
+            console.log("\n--- index.ts ---");
             console.log(code.index);
             if (!options.noMeta) {
                 const meta = generateMeta(node, ast, sourceInfo, [
                     `${ast.fileName}.tsx`,
                     `${ast.fileName}.scss`,
-                    'index.ts',
-                    'meta.json',
+                    "index.ts",
+                    "meta.json",
                 ]);
-                console.log('\n--- meta.json ---');
+                console.log("\n--- meta.json ---");
                 console.log(JSON.stringify(meta, null, 2));
             }
             return;
@@ -148,7 +148,7 @@ export async function generateCommand(input, options) {
             forceOverwrite: options.force,
         });
         if (!result.success) {
-            console.error('[PromptUI] Failed to write files:');
+            console.error("[PromptUI] Failed to write files:");
             for (const error of result.errors ?? []) {
                 console.error(`  - ${error}`);
             }
@@ -156,31 +156,31 @@ export async function generateCommand(input, options) {
         }
         // Gera meta.json
         if (!options.noMeta) {
-            const { writeFile } = await import('node:fs/promises');
-            const { join, dirname } = await import('node:path');
-            const metaPath = join(dirname(result.files.tsx), 'meta.json');
+            const { writeFile } = await import("node:fs/promises");
+            const { join, dirname } = await import("node:path");
+            const metaPath = join(dirname(result.files.tsx), "meta.json");
             const meta = generateMeta(node, ast, sourceInfo, [
                 `${ast.fileName}.tsx`,
                 `${ast.fileName}.scss`,
-                'index.ts',
-                'meta.json',
+                "index.ts",
+                "meta.json",
             ]);
-            await writeFile(metaPath, JSON.stringify(meta, null, 2), 'utf-8');
-            console.log('[PromptUI] Generated files:');
+            await writeFile(metaPath, JSON.stringify(meta, null, 2), "utf-8");
+            console.log("[PromptUI] Generated files:");
             console.log(`  - ${result.files.tsx}`);
             console.log(`  - ${result.files.scss}`);
             console.log(`  - ${result.files.index}`);
             console.log(`  - ${metaPath}`);
         }
         else {
-            console.log('[PromptUI] Generated files:');
+            console.log("[PromptUI] Generated files:");
             console.log(`  - ${result.files.tsx}`);
             console.log(`  - ${result.files.scss}`);
             console.log(`  - ${result.files.index}`);
         }
     }
     catch (error) {
-        const message = error instanceof Error ? error.message : 'Unknown error';
+        const message = error instanceof Error ? error.message : "Unknown error";
         console.error(`[PromptUI] Error: ${message}`);
         process.exit(1);
     }
@@ -192,7 +192,7 @@ function hasExportableChildren(node) {
     if (!node.children)
         return false;
     for (const child of node.children) {
-        if (child.name.startsWith('#'))
+        if (child.name.startsWith("#"))
             return true;
         if (hasExportableChildren(child))
             return true;
@@ -212,10 +212,10 @@ function hasExportableChildren(node) {
 export async function generateAllCommand(options) {
     const exportAll = options.all;
     if (exportAll) {
-        console.log('[PromptUI] Generating ALL top-level frames (--all mode)...');
+        console.log("[PromptUI] Generating ALL top-level frames (--all mode)...");
     }
     else {
-        console.log('[PromptUI] Generating all exportable components...');
+        console.log("[PromptUI] Generating all exportable components...");
     }
     // Carrega config
     const config = await loadConfig();
@@ -223,7 +223,7 @@ export async function generateAllCommand(options) {
     // Valida
     const errors = validateConfig(resolved);
     if (errors.length > 0) {
-        console.error('[PromptUI] Configuration errors:');
+        console.error("[PromptUI] Configuration errors:");
         for (const error of errors) {
             console.error(`  - ${error}`);
         }
@@ -238,12 +238,8 @@ export async function generateAllCommand(options) {
         function findExportable(node, depth = 0, parentId) {
             // Se --all, exporta frames de nível superior (depth <= 2 = document > page > frame)
             // Se não, apenas os que começam com #
-            const isTopLevelFrame = depth === 2 && (node.type === 'FRAME' || node.type === 'COMPONENT');
-            const isMarkedForExport = node.name.startsWith('#');
-            // Debug: mostra frames de nível superior
-            if (depth === 2) {
-                console.log(`  [DEBUG] Top-level frame: "${node.name}" (type: ${node.type}, starts with #: ${isMarkedForExport})`);
-            }
+            const isTopLevelFrame = depth === 2 && (node.type === "FRAME" || node.type === "COMPONENT");
+            const isMarkedForExport = node.name.startsWith("#");
             if (exportAll ? isTopLevelFrame : isMarkedForExport) {
                 // Só adiciona se ainda não existe (evita duplicatas)
                 if (!exportableMap.has(node.id)) {
@@ -265,23 +261,23 @@ export async function generateAllCommand(options) {
         console.log(`[PromptUI] Found ${exportableNodes.length} exportable components`);
         if (exportableNodes.length === 0) {
             if (exportAll) {
-                console.log('[PromptUI] No top-level frames found in the file.');
+                console.log("[PromptUI] No top-level frames found in the file.");
             }
             else {
-                console.log('[PromptUI] No components found. Mark frames with # prefix to export.');
-                console.log('[PromptUI] Or use --all flag to export all top-level frames.');
+                console.log("[PromptUI] No components found. Mark frames with # prefix to export.");
+                console.log("[PromptUI] Or use --all flag to export all top-level frames.");
             }
             return;
         }
         // Ordena por profundidade decrescente (folhas primeiro, pais depois)
         // Isso garante que componentes filhos sejam gerados antes dos pais
         exportableNodes.sort((a, b) => b.depth - a.depth);
-        console.log('[PromptUI] Generation order (leaves first):');
+        console.log("[PromptUI] Generation order (leaves first):");
         for (const { node, depth } of exportableNodes) {
             const hasChildren = hasExportableChildren(node);
-            console.log(`  ${hasChildren ? '📦' : '🍃'} ${node.name} (depth: ${depth}, id: ${node.id.slice(0, 8)}...)`);
+            console.log(`  ${hasChildren ? "📦" : "🍃"} ${node.name} (depth: ${depth}, id: ${node.id.slice(0, 8)}...)`);
         }
-        console.log('');
+        console.log("");
         let successCount = 0;
         let errorCount = 0;
         for (const { node } of exportableNodes) {
@@ -297,21 +293,21 @@ export async function generateAllCommand(options) {
                     successCount++;
                 }
                 else {
-                    console.log(`  ❌ ${node.name}: ${result.errors?.join(', ')}`);
+                    console.log(`  ❌ ${node.name}: ${result.errors?.join(", ")}`);
                     errorCount++;
                 }
             }
             catch (error) {
-                const message = error instanceof Error ? error.message : 'Unknown error';
+                const message = error instanceof Error ? error.message : "Unknown error";
                 console.log(`  ❌ ${node.name}: ${message}`);
                 errorCount++;
             }
         }
-        console.log('');
+        console.log("");
         console.log(`[PromptUI] Done: ${successCount} success, ${errorCount} errors`);
     }
     catch (error) {
-        const message = error instanceof Error ? error.message : 'Unknown error';
+        const message = error instanceof Error ? error.message : "Unknown error";
         console.error(`[PromptUI] Error: ${message}`);
         process.exit(1);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptui-lib/cli",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "private": false,
   "description": "CLI for PromptUI - Figma to React code generator",
   "license": "UNLICENSED",
@@ -45,10 +45,10 @@
     "bin"
   ],
   "dependencies": {
-    "@promptui-lib/core": "0.1.16",
-    "@promptui-lib/figma-parser": "0.1.16",
-    "@promptui-lib/codegen": "0.1.16",
-    "@promptui-lib/mcp-agent": "0.1.16"
+    "@promptui-lib/core": "0.1.18",
+    "@promptui-lib/figma-parser": "0.1.18",
+    "@promptui-lib/codegen": "0.1.18",
+    "@promptui-lib/mcp-agent": "0.1.18"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",