@promptui-lib/figma-parser 0.1.0

package/dist/client/figma-client.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Figma REST API Client
+ * Cliente para comunicação com a API do Figma
+ */
+import type { IFigmaNode, IFigmaFile } from '@promptui-lib/core';
+export interface IFigmaClientConfig {
+    token: string;
+    timeout?: number;
+}
+export interface IGetFileNodesResponse {
+    name: string;
+    lastModified: string;
+    nodes: Record<string, {
+        document: IFigmaNode;
+    }>;
+}
+export declare class FigmaClient {
+    private baseUrl;
+    private token;
+    private timeout;
+    constructor(config: IFigmaClientConfig);
+    /**
+     * Faz requisição autenticada para a API do Figma
+     */
+    private request;
+    /**
+     * Busca arquivo completo do Figma
+     */
+    getFile(fileId: string): Promise<IFigmaFile>;
+    /**
+     * Busca nodes específicos de um arquivo
+     */
+    getFileNodes(fileId: string, nodeIds: string[]): Promise<IGetFileNodesResponse>;
+    /**
+     * Busca um único node
+     */
+    getNode(fileId: string, nodeId: string): Promise<IFigmaNode | null>;
+    /**
+     * Busca imagens de nodes
+     */
+    getImages(fileId: string, nodeIds: string[], format?: 'jpg' | 'png' | 'svg' | 'pdf', scale?: number): Promise<Record<string, string>>;
+    /**
+     * Busca componentes de um arquivo
+     */
+    getComponents(fileId: string): Promise<IFigmaFile['components']>;
+    /**
+     * Busca estilos de um arquivo
+     */
+    getStyles(fileId: string): Promise<IFigmaFile['styles']>;
+    /**
+     * Lista todos os frames/componentes de nível superior
+     */
+    listTopLevelFrames(fileId: string): Promise<IFigmaNode[]>;
+}
+/**
+ * Erro específico da API do Figma
+ */
+export declare class FigmaApiError extends Error {
+    statusCode: number;
+    constructor(message: string, statusCode: number);
+}
+/**
+ * Cria instância do cliente Figma
+ */
+export declare function createFigmaClient(config: IFigmaClientConfig): FigmaClient;
+//# sourceMappingURL=figma-client.d.ts.map

package/dist/client/figma-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"figma-client.d.ts","sourceRoot":"","sources":["../../src/client/figma-client.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEjE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,UAAU,CAAA;KAAE,CAAC,CAAC;CACjD;AAED,qBAAa,WAAW;IACtB,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,OAAO,CAAS;gBAEZ,MAAM,EAAE,kBAAkB;IAKtC;;OAEG;YACW,OAAO;IA0BrB;;OAEG;IACG,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC;IAIlD;;OAEG;IACG,YAAY,CAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EAAE,GAChB,OAAO,CAAC,qBAAqB,CAAC;IAOjC;;OAEG;IACG,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;IAMzE;;OAEG;IACG,SAAS,CACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EAAE,EACjB,MAAM,GAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAa,EAC7C,KAAK,GAAE,MAAU,GAChB,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAQlC;;OAEG;IACG,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAKtE;;OAEG;IACG,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IAK9D;;OAEG;IACG,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,EAAE,CAAC;CAsBhE;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK;IAG7B,UAAU,EAAE,MAAM;gBADzB,OAAO,EAAE,MAAM,EACR,UAAU,EAAE,MAAM;CAK5B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,kBAAkB,GAAG,WAAW,CAEzE"}

package/dist/client/figma-client.js

