@promptui-lib/figma-parser 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/parser/node-parser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node-parser.d.ts","sourceRoot":"","sources":["../../src/parser/node-parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,UAAU,EACV,aAAa,EAMb,cAAc,EACd,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAiB5B,MAAM,WAAW,aAAa;IAC5B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,CAwB7D;AAkND;;GAEG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,UAAU,EAChB,OAAO,GAAE,aAAkB,GAC1B,aAAa,CA6Cf;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,UAAU,EAAE,EACnB,OAAO,GAAE,aAAkB,GAC1B,aAAa,EAAE,CAEjB"}
+{"version":3,"file":"node-parser.d.ts","sourceRoot":"","sources":["../../src/parser/node-parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,UAAU,EACV,aAAa,EAMb,cAAc,EACd,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAiB5B,MAAM,WAAW,aAAa;IAC5B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,CAwB7D;AAuND;;GAEG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,UAAU,EAChB,OAAO,GAAE,aAAkB,GAC1B,aAAa,CA6Cf;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,UAAU,EAAE,EACnB,OAAO,GAAE,aAAkB,GAC1B,aAAa,EAAE,CAEjB"}

package/dist/parser/node-parser.js

@@ -35,17 +35,20 @@ export function parseFrameName(name) {
 /**
  * Converte um node em elemento JSX
  * Se o filho for um componente (marcado com #), retorna IJSXComponent em vez de JSX inline
+ * @param usedTags - Set para rastrear tags únicas já usadas (ex: <main>)
  */
-function nodeToJSX(node, blockName, depth = 0, parentNode) {
+function nodeToJSX(node, blockName, depth = 0, parentNode, usedTags) {
     const isRoot = depth === 0;
+    // Inicializa usedTags no root para rastrear tags únicas na hierarquia
+    const tagsSet = usedTags ?? new Set();
     // Normaliza o nome (traduz PT->EN)
     const normalizedName = normalizeName(node.name);
     const elementName = isRoot ? '' : normalizedName.replace(/\s+/g, '-');
     const className = isRoot
         ? blockName
         : generateBEMElement(blockName, elementName);
-    // Detecta a tag HTML semântica apropriada
-    const tag = detectSemanticTag(node, parentNode, depth);
+    // Detecta a tag HTML semântica apropriada (passa usedTags para evitar duplicação de <main>)
+    const tag = detectSemanticTag(node, parentNode, depth, tagsSet);
     // Obtém atributos semânticos (href, type, etc.)
     const semanticAttrs = getSemanticAttributes(node, tag, normalizedName);
     // Processa filhos
@@ -72,7 +75,7 @@ function nodeToJSX(node, blockName, depth = 0, parentNode) {
                 });
             }
             else {
-                children.push(nodeToJSX(child, blockName, depth + 1, node));
+                children.push(nodeToJSX(child, blockName, depth + 1, node, tagsSet));
             }
         }
     }

package/dist/parser/semantic-detector.d.ts

@@ -10,8 +10,9 @@ import type { IFigmaNode } from '@promptui-lib/core';
 export declare function normalizeName(name: string): string;
 /**
  * Detecta a tag HTML semântica apropriada
+ * @param usedTags - Set de tags já usadas na hierarquia (para evitar duplicação de <main>)
  */
-export declare function detectSemanticTag(node: IFigmaNode, parentNode?: IFigmaNode, depth?: number): string;
+export declare function detectSemanticTag(node: IFigmaNode, parentNode?: IFigmaNode, _depth?: number, usedTags?: Set<string>): string;
 /**
  * Gera atributos adicionais baseado no contexto
  * Segue boas práticas de SEO e acessibilidade

package/dist/parser/semantic-detector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"semantic-detector.d.ts","sourceRoot":"","sources":["../../src/parser/semantic-detector.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAmQrD;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAalD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,UAAU,EAChB,UAAU,CAAC,EAAE,UAAU,EACvB,KAAK,GAAE,MAAU,GAChB,MAAM,CAqKR;AA+ID;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,MAAM,EACX,cAAc,EAAE,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAgLxB"}
+{"version":3,"file":"semantic-detector.d.ts","sourceRoot":"","sources":["../../src/parser/semantic-detector.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAmQrD;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAalD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,UAAU,EAChB,UAAU,CAAC,EAAE,UAAU,EACvB,MAAM,GAAE,MAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GACrB,MAAM,CAoLR;AA+ID;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,MAAM,EACX,cAAc,EAAE,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAgLxB"}

package/dist/parser/semantic-detector.js

@@ -251,8 +251,9 @@ export function normalizeName(name) {
 }
 /**
  * Detecta a tag HTML semântica apropriada
+ * @param usedTags - Set de tags já usadas na hierarquia (para evitar duplicação de <main>)
  */
-export function detectSemanticTag(node, parentNode, depth = 0) {
+export function detectSemanticTag(node, parentNode, _depth = 0, usedTags) {
     const name = node.name.toLowerCase();
     const normalizedName = normalizeName(name);
     // Texto sempre usa tag apropriada baseada no contexto
@@ -296,14 +297,29 @@ export function detectSemanticTag(node, parentNode, depth = 0) {
     if (SEMANTIC_PATTERNS.nav.test(normalizedName)) {
         return 'nav';
     }
-    // Seções estruturais
+    // Seções estruturais (tags que só devem aparecer uma vez por página)
     if (SEMANTIC_PATTERNS.header.test(normalizedName)) {
-        return depth === 0 ? 'header' : 'header';
+        // Evita duplicação de <header> no nível de página
+        if (usedTags?.has('header')) {
+            return 'div'; // Fallback para div se header já existe
+        }
+        usedTags?.add('header');
+        return 'header';
     }
     if (SEMANTIC_PATTERNS.footer.test(normalizedName)) {
+        // Evita duplicação de <footer> no nível de página
+        if (usedTags?.has('footer')) {
+            return 'div'; // Fallback para div se footer já existe
+        }
+        usedTags?.add('footer');
         return 'footer';
     }
     if (SEMANTIC_PATTERNS.main.test(normalizedName)) {
+        // Evita duplicação de <main> - só pode ter um por página
+        if (usedTags?.has('main')) {
+            return 'section'; // Fallback para section se main já existe
+        }
+        usedTags?.add('main');
         return 'main';
     }
     if (SEMANTIC_PATTERNS.section.test(normalizedName)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptui-lib/figma-parser",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "private": false,
   "description": "Figma API client and parser for PromptUI",
   "license": "UNLICENSED",
@@ -30,7 +30,7 @@
     "dist"
   ],
   "dependencies": {
-    "@promptui-lib/core": "0.1.16"
+    "@promptui-lib/core": "0.1.18"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",