@@ -0,0 +1,117 @@
+/**
+ * Figma REST API Client
+ * Cliente para comunicação com a API do Figma
+ */
+export class FigmaClient {
+    baseUrl = 'https://api.figma.com/v1';
+    token;
+    timeout;
+    constructor(config) {
+        this.token = config.token;
+        this.timeout = config.timeout ?? 30000;
+    }
+    /**
+     * Faz requisição autenticada para a API do Figma
+     */
+    async request(endpoint) {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), this.timeout);
+        try {
+            const response = await fetch(`${this.baseUrl}${endpoint}`, {
+                headers: {
+                    'X-Figma-Token': this.token,
+                },
+                signal: controller.signal,
+            });
+            if (!response.ok) {
+                const error = await response.text();
+                throw new FigmaApiError(`Figma API error: ${response.status} - ${error}`, response.status);
+            }
+            return response.json();
+        }
+        finally {
+            clearTimeout(timeoutId);
+        }
+    }
+    /**
+     * Busca arquivo completo do Figma
+     */
+    async getFile(fileId) {
+        return this.request(`/files/${fileId}`);
+    }
+    /**
+     * Busca nodes específicos de um arquivo
+     */
+    async getFileNodes(fileId, nodeIds) {
+        const ids = nodeIds.join(',');
+        return this.request(`/files/${fileId}/nodes?ids=${encodeURIComponent(ids)}`);
+    }
+    /**
+     * Busca um único node
+     */
+    async getNode(fileId, nodeId) {
+        const response = await this.getFileNodes(fileId, [nodeId]);
+        const nodeData = response.nodes[nodeId];
+        return nodeData?.document ?? null;
+    }
+    /**
+     * Busca imagens de nodes
+     */
+    async getImages(fileId, nodeIds, format = 'png', scale = 2) {
+        const ids = nodeIds.join(',');
+        const response = await this.request(`/images/${fileId}?ids=${encodeURIComponent(ids)}&format=${format}&scale=${scale}`);
+        return response.images;
+    }
+    /**
+     * Busca componentes de um arquivo
+     */
+    async getComponents(fileId) {
+        const file = await this.getFile(fileId);
+        return file.components;
+    }
+    /**
+     * Busca estilos de um arquivo
+     */
+    async getStyles(fileId) {
+        const file = await this.getFile(fileId);
+        return file.styles;
+    }
+    /**
+     * Lista todos os frames/componentes de nível superior
+     */
+    async listTopLevelFrames(fileId) {
+        const file = await this.getFile(fileId);
+        const frames = [];
+        // Percorre as páginas (CANVAS) do documento
+        for (const page of file.document.children ?? []) {
+            if (page.type === 'CANVAS') {
+                // Adiciona frames de nível superior da página
+                for (const child of page.children ?? []) {
+                    if (child.type === 'FRAME' ||
+                        child.type === 'COMPONENT' ||
+                        child.type === 'COMPONENT_SET') {
+                        frames.push(child);
+                    }
+                }
+            }
+        }
+        return frames;
+    }
+}
+/**
+ * Erro específico da API do Figma
+ */
+export class FigmaApiError extends Error {
+    statusCode;
+    constructor(message, statusCode) {
+        super(message);
+        this.statusCode = statusCode;
+        this.name = 'FigmaApiError';
+    }
+}
+/**
+ * Cria instância do cliente Figma
+ */
+export function createFigmaClient(config) {
+    return new FigmaClient(config);
+}

package/dist/client/index.d.ts

@@ -0,0 +1,3 @@
+export { FigmaClient, FigmaApiError, createFigmaClient } from './figma-client.js';
+export type { IFigmaClientConfig, IGetFileNodesResponse } from './figma-client.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAClF,YAAY,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/client/index.js

@@ -0,0 +1 @@
+export { FigmaClient, FigmaApiError, createFigmaClient } from './figma-client.js';

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @promptui-lib/figma-parser
+ * Figma API client and parser for PromptUI
+ */
+export * from './client/index.js';
+export * from './parser/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+/**
+ * @promptui-lib/figma-parser
+ * Figma API client and parser for PromptUI
+ */
+export * from './client/index.js';
+export * from './parser/index.js';

package/dist/parser/index.d.ts

@@ -0,0 +1,9 @@
+export { parseLayout, parseSizing, parseLayoutAndSizing } from './layout-parser.js';
+export type { ILayoutProperties } from './layout-parser.js';
+export { parseStyles, parseBackgroundColor, parseBorder, parseBorderRadius, parseBoxShadow } from './style-parser.js';
+export type { IStyleProperties } from './style-parser.js';
+export { parseTextStyles, extractTextContent } from './text-parser.js';
+export type { ITextProperties } from './text-parser.js';
+export { parseNode, parseNodes, parseFrameName } from './node-parser.js';
+export type { IParseOptions } from './node-parser.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/parser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACpF,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,WAAW,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACtH,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACvE,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/parser/index.js

@@ -0,0 +1,4 @@
+export { parseLayout, parseSizing, parseLayoutAndSizing } from './layout-parser.js';
+export { parseStyles, parseBackgroundColor, parseBorder, parseBorderRadius, parseBoxShadow } from './style-parser.js';
+export { parseTextStyles, extractTextContent } from './text-parser.js';
+export { parseNode, parseNodes, parseFrameName } from './node-parser.js';

package/dist/parser/layout-parser.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Layout Parser
+ * Converte AutoLayout do Figma para propriedades CSS flexbox
+ */
+import type { IFigmaNode, IStyleProperty } from '@promptui-lib/core';
+export interface ILayoutProperties {
+    display?: IStyleProperty;
+    flexDirection?: IStyleProperty;
+    justifyContent?: IStyleProperty;
+    alignItems?: IStyleProperty;
+    gap?: IStyleProperty;
+    padding?: IStyleProperty;
+    width?: IStyleProperty;
+    height?: IStyleProperty;
+    flex?: IStyleProperty;
+    flexWrap?: IStyleProperty;
+}
+/**
+ * Parseia AutoLayout de um node
+ */
+export declare function parseLayout(node: IFigmaNode): ILayoutProperties;
+/**
+ * Parseia sizing de um node
+ */
+export declare function parseSizing(node: IFigmaNode): ILayoutProperties;
+/**
+ * Combina layout e sizing
+ */
+export declare function parseLayoutAndSizing(node: IFigmaNode): IStyleProperty[];
+//# sourceMappingURL=layout-parser.d.ts.map

package/dist/parser/layout-parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-parser.d.ts","sourceRoot":"","sources":["../../src/parser/layout-parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGrE,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,iBAAiB,CA2F/D;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,iBAAiB,CAwD/D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,EAAE,CASvE"}

package/dist/parser/layout-parser.js

@@ -0,0 +1,147 @@
+/**
+ * Layout Parser
+ * Converte AutoLayout do Figma para propriedades CSS flexbox
+ */
+import { findGapToken, generatePaddingToken } from '@promptui-lib/core';
+/**
+ * Parseia AutoLayout de um node
+ */
+export function parseLayout(node) {
+    const properties = {};
+    // Se não tem AutoLayout, retorna vazio
+    if (!node.layoutMode || node.layoutMode === 'NONE') {
+        return properties;
+    }
+    // Display flex
+    properties.display = {
+        property: 'display',
+        value: 'flex',
+    };
+    // Flex direction
+    properties.flexDirection = {
+        property: 'flex-direction',
+        value: node.layoutMode === 'HORIZONTAL' ? 'row' : 'column',
+    };
+    // Justify content (primary axis)
+    if (node.primaryAxisAlignItems) {
+        const justifyMap = {
+            MIN: 'flex-start',
+            CENTER: 'center',
+            MAX: 'flex-end',
+            SPACE_BETWEEN: 'space-between',
+        };
+        properties.justifyContent = {
+            property: 'justify-content',
+            value: justifyMap[node.primaryAxisAlignItems] ?? 'flex-start',
+        };
+    }
+    // Align items (counter axis)
+    if (node.counterAxisAlignItems) {
+        const alignMap = {
+            MIN: 'flex-start',
+            CENTER: 'center',
+            MAX: 'flex-end',
+            BASELINE: 'baseline',
+        };
+        properties.alignItems = {
+            property: 'align-items',
+            value: alignMap[node.counterAxisAlignItems] ?? 'flex-start',
+        };
+    }
+    // Gap
+    if (node.itemSpacing !== undefined && node.itemSpacing > 0) {
+        const gapToken = findGapToken(node.itemSpacing);
+        properties.gap = {
+            property: 'gap',
+            value: gapToken,
+            token: gapToken.startsWith('$') ? gapToken : undefined,
+        };
+    }
+    // Padding
+    const haspadding = node.paddingTop ||
+        node.paddingRight ||
+        node.paddingBottom ||
+        node.paddingLeft;
+    if (haspadding) {
+        const paddingToken = generatePaddingToken(node.paddingTop ?? 0, node.paddingRight ?? 0, node.paddingBottom ?? 0, node.paddingLeft ?? 0);
+        properties.padding = {
+            property: 'padding',
+            value: paddingToken,
+            token: paddingToken.startsWith('$') ? paddingToken : undefined,
+        };
+    }
+    // Flex wrap
+    if (node.layoutWrap === 'WRAP') {
+        properties.flexWrap = {
+            property: 'flex-wrap',
+            value: 'wrap',
+        };
+    }
+    return properties;
+}
+/**
+ * Parseia sizing de um node
+ */
+export function parseSizing(node) {
+    const properties = {};
+    // Width
+    if (node.layoutSizingHorizontal) {
+        switch (node.layoutSizingHorizontal) {
+            case 'FILL':
+                properties.width = {
+                    property: 'width',
+                    value: '100%',
+                };
+                break;
+            case 'HUG':
+                properties.width = {
+                    property: 'width',
+                    value: 'fit-content',
+                };
+                break;
+            case 'FIXED':
+                if (node.absoluteBoundingBox?.width) {
+                    properties.width = {
+                        property: 'width',
+                        value: `${node.absoluteBoundingBox.width}px`,
+                    };
+                }
+                break;
+        }
+    }
+    // Height
+    if (node.layoutSizingVertical) {
+        switch (node.layoutSizingVertical) {
+            case 'FILL':
+                properties.height = {
+                    property: 'height',
+                    value: '100%',
+                };
+                break;
+            case 'HUG':
+                properties.height = {
+                    property: 'height',
+                    value: 'fit-content',
+                };
+                break;
+            case 'FIXED':
+                if (node.absoluteBoundingBox?.height) {
+                    properties.height = {
+                        property: 'height',
+                        value: `${node.absoluteBoundingBox.height}px`,
+                    };
+                }
+                break;
+        }
+    }
+    return properties;
+}
+/**
+ * Combina layout e sizing
+ */
+export function parseLayoutAndSizing(node) {
+    const layout = parseLayout(node);
+    const sizing = parseSizing(node);
+    const combined = { ...layout, ...sizing };
+    return Object.values(combined).filter((prop) => prop !== undefined);
+}

package/dist/parser/node-parser.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Node Parser
+ * Parser principal que converte node do Figma em AST do componente
+ */
+import type { IFigmaNode, IComponentAST, ComponentLayer, IParsedFrameName } from '@promptui-lib/core';
+export interface IParseOptions {
+    forceLayer?: ComponentLayer;
+    componentName?: string;
+}
+/**
+ * Parseia o nome do frame para extrair informações
+ */
+export declare function parseFrameName(name: string): IParsedFrameName;
+/**
+ * Parser principal - converte node do Figma em AST do componente
+ */
+export declare function parseNode(node: IFigmaNode, options?: IParseOptions): IComponentAST;
+/**
+ * Parseia múltiplos nodes
+ */
+export declare function parseNodes(nodes: IFigmaNode[], options?: IParseOptions): IComponentAST[];
+//# sourceMappingURL=node-parser.d.ts.map

package/dist/parser/node-parser.d.ts.map

@@ -0,0 +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,EAKb,cAAc,EACd,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAc5B,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;AA4ID;;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

@@ -0,0 +1,186 @@
+/**
+ * Node Parser
+ * Parser principal que converte node do Figma em AST do componente
+ */
+import { generateComponentName, generateFileName, generateBEMBlock, generateBEMElement, classifyComponent, extractBaseName, extractVariants, } from '@promptui-lib/core';
+import { parseLayoutAndSizing } from './layout-parser.js';
+import { parseStyles } from './style-parser.js';
+import { parseTextStyles } from './text-parser.js';
+/**
+ * Parseia o nome do frame para extrair informações
+ */
+export function parseFrameName(name) {
+    const isExportable = name.startsWith('#');
+    const isInternal = name.startsWith('_');
+    // Remove prefixos especiais
+    let cleanName = name.replace(/^[#_]/, '');
+    // Extrai props do formato $prop:name
+    const propMatches = cleanName.match(/\$prop:(\w+)/g) ?? [];
+    const extractedProps = propMatches.map((match) => {
+        const propName = match.replace('$prop:', '');
+        return { name: propName, type: 'string' };
+    });
+    // Remove props do nome
+    cleanName = cleanName.replace(/\$prop:\w+/g, '').trim();
+    return {
+        baseName: extractBaseName(cleanName),
+        variants: extractVariants(cleanName),
+        isExportable,
+        isInternal,
+        extractedProps,
+    };
+}
+/**
+ * Converte um node em elemento JSX
+ */
+function nodeToJSX(node, blockName, depth = 0) {
+    const isRoot = depth === 0;
+    const elementName = isRoot ? '' : node.name.toLowerCase().replace(/\s+/g, '-');
+    const className = isRoot
+        ? blockName
+        : generateBEMElement(blockName, elementName);
+    // Determina a tag HTML
+    let tag = 'div';
+    if (node.type === 'TEXT') {
+        tag = 'span';
+    }
+    // Processa filhos
+    const children = [];
+    if (node.type === 'TEXT' && node.characters) {
+        children.push({ type: 'text', value: node.characters });
+    }
+    else if (node.children) {
+        for (const child of node.children) {
+            // Ignora nodes invisíveis ou internos
+            if (child.visible === false || child.name.startsWith('_')) {
+                continue;
+            }
+            children.push(nodeToJSX(child, blockName, depth + 1));
+        }
+    }
+    return {
+        tag,
+        className,
+        props: {},
+        children,
+        selfClosing: children.length === 0 && node.type !== 'TEXT',
+    };
+}
+/**
+ * Coleta estilos de um node recursivamente
+ */
+function collectStyles(node, blockName, depth = 0) {
+    const blocks = [];
+    const isRoot = depth === 0;
+    const elementName = isRoot ? '' : node.name.toLowerCase().replace(/\s+/g, '-');
+    const selector = isRoot
+        ? `.${blockName}`
+        : `.${generateBEMElement(blockName, elementName)}`;
+    // Coleta propriedades deste node
+    const properties = [];
+    // Layout
+    if (node.type === 'FRAME' || node.type === 'COMPONENT' || node.type === 'INSTANCE') {
+        properties.push(...parseLayoutAndSizing(node));
+    }
+    // Estilos visuais
+    properties.push(...parseStyles(node));
+    // Estilos de texto
+    if (node.type === 'TEXT') {
+        properties.push(...parseTextStyles(node));
+    }
+    // Só adiciona bloco se tiver propriedades
+    if (properties.length > 0) {
+        blocks.push({
+            selector,
+            properties,
+        });
+    }
+    // Processa filhos
+    if (node.children) {
+        for (const child of node.children) {
+            if (child.visible === false || child.name.startsWith('_')) {
+                continue;
+            }
+            blocks.push(...collectStyles(child, blockName, depth + 1));
+        }
+    }
+    return blocks;
+}
+/**
+ * Extrai props do componente baseado na estrutura
+ */
+function extractProps(node, parsedName) {
+    const props = [];
+    // Props extraídas do nome
+    for (const prop of parsedName.extractedProps) {
+        props.push({
+            name: prop.name,
+            type: prop.type,
+            required: false,
+        });
+    }
+    // Prop children se tiver filhos de texto
+    const hasTextChildren = node.children?.some((child) => child.type === 'TEXT');
+    if (hasTextChildren) {
+        props.push({
+            name: 'children',
+            type: 'ReactNode',
+            required: false,
+        });
+    }
+    // Prop className padrão
+    props.push({
+        name: 'className',
+        type: 'string',
+        required: false,
+        defaultValue: "''",
+    });
+    return props;
+}
+/**
+ * Parser principal - converte node do Figma em AST do componente
+ */
+export function parseNode(node, options = {}) {
+    const parsedName = parseFrameName(node.name);
+    // Nome do componente
+    const name = options.componentName ?? generateComponentName(node.name);
+    const fileName = generateFileName(name);
+    // Classificação
+    const layer = classifyComponent(node, options.forceLayer);
+    // Classe BEM base
+    const blockName = generateBEMBlock(name);
+    // Props
+    const props = extractProps(node, parsedName);
+    // JSX
+    const jsx = nodeToJSX(node, blockName);
+    // Styles
+    const styles = collectStyles(node, blockName);
+    // Imports
+    const imports = [
+        {
+            from: 'react',
+            named: props.some((p) => p.type === 'ReactNode') ? ['ReactNode'] : undefined,
+            typeOnly: true,
+        },
+        {
+            from: `./${fileName}.scss`,
+            default: undefined,
+            named: undefined,
+        },
+    ].filter((imp) => imp.named || imp.default || imp.from.endsWith('.scss'));
+    return {
+        name,
+        fileName,
+        layer,
+        props,
+        jsx,
+        styles,
+        imports,
+    };
+}
+/**
+ * Parseia múltiplos nodes
+ */
+export function parseNodes(nodes, options = {}) {
+    return nodes.map((node) => parseNode(node, options));
+}

package/dist/parser/style-parser.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Style Parser
+ * Converte fills, strokes, effects do Figma para CSS
+ */
+import type { IFigmaNode, IStyleProperty } from '@promptui-lib/core';
+export interface IStyleProperties {
+    backgroundColor?: IStyleProperty;
+    color?: IStyleProperty;
+    borderRadius?: IStyleProperty;
+    border?: IStyleProperty;
+    boxShadow?: IStyleProperty;
+    opacity?: IStyleProperty;
+}
+/**
+ * Parseia background color de um node
+ */
+export declare function parseBackgroundColor(node: IFigmaNode): IStyleProperty | null;
+/**
+ * Parseia border de um node
+ */
+export declare function parseBorder(node: IFigmaNode): IStyleProperty | null;
+/**
+ * Parseia border-radius de um node
+ */
+export declare function parseBorderRadius(node: IFigmaNode): IStyleProperty | null;
+/**
+ * Parseia box-shadow de um node
+ */
+export declare function parseBoxShadow(node: IFigmaNode): IStyleProperty | null;
+/**
+ * Parseia opacity de um node
+ */
+export declare function parseOpacity(node: IFigmaNode): IStyleProperty | null;
+/**
+ * Parseia todos os estilos visuais de um node
+ */
+export declare function parseStyles(node: IFigmaNode): IStyleProperty[];
+//# sourceMappingURL=style-parser.d.ts.map

package/dist/parser/style-parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-parser.d.ts","sourceRoot":"","sources":["../../src/parser/style-parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,UAAU,EAIV,cAAc,EACf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,gBAAgB;IAC/B,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAWD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAsB5E;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAuBnE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAyBzE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAmCtE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CASpE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,EAAE,CAmB9D"}

package/dist/parser/style-parser.js

@@ -0,0 +1,141 @@
+/**
+ * Style Parser
+ * Converte fills, strokes, effects do Figma para CSS
+ */
+import { rgbaToHex, findColorToken, findRadiusToken, findShadowToken, generateBorderRadius, } from '@promptui-lib/core';
+/**
+ * Extrai cor de um fill sólido
+ */
+function extractSolidColor(fill) {
+    const { r, g, b, a } = fill.color;
+    const opacity = fill.opacity ?? 1;
+    return rgbaToHex(r, g, b, a * opacity);
+}
+/**
+ * Parseia background color de um node
+ */
+export function parseBackgroundColor(node) {
+    if (!node.fills || node.fills.length === 0) {
+        return null;
+    }
+    // Pega o primeiro fill visível sólido
+    const solidFill = node.fills.find((fill) => fill.type === 'SOLID');
+    if (!solidFill) {
+        return null;
+    }
+    const hex = extractSolidColor(solidFill);
+    const token = findColorToken(hex);
+    return {
+        property: 'background-color',
+        value: token ?? hex,
+        token: token ?? undefined,
+    };
+}
+/**
+ * Parseia border de um node
+ */
+export function parseBorder(node) {
+    if (!node.strokes || node.strokes.length === 0 || !node.strokeWeight) {
+        return null;
+    }
+    const stroke = node.strokes[0];
+    if (stroke.type !== 'SOLID') {
+        return null;
+    }
+    const hex = rgbaToHex(stroke.color.r, stroke.color.g, stroke.color.b, stroke.opacity ?? 1);
+    const token = findColorToken(hex);
+    return {
+        property: 'border',
+        value: `${node.strokeWeight}px solid ${token ?? hex}`,
+        token: token ?? undefined,
+    };
+}
+/**
+ * Parseia border-radius de um node
+ */
+export function parseBorderRadius(node) {
+    // Verifica se tem corner radius diferentes
+    if (node.rectangleCornerRadii) {
+        const [tl, tr, br, bl] = node.rectangleCornerRadii;
+        const radius = generateBorderRadius(tl, tr, br, bl);
+        return {
+            property: 'border-radius',
+            value: radius,
+            token: radius.startsWith('$') ? radius : undefined,
+        };
+    }
+    // Corner radius uniforme
+    if (node.cornerRadius !== undefined && node.cornerRadius > 0) {
+        const token = findRadiusToken(node.cornerRadius);
+        return {
+            property: 'border-radius',
+            value: token,
+            token: token.startsWith('$') ? token : undefined,
+        };
+    }
+    return null;
+}
+/**
+ * Parseia box-shadow de um node
+ */
+export function parseBoxShadow(node) {
+    if (!node.effects || node.effects.length === 0) {
+        return null;
+    }
+    // Filtra apenas drop shadows visíveis
+    const shadows = node.effects.filter((effect) => effect.type === 'DROP_SHADOW' && effect.visible);
+    if (shadows.length === 0) {
+        return null;
+    }
+    // Usa o primeiro shadow
+    const shadow = shadows[0];
+    const token = findShadowToken(shadow.radius);
+    if (token) {
+        return {
+            property: 'box-shadow',
+            value: token,
+            token,
+        };
+    }
+    // Gera box-shadow customizado
+    const { offset, radius, spread, color } = shadow;
+    const hex = rgbaToHex(color.r, color.g, color.b, color.a);
+    return {
+        property: 'box-shadow',
+        value: `${offset.x}px ${offset.y}px ${radius}px ${spread ?? 0}px ${hex}`,
+    };
+}
+/**
+ * Parseia opacity de um node
+ */
+export function parseOpacity(node) {
+    if (node.opacity !== undefined && node.opacity < 1) {
+        return {
+            property: 'opacity',
+            value: `${node.opacity}`,
+        };
+    }
+    return null;
+}
+/**
+ * Parseia todos os estilos visuais de um node
+ */
+export function parseStyles(node) {
+    const properties = [];
+    const background = parseBackgroundColor(node);
+    if (background)
+        properties.push(background);
+    const border = parseBorder(node);
+    if (border)
+        properties.push(border);
+    const borderRadius = parseBorderRadius(node);
+    if (borderRadius)
+        properties.push(borderRadius);
+    const boxShadow = parseBoxShadow(node);
+    if (boxShadow)
+        properties.push(boxShadow);
+    const opacity = parseOpacity(node);
+    if (opacity)
+        properties.push(opacity);
+    return properties;
+}

package/dist/parser/text-parser.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Text Parser
+ * Converte estilos de texto do Figma para CSS
+ */
+import type { IFigmaNode, IStyleProperty, ITextStyle } from '@promptui-lib/core';
+export interface ITextProperties {
+    fontFamily?: IStyleProperty;
+    fontSize?: IStyleProperty;
+    fontWeight?: IStyleProperty;
+    lineHeight?: IStyleProperty;
+    letterSpacing?: IStyleProperty;
+    textAlign?: IStyleProperty;
+    textDecoration?: IStyleProperty;
+    textTransform?: IStyleProperty;
+    color?: IStyleProperty;
+}
+/**
+ * Parseia font-family
+ */
+export declare function parseFontFamily(style: ITextStyle): IStyleProperty;
+/**
+ * Parseia font-size
+ */
+export declare function parseFontSize(style: ITextStyle): IStyleProperty;
+/**
+ * Parseia font-weight
+ */
+export declare function parseFontWeight(style: ITextStyle): IStyleProperty;
+/**
+ * Parseia line-height
+ */
+export declare function parseLineHeight(style: ITextStyle): IStyleProperty | null;
+/**
+ * Parseia letter-spacing
+ */
+export declare function parseLetterSpacing(style: ITextStyle): IStyleProperty | null;
+/**
+ * Parseia text-align
+ */
+export declare function parseTextAlign(style: ITextStyle): IStyleProperty | null;
+/**
+ * Parseia text-decoration
+ */
+export declare function parseTextDecoration(style: ITextStyle): IStyleProperty | null;
+/**
+ * Parseia text-transform
+ */
+export declare function parseTextTransform(style: ITextStyle): IStyleProperty | null;
+/**
+ * Parseia cor do texto
+ */
+export declare function parseTextColor(node: IFigmaNode): IStyleProperty | null;
+/**
+ * Parseia todos os estilos de texto de um node
+ */
+export declare function parseTextStyles(node: IFigmaNode): IStyleProperty[];
+/**
+ * Extrai conteúdo de texto de um node
+ */
+export declare function extractTextContent(node: IFigmaNode): string | null;
+//# sourceMappingURL=text-parser.d.ts.map

package/dist/parser/text-parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-parser.d.ts","sourceRoot":"","sources":["../../src/parser/text-parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAUjF,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,cAAc,CAQjE;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,cAAc,CAQ/D;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,cAAc,CAQjE;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAyBxE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAS3E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAevE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAc5E;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAe3E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,IAAI,CAoBtE;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc,EAAE,CA0ClE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAMlE"}

package/dist/parser/text-parser.js

@@ -0,0 +1,196 @@
+/**
+ * Text Parser
+ * Converte estilos de texto do Figma para CSS
+ */
+import { rgbaToHex, findColorToken, findFontSizeToken, findFontWeightToken, findLineHeightToken, findFontFamilyToken, } from '@promptui-lib/core';
+/**
+ * Parseia font-family
+ */
+export function parseFontFamily(style) {
+    const token = findFontFamilyToken(style.fontFamily);
+    return {
+        property: 'font-family',
+        value: token,
+        token: token.startsWith('$') ? token : undefined,
+    };
+}
+/**
+ * Parseia font-size
+ */
+export function parseFontSize(style) {
+    const token = findFontSizeToken(style.fontSize);
+    return {
+        property: 'font-size',
+        value: token,
+        token: token.startsWith('$') ? token : undefined,
+    };
+}
+/**
+ * Parseia font-weight
+ */
+export function parseFontWeight(style) {
+    const token = findFontWeightToken(style.fontWeight);
+    return {
+        property: 'font-weight',
+        value: token,
+        token: token.startsWith('$') ? token : undefined,
+    };
+}
+/**
+ * Parseia line-height
+ */
+export function parseLineHeight(style) {
+    if (style.lineHeightPx) {
+        // Calcula ratio baseado no fontSize
+        const ratio = style.lineHeightPx / style.fontSize;
+        const token = findLineHeightToken(ratio);
+        return {
+            property: 'line-height',
+            value: token,
+            token: token.startsWith('$') ? token : undefined,
+        };
+    }
+    if (style.lineHeightPercent) {
+        const ratio = style.lineHeightPercent / 100;
+        const token = findLineHeightToken(ratio);
+        return {
+            property: 'line-height',
+            value: token,
+            token: token.startsWith('$') ? token : undefined,
+        };
+    }
+    return null;
+}
+/**
+ * Parseia letter-spacing
+ */
+export function parseLetterSpacing(style) {
+    if (style.letterSpacing && style.letterSpacing !== 0) {
+        return {
+            property: 'letter-spacing',
+            value: `${style.letterSpacing}px`,
+        };
+    }
+    return null;
+}
+/**
+ * Parseia text-align
+ */
+export function parseTextAlign(style) {
+    if (!style.textAlignHorizontal || style.textAlignHorizontal === 'LEFT') {
+        return null;
+    }
+    const alignMap = {
+        CENTER: 'center',
+        RIGHT: 'right',
+        JUSTIFIED: 'justify',
+    };
+    return {
+        property: 'text-align',
+        value: alignMap[style.textAlignHorizontal] ?? 'left',
+    };
+}
+/**
+ * Parseia text-decoration
+ */
+export function parseTextDecoration(style) {
+    if (!style.textDecoration || style.textDecoration === 'NONE') {
+        return null;
+    }
+    const decorationMap = {
+        UNDERLINE: 'underline',
+        STRIKETHROUGH: 'line-through',
+    };
+    return {
+        property: 'text-decoration',
+        value: decorationMap[style.textDecoration] ?? 'none',
+    };
+}
+/**
+ * Parseia text-transform
+ */
+export function parseTextTransform(style) {
+    if (!style.textCase || style.textCase === 'ORIGINAL') {
+        return null;
+    }
+    const transformMap = {
+        UPPER: 'uppercase',
+        LOWER: 'lowercase',
+        TITLE: 'capitalize',
+    };
+    return {
+        property: 'text-transform',
+        value: transformMap[style.textCase] ?? 'none',
+    };
+}
+/**
+ * Parseia cor do texto
+ */
+export function parseTextColor(node) {
+    if (!node.fills || node.fills.length === 0) {
+        return null;
+    }
+    const solidFill = node.fills.find((fill) => fill.type === 'SOLID');
+    if (!solidFill || solidFill.type !== 'SOLID') {
+        return null;
+    }
+    const { r, g, b, a } = solidFill.color;
+    const opacity = solidFill.opacity ?? 1;
+    const hex = rgbaToHex(r, g, b, a * opacity);
+    const token = findColorToken(hex);
+    return {
+        property: 'color',
+        value: token ?? hex,
+        token: token ?? undefined,
+    };
+}
+/**
+ * Parseia todos os estilos de texto de um node
+ */
+export function parseTextStyles(node) {
+    if (node.type !== 'TEXT' || !node.style) {
+        return [];
+    }
+    const style = node.style;
+    const properties = [];
+    // Font family
+    properties.push(parseFontFamily(style));
+    // Font size
+    properties.push(parseFontSize(style));
+    // Font weight
+    properties.push(parseFontWeight(style));
+    // Line height
+    const lineHeight = parseLineHeight(style);
+    if (lineHeight)
+        properties.push(lineHeight);
+    // Letter spacing
+    const letterSpacing = parseLetterSpacing(style);
+    if (letterSpacing)
+        properties.push(letterSpacing);
+    // Text align
+    const textAlign = parseTextAlign(style);
+    if (textAlign)
+        properties.push(textAlign);
+    // Text decoration
+    const textDecoration = parseTextDecoration(style);
+    if (textDecoration)
+        properties.push(textDecoration);
+    // Text transform
+    const textTransform = parseTextTransform(style);
+    if (textTransform)
+        properties.push(textTransform);
+    // Color
+    const color = parseTextColor(node);
+    if (color)
+        properties.push(color);
+    return properties;
+}
+/**
+ * Extrai conteúdo de texto de um node
+ */
+export function extractTextContent(node) {
+    if (node.type === 'TEXT' && node.characters) {
+        return node.characters;
+    }
+    return null;
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@promptui-lib/figma-parser",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Figma API client and parser for PromptUI",
+  "license": "UNLICENSED",
+  "author": {
+    "name": "Desiree Menezes",
+    "url": "https://github.com/desireemenezes"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/desireemenezes/promptUI.git",
+    "directory": "packages/figma-parser"
+  },
+  "homepage": "https://github.com/desireemenezes/promptUI#readme",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@promptui-lib/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.3.0",
+    "rimraf": "^5.0.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "clean": "rimraf dist"
+  }
+